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.
306 lines
10 KiB
306 lines
10 KiB
<template> |
|
<el-dialog |
|
width="50vw" |
|
align-center |
|
title="自建信件" |
|
> |
|
<el-form |
|
ref="formRef" |
|
:model="form" |
|
label-width="200px" |
|
:rules="rules" |
|
style="width: 100%" |
|
> |
|
<el-form-item |
|
label="信件信息" |
|
prop="source" |
|
required |
|
style=" |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: start; |
|
" |
|
> |
|
<template #label> |
|
<span |
|
class="main-label" |
|
style="text-align: left; width: 100%" |
|
>途径来源</span |
|
> |
|
</template> |
|
<el-row style="width: 100%"> |
|
<el-col :span="12"> |
|
<el-select |
|
v-model="form.source" |
|
style="width: 100%" |
|
> |
|
<el-option |
|
v-for="item in dictData.mail_source" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.value" |
|
></el-option> |
|
</el-select> |
|
</el-col> |
|
</el-row> |
|
</el-form-item> |
|
<el-divider /> |
|
<el-row class="title-label"> |
|
<el-col> |
|
<span class="main-label">联系人信息</span> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item |
|
label="姓名" |
|
class="info-input" |
|
prop="contactName" |
|
required |
|
> |
|
<el-input |
|
v-model="form.contactName" |
|
placeholder="请输入姓名" |
|
></el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item |
|
label="性别" |
|
class="info-input" |
|
prop="contactSex" |
|
> |
|
<el-select |
|
v-model="form.contactSex" |
|
placeholder="请选择性别" |
|
> |
|
<el-option label="男" value="M"></el-option> |
|
<el-option label="女" value="F"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item |
|
label="证件号码" |
|
class="info-input" |
|
prop="contactIdCard" |
|
> |
|
<el-input |
|
v-model="form.contactIdCard" |
|
placeholder="请输入证件号码" |
|
></el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item |
|
label="联系电话" |
|
class="info-input" |
|
prop="contactPhone" |
|
> |
|
<el-input |
|
v-model="form.contactPhone" |
|
placeholder="请输入联系电话" |
|
></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-divider /> |
|
<el-row class="title-label"> |
|
<el-col> |
|
<span class="main-label">信件内容</span> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="案件编号" prop="caseNumber" class="info-input"> |
|
<el-input |
|
v-model="form.caseNumber" |
|
placeholder="请输入案件编号" |
|
></el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item |
|
label="被投诉/涉及单位" |
|
prop="involvedDeptId" |
|
class="info-input" |
|
> |
|
<el-select |
|
v-model="form.involvedDeptId" |
|
@change="handleDeptChange" |
|
> |
|
<el-option |
|
v-for="item in optionsData.dept" |
|
:key="item.id" |
|
:value="item.id" |
|
:label="item.name" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-col> |
|
<el-form-item |
|
label="信件内容" |
|
style="width: 100%" |
|
prop="content" |
|
> |
|
<el-input |
|
type="textarea" |
|
v-model="form.content" |
|
placeholder="请您尽量完整的描述您的信件内容，如发生事件、涉及单位、设计对象姓名、警号以及具体事项" |
|
></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-row> |
|
<el-form-item label="上传附件"> |
|
<Upload v-model="form.fileList" accept="image/*" /> |
|
</el-form-item> |
|
</el-row> |
|
<div |
|
style=" |
|
width: 100%; |
|
display: flex; |
|
justify-content: flex-end; |
|
" |
|
> |
|
<el-button |
|
type="primary" |
|
@click="handleSubmit" |
|
style="height: 40px" |
|
>提交信件</el-button |
|
> |
|
</div> |
|
</el-form> |
|
</el-dialog> |
|
</template> |
|
<script lang="ts" setup> |
|
import { ref, reactive } from "vue"; |
|
import type { FormInstance, FormRules } from "element-plus"; |
|
import { useDictOptions } from "@/hooks/useDictOptions"; |
|
import { listSecond } from "@/api/org/department"; |
|
import { useDictData } from "@/hooks/useDictOptions"; |
|
import { addMail } from "@/api/mail"; |
|
import feedback from "@/utils/feedback"; |
|
import { validatorIdCard, validatorPhone } from "@/utils/util"; |
|
|
|
const { dictData } = useDictData(["mail_source"]); |
|
|
|
interface FormData { |
|
source: string; |
|
contactName: string; |
|
contactSex: string; |
|
contactIdCard: string; |
|
contactPhone: string; |
|
caseNumber: string; |
|
involvedDeptId: number; |
|
involvedDeptName: string; |
|
content: string; |
|
fileList: any[]; |
|
attachments: String; |
|
} |
|
|
|
const defaultForm = { |
|
source: "", |
|
contactName: "", |
|
contactSex: "", |
|
contactIdCard: "", |
|
contactPhone: "", |
|
caseNumber: "", |
|
involvedDeptName: "", |
|
content: "", |
|
fileList: [], |
|
}; |
|
const formRef = ref<FormInstance>(); |
|
const form = ref({ |
|
source: "", |
|
contactName: "", |
|
contactSex: "", |
|
contactIdCard: "", |
|
contactPhone: "", |
|
caseNumber: "", |
|
involvedDeptName: "", |
|
content: "", |
|
fileList: [], |
|
}); |
|
|
|
const rules = reactive<FormRules<FormData>>({ |
|
source: [{ required: true, message: "请选择途径来源" }], |
|
contactName: [ |
|
{ required: true, message: "请输入姓名" }, |
|
], |
|
contactIdCard: [ |
|
{ required: true, validator: validatorIdCard }, |
|
], |
|
contactPhone: [ |
|
{ required: true, validator: validatorPhone }, |
|
], |
|
content: [ |
|
{ |
|
required: true, |
|
message: |
|
"请您尽量完整的描述您的信件内容，如发生事件、涉及单位、设计对象姓名、警号以及具体事项", |
|
trigger: "blur" |
|
}, |
|
], |
|
}); |
|
const { optionsData } = useDictOptions<{ |
|
dept: any[]; |
|
}>({ |
|
dept: { |
|
api: listSecond, |
|
}, |
|
}); |
|
|
|
const emit = defineEmits(["success", "close"]); |
|
|
|
|
|
const handleSubmit = () => { |
|
formRef.value.validate((valid: boolean) => { |
|
if (valid) { |
|
form.value.attachments = JSON.stringify(form.value.fileList); |
|
addMail(form.value).then(() => { |
|
emit("success"); |
|
emit("close"); |
|
feedback.msgSuccess("操作成功"); |
|
formRef.value.resetFields() |
|
form.value.fileList = [] |
|
form.value.involvedDeptName = '' |
|
}); |
|
} |
|
}); |
|
}; |
|
|
|
function handleDeptChange(val) { |
|
const dept = optionsData.dept.find((item) => item.id === val); |
|
form.value.involvedDeptName = dept.name; |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.main-label { |
|
width: 80px; |
|
height: 22px; |
|
font-size: 20px; |
|
font-family: PingFang-SC, PingFang-SC; |
|
font-weight: bold; |
|
color: #333333; |
|
line-height: 22px; |
|
} |
|
|
|
.title-label { |
|
margin-bottom: 20px; |
|
} |
|
.info-input { |
|
width: 100%; |
|
} |
|
|
|
.el-upload__inner { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
</style> |