284 lines
8.8 KiB
Vue
284 lines
8.8 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.name"></ai-info-item>
|
||
<ai-info-item label="创建时间" :value="info.createTime"></ai-info-item>
|
||
<ai-info-item label="更新时间" :value="info.idNumber"></ai-info-item>
|
||
<ai-info-item label="创建人" :value="info.phone"></ai-info-item>
|
||
<ai-info-item label="任务完成度" :value="dict.getLabel('EP_registerPersonType', info.type)"></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>
|
||
<el-input
|
||
v-model="search.name"
|
||
size="small"
|
||
placeholder="请输入参评人姓名"
|
||
clearable
|
||
v-throttle="() => {search.current = 1, getList()}"
|
||
@clear="search.current = 1, search.name = '', getList()"
|
||
suffix-icon="iconfont iconSearch">
|
||
</el-input>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:isShowPagination="false"
|
||
tableSize="small"
|
||
border
|
||
:tableData="info.riskDisposalList"
|
||
:col-configs="colConfigs"
|
||
@getList="() => {}">
|
||
</ai-table>
|
||
</template>
|
||
</ai-card>
|
||
<ai-dialog
|
||
:visible.sync="isShow"
|
||
width="780px"
|
||
title="添加表单"
|
||
@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="type" :rules="[{required: true, message: '请选择模板', trigger: 'blur'}]">
|
||
<ai-select
|
||
v-model="form.type"
|
||
clearable
|
||
placeholder="请选择模板">
|
||
</ai-select>
|
||
</el-form-item>
|
||
<el-form-item label="表单名称" style="width: 100%" prop="name" :rules="[{required: true, message: '请输入任务名称', trigger: 'blur'}]">
|
||
<el-input v-model="form.name" size="small" placeholder="请输入任务名称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="参评人员" style="width: 100%" prop="examinesName1" :rules="[{required: true, message: '请选择参评人员', trigger: 'change'}]">
|
||
<ai-user-selecter :instance="instance" v-model="form.examines" @change="e => onUserChange(e, 'examinesName1')">
|
||
<div class="AppAnnounceDetail-select">
|
||
<el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.examinesName1"></el-input>
|
||
<div class="select-left" v-if="form.examines.length">
|
||
<span v-for="(item, index) in form.examines" :key="index">{{ item.name }}</span>
|
||
</div>
|
||
<i v-if="!form.examines.length">请选择</i>
|
||
<div class="select-right">{{ form.examines.length ? '重新选择' : '选择' }}</div>
|
||
</div>
|
||
</ai-user-selecter>
|
||
</el-form-item>
|
||
<el-form-item label="评分人员" style="width: 100%" prop="examinesName2" :rules="[{required: true, message: '请选择评分人员', trigger: 'change'}]">
|
||
<ai-user-selecter :instance="instance" v-model="form.examines1" @change="e => onUserChange(e, 'examinesName2')">
|
||
<div class="AppAnnounceDetail-select">
|
||
<el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.examinesName2"></el-input>
|
||
<div class="select-left" v-if="form.examines1.length">
|
||
<span v-for="(item, index) in form.examines1" :key="index">{{ item.name }}</span>
|
||
</div>
|
||
<i v-if="!form.examines1.length">请选择</i>
|
||
<div class="select-right">{{ form.examines1.length ? '重新选择' : '选择' }}</div>
|
||
</div>
|
||
</ai-user-selecter>
|
||
</el-form-item>
|
||
<el-form-item label="开始结束时间" style="width: 100%" prop="date" :rules="[{required: true, message: '请选择开始结束时间', trigger: 'change'}]">
|
||
<el-date-picker
|
||
v-model="form.date"
|
||
type="daterange"
|
||
size="small"
|
||
range-separator="至"
|
||
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: '',
|
||
name: '',
|
||
type: '',
|
||
examines: [],
|
||
examines1: [],
|
||
examinesName2: '',
|
||
examinesName1: ''
|
||
},
|
||
search: {
|
||
current: 1,
|
||
size: 10,
|
||
name: ''
|
||
},
|
||
isShow: false,
|
||
currIndex: 0,
|
||
isLoading: false,
|
||
tableData: [],
|
||
colConfigs: [
|
||
{prop: 'remarks', label: '异常记录', align: 'center' },
|
||
{prop: 'createTime', label: '创建时间', align: 'center'},
|
||
{prop: 'createUserName', label: '记录人', align: 'center' }
|
||
],
|
||
tabList: ['基本信息', '风险处置']
|
||
}
|
||
},
|
||
|
||
created () {
|
||
if (this.params && this.params.id) {
|
||
this.id = this.params.id
|
||
// this.$dict.load(['EP_registerPersonType', 'EP_communityHandleType', 'EP_highRiskIndustries', 'EP_travelType', 'yesOrNo', 'EP_homeStatus2', 'EP_quarantineStrategy', 'EP_controlMethod', 'EP_abnormalType']).then(() => {
|
||
// this.getInfo(this.params.id)
|
||
// })
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getInfo (id) {
|
||
this.instance.post(`/app/appepidemicpreventionregisterinfo/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
this.info.travelTypeNames = res.data.travelType.split(',').map(v => {
|
||
return this.dict.getLabel('EP_travelType', v)
|
||
}).join('，')
|
||
}
|
||
|
||
this.isLoading = false
|
||
}).catch(() => {
|
||
this.isLoading = false
|
||
})
|
||
},
|
||
|
||
onUserChange(e, type) {
|
||
if (e.length) {
|
||
this.form[type] = '1'
|
||
} else {
|
||
this.form[type] = ''
|
||
}
|
||
},
|
||
|
||
onConfirm (id) {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
this.isShow = false
|
||
this.$emit('change', {
|
||
type: 'Detail',
|
||
params: {
|
||
id: id || ''
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
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>
|