需求及效果图，看前一篇随笔
话不多说直接上代码：
<template>
<div class="common_info">
<Spin size="large" fix v-if="loadingShow"></Spin>
<div class="btn_box">
<Button shape="circle" @click="goBack">返回</Button>
<Button type="primary" shape="circle" :loading="saveLoading" @click="save('formData')">保存</Button>
</div>
<div class="content_box">
<Form ref="formData" :model="formData" :rules="validate">
<Row>
<Col span="12">
<FormItem label="考核年度：" prop="year">
<DatePicker type="year" placeholder="请选择年份" style=" 200px" v-model="formData.year" format="yyyy" :clearable="false"></DatePicker>
</FormItem>
</Col>
<Col span="12">
<FormItem label="考核对象：" prop="assesseeTypeCodeArr">
<Cascader ref="address" :data="evalTypeOptions" v-model="formData.assesseeTypeCodeArr" @on-change="changeCascader" style="200px" :clearable="false"></Cascader>
</FormItem>
</Col>
</Row>
<Row>
<Col span="24">
<FormItem label="评分人权重：">
<div style="color:red">(必须选择年度和考核对象后才能设置评分人权重)</div>
<table border="1" cellspacing='0' class='top_table'>
<tbody>
<tr>
<td class="td_name td_name_l required-star">评分人员</td>
<td class="td_name td_name_r required-star">权重(%)</td>
</tr>
</tbody>
</table>
<Table ref="selection" v-for="(item) in columnsDataList" :columns="item.columns" :data="item.data" :key='item.id'>
<template slot-scope="{row, index }" slot="postCodeArr">
<Select v-model="row.postCodeArr" multiple style="550px" @on-change="tableSelectChange($event, index, item.data, evalAssessorOptions)" :transfer="true" >
<Option v-for="item in evalAssessorOptions" :value="item.itemValue" :key="item.itemValue">{{ item.itemName }}</Option>
</Select>
</template>
<template slot-scope="{ row, index }" slot="scoreRatio">
<Input v-model="row.scoreRatio" style=" 90px" @on-change="tableInputChange($event, index, 'scoreRatio', item.data)"/>
<Icon type="ios-add-circle-outline" @click="addTableRow(row,item)" />
<Icon type="ios-close-circle-outline" @click="delTableRow(index,item)" />
</template>
</Table>
</FormItem>
</Col>
</Row>
</Form>
</div>
</div>
</template>
<script>
import { Message,Modal } from 'view-design';
import {MsgType, PublicType } from '../../libs/constants';
export default {
data(){
return {
validate: {
year: [{ required: true, message: '请输入年度', trigger: 'blue' }],
assesseeTypeCodeArr: [{ required: true, message: '请选择考核对象', trigger: 'blue' }],
},
loadingShow:false, //页面加载loading效果
saveLoading:false,
formData:{
evaluationAssessorList:[]
},
evalTypeOptions:[], //考核对象数据字典
evalAssessorOptions:[], //评分人员数据字典
columnsDataList:[], //表头和数据的合集
assessorList:[], //编辑时进来的评分人数据
}
},
created() {
this.initDic();
let routerParams = this.$route.query;
if(routerParams.type == 'edit'){ //编辑
this.getDetatil(routerParams.id);
}else if(routerParams.type == 'add'){ //新增
}
},
mounted(){},
computed: {},
watch: {},
methods: {
// 数据字典初始化
initDic () {
this.$api.common.getDicList('ASSESSOR_TYPE').then(res => {
if (res.result == MsgType.SUCCESS) {
let dicTree = res.data.dicTree || {};
let dicTreeList = dicTree.children || [];
this.evalAssessorOptions = dicTreeList
}
});
this.$api.common.getDicList('EVAL_TYPE').then(res => {
if (res.result == MsgType.SUCCESS) {
let dicTree = res.data.dicTree || {};
let dicTreeList = dicTree.children || [];
let evalTypeOptions = dicTreeList;
for(let i=0;i<evalTypeOptions.length;i++){
evalTypeOptions[i].value = evalTypeOptions[i].itemValue
evalTypeOptions[i].label = evalTypeOptions[i].itemName
let item = evalTypeOptions[i].children;
if(!!item){
for(let j=0;j<item.length;j++){
item[j].value = item[j].itemValue
item[j].label = item[j].itemName
}
}
}
this.evalTypeOptions = evalTypeOptions;
}
});
},
//获取详情数据
getDetatil(id){
let data={
id:id
};
this.loadingShow = true;
this.$api.evalProgrammeSetting.getDetailData(data).then(res=>{
if(res.result == MsgType.SUCCESS){
let data = res.resultData || [];
this.formData= data[0] || {};
if(this.formData.assesseeTypeCodeArr !=undefined){
this.formData.assesseeTypeCodeArr = this.formData.assesseeTypeCodeArr.split(',')
}
this.assessorList = this.formData.assessorList;
let params ={
evalYear: this.formData.year,
evalTypeCode: this.formData.assesseeTypeCode
}
this.loadingShow = true;
this.$api.evalProgrammeSetting.getByParams(params).then(res=>{
this.loadingShow = false;
if(res.result == MsgType.SUCCESS){
let evalNameList = res.resultData || []
let that = this;
for (let i = 0; i < evalNameList.length; i++) {
var title_info = {
id: -1,
columns: [
{title: '考核指标名称',slot: 'postCodeArr'},
{title: '--',200,align:'center',slot: 'scoreRatio'}
],
data: []
};
title_info.columns[0].title = evalNameList[i].evalName;
title_info.id = evalNameList[i].id;
that.columnsDataList.push(title_info);
}
let columnsDataList = this.columnsDataList;
let assessorList = this.assessorList;
//评分人数据与各自表头对应上
for(let i=0;i<columnsDataList.length;i++){
for(let j=0;j<assessorList.length;j++){
if(columnsDataList[i].id == assessorList[j].indexConfigId){
assessorList[j].postCodeArr =assessorList[j].postCode.split(','); //下拉框的回填需要数组形式
columnsDataList[i].data.push(assessorList[j]);
}
}
}
this.columnsDataList = columnsDataList;
}
}).catch(() => {
this.loadingShow = false;
});
}
this.loadingShow = false;
}).catch(() => {
this.loadingShow = false;
});
},
/**
* 下拉框change事件
* @param e 修改值
* @param index 下标
* @param data 当前数据
* @param dictList 字典数组
*/
tableSelectChange(e,index,data,dictList){
let postNameList =''
for(let i=0;i<e.length;i++){
postNameList += PublicType.getDictNameByCode(e[i],dictList)+',';
}
postNameList = postNameList.slice(0,postNameList.length-1);
data[index].postName = postNameList;
data[index].postCodeArr= e;
data[index].postCode = e.join(',');
},
//输入框change事件
tableInputChange(e,index,type,data){
data[index][type] = e.target.value
},
//切换考核对象
changeCascader(value, selectedData){
this.columnsDataList =[]; //每次切换考核对象要清空数据和表头，防止累加push数据
let flag = true;
if(value.length !=0 && this.formData.year == ''){
this.$Message.error({
content: '请先选择考核年度！',
duration: 3
});
this.$refs.address.clearSelect()
flag = false;
return
}
if(flag){
this.formData.year = this.$moment(this.formData.year).format('YYYY');
this.formData.assesseeType = selectedData[selectedData.length -1].label;
this.formData.assesseeTypeCode = selectedData[selectedData.length -1].value;
let params ={
evalYear:this.formData.year,
evalTypeCode:this.formData.assesseeTypeCode
}
this.loadingShow = true;
this.$api.evalProgrammeSetting.getByParams(params).then(res=>{
this.loadingShow = false;
if(res.result == MsgType.SUCCESS){
let evalNameList = res.resultData || []
let that = this;
for (let i = 0; i < evalNameList.length; i++) {
var title_info = {
id: -1,
columns: [
{title: '考核指标名称',slot: 'postCodeArr'},
{title: '--',200,align:'center',slot: 'scoreRatio'}
],
data: []
};
title_info.columns[0].title = evalNameList[i].evalName;
title_info.data = [{postCodeArr:[],postCode: '',postName:'',scoreRatio: '',indexConfigId: ''}];
title_info.id = evalNameList[i].id;
that.columnsDataList.push(title_info);
}
}
}).catch(() => {
this.loadingShow = false;
});
}
},
//添加行
addTableRow (row,items) {
const item = {
indexConfigId:'',
postCodeArr:[],
postCode: '',
postName:'',
scoreRatio: '',
}
items.data.push(item)
},
//删除行
delTableRow(index,items){
items.data.splice(index,1);
},
//保存
save(name){
// console.log(this.formData)
// console.log(this.columnsDataList)
this.formData.evaluationAssessorList =[]
let flag = true;
if(this.formData.year == '' || this.formData.assesseeTypeCode == undefined){
this.$Message.error({
content: '考核年度和考核对象不能为空，请检查！',
duration: 5
});
flag = false;
}
let filterData = this.columnsDataList;
filterData.forEach(item =>{
var datas = item.data;
datas.forEach((children, index) =>{
if(children.postCode == '' || children.scoreRatio == ''){
this.$Message.error({
content: '【'+item.columns[0].title + '】中的评分人员和权重不能为空，请检查！',
duration: 5
});
flag = false;
}
children.indexConfigId =item.id;
this.formData.evaluationAssessorList.push(children);
})
})
if(flag){
this.formData.year = this.$moment(this.formData.year).format('YYYY');
let params= {
evaluationTarget:{
id: this.formData.id,
year: this.formData.year,
assesseeType: this.formData.assesseeType,
assesseeTypeCode: this.formData.assesseeTypeCode,
assesseeTypeCodeArr: this.formData.assesseeTypeCodeArr.join(','),
},
evaluationAssessorList: this.formData.evaluationAssessorList
}
this.loadingShow = true;
this.$api.evalProgrammeSetting.saveData(params).then(res=>{
if(res.result == MsgType.SUCCESS){
let _this = this;
setTimeout(function(){
_this.goBack();
},1000)
}
this.loadingShow = false;
}).catch(() => {
this.loadingShow = false;
});
}
},
//返回
goBack(){
this.$router.push({name: 'evalProgrammeSettingList'});
},
},
}
</script>
<style scoped lang="less">
.common_info .content_box{
70%;
margin:90px auto 0 5%;
}
.ivu-cascader{
display: inline-block;
}
.common_info .top_table{
margin-bottom: 0;
border:none;
}
.common_info .top_table .td_name_l{
padding-left:20px;
text-align: left;
}
.common_info .top_table .td_name_r{
25%;
text-align: center;
}
.ivu-icon{
font-size: 24px;
color:red;
margin-left:5px;
cursor: pointer;
}
</style>