wxc
2 years ago
35 changed files with 1545 additions and 336 deletions
@ -0,0 +1,39 @@
|
||||
<template> |
||||
<el-select v-model="selectVal" @change="handleSelect"> |
||||
<el-option |
||||
v-for="item in leaders" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.empNo" |
||||
>{{ item.name + " - " + item.postTitle }}</el-option |
||||
> |
||||
</el-select> |
||||
</template> |
||||
<script setup> |
||||
import { getLeaderList } from "@/api/perms/admin"; |
||||
|
||||
const selectVal = ref(''); |
||||
defineProps({ |
||||
value: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}) |
||||
const emit = defineEmits(['update:value', 'change']); |
||||
|
||||
function handleSelect(val) { |
||||
emit('update:value', val); |
||||
const option = leaders.value.filter( |
||||
(item) => item.empNo === val |
||||
)[0]; |
||||
emit('change', val, option); |
||||
} |
||||
|
||||
const leaders = ref([]); |
||||
|
||||
getLeaderList().then((data) => { |
||||
leaders.value = data; |
||||
}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,30 @@
|
||||
<template> |
||||
<el-tree-select |
||||
v-model="val" |
||||
:data="mailStore.mailCategorys" |
||||
filterable |
||||
@current-change="handleCategoryChange" |
||||
/> |
||||
</template> |
||||
<script setup> |
||||
const mailStore = useMailStore(); |
||||
// 信件分类 |
||||
mailStore.getMailCategorys(); |
||||
|
||||
const val = ref(''); |
||||
|
||||
defineProps({ |
||||
value: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}) |
||||
|
||||
const emit = defineEmits(['update:value', 'change']) |
||||
|
||||
const handleCategoryChange = (data, node) => { |
||||
emit('change', data, node) |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,9 @@
|
||||
<template> |
||||
|
||||
</template> |
||||
<script setup> |
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,180 @@
|
||||
<template> |
||||
<el-dialog v-model="visible" width="55vw" title="认定办结"> |
||||
<h2>办理反馈情况</h2> |
||||
<div class="flex mb-20"> |
||||
<div class="col"> |
||||
<label>群众反应事项解决情况</label> |
||||
<span></span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>办理反馈情况</label> |
||||
<span></span> |
||||
</div> |
||||
</div> |
||||
<div class="flex mb-20"> |
||||
<div class="col"> |
||||
<label>回访人姓名</label> |
||||
<span></span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>回访人警号</label> |
||||
<span></span> |
||||
</div> |
||||
</div> |
||||
<div class="flex mb-40"> |
||||
<div class="col"> |
||||
<label>回访人电话</label> |
||||
<span></span> |
||||
</div> |
||||
</div> |
||||
<el-form |
||||
:model="form" |
||||
:rules="rules" |
||||
ref="formRef" |
||||
:label-width="244" |
||||
> |
||||
<h2>综合认定情况</h2> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="办理合格情况" |
||||
prop="qualifiedProcessingStatus" |
||||
> |
||||
<el-radio-group v-model="form.qualifiedProcessingStatus"> |
||||
<el-radio v-for="item in dictData.qualified_processing_status" :key="item.id" :label="item.value" size="large" >{{ item.name }}</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="问题解决情况" |
||||
prop="problemSolvingStatus" |
||||
> |
||||
<el-radio-group v-model="form.problemSolvingStatus"> |
||||
<el-radio :label="true" size="large">已解决</el-radio> |
||||
<el-radio :label="false" size="large">未解决</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-form-item |
||||
label="群众回复情况" |
||||
prop="satisfactionStatus" |
||||
> |
||||
<el-radio-group v-model="form.satisfactionStatus"> |
||||
<el-radio v-for="item in dictData.satisfaction_status" :key="item.id" :label="item.value" size="large" >{{ item.name }}</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<h2>认定办结意见</h2> |
||||
<el-form-item prop="completionComment" class="mb-40"> |
||||
<el-input |
||||
v-model="form.completionComment" |
||||
type="textarea" |
||||
:rows="4" |
||||
placeholder="请输入认定办结意见" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<footer class="flex end"> |
||||
<el-button type="primary" size="large" @click="submit" |
||||
>审批通过</el-button |
||||
> |
||||
</footer> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup> |
||||
import { useDictData } from "@/hooks/useDictOptions"; |
||||
const { dictData } = useDictData(["satisfaction_status", "qualified_processing_status"]); |
||||
|
||||
const visible = ref(false); |
||||
const form = reactive({}); |
||||
const rules = { |
||||
qualifiedProcessingStatus: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择办理合格情况", |
||||
}, |
||||
], |
||||
problemSolvingStatus: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择问题解决情况", |
||||
}, |
||||
], |
||||
satisfactionStatus: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择群众回复情况", |
||||
}, |
||||
], |
||||
completionComment: [ |
||||
{ |
||||
required: true, |
||||
message: "请填写认定办结意见", |
||||
}, |
||||
], |
||||
}; |
||||
const formRef = ref(); |
||||
|
||||
const props = defineProps({ |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
data: { |
||||
type: Object, |
||||
default: {}, |
||||
}, |
||||
flowKey: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
}); |
||||
const selectLeaderVisible = ref(false); |
||||
watch( |
||||
() => props.flowKey, |
||||
(val) => { |
||||
if (val === "second_approval" || val === "second_deputy_approval") { |
||||
selectLeaderVisible.value = true; |
||||
} |
||||
} |
||||
); |
||||
|
||||
const emits = defineEmits(["update:show", "update:data", "submit"]); |
||||
watch(visible, (val) => { |
||||
emits("update:show", val); |
||||
}); |
||||
watch( |
||||
() => props.show, |
||||
(val) => { |
||||
visible.value = val; |
||||
if (val) { |
||||
} |
||||
} |
||||
); |
||||
|
||||
function submit() { |
||||
formRef.value.validate((valid) => { |
||||
if (valid) { |
||||
// 提交审批逻辑 |
||||
const data = { ...props.data, ...form }; |
||||
emits("update:data", data); |
||||
emits("submit", "confirmedCompletion"); |
||||
visible.value = false; |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
h2 { |
||||
margin-top: 0; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
.col { |
||||
label { |
||||
width: 244px; |
||||
text-align: right; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,163 @@
|
||||
<template> |
||||
<el-dialog v-model="visible" width="55vw" title="发起部门会签"> |
||||
<el-form |
||||
:model="form" |
||||
:rules="rules" |
||||
ref="formRef" |
||||
label-position="top" |
||||
style="min-height: 50vh" |
||||
> |
||||
<h2>会签具体要求</h2> |
||||
<el-form-item prop="countersignRequirement" class="mb-40"> |
||||
<el-input |
||||
v-model="form.countersignRequirement" |
||||
type="textarea" |
||||
:rows="4" |
||||
placeholder="请输入部门会签提议，如对信件处理结果存疑的地方，希望哪些部门提供专业意见等。" |
||||
></el-input> |
||||
</el-form-item> |
||||
<h2>参与会签的部门</h2> |
||||
<el-form-item prop="countersignDeptIds"> |
||||
<div> |
||||
<div |
||||
v-for="(item, index) in countersignDeptIds" |
||||
:key="index" |
||||
class="flex gap mb-10" |
||||
> |
||||
<el-select |
||||
v-model="countersignDeptIds[index]" |
||||
style="width: 300px" |
||||
@change="handleChange" |
||||
> |
||||
<el-option |
||||
v-for="item in depts" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
:disabled=" |
||||
mail.secondDeptId === item.id || |
||||
mail.threeDeptId === item.id || |
||||
countersignDeptIds.indexOf(item.id) > -1 |
||||
" |
||||
></el-option> |
||||
</el-select> |
||||
<el-button |
||||
type="primary" |
||||
plain |
||||
@click="countersignDeptIds.splice(index, 1)" |
||||
>删除</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<p style="color: #999" class="mb-10">会签部门数量最多3个</p> |
||||
<el-button type="primary" plain @click="handleAddDept" |
||||
>添加部门</el-button |
||||
> |
||||
</el-form> |
||||
<footer class="flex end"> |
||||
<el-button type="primary" size="large" @click="submit" |
||||
>发起会签</el-button |
||||
> |
||||
</footer> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup> |
||||
import { listCountersign } from "@/api/org/department"; |
||||
|
||||
const visible = ref(false); |
||||
const form = reactive({}); |
||||
const rules = { |
||||
countersignRequirement: [ |
||||
{ |
||||
required: true, |
||||
message: "请填写部门会签提议", |
||||
}, |
||||
], |
||||
countersignDeptIds: [ |
||||
{ |
||||
required: true, |
||||
message: "请添加会签部门", |
||||
}, |
||||
], |
||||
}; |
||||
const formRef = ref(); |
||||
const depts = ref([]); |
||||
|
||||
listCountersign().then((data) => { |
||||
depts.value = data; |
||||
}); |
||||
|
||||
const countersignDeptIds = ref([]); |
||||
|
||||
const props = defineProps({ |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
data: { |
||||
type: Object, |
||||
default: {}, |
||||
}, |
||||
mail: { |
||||
type: Object, |
||||
default: {}, |
||||
}, |
||||
}); |
||||
const selectLeaderVisible = ref(false); |
||||
watch( |
||||
() => props.flowKey, |
||||
(val) => { |
||||
if (val === "second_approval" || val === "second_deputy_approval") { |
||||
selectLeaderVisible.value = true; |
||||
} |
||||
} |
||||
); |
||||
|
||||
const emits = defineEmits(["update:show", "update:data", "submit"]); |
||||
watch(visible, (val) => { |
||||
emits("update:show", val); |
||||
}); |
||||
watch( |
||||
() => props.show, |
||||
(val) => { |
||||
visible.value = val; |
||||
if (val) { |
||||
} |
||||
} |
||||
); |
||||
|
||||
function handleChange() { |
||||
const arr = countersignDeptIds.value.filter(item => item); |
||||
if (arr.length) { |
||||
form.countersignDeptIds = arr |
||||
} |
||||
} |
||||
|
||||
function handleAddDept() { |
||||
if (countersignDeptIds.value.length >= 3) { |
||||
return |
||||
} |
||||
countersignDeptIds.value.push('') |
||||
} |
||||
|
||||
function submit() { |
||||
formRef.value.validate((valid) => { |
||||
if (valid) { |
||||
// 提交审批逻辑 |
||||
|
||||
const data = { ...props.data, ...form }; |
||||
emits("update:data", data); |
||||
emits("submit", "confirmedCompletion"); |
||||
visible.value = false; |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
h2 { |
||||
margin-top: 0; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,100 @@
|
||||
<template> |
||||
<el-dialog v-model="visible" width="50vw" title="提交审批"> |
||||
<el-form |
||||
label-position="top" |
||||
:model="form" |
||||
:rules="rules" |
||||
ref="formRef" |
||||
style="height: 50vh" |
||||
> |
||||
<el-form-item label="请选择上级领导" prop="leaderEmpNo" v-if="selectLeaderVisible"> |
||||
<LeaderSelect v-model="form.leaderEmpNo" /> |
||||
</el-form-item> |
||||
<el-form-item label="审批意见" prop="approvalComment"> |
||||
<el-input |
||||
v-model="form.approvalComment" |
||||
type="textarea" |
||||
:rows="3" |
||||
placeholder="请输入审批意见" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<footer class="flex end"> |
||||
<el-button type="primary" size="large" @click="submit" |
||||
>审批通过</el-button |
||||
> |
||||
</footer> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup> |
||||
const visible = ref(false); |
||||
const form = reactive({}); |
||||
const rules = { |
||||
leaderEmpNo: [ |
||||
{ |
||||
required: true, |
||||
message: "请选择上级领导", |
||||
}, |
||||
], |
||||
approvalComment: [ |
||||
{ |
||||
required: true, |
||||
message: "请填写审批意见", |
||||
}, |
||||
], |
||||
}; |
||||
const formRef = ref(); |
||||
|
||||
const props = defineProps({ |
||||
show: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
data: { |
||||
type: Object, |
||||
default: {}, |
||||
}, |
||||
flowKey: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
}); |
||||
const selectLeaderVisible = ref(false) |
||||
watch(() => props.flowKey, (val) => { |
||||
if (val === 'second_approval' || val === 'second_deputy_approval') { |
||||
selectLeaderVisible.value = true |
||||
} |
||||
}) |
||||
|
||||
onMounted(() => { |
||||
if (props.data) { |
||||
Object.assign(form, props.data); |
||||
} |
||||
}); |
||||
const emits = defineEmits(["update:show", "update:data", "submit"]); |
||||
watch(visible, (val) => { |
||||
emits("update:show", val); |
||||
}); |
||||
watch( |
||||
() => props.show, |
||||
(val) => { |
||||
visible.value = val; |
||||
if (val) { |
||||
} |
||||
} |
||||
); |
||||
|
||||
function submit() { |
||||
formRef.value.validate((valid) => { |
||||
if (valid) { |
||||
// 提交审批逻辑 |
||||
const data = { ...props.data, ...form }; |
||||
emits("update:data", data); |
||||
emits("submit", "approvedSubmit"); |
||||
visible.value = false; |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,103 @@
|
||||
<template> |
||||
<div> |
||||
<header>审批意见</header> |
||||
<div class="comments-container flex gap-20"> |
||||
<div |
||||
class="item" |
||||
v-for="(item, index) in approvals" |
||||
:key="index" |
||||
:approved="item.approved" |
||||
> |
||||
<div class="flex center mb-20 relative comments-header"> |
||||
<icon |
||||
name="el-icon-CircleCheck" |
||||
:size="41" |
||||
color="var(--primary-color)" |
||||
v-if="item.approved" |
||||
/> |
||||
<div class="icon" v-else></div> |
||||
</div> |
||||
<h1 class="text-center mb-20"> |
||||
{{ item.approved ? "审批通过" : "待审批" }} |
||||
</h1> |
||||
<h2 class="text-center mb-20"> |
||||
{{ item.handlerDeptName }} {{ item.handlerName }} |
||||
</h2> |
||||
<div v-if="item.approved"> |
||||
<h3>审批意见</h3> |
||||
<p>{{ item.comment }}</p> |
||||
<h4 class="text-right">{{ item.createTime }}</h4> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
defineProps({ |
||||
approvals: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
header { |
||||
font-size: 20px; |
||||
color: var(--primary-color); |
||||
padding: 20px 0; |
||||
} |
||||
.item { |
||||
width: 100%; |
||||
padding: 8px; |
||||
--base-color: #999; |
||||
--second-color: #D8D8D8; |
||||
.comments-header { |
||||
&::before { |
||||
display: block; |
||||
content: ""; |
||||
position: absolute; |
||||
top: 50%; |
||||
right: calc(50% + 30px); |
||||
width: calc(100% - 30px); |
||||
border-top: 2px solid var(--second-color); |
||||
} |
||||
} |
||||
&:first-child .comments-header::before { |
||||
display: none; |
||||
} |
||||
&[approved="true"] { |
||||
--base-color: var(--primary-color); |
||||
--second-color: #8595FB; |
||||
} |
||||
h1 { |
||||
color: var(--base-color); |
||||
font-size: 18px; |
||||
font-weight: 700; |
||||
} |
||||
h2 { |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
} |
||||
h3 { |
||||
font-size: 14px; |
||||
color: #666; |
||||
font-weight: 500; |
||||
margin-bottom: 8px; |
||||
} |
||||
h4 { |
||||
font-size: 12px; |
||||
color: #666; |
||||
font-weight: 500; |
||||
} |
||||
p { |
||||
color: #333; |
||||
} |
||||
.icon { |
||||
width: 22px; |
||||
height: 22px; |
||||
border: 3px solid #e0e0e0; |
||||
border-radius: 50%; |
||||
margin: 6.5px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,165 @@
|
||||
<template> |
||||
<el-collapse> |
||||
<el-collapse-item title="举报人/投诉人基本情况"> |
||||
<div class="flex"> |
||||
<div class="col"> |
||||
<label>姓名</label> |
||||
<span>{{ mail.contactName }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>性别</label> |
||||
<span>{{ mail.contactSex === 'M' ? '男' : '女' }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>证件号码</label> |
||||
<span>{{ mail.contactIdCard }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>联系电话</label> |
||||
<span>{{ mail.contactPhone }}</span> |
||||
</div> |
||||
</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="举报/投诉对象基本情况"> |
||||
<div class="flex" v-for="item in mail.verifyReportedPolices" :key="item.empNo"> |
||||
<div class="col"> |
||||
<label>被举报对象1</label> |
||||
<span>{{ item.name }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>警号</label> |
||||
<span>{{ item.empNo }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>性别</label> |
||||
<span>{{ item.gender }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>出生年月</label> |
||||
<span>{{ item.birthday }}</span> |
||||
</div> |
||||
</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="举报/投诉反应主要问题"> |
||||
<div class="content">{{ mail.content }}</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="领导接访情况"> |
||||
<div class="flex mb-10"> |
||||
<div class="col"> |
||||
<label>主单位签收时长</label> |
||||
<span>{{ mail.mailTime }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>主单位联系群众时长</label> |
||||
<span>{{ mail.source }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="flex mb-10"> |
||||
<div class="col"> |
||||
<label>接访形式</label> |
||||
<span>{{ mail.interviewType }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>是否一把手接访</label> |
||||
<span>{{ mail.interviewIsLeader }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>接访领导</label> |
||||
<span>{{ mail.interviewPoliceName }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="flex"> |
||||
<div class="col"> |
||||
<label>接访情况</label> |
||||
<span>{{ mail.interviewDetails }}</span> |
||||
</div> |
||||
</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="核查办理情况"> |
||||
<div class="flex mb-10"> |
||||
<div class="col"> |
||||
<label>是否属实</label> |
||||
<span>{{ mail.verifyIsTrue }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>是否需要问责</label> |
||||
<span>{{ mail.verifyNeedAccountability }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="flex mb-10"> |
||||
<div class="col"> |
||||
<label>查证属实问题</label> |
||||
<span v-for="(item, index) in mail.verifyProblem" :key="index">{{ item }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="flex mb-10"> |
||||
<div class="col"> |
||||
<label>核办结果</label> |
||||
<span>{{ mail.verifyFeedback }}</span> |
||||
</div> |
||||
</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="整改问责情况"> |
||||
<div class="flex"> |
||||
<div class="col"> |
||||
<label>责任追究</label> |
||||
<span v-for="(item, index) in mail.verifyPunish" :key="index">{{ item }}</span> |
||||
</div> |
||||
</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="结果反馈情况"> |
||||
<div class="flex mb-10"> |
||||
<div class="col"> |
||||
<label>群众反应事项解决情况</label> |
||||
<span>{{ mail.verifyIsResolved }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>办理反馈情况</label> |
||||
<span>{{ mail.source }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="flex"> |
||||
<div class="col"> |
||||
<label>回访人姓名</label> |
||||
<span>{{ mail.source }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>回访人电话</label> |
||||
<span>{{ mail.source }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>回访人警号</label> |
||||
<span>{{ mail.source }}</span> |
||||
</div> |
||||
</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="办结佐证材料"> |
||||
<div></div> |
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
</template> |
||||
<script setup> |
||||
defineProps({ |
||||
mail: { |
||||
type: Object, |
||||
default: () => ({}), |
||||
}, |
||||
}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.el-collapse-item { |
||||
--el-collapse-header-text-color: var(--primary-color); |
||||
--el-collapse-header-font-size: 16px; |
||||
} |
||||
.col { |
||||
label { |
||||
width: 144px; |
||||
text-align: right; |
||||
} |
||||
} |
||||
.content { |
||||
font-size: 16px; |
||||
padding: 12px; |
||||
color: #333; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,98 @@
|
||||
<template> |
||||
<div class="card"> |
||||
<div class="flex"> |
||||
<div class="col"> |
||||
<label>来信时间</label> |
||||
<span>{{ mail.mailTime }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>信件来源</label> |
||||
<span>{{ mail.source }}</span> |
||||
</div> |
||||
</div> |
||||
<h2>来信人信息</h2> |
||||
<div class="flex"> |
||||
<div class="col short"> |
||||
<label>姓名</label> |
||||
<span>{{ mail.contactName }}</span> |
||||
</div> |
||||
<div class="col short"> |
||||
<label>性别</label> |
||||
<span>{{ mail.contactSex === 'M' ? '男':'女' }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>证件号码</label> |
||||
<span>{{ mail.contactIdCard }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>联系电话</label> |
||||
<span>{{ mail.contactPhone }}</span> |
||||
</div> |
||||
</div> |
||||
<h2>信件内容</h2> |
||||
<div class="flex"> |
||||
<div class="col"> |
||||
<label>案件编号</label> |
||||
<span>{{ mail.caseNumber }}</span> |
||||
</div> |
||||
<div class="col"> |
||||
<label>被投诉/涉及单位</label> |
||||
<span>{{ mail.involvedDeptName }}</span> |
||||
</div> |
||||
</div> |
||||
<p class="content">{{ mail.content }}</p> |
||||
<h2>附件</h2> |
||||
<div class="flex gap-16 wrap img-container"> |
||||
<div class="img-box" v-for="(item, index) in mail.attachments" :key="index" :style="{ backgroundImage: `url(${VITE_API_URL}/api/file/stream/${item.filepath})`}"></div> |
||||
</div> |
||||
<div> |
||||
<el-empty :image-size="40" style="--el-empty-padding: 0;" v-if="mail.attachments.length === 0" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
const { |
||||
VITE_API_URL |
||||
} = process.env |
||||
|
||||
defineProps({ |
||||
mail: { |
||||
type: Object, |
||||
default: () => ({}) |
||||
} |
||||
}) |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
h2 { |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
color: #162582; |
||||
} |
||||
.card { |
||||
background: #f9faff; |
||||
border-top: 8px solid var(--primary-color); |
||||
box-shadow: 0px 2px 4px 0px rgba(129, 150, 255, 0.47); |
||||
padding: 16px; |
||||
margin-bottom: 24px; |
||||
margin-left: 2px; |
||||
margin-right: 2px; |
||||
|
||||
.content { |
||||
margin-top: 16px; |
||||
min-height: 40px; |
||||
padding: 12px; |
||||
background-color: #fff; |
||||
color: #333; |
||||
font-size: 16px; |
||||
} |
||||
.img-container { |
||||
.img-box { |
||||
width: 80px; |
||||
height: 80px; |
||||
background-size: cover; |
||||
background-position: center; |
||||
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue