wxc
1 year ago
11 changed files with 312 additions and 74 deletions
@ -0,0 +1,88 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog width="50vw" title="发起单位会签" v-model="show"> |
||||||
|
<el-form :model="formData" ref="formRef"> |
||||||
|
<el-form-item |
||||||
|
label="会签具体要求" |
||||||
|
:rules="{ |
||||||
|
required: true, |
||||||
|
message: '请输入会签具体要求', |
||||||
|
trigger: ['blur'], |
||||||
|
}" |
||||||
|
label-position="top" |
||||||
|
prop="requirement" |
||||||
|
> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
:autosize="{ minRows: 4 }" |
||||||
|
placeholder="请输入单位会签提议，如对问题处理结果存疑的地方，希望哪些单位提供专业意见等。" |
||||||
|
v-model="formData.requirement" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item |
||||||
|
label="参与会签单位" |
||||||
|
:rules="{ |
||||||
|
required: true, |
||||||
|
message: '请选择参与会签单位' |
||||||
|
}" |
||||||
|
label-position="top" |
||||||
|
prop="countersignDeparts" |
||||||
|
> |
||||||
|
<div style="min-height: 200px"> |
||||||
|
<div class="flex gap-20 mb-10" v-for="(item, index) in formData.countersignDeparts" :key="index"> |
||||||
|
<div style="width: 280px"> |
||||||
|
<depart-tree-select v-model="item.id" /> |
||||||
|
</div> |
||||||
|
<el-button type="primary" plain v-if="index === 0" @click="handleAddDepart"> |
||||||
|
<template #icon> |
||||||
|
<icon name="el-icon-Plus" /> |
||||||
|
</template> |
||||||
|
添加单位</el-button |
||||||
|
> |
||||||
|
<el-button type="danger" plain v-else @click="handleRemoveDepart"> |
||||||
|
<template #icon> |
||||||
|
<icon name="el-icon-Delete" /> |
||||||
|
</template> |
||||||
|
删除单位</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</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 emit = defineEmits(["submit"]); |
||||||
|
const show = ref(false); |
||||||
|
|
||||||
|
const formData = ref({ |
||||||
|
countersignDeparts: [{}] |
||||||
|
}) |
||||||
|
const formRef = ref() |
||||||
|
|
||||||
|
function handleAddDepart() { |
||||||
|
formData.value.countersignDeparts.push({}) |
||||||
|
} |
||||||
|
|
||||||
|
function handleRemoveDepart(index) { |
||||||
|
formData.value.countersignDeparts.splice(index, 1) |
||||||
|
} |
||||||
|
async function submit() { |
||||||
|
await formRef.value.validate(); |
||||||
|
show.value = false; |
||||||
|
emit("submit", formData.value); |
||||||
|
} |
||||||
|
|
||||||
|
async function open() { |
||||||
|
show.value = true; |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
open, |
||||||
|
}); |
||||||
|
</script> |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<template> |
||||||
|
<el-collapse v-model="activeNames"> |
||||||
|
<el-collapse-item |
||||||
|
v-for="(item, index) in countersignApplys" |
||||||
|
:key="index" |
||||||
|
:title="`单位会签${index + 1}`" |
||||||
|
:name="`countersign${index}`" |
||||||
|
> |
||||||
|
<div class="row"> |
||||||
|
<div class="col col-6"> |
||||||
|
<label>会签发起人</label> |
||||||
|
<span>{{ item.creatorName }}</span> |
||||||
|
</div> |
||||||
|
<div class="col col-6"> |
||||||
|
<label>发起时间</label> |
||||||
|
<span>{{ item.createTime }}</span> |
||||||
|
</div> |
||||||
|
<div class="col col-12"> |
||||||
|
<label>会签单位</label> |
||||||
|
<span> |
||||||
|
<div |
||||||
|
v-for="depart in item.countersigns" |
||||||
|
:key="depart" |
||||||
|
class="flex gap wrap" |
||||||
|
> |
||||||
|
<span>{{ depart.departName }}</span> |
||||||
|
<span |
||||||
|
>({{ |
||||||
|
depart.state === "uncompleted" |
||||||
|
? "未提交" |
||||||
|
: "已提交" |
||||||
|
}})</span |
||||||
|
> |
||||||
|
</div> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="col col-24"> |
||||||
|
<label>会签具体要求</label> |
||||||
|
<span>{{ item.requirement }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
v-for="countersign in item.countersigns.filter( |
||||||
|
(obj) => obj.state !== 'uncompleted' |
||||||
|
)" |
||||||
|
:key="countersign" |
||||||
|
> |
||||||
|
<div class="text-primary mb-8"> |
||||||
|
{{ countersign.departName }}的会签意见 |
||||||
|
</div> |
||||||
|
<div class="text-wrap mb-10">{{ countersign.comments }}</div> |
||||||
|
<div class="row" v-if="countersign.files"> |
||||||
|
<div class="col col-24"> |
||||||
|
<label>附件</label> |
||||||
|
<span> |
||||||
|
<file-list :files="JSON.parse(countersign.files)" /> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-collapse-item> |
||||||
|
</el-collapse> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import { onMounted } from "vue"; |
||||||
|
|
||||||
|
const countersignApplys = inject("countersignApplys"); |
||||||
|
|
||||||
|
const activeNames = ref([]); |
||||||
|
watch(countersignApplys, () => { |
||||||
|
for (let i = 0; i < countersignApplys.value.length; i++) { |
||||||
|
console.log(i) |
||||||
|
activeNames.value.push(`countersign${i}`); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.el-collapse { |
||||||
|
--el-collapse-header-text-color: var(--primary-color); |
||||||
|
--el-collapse-header-font-size: 16px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
<template> |
||||||
|
<el-form :model="formData" ref="formRef" label-width="108" class="mt-10"> |
||||||
|
<el-form-item label="会签意见" prop="comments" :rules="{ |
||||||
|
required: true, |
||||||
|
message: '请输入会签意见', |
||||||
|
trigger: ['blur']}"> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
placeholder="请输入会签意见" |
||||||
|
:autosize="{ minRows: 4 }" |
||||||
|
v-model="formData.comments" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="附件"> |
||||||
|
<file-upload v-model:files="formData.files" /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
const formData = ref({}); |
||||||
|
const formRef = ref(); |
||||||
|
|
||||||
|
async function validate() { |
||||||
|
await formRef.value.validate(); |
||||||
|
return formData.value; |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
validate |
||||||
|
}); |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
</style> |
||||||
Loading…
Reference in new issue