565 lines
16 KiB
Vue
565 lines
16 KiB
Vue
<template>
|
||
<ai-detail class="AppAnnounceDetail">
|
||
<template slot="title">
|
||
<ai-title title="表单详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||
</ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<ai-card title="基础信息">
|
||
<template #content>
|
||
<ai-wrapper>
|
||
<ai-info-item label="表单名称" :value="info.templateName"></ai-info-item>
|
||
<ai-info-item label="参评人" :value="info.evaluatorsNames"></ai-info-item>
|
||
<ai-info-item label="开始时间" :value="info.beginTime"></ai-info-item>
|
||
<ai-info-item label="评分人" :value="info.scorerNames"></ai-info-item>
|
||
<ai-info-item label="结束时间" :value="info.endTime"></ai-info-item>
|
||
<ai-info-item label="填写情况">
|
||
<span>已填写{{ info.overPhr }}份，还剩{{ info.totalPhr - info.overPhr }}份</span>
|
||
</ai-info-item>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card>
|
||
<template #title>
|
||
<div class="AppAnnounceDetail-title">
|
||
<span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">填写统计</span>
|
||
<span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">考核统计</span>
|
||
</div>
|
||
</template>
|
||
<template #content>
|
||
<div class="content-item" v-if="currIndex === 0">
|
||
<div class="bottom">
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<ai-download
|
||
:instance="instance"
|
||
:url="`/app/appassessmentscortask/export?id=${params.formId}&type=0&name=${search1.name}&status=${search1.status}`"
|
||
fileName="填写统计"
|
||
:disabled="tableData1.length == 0">
|
||
<el-button size="small" type="primary">导出明细</el-button>
|
||
</ai-download>
|
||
<ai-select
|
||
v-model="search1.status"
|
||
clearable
|
||
placeholder="请选择完成情况"
|
||
:selectList="dictList"
|
||
@change="getList1()">
|
||
</ai-select>
|
||
</template>
|
||
<template #right>
|
||
<el-input
|
||
v-model="search1.name"
|
||
size="small"
|
||
key="currindex1"
|
||
placeholder="请输入参评人、评分人姓名"
|
||
clearable
|
||
v-throttle="() => {search1.current = 1, getList1()}"
|
||
@clear="search1.current = 1, search1.name = '', getList1()"
|
||
suffix-icon="iconfont iconSearch">
|
||
</el-input>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:tableData="tableData1"
|
||
:col-configs="colConfigs1"
|
||
:total="total1"
|
||
border
|
||
tableSize="small"
|
||
:current.sync="search1.current"
|
||
:size.sync="search1.size"
|
||
@getList="getList1">
|
||
<el-table-column slot="evaluators" label="参评人" align="left">
|
||
<template slot-scope="{ row }">
|
||
<div class="userinfo">
|
||
<img :src="row.evaluatorsAvatar" />
|
||
<span>{{ row.evaluatorsName }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="score" label="评分人" align="center">
|
||
<template slot-scope="{ row }">
|
||
<div class="userinfo" style="padding-left: 80px">
|
||
<img :src="row.scorerAvatar" />
|
||
<span>{{ row.scorerName }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
|
||
<template slot-scope="{ row }">
|
||
<div class="table-options">
|
||
<el-button type="text" :disabled="!row.totalScore" @click="showDetail(row.id)">查看内容</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" v-if="currIndex === 1">
|
||
<div class="bottom">
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<ai-download
|
||
:instance="instance"
|
||
:url="`/app/appassessmentscortask/export?id=${params.formId}&type=1&name=${search2.name}`"
|
||
fileName="填写统计"
|
||
:disabled="tableData2.length == 0">
|
||
<el-button size="small" type="primary">导出列表</el-button>
|
||
</ai-download>
|
||
</template>
|
||
<template #right>
|
||
<el-input
|
||
v-model="search2.name"
|
||
size="small"
|
||
key="currindex2"
|
||
placeholder="请输入参评人姓名"
|
||
clearable
|
||
v-throttle="() => {search2.current = 1, getList2()}"
|
||
@clear="search2.current = 1, search2.name = '', getList2()"
|
||
suffix-icon="iconfont iconSearch">
|
||
</el-input>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:tableData="tableData2"
|
||
:col-configs="colConfigs2"
|
||
:total="total2"
|
||
border
|
||
tableSize="small"
|
||
:current.sync="search2.current"
|
||
:size.sync="search2.size"
|
||
@getList="getList2">
|
||
</ai-table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
<ai-dialog
|
||
customFooter
|
||
:visible.sync="isShow"
|
||
@onConfirm="isShow = false"
|
||
width="800px"
|
||
title="表单">
|
||
<div class="middle-content form">
|
||
<div class="middle-content__wrapper">
|
||
<div>
|
||
<div class="left-item__item left-item__item--banner" key="banner" v-if="templateInfo.headPicture">
|
||
<img :src="templateInfo.headPicture">
|
||
</div>
|
||
<div class="left-item__item left-item__item--formname" key="title">
|
||
<h2>{{ templateInfo.title }}</h2>
|
||
</div>
|
||
<div class="left-item__item left-item__item--text" key="text">
|
||
<p>{{ templateInfo.tableExplain }}</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="left-item__item components-item"
|
||
v-for="(item, i) in targetList"
|
||
:key="i">
|
||
<div class="left-item__item--title">
|
||
<i :style="{opacity: item.required ? 1 : 0}">*</i>
|
||
<span>{{ i + 1 }}.</span>
|
||
<h2>{{ item.label }}</h2>
|
||
</div>
|
||
<div class="left-item__item--wrapper">
|
||
<template v-if="(item.type === 'radio')">
|
||
<div class="radio-item" v-for="(field, index) in item.options" :key="index">
|
||
<input type="radio" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
|
||
<img :src="field.img[0].url" v-if="field.img.length">
|
||
<label>{{ field.label }}</label>
|
||
</div>
|
||
</template>
|
||
<template v-if="item.type === 'upload'">
|
||
<img style="width: 100%; height: 100%;" :src="formInfo[`field_${i}`]" v-if="formInfo[`field_${i}`]">
|
||
<div class="left-item__item--upload" v-else>
|
||
<span>图片</span>
|
||
</div>
|
||
</template>
|
||
<template v-if="item.type === 'select'">
|
||
<el-input resize="none" class="preview" style="color: #333" :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></el-input>
|
||
</template>
|
||
<template v-if="(item.type === 'checkbox')">
|
||
<div class="radio-item" v-for="(field, index) in item.options" :key="index">
|
||
<input type="checkbox" disabled :value="field.label" v-model="formInfo[`field_${i}`]"/>
|
||
<img :src="field.img[0].url" v-if="field.img.length">
|
||
<label>{{ field.label }}</label>
|
||
</div>
|
||
</template>
|
||
<template v-if="(item.type === 'input')">
|
||
<div class="text-item">
|
||
<input :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled>
|
||
</div>
|
||
</template>
|
||
<template v-if="(item.type === 'textarea')">
|
||
<div class="textarea-item" resize="none">
|
||
<textarea :placeholder="item.placeholder" v-model="formInfo[`field_${i}`]" disabled></textarea>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="isShow = false">关闭</el-button>
|
||
</template>
|
||
</ai-dialog>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Detail',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
total1: 0,
|
||
total2: 0,
|
||
name1: '',
|
||
name2: '',
|
||
info: {},
|
||
search1: {
|
||
current: 1,
|
||
size: 10,
|
||
name: '',
|
||
status: ''
|
||
},
|
||
search2: {
|
||
current: 1,
|
||
size: 10,
|
||
name: ''
|
||
},
|
||
tableData1: [],
|
||
tableData2: [],
|
||
info: {},
|
||
currIndex: 0,
|
||
colConfigs1: [
|
||
{ slot: 'evaluators', label: '参评人', align: 'center' },
|
||
{ slot: 'score', label: '评分人', align: 'center' },
|
||
{ prop: 'commitTime', label: '提交时间', align: 'center' },
|
||
{ prop: 'totalScore', label: '总分', align: 'center' }
|
||
],
|
||
colConfigs2: [
|
||
{ prop: 'evaluatorsName', label: '参评人', align: 'center' },
|
||
{ prop: 'scorerCount', label: '评分人数', align: 'center' },
|
||
{ prop: 'avgScore', label: '平均分', align: 'center' },
|
||
],
|
||
dictList: [
|
||
{
|
||
dictName: '未填报',
|
||
dictValue: '0'
|
||
},
|
||
{
|
||
dictName: '已填报',
|
||
dictValue: '1'
|
||
}
|
||
],
|
||
templateInfo: {},
|
||
formInfo: {},
|
||
isShow: false,
|
||
targetList: []
|
||
}
|
||
},
|
||
|
||
created () {
|
||
this.getInfo(this.params.formId)
|
||
this.getList1()
|
||
this.getList2()
|
||
},
|
||
|
||
methods: {
|
||
getInfo (id) {
|
||
this.instance.post(`/app/appassessmentscortask/taskTemplateDetail?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
this.instance.post(`/app/appassessmentscoretemplate/queryDetailById?id=${res.data.templateId}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.templateInfo = res.data
|
||
this.targetList = res.data.fields.map(item => {
|
||
return JSON.parse(item.fieldInfo)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
showDetail (id) {
|
||
this.instance.post(`/app/appassessmentscortask/queryDataInfoById?taskDetailId=${id}&dataId=${id}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.formInfo = res.data
|
||
|
||
this.targetList.forEach((item, index) => {
|
||
if (item.type === 'checkbox' && this.formInfo[`field_${index}`]) {
|
||
this.formInfo[`field_${index}`] = this.formInfo[`field_${index}`].split(',')
|
||
}
|
||
})
|
||
|
||
this.isShow = true
|
||
}
|
||
})
|
||
},
|
||
|
||
getList2 () {
|
||
this.instance.post(`/app/appassessmentscortask/assessStatistics`, null, {
|
||
params: {
|
||
id: this.params.formId,
|
||
...this.search2
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData2 = res.data.records
|
||
this.total2 = res.data.total
|
||
}
|
||
})
|
||
},
|
||
|
||
getList1 () {
|
||
this.instance.post(`/app/appassessmentscortask/fillStatistics`, null, {
|
||
params: {
|
||
id: this.params.formId,
|
||
...this.search1
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData1 = res.data.records
|
||
this.total1 = res.data.total
|
||
}
|
||
})
|
||
},
|
||
|
||
cancel () {
|
||
this.$emit('change', {
|
||
type: 'Detail',
|
||
isRefresh: false,
|
||
params: {
|
||
id: this.params.id
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.AppAnnounceDetail {
|
||
.userinfo {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1;
|
||
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
span {
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
::v-deep .AppAnnounceDetail-title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
height: 100%;
|
||
line-height: 56px;
|
||
margin-right: 32px;
|
||
color: #888888;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
transition: all ease 0.3s;
|
||
border-bottom: 3px solid transparent;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
color: #222;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.active {
|
||
color: #222222;
|
||
border-bottom: 3px solid #2266FF;
|
||
}
|
||
}
|
||
}
|
||
.form {
|
||
.left-item__item--banner {
|
||
img {
|
||
width: 100%;
|
||
height: 235px;
|
||
}
|
||
|
||
.config-item__banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 235px;
|
||
line-height: 1;
|
||
border: 1px dashed #bbb;
|
||
|
||
span {
|
||
margin-top: 4px;
|
||
color: #555555;
|
||
font-size: 14px;
|
||
}
|
||
|
||
i {
|
||
font-size: 30px;
|
||
color: #8899bb;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-item__item--formname {
|
||
margin: 16px 0 32px;
|
||
padding: 0 12px;
|
||
color: #333333;
|
||
font-size: 15px;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.left-item__item--text {
|
||
line-height: 20px;
|
||
// margin-bottom: 48px;
|
||
padding: 0 12px 20px;
|
||
text-align: justify;
|
||
color: #666;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.components-item {
|
||
position: relative;
|
||
padding: 16px 16px;
|
||
|
||
.left-item__item--wrapper {
|
||
& > img {
|
||
max-width: 300px;
|
||
}
|
||
}
|
||
|
||
.left-item__item--upload {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 6px;
|
||
border: 1px dashed #bbb;
|
||
|
||
i {
|
||
font-size: 24px;
|
||
color: #8899bb;
|
||
}
|
||
|
||
span {
|
||
margin-top: 4px;
|
||
font-size: 12px;
|
||
color: #555;
|
||
}
|
||
}
|
||
|
||
.text-item {
|
||
input {
|
||
display: block;
|
||
width: 100%;
|
||
height: 40px;
|
||
border: none;
|
||
border-bottom: 1px solid #ddd;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.textarea-item {
|
||
textarea {
|
||
width: 100%;
|
||
height: 120px;
|
||
resize: none;
|
||
border: 1px solid #ddd;
|
||
padding: 10px;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
|
||
&:disabled {
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.radio-item {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
input {
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
label {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
img {
|
||
width: 60px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-item__item--title {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
i {
|
||
position: relative;
|
||
top: 3px;
|
||
margin-right: 5px;
|
||
color: #E22120;
|
||
}
|
||
|
||
span {
|
||
position: relative;
|
||
top: 3px;
|
||
}
|
||
|
||
h2 {
|
||
color: #333333;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|