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.
250 lines
9.1 KiB
250 lines
9.1 KiB
<template> |
|
<el-dialog v-model="visible" width="50vw" top="4vh" class="dialog-header-nopadding" align-center |
|
style="--el-dialog-padding-primary: 10px"> |
|
<template #header="" style="display: flex;align-items: center;justify-content: space-between;"> |
|
<div class="dialog-header"> |
|
<span class="dialog-title">自建信件</span> |
|
</div> |
|
</template> |
|
<div class="dialog-body"> |
|
<el-form ref="formRef" :model="form" label-width="200px" :rules="rules" inline="true" style="width: 100%;"> |
|
<el-form-item label="信件信息" prop="mailSource" 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.mailSource" style="width: 100%"> |
|
<el-option label="自建" value="self"></el-option> |
|
<el-option label="网上" value="online"></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="name" required> |
|
<el-input v-model="form.name" placeholder="请输入姓名"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="性别" class="info-input" prop="gender"> |
|
<el-select v-model="form.gender" placeholder="请选择性别"> |
|
<el-option label="男" value="male"></el-option> |
|
<el-option label="女" value="female"></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="idNumber"> |
|
<el-input v-model="form.idNumber" placeholder="请输入证件号码"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="联系电话" class="info-input" prop="phone"> |
|
<el-input v-model="form.phone" 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="案件编号" class="info-input" prop="caseNumber"> |
|
<el-input v-model="form.caseNumber" placeholder="请输入案件编号"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="被投诉/涉及单位" class="info-input" prop="deptName"> |
|
<el-tree-select class="flex-1" v-model="form.threeDeptName" :data="optionsData.dept" clearable |
|
node-key="id" filterable :props="{ |
|
value: 'name', |
|
label: 'name', |
|
disabled(data: any) { |
|
return !!data.isStop |
|
} |
|
}" check-strictly :default-expand-all="true" placeholder="请选择被投诉/涉及单位" |
|
style="width: 100%;" /> |
|
</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="上传附件" prop="fileList"> |
|
<Upload v-model="form.fileList" /> |
|
</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> |
|
</div> |
|
</el-dialog> |
|
</template> |
|
<script lang="ts" setup> |
|
import { ref, reactive } from 'vue' |
|
import { ElMessage } from 'element-plus'; |
|
import type { FormInstance, FormRules } from 'element-plus'; |
|
import { useDictOptions } from "@/hooks/useDictOptions"; |
|
import { deptLists } from '@/api/org/department' |
|
const visible = ref(false) |
|
interface FormData { |
|
mailSource: string, |
|
name: string, |
|
gender: string, |
|
idNumber: string, |
|
phone: string, |
|
caseNumber: string, |
|
threeDeptName: string, |
|
content: string, |
|
fileList: any[] |
|
} |
|
const formRef = ref<FormInstance>() |
|
const form = ref({ |
|
mailSource: '', |
|
name: '', |
|
gender: '', |
|
idNumber: '', |
|
phone: '', |
|
caseNumber: '', |
|
threeDeptName: '', |
|
content: '', |
|
fileList: [] |
|
}) |
|
const validateName = (rule: any, value: string, callback: any) => { |
|
if (!value) { |
|
callback(new Error('请输入姓名')) |
|
} else if (value.length < 2) { |
|
callback(new Error('姓名长度不能少于2位')) |
|
} else if (!/^[a-zA-Z\u4e00-\u9fa5]+$/.test(value)) { |
|
callback(new Error('请输入中文姓名')) |
|
} else { |
|
callback() |
|
} |
|
} |
|
const validatePhone = (rule: any, value: string, callback: any) => { |
|
if (!value) { |
|
callback(new Error('请输入手机号码')) |
|
} else if (!/^1[3-9]\d{9}$/.test(value)) { |
|
callback(new Error('请输入正确的手机号码')) |
|
} else { |
|
callback() |
|
} |
|
} |
|
const validateIdNumber = (rule: any, value: string, callback: any) => { |
|
if (!value) { |
|
callback(new Error('请输入身份证号码')) |
|
} else if (!/^\d{15}|\d{18}$/.test(value)) { |
|
callback(new Error('请输入正确的身份证号码')) |
|
} else { |
|
callback() |
|
} |
|
} |
|
const rules = reactive<FormRules<FormData>>({ |
|
mailSource: [ |
|
{ required: true, message: '请选择途径来源', trigger: 'change' } |
|
], |
|
name: [ |
|
{ required: true, validator: validateName, trigger: 'change' }, |
|
], |
|
gender: [ |
|
{ required: true, message: '请选择性别', trigger: 'change' } |
|
], |
|
idNumber: [ |
|
{ required: true, validator: validateIdNumber, trigger: 'change' }, |
|
], |
|
phone: [ |
|
{ required: true, validator: validatePhone, trigger: 'change' }, |
|
], |
|
content: [ |
|
{ required: true, message: '请您尽量完整的描述您的信件内容，如发生事件、涉及单位、设计对象姓名、警号以及具体事项', trigger: 'blur' } |
|
], |
|
fileList: [ |
|
{ required: true, message: '请上传附件', trigger: 'blur' } |
|
] |
|
}) |
|
const { optionsData } = useDictOptions<{ |
|
dept: any[] |
|
}>({ |
|
dept: { |
|
api: deptLists |
|
} |
|
}) |
|
const handleSubmit = () => { |
|
formRef.value.validate((valid: boolean) => { |
|
if (valid) { |
|
console.log(form.value) |
|
visible.value = false |
|
} else { |
|
ElMessage.error('请检查输入项') |
|
} |
|
}) |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.dialog-header { |
|
height: 60px; |
|
display: flex; |
|
align-items: center; |
|
justify-self: center; |
|
} |
|
|
|
.dialog-title { |
|
margin-left: 20px; |
|
width: 64px; |
|
height: 22px; |
|
font-size: 16px; |
|
font-family: PingFangSC, PingFang SC; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
line-height: 22px; |
|
} |
|
|
|
.dialog-body { |
|
margin-left: 20px; |
|
margin-right: 20px; |
|
} |
|
|
|
.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> |