399 lines
12 KiB
Vue
399 lines
12 KiB
Vue
<template>
|
|
<ai-detail isHasSidebar v-loading="isLoading">
|
|
<template slot="title">
|
|
<ai-title title="任务详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
|
</ai-title>
|
|
</template>
|
|
<template slot="content">
|
|
<ai-card title="任务信息">
|
|
<template #content>
|
|
<ai-wrapper
|
|
label-width="120px">
|
|
<ai-info-item label="任务名称" :value="info.title"></ai-info-item>
|
|
<ai-info-item label="创建时间" :value="info.createTime"></ai-info-item>
|
|
<ai-info-item label="更新时间" :value="info.updateTime"></ai-info-item>
|
|
<ai-info-item label="创建人" :value="info.createUserName"></ai-info-item>
|
|
<ai-info-item label="任务完成度" :value="dict.getLabel('tastStatus', info.status)">
|
|
<span :style="{color: dict.getColor('tastStatus', info.status)}">{{ dict.getLabel('tastStatus', info.status) }}</span>
|
|
</ai-info-item>
|
|
</ai-wrapper>
|
|
</template>
|
|
</ai-card>
|
|
<ai-card title="评分表单">
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-button type="primary" @click="isShow = true">添加表单</el-button>
|
|
</template>
|
|
<template #right>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table
|
|
:isShowPagination="false"
|
|
tableSize="small"
|
|
border
|
|
:tableData="info.templateList"
|
|
:col-configs="colConfigs"
|
|
@getList="() => {}">
|
|
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
|
<template slot-scope="{ row }">
|
|
<div class="table-options">
|
|
<el-button type="text" @click="toDetail(row.id)">详情</el-button>
|
|
<el-button type="text" v-if="row.status === '1'" @click="changeStatus(row.id)">停止</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-card>
|
|
<ai-dialog
|
|
:visible.sync="isShow"
|
|
width="780px"
|
|
title="添加表单"
|
|
@close="onClose"
|
|
@onConfirm="onConfirm">
|
|
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
|
|
<el-form-item label="选择模板" style="width: 100%" prop="templateId" :rules="[{required: true, message: '请选择模板', trigger: 'change'}]">
|
|
<div style="display: flex; align-items: center;">
|
|
<ai-select
|
|
v-model="form.templateId"
|
|
clearable
|
|
style="flex: 1;"
|
|
:selectList="list"
|
|
@change="onChange"
|
|
placeholder="请选择模板">
|
|
</ai-select>
|
|
<el-button type="text" @click="toAddTemplate">新建模板</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="表单名称" style="width: 100%" prop="templateName" :rules="[{required: true, message: '请输入表单名称', trigger: 'blur'}]">
|
|
<el-input v-model="form.templateName" size="small" placeholder="请输入表单名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="参评人员" v-if="form.templateId" style="width: 100%" prop="evaluatorsNames" :rules="[{required: true, message: '请选择参评人员', trigger: 'change'}]">
|
|
<ai-user-selecter :instance="instance" v-model="form.evaluatorsList" @change="e => onUserChange(e, 'evaluatorsNames')">
|
|
<div class="AppAnnounceDetail-select">
|
|
<el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.evaluatorsNames"></el-input>
|
|
<div class="select-left" v-if="form.evaluatorsList.length">
|
|
<span v-for="(item, index) in form.evaluatorsList" :key="index">{{ item.name }}</span>
|
|
</div>
|
|
<i v-if="!form.evaluatorsList.length">请选择</i>
|
|
<div class="select-right">{{ form.evaluatorsList.length ? '重新选择' : '选择' }}</div>
|
|
</div>
|
|
</ai-user-selecter>
|
|
</el-form-item>
|
|
<el-form-item label="评分人员" v-if="form.templateId" style="width: 100%" prop="scorerNames" :rules="[{required: true, message: '请选择评分人员', trigger: 'change'}]">
|
|
<ai-user-selecter :instance="instance" v-model="form.scorerList" @change="e => onUserChange(e, 'scorerNames')">
|
|
<div class="AppAnnounceDetail-select">
|
|
<el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.scorerNames"></el-input>
|
|
<div class="select-left" v-if="form.scorerList.length">
|
|
<span v-for="(item, index) in form.scorerList" :key="index">{{ item.name }}</span>
|
|
</div>
|
|
<i v-if="!form.scorerList.length">请选择</i>
|
|
<div class="select-right">{{ form.scorerList.length ? '重新选择' : '选择' }}</div>
|
|
</div>
|
|
</ai-user-selecter>
|
|
</el-form-item>
|
|
<el-form-item label="开始结束时间" v-if="form.templateId" style="width: 100%" prop="date" :rules="[{required: true, message: '请选择开始结束时间', trigger: 'change'}]">
|
|
<el-date-picker
|
|
v-model="form.date"
|
|
type="datetimerange"
|
|
size="small"
|
|
range-separator="至"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</template>
|
|
</ai-detail>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Detail',
|
|
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
params: Object
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
info: {},
|
|
form: {
|
|
date: '',
|
|
templateId: '',
|
|
templateName: '',
|
|
evaluatorsList: [],
|
|
scorerList: [],
|
|
evaluatorsNames: '',
|
|
scorerNames: ''
|
|
},
|
|
search: {
|
|
current: 1,
|
|
size: 10,
|
|
name: ''
|
|
},
|
|
isShow: false,
|
|
currIndex: 0,
|
|
isLoading: false,
|
|
tableData: [],
|
|
colConfigs: [
|
|
{prop: 'templateName', label: '表单名称', align: 'center', width: 220 },
|
|
{prop: 'createUserName', label: '添加人', align: 'center', width: 150 },
|
|
{
|
|
prop: 'status',
|
|
align: 'center',
|
|
width: 320,
|
|
label: '开始结束时间',
|
|
render: (h, {row}) => {
|
|
return h('span', {
|
|
}, `${row.beginTime} - ${row.endTime}`)
|
|
}
|
|
},
|
|
{
|
|
prop: 'status',
|
|
align: 'center',
|
|
label: '已填写/剩余份数',
|
|
render: (h, {row}) => {
|
|
return h('span', {
|
|
style: {
|
|
width: '300px'
|
|
}
|
|
}, `${row.overPhr}/${row.totalPhr - row.overPhr}`)
|
|
}
|
|
},
|
|
{
|
|
prop: 'status',
|
|
align: 'center',
|
|
label: '任务状态',
|
|
width: 100,
|
|
render: (h, {row}) => {
|
|
return h('span', {
|
|
style: {
|
|
color: this.dict.getColor('formStatus', row.status)
|
|
}
|
|
}, this.dict.getLabel('formStatus', row.status))
|
|
}
|
|
}
|
|
],
|
|
list: [],
|
|
tabList: ['基本信息', '风险处置']
|
|
}
|
|
},
|
|
|
|
created () {
|
|
if (this.params && this.params.id) {
|
|
this.id = this.params.id
|
|
this.$dict.load(['tastStatus', 'formStatus']).then(() => {
|
|
this.getInfo()
|
|
})
|
|
}
|
|
|
|
this.getList()
|
|
},
|
|
|
|
methods: {
|
|
onChange (e) {
|
|
this.form.templateName = this.list.filter(v => v.dictValue === e)[0].dictName
|
|
},
|
|
|
|
onClose () {
|
|
this.form.date = ''
|
|
this.form.templateId = ''
|
|
this.form.templateName = ''
|
|
this.form.evaluatorsList = []
|
|
this.form.scorerList = []
|
|
this.form.evaluatorsNames = ''
|
|
this.form.scorerNames = ''
|
|
},
|
|
|
|
toAddTemplate () {
|
|
this.$router.push({name: '289e949df7914db282c24dabd55b8c4d', query: {isAdd: 1}})
|
|
},
|
|
|
|
getInfo () {
|
|
this.instance.post(`/app/appassessmentscortask/queryDetailById?id=${this.params.id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.info = res.data
|
|
}
|
|
|
|
this.isLoading = false
|
|
}).catch(() => {
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
|
|
changeStatus (id) {
|
|
this.$confirm(`确定停用该表单？`).then(() => {
|
|
this.instance.post(`/app/appassessmentscortask/stopTaskTemplate?id=${id}`).then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success(`停用成功！`)
|
|
this.getInfo()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
getList () {
|
|
this.instance.post(`/app/appassessmentscoretemplate/list?size=1000&status=1`).then(res => {
|
|
if (res.code == 0) {
|
|
this.list = res.data.records.map(v => {
|
|
return {
|
|
dictValue: v.id,
|
|
dictName: v.title
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
toDetail (formId) {
|
|
this.$emit('change', {
|
|
type: 'FormDetail',
|
|
params: {
|
|
id: this.params.id,
|
|
formId: formId || ''
|
|
}
|
|
})
|
|
},
|
|
|
|
onUserChange(e, type) {
|
|
if (e.length) {
|
|
this.form[type] = '1'
|
|
} else {
|
|
this.form[type] = ''
|
|
}
|
|
},
|
|
|
|
onClose () {
|
|
this.form.date = ''
|
|
this.form.name = ''
|
|
this.form.templateId = ''
|
|
this.form.templateName = ''
|
|
this.form.evaluatorsList = []
|
|
this.form.scorerList = []
|
|
this.form.evaluatorsNames = ''
|
|
this.form.scorerNames = ''
|
|
},
|
|
|
|
onConfirm () {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
this.instance.post(`/app/appassessmentscortask/addTemplate`, {
|
|
...this.form,
|
|
beginTime: this.form.date[0],
|
|
endTime: this.form.date[1],
|
|
taskId: this.params.id,
|
|
evaluatorsNames: this.form.evaluatorsList.map(v => v.name).join(','),
|
|
scorerNames: this.form.scorerList.map(v => v.name).join(','),
|
|
date: ''
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('提交成功！')
|
|
this.isShow = false
|
|
|
|
this.getInfo()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
cancel () {
|
|
this.$emit('change', {
|
|
type: 'List',
|
|
isRefresh: true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.AppAnnounceDetail-select {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 32px;
|
|
line-height: 1;
|
|
background: #F5F5F5;
|
|
border-radius: 4px;
|
|
border: 1px solid #D0D4DC;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
|
&:hover {
|
|
border-color: #26f;
|
|
}
|
|
|
|
& > i {
|
|
flex: 1;
|
|
height: 100%;
|
|
line-height: 32px;
|
|
padding: 0 12px;
|
|
color: #888888;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
border-right: 1px solid #D0D4DC;
|
|
background: #fff;
|
|
}
|
|
|
|
.AppAnnounceDetail-select__input {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.select-right {
|
|
height: 100%;
|
|
padding: 0 12px;
|
|
color: #222222;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all ease 0.3s;
|
|
|
|
&:hover {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.select-left {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 1;
|
|
padding: 5px 0 0px 12px;
|
|
border-right: 1px solid #D0D4DC;
|
|
border-radius: 4px 0 0 4px;
|
|
background: #fff;
|
|
|
|
em {
|
|
height: 22px;
|
|
line-height: 22px;
|
|
margin: 0 4px 5px 0;
|
|
color: #222222;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
}
|
|
|
|
span {
|
|
height: 22px;
|
|
line-height: 22px;
|
|
margin: 0 4px 5px 0;
|
|
padding: 0 8px;
|
|
font-size: 12px;
|
|
color: #222222;
|
|
background: #F3F4F7;
|
|
border-radius: 2px;
|
|
border: 1px solid #D0D4DC;
|
|
}
|
|
}
|
|
}
|
|
</style>
|