From eef7c19891e437ef18e79ced890d6aaf0db6113d Mon Sep 17 00:00:00 2001
From: qx <1084500556@qq.com>
Date: 星期三, 11 六月 2025 10:53:28 +0800
Subject: [PATCH] Merge branch 'master' of http://101.42.27.146:5001/r/ltkj_peisweb
---
src/views/system/zhiye/TreeTransfer.vue | 275 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 275 insertions(+), 0 deletions(-)
diff --git a/src/views/system/zhiye/TreeTransfer.vue b/src/views/system/zhiye/TreeTransfer.vue
new file mode 100644
index 0000000..5377fba
--- /dev/null
+++ b/src/views/system/zhiye/TreeTransfer.vue
@@ -0,0 +1,275 @@
+<template lang="html">
+ <div class="tree-transfer">
+ <div class="transfer-panel unselect">
+ <!-- <div class="transfer-panel__header">
+ <el-checkbox v-model="leftCheckAll" @change="clickLeftCheckAll">寰呴��</el-checkbox>
+ </div> -->
+ <div class="transfer-panel__content">
+ <el-input size="mini" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" v-model="leftFilterText">
+ </el-input>
+ <el-tree filter ref="tree" :data="leftNodeData" show-checkbox node-key="proId"
+ :filter-node-method="filterNode" @check="nodeClick" :props="defaultProps">
+ </el-tree>
+ </div>
+ </div>
+ <div class="button">
+ <div :class="['btn', { 'disabled': !toLeft }]" @click="removeToLeft">
+ 绉婚櫎
+ </div>
+ <div :class="['btn', { 'disabled': !toRight }]" @click="removeToRight">
+ 娣诲姞
+ </div>
+ </div>
+ <div class="transfer-panel selected">
+ <!-- <div class="transfer-panel__header">
+ <el-checkbox v-model="rightCheckAll" @change="clickRightCheckAll">宸查��</el-checkbox>
+ </div> -->
+ <div class="transfer-panel__content">
+ <el-input size="mini" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" v-model="rightFilterText">
+ </el-input>
+ <el-tree ref="selectedTree" :data="rightNodeData" show-checkbox node-key="proId"
+ :filter-node-method="filterNode" @check="selectedClick" :props="defaultProps">
+ </el-tree>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ defaultProps: {
+ type: Object,
+ default: () => {
+ return {
+ children: 'children',
+ label: 'name'
+ }
+ }
+ },
+ treeData: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ defaultKeys: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ }
+ },
+ watch: {
+ leftFilterText(val) {
+ this.$refs.tree.filter(val)
+ },
+ rightFilterText(val) {
+ this.$refs.selectedTree.filter(val)
+ },
+ rightKeys(val) {
+ this.$emit('changeKeys', val)
+ }
+ },
+ data() {
+ return {
+ leftCheckAll: false,
+ rightCheckAll: false,
+ toLeft: false,
+ toRight: false,
+ nodeData: this.treeData,
+ leftNodeData: [],
+ rightNodeData: [],
+ rightKeys: this.defaultKeys,
+ rightFilterText: '',
+ leftFilterText: ''
+ }
+ },
+ created() {
+ this.leftNodeData = this.nodeData
+ // console.log(this.leftNodeData,111);
+
+ this.rightKeys.length > 0 ? this.rerenderData(this.rightKeys) : ''
+ },
+ methods: {
+ clickLeftCheckAll(v) {
+ //宸︿晶鍏ㄩ��
+ if (v) {
+
+ let keys = this.getChildNodeKeys(this.leftNodeData)
+ this.$refs.tree.setCheckedKeys(keys)
+ this.toRight = true
+ } else {
+ this.$refs.tree.setCheckedKeys([])
+ this.toRight = false
+ }
+ },
+ clickRightCheckAll(v) {
+ //鍙充晶鍏ㄩ��
+ if (v) {
+ let keys = this.getChildNodeKeys(this.rightNodeData)
+ this.$refs.selectedTree.setCheckedKeys(keys)
+ this.toLeft = true
+ } else {
+ this.$refs.selectedTree.setCheckedKeys([])
+ this.toLeft = false
+ }
+ },
+ //鑾峰彇鏌愪釜鑺傜偣鐨勫瓙鑺傜偣鐨刬d鍊�
+ getChildNodeKeys(node) {
+ let keys = []
+ let childrenName = this.defaultProps.children
+ node.forEach((item) => {
+ if (item[childrenName].length > 0) {
+ item[childrenName].forEach((item2) => {
+ keys.push(item2.proId)
+ })
+ }
+ })
+ return keys
+ },
+ filterNode(value, data) {
+ let labelName = this.defaultProps.label
+ if (!value) return true
+ return data[labelName].indexOf(value) !== -1
+ },
+ nodeClick() {
+ let keys = this.$refs.tree.getCheckedKeys(true)
+ if (keys.length > 0) {
+ this.toRight = true
+ }
+ },
+ selectedClick() {
+ let keys = this.$refs.selectedTree.getCheckedKeys(true)
+ if (keys.length > 0) {
+ this.toLeft = true
+ }
+ },
+ removeToRight() {
+ //鍚戝彸绉诲姩
+ //鑾峰彇姝ゆ椂宸﹁竟鏍戠姸缁撴瀯涓閫変腑鐨勮妭鐐�,浣跨敤鍘熷鏁版嵁缁撴瀯鍒犻櫎涓嶅寘鍚湪閫変腑鏁扮粍涓殑鑺傜偣锛屽垱寤烘柊鐨勬暟缁勶紝娓叉煋鍦ㄥ彸渚�
+ //鑾峰彇姝ゆ椂宸︿晶涓閫変腑鐨勮妭鐐规暟缁刬d
+ this.leftCheckAll = false
+ this.leftFilterText = ""
+ let keys = this.$refs.tree.getCheckedKeys(true)
+ let checkedKeys = [...this.rightKeys, ...keys]
+ this.rightKeys = checkedKeys
+ this.rerenderData(this.rightKeys)
+ this.toRight = false
+ this.$refs.tree.setCheckedKeys([])
+ },
+ removeToLeft() {
+ //鍚戝乏绉诲姩鐨勬椂鍊�
+ //璇存槑鏈夊凡閫夋嫨鐨勬暟鎹敼鍙橈紝姝ゆ椂鍒ゆ柇鍙宠竟閫変腑鐨勬暟鎹噸鏂版覆鏌撳乏杈规爲鐘剁殑缁撴瀯
+ //娓叉煋閫昏緫锛氫娇鐢ㄥ師濮嬫暟鎹粨鏋勫垹闄ゅ寘鍚湪鍙宠竟閫変腑鏁扮粍涓殑鏁扮粍
+ //鎵惧埌鐩墠琚�変腑鐨刱eys,浠巖ightKeys涓幓鎺�,鍦ㄤ娇鐢╮ightKeys杩囨护宸﹀彸涓や晶鏁扮粍
+ this.rightCheckAll = false
+ this.rightFilterText = ""
+ let keys = this.$refs.selectedTree.getCheckedKeys(true)
+ this.rightKeys = this.rightKeys.filter(v => {
+ return !keys.includes(v)
+ })
+ let checkedKeys = this.rightKeys
+ this.rerenderData(checkedKeys)
+ this.toLeft = false
+ this.$refs.selectedTree.setCheckedKeys([])
+ },
+ rerenderData(checkedKeys) {
+ let childrenName = this.defaultProps.children
+ let leftNodeData = JSON.parse(JSON.stringify(this.nodeData))
+ let rightNodeData = JSON.parse(JSON.stringify(this.nodeData))
+ for (let i = 0; i < rightNodeData.length; i++) {
+ if (rightNodeData[i][childrenName].length > 0) {
+ let children = rightNodeData[i][childrenName]
+ for (let j = 0; j < children.length; j++) {
+ if (!checkedKeys.includes(children[j].proId)) {
+ children.splice(j, 1)
+ j--
+ }
+ }
+ }
+ if (!rightNodeData[i][childrenName].length > 0) {
+ rightNodeData.splice(i, 1)
+ i--
+ }
+ }
+
+ //宸︿晶娓叉煋锛氬寘鍚殑鍒犻櫎
+ for (let i = 0; i < leftNodeData.length; i++) {
+ if (leftNodeData[i][childrenName].length > 0) {
+ let children = leftNodeData[i][childrenName]
+ for (let j = 0; j < children.length; j++) {
+ if (checkedKeys.includes(children[j].proId)) {
+ children.splice(j, 1)
+ j--
+ }
+ }
+ }
+ if (!leftNodeData[i][childrenName].length > 0) {
+ leftNodeData.splice(i, 1)
+ i--
+ }
+ }
+ this.rightNodeData = rightNodeData
+ this.leftNodeData = leftNodeData
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-transfer {
+ display: flex;
+ justify-content: center;
+ .transfer-panel {
+ box-sizing: border-box;
+ width: 322px;
+ height: 460px;
+ border: 1px solid #ebeef5;
+ border-radius: 5px;
+ .transfer-panel__header {
+ box-sizing: border-box;
+ height: 40px;
+ border-bottom: 1px solid #ebeef5;
+ background-color: rgb(245, 247, 250);
+ padding-left: 10px;
+ line-height: 40px;
+ .title {
+ font-size: 16px;
+ margin-left: 5px;
+ }
+ }
+
+ .transfer-panel__content {
+ height: calc(100% - 40px);
+ overflow-y: scroll;
+ }
+ }
+
+ .button {
+ width: 80px;
+ // display: flex;
+ // justify-content: center;
+ align-items: center;
+ min-height: 480px;
+ line-height: 480px;
+ padding-top: 140px;
+ div {
+ margin-left: 10px;
+ width: 55px;
+ height: 40px;
+ background-color: rgb(64, 158, 255);
+ line-height: 40px;
+ text-align: center;
+ color: #fff;
+ font-weight: 700;
+ border-radius: 5px;
+ }
+
+ .disabled {
+ background-color: rgb(160, 207, 255);
+ margin: 10px;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0