acupuncture/acupuncture-后台/src/views/patientFile/index.vue

<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="" prop="noticeTitle">
				<el-input v-model="queryParams.param.keywords" placeholder="支持姓名、全拼、简拼、手机号吗、证件号码" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="年龄范围" prop="createBy">
				<div class="form-item-age">
					<el-input v-model="queryParams.param.startAge" placeholder="最小年龄" clearable
						@keyup.enter.native="handleQuery" />
					<span>—</span>
					<el-input v-model="queryParams.param.endAge" placeholder="最大年龄" clearable
						@keyup.enter.native="handleQuery" />
				</div>
			</el-form-item>
			<!-- <el-form-item label="建档组织" prop="tenantId">
        <el-select
          v-model="queryParams.param.tenantId"
          placeholder="请选择"
          clearable
        >
          <el-option label="dict.label" value="dict.value" />
        </el-select>
      </el-form-item> -->
			<el-form-item label="数据来源" prop="sourceId">
				<el-select v-model="queryParams.param.sourceId" placeholder="请选择" clearable>
					<el-option label="筛查" :value="0" />
					<el-option label="录入" :value="1" />
					<el-option label="HIS" :value="2" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
					重置
				</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="info" plain icon="el-icon-bottom" size="mini" 
					@click="handleDownload">下载模版</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="listDat" @selection-change="handleSelectionChange" max-height="600">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="姓名" align="center" prop="name" min-width="100" fixed />
			<el-table-column label="性别" align="center" prop="gender" show-overflow-tooltip min-width="100" fixed>
				<template slot-scope="scope">
					<span v-if="scope.row.gender == 0">男</span>
					<span v-if="scope.row.gender == 1">女</span>
				</template>
			</el-table-column>

			<el-table-column label="出生日期" align="center" prop="birthDate" show-overflow-tooltip min-width="150" fixed />
			<el-table-column label="民族" align="center" prop="ethnicity" show-overflow-tooltip min-width="100" />
			<el-table-column label="受教育年限" align="center" prop="educationYears" show-overflow-tooltip min-width="100" />
			<el-table-column label="手机号码" align="center" prop="phone" show-overflow-tooltip min-width="150" />
			<el-table-column label="证件类型" align="center" prop="idCardType" show-overflow-tooltip min-width="200">
				<template slot-scope="scope">
					{{ idCardTypeValue[scope.row.idCardType] }}
				</template>
			</el-table-column>
			<el-table-column label="证件号码" align="center" prop="idCard" show-overflow-tooltip min-width="180" />

			<el-table-column label="建档人" align="center" prop="createBy" show-overflow-tooltip min-width="100" />
			<el-table-column label="建档组织（医院名称）" align="center" prop="tenantName" show-overflow-tooltip min-width="150" />
			<el-table-column label="建档日期" align="center" min-width="140">
				<template slot-scope="scope">
					<span>{{
            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}")
          }}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="来源" align="center" prop="source" show-overflow-tooltip min-width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.source == 0">筛查</span>
					<span v-if="scope.row.source == 1">录入</span>
					<span v-if="scope.row.source == 2">HIS</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" align="center" width="150">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit"
						@click="handleUpdate(scope.row)">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete"
						@click="handleDelete(scope.row)">删除</el-button>
					<el-button size="mini" type="text" icon="el-icon-tickets"
						@click="handleDetails(scope.row)">详情</el-button>
					<el-button size="mini" type="text" icon="el-icon-notebook-1"
						@click="handleArchives(scope.row)">诊疗档案</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改公告对话框 -->
		<el-dialog class="popup" :title="title" :visible.sync="open" width="780px" append-to-body>
			<el-form class="formStep" ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" :disabled="formDisabled" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="性别" prop="gender">
					<el-radio-group v-model="form.gender" :disabled="formDisabled">
						<el-radio :label="0">男</el-radio>
						<el-radio :label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="出生日期" prop="birthDate">
					<el-date-picker :disabled="formDisabled" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						v-model="form.birthDate" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="民族" prop="ethnicity">
					<el-input v-model="form.ethnicity" placeholder="请输入" :disabled="formDisabled" />
				</el-form-item>
				<el-form-item label="受教育年限" prop="educationYears">
					<el-input v-model="form.educationYears" placeholder="请输入" :disabled="formDisabled" />
				</el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="form.phone" placeholder="请输入" :disabled="formDisabled" />
				</el-form-item>
				<el-form-item label="证件类型" prop="idCardType">
					<el-select v-model="form.idCardType" placeholder="请选择" :disabled="formDisabled">
						<el-option v-for="item in idCardType" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="证件号码" prop="idCard">
					<el-input v-model="form.idCard" placeholder="请输入" :disabled="formDisabled" />
				</el-form-item>
				<el-form-item label="现病史" prop="">
					<el-checkbox-group v-model="form.currentIllnessHistory" :disabled="formDisabled">
						<el-checkbox v-for="(item, index) in medicalHistory" :label="item">
						</el-checkbox>
					</el-checkbox-group>
					<el-input v-model="form.currentIllnessHistoryQt" placeholder="其他" :disabled="formDisabled" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 导入患者信息 -->
		<el-dialog title="导入患者档案" :visible.sync="importOpen" width="640px" append-to-body>
			<el-form ref="importform" :model="importform">
				<el-form-item prop="accessUrl">
					<el-upload :limit="1" class="avatar-uploader wj-uploader" :headers="headers"
						:action="uploadFileUrl1" accept=".xlsx, .xls" :before-upload="handleBeforePdfUpload1"
						:on-success="handleUploadPdfAdd1" :file-list="fileList" :show-file-list="true">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将文件拖到此处，或
							<em>点击上传</em>
						</div>
					</el-upload>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import {
		queryPatient,
		patientAdd,
		patientUpd,
		patientDel,
	} from "@/api/patientFile";
	export default {
		name: "Notice",
		dicts: ["sys_notice_status", "sys_notice_type"],
		data() {
			return {
				headers: {
					Authorization: "Bearer " + getToken(),
					deptId: localStorage.getItem("hospitalId"),
				},
				uploadFileUrl1: process.env.VUE_APP_API_QZURL + "/acupuncture/patient/import", // 上传的图片服务器地址
				fileList: [],
				// 现病史
				medicalHistory: [
					"高血压",
					"脑血管病",
					"恶性肿瘤",
					"冠心病",
					"精神疾病",
					"胃和十二指肠溃疡",
					"肥胖症",
					"骨质疏松症",
					"遗传性、先天性疾病",
					"糖尿病",
					"慢性肺系疾病",
					"高脂血症",
					"肝脏疾病(脂肪肝、乙型肝炎、肝硬化等)",
					"过敏性疾病",
					"关节炎",
					"痛风",
					"肾炎、肾病",
					"高脂血症",
				],
				idCardType: [{
						label: "身份证",
						value: 0,
					},
					{
						label: "护照或外国人永居证",
						value: 1,
					},
					{
						label: "港澳居民来往内地通行",
						value: 2,
					},
					{
						label: "台湾居民来往大陆通行证",
						value: 3,
					},
					{
						label: "其他",
						value: 4,
					},
				],
				idCardTypeValue: {
					0: "身份证",
					1: "护照或外国人永居证",
					2: "港澳居民来往内地通行",
					3: "台湾居民来往大陆通行证",
					4: "其他",
				},
				loading: false, // 遮罩层
				ids: [], // 选中数组
				single: true, // 非单个禁用
				multiple: true, // 非多个禁用
				showSearch: true, // 显示搜索条件
				total: 0, // 总条数
				listDat: [{}], // 公告表格数据
				title: "", // 弹出层标题
				open: false, // 是否显示弹出层
				importOpen: false, // 导入弹窗
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					param: {
						keywords: "", //关键字
						startAge: "", //开始年龄
						endAge: "", //结束年龄
						tenantId: "", //建档组织
						createBy: "", //建档人
						sourceId: "", //来源
					},
				},
				formDisabled: false,
				importform: {},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					name: [{
						required: true,
						message: "患者姓名不能为空",
						trigger: "blur"
					}, ],
					gender: [{
						required: true,
						message: "性别不能为空",
						trigger: "change"
					}, ],
					birthDate: [{
						required: true,
						message: "出生日期不能为空",
						trigger: "change"
					}, ],
					phone: [{
						required: true,
						message: "手机号码不能为空",
						trigger: "blur"
					},{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
					],
					ethnicity: [{
						required: true,
						message: "民族不能为空",
						trigger: "blur"
					}, ],
					idCardType: [{
						required: true,
						message: "证件类型不能为空",
						trigger: "blur"
					}, ],
					idCard: [{
						required: true,
						message: "证件号码不能为空",
						trigger: "blur"
					}, ],
					educationYears: [{
						required: true,
						message: "受教育年限不能为空",
						trigger: "blur"
					}, ],
					currentIllnessHistory: [{
						required: true,
						message: "现病史不能为空",
						trigger: "blur",
					}, ],
				},
			};
		},
		created() {
			let idCard = this.$route.query.idCard
			this.queryParams.param.keywords = idCard || ''
			this.getList();
		},
		methods: {
			// 上传成功回 - pdg
			handleUploadPdfAdd1(res) {
				if (res.code == 200) {
					this.importOpen = false;
					this.getList();
					this.$modal.msgSuccess("导入成功");
				} else {
					this.$message.error(res.msg || "导入失败");
					this.fileList = [];
				}
			},
			// 上传前校检格式和大小 - 图片
			handleBeforeUpload1(file) {
				const isLt2M = file.size / 1024 / 1024 < 100;
				// 校检文件大小
				if (!isLt2M) {
					this.$message.error("上传文件大小不能超过 100MB!");
				}
				return isLt2M;
			},
			// 上传前校检格式和大小 - 文件
			handleBeforePdfUpload1(file) {
				const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
				const whiteList = ["xlsx", "xls"];
				if (whiteList.indexOf(fileSuffix) === -1) {
					this.$message.error("上传文件只能是.xlsx, .xls");
					return false;
				}
			},
			/** 查询公告列表 */
			getList() {
				this.loading = true;
				queryPatient(this.queryParams).then((res) => {
					this.listDat = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					name: "", // 姓名
					gender: 0, // 性别
					birthDate: "", // 出生日期
					ethnicity: "", // 民族
					educationYears: "", // 教育程度
					phone: "", // 联系电话
					idCardType: "", // 证件类型
					idCard: "", // 证件号码
					"source": 1,
					currentIllnessHistory: [], // 现病史
					currentIllnessHistoryQt: "", // 现病史
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams.param = {
					keywords: "", //关键字
					startAge: "", //开始年龄
					endAge: "", //结束年龄
					tenantId: "", //建档组织
					createBy: "", //建档人
					sourceId: "", //来源
				}
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "新增患者档案";
				this.formDisabled = false;
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.open = true;
				this.title = "修改患者档案";
				this.formDisabled = false;
				this.form = JSON.parse(JSON.stringify(row));
				// 字符串转数组
				this.form.currentIllnessHistory =
					this.form.currentIllnessHistory?.split(",") || []
			},
			/** 详情按钮操作 */
			handleDetails(row) {
				this.open = true;
				this.title = "患者档案详情";
				this.formDisabled = true;
				this.form = JSON.parse(JSON.stringify(row));
				// 字符串转数组
				this.form.currentIllnessHistory =
					this.form.currentIllnessHistory?.split(",") || []
			},
			/** 诊疗档案 */
			handleArchives(row) {
				this.$router.push({
					path:`/medicalIndex?idCard=${row.idCard}`
				})
			},
			/** 提交按钮 */
			submitForm: function() {
				
				this.$refs["form"].validate((valid) => {
					if (valid) {
					
						if (this.form.id != undefined) {
							patientUpd(this.form).then((response) => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							patientAdd(this.form).then((response) => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},

			/** 删除按钮操作 */
			handleDelete(row) {
				const idList = row.id ? [row.id] : this.ids;
				this.$modal
					.confirm("是否确认删除当前选择的数据？")
					.then(function() {
						return patientDel({
							idList: idList
						});
					})
					.then(() => {
						this.getList();
						this.$modal.msgSuccess("删除成功");
					})
					.catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download1(
					"/patient/export", {
						...this.queryParams.params,
					},
					`患者档案.xlsx`
				);
			},
			/** 下载按钮操作 */
			handleDownload() {
				window.open(`${process.env.VUE_APP_API_QZURL}/acupuncture/profile/PatientTemplate.xlsx`)
				// this.download1(
				// 	"/patient/export", {},
				// 	`患者档案导入模版.xlsx`
				// );
			},
			/** 导入按钮操作 */
			handleImport() {
				this.fileList = []
				this.importOpen = true;
			},
		},
	};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
	.form-item-age {
		display: flex;
		align-items: center;
	}

	.form-item-age span {
		margin: 0 10px;
	}

	.form-item-age>>>.el-input {
		width: 100px;
	}
</style>
<!-- >>> .el-input__inner {
  padding: 0 15px !important;
} -->