<template>
|
<div
|
class="box-card"
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
>
|
<div class="box-content">
|
<!-- 列表 -->
|
<div>
|
<!-- 新增按钮 -->
|
<div class="fl-al mr-b-10">
|
<el-button type="primary" @click="handleAction('add')"
|
>新增{{ pageTitle }}记录</el-button
|
>
|
<el-button @click="handleAction('back')">返回</el-button>
|
</div>
|
<!-- 列表 -->
|
<div class="fl-co mr-t-20">
|
<div
|
class="record-row-content mr-b-30"
|
v-for="(it, ix) in tableLsit"
|
:key="ix"
|
>
|
<div class="fl-al mr-b-10">
|
<div class="record-row-info">
|
{{ pageTitle }}时间：{{ it.checkTime }}
|
</div>
|
<div class="record-row-info">
|
{{ pageTitle }}人员：{{ it.username }}
|
</div>
|
<div class="record-row-info" v-if="pageTitle==='排查'">
|
处理情况：{{ statusList[it.status] }}
|
</div>
|
</div>
|
<div class="record-row-des">备注：{{ it.remark }}</div>
|
</div>
|
<!-- 分页 -->
|
<div class="bottom-page-current">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
<!-- 新增编辑弹框 -->
|
<el-dialog
|
:close-on-click-modal="false"
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
:before-close="handleClose"
|
center
|
append-to-body
|
>
|
<el-form
|
:model="formInfo"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="120px"
|
class="demo-ruleForm"
|
>
|
<el-form-item :label="pageTitle + '时间'" prop="checkTime">
|
<el-date-picker
|
v-model="formInfo.checkTime"
|
type="datetime"
|
class="iw-220"
|
:placeholder="'请选择' + pageTitle + '时间'"
|
range-separator="至"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
/>
|
</el-form-item>
|
<el-form-item label="处理情况" prop="status" v-if="pageTitle==='排查'">
|
<el-select
|
class="iw-220"
|
v-model="formInfo.status"
|
placeholder="选择处理情况"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="item in treatmentLabel"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input
|
type="textarea"
|
class="textarea-width"
|
:rows="5"
|
resize="none"
|
placeholder="请输入备注"
|
maxlength="300"
|
clearable
|
show-word-limit
|
v-model="formInfo.remark"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="fl-cen">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="handleAction('submit')"
|
:loading="btnloading"
|
>提交</el-button
|
>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { objCopyPro, showToast } from "../../utils/common";
|
import { TREATMENT_DATA_FORM } from "../../utils/dictionary";
|
export default {
|
data() {
|
return {
|
pageTitle: "",
|
loading: false, // 页面loading
|
btnloading: false, // 提交按钮loading
|
tableLsit: [], // 列表
|
statusList: [
|
"",
|
"集中隔离",
|
"居家隔离",
|
"健康监测",
|
"失联或尚需追踪",
|
"排除风险",
|
"暂未管控",
|
],
|
columnList: [
|
{ type: "index" },
|
{ label: "姓名", key: "name" },
|
{ label: "手机号", key: "phone" },
|
{ type: "custom", label: "预警信息推送", slot: "pushStatus" },
|
{
|
type: "custom",
|
label: "操作",
|
width: "150",
|
slot: "btn",
|
},
|
], // 列表属性
|
dialogTitle: "", // 弹框标题
|
dialogVisible: false, // 弹框状态
|
pageNum: 1, // 当前页
|
pageSize: 10, // 当前条数
|
total: 0, // 总数
|
formInfo: {
|
checkTime: "",
|
remark: "",
|
status: 1,
|
}, // 表单
|
rules: {
|
checkTime: [
|
{
|
required: true,
|
message: "请选择日期",
|
trigger: "change",
|
},
|
],
|
status: [
|
{ required: true, message: "请选择处理情况", trigger: "change" },
|
],
|
}, // 表单验证
|
searchVal: {
|
name: "",
|
pushStatus: "",
|
},
|
treatmentLabel: TREATMENT_DATA_FORM,
|
id: "",
|
};
|
},
|
mounted() {
|
this.pageTitle = this.$route.query.type === "2" ? "跟进" : "排查";
|
this.id = this.$route.query.id;
|
this.getTable();
|
},
|
methods: {
|
// 获取列表
|
getTable() {
|
this.loading = true;
|
const requestData = Object.assign(
|
{
|
page: this.pageNum,
|
size: this.pageSize,
|
memberId: this.id,
|
},
|
this.searchVal
|
);
|
this.$api.post("comActAcidCheckRecord/queryAll", requestData, (res) => {
|
this.loading = false;
|
this.tableLsit = res.records;
|
this.total = res.total;
|
});
|
},
|
// 切换条数
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.getTable();
|
},
|
// 切换页
|
handleCurrentChange(val) {
|
this.pageNum = val;
|
this.getTable();
|
},
|
// 页面操作
|
async handleAction(type, row) {
|
switch (type) {
|
// 返回
|
case "back": {
|
this.$router.back();
|
break;
|
}
|
// 新增
|
case "add": {
|
this.dialogTitle = "新增";
|
this.dialogVisible = true;
|
break;
|
}
|
// 编辑
|
case "edit": {
|
this.dialogTitle = "编辑";
|
this.$api.get(`comActAcidMember/${row.id}`, {}, (res) => {
|
this.formInfo = objCopyPro(this.formInfo, res);
|
this.dialogVisible = true;
|
});
|
break;
|
}
|
// 删除
|
case "delete": {
|
ElMessageBox.confirm("此操纵将永久删除该数据,是否继续?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "info",
|
}).then(async () => {
|
await $api.get("comActAcidMember/del", { id: row.id }, () => {
|
showToast("删除成功");
|
this.getTable();
|
});
|
});
|
break;
|
}
|
// 提交
|
case "submit": {
|
this.$refs.ruleForm.validate((val) => {
|
if (val) {
|
this.btnloading = true;
|
if (this.dialogTitle === "新增") {
|
this.formInfo.memberId = this.id;
|
this.formInfo.username = "";
|
this.$api.post("comActAcidCheckRecord", this.formInfo, () => {
|
this.btnloading = false;
|
showToast(this.dialogTitle + "成功");
|
this.handleClose();
|
this.getTable();
|
});
|
} else {
|
this.$api.post("comActAcidMember/update", this.formInfo, () => {
|
this.btnloading = false;
|
showToast(this.dialogTitle + "成功");
|
this.handleClose();
|
this.getTable();
|
});
|
}
|
}
|
});
|
break;
|
}
|
// 搜索
|
case "search": {
|
this.pageNum = 1;
|
this.pageSize = 10;
|
this.getTable();
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
// 关闭弹框
|
handleClose() {
|
this.$refs.ruleForm.resetFields(); // 重置form表单
|
this.formInfo = {
|
name: "",
|
phone: "",
|
pushStatus: 1,
|
};
|
this.dialogVisible = false;
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.record-row-info {
|
width: 300px;
|
}
|
.record-row-des {
|
width: 700px;
|
}
|
.bottom-page-current {
|
padding-left: 150px;
|
}
|
.box-content {
|
padding-top: 20px;
|
}
|
.textarea-width {
|
width: 350px;
|
}
|
</style>
|
