协议管理中间勾选右侧显示

src/components/TemplateTable/index.vue

@@ -74,7 +74,7 @@
                 v-for="(s, i) in f.options"
                 :key="i"
                 :label="s.label || s.dictTag || s.name"
-                :value="s.value || s.dictValue ||s.id"
+                :value="s.value || s.dictValue || s.id"
               ></el-option>
             </el-select>
           </template>
@@ -208,7 +208,6 @@
       :show-summary="tableConfig.showSummary || false"
       :data="data"
       border
-      
       style="width: 100%"
       @expand-change="handleRowChange"
       :height="tableConfig.tableHeight || tableHeight"
@@ -216,6 +215,7 @@
       element-loading-text="数据加载中"
       element-loading-spinner="el-icon-loading"
       @selection-change="handleSelectionChange"
+      @select="selectRow"
       @select-all="selectAll"
       @row-click="rowClick"
       :row-style="{ height: '55px' }"
@@ -227,13 +227,12 @@
         color: '#606266',
       }"
       :cell-class-name="rowClass"
-      
     >
-    <el-table-column v-if="tableConfig.expand" type="expand" >
-      <template slot-scope="scope" >
+      <el-table-column v-if="tableConfig.expand" type="expand">
+        <template slot-scope="scope">
           <slot v-bind="scope" name="expand"></slot>
-       </template>
-       </el-table-column>
+        </template>
+      </el-table-column>
       <el-table-column
         type="selection"
         :width="tableConfig.selectionWidth || '50'"
@@ -290,9 +289,7 @@
           :prop="item.prop"
         >
           <template slot-scope="scope">
-            <span>
-              {{ statMaps(item.options)[scope.row[item.prop]] }}</span
-            >
+            <span> {{ statMaps(item.options)[scope.row[item.prop]] }}</span>
           </template>
         </el-table-column>
         <!-- 自定义内容 -->
@@ -532,7 +529,8 @@ export default {
       if (!list) return;
       let obj = {};
       list.forEach((item) => {
-        obj[item.value || item.id || item.dictValue] = item.label || item.value || item.dictTag;
+        obj[item.value || item.id || item.dictValue] =
+          item.label || item.value || item.dictTag;
       });
       return obj;
     },
@@ -560,9 +558,15 @@ export default {
     handleSelectionChange(currentRow) {
       this.$emit("selectionChange", currentRow, this.$refs.table);
     },
+    // 表格单选
+    selectRow(selection,row) {
+
+      this.$emit("selectcurrentRow",selection, row);
+    },
     selectAll(currentRow) {
       this.$emit("selectAll", currentRow, this.$refs.table);
     },
+
     rowClick(currentRow) {
       this.$emit("rowClick", currentRow, this.$refs.table);
     },

src/views/AgreementManage/ChannelCost.vue

@@ -172,6 +172,7 @@
             :formList="formList1"
             :tableConfig="productcopyItemColumns"
             @selectionChange="selectionChange"
+            @selectcurrentRow="selectcurrentRow"
             :data="productcopyItemResult"
             @getList="productcopyItemFindPage"
             @handleSearchList="handleSearchList1"
@@ -190,9 +191,8 @@
         <el-col :span="5">
           <div class="title">已选协议内容</div>
           <templateTable
-            ref="productTable1"
+            ref="productTableSelect"
             :tableConfig="selectedProtocol"
-            @selectionChange="selectionChange"
             :data="rightList"
             @getList="productcopyItemFindPage"
             @handleSearchList="handleSearchList1"
@@ -1110,13 +1110,13 @@ export default {
           {
             prop: "agreementName",
             label: "协议名称",
-            width: 80,
+            width: 100,
             type: "text",
           },
           {
             prop: "costsDescription",
             label: "费用描述",
-            width: 80,
+            width: 110,
             type: "text",
           },
         ],
@@ -1124,6 +1124,7 @@ export default {
           {
             type: "primary",
             label: "详情",
+            width: 60,
             // hide:(row) => {
             //  return row.importStatus == 1?true:false
             // },
@@ -1134,7 +1135,7 @@ export default {
         ],
         loading: true,
         isPaginationShow: true,
-        isCheckBox: true,
+        // isCheckBox: true,
         tableHeight:'823px',
       },
       channelFeesData: [],
@@ -1189,43 +1190,43 @@ export default {
 
     this.$api.dept.findDeptTree("9", "").then((res) => {
       this.treedata = res.data;
+      console.log(this.treedata);
+      
     });
   },
   methods: {
     //查看详情
     details(row) {
-        console.log(row);
-        
-    //   this.$api.insCompany.productcostFactorQuery(row.id).then((res) => {
-    //     if (res.code == "200") {
-    //       let obj = Object.assign({}, res.data);
-    //       this.dynamicFormArray = res.data.costsAttrLinks;
-    //       this.productCostForm = obj;
-    //       obj.costsAttrLinks.map((val) => {
-    //         switch (val.attrType) {
-    //           case "inputNumber":
-    //             if (!val.operator) {
-    //               val.operator = "1";
-    //             }
-    //             break;
-    //         }
-    //         if (val.attrCode == "LicenseNo") {
-    //           val.dictLabal = this.areanumberplateList;
-    //         }
-    //         if (val.attrCode == "LicenseArea") {
-    //           val.dictLabal = this.licenseAreaList;
-    //         }
-    //         return val;
-    //       });
+      this.$api.insCompany.productcostFactorQuery(row.id).then((res) => {
+        if (res.code == "200") {
+          let obj = Object.assign({}, res.data);
+          this.dynamicFormArray = res.data.costsAttrLinks;
+          this.productCostForm = obj;
+          obj.costsAttrLinks.map((val) => {
+            switch (val.attrType) {
+              case "inputNumber":
+                if (!val.operator) {
+                  val.operator = "1";
+                }
+                break;
+            }
+            if (val.attrCode == "LicenseNo") {
+              val.dictLabal = this.areanumberplateList;
+            }
+            if (val.attrCode == "LicenseArea") {
+              val.dictLabal = this.licenseAreaList;
+            }
+            return val;
+          });
          
-    //         this.productCostAddVehicleFactorVisible = true;
-    //     } else {
-    //       this.$message({
-    //         type: "error",
-    //         message: res.msg,
-    //       });
-    //     }
-    //   });
+            this.productCostAddVehicleFactorVisible = true;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
     },
     //弹窗关闭
     productcloseDialog() {
@@ -1247,10 +1248,15 @@ export default {
       });
     },
     //  向有children的节点上增加disabled属性
-    setDisabled(treeData) {
+      //  向有children的节点上增加disabled属性
+      setDisabled(treeData) {
       if (treeData) {
         treeData.forEach((item) => {
-          if (!item.agreementList == []) {
+          if (
+            !item.deptType ||
+            item.deptType !== "D" ||
+            !item.id.includes("M")
+          ) {
             item.disabled = true;
             this.setDisabled(item.children);
           }
@@ -1275,14 +1281,13 @@ export default {
       this.findAgreement();
       this.getRightList(row.id)
     },
+
     //获取设置费用右侧已勾选列表
     getRightList(id){
         this.selectedProtocol.loading = true
         this.$api.insCompany.sysChannelGroup(id).then(res => {
-            console.log(res);
             this.rightList = res.data
             this.selectedProtocol.loading = false
-            
         })
     },
     findAgreement(partnerCompaniesId) {
@@ -1311,9 +1316,25 @@ export default {
       this.costIdList = [];
       this.costIdList = val;
     },
+    selectcurrentRow(selection,row){
+        this.hasDuplicates(row,this.rightList);
+    },
+    //勾选添加到右侧
+    hasDuplicates(row, array) {
+        let temp = []
+        array.forEach(item=>{
+            temp.push(+item.id)
+        })
+        let numId = +row.id
+        let containsItem = temp.indexOf(numId);
+        if(containsItem>0){
+            this.rightList = this.rightList.filter((_, index) => index !== containsItem)
+        }else{
+            this.rightList.push(row)
+        }
+    },
     productcopyItemFindPage(data) {
       this.productcopyItemColumns.loading = true;
-
       this.$api.sys
         .agreementGetProductPage({
           id: this.rowId,
@@ -1329,6 +1350,7 @@ export default {
             this.productcopypage.pageSize = res.data.size;
             this.productcopypage.totalSize = res.data.total;
             this.productcopyItemColumns.loading = false;
+            this.selectedProtocol.loading = false
             this.$nextTick(() => {
               this.productcopyItemResult.forEach((val) => {
                 if (val.check) {
@@ -1486,6 +1508,20 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+/deep/ {
+  .stafftree {
+    // 不可全选样式
+    .el-tree-node {
+      .el-checkbox__input.is-disabled {
+        display: none;
+      }
+    }
+  }
+  .delete {
+    width: 30px;
+    height: 30px;
+  }
+}
 .title {
   margin-bottom: 10px;
 }
@@ -1494,12 +1530,13 @@ export default {
   width: 100%;
   text-align: right;
 }
-::v-deep {
-  .el-tree-node {
-    .el-checkbox__input.is-disabled {
-      display: none;
-    }
-  }
-}
+// ::v-deep {
+//   .el-tree-node {
+//     .el-checkbox__input.is-disabled {
+//       display: none;
+//     }
+//   }
+// }
+
 </style>