visiting-frontend/src/views/PoliceWork/RegisterVisit/components/AddEditRegisterVisit.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"
            :disabled="isView"
            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"/>
                    </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"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电话">
                        <el-input placeholder="请填写上访人电话号码" v-model="queryParams.visitorMobile"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作单位或住址">
                        <el-input placeholder="请填写上访人工作单位或住址" v-model="queryParams.visitorContact"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-select
                            v-model="queryParams.visitorSex"
                            placeholder="请选择性别"
                        >
                            <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="请选择学历"
                        >
                            <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"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input placeholder="请填写年龄" type="number" :min="1" v-model="queryParams.visitorAge"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="联系住址">
                        <el-input placeholder="请填写联系住址" v-model="queryParams.visitorAddress"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-row :gutter="24">
                        <el-col :span="19">
                            <el-form-item label="身份证号码">
                                <el-input
                                    placeholder="请填写上访人身份证号码"
                                    v-model="queryParams.visitorCode"
                                    type="number"
                                    @change="idCardChangeHandle"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <!-- @click="visitHistoryRef.showVisitHistory(queryForm.sfzId)" -->
                            <el-button
                                type="primary"
                                :disabled="viewHistoryDisable"
                                @click="visitHistoryRef.showVisitHistory(queryParams.visitorCode)"
                            >
                                历史信访记录
                            </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="请选择来访类型"
                        >
                            <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 }"
                        />
                    </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 }"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="相关领域" label-position="top">
                        <el-select
                            v-model="queryParams.field"
                            placeholder="请选择领域"
                        >
                            <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="请选择答复形式"
                        >
                            <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">
                            <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="请选择来访级别"
                        >
                            <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, 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
} = proxy.useDict('boolean_yes_no', 'visit_level', 'visit_field', 'visit_type', 'visit_reply_type', 'sys_user_sex', 'people_degree')

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(true)
const showRegistration = ref(false)

// 控制查看历史数据按钮状态
const viewHistoryDisable = ref(true)

const defaultParams = {
    // 姓名
    visitorName: '',
    // 上访时间
    visitTime: '',
    // 电话
    visitorMobile: '',
    // 工作单位或住址
    visitorContact: '',
    // 身份证号码
    visitorCode: '',
    // 反映事项
    demand: '',
    // 来访类型
    type: '',
    // 相关领域
    field: '',
    // 答复口径
    reply: '',
    // 答复形式
    replyType: '',
    // 是否重点人员
    isKeyPerson: '1',
    // 级别
    level: '',
    // 性别
    visitorSex: '',
    // 学历
    visitorDegree: '',
    // 来源
    source: '',
    // 年龄
    visitorAge: '',
    // 地址
    visitorAddress: ''
}
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 = (value) => {
    viewHistoryDisable.value = !value;
}

// 禁止今日之前的时间选择
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>