526 lines
18 KiB
Vue
526 lines
18 KiB
Vue
<template>
|
|
<el-drawer
|
|
v-model="isShow"
|
|
title="来访登记"
|
|
:destroy-on-close="true"
|
|
size="50%"
|
|
:close-on-press-escape="false"
|
|
:close-on-click-modal="false"
|
|
:show-close="false"
|
|
>
|
|
<template
|
|
v-if="showRegistrationList"
|
|
>
|
|
<el-button type="primary" @click="showFormHandle">新增来访登记</el-button>
|
|
<div class="el-collapse">
|
|
<div class="items" v-for="item in registerList" :key="item.jwCheckinloginId">
|
|
<span>{{ item.name }} - {{ item.sfzId }}</span>
|
|
<div>
|
|
<el-button :icon="ArrowRight" circle @click="carryHandle(item)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<el-form
|
|
ref="queryParamsRef"
|
|
:model="queryParams"
|
|
label-width="auto"
|
|
label-position="left"
|
|
require-asterisk-position="right"
|
|
:rules="rules"
|
|
v-if="showRegistration"
|
|
>
|
|
<DividerHeader title="基本信息"/>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名" required prop="visitorName">
|
|
<el-input placeholder="请填写上访人姓名" v-model="queryParams.visitorName" :disabled="isView"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="上访时间">
|
|
<el-date-picker
|
|
v-model="queryParams.visitTime"
|
|
type="datetime"
|
|
placeholder="请选择上访时间"
|
|
value-format="YYYY-MM-DD hh:mm:ss"
|
|
:disabled-date="disableDate"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="电话">
|
|
<el-input
|
|
placeholder="请填写上访人电话号码"
|
|
v-model="queryParams.visitorMobile"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="工作单位或住址">
|
|
<el-input
|
|
placeholder="请填写上访人工作单位或住址"
|
|
v-model="queryParams.visitorContact"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="性别">
|
|
<el-select
|
|
v-model="queryParams.visitorSex"
|
|
placeholder="请选择性别"
|
|
:disabled="isView"
|
|
>
|
|
<el-option
|
|
v-for="item in sys_user_sex"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="学历">
|
|
<el-select
|
|
v-model="queryParams.visitorDegree"
|
|
placeholder="请选择学历"
|
|
:disabled="isView"
|
|
>
|
|
<el-option
|
|
v-for="item in people_degree"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="来源">
|
|
<el-input placeholder="请填写来源" v-model="queryParams.source" :disabled="isView"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="年龄">
|
|
<el-input
|
|
placeholder="请填写年龄"
|
|
type="number"
|
|
:min="1"
|
|
v-model="queryParams.visitorAge"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="接待人">
|
|
<el-input
|
|
placeholder="请填写接待人"
|
|
v-model="queryParams.receptionist"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="接待人类型">
|
|
<el-select
|
|
v-model="queryParams.receptionistType"
|
|
placeholder="请选择接待人类型"
|
|
:disabled="isView"
|
|
>
|
|
<el-option
|
|
v-for="item in receptionist_type"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="联系住址">
|
|
<el-input
|
|
placeholder="请填写联系住址"
|
|
v-model="queryParams.visitorAddress"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-row :gutter="24">
|
|
<el-col :span="16">
|
|
<el-form-item label="身份证号码">
|
|
<el-input
|
|
placeholder="请填写上访人身份证号码"
|
|
v-model="queryParams.visitorCode"
|
|
type="number"
|
|
@change="idCardChangeHandle"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<!-- @click="visitHistoryRef.showVisitHistory(queryForm.sfzId)" -->
|
|
<el-button
|
|
type="text"
|
|
:disabled="viewHistoryDisable"
|
|
@click="visitHistoryRef.showVisitHistory(queryParams.visitorCode)"
|
|
|
|
>
|
|
异地访问: {{ queryParams.otherPlaces }} 次, 本地访问: {{ queryParams.locals }} 次
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<DividerHeader title="上访情况"/>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="来访类型" required prop="type">
|
|
<el-select
|
|
v-model="queryParams.type"
|
|
placeholder="请选择来访类型"
|
|
:disabled="isView"
|
|
>
|
|
<el-option
|
|
v-for="item in visit_type"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12"></el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="反映事项" required label-position="top" prop="demand">
|
|
<el-input
|
|
placeholder="请填写反映事项"
|
|
type="textarea"
|
|
v-model="queryParams.demand"
|
|
:autosize="{ minRows: 3, maxRows: 9999 }"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="答复口径" required label-position="top" prop="reply">
|
|
<el-input
|
|
placeholder="请填写答复口径"
|
|
type="textarea"
|
|
v-model="queryParams.reply"
|
|
:autosize="{ minRows: 3, maxRows: 9999 }"
|
|
:disabled="isView"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="相关领域" label-position="top">
|
|
<el-select
|
|
v-model="queryParams.field"
|
|
placeholder="请选择领域"
|
|
:disabled="isView"
|
|
>
|
|
<el-option
|
|
v-for="item in visit_field"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="答复形式" label-position="top">
|
|
<el-select
|
|
v-model="queryParams.replyType"
|
|
placeholder="请选择答复形式"
|
|
:disabled="isView"
|
|
>
|
|
<el-option
|
|
v-for="item in visit_reply_type"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="是否重点人员" label-position="top">
|
|
<el-radio-group v-model="queryParams.isKeyPerson" :disabled="isView">
|
|
<el-radio-button
|
|
v-for="item in boolean_yes_no"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
:label="item.label"
|
|
/>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="级别" label-position="top">
|
|
<el-select
|
|
v-model="queryParams.level"
|
|
placeholder="请选择来访级别"
|
|
:disabled="isView"
|
|
>
|
|
<el-option
|
|
v-for="item in visit_level"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<el-button type="primary" @click="updateHandle(queryParamsRef)" v-if="isEdit">提交</el-button>
|
|
<el-button type="primary" @click="createHandle(queryParamsRef)" v-if="isCreate">提交</el-button>
|
|
<el-button @click="changeShowStatus">关闭</el-button>
|
|
</template>
|
|
</el-drawer>
|
|
|
|
<VisitHistory ref="visitHistoryRef"/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {getCurrentInstance, useTemplateRef} from 'vue';
|
|
import {
|
|
addVisit,
|
|
getRegisterList,
|
|
getVisitHistoryCount,
|
|
getVisitInfo,
|
|
updateVisit
|
|
} from '@/api/RegistVisitApi/RegistVisitApi.js';
|
|
import dayjs from 'dayjs';
|
|
import DividerHeader from '@/components/DividerHeader/DividerHeader.vue';
|
|
import {ArrowRight} from '@element-plus/icons-vue';
|
|
import VisitHistory from '@/views/PoliceWork/RegisterVisit/components/VisitHistory.vue';
|
|
|
|
defineOptions({
|
|
name: 'AddEditRegisterVisit'
|
|
})
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
const {
|
|
boolean_yes_no,
|
|
visit_level,
|
|
visit_reply_type,
|
|
visit_field,
|
|
visit_type,
|
|
sys_user_sex,
|
|
people_degree,
|
|
receptionist_type
|
|
} = proxy.useDict(
|
|
'boolean_yes_no', 'visit_level',
|
|
'visit_field', 'visit_type',
|
|
'visit_reply_type', 'sys_user_sex',
|
|
'people_degree', 'receptionist_type'
|
|
)
|
|
|
|
const emit = defineEmits(['refresh'])
|
|
|
|
const queryParamsRef = useTemplateRef('queryParamsRef')
|
|
const visitHistoryRef = useTemplateRef('visitHistoryRef')
|
|
|
|
const isShow = ref(false)
|
|
const isEdit = ref(false)
|
|
const isView = ref(false)
|
|
const isCreate = ref(false)
|
|
const showRegistrationList = ref(false)
|
|
const showRegistration = ref(true)
|
|
|
|
// 控制查看历史数据按钮状态
|
|
const viewHistoryDisable = ref(true)
|
|
|
|
const defaultParams = {
|
|
// 姓名
|
|
visitorName: '',
|
|
// 上访时间
|
|
visitTime: '',
|
|
// 电话
|
|
visitorMobile: '',
|
|
// 工作单位或住址
|
|
visitorContact: '',
|
|
// 身份证号码
|
|
visitorCode: '',
|
|
// 反映事项
|
|
demand: '',
|
|
// 来访类型
|
|
type: '',
|
|
// 相关领域
|
|
field: '',
|
|
// 答复口径
|
|
reply: '',
|
|
// 答复形式
|
|
replyType: '',
|
|
// 是否重点人员
|
|
isKeyPerson: '1',
|
|
// 级别
|
|
level: '',
|
|
// 性别
|
|
visitorSex: '',
|
|
// 学历
|
|
visitorDegree: '',
|
|
// 来源
|
|
source: '',
|
|
// 年龄
|
|
visitorAge: '',
|
|
// 地址
|
|
visitorAddress: '',
|
|
// 接待人
|
|
receptionist: '',
|
|
// 接待人类型
|
|
receptionistType: '',
|
|
// 本地访问次数
|
|
locals: 0,
|
|
// 异地访问次数
|
|
otherPlaces: 0
|
|
}
|
|
const queryParams = ref({...defaultParams})
|
|
const registerList = ref([])
|
|
|
|
const rules = reactive({
|
|
visitorName: [{required: true, message: '请填写来访人姓名', trigger: 'blur'}],
|
|
type: [{required: true, message: '请填写电话', trigger: 'blur'}],
|
|
demand: {required: true, message: '请填写反映事项', trigger: 'blur'},
|
|
reply: {required: true, message: '请填写答复口径', trigger: 'blur'}
|
|
})
|
|
|
|
// 变更显示状态
|
|
const changeShowStatus = () => {
|
|
isShow.value = !isShow.value
|
|
if (!isShow.value) {
|
|
queryParams.value = {...defaultParams}
|
|
isEdit.value = false;
|
|
isView.value = false;
|
|
isCreate.value = false;
|
|
showRegistrationList.value = true;
|
|
showRegistration.value = false;
|
|
}
|
|
}
|
|
|
|
// 显示新增来访登记抽屉
|
|
const showAddRegisterVisit = async () => {
|
|
changeShowStatus()
|
|
await getRegisterVisitList()
|
|
}
|
|
|
|
// 显示编辑来访登记抽屉
|
|
const showEditRegisterVisit = async (row) => {
|
|
changeShowStatus()
|
|
showRegistrationList.value = false;
|
|
showRegistration.value = true;
|
|
isEdit.value = true;
|
|
await getDetail(row)
|
|
}
|
|
|
|
// 显示详情
|
|
const showDetail = async (row) => {
|
|
changeShowStatus()
|
|
showRegistrationList.value = false;
|
|
showRegistration.value = true;
|
|
isView.value = true;
|
|
await getDetail(row)
|
|
}
|
|
defineExpose({showAddRegisterVisit, showEditRegisterVisit, showDetail})
|
|
|
|
const showFormHandle = () => {
|
|
isCreate.value = true;
|
|
showRegistrationList.value = false;
|
|
showRegistration.value = true;
|
|
}
|
|
|
|
const carryHandle = (row) => {
|
|
isCreate.value = true;
|
|
showRegistrationList.value = false;
|
|
showRegistration.value = true;
|
|
queryParams.value = {
|
|
...queryParams.value,
|
|
visitorName: row.name,
|
|
visitorCode: row.sfzId,
|
|
visitTime: dayjs().format('YYYY-MM-DD hh:mm:ss'),
|
|
visitorContact: row.address
|
|
}
|
|
idCardChangeHandle(row.sfzId)
|
|
}
|
|
|
|
// 获取来访登记列表
|
|
const getRegisterVisitList = async () => {
|
|
const res = await getRegisterList()
|
|
registerList.value = res.data
|
|
}
|
|
|
|
// 获取详情
|
|
const getDetail = async (row) => {
|
|
const res = await getVisitInfo(row.visitId)
|
|
queryParams.value = res.data;
|
|
queryParams.value.visitTime = dayjs(res.data.visitTime).format('YYYY-MM-DD hh:mm:ss')
|
|
idCardChangeHandle(res.data.visitorCode)
|
|
}
|
|
|
|
// 新增来访登记
|
|
const createHandle = async (elForm) => {
|
|
if (!elForm) return
|
|
await elForm.validate(async (valid, fields) => {
|
|
if (valid) {
|
|
await addVisit(queryParams.value)
|
|
changeShowStatus()
|
|
emit('refresh')
|
|
}
|
|
})
|
|
}
|
|
|
|
// 修改来访登记
|
|
const updateHandle = async (elForm) => {
|
|
if (!elForm) return
|
|
await elForm.validate(async (valid, fields) => {
|
|
if (valid) {
|
|
await updateVisit(queryParams.value)
|
|
changeShowStatus()
|
|
emit('refresh')
|
|
}
|
|
})
|
|
}
|
|
|
|
// 身份证输入框失去焦点后的事件
|
|
const idCardChangeHandle = async (value) => {
|
|
if (value) {
|
|
const res = await getVisitHistoryCount({
|
|
idCard: value,
|
|
endTime: dayjs().format('YYYY-MM-DD hh:mm:ss')
|
|
})
|
|
queryParams.value.otherPlaces = res.data.otherPlaces
|
|
queryParams.value.locals = res.data.locals
|
|
viewHistoryDisable.value = false;
|
|
} else {
|
|
viewHistoryDisable.value = true;
|
|
}
|
|
}
|
|
|
|
// 禁止今日之前的时间选择
|
|
const disableDate = (date) => {
|
|
return date.getTime() < new Date().getTime()
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.el-collapse {
|
|
.items {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--el-collapse-border-color);
|
|
}
|
|
}
|
|
</style> |