From 9442c37ce73497a66d540f035e58201b54656e49 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期二, 15 二月 2022 17:41:09 +0800
Subject: [PATCH] 优化级联添加通道流程
---
web_src/src/components/dialog/chooseChannelForGb.vue | 303 ++++++++++++++++++++++++++++----------------------
1 files changed, 168 insertions(+), 135 deletions(-)
diff --git a/web_src/src/components/dialog/chooseChannelForGb.vue b/web_src/src/components/dialog/chooseChannelForGb.vue
index e46d3e5..95c78f7 100644
--- a/web_src/src/components/dialog/chooseChannelForGb.vue
+++ b/web_src/src/components/dialog/chooseChannelForGb.vue
@@ -1,6 +1,10 @@
<template>
<div id="chooseChannelForGb" >
- <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
+ <div style="font-size: 17px; color: #606060; white-space: nowrap; line-height: 30px; font-family: monospace;">
+ <span v-if="catalogId == null">{{catalogName}}鐨勭洿鎾祦</span>
+ <span v-if="catalogId != null">{{catalogName}}({{catalogId}})鐨勭洿鎾祦</span>
+ </div>
+ <div style="background-color: #FFFFFF; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
鎼滅储: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="鍏抽敭瀛�" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
閫氶亾绫诲瀷: <el-select size="mini" @change="search" style="margin-right: 1rem; width:6rem" v-model="channelType" placeholder="璇烽�夋嫨" default-first-option>
@@ -9,21 +13,18 @@
<el-option label="瀛愮洰褰�" value="true"></el-option>
</el-select>
- 閫夋嫨鐘舵��: <el-select size="mini" style="margin-right: 1rem; width:6rem" v-model="choosed" @change="search" placeholder="璇烽�夋嫨" default-first-option>
- <el-option label="鍏ㄩ儴" value=""></el-option>
- <el-option label="宸查�夋嫨" value="true"></el-option>
- <el-option label="鏈�夋嫨" value="false"></el-option>
- </el-select>
-
鍦ㄧ嚎鐘舵��: <el-select size="mini" style="margin-right: 1rem; width:6rem" @change="search" v-model="online" placeholder="璇烽�夋嫨" default-first-option>
<el-option label="鍏ㄩ儴" value=""></el-option>
<el-option label="鍦ㄧ嚎" value="true"></el-option>
<el-option label="绂荤嚎" value="false"></el-option>
</el-select>
-
-<!-- <el-checkbox @change="shareAllCheckedChange">鍏ㄩ儴鍏变韩</el-checkbox>-->
+ <el-button v-if="catalogId !== null" icon="el-icon-delete" size="mini" style="margin-right: 1rem;" :disabled="gbChannels.length === 0 || multipleSelection.length === 0" type="danger" @click="batchDel">鎵归噺绉婚櫎</el-button>
+ <el-button v-if="catalogId === null" icon="el-icon-plus" size="mini" style="margin-right: 1rem;" :disabled="gbChannels.length === 0 || multipleSelection.length === 0" @click="batchAdd">鎵归噺娣诲姞</el-button>
</div>
- <el-table ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" :height="winHeight">
+
+ <el-table ref="gbChannelsTable" :data="gbChannels" border style="width: 100%" :height="winHeight" :row-key="(row)=> row.deviceId + row.channelId" @selection-change="handleSelectionChange">
+ <el-table-column align="center" type="selection" :reserve-selection="true" width="55">
+ </el-table-column>
<el-table-column prop="channelId" label="閫氶亾缂栧彿" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="閫氶亾鍚嶇О" show-overflow-tooltip align="center">
@@ -50,10 +51,12 @@
</el-table>
<el-pagination style="float: right;margin-top: 1rem;" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
</el-pagination>
+ <getCatalog ref="getCatalog" :platformId="platformId" ></getCatalog>
</div>
</template>
<script>
+import getCatalog from './getCatalog'
export default {
name: 'chooseChannelForGb',
computed: {
@@ -65,9 +68,12 @@
// };
// }
},
- props: ['platformId','catalogId', 'updateChoosedCallback'],
+ props: ['platformId','catalogId', 'catalogName'],
created() {
this.initData();
+ },
+ components: {
+ getCatalog,
},
data() {
return {
@@ -80,7 +86,8 @@
currentPage: 1,
count: 10,
total: 0,
- eventEnanle: false,
+ eventEnable: false,
+ multipleSelection: [],
winHeight: window.innerHeight - 400,
};
@@ -88,8 +95,10 @@
watch:{
platformId(newData, oldData){
console.log(newData)
- this.initData()
-
+ this.getChannelList()
+ },
+ catalogId(newData, oldData){
+ this.getChannelList()
},
},
methods: {
@@ -105,28 +114,24 @@
console.log(val)
this.initData();
},
- rowcheckedChange: function (val, row) {
- console.log(val)
- console.log(row)
- },
add: function (row) {
- console.log(row)
- row.catalogId = this.catalogId
- row.platformId = this.platformId
- this.$axios({
- method:"post",
- url:"/api/platform/update_channel_for_gb",
- data:{
- platformId: this.platformId,
- channelReduces: [row],
- catalogId: this.catalogId
- }
- }).then((res)=>{
- console.log("淇濆瓨鎴愬姛")
- if(this.updateChoosedCallback)this.updateChoosedCallback(this.catalogId)
- }).catch(function (error) {
- console.log(error);
- });
+ this.getCatalogFromUser((catalogId)=> {
+ this.$axios({
+ method:"post",
+ url:"/api/platform/update_channel_for_gb",
+ data:{
+ platformId: this.platformId,
+ channelReduces: [row],
+ catalogId: catalogId
+ }
+ }).then((res)=>{
+ console.log("淇濆瓨鎴愬姛")
+ this.getChannelList();
+ }).catch(function (error) {
+ console.log(error);
+ });
+ })
+
},
remove: function (row) {
console.log(row)
@@ -140,91 +145,87 @@
}
}).then((res)=>{
console.log("绉婚櫎鎴愬姛")
- if(this.updateChoosedCallback)this.updateChoosedCallback(row.catalogId)
- row.platformId = null;
- row.catalogId = null
+ this.getChannelList();
}).catch(function (error) {
console.log(error);
});
},
- checkedChange: function (val) {
- let that = this;
- if (!that.eventEnanle) {
- return;
- }
- let newData = {};
- let addData = [];
- let delData = [];
- if (val.length > 0) {
- for (let i = 0; i < val.length; i++) {
- const element = val[i];
- let key = element.deviceId + "_" + element.channelId;
- newData[key] = element;
- if (!!!that.gbChoosechannel[key]){
- addData.push(element)
- }else{
- delete that.gbChoosechannel[key]
- }
- }
-
- let oldKeys = Object.keys(that.gbChoosechannel);
- if (oldKeys.length > 0) {
- for (let i = 0; i < oldKeys.length; i++) {
- const key = oldKeys[i];
- delData.push(that.gbChoosechannel[key])
- }
- }
-
- }else{
- let oldKeys = Object.keys(that.gbChoosechannel);
- if (oldKeys.length > 0) {
- for (let i = 0; i < oldKeys.length; i++) {
- const key = oldKeys[i];
- delData.push(that.gbChoosechannel[key])
- }
- }
- }
-
- that.gbChoosechannel = newData;
- if (Object.keys(addData).length >0) {
- that.$axios({
- method:"post",
- url:"/api/platform/update_channel_for_gb",
- data:{
- platformId: that.platformId,
- channelReduces: addData,
- catalogId: that.catalogId
- }
- }).then((res)=>{
- console.log("淇濆瓨鎴愬姛")
- if(that.updateChoosedCallback)that.updateChoosedCallback(that.catalogId)
- }).catch(function (error) {
- console.log(error);
- });
- }
- if (delData.length >0) {
- that.$axios({
- method:"delete",
- url:"/api/platform/del_channel_for_gb",
- data:{
- platformId: that.platformId,
- channelReduces: delData
- }
- }).then((res)=>{
- console.log("绉婚櫎鎴愬姛")
- let nodeIds = new Array();
- for (let i = 0; i < delData.length; i++) {
- nodeIds.push(delData[i].channelId)
- }
- if(that.updateChoosedCallback)that.updateChoosedCallback(null, nodeIds)
- }).catch(function (error) {
- console.log(error);
- });
- }
- },
- shareAllCheckedChange: function (val) {
-
- },
+ // checkedChange: function (val) {
+ // let that = this;
+ // if (!that.eventEnable) {
+ // return;
+ // }
+ // let newData = {};
+ // let addData = [];
+ // let delData = [];
+ // if (val.length > 0) {
+ // for (let i = 0; i < val.length; i++) {
+ // const element = val[i];
+ // let key = element.deviceId + "_" + element.channelId;
+ // newData[key] = element;
+ // if (!!!that.gbChoosechannel[key]){
+ // addData.push(element)
+ // }else{
+ // delete that.gbChoosechannel[key]
+ // }
+ // }
+ //
+ // let oldKeys = Object.keys(that.gbChoosechannel);
+ // if (oldKeys.length > 0) {
+ // for (let i = 0; i < oldKeys.length; i++) {
+ // const key = oldKeys[i];
+ // delData.push(that.gbChoosechannel[key])
+ // }
+ // }
+ //
+ // }else{
+ // let oldKeys = Object.keys(that.gbChoosechannel);
+ // if (oldKeys.length > 0) {
+ // for (let i = 0; i < oldKeys.length; i++) {
+ // const key = oldKeys[i];
+ // delData.push(that.gbChoosechannel[key])
+ // }
+ // }
+ // }
+ //
+ // that.gbChoosechannel = newData;
+ // if (Object.keys(addData).length >0) {
+ // that.$axios({
+ // method:"post",
+ // url:"/api/platform/update_channel_for_gb",
+ // data:{
+ // platformId: that.platformId,
+ // channelReduces: addData,
+ // catalogId: that.catalogId
+ // }
+ // }).then((res)=>{
+ // console.log("淇濆瓨鎴愬姛")
+ // }).catch(function (error) {
+ // console.log(error);
+ // });
+ // }
+ // if (delData.length >0) {
+ // that.$axios({
+ // method:"delete",
+ // url:"/api/platform/del_channel_for_gb",
+ // data:{
+ // platformId: that.platformId,
+ // channelReduces: delData
+ // }
+ // }).then((res)=>{
+ // console.log("绉婚櫎鎴愬姛")
+ // let nodeIds = new Array();
+ // for (let i = 0; i < delData.length; i++) {
+ // nodeIds.push(delData[i].channelId)
+ // }
+ // }).catch(function (error) {
+ // console.log(error);
+ // });
+ // }
+ // },
+ // shareAllCheckedChange: function (val) {
+ //
+ // },
getChannelList: function () {
let that = this;
@@ -236,7 +237,7 @@
count: that.count,
query: that.searchSrt,
online: that.online,
- choosed: that.choosed,
+ catalogId: that.catalogId,
platformId: that.platformId,
channelType: that.channelType
}
@@ -248,20 +249,7 @@
// 闃叉鍑虹幇琛ㄦ牸閿欎綅
that.$nextTick(() => {
that.$refs.gbChannelsTable.doLayout();
- // 榛樿閫変腑
- var chooseGBS = [];
- for (let i = 0; i < res.data.list.length; i++) {
- const row = res.data.list[i];
- console.log(row.platformId)
- if (row.platformId == that.platformId) {
- that.$refs.gbChannelsTable.toggleRowSelection(row, true);
- chooseGBS.push(row)
- that.gbChoosechannel[row.deviceId+ "_" + row.channelId] = row;
-
- }
- }
- that.eventEnanle = true;
- // that.checkedChange(chooseGBS)
+ that.eventEnable = true;
})
console.log(that.gbChoosechannel)
})
@@ -276,10 +264,55 @@
handleGBSelectionChange: function() {
this.initData();
},
- // catalogIdChange: function(id) {
- // this.catalogId = id;
- // console.log("閫氶亾閫夋嫨妯″潡鏀跺埌锛� " + id)
- // },
+ batchDel: function() {
+ this.$confirm(`纭杩�${this.multipleSelection.length}涓�氶亾鍚楋紵`, '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ this.$axios({
+ method:"delete",
+ url:"/api/platform/del_channel_for_gb",
+ data:{
+ platformId: this.platformId,
+ channelReduces: this.multipleSelection
+ }
+ }).then((res)=>{
+ console.log("绉婚櫎鎴愬姛")
+ this.$refs.gbChannelsTable.clearSelection()
+ this.getChannelList();
+ }).catch(function (error) {
+ console.log(error);
+ });
+ }).catch(() => {
+ });
+ },
+ batchAdd: function() {
+ this.getCatalogFromUser((catalogId)=> {
+
+ this.$axios({
+ method: "post",
+ url: "/api/platform/update_channel_for_gb",
+ data: {
+ platformId: this.platformId,
+ channelReduces: this.multipleSelection,
+ catalogId: catalogId,
+ }
+ }).then((res) => {
+ console.log("淇濆瓨鎴愬姛")
+ this.$refs.gbChannelsTable.clearSelection()
+ this.getChannelList();
+ }).catch(function (error) {
+ console.log(error);
+ });
+ });
+ },
+ handleSelectionChange: function (val) {
+ this.multipleSelection = val;
+ },
+ getCatalogFromUser(callback){
+ this.$refs.getCatalog.openDialog(callback)
+ },
}
};
</script>
--
Gitblit v1.8.0