返乡登记
This commit is contained in:
yanran200730
70
project/hlj/app/AppRecoScore/AppRecoScore.vue
Normal file
70
project/hlj/app/AppRecoScore/AppRecoScore.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="doc-circulation">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Detail from './components/Detail'
|
||||
import FormDetail from './components/FormDetail'
|
||||
|
||||
export default {
|
||||
name: 'AppRecoScore',
|
||||
label: '评分任务',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: []
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Detail,
|
||||
List,
|
||||
FormDetail
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange (data) {
|
||||
if (data.type === 'Detail') {
|
||||
this.component = 'Detail'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'FormDetail') {
|
||||
this.component = 'FormDetail'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'List') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.doc-circulation {
|
||||
height: 100%;
|
||||
background: #F3F6F9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
393
project/hlj/app/AppRecoScore/components/Detail.vue
Normal file
393
project/hlj/app/AppRecoScore/components/Detail.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<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>
|
||||
</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 = ''
|
||||
},
|
||||
|
||||
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/appassessmentscorev2template/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>
|
||||
564
project/hlj/app/AppRecoScore/components/FormDetail.vue
Normal file
564
project/hlj/app/AppRecoScore/components/FormDetail.vue
Normal file
@@ -0,0 +1,564 @@
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
: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>
|
||||
327
project/hlj/app/AppRecoScore/components/List.vue
Normal file
327
project/hlj/app/AppRecoScore/components/List.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<ai-list class="list">
|
||||
<ai-title slot="title" title="评分任务" isShowBottomBorder :instance="instance"></ai-title>
|
||||
<template slot="content">
|
||||
<div class="content">
|
||||
<ai-search-bar bottomBorder>
|
||||
<template #left>
|
||||
<el-button type="primary" @click="isShow = true">新建评分任务</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.title"
|
||||
size="small"
|
||||
placeholder="请输入任务名称"
|
||||
clearable
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
@clear="search.current = 1, search.title = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
v-loading="loading"
|
||||
style="margin-top: 16px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="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" @click="remove(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="790px"
|
||||
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>
|
||||
</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="谁参与评分" 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="开始结束时间" 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-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
title: ''
|
||||
},
|
||||
form: {
|
||||
date: '',
|
||||
templateId: '',
|
||||
templateName: '',
|
||||
evaluatorsList: [],
|
||||
scorerList: [],
|
||||
evaluatorsNames: '',
|
||||
scorerNames: ''
|
||||
},
|
||||
colConfigs: [
|
||||
{ prop: 'title', label: '任务名称' },
|
||||
{ prop: 'createUserName', align: 'center', label: '创建人' },
|
||||
{ prop: 'createTime', align: 'center', label: '更新时间' },
|
||||
{
|
||||
prop: 'status',
|
||||
align: 'center',
|
||||
label: '任务状态',
|
||||
render: (h, {row}) => {
|
||||
return h('span', {
|
||||
style: {
|
||||
color: this.dict.getColor('tastStatus', row.status)
|
||||
}
|
||||
}, this.dict.getLabel('tastStatus', row.status))
|
||||
}
|
||||
}
|
||||
],
|
||||
ids: [],
|
||||
tableData: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
isShow: false,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.loading = true
|
||||
|
||||
this.dict.load(['tastStatus']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
|
||||
this.getTmpList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getTmpList () {
|
||||
this.instance.post(`/app/appassessmentscorev2template/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
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onUserChange(e, type) {
|
||||
if (e.length) {
|
||||
this.form[type] = '1'
|
||||
} else {
|
||||
this.form[type] = ''
|
||||
}
|
||||
},
|
||||
|
||||
onClose () {
|
||||
this.form.date = ''
|
||||
this.form.templateId = ''
|
||||
this.form.templateName = ''
|
||||
this.form.evaluatorsList = []
|
||||
this.form.scorerList = []
|
||||
this.form.evaluatorsNames = ''
|
||||
this.form.scorerNames = ''
|
||||
},
|
||||
|
||||
getList () {
|
||||
this.instance.post(`/app/appassessmentscorev2task/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
onClose () {
|
||||
this.form.title = ''
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/appassessmentscortask/addOrUpdate?title=${this.form.title}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功！')
|
||||
this.getList()
|
||||
this.isShow = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appassessmentscortask/delete?id=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user