263 lines
7.9 KiB
Vue
263 lines
7.9 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-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">
|
|
</ai-select>
|
|
</template>
|
|
<template #right>
|
|
<el-input
|
|
v-model="search1.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
|
|
:tableData="tableData1"
|
|
:col-configs="colConfigs1"
|
|
:total="total1"
|
|
border
|
|
tableSize="small"
|
|
:current.sync="search1.current"
|
|
:size.sync="search1.size"
|
|
@getList="getList1">
|
|
<el-table-column slot="user" label="成员" align="left">
|
|
<template slot-scope="{ row }">
|
|
<div class="userinfo">
|
|
<span>{{ row.groupOwnerName }}</span>
|
|
<span style="color: #999">{{ row.mainDepartmentName }}</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="() => {search.current = 1, getList()}"
|
|
@clear="search.current = 1, search.name = '', getList()"
|
|
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="getGroupInfo">
|
|
</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: 'user', label: '参评人' },
|
|
{ prop: 'groupCount', label: '评分人', align: 'center' },
|
|
{ prop: 'groupCount', label: '提交时间', align: 'center' },
|
|
{ prop: 'groupCount', label: '总分', align: 'center' }
|
|
],
|
|
colConfigs2: [
|
|
{ prop: 'groupName', label: '参评人' },
|
|
{ prop: 'memberCount', label: '评分人数', align: 'center' },
|
|
{ slot: 'user', label: '平均分', align: 'center' },
|
|
],
|
|
dictList: [
|
|
{
|
|
dictName: '未填报',
|
|
dictValue: '0'
|
|
},
|
|
{
|
|
dictName: '已填报',
|
|
dictValue: '1'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
created () {
|
|
this.getInfo(this.params.formId)
|
|
this.getList1()
|
|
},
|
|
|
|
methods: {
|
|
getInfo (id) {
|
|
this.instance.post(`/app/appassessmentscortask/taskTemplateDetail?id=${id}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.info = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
getList1 () {
|
|
this.instance.post(`/app/appassessmentscortask/assessStatistics`, null, {
|
|
params: {
|
|
id: this.params.formId,
|
|
...this.search1
|
|
}
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
this.tableData1 = res.data.records
|
|
this.total1 = res.data.total
|
|
}
|
|
})
|
|
},
|
|
|
|
getList2 () {
|
|
this.instance.post(`/app/appassessmentscortask/fillStatistics`, null, {
|
|
params: {
|
|
id: this.params.formId,
|
|
...this.search2
|
|
}
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
this.tableData2 = res.data.records
|
|
this.total2 = res.data.total
|
|
}
|
|
})
|
|
},
|
|
|
|
cancel () {
|
|
this.$emit('change', {
|
|
type: 'Detail',
|
|
isRefresh: false,
|
|
params: {
|
|
id: this.params.id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.AppAnnounceDetail {
|
|
::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>
|