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.
464 lines
16 KiB
464 lines
16 KiB
<template> |
|
<div class="container"> |
|
<header class="mb-20"> |
|
<el-form :label-width="114"> |
|
<el-row> |
|
<el-col :span="6"> |
|
<el-form-item label="督察单位"> |
|
<depart-tree-select v-model="query.departId" /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="任务名称"> |
|
<el-input |
|
placeholder="请输入任务名称" |
|
v-model="query.nickName" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="自查类型"> |
|
<el-select v-model="form.supervisionType" clearable> |
|
<el-option |
|
v-for="item in dict.supervisionType" |
|
:key="item.id" |
|
:label="item.dictLabel" |
|
:value="item.dictValue" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
<div class="flex between"> |
|
<el-button type="primary" @click="handleShowAdd"> |
|
<template #icon> |
|
<icon name="el-icon-Plus" /> |
|
</template> |
|
发布任务</el-button |
|
> |
|
<div> |
|
<el-button type="primary" @click="getList"> |
|
<template #icon> |
|
<icon name="el-icon-Search" /> |
|
</template> |
|
查询</el-button |
|
> |
|
<el-button @click="reset">重置</el-button> |
|
</div> |
|
</div> |
|
</header> |
|
<div class="table-container"> |
|
<el-table :data="list"> |
|
<el-table-column label="任务名称" prop="taskName" /> |
|
<el-table-column |
|
label="自查单位" |
|
prop="supDepartName" |
|
width="120" |
|
/> |
|
<el-table-column |
|
label="自查类型" |
|
prop="type" |
|
width="100" |
|
align="center" |
|
/> |
|
<el-table-column |
|
label="任务要求" |
|
prop="requirement" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column |
|
label="自查内容" |
|
prop="requirement" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column label="任务时间" prop="updateTime" width="280"> |
|
<template #default="{ row }"> |
|
<span>{{ row.beginTime }}</span> |
|
<span>-</span> |
|
<span>{{ row.endTime }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="任务状态" align="center"> |
|
<template #default="{ row }"> |
|
<span v-if="row.taskStatus === 'todo'">执行中</span> |
|
<span v-if="row.taskStatus === 'done'">已完成</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="发现问题数" |
|
prop="problemNumber" |
|
align="center" |
|
/> |
|
<el-table-column label="操作" width="200"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleShowDetail(row)" |
|
>查看详情</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleProblemsShow(row)" |
|
>自查情况</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getList" |
|
@current-change="getList" |
|
:page-sizes="[10, 20, 50]" |
|
v-model:page-size="query.size" |
|
v-model:current-page="query.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="total" |
|
> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
|
|
<el-dialog |
|
title="发布任务" |
|
v-model="show" |
|
width="1076px" |
|
top="2vh" |
|
style="margin-bottom: 0" |
|
> |
|
<el-scrollbar max-height="80vh"> |
|
<el-form |
|
:label-width="150" |
|
ref="formRef" |
|
:model="form" |
|
style="min-height: 66vh" |
|
> |
|
<el-form-item |
|
label="任务名称" |
|
:rules="{ |
|
required: true, |
|
message: '请输入任务名称', |
|
trigger: ['blur'], |
|
}" |
|
prop="taskName" |
|
> |
|
<el-input |
|
v-model="form.taskName" |
|
placeholder="请输入任务名称" |
|
/> |
|
</el-form-item> |
|
<el-form-item |
|
label="自查单位" |
|
:rules="{ |
|
required: true, |
|
message: '请选择', |
|
}" |
|
prop="supDepartId" |
|
> |
|
<div style="width: 300px"> |
|
<depart-tree-select v-model="form.supDepartId" :check-strictly="false" /> |
|
</div> |
|
</el-form-item> |
|
<el-form-item |
|
label="自查类型" |
|
:rules="{ |
|
required: true, |
|
message: '请选择', |
|
}" |
|
prop="type" |
|
> |
|
<el-select |
|
v-model="form.type" |
|
clearable |
|
style="width: 300px" |
|
> |
|
<el-option |
|
v-for="item in dict.supervisionType" |
|
:key="item.id" |
|
:label="item.dictLabel" |
|
:value="item.dictValue" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item |
|
label="任务时间" |
|
prop="times" |
|
:rules="{ |
|
required: true, |
|
message: '请选择', |
|
}" |
|
> |
|
<div style="width: 800px"> |
|
<el-date-picker |
|
v-model="form.times" |
|
type="datetimerange" |
|
range-separator="-" |
|
start-placeholder="开始时间" |
|
end-placeholder="结束时间" |
|
/> |
|
</div> |
|
</el-form-item> |
|
<el-divider /> |
|
|
|
<el-form-item |
|
prop="requirementHtml" |
|
:rules="{ |
|
required: true, |
|
message: '请输入任务内容', |
|
}" |
|
label-position="top" |
|
> |
|
<template #label> |
|
<span |
|
class="text-primary" |
|
style="font-size: 16px; font-weight: 500" |
|
>任务要求</span |
|
> |
|
</template> |
|
<div style="width: 100%"> |
|
<quill-editor |
|
ref="quillRef" |
|
v-model="form.requirementHtml" |
|
style="min-height: 120px; overflow: auto" |
|
/> |
|
</div> |
|
</el-form-item> |
|
<el-form-item |
|
prop="contents" |
|
:rules="{ |
|
validator: validateContents, |
|
}" |
|
label-position="top" |
|
> |
|
<template #label> |
|
<div class="flex between"> |
|
<h5 style="margin-top: 0">自查内容</h5> |
|
<el-button |
|
size="small" |
|
type="primary" |
|
plain |
|
@click="form.contents.push({})" |
|
> |
|
<template #icon> |
|
<icon name="el-icon-Plus" /> |
|
</template> |
|
添加自查内容</el-button |
|
> |
|
</div> |
|
</template> |
|
|
|
<div |
|
style="min-height: 80px; overflow: hidden; width: 100%" |
|
> |
|
<el-row :gutter="20"> |
|
<el-col |
|
:span="12" |
|
v-for="(item, index) in form.contents" |
|
:key="index" |
|
> |
|
<div class="flex between mb-8"> |
|
<span>自查内容{{ index + 1 }}</span> |
|
<el-button |
|
size="small" |
|
type="danger" |
|
plain |
|
@click="form.contents.splice(index, 1)" |
|
> |
|
<template #icon> |
|
<icon name="el-icon-Delete" /> |
|
</template> |
|
删除</el-button |
|
> |
|
</div> |
|
<el-form-item |
|
:prop="`contents.${index}.title`" |
|
:rules="{ |
|
required: true, |
|
message: '请输入自查项目', |
|
}" |
|
label-position="top" |
|
> |
|
<el-input |
|
placeholder="请输入自查项目" |
|
v-model="item.title" |
|
class="mb-18" |
|
/> |
|
</el-form-item> |
|
<el-form-item |
|
:prop="`contents.${index}.content`" |
|
:rules="{ |
|
required: true, |
|
message: '请输入任务内容', |
|
}" |
|
label-position="top" |
|
style="margin-bottom: 32px" |
|
> |
|
<el-input |
|
type="textarea" |
|
placeholder="请输入工作要求" |
|
v-model="item.content" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
</el-scrollbar> |
|
<footer class="flex end mt-20"> |
|
<el-button type="primary" @click="submit" size="large" |
|
>发布</el-button |
|
> |
|
</footer> |
|
</el-dialog> |
|
|
|
<el-dialog title="任务详情" v-model="detailShow" width="40vw"> |
|
<div style="padding: 0 40px"> |
|
<div class="row"> |
|
<div class="col col-24"> |
|
<label>任务名称</label> |
|
<span>{{ activeRow.taskName }}</span> |
|
</div> |
|
<div class="col col-24"> |
|
<label>自查单位</label> |
|
<span>{{ activeRow.supDepartName }}</span> |
|
</div> |
|
<div class="col col-24"> |
|
<label>自查类型</label> |
|
<span>{{ activeRow.type }}</span> |
|
</div> |
|
<div class="col col-24"> |
|
<label>任务时间</label> |
|
<span |
|
><span>{{ activeRow.beginTime }}</span> |
|
<span>-</span> |
|
<span>{{ activeRow.endTime }}</span></span |
|
> |
|
</div> |
|
</div> |
|
<h5 style="margin-top: 10px">任务要求</h5> |
|
<div v-html="activeRow.requirementHtml"></div> |
|
<h5>自查内容</h5> |
|
<el-row> |
|
<el-col |
|
:span="12" |
|
v-for="(item, index) in activeRow.contents" |
|
:key="index" |
|
> |
|
<div style="font-size: 16px" class="mb-8">{{ index + 1}} {{ item.title }}</div> |
|
<div>{{ item.content }}</div> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
<footer class="flex end mt-20"> |
|
<el-button size="large" @click="detailShow = false">关闭</el-button> |
|
</footer> |
|
</el-dialog> |
|
</template> |
|
<script setup> |
|
import { |
|
listSelfexamination, |
|
addSelfexamination, |
|
getSelfexaminationDetail, |
|
} from "@/api/mobileSupervision/selfexamination"; |
|
import feedback from "@/utils/feedback"; |
|
import useCatchStore from "@/stores/modules/catch"; |
|
|
|
const catchStore = useCatchStore(); |
|
const dict = catchStore.getDicts(["supervisionType"]); |
|
|
|
const list = ref([]); |
|
const query = ref({ |
|
current: 1, |
|
size: 10, |
|
}); |
|
const total = ref(0); |
|
function getList() { |
|
listSelfexamination(query.value).then((data) => { |
|
list.value = data.records; |
|
total.value = data.total; |
|
}); |
|
} |
|
|
|
function reset() { |
|
query.value = { |
|
current: 1, |
|
size: 10, |
|
}; |
|
getList(); |
|
} |
|
|
|
getList(); |
|
|
|
const show = ref(false); |
|
|
|
const form = ref({ |
|
contents: [], |
|
}); |
|
const formRef = ref(null); |
|
|
|
const quillRef = ref(); |
|
async function submit() { |
|
await formRef.value.validate(); |
|
form.value.requirement = quillRef.value.getText(); |
|
await addSelfexamination(form.value); |
|
feedback.msgSuccess("发布成功"); |
|
show.value = false; |
|
getList(); |
|
form.value = { |
|
contents: [], |
|
}; |
|
} |
|
|
|
function handleShowAdd() { |
|
show.value = true; |
|
} |
|
|
|
const detailShow = ref(false); |
|
const activeRow = ref({}); |
|
|
|
async function handleShowDetail(row) { |
|
detailShow.value = true; |
|
const data = await getSelfexaminationDetail(row.id); |
|
activeRow.value = data; |
|
} |
|
|
|
const problemsShow = ref(false); |
|
const problems = ref([]); |
|
const problemQuery = ref({}); |
|
const problemTotal = ref(0); |
|
|
|
function handleProblemsShow(row) { |
|
activeRow.value = row; |
|
problemsShow.value = true; |
|
getProblems(); |
|
} |
|
function getProblems() { |
|
listInspectionProblems(activeRow.value.id).then((data) => { |
|
problems.value = data.records; |
|
}); |
|
} |
|
|
|
function problemReset() { |
|
problemQuery.value = {}; |
|
} |
|
|
|
function validateContents(rule, value, cb) { |
|
if (value.length === 0) { |
|
cb(new Error("请添加自查内容")); |
|
} else { |
|
cb(); |
|
} |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
h5 { |
|
margin-bottom: 10px; |
|
} |
|
.pepole-container > * { |
|
margin-bottom: 8px; |
|
} |
|
</style> |