fj-dc-ui/.svn/pristine/e5/e5b4390bbb29ce417c9f1650483e1f5a68c51f30.svn-base

<template>
	<div style="height:100%;width:100%;">
		<el-container style="height:100%;width:100%;">
			<el-aside
				width="320px"
				style="border-right:2px solid #d5d5ff;float:left"
				:style="{'max-height':testHeight+'px','height':testHeight+'px'}"
			>
				<div
					class="tree"
					style="
          height: 100%;
          width: 100%;
          overflow: auto;
          display: inline-flex;"
				>
					<el-tree
						:highlight-current="true"
						style="height:100%;"
						:data="treeData"
						node-key="id"
						:expand-on-click-node="false"
						@node-click="treeNodeClickHandler"
						ref="jigou_tree"
					>
						<div
							class="custom-tree-node"
							slot-scope="{ node, data }"
						>
							<span style="float:left;">{{ data.pnm}}</span>
						</div>
					</el-tree>
				</div>
			</el-aside>
			<el-main
				id="dxdcListMainsk"
				style="padding:5px 20px;"
			>
				<el-row>
					<el-col :span="24">
						<el-form
							:inline="true"
							size="mini"
							class="demo-form-inline"
							style="padding-left: 10px;"
						>
							<el-form-item label="督查状态">
								<el-select
									v-model="dcType"
									clearable
									placeholder="督查状态"
								>
									<el-option
										label="未督查"
										value="0"
									></el-option>
									<el-option
										label="督查中"
										value="1"
									></el-option>
									<el-option
										label="已督查"
										value="2"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="行政区名称">
								<el-input
									v-model="adName"
									clearable
									placeholder="行政区名称"
								></el-input>
							</el-form-item>
							<el-form-item label="督查对象名称">
								<el-input
									v-model="nm"
									placeholder="督查对象名称"
									clearable
								></el-input>
							</el-form-item>
							<!-- <el-form-item label="检查单位">
                <el-select v-model="orgName" clearable placeholder="检查单位">
                  <el-option v-for="item in lyjg" :key="item.id" :label="item.pnm" :value="item.id"></el-option>
                </el-select>
              </el-form-item> -->
							<el-form-item label="所在组">
								<el-autocomplete
									v-model="groupName"
									clearable
									value-key="nm"
									:fetch-suggestions="querySearchAsync"
									placeholder="请输入内容"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item label="督查时间">
								<div style="display: flex;">
									<el-date-picker
										v-model="dateRange"
										type="daterange"
										value-format="yyyy-MM-dd"
										style="width:100%"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
									></el-date-picker>
								</div>
							</el-form-item>
							<el-form-item>
								<el-button
									type="primary"
									@click="onSubmit"
									icon="el-icon-search"
								>查询</el-button>
							</el-form-item>

							<!--<el-form-item style="float:right">-->
							<!--<el-button type="success" style="float:right;margin-left:5px"-->
							<!--@click="showPlDialog"-->
							<!--icon="el-icon-upload2"-->
							<!--:disabled="uploadDisabled"-->
							<!--&gt;批量填报</el-button>-->
							<!--<el-button type="success" style="float:right;"-->
							<!--@click="downloadTemplate"-->
							<!--:icon="downIcon"-->
							<!--&gt;下载模板</el-button>-->
							<!--</el-form-item>-->

							<TongYongTianBaoPl
								v-if="showTianBaoPl"
								:showTianBaoPl="showTianBaoPl"
								titleName="水源地"
								@closePlDialog="closePlDialog"
							>
							</TongYongTianBaoPl>

							<!-- <el-button type="success" style="float:right;margin-left:5px"
                           @click="showPlDialog"
                           icon="el-icon-upload2"
                           :disabled="disabled"
              >批量填报</el-button> -->
							<!-- 水源地批量导入弹窗(报表) -->
							<!-- <dctb-sz-pl v-if="showSpeTianBaoPl" :id="this.currentNodeId" @closePlDialog="closePlDialog"
              ></dctb-sz-pl> -->

						</el-form>
					</el-col>
				</el-row>

				<el-table
					ref="table"
					border
					:data="skDataList"
					style="width: 100%"
					:height="tableHeight"
					v-loading="expLoading"
				>
					<el-table-column
						show-overflow-tooltip
						prop="nm"
						label="督查对象名称"
						min-width="130"
						align="center"
					></el-table-column>
					<el-table-column
						prop="province"
						label="省"  v-if="isXj"
						show-overflow-tooltip
						min-width="100"
						align="center"
					></el-table-column>
					<el-table-column
						prop="city"
            :label="ownAdName"
						show-overflow-tooltip
						min-width="100"
						align="center"
					></el-table-column>
					<el-table-column
						prop="country"
						label="县"
            v-if="isXj"
						show-overflow-tooltip
						min-width="100"
						align="center"
					></el-table-column>
					<!--<el-table-column-->
					<!--prop="riverName"-->
					<!--label="检查单位"-->
					<!--show-overflow-tooltip-->
					<!--min-width="120"-->
					<!--align="center"-->
					<!--&gt;</el-table-column>-->
					<el-table-column
						prop="groupName"
						label="所在组"
						show-overflow-tooltip
						min-width="150"
						align="center"
					></el-table-column>
					<el-table-column
						prop="state"
						label="督查状态"
						align="center"
						min-width="130"
					>
						<template slot-scope="scope">
							<span
								style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
								v-if="scope.row.state == 0"
							>未督查</span>
							<span
								style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"
								v-if="scope.row.state == 1"
							>督查中</span>
							<span
								style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"
								v-if="scope.row.state == 2"
							>已督查</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="location"
						show-overflow-tooltip
						min-width="200"
						label="详细地址"
					></el-table-column>
					<!--<el-table-column show-overflow-tooltip prop="insName" min-width="180" label="管理单位"></el-table-column>-->
					<el-table-column
						prop="intm"
						label="创建时间"
						show-overflow-tooltip
						min-width="120"
						align="center"
					></el-table-column>
					<!--<el-table-column-->
					<!--prop="upTm"-->
					<!--label="更新时间"-->
					<!--align="center"-->
					<!--:formatter="formatDate"-->
					<!--min-width="120"-->
					<!--&gt;</el-table-column>-->
					<el-table-column
						prop="wrsInfoStat"
						label="2020年度水资源管理工作年中检查表填报状态"
						align="center"
						min-width="220"
					>
						<template slot-scope="scope">
							<p
								style="cursor:pointer;color:#F56C6C;"
								v-if="scope.row.wrsInfoStat == 0 || !scope.row.wrsInfoStat"
							>待填报</p>
							<p
								style="cursor:pointer;color:#fbb56d"
								v-if="scope.row.wrsInfoStat == 1"
							>未完成</p>
							<p
								style="cursor:pointer;color:#67C23A"
								v-if="scope.row.wrsInfoStat == 2"
							>已完成</p>
						</template>
					</el-table-column>
					<el-table-column
						prop="wswmInfoStat"
						label="2020年度节约用水管理情况检查表填报状态"
						align="center"
						min-width="220"
					>
						<template slot-scope="scope">
							<p
								style="cursor:pointer;color:#F56C6C;"
								v-if="scope.row.wswmInfoStat == 0 || !scope.row.wswmInfoStat"
							>待填报</p>
							<p
								style="cursor:pointer;color:#fbb56d"
								v-if="scope.row.wswmInfoStat == 1"
							>未完成</p>
							<p
								style="cursor:pointer;color:#67C23A"
								v-if="scope.row.wswmInfoStat == 2"
							>已完成</p>
						</template>
					</el-table-column>

<!--					<el-table-column-->
<!--						prop="wswmInfoStat"-->
<!--						label="2019年节水管理情况遗留问题复核状态"-->
<!--						align="center"-->
<!--						min-width="220"-->
<!--					>-->
<!--						<template slot-scope="scope">-->
<!--							<span-->
<!--								style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"-->
<!--								v-if="scope.row.yLState == -1 ||-->
<!--                    !scope.row.yLState"-->
<!--							>未复核</span>-->
<!--							<span-->
<!--								style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"-->
<!--								v-if="scope.row.yLState == 1"-->
<!--							>已复核</span>-->
<!--							<span-->
<!--								style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"-->
<!--								v-if="scope.row.yLState == 2"-->
<!--							>已复核</span>-->
<!--						</template>-->
<!--					</el-table-column>-->
					<el-table-column
						align="center"
						label="操作"
						min-width="250"
						v-if="ownPriv('manage')"
						fixed="right"
					>
						<template slot-scope="scope">
							<el-button
								size="mini"
								type="success"
								plain
								@click="toAddMember('编辑',scope.row)"
							>编辑</el-button>
							<el-button
								size="mini"
								type="danger"
								plain
								@click="deleteMember(scope.row)"
							>删除</el-button>
							<el-button
								size="mini"
								type="danger"
								plain
								@click="submitHandler(scope.row)"
							>提交</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					background
					:pager-count="5"
					:current-page="pageIndex"
					:page-size="pageSize"
					:page-sizes="[10, 20, 30, 40, 50, 100]"
					layout="sizes, total, prev, pager, next"
					:total="total"
					@current-change="pageIndexChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</el-main>
			<twozxdc
				v-if="showSpeTianBao"
				:rowData="rowData"
				:currentObjectRgstrId="currentObjectRgstrId"
				:currentResCode="currentResCode"
				:currentAdcode="currentAdcode"
				:currentObjectId="currentObjectId"
				:currentObjectName="currentObjectName"
				:showOrEdit="showOrEdit"
				:gdX="gdX"
				:gdY="gdY"
				:adName="adName"
				:location="location"
				:swhsId="swhsId"
				:baseForm="baseForm"
				@cancelHandler="cancelHandler"
				@addShuiKuSuccess="addShuiKuSuccess"
			></twozxdc>

    </el-container>
	</div>
</template>

<script>
import request from "../../utils/gw_ajax_request.js";
import { dateFormat } from "../../utils/gw_date.js";
import { deleteDcdxByObjid, getList_slfp, getList_anninsp } from "../../api/duChaTianBao.js";
import provTreeList from "../../widgets/provTreeList.vue";
import twozxdc from "../duChaTianBao/2020zxdcszyjs/twozxdc.vue";
import TongYongTianBaoPl from "../duChaTianBao/dctbBatchImp/tongYongTianbao_piliang.vue";
import { exportModel } from "@util/gw_exportModel";

export default {
	components: {
		provTreeList: provTreeList,
		twozxdc: twozxdc,
		TongYongTianBaoPl: TongYongTianBaoPl,
	},
	props: [],

	data () {
		return {
			dateRange: [],
			nm: "",
			lyjg: [],
			engScales: [
				{ id: "1", name: "大型" },
				{ id: "2", name: "中型" },
				{ id: "3", name: "小型" },
				{ id: "4", name: "其他" },
			],
			engScale: "",
			orgName: "",
			groupName: "",
			groupId: "",
			groups: [],
			sttm: "",
			entm: "",
			adName: "",
			treeData: [],
			dxdcMainHeight: window.innerHeight - 345,
			testHeight: window.innerHeight - 111,
			skDataList: [],
			pageIndex: 1,
			pageSize: 20,
			total: 0,
			tableHeight: 0,
			currentResCode: "",
			currentResName: "",
			currentObjectId: "",
			currentObjectRgstrId: "",
			currentObjectInfoObject: null,
			showSpeTianBao: false,
			currentAdCode: "",
			currentNodeId: "",
			rsvrName: "",
			dcType: "",
			rowData: "",
			uploadDisabled: true,
			showTianBaoPl: false,
			downIcon: "el-icon-download",
			expLoading: false,
			currentEngScale: "",
			currentGroupId: "",
			currentAdcode: "",
			currentObjectName: "",
			showOrEdit: "",
			gdX: 0,
			gdY: 0,
			location: '',
			baseForm: {},
			problemLastYearVisible: false,
			swhsId: '',
			swhsCode: ''
		};
	},
	computed: {
		persId () {
			return localStorage.getItem("userid")
				? localStorage.getItem("userid")
				: "1098101939614724096";
		},
		isAdmin: function () {
			return localStorage.getItem("isAdmin")
				? localStorage.getItem("isAdmin")
				: "";
		}
	},
	mounted () {
		// this.getLeftTreeData();
		this.$nextTick(function () {
			this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
			let _self = this;
			window.onresize = function () {
				_self.tableHeight = window.innerHeight - _self.$refs.table.$el.offsetTop - 50
			}
		})
		this.getSkDataList();
		this.getAllGroup();
		// let h = document.getElementById("dxdcListMainsk").offsetHeight;
		// this.tableHeight = h - 100;
		// console.log("tableHeight" + this.tableHeight);

	},
	activated () {
		this.getLeftTreeData();
		this.currentNodeId = "";
		this.rsvrName = "";
		this.dcType = "";
		this.getSkDataList();
	},
	watch: {
		currentNodeId (n, o) {
			this.getSkDataList();
		},
		groupName (n, o) {
			if (n == "") {
				this.groupId = "";
			}
		}
	},

	methods: {


    //获取所有的组
		getAllGroup () {
			var _self = this;
			request.get("/dc/user/getGroupByPersid", {
				params: { persid: this.persId, ptype: "14" }
			}).then(res => {
				if (res.success) {
					_self.groups = res.data;
				}
			});
		},
		querySearchAsync (queryString, cb) {
			var restaurants = this.groups;
			var results = queryString
				? restaurants.filter(this.createStateFilter(queryString))
				: restaurants;

			clearTimeout(this.timeout);
			this.timeout = setTimeout(() => {
				cb(results);
			}, 1500 * Math.random());
		},
		createStateFilter (queryString) {
			return state => {
				return state.nm.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
			};
		},
		handleSelect (item) {
			console.log(item);
			this.groupId = item.id;
		},
		getLeftTreeData () {
			var _self = this;
			_self.lyjg = [];
			request
				.get("/dc/organization/base/getAllNode", {
					params: { userId: this.persId, orgType: "101" }
				})
				.then(res => {
					let data = res.data;
					data.forEach(ele => {
						if (ele.pid == null || ele.pid == "") {
							ele.pid = "101";
						}
						if (ele.id.length == 6) {
							_self.lyjg.push(ele);
						}
					});
					data = _self.getTrees(data);
					_self.treeData = data;

					// _self.duChaType = _self.treeData[0].id.substring(2,3);
				});
		},
		//格式化树形数据
		getTrees (list) {
			//@wxcwater重写方法 适应多个树
			let highLevelLength = 99; //预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
			let _self = this;
			list.forEach((item, index) => {
				item["pidLength"] = item.pid && item.pid != "" ? item.pid.length : 0;
				if (highLevelLength > item.pidLength) {
					highLevelLength = item.pidLength;
				}
			});
			let heightLevelNode = [];
			list.forEach((item, index) => {
				if (highLevelLength >= item.pidLength) {
					heightLevelNode.push(item);
				}
			});

			list.forEach((item, index) => {
				heightLevelNode.forEach(pItem => {
					_self.addTreeNode(pItem, item);
				});
			});
			return heightLevelNode;
		},

		addTreeNode: function (treeNode, leafNode) {
			let _self = this;
			if (!treeNode.hasOwnProperty("children")) {
				treeNode["children"] = [];
			}
			if (leafNode.pid == treeNode.id) {
				treeNode.children.push(leafNode);
				return;
			}
			treeNode.children.forEach(item => {
				_self.addTreeNode(item, leafNode);
			});
		},
		treeNodeClickHandler: function (data, node, tree) {
			this.currentNodeId = data.id;
		},
		provTreeSelectChangeHandler: function (params) {
			this.currentAdCode = params.likeCode;
			this.getSkDataList();
		},
		formatDate (row, column) {
			if (row.upTm) {
				return dateFormat(row.upTm, "yyyy-MM-dd");
			}
			if (row.intm) {
				return dateFormat(row.intm, "yyyy-MM-dd");
			}
		},
		formatGateType: function (row, column) {
			return row.type == "1" ? '水库'
				: row.type == "2" ? '湖泊'
					: row.type == "3" ? '河流'
						: row.type == "9" ? '其他' : '';
		},

		formatEngScal: function (row, column) {
			return row.engScal == "1" ? '大型'
				: row.engScal == "2" ? '中型'
					: row.engScal == "3" ? '小型' : '其他'
		},
		getSkDataList: function () {
			console.log("保存后更新");
			const _self = this;
			getList_anninsp(
				_self.persId,
				_self.pageSize,
				_self.pageIndex,
				_self.nm,
				_self.dcType,
				_self.adName != null ? '' : '',
				_self.dateRange && _self.dateRange.length > 1 ? _self.dateRange[0] : null,
				_self.dateRange && _self.dateRange.length > 1 ? _self.dateRange[1] : null,
				_self.groupId,
				_self.currentNodeId
			).then(res => {
				_self.skDataList = res.data.list;
				_self.total = res.data.total;
			});
		},
		onSubmit () {
			this.getSkDataList();
		},
		toAddMember (type, rowData) {
			var _self = this;
			this.rowData = rowData;
			_self.showOrEdit = 'edit';
			_self.swhsId = rowData.code;
			_self.currentObjectName = rowData.nm;
			_self.currentResCode = rowData.code;
			_self.currentObjectRgstrId = rowData.id;
			_self.currentObjectId = rowData.objId;
			_self.showSpeTianBao = true;
			_self.gdX = rowData.gdX;
			_self.gdY = rowData.gdY;
			_self.adName = rowData.country;
			_self.location = rowData.location;

		},
		cancelHandler () {
			this.showSpeTianBao = false;
		},
		addShuiKuSuccess () {
			this.getSkDataList();
		},

		deleteMember (val) {
			console.log(val);
			var _self = this;
			this.$confirm('此操作将 “' + val.nm + '” 从督查对象列表中删除，是否继续？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				deleteDcdxByObjid(val.objId, 14).then(res => {
					if (res.success) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					};
					this.getSkDataList();
				}
				);
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});

		},

		submitHandler (rowData) {
			console.log(rowData);
			var _self = this;
			if (!rowData.wrsInfoStat) {
				this.$message({
					message: "请填写2020年度水资源管理工作年中检查表！",
					type: "warning"
				});
				return;
			}
			if (!rowData.wswmInfoStat) {
				this.$message({
					message: "请填写2020年度节约用水管理情况检查表！",
					type: "warning"
				});
				return;
			}
			this.$confirm("请确认所有信息填报完毕？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				let formObj = {
					id: rowData.id,
					state: "2"
				};
				request.post("/bis/insp/wint/rgstr/updateWintRgstrState", formObj).then(res => {
					if (res.success) {
						_self.addShuiKuSuccess();
						_self.$message.success("提交成功");
					} else {
						_self.cancelHandler();
					}
				});
			}).catch(() => { });
		},
		pageIndexChange (val) {
			console.log(val);
			this.pageIndex = val;
			this.getSkDataList();
		},
		handleSizeChange (val) {
			this.pageSize = val;
			this.getSkDataList();
		},
		// 下载模板
		async downloadTemplate () {

			await this.downloadTemplateSet();
			this.uploadDisabled = false;

		},
		async downloadTemplateSet () {
			let url = '/pdcApi/dc/imp/dcInfo/download?userId=' + this.persId + '&orgType=013&orgIds=' + this.groupId;
			let downloadName = "水源地督查填报表.xls";
			let type = "get";
			await exportModel(type, url, downloadName);
		},
		showPlDialog () {
			this.showTianBaoPl = true
		},
		closePlDialog (val) {
			this.showTianBaoPl = false
			this.getSkDataList();
		},
	}


}
</script>

<style>
#dcdxHeader {
	padding: 15px 20px;
}
#dxdcFooter {
	text-align: center;
}
#dxdcAside {
	border: 1px solid #d5d5ff;
}
.el-table .warning-row {
	background: oldlace;
}

.el-table .success-row {
	background: #f0f9eb;
}
</style>