From f2c0dc24a5142ddc08912456d55c80351cf4d9b6 Mon Sep 17 00:00:00 2001
From: zhangxp <zhangxp@chicecm.com>
Date: 星期三, 14 六月 2023 14:46:47 +0800
Subject: [PATCH] 优化穿梭框
---
Source/UBCS-WEB/src/components/template/FlowPath.vue | 5 -
Source/UBCS-WEB/src/components/template/Stage.vue | 91 +++++++++-------------
Source/UBCS-WEB/src/views/flow/flowPath.vue | 29 ++++---
Source/UBCS-WEB/vue.config.js | 4
Source/UBCS-WEB/src/components/template/TableTransfer.vue | 106 +++++++++++++------------
5 files changed, 111 insertions(+), 124 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/template/FlowPath.vue b/Source/UBCS-WEB/src/components/template/FlowPath.vue
index 2d7a508..3081958 100644
--- a/Source/UBCS-WEB/src/components/template/FlowPath.vue
+++ b/Source/UBCS-WEB/src/components/template/FlowPath.vue
@@ -1,11 +1,9 @@
<template>
-
<avue-crud ref="crud" :table-loading="loading" :data="data" v-model="form" :option="option" :page.sync="page"
:search.sync="search" @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete"
@row-update="handleEdit" @refresh-change="handleRefresh" @size-change="handleSizePage"
@current-change="handleCurrentPage">
</avue-crud>
-
</template>
<script>
@@ -19,11 +17,8 @@
default: ""
}
},
- watch: {
- },
data() {
return {
-
loading: false,
page: {
currentPage: 1,
diff --git a/Source/UBCS-WEB/src/components/template/Stage.vue b/Source/UBCS-WEB/src/components/template/Stage.vue
index ef29b0f..31ee7b5 100644
--- a/Source/UBCS-WEB/src/components/template/Stage.vue
+++ b/Source/UBCS-WEB/src/components/template/Stage.vue
@@ -1,5 +1,5 @@
<template>
- <el-dialog title="妯℃澘闃舵" width="90%" append-to-body="true" :visible.sync="dialogVisible">
+ <div>
<avue-crud ref="crud" :table-loading="loading" :data="data" :option="option" :page.sync="page"
@on-load="getDataList" @size-change="handleSizePage" @current-change="handleCurrentPage"
@row-click="handleRowClick">
@@ -17,9 +17,9 @@
</template>
</avue-crud>
</el-dialog>
- <table-transfer :visible.sync="dialogTransfer" v-model="listVal" :dataList="tableData" :columns="columns"
- keyName="oid" @save="handleSave"></table-transfer>
- </el-dialog>
+ <table-transfer v-if="flag" :visible.sync="dialogTransfer" v-model="attributeValue" :dataList="attributeData"
+ :columns="columns" keyName="oid" @save="handleSave" @close="handelClose"></table-transfer>
+ </div>
</template>
<script>
@@ -31,11 +31,6 @@
TableTransfer
},
props: {
- // 鏄惁鎵撳紑
- visible: {
- typeof: Boolean,
- default: false
- },
code: {
typeof: String,
required: true,
@@ -43,25 +38,7 @@
}
},
watch: {
- visible(n) {
- this.dialogVisible = n;
- },
- dialogVisible(n) {
- this.$emit('update:visible', n)
- },
- },
- computed: {
- tableData() {
- return this.setTable()
- },
- listVal() {
- let data = this.setTable()
- let newdata = data.map(item => {
- return item.checked ? item.oid : undefined
- })
- console.log(newdata.filter(item => item))
- return newdata.filter(item => item)
- }
+
},
data() {
const options = {
@@ -81,9 +58,9 @@
editBtn: false,
}
return {
- list: [],
- listRight: [],
- dialogVisible: this.visible,
+ attributeData: [],
+ attributeValue: [],
+ flag: false,
dialogTransfer: false,
dialogNode: false,
visibleTable: false,
@@ -136,14 +113,11 @@
},
}
},
- mounted() {
- this.getAttributeList()
- },
methods: {
- setTable() {
- return this.list.map(item => {
- if (this.listRight.length !== 0) {
- this.listRight.forEach(element => {
+ setTable(data, list) {
+ return data.map(item => {
+ if (list.length !== 0) {
+ list.forEach(element => {
if (item.id === element.attrId) item.checked = true
});
}
@@ -178,12 +152,22 @@
// 鑾峰彇鍏ㄩ儴灞炴��
async getAttributeList() {
const response = await attributeList({ 'conditionMap[classifyTemplateOid]': this.code })
- if (response.status === 200) {
- const data = response.data.data
- this.list = data.records.map(item => {
+ const responseRight = await attributeListRight({ templateId: this.code, modelKey: this.modelKey, taskId: this.saveParam.taskId })
+ if (response.status === 200 && responseRight.status === 200) {
+ let datas = response.data.data.records
+ let dataRight = responseRight.data.data
+ datas = datas.map(item => {
const { oid, id, name, attributeGroup } = item
- return { oid, id, name, attributeGroup, ...{ checked: false } }
+ item = { oid, id, name, attributeGroup, ...{ checked: false } }
+ if (dataRight.length !== 0) {
+ dataRight.forEach(element => { if (item.id === element.attrId) item.checked = true });
+ return item
+ }
})
+ let dataValue = datas.map(item => item.checked ? item.oid : undefined)
+ this.attributeValue = dataValue.filter(item => item)
+ this.attributeData = datas
+ this.flag = true
}
},
// 鑾峰彇宸蹭繚瀛樺睘鎬�
@@ -205,17 +189,12 @@
this.saveParam.modelKey = row.modelKey
},
handleMaintenanceTransfer(row) {
- console.log(row)
- this.dialogTransfer = true
this.saveParam.taskId = row.taskId
this.saveParam.taskName = row.taskName
- this.getAttributeListRight()
- },
- handleSizePage(event) {
- this.page.pageSize = event
- },
- handleCurrentPage(event) {
- this.page.currentPage = event
+ this.getAttributeList()
+ this.$nextTick(() => {
+ this.dialogTransfer = true
+ })
},
handleRowClick(row) {
console.log(row)
@@ -224,10 +203,12 @@
this.dialogNode = true
},
handleRowStageClick(row) {
- this.dialogTransfer = true
this.saveParam.taskId = row.taskId
this.saveParam.taskName = row.taskName
- this.getAttributeListRight()
+ this.getAttributeList()
+ this.$nextTick(() => {
+ this.dialogTransfer = true
+ })
},
async handleSave(event) {
console.log(event)
@@ -250,9 +231,13 @@
type: 'success',
message: '鏂板鏁版嵁鎴愬姛锛�'
})
+ this.flag = false
// done()
// this.getDataList()
}
+ },
+ handelClose() {
+ this.flag = false
}
}
}
diff --git a/Source/UBCS-WEB/src/components/template/TableTransfer.vue b/Source/UBCS-WEB/src/components/template/TableTransfer.vue
index 488fb95..abedd0d 100644
--- a/Source/UBCS-WEB/src/components/template/TableTransfer.vue
+++ b/Source/UBCS-WEB/src/components/template/TableTransfer.vue
@@ -1,5 +1,5 @@
<template>
- <el-dialog :title="title" width="70%" append-to-body="true" :visible.sync="dialogVisible">
+ <el-dialog :title="title" width="70%" append-to-body="true" :visible.sync="dialogVisible" @close="handelClose">
<el-row :gutter="20">
<el-col :span="11">
<el-card class="box-card">
@@ -8,9 +8,9 @@
<el-input class="input" v-if="showSearch" v-model="searchLeft" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�"
@keyup.enter.native="handleEnter"></el-input>
</div>
- <el-table ref="transferLeftTable" :data="leftData" height="500" highlight-current-row
- tooltip-effect="dark" @selection-change="handleLeftSelectionChange" @row-click="handleLeftRowClick">
- <el-table-column type="selection" width="50" align="center" fixed="left" :selectable="selectable" />
+ <el-table ref="transferTable" :data="leftData" height="500" highlight-current-row tooltip-effect="dark"
+ @selection-change="handleLeftSelectionChange" @row-click="handleLeftRowClick">
+ <el-table-column type="selection" width="50" align="center" fixed="left" />
<div v-for="(item, index) in columns" :key="index">
<el-table-column v-if="item.visible" :label="item.label" align="center" :prop="item.key" />
</div>
@@ -74,7 +74,7 @@
//涓婚敭key鍊�
keyName: {
type: String,
- default: "id",
+ default: "oid",
},
columns: {
type: Array,
@@ -116,17 +116,12 @@
},
deep: true,
},
- dataList: {
- handler(data) {
- console.log(data)
-
- },
- deep: true,
- }
},
data() {
return {
dialogVisible: this.visible,
+ indeterminate: false,
+ isCheck: false,
searchLeft: "",
leftIds: [],
leftMultiple: true,
@@ -141,25 +136,26 @@
},
mounted() {
this.init();
+ console.log(this.$refs.transferTable)
},
methods: {
- selectable(row, index) {
- console.log(row)
- return row.checked === false //涓簍rue鐨勬椂鍊欏彲浠ラ�夛紝涓篺alse鍒欎笉鍙�夋嫨
- },
init() {
- this.rightIds = this.value;
- console.log(this.rightIds)
- for (let i = 0; i < this.dataList.length; i++) {
- if (this.value.some((item) => item == this.dataList[i][this.keyName])) {
- this.rightDataList.push(this.dataList[i]);
- } else {
- this.leftDataList.push(this.dataList[i]);
+ let that = this
+ that.rightIds = that.value;
+ for (let i = 0; i < that.dataList.length; i++) {
+ if (that.value.some((item) => item == that.dataList[i][that.keyName])) {
+ that.rightDataList.push(that.dataList[i]);
}
+ // else{
+ // that.leftDataList.push(that.dataList[i])
+ // }
+ that.leftDataList.push(that.dataList[i])
+
}
- this.leftData = [...this.leftDataList];
- this.rightData = [...this.rightDataList];
+ that.leftData = [...that.leftDataList];
+ that.rightData = [...that.rightDataList];
},
+
// left澶氶�夋閫変腑鏁版嵁
handleLeftSelectionChange(selection) {
this.leftIds = selection.map((item) => item[this.keyName]);
@@ -176,21 +172,26 @@
let a = this.leftIds.findIndex(
(item) => item == this.leftDataList[i][this.keyName]
);
- console.log(a)
if (a !== -1) {
- this.rightDataList.push(this.leftDataList[i]);
- // this.leftDataList[i].checked = true
- // this.$refs.transferLeftTable.toggleRowSelection(this.leftDataList[i],true)
- this.$delete(this.leftDataList, i);
- i--;
+ let moveLefti = this.leftDataList[i];//宸﹁竟缃楄繃鏉ョ殑
+ let moveLeftiKey = moveLefti['id'];
+ let isMove = true;
+ for (let j = 0; j < this.rightDataList.length; j++) {
+ let rifhtDataListi = this.rightDataList[j];//鍙宠竟寰幆鍑烘潵鐨勬瘡涓�涓�
+ let rightDataListiKey = rifhtDataListi['id'];//姣忎竴涓猭ey
+ if (rightDataListiKey == moveLeftiKey) {
+ isMove = false;
+ break;
+ }
+ }
+ if (isMove) {
+ this.rightDataList.push(this.leftDataList[i]);
+ this.leftDataList[i].checked = true
+ // this.$delete(this.leftDataList, i);
+ // i--;
+ }
}
}
- // let obj = {}
- // let filterright = this.rightDataList.reduce((cur, next) => {
- // obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
- // return cur;
- // }, [])
- // console.log('filterright', filterright)
this.leftData = this.setData(this.leftDataList, this.searchLeft);
this.rightData = this.setData(this.rightDataList, this.searchRight);
this.$emit(
@@ -205,17 +206,13 @@
(item) => item == this.rightDataList[i][this.keyName]
);
if (a !== -1) {
- this.leftDataList.push(this.rightDataList[i]);
+ this.leftDataList[i].checked = false
+ // this.leftDataList.push(this.rightDataList[i]);
this.$delete(this.rightDataList, i);
i--;
}
}
- // let obj = {}
- // let filterleft = this.leftDataList.reduce((cur, next) => {
- // obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
- // return cur;
- // }, [])
- // console.log('filterright', filterleft)
+ console.log(this.rightDataList)
this.leftData = this.setData(this.leftDataList, this.searchLeft);
this.rightData = this.setData(this.rightDataList, this.searchRight);
this.$emit(
@@ -233,9 +230,9 @@
// 鍗曢��
handleLeftRowClick(row) {
if (this.leftData) {
- this.$refs.transferLeftTable.toggleRowSelection(row)
+ this.$refs.transferTable.toggleRowSelection(row)
} else {
- this.$refs.transferLeftTable.clearSelection()
+ this.$refs.transferTable.clearSelection()
}
},
// 鍗曢��
@@ -268,16 +265,23 @@
console.log(this.value)
},
done() {
+ this.leftData = []
+ this.leftDataList = []
+ this.rightDataList = []
+ this.rightData = []
this.dialogVisible = false
},
tableTransferSave() {
this.$emit('save', this.rightData)
- this.leftData = [...this.rightData, ...this.leftData]
- this.leftDataList = [...this.rightDataList, ...this.leftDataList]
- this.rightDataList = []
- this.rightData = []
+ this.done()
- }
+
+ },
+ // 鍏抽棴娓呴櫎鎵�鏈夋暟鎹�
+ handelClose() {
+ this.$emit('close')
+ this.done()
+ },
},
}
</script>
diff --git a/Source/UBCS-WEB/src/views/flow/flowPath.vue b/Source/UBCS-WEB/src/views/flow/flowPath.vue
index 2040668..e14690f 100644
--- a/Source/UBCS-WEB/src/views/flow/flowPath.vue
+++ b/Source/UBCS-WEB/src/views/flow/flowPath.vue
@@ -1,14 +1,12 @@
<template>
<div>
<el-button @click="outerVisible = true">娴佺▼娴嬭瘯</el-button>
- <el-button @click="visibleFlow = true">妯℃澘娴佺▼</el-button>
<el-button @click="visibleStage = true">妯℃澘闃舵</el-button>
- <el-button @click="visibleTable = true">table绌挎妗�</el-button>
+ <el-button @click="handleTable">table绌挎妗�</el-button>
<flow-business :visible.sync="outerVisible"></flow-business>
- <flow-path :visible.sync="visibleFlow" code="8b5e2017-990f-454a-9c39-4c4eeeb57553"></flow-path>
- <stage :visible.sync="visibleStage" code="8b5e2017-990f-454a-9c39-4c4eeeb57553"></stage>
+ <stage code="8b5e2017-990f-454a-9c39-4c4eeeb57553"></stage>
<table-transfer :visible.sync="visibleTable" v-model="value" :dataList="list" :columns="columns" keyName="id"
- @change="change"></table-transfer>
+ @save="handleSave"></table-transfer>
</div>
</template>
@@ -29,11 +27,11 @@
let data = []
for (let i = 0; i < 5; i++) {
let item = {
- id: `${i+1}`,
+ id: `${i + 1}`,
name: 'name',
- address: '闆嗗洟鐮�',
- data:'',
- checked:false,
+ address: `闆嗗洟鐮�${i + 1}`,
+ data: '',
+ checked: i === 1 ? true : false,
}
data.push(item)
}
@@ -41,7 +39,7 @@
}
return {
list: getTables(),
- value: [],
+ value: ['2'],
outerVisible: false,
visibleFlow: false,
visibleStage: false,
@@ -73,10 +71,15 @@
}
},
methods: {
- change(val) {
- console.log(val);
- console.log(this.value)
+ handleSave(event) {
+ console.log(event)
},
+ handleTable(){
+ this.visibleTable = true
+ // this.$nextTick(()=>{
+
+ // })
+ }
}
}
</script>
diff --git a/Source/UBCS-WEB/vue.config.js b/Source/UBCS-WEB/vue.config.js
index 016eb50..332410b 100644
--- a/Source/UBCS-WEB/vue.config.js
+++ b/Source/UBCS-WEB/vue.config.js
@@ -26,12 +26,12 @@
proxy: {
'/api': {
//鏈湴鏈嶅姟鎺ュ彛鍦板潃
- target: 'http://localhost:37000',
+ // target: 'http://localhost:37000',
// target: 'http://192.168.1.51:37000',
// target: 'http://192.168.1.46:37000',
// target: 'http://dev.vci-tech.com:37000',
// target: 'http://192.168.1.51:37000/',
- // target: 'http://localhost:37000',
+ target: 'http://192.168.1.104:37000',
// target: 'http://192.168.1.63:37000',
//target: 'http://192.168.3.7:37000',
// target: 'http://dev.vci-tech.com:37000',
--
Gitblit v1.9.3