factory_web/src/views/vm/visit_detial.vue

227 lines
8.1 KiB
Vue

<template>
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')"
:close-on-click-modal="false">
<el-container v-loading="loading">
<el-main>
<el-card header="基本信息" shadow="hover">
<el-descriptions :column="2">
<el-descriptions-item label="来访概述:">{{
form.name
}}</el-descriptions-item>
<el-descriptions-item label="来访级别:">{{
levelOptions[form.level]
}}</el-descriptions-item>
<el-descriptions-item label="来访单位:">{{
form.company
}}</el-descriptions-item>
<el-descriptions-item label="来访人数:">
<el-tag size="small">{{ form.count_people }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="来访人员:">
<el-tag size="small" v-for="item in form.visitors_" :key="item.id">{{ item.visitor_.name }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="状态:">{{
state_[form.state]
}}</el-descriptions-item>
<el-descriptions-item label="来访时间:">{{
form.visit_time
}}</el-descriptions-item>
<el-descriptions-item label="离开时间:">{{
form.leave_time
}}</el-descriptions-item>
<el-descriptions-item label="来访事由:">{{
purpose_[form.purpose]
}}</el-descriptions-item>
<el-descriptions-item label="来访详述:">{{
form.description
}}</el-descriptions-item>
<el-descriptions-item label="接待人:" v-if="form.receptionist_">
{{ form.receptionist_.name }}
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card style="margin-top: 8px" shadow="hover" header="访客信息">
<scTable ref="table" :data="peoplelist" row-key="id" height="auto" stripe hideDo hidePagination>
<el-table-column label="#" type="expand">
<template #default="scope">
<el-descriptions :column="3" style="margin-left:8px">
<el-descriptions-item label="返乡时间:">{{ scope.row.return_date }}</el-descriptions-item>
<el-descriptions-item label="来源地:">{{ scope.row.come_place }}</el-descriptions-item>
<el-descriptions-item label="行程轨迹:">{{ scope.row.trip_desc }}</el-descriptions-item>
<el-descriptions-item label="管控措施:">{{ scope.row.measure }}</el-descriptions-item>
<el-descriptions-item label="核酸检测日期:">{{ scope.row.test_date }}</el-descriptions-item>
<el-descriptions-item label="是否报备:">
<el-space v-if="scope.row.is_reported == true">是</el-space>
<el-space v-else>否</el-space>
</el-descriptions-item>
<el-descriptions-item label="健康码:">
<el-image style="width: 100px; height: 100px" :src="scope.row.health_code"
:preview-src-list="[scope.row.health_code]" fit="cover" />
</el-descriptions-item>
<el-descriptions-item label="行程码:">
<el-image style="width: 100px; height: 100px" :src="scope.row.travel_code"
:preview-src-list="[scope.row.travel_code]" fit="cover" />
</el-descriptions-item>
<el-descriptions-item label="核酸报告:">
<el-image style="width: 100px; height: 100px" :src="scope.row.test_report"
:preview-src-list="[scope.row.test_report]" fit="cover" />
</el-descriptions-item>
</el-descriptions>
</template>
</el-table-column>
<el-table-column label="访客姓名" prop="visitor_.name"></el-table-column>
<el-table-column label="访客手机号" prop="visitor_.phone"></el-table-column>
<el-table-column label="访客身份证号" prop="visitor_.id_number"></el-table-column>
<el-table-column label="是否重要访客" prop="is_main">
<template #default="scope">
<el-space v-if="scope.row.is_main == true">是</el-space>
<el-space v-else>否</el-space>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="create_time"></el-table-column>
<el-table-column label="操作" width="60">
<template #default="scope">
<el-button link v-if="scope.row.blt_ == null" type="primary" size="small"
@click="bindCard(scope.row, 10)" v-auth="'blt_bind.create'">绑卡
</el-button>
</template>
</el-table-column>
</scTable>
</el-card>
</el-main>
<ScBind v-model="showBindBlt" :bindBtl="bindBtl" :bindType="bindType" :bindName="bindName"
:bindEmployee="bindEmployee" @success="showBindBltSuccess" @closed="showBindBltClose"></ScBind>
</el-container>
</el-drawer>
</template>
<script>
import ScBind from "@/components/scBind/index.vue";
export default {
emits: ["success", "closed"],
components: {
ScBind
},
data() {
return {
loading: false,
mode: "add",
titleMap: {
add: "新增",
edit: "编辑",
show: "查看",
},
form: {},
rules: {
purpose: [{ required: true, message: "请输入" }],
name: [{ required: true, message: "来访概述" }],
visit_time: [{ required: true, message: "请输入" }],
leave_time: [{ required: true, message: "请输入" }],
receptionist: [{ required: true, message: "请输入" }],
level: [{ required: true, message: "请输入" }],
},
bindName: "",
bindType: 10,
bindBtl: null,
bindEmployee: '',
visible: false,
isSaveing: false,
showBindBlt: false,
selectionFilters: [],
setFiltersVisible: false,
purposeoptions: [
{ id: 10, name: "参观" },
{ id: 20, name: "拜访" },
{ id: 30, name: "面试" },
{ id: 40, name: "开会" },
],
purpose_: {
10: "参观",
20: "拜访",
30: "面试",
40: "开会",
},
levelOptions: {
10: "一般",
20: "重要"
},
state_: {
10: "创建中",
20: "审批中",
30: "待入厂",
40: "进行中",
50: "已完成",
60: "已关闭",
},
receptionistoptions: [],
peoplelist: [],
};
},
mounted() {
},
methods: {
//显示
open(mode = "add") {
this.mode = mode;
this.visible = true;
return this;
},
//访客绑卡
bindCard(row, type) {
debugger;
if (row.visitor_.employee == null) {
this.$message.success("请审批通过后再进行绑卡操作");
} else {
debugger;
this.bindName = row.visitor_.name;
this.bindType = type;
this.bindEmployee = row.visitor_.employee;
if (type === 20) {
this.bindBtl = row.blt_.mac;
}
this.showBindBlt = true;
}
},
showBindBltSuccess(data) {
debugger;
this.showBindBlt = data
this.$refs.table.refresh();
},
showBindBltClose(data) {
debugger;
this.showBindBlt = false;
},
//访客接待人
//表单注入数据
setData(data) {
this.loading = true
this.$API.vm.visit.read.req(data.id).then((res) => {
this.loading = false
this.form = res;
}).catch(e => { this.loading = false });
this.$API.vm.people.list.req({ visit: data.id, page: 0 }).then((res) => {
this.peoplelist = res;
});
},
//设置过滤项
setFilters(filters) {
this.selectionFilters = filters;
this.setFiltersVisible = true;
},
},
};
</script>
<style scoped>
.el-transfer {
--el-transfer-panel-width: 345px !important;
}
</style>