zhixinlian
/
fontend-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增界面 左右侧指标数据移动功能实现

Browse Source
zqqdev
CherrysChang 5 years ago
parent 5995db5d95
commit f8b7ce3153
1 changed files with 104 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 133
      src/views/train/case-detail.vue

133
src/views/train/case-detail.vue
Unescape View File

@ -26,7 +26,7 @@
<el-col :span="7"> <el-col :span="7">
<el-table ref="leftTable" :data="getFilterDataBySearchName" :row-key="getRowKey" height="400" border highlight-current-row tooltip-effect="dark" @selection-change="leftSelectionChange"> <el-table ref="leftTable" :data="getFilterDataBySearchName" :row-key="getRowKey" height="400" border highlight-current-row tooltip-effect="dark" @selection-change="leftSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column> <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column header-align="right" label="未选择 10/10"> <el-table-column header-align="right" :label="leftSumLabel">
<el-table-column prop="name" label="名称" show-overflow-tooltip> <el-table-column prop="name" label="名称" show-overflow-tooltip>
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<el-input v-model="searchName" placeholder="输入指标名称模糊搜索" prefix-icon="el-icon-search"></el-input> <el-input v-model="searchName" placeholder="输入指标名称模糊搜索" prefix-icon="el-icon-search"></el-input>
@ -36,29 +36,34 @@
</el-table> </el-table>
</el-col> </el-col>
<el-col :span="1" style="text-align:center;padding: 160px 0 0 0;width: 24px;"> <el-col :span="1" style="text-align:center;padding: 160px 0 0 0;width: 24px;">
<!--:disabled="leftSelectedRows.length==0"--> <el-button @click="addToRight" size="mini" type="primary" icon="el-icon-arrow-right" circle :disabled="isDisableToRight"></el-button>
<el-button @click="addToRight" size="mini" type="primary" icon="el-icon-arrow-right" circle :disabled="isDisable"></el-button> <el-button @click="removeToLeft" size="mini" type="primary" icon="el-icon-arrow-left" circle :disabled="isDisableToLeft" style="margin:10px 0 0 0;"></el-button>
<el-button @click="removeToLeft" size="mini" type="primary" icon="el-icon-arrow-left" circle style="margin:10px 0 0 0;"></el-button>
</el-col> </el-col>
<el-col :span="14" class="rightTable"> <el-col :span="14" class="rightTable">
<el-table ref="rightTable" :data="dataForm.taskList" height="400" border highlight-current-row tooltip-effect="dark" :summary-method="getScoreSummaries" show-summary @selection-change="rightSelectionChange"> <el-table ref="rightTable" :data="rightTargetList" height="400" border highlight-current-row tooltip-effect="dark" :summary-method="getScoreSummaries" show-summary @selection-change="rightSelectionChange">
<el-table-column type="selection" width="55"></el-table-column> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column header-align="right" label="已选择 0/10，剩余可配置分数 90 分"> <el-table-column header-align="right" :label="rightSumLabel">
<el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="target" label="任务目标" width="226"> <el-table-column prop="target" label="任务目标" width="226">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item :prop="'taskList.'+scope.$index+'.taskOperate'" :rules="dataRule.score" class="score-input" > <el-row>
<el-select v-model="scope.row.taskOperate" size="small" style="width: 100px;"> <el-col :span="12">
<el-option label="大于" value="1"></el-option> <el-form-item :prop="'taskList.'+scope.$index+'.taskOperate'" :rules="dataRule.score" class="score-input" >
<el-option label="等于" value="2"></el-option> <el-select v-model="scope.row.taskOperate" size="small" style="width: 100px;">
<el-option label="小于" value="3"></el-option> <el-option label="大于" value="1"></el-option>
</el-select> <el-option label="等于" value="2"></el-option>
</el-form-item> <el-option label="小于" value="3"></el-option>
<el-form-item :prop="'taskList.'+scope.$index+'.taskRate'" :rules="dataRule.score" class="score-input" > </el-select>
<el-input size="small" v-model.trim="scope.row.taskRate" :disabled="formAction == 2" style="width: 100px;"> </el-form-item>
<i slot="suffix">%</i> </el-col>
</el-input> <el-col :span="12">
</el-form-item> <el-form-item :prop="'taskList.'+scope.$index+'.taskRate'" :rules="dataRule.score" class="score-input" >
<el-input size="small" v-model.trim="scope.row.taskRate" :disabled="formAction == 2" style="width: 100px;">
<i slot="suffix">%</i>
</el-input>
</el-form-item>
</el-col>
</el-row>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="score" label="分数" width="120"> <el-table-column prop="score" label="分数" width="120">
@ -70,7 +75,7 @@
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" width="50"> <el-table-column fixed="right" label="操作" width="50">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click.native.prevent="rightDeleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button> <el-button @click.native.prevent="removeToLeftByRow(scope.$index,scope.row)" type="text" size="small">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
@ -140,9 +145,11 @@
], ],
}, },
leftDictTargetList: [],//左侧指标数据：从数据库获取量化指标字典数据 leftDictTargetList: [],//左侧指标数据：从数据库获取量化指标字典数据
leftDictTargetListCount: 0,//左侧指标初始数据总数
searchName: '', searchName: '',
leftSelectedRows: [],//左侧指标选中数据 leftSelectedRows: [],//左侧选中的指标数据
rightTargetList:[],//右侧设置的指标数据 rightTargetList:[],//右侧设置的指标数据
rightSelectedRows:[],//右侧选中的指标数据
selectedItemRows: [], selectedItemRows: [],
selectedTradeItems: [], selectedTradeItems: [],
} }
@ -167,15 +174,42 @@
this.initTargetList(); this.initTargetList();
}, },
computed: { computed: {
isDisable: function() { //是否禁用 true为禁用，false为可用 isDisableToRight: function() { //是否禁用 true为禁用，false为可用
if(this.leftSelectedRows && this.leftSelectedRows.length >0) { if(this.leftSelectedRows && this.leftSelectedRows.length >0) {
return false; return false;
} }
return true; return true;
}, },
isDisableToLeft: function() { //是否禁用 true为禁用，false为可用
if(this.rightSelectedRows && this.rightSelectedRows.length >0) {
return false;
}
return true;
},
getFilterDataBySearchName: function () {//根据指标名称筛选列表数据 getFilterDataBySearchName: function () {//根据指标名称筛选列表数据
let searchName = this.searchName; let searchName = this.searchName;
return this.leftDictTargetList.filter(data => !searchName || data.name.toLowerCase().includes(searchName.toLowerCase())) return this.leftDictTargetList.filter(data => !searchName || data.name.toLowerCase().includes(searchName.toLowerCase()))
},
leftSelectedCount: function(){//左侧已选择的指标数
return this.leftSelectedRows.length;
},
rightTargetListCount: function () {//右侧指标数据总数
return this.rightTargetList.length;
},
rightRemainScore: function (){//右侧剩余可配置分数
if(Number(this.totalScore)>100){
return 0;
}else{
return 100-Number(this.totalScore);
}
},
leftSumLabel: function () {//左侧剩余指标和指标总数的显示
// let remainCount = this.leftDictTargetListCount - this.leftSelectedCount -this.rightTargetListCount;
let remainCount = this.leftDictTargetListCount - this.rightTargetListCount;
return remainCount+"/"+this.leftDictTargetListCount;
},
rightSumLabel: function () {//右侧选择的指标和指标总数的显示
return this.rightTargetListCount+"/"+this.leftDictTargetListCount+"，剩余可配置分数 "+this.rightRemainScore+" 分";
} }
}, },
methods: { methods: {
@ -187,6 +221,7 @@
Train.getTargetList(searchObj).then(res => { Train.getTargetList(searchObj).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.leftDictTargetList = res.data; this.leftDictTargetList = res.data;
this.leftDictTargetListCount = this.leftDictTargetList.length;
} }
}).catch(error => { }).catch(error => {
console.info(error) console.info(error)
@ -199,16 +234,56 @@
this.leftSelectedRows = selection; this.leftSelectedRows = selection;
}, },
addToRight() { addToRight() {
console.info("addToRight") //移除左侧选中的指标数据，右侧添加对应的数据
this.leftSelectedRows.forEach(item => {
if (this.leftDictTargetList.indexOf(item) > -1) {
// 从量化指标字典数据列表中移出选中的数据
this.leftDictTargetList.splice(this.leftDictTargetList.indexOf(item), 1);
}
if(this.rightTargetList.indexOf(item) == -1){
//右侧添加选中的数据
this.rightTargetList.push(item);
}
});
//清除选中的数据
this.leftSelectedRows = [];
//清空量化指标字典数据列表的选择
this.$refs.leftTable.clearSelection();
}, },
removeToLeft() { removeToLeft() {//批量移除右侧选中的指标数据，左侧添加对应的数据（位置为初始位置）
console.info("removeToLeft") this.rightSelectedRows.forEach(item => {
let rightItemIndex = this.rightTargetList.indexOf(item);
if (rightItemIndex > -1) {
// 从右侧指标设置列表中移出选中的数据
this.rightTargetList.splice(rightItemIndex, 1);
}
//左侧还原右侧选中的数据
this.removeToLeftByRow(rightItemIndex,item);
});
//清除选中的数据
this.rightSelectedRows = [];
//清空量化指标字典数据列表的选择
this.$refs.rightTable.clearSelection();
}, },
rightDeleteRow() { removeToLeftByRow(rowIndex,row) {//单个移除右侧选中的指标数据，左侧添加对应的数据（位置为初始位置）
console.info("rightDeleteRow") //获取当前移除项的信息
// let selItem = this.rightTargetList[rowIndex];
//移除到左侧，显示到原来的位置 //ZqqTODO seq 字段命名问题（左侧字典和右侧设置项的seq）
let index = this.leftDictTargetList.findIndex(item => {
return row.seq < item.seq;
});
if (index > -1) {
this.leftDictTargetList.splice(index,0,row);
}else{
this.leftDictTargetList.splice(this.leftDictTargetList.length,0,row);
}
//右侧移除当前项
this.rightTargetList.splice(rowIndex,1);
}, },
rightSelectionChange(val) { rightSelectionChange(val) {
// this.leftSelectedRows = val; this.rightSelectedRows = val;
}, },
getScoreSummaries(param) { // 计算总分 getScoreSummaries(param) { // 计算总分
const { columns, data } = param; const { columns, data } = param;
@ -219,7 +294,6 @@
sums[index] = '总分'; sums[index] = '总分';
return; return;
} }
if (index === 3) { // 分数栏 if (index === 3) { // 分数栏
values = data.map(item => Number(item['score'])); values = data.map(item => Number(item['score']));
sums[index] = values.reduce((prev, curr) => { sums[index] = values.reduce((prev, curr) => {
@ -231,7 +305,8 @@
} }
}, 0); }, 0);
// 给右上角总分赋值 // 给右上角总分赋值
this.$set(this.dataForm,'totalScore',sums[index]); // this.$set(this.dataForm,'totalScore',sums[index]);
this.totalScore = sums[index];
sums[index] += ' 分'; sums[index] += ' 分';
} else { } else {
sums[index] = '--'; sums[index] = '--';

Write Preview
Loading…
Cancel
Save