需求及效果图,看前一篇随笔
话不多说直接上代码:
<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>