293 lines
8.8 KiB
Vue
293 lines
8.8 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 }}份</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"
|
||
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>
|
||
</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=${search1.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"
|
||
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>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Detail',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
total1: 0,
|
||
total2: 0,
|
||
name1: '',
|
||
name2: '',
|
||
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'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
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
|
||
}
|
||
})
|
||
},
|
||
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|