epmet-oper-gov-lingshan/src/views/modules/lingshan/shzl/tsrq/index.vue

<template>
	<div class="resi-container">
		<el-card ref="searchCard" class="search-card">
			<el-form
				ref="searchForm"
				:inline="true"
				:model="fmData"
				class="demo-form-inline"
			>
				<el-form-item label="所属组织" prop="gridId">
					<el-cascader
						class="customer_cascader"
						ref="myCascader"
						v-model="agencyIdArray"
						:options="orgOptions"
						:props="orgOptionProps"
						:show-all-levels="false"
						@change="handleChangeAgency"
						clearable
					></el-cascader>
				</el-form-item>

				<el-form-item label="特殊人群类型" prop="specialType">
					<el-select
						v-model="fmData.specialType"
						placeholder="请选择"
						size="small"
						clearable
						class="item_width_2"
					>
						<el-option
							v-for="item in specialTypeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="人员姓名" prop="name">
					<el-input
						v-model="fmData.name"
						class="resi-cell-input"
						size="small"
						clearable
						placeholder="请输入"
					>
					</el-input>
				</el-form-item>

				<el-form-item label="手机号" prop="mobile">
					<el-input
						v-model="fmData.mobile"
						class="resi-cell-input"
						size="small"
						clearable
						placeholder="请输入"
					>
					</el-input>
				</el-form-item>

				<el-form-item label="身份证号" prop="idCard">
					<el-input
						v-model="fmData.idCard"
						class="resi-cell-input"
						size="small"
						clearable
						placeholder="请输入"
					>
					</el-input>
				</el-form-item>

				<el-form-item>
					<el-button
						class="diy-button--search"
						size="small"
						@click="handleSearch"
						>查询</el-button
					>
					<el-button
						class="diy-button--reset"
						size="small"
						@click="resetForm('searchForm')"
						>重置</el-button
					>
				</el-form-item>
			</el-form>
		</el-card>

		<el-card class="resi-card-table">
			<div class="resi-row-btn">
				<el-button
					class="diy-button--add"
					size="small"
					@click="handleAdd"
					>新增</el-button
				>

				<el-button
					class="diy-button--export"
					size="small"
					@click="displayed.popImport = true"
					>批量导入</el-button
				>

				<el-button
					@click="handleChu"
					class="diy-button--reset"
					size="small"
					>导出</el-button
				>
			</div>

			<el-table
				:data="tableData"
				border
				style="width: 100%"
				class="resi-table"
				:height="maxTableHeight"
			>
				<el-table-column
					label="序号"
					type="index"
					align="center"
					width="50"
				/>
				<el-table-column
					prop="orgNamePath"
					label="所属组织"
					align="center"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					prop="specialTypeDisplay"
					align="center"
					label="特殊人群类型"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					prop="name"
					align="center"
					label="人员姓名"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					prop="mobile"
					label="手机号"
					align="center"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					prop="idCard"
					align="center"
					label="身份证号"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					prop="address"
					align="center"
					label="家庭地址"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					prop="createdTime"
					align="center"
					label="创建时间"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					prop="updatedTime"
					align="center"
					label="更新时间"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					fixed="right"
					label="操作"
					align="center"
					width="220"
				>
					<template slot-scope="scope">
						<el-button
							@click="handleWatch(scope.$index)"
							type="text"
							size="small"
							>查看</el-button
						>

						<el-button
							@click="handleEdit(scope.$index)"
							v-if="
								true ||
								scope.row.agencyId == $store.state.user.agencyId
							"
							type="text"
							size="small"
							class="div-table-button--edit"
							>修改</el-button
						>

						<el-popconfirm
							title="删除之后无法回复，确认删除？"
							v-if="
								true ||
								scope.row.agencyId == $store.state.user.agencyId
							"
							@onConfirm="handleDel(scope.row, scope.$index)"
							@confirm="handleDel(scope.row, scope.$index)"
						>
							<el-button
								slot="reference"
								type="text"
								size="small"
								class="div-table-button--delete"
								style="margin-left: 10px"
								>删除</el-button
							>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page.sync="pageNo"
					:page-sizes="[20, 50, 100, 200]"
					:page-size="parseInt(pageSize)"
					layout="sizes, prev, pager, next, total"
					:total="total"
				>
				</el-pagination>
			</div>
		</el-card>

		<!-- 修改弹出框 -->
		<el-dialog
			:visible.sync="formShow"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:title="formTitle"
			width="850px"
			top="5vh"
			class="dialog-h"
			@closed="handleClose"
		>
			<edit-form
				ref="eleEditForm"
				:displayed="formShow"
				@dialogCancle="handleClose"
				@dialogOk="handleEditSuccess"
			></edit-form>
		</el-dialog>

		<pop-import
			v-if="displayed.popImport"
			@close="displayed.popImport = false"
		/>
	</div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import dict from "@/views/modules/lingshan/shzl/tsrq/dict";
import editForm from "./cpts/edit";
import popImport from "./cpts/pop-import";
import axios from "axios";

export default {
	components: { editForm, popImport },
	data() {
		return {
			openSearch: false,

			formShow: false,
			formTitle: "特殊人群信息",

			pageNo: 1,
			pageSize: window.localStorage.getItem("pageSize") || 20,
			total: 1,

			tableData: [],

			agencyIdArray: [],
			orgOptions: [],
			orgOptionProps: {
				multiple: false,
				value: "agencyId",
				label: "agencyName",
				children: "subAgencyList",
				checkStrictly: true,
			},

			specialTypeOptions: dict.specialType,

			fmData: {
				orgId: "",
				orgType: "",
				specialType: "",
				name: "",
				mobile: "",
				idCard: "",
			},

			importBtnTitle: "导入",
			importLoading: false,

			//积分记录
			displayed: {
				popImport: false,
			},
		};
	},
	computed: {
		maxTableHeight() {
			return this.$store.state.inIframe
				? this.clientHeight - 360 + this.iframeHeigh
				: this.clientHeight - 360;
		},
		...mapGetters(["clientHeight", "iframeHeight"]),
	},
	watch: {
		"fmData.createTime": function (val) {
			if (Array.isArray(val) && val.length == 2) {
				this.fmData.startTime = val[0];
				this.fmData.endTime = val[1];
			} else {
				this.fmData.startTime = "";
				this.fmData.endTime = "";
			}
		},
		popImport(val) {
			if (!val) {
				this.getTableData();
			}
		},
	},
	mounted() {
		this.getOrgTreeList();
		this.getTableData();
	},
	methods: {
		getOrgTreeList() {
			const { user } = this.$store.state;
			this.$http
				.post("/gov/org/customeragency/agencygridtree", {})
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg);
					} else {
						console.log("获取组织树成功", res.data);
						this.orgOptions = [];
						this.orgOptions.push(res.data);
					}
				})
				.catch(() => {
					return this.$message.error("网络错误");
				});
		},

		handleChangeAgency() {
			let nodes = this.$refs["myCascader"].getCheckedNodes();
			if (nodes && nodes.length > 0) {
				let obj = nodes()[0].data;
				this.fmData.orgType = obj.level === "grid" ? "grid" : "agency";
				this.fmData.orgId =
					this.agencyIdArray.length > 0
						? this.agencyIdArray[this.agencyIdArray.length - 1]
						: "";
			} else {
				this.fmData.orgType = "";
				this.fmData.orgId = "";
			}
		},

		async handleExportModule() {
			let url =
				"/heart/iccommunityselforganization/import-template-download";

			let params = {};
			await this.$http({
				method: "POST",
				url,
				responseType: "blob",
				data: params,
			})
				.then((res) => {
					// this.download(res.data, title + '.xls')
					if (res.headers["content-disposition"]) {
						let fileName = window.decodeURI(
							res.headers["content-disposition"]
								.split(";")[1]
								.split("=")[1]
						);
						console.log("filename", fileName);
						let blob = new Blob([res.data], {
							type: "application/vnd.ms-excel",
						});
						var url = window.URL.createObjectURL(blob);
						var aLink = document.createElement("a");
						aLink.style.display = "none";
						aLink.href = url;
						aLink.setAttribute("download", fileName);
						document.body.appendChild(aLink);
						aLink.click();
						document.body.removeChild(aLink); //下载完成移除元素
						window.URL.revokeObjectURL(url); //释放掉blob对象
					} else this.$message.error("下载失败");
				})
				.catch((err) => {
					console.log("err", err);
					return this.$message.error("网络错误");
				});
		},
		// 上传大图标成功
		handleExcelSuccess(res, file) {
			if (res.code === 0 && res.msg === "success") {
				console.log("resss---ppp", res);
			} else {
				this.$message.error(res.msg);
			}
		},
		handleProgress(event, file, fileList) {
			console.log("percentage", file.percentage);
		},

		beforeExcelUpload(file) {
			console.log("file", file);
			const isType = file.type === "application/vnd.ms-excel";
			const isTypeComputer =
				file.type ===
				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
			const fileType = isType || isTypeComputer;
			const isLt1M = file.size / 1024 / 1024 < 10;
			if (!fileType) {
				this.$message.error("上传文件只能是xls/xlsx格式！");
			}

			if (!isLt1M) {
				this.$message.error("上传文件大小不能超过 10MB!");
			}
			return fileType && isLt1M;
		},
		async uploadHttpRequest(file) {
			this.importLoading = true;
			this.importBtnTitle = "正在上传中...";
			this.$message({
				showClose: true,
				message: "导入中，请到系统管理-导入记录中查看进度",
				duration: 0,
			});
			const fmData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
			fmData.append("file", file.file); //添加文件对象
			await this.$http
				.post(
					"/heart/iccommunityselforganization/importcommunityselforganization",
					fmData
				)
				.then((res) => {
					console.log("res-up", res);
					if (res.data.code == 0 && res.data.msg == "success") {
						// this.$message.success('导入成功')
						this.getTableData();
					} else this.$message.error(res.data.msg);
				})
				.catch((err) => {
					console.log("失败", err);
					file.onError(); //上传失败的文件会从文件列表中删除
					// this.$message.error('导入失败')
				});
			// axios({
			//   url:
			//     window.SITE_CONFIG["apiURL"] +
			//     "/heart/iccommunityselforganization/importcommunityselforganization",
			//   method: "post",
			//   data: fmData,
			//   // responseType: "blob",
			// })
			//   .then((res) => {
			//     this.importLoading = false;
			//     this.importBtnTitle = "导入";
			//     console.log("resresresresresresres", res);

			//     this.getTableData();
			//     if (res.data.code == 0) {
			//       return this.$message.success(res.data.data || "导入成功");
			//     } else {
			//       return this.$message.error(res.data.msg);
			//     }
			//   })
			//   .catch((err) => {
			//     console.log("失败", err);
			//   });
			this.importLoading = false;
			this.importBtnTitle = "导入";
			this.$refs.upload.clearFiles();
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pageSize = val;
			window.localStorage.setItem("pageSize", val);
			this.getTableData();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.pageNo = val;
			this.getTableData();
		},

		handleClose() {
			this.formShow = false;
		},
		handleSearch(val) {
			console.log(this.fmData);
			this.pageNo = 1;
			this.getTableData();
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.handleSearch();
		},
		async handleAdd() {
			this.formShow = true;
			this.formTitle = "新增";
			await nextTick();
			console.log(this.$refs);
			this.$refs.eleEditForm.initForm("add");
		},

		async handleChu() {
			const url =
				"/heart/iccommunityselforganization/exportcommunityselforganization";
			const { pageSize, pageNo, fmData } = this;
			axios({
				url: window.SITE_CONFIG["apiURL"] + url,
				method: "post",
				data: {
					pageSize,
					pageNo,
					...fmData,
				},
				responseType: "blob",
			})
				.then((res) => {
					let fileName = window.decodeURI(
						res.headers["content-disposition"]
							.split(";")[1]
							.split("=")[1]
					);
					console.log("filename", fileName);
					let blob = new Blob([res.data], {
						type: "application/vnd.ms-excel",
					});
					var url = window.URL.createObjectURL(blob);
					var aLink = document.createElement("a");
					aLink.style.display = "none";
					aLink.href = url;
					aLink.setAttribute("download", fileName);
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink); //下载完成移除元素
					window.URL.revokeObjectURL(url); //释放掉blob对象
				})
				.catch((err) => {
					console.log("获取导出情失败", err);
					return this.$message.error("网络错误");
				});
		},

		async handleWatch(rowIndex) {
			this.formShow = true;
			this.formTitle = "查看";
			await nextTick();
			this.$refs.eleEditForm.initForm("detail", this.tableData[rowIndex]);
		},

		async handleEdit(rowIndex) {
			this.formShow = true;
			this.formTitle = "编辑";
			await nextTick();
			this.$refs.eleEditForm.initForm("edit", this.tableData[rowIndex]);
		},

		handleEditSuccess() {
			this.handleClose();
			this.getTableData();
		},

		async handleDel(rowData, rowIndex) {
			console.log(rowData, rowIndex);
			const url = "/epmetuser/lingShan/specialCrowd/deleteByResi";
			const { tableData } = this;

			const { data, code, msg } = await requestPost(url, {
				resiId: tableData[rowIndex].resiId,
			});

			if (code === 0) {
				this.$message.success("删除成功！");
				this.getTableData();
			} else {
				this.$message.error(msg);
				// this.$message.success("操作失败！");
			}
		},

		async getTableData() {
			const url = "/epmetuser/lingShan/specialCrowd/listSpecialCrowd";
			const { pageSize, pageNo, fmData } = this;
			const { data, code, msg } = await requestGet(url, {
				pageSize,
				pageNo,
				...fmData,
			});
			if (code === 0) {
				console.log("列表请求成功！！！！！！！！！！！！！！");
				this.total = data.total || 0;
				this.tableData = data.list
					? data.list.map((item) => {
							return item;
					  })
					: [];
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";

.resi-container .resi-card-table {
	::v-deep .el-table th {
		color: #fff;
		background-color: rgba(33, 149, 254, 1);
		// border-right: 1px solid rgba(33, 149, 254, 1);
	}
}
.resi-table {
	::v-deep .el-button--text {
		text-decoration: underline;
	}
}
.resi-card-table {
	margin-top: 20px;
}
.resi-row-btn {
	margin-bottom: 13px;
	.upload-btn {
		display: inline-block;
		margin: 0 10px;
	}
}

.resi-btns {
	margin-top: 20px;
	text-align: center;
}

.resi-container .resi-card {
	position: relative;
	overflow: visible;
}
</style>