市北互联平台前端仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

751 lines
22 KiB

<template>
<div class="div_main">
<div class="div_search">
<el-form :inline="true"
:model="formData"
ref="ref_searchform"
:label-width="'90px'">
<div>
<el-form-item label="信息范围">
<el-select class="list_item_width_1"
size="small"
v-model.trim="formData.searchType"
placeholder="请选择">
<el-option v-for="item in orgTypeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="本辖区居民">
<el-select class="list_item_width_1"
size="small"
:disabled="formData.searchType != 'current'"
v-model.trim="formData.isResiUser"
placeholder="请选择">
<el-option v-for="item in isResiUserList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="接种时间"
label-width="110px"
prop="startTime">
<el-date-picker v-model="timeRange"
size="small"
type="datetimerange"
@change="handleTimeChange"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<div>
<el-form-item label="姓名"
prop="name">
<el-input v-model="formData.name"
size="small"
class="list_item_width_1"
clearable
placeholder="请输入姓名">
</el-input>
</el-form-item>
<el-form-item label="手机号"
prop="mobile">
<el-input v-model="formData.mobile"
size="small"
class="list_item_width_1"
clearable
placeholder="请输入手机号">
</el-input>
</el-form-item>
<el-form-item label="身份证"
prop="idCard">
<el-input v-model="formData.idCard"
size="small"
class="list_item_width_1"
clearable
placeholder="请输入身份证">
</el-input>
</el-form-item>
<el-button style="margin-left: 30px"
size="small"
class="diy-button--search"
@click="handleSearch">查询</el-button>
<el-button style="margin-left: 10px"
size="small"
class="diy-button--reset"
@click="resetSearch">重置</el-button>
</div>
</div>
</el-form>
</div>
<div class="div_table">
<div class="div_btn">
<!-- <el-button class="diy-button--add"
size="small"
@click="handleAdd">新增</el-button> -->
<el-button style="float: left"
class="diy-button--export"
size="small"
@click="handleExportModule">下载模板</el-button>
<el-upload ref="upload"
:multiple="false"
:show-file-list="false"
:before-upload="beforeUpload"
action=""
accept=".xlsx,.xls"
:limit="1"
:on-exceed="handleExceed"
:http-request="uploadFile">
<el-button style="margin-left: 10px"
size="small"
class="diy-button--delete">导入</el-button>
</el-upload>
<el-button style="float: left; margin-left: 10px"
class="diy-button--reset"
size="small"
@click="handleExport">导出</el-button>
</div>
<el-table class="table"
ref="ref_table"
:data="tableData"
border
:height="tableHeight"
v-loading="tableLoading"
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
style="width: 100%">
<el-table-column label="序号"
header-align="center"
align="center"
type="index"
width="50"></el-table-column>
<el-table-column prop="name"
header-align="center"
align="center"
label="姓名"
width="180">
</el-table-column>
<el-table-column prop="mobile"
header-align="center"
align="center"
label="手机号"
width="180">
</el-table-column>
<el-table-column prop="idCard"
header-align="center"
align="center"
label="身份证"
width="180">
</el-table-column>
<el-table-column prop="inoculateTime"
header-align="center"
align="center"
label="接种时间"
width="180">
</el-table-column>
<el-table-column prop="inoculateAddress"
header-align="center"
align="center"
show-overflow-tooltip
label="接种地点"
min-width="230">
</el-table-column>
<el-table-column prop="manufacturer"
header-align="center"
align="center"
show-overflow-tooltip
label="疫苗厂家"
min-width="180">
</el-table-column>
<el-table-column v-if="isResiUser"
prop="isResiUserShow"
header-align="center"
align="center"
show-overflow-tooltip
label="本辖区居民"
width="120">
</el-table-column>
<el-table-column label="操作"
fixed="right"
width="140"
header-align="center"
align="center"
class="operate">
<template slot-scope="scope">
<el-button type="text"
class="div-table-button--detail"
size="small"
@click="handleDetail(scope.row)">查看</el-button>
<el-button v-if="!isResiUser"
type="text"
class="div-table-button--edit"
size="small"
@click="handleAttention(scope.row)">同步</el-button>
<el-button v-if="
isResiUser &&
scope.row.userType === 'synchro' &&
scope.row.agencyId === agencyId
"
type="text"
class="div-table-button--delete"
size="small"
@click="handleCancelAttention(scope.row)">取消同步</el-button>
</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="pageSize"
layout="sizes, prev, pager, next, total"
:total="total">
</el-pagination>
</div>
</div>
<!-- 修改弹出框 -->
<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="diaClose">
<vaccinForm ref="ref_form"
@dialogCancle="diaClose"
@dialogOk="addFormOk"></vaccinForm>
</el-dialog>
</div>
</template>
<script>
import vaccinForm from "./vaccinForm";
import natForm from "./natInfo/natForm";
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
let loading; // 加载动画
export default {
data () {
return {
loading: false,
total: 0,
pageSize: 20,
pageNo: 0,
tableLoading: false,
isResiUser: true,
agencyId: "",
orgTypeList: [
{
value: "current",
label: "本辖区居民检测记录",
},
{
value: "all",
label: "全部检测记录",
},
],
isResiUserList: [
{
value: "0",
label: "否",
},
{
value: "1",
label: "是",
},
],
timeRange: [],
formData: {
searchType: "current", //当前组织:current 根组织:all
name: "", //姓名
mobile: "", //手机号
idCard: "", //身份证号码
startTime: "", //检测开始时间yyyy-MM-dd HH:mm
endTime: "", //检测结束时间yyyy-MM-dd HH:mm
isResiUser: "", //0:否 1:是
},
tableData: [],
//form相关
formShow: false,
formTitle: "新增",
};
},
components: {
vaccinForm,
natForm,
},
async created () { },
async mounted () {
//获取场所类型
const { user } = this.$store.state;
this.agencyId = user.agencyId;
await this.loadTable();
},
methods: {
async handleSearch () {
this.isResiUser = this.formData.searchType === "current";
await this.loadTable();
this.$nextTick(() => {
this.$refs.ref_table.doLayout(); // 解决表格错位
});
},
async loadTable () {
this.tableLoading = true;
const url = "/epmetuser/icVaccine/vaccine-list";
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/natlist"
let params = {
pageSize: this.pageSize,
pageNo: this.pageNo,
...this.formData,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.total = data.total;
this.tableData = data.list;
this.tableData.forEach((item) => {
item.isResiUserShow = item.isResiUser === "0" ? "否" : "是";
if (item.natResult === "1") {
item.natResultShow = "阳性";
} else if (item.natResult === "0") {
item.natResultShow = "阴性";
} else {
item.natResultShow = "";
}
});
} else {
this.$message.error(msg);
}
this.tableLoading = false;
},
handleTimeChange (time) {
if (time) {
this.formData.startTime = time[0];
this.formData.endTime = time[1];
} else {
this.formData.startTime = "";
this.formData.endTime = "";
}
},
diaClose () {
this.$refs.ref_form.resetData();
this.formShow = false;
},
async handleDetail (row) {
this.formTitle = "详情";
this.formShow = true;
const row1 = { ...row }
let row2 = await this.getInfo(row1);
this.$refs.ref_form.initForm("detail", row2);
},
handleAdd () {
this.formTitle = "新增";
this.formShow = true;
this.$nextTick(() => {
this.$refs.ref_form.initForm("add", null);
});
},
handleEdit (row) {
this.formTitle = "修改";
this.formShow = true;
this.$nextTick(() => {
this.$refs.ref_form.initForm("edit", row.icNatId);
});
},
addFormOk () {
this.formShow = false;
this.loadTable();
},
async getInfo (row) {
const url = "/epmetuser/icVaccine/detail";
let params = {
vaccineId: row.vaccineId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
row.mobile = data.mobile;
row.idCard = data.idCard;
}
return row;
},
async handleDelete (row) {
let message = "确认删除?";
this.$confirm(message, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.deleteNat(row);
})
.catch((err) => { });
},
async deleteNat (row) {
const url = "/epmetuser/icNat/del";
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/del"
let params = {
icNatId: row.icNatId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.$message({
type: "success",
message: "操作成功",
});
this.loadTable();
} else {
this.$message.error(msg);
}
},
async handleCancelAttention (row) {
let message =
"取消同步后将不能在本辖区居民检测记录中查看,确认取消同步?";
this.$confirm(message, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.cancelAttention(row);
})
.catch((err) => { });
},
async cancelAttention (row) {
const url = "/epmetuser/icVaccine/cancelsynchro";
let params = {
icVaccineId: row.vaccineId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.$message({
type: "success",
message: "操作成功",
});
this.loadTable();
} else {
this.$message.error(msg);
}
},
async handleAttention (row) {
this.$confirm("确认将信息同步到本辖区核酸检测信息中心?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.attentionNat(row);
})
.catch((err) => {
if (err == "cancel") {
}
});
},
async attentionNat (row) {
const url = "/epmetuser/icVaccine/synchro";
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/synchro"
let params = {
icVaccineId: row.vaccineId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.$message({
type: "success",
message: "操作成功",
});
this.loadTable();
} else {
this.$message.error(msg);
}
},
//重置搜索条件
resetSearch () {
this.formData = {
searchType: "current", //当前组织:current 根组织:all
name: "", //姓名
mobile: "", //手机号
idCard: "", //身份证号码
startTime: "", //检测开始时间yyyy-MM-dd HH:mm
endTime: "", //检测结束时间yyyy-MM-dd HH:mm
};
this.timeRange = [];
this.pageNo = 0;
// this.loadTable()
},
handleSizeChange (val) {
this.pageSize = val;
this.pageNo = 1;
this.loadTable();
},
handleCurrentChange (val) {
this.pageNo = val;
this.loadTable();
},
//导出表格
async handleExport () {
let title = "核酸检测信息";
const url = "/epmetuser/icVaccine/export";
await this.$http({
method: "POST",
url,
responseType: "blob",
data: this.formData,
})
.then((res) => {
console.log("res----dddd", 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("网络错误");
});
},
// 下载文件
download (data, fileName) {
if (!data) {
return;
}
var csvData = new Blob([data]);
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(csvData, fileName);
}
// for Non-IE (chrome, firefox etc.)
else {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var url = window.URL.createObjectURL(csvData);
a.href = url;
a.download = fileName;
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
},
async handleExportModule () {
let title = "核酸检测信息导入模板";
const url = "/epmetuser/icVaccine/import-template-download";
let params = {};
await this.$http({
method: "POST",
url,
responseType: "blob",
data: params,
})
.then((res) => {
console.log("res----dddd", 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("网络错误");
});
this.$refs.upload.clearFiles();
},
// 上传文件之前的钩子
beforeUpload (file) {
const array = file.name.split(".");
const extension = array[array.length - 1];
// const isLt1M = (file.size / 1024 / 1024) < 5
if (extension !== "xlsx") {
this.$message.error("只能上传xlsx文件!");
return false;
} else {
this.files = file;
this.fileName = file.name;
return true;
}
},
// 上传文件个数超过定义的数量
handleExceed (files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`);
},
async uploadFile () {
if (this.fileName == "") {
this.$message.warning("请选择要上传的文件!");
return false;
}
this.$message({
showClose: true,
message: "导入中,请到系统管理-导入记录中查看进度",
duration: 0,
});
//清空上传列表
this.$refs["upload"].clearFiles();
var url = "/epmetuser/icVaccine/import";
let fileFormData = new FormData();
fileFormData.append("file", this.files); //filename是键,file是值,就是要传的文件,test.zip是要传的文件名
window.app.ajax.post2(
url,
fileFormData,
(data, rspMsg) => {
if (data.code === 0 && data.msg == "success") {
// this.$message.success('导入成功')
this.loadTable();
} else {
// this.$message({
// showClose: true,
// message: rspMsg,
// duration: 0,
// type: "error"
// })
this.$message.error(rspMsg);
}
},
(rspMsg, data) => { },
{ headers: { "Content-Type": "multipart/form-data" } }
);
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: "正在加载……", // 加载中需要显示的文字
background: "rgba(0,0,0,.7)", // 背景颜色
});
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close();
}
},
},
computed: {
tableHeight () {
return this.$store.state.inIframe
? this.clientHeight - 420 + this.iframeHeight
: this.clientHeight - 420;
},
...mapGetters(["clientHeight", "iframeHeight"]),
},
watch: {},
props: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/epidemic.scss";
</style>