自定义模型面板优化

src/components/common/BottomForm/CustomModelDialog.vue

@@ -63,18 +63,37 @@
       </div>
       <div class="transfer-container-center">
         <div class="inner">
-          <el-button
-            size="normal"
-            type="primary"
-            icon="el-icon-arrow-left"
-            @click="deleteCheckList"
-          ></el-button>
-          <el-button
-            size="normal"
-            type="primary"
-            icon="el-icon-arrow-right"
-            @click="addCheckList"
-          ></el-button>
+          <el-tooltip
+            effect="light"
+            :content="
+              isLeftTransferBtn ? '移除不需要的图层' : '不可进行移除操作'
+            "
+            placement="top-end"
+          >
+            <el-button
+              size="normal"
+              type="primary"
+              icon="el-icon-arrow-left"
+              @click="deleteCheckList"
+              id="leftArrowBtn"
+              class="inner-left"
+              :class="{ 'allow-cursor': isLeftTransferBtn }"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip
+            effect="light"
+            :content="isRightTransferBtn ? '添加选中图层' : '不可进行添加操作'"
+            placement="top-end"
+          >
+            <el-button
+              size="normal"
+              type="primary"
+              icon="el-icon-arrow-right"
+              @click="addCheckList"
+              class="inner-right"
+              :class="{ 'allow-cursor': isRightTransferBtn }"
+            ></el-button>
+          </el-tooltip>
         </div>
       </div>
       <div class="transfer-container-right">
@@ -146,15 +165,64 @@ export default {
       transferData: [],
       filterText: "",
       transferTreeIdMap: new Map(),
-      createModelParams: {},
+      createModelParams: {
+        // 叠置分析geojson附件
+        c_dzfx_file: "",
+        // 类型
+        c_level: "公开",
+        // 是否叠置分析
+        c_isOverlay: false,
+        // 绑定图层（json图层数组）
+        c_bind_layer: "",
+        // 用户id
+        c_user_id: "",
+        // 模型名称
+        c_model_name: "",
+      },
+      checkedKeysArr: [],
+      isLeftTransferBtn: false,
+      isRightTransferBtn: false,
+      allowStyle: {
+        cursor: "not-allowed",
+      },
+      notAllowedStyle: {
+        cursor: "pointer",
+      },
     };
   },
   watch: {
+    checkedKeysArr: {
+      handler(val) {
+        if (val.length === 0) {
+          // btn.style.cursor = "not-allowed";
+          this.isRightTransferBtn = false;
+        }
+        if (val.length > 0) {
+          // btn.style.cursor = "pointer";
+          this.isRightTransferBtn = true;
+        }
+      },
+      immediate: true,
+    },
     checkedList(val) {
+      let btn = document.getElementById("leftArrowBtn");
+      if (btn) {
+        if (val.length === this.checkArr.length) {
+          // btn.style.cursor = "not-allowed";
+          this.isLeftTransferBtn = false;
+        }
+        if (val.length < this.checkArr.length) {
+          // btn.style.cursor = "pointer";
+
+          this.isLeftTransferBtn = true;
+        }
+      }
+
       console.log(val, "checkedList");
     },
   },
   created() {
+    this.checkedKeysArr = [];
     this.getColumnList();
   },
   mounted() {
@@ -294,19 +362,38 @@ export default {
       });
     },
     transferCheckChange(data, checked) {
+      if (checked) {
+        this.checkedKeysArr.push(data.id);
+      } else {
+        if (this.checkedKeysArr.includes(data.id)) {
+          this.checkedKeysArr = this.checkedKeysArr.filter((v) => {
+            return v !== data.id;
+          });
+        }
+      }
       // console.log(this.$refs.transferTree.getCheckedKeys(),"getCheckedKeys");
     },
     deleteCheckList() {
-      if (this.checkedList.length > 0) {
+      // console.log("点击左侧按钮");
+      if (
+        this.checkedList.length < this.checkArr.length &&
+        this.isLeftTransferBtn
+      ) {
+        console.log("可以进行左移操作");
+        this.checkArr = this.checkedList;
+        this.isLeftTransferBtn = false;
+      }
+
+      if (this.checkedList.length === this.checkArr.length) {
+        console.log("不可以进行左移操作");
       }
     },
     addCheckList() {
       this.$nextTick(() => {
         if (this.$refs.transferTree) {
-          console.log(
-            this.$refs.transferTree.getCheckedKeys(),
-            "当前选中的keys"
-          );
+          this.checkedList = this.$refs.transferTree.getCheckedKeys();
+          this.checkArr = this.$refs.transferTree.getCheckedKeys();
+          console.log("当前选中的keys");
         }
       });
     },
@@ -348,7 +435,7 @@ export default {
           this.$refs.transferTree.setCheckedKeys(this.checkedList);
         });
       }
-      // this.checkedList = [];
+
       this.inputName = "自定义模型1";
     },
     saveModel() {
@@ -381,9 +468,6 @@ export default {
             data: this.checkedList,
           });
 
-          // let createModel = {
-
-          // }
           // 设置需要添加的参数
 
           let params = new FormData();
@@ -539,6 +623,18 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-around;
+      .inner-left {
+        cursor: not-allowed;
+        &.allow-cursor {
+          cursor: pointer;
+        }
+      }
+      .inner-right {
+        cursor: not-allowed;
+        &.allow-cursor {
+          cursor: pointer;
+        }
+      }
     }
   }
   &-right {
@@ -575,8 +671,28 @@ export default {
       white-space: nowrap;
       position: relative;
       left: 0;
-      // margin-left: 0;
-      // margin-right: 0;
+      .el-checkbox__input.is-checked + .el-checkbox__label {
+        color: #fff;
+      }
+      .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        width: 70%;
+        height: 70%;
+        background: #74ffff;
+        border-radius: 0;
+        transform: rotate(0deg) scaleY(1);
+        position: static;
+      }
+      .el-checkbox__inner {
+        border: 1px solid #dcdfe6;
+        background: rgba(0, 170, 255, 0);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static;
+        &::after {
+          transition: 0ms;
+        }
+      }
     }
     /deep/.el-checkbox_label {
       width: 200px;

src/components/map/MapHolder.vue

@@ -441,7 +441,6 @@ export default {
         map2DViewer.groups["浦东新区_label"] = L.featureGroup();
         map2DViewer.groups["浦东新区_polygon"].addTo(map2DViewer.map);
         map2DViewer.groups["浦东新区_label"].addTo(map2DViewer.map);
-        debugger
         geoJson.features.map((feature) => {
           if (
             this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1

src/views/ComprehensiveAnalysis.vue

@@ -592,6 +592,11 @@ export default {
               this.modelData.unshift(v);
             }
           });
+          this.modelData.push({
+            id:"我的图层",
+            label:"我的图层",
+            children:[]
+          })
         }
       });
     },