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.
312 lines
9.8 KiB
312 lines
9.8 KiB
<template> |
|
<el-dialog |
|
:title="mode === 'add' ? '添加登记来件' : '修改登记来件'" |
|
v-model="visibleProxy" |
|
width="80vw" |
|
top="5vh" |
|
style="margin-bottom: 0" |
|
> |
|
<el-scrollbar max-height="76vh"> |
|
<el-form |
|
ref="formRef" |
|
:model="model" |
|
:label-width="150" |
|
class="form-layout" |
|
style="min-height: 66vh" |
|
:rules="rules" |
|
> |
|
<!-- 来源 --> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="来源" prop="sourcePath"> |
|
<el-cascader |
|
v-model="model.sourcePath" |
|
:options="dict.sourceTableAndLevel" |
|
:props="{ emitPath: true, checkStrictly: false }" |
|
clearable |
|
filterable |
|
show-all-levels |
|
style="width: 100%" |
|
placeholder="请选择来源（一级/二级）" |
|
:disabled="mode=== 'edit'" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<el-form-item label="业务类别" prop="handleMethod"> |
|
<el-select |
|
v-model="model.businessTypeCode" |
|
placeholder="业务类别" |
|
clearable |
|
> |
|
<el-option |
|
v-for="item in dict.businessType" |
|
:key="item.id" |
|
:label="item.dictLabel" |
|
:value="item.dictValue" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<!-- 编号 + 受理时间 --> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="编号" prop="originId"> |
|
<el-input |
|
v-model="model.originId" |
|
:placeholder="model.originIdSkip ? '无' : '请输入编号'" |
|
:disabled="mode === 'edit' || model.originIdSkip" |
|
> |
|
<template #append> |
|
<el-checkbox |
|
v-model="model.originIdSkip" |
|
@change="(v) => v && (model.originId = '')" |
|
> |
|
无 |
|
</el-checkbox> |
|
</template> |
|
</el-input> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<el-form-item label="受理时间" prop="discoveryTime"> |
|
<el-date-picker |
|
v-model="model.discoveryTime" |
|
type="datetime" |
|
placeholder="请选择" |
|
value-format="YYYY-MM-DDTHH:mm:ss" |
|
format="YYYY-MM-DD HH:mm:ss" |
|
style="width: 100%" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 来件人姓名 + 身份证号码 --> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="来件人姓名" prop="responderName"> |
|
<el-input |
|
v-model="model.responderName" |
|
:placeholder="model.responderNameSkip ? '无' : '请输入来件人姓名'" |
|
:disabled="model.responderNameSkip" |
|
> |
|
<template #append> |
|
<el-checkbox |
|
v-model="model.responderNameSkip" |
|
@change="(v) => v && (model.responderName = '')" |
|
> |
|
无 |
|
</el-checkbox> |
|
</template> |
|
</el-input> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<el-form-item label="身份证号码" prop="responderIdCode"> |
|
<el-input |
|
v-model="model.responderIdCode" |
|
:placeholder="model.responderIdCodeSkip ? '无' : '请输入身份证号码'" |
|
:disabled="model.responderIdCodeSkip" |
|
> |
|
<template #append> |
|
<el-checkbox |
|
v-model="model.responderIdCodeSkip" |
|
@change="(v) => v && (model.responderIdCode = '')" |
|
> |
|
无 |
|
</el-checkbox> |
|
</template> |
|
</el-input> |
|
</el-form-item> |
|
|
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 联系电话 + 被投诉二级机构 --> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="联系电话" prop="responderPhone"> |
|
<el-input |
|
v-model="model.responderPhone" |
|
:placeholder="model.responderPhoneSkip ? '无' : '请输入联系电话'" |
|
:disabled="model.responderPhoneSkip" |
|
> |
|
<template #append> |
|
<el-checkbox |
|
v-model="model.responderPhoneSkip" |
|
@change="(v) => v && (model.responderPhone = '')" |
|
> |
|
无 |
|
</el-checkbox> |
|
</template> |
|
</el-input> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<el-form-item label="被投诉二级机构" prop="secondDepartId" > |
|
<depart-tree-select |
|
v-model="model.secondDepartId" |
|
:check-strictly="true" |
|
@node-click="(row) => (model.secondDepartName = row.shortName)" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 来件内容 --> |
|
<el-row> |
|
<el-col :span="24"> |
|
<el-form-item label="来件内容" prop="thingDesc"> |
|
<el-input v-model="model.thingDesc" type="textarea" :autosize="{ minRows: 4 }" /> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 涉嫌问题 + 是否重复件 --> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="涉嫌问题" prop="involveProblemIdList"> |
|
<el-select v-model="model.involveProblemIdList" multiple clearable style="width: 100%"> |
|
<el-option |
|
v-for="item in dict.suspectProblem" |
|
:key="item.dictValue" |
|
:value="item.dictValue" |
|
:label="item.dictLabel" |
|
> |
|
<!-- 复选框展示 --> |
|
<el-checkbox :model-value="model.involveProblemIdList.includes(item.dictValue)"> |
|
{{ item.dictLabel }} |
|
</el-checkbox> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<el-form-item label="是否重复件" prop="repeatt"> |
|
<el-radio-group v-model="model.repeatt" clearable> |
|
<el-radio v-for="item in dict.yesNo" :key="item.id" :label="item.dictValue"> |
|
{{ item.dictLabel }} |
|
</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 标签 --> |
|
<el-row> |
|
<el-col :span="18"> |
|
<el-form-item label="标签" prop="tags"> |
|
<el-checkbox-group v-model="model.tags"> |
|
<el-checkbox v-for="item in dict.tagList" :key="item.id" :label="item.dictValue"> |
|
{{ item.dictLabel }} |
|
</el-checkbox> |
|
</el-checkbox-group> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<!-- 办理方式 --> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="办理方式" prop="handleMethod"> |
|
<el-radio-group v-model="model.handleMethod" clearable> |
|
<el-radio v-for="item in dict.handleMethodType" :key="item.id" :label="item.dictValue"> |
|
{{ item.dictLabel }} |
|
</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
</el-scrollbar> |
|
|
|
<template #footer> |
|
<div class="dialog-footer"> |
|
<el-button @click="visibleProxy = false" size="large">取消</el-button> |
|
<el-button type="primary" @click="onSubmit" size="large"> |
|
{{ mode === 'add' ? '添加' : '修改' }} |
|
</el-button> |
|
</div> |
|
</template> |
|
</el-dialog> |
|
</template> |
|
|
|
<script setup> |
|
import { computed, ref, watch } from "vue"; |
|
|
|
const props = defineProps({ |
|
modelValue: Boolean, // 控制弹窗显示 |
|
mode: { type: String, default: "add" }, // add | edit |
|
model: { type: Object, required: true }, // addForm / updateForm |
|
dict: { type: Object, required: true }, |
|
rules: { type: Object, required: true }, |
|
}); |
|
|
|
const emit = defineEmits(["update:modelValue", "submit"]); |
|
|
|
const formRef = ref(); |
|
|
|
const visibleProxy = computed({ |
|
get: () => props.modelValue, |
|
set: (v) => emit("update:modelValue", v), |
|
}); |
|
watch( |
|
() => visibleProxy.value, |
|
(v) => { |
|
if (v) { |
|
// 打开弹窗时，统一重置所有 “无” 勾选状态 |
|
props.model.originIdSkip = false |
|
props.model.responderNameSkip = false |
|
props.model.responderIdCodeSkip = false |
|
props.model.responderPhoneSkip = false |
|
} |
|
} |
|
) |
|
|
|
|
|
// 级联选择 -> 拆字段（和你现在 addForm 的 watch 一样） |
|
watch( |
|
() => props.model.sourcePath, |
|
(path) => { |
|
if (!path || path.length === 0) return; |
|
props.model.sourceTable = (path && path[0]) || ""; |
|
props.model.sourceTableSubOne = (path && path[1]) || ""; |
|
}, |
|
{ deep: true } |
|
); |
|
|
|
|
|
function fillFiledName() { |
|
const code = props.model.businessTypeCode; |
|
const hit = props.dict.businessType?.find( |
|
(d) => String(d.dictValue) === String(code) |
|
); |
|
props.model.businessTypeName = hit?.dictLabel || ""; |
|
} |
|
|
|
async function onSubmit() { |
|
fillFiledName(); |
|
await formRef.value.validate(); |
|
emit("submit"); |
|
} |
|
</script> |
|
|
|
<style> |
|
.form-layout { |
|
padding: 0 34px; |
|
} |
|
|
|
.dialog-footer { |
|
padding: 16px 24px 24px; |
|
} |
|
|
|
</style>
|
|
|