配套出库批量增加全选操作

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchApply/components/left.vue

@@ -45,24 +45,19 @@
         <ul v-if="request.lists.length">
           <!-- 带复选框 -->
           <template>
-            <li
-              v-for="(item, subIndex) in request.lists"
-              :key="item.id"
-              class="blue"
-              :class="{active: subIndex === active,'active-background':item.activeBackground}"
-              @click="checkClick(item)"
-            >
             <el-checkbox
-                v-model="item.checked"
-                style="margin-right: 6px;"
-                @click.native="stopDefault($event)"
-                @change="v => checkboxChange(v, index, subIndex,item)"
-              />
+              v-model="checkedAll"
+              :indeterminate="isIndeterminate"
+              @change="v => handleCheckAllChange(v)"
+            >全选</el-checkbox>
+            <el-checkbox-group v-model="checkedLists" @change="handleCheckedCitiesChange">
+              <el-checkbox v-for="(item) in request.lists" :key="item.id" :label="item">
                 <i class="el-icon-document" />
-              {{ item.sorties }} ,{{ item.serialNumber || '暂无' }},
+                {{ item.sorties }},
+                {{ item.serialNumber || '暂无' }},
                 {{ item.plannerName }},
-              {{ item.startTime }}
-            </li>
+                {{ item.startTime }}</el-checkbox>
+            </el-checkbox-group>
           </template>
         </ul>
         <span v-else class="empty">暂无数据</span>
@@ -102,7 +97,20 @@ export default {
       // 申请列表
       requests: [
         { name: '配套出库', lists: [] }
-      ]
+      ],
+      checkedAll: false,
+      isIndeterminate: false,
+      checkedLists: []
+    }
+  },
+  watch: {
+    checkedLists: {
+      // immediate: true,
+      deep: true,
+      handler(val) {
+        this.$emit('currentAo:click', val)
+      }
+
     }
   },
   mounted() {
@@ -156,13 +164,15 @@ export default {
         ]
       }
       this.loading = true
+      this.checkedAll = false
+      this.isIndeterminate = false
+      this.checkedLists = []
       // return new Promise((resolve, reject) => {
       post(`OutStorageRequest/search/matchStorageExpireToAo?taskDefinitionKey=${this.selectData.taskKey}`, params).then(res => {
         const data = res.items.content.map(item => {
           return {
             ...item,
-            plannerName: item.joExecutePlan && item.joExecutePlan[0] && item.joExecutePlan[0].planner && item.joExecutePlan[0].planner.name,
-            checked: false
+            plannerName: item.joExecutePlan && item.joExecutePlan[0] && item.joExecutePlan[0].planner && item.joExecutePlan[0].planner.name
           }
         })
         this.requests.find(item => item.name === '配套出库').lists = data
@@ -178,22 +188,14 @@ export default {
       this.form = {}
       this.init()
     },
-    // 切换复选框
-    checkboxChange(v, index, subIndex, item) {
-      this.$set(item, 'activeBackground', v)
-      this.requests[index].lists[subIndex].checked = v
-      const checkList = this.requests.find(item => item.name === '配套出库').lists.filter(item => item.checked)
-      this.$emit('currentAo:click', checkList)
-    },
-    checkClick(item) {
-      this.$set(item, 'activeBackground', true)
-      item.checked = !item.checked
-      const checkList = this.requests.find(item => item.name === '配套出库').lists.filter(item => item.checked)
-      this.$emit('currentAo:click', checkList)
+    handleCheckAllChange(val) {
+      this.checkedLists = val ? this.requests[0].lists : []
+      this.isIndeterminate = false
     },
-    // 阻止事件冒泡
-    stopDefault(e) {
-      e.stopPropagation()
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length
+      this.checkedAll = checkedCount === this.requests[0].lists.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.requests[0].lists.length
     }
   }
 }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchApply/components/right.vue

@@ -73,12 +73,14 @@ export default {
       if (aoIds && aoIds.length) {
         this.$refs.outStorageMatch && this.$refs.outStorageMatch.$refs.asCom.getData(aoIds)
       } else {
+        setTimeout(() => {
           this.$refs.outStorageMatch && (this.$refs.outStorageMatch.$refs.asCom.pagination.total = 0)
           this.$refs.outStorageMatchItem && (this.$refs.outStorageMatchItem.$refs.asCom.pagination.total = 0)
           this.$refs.jobResponseOutStorageMatch && (this.$refs.jobResponseOutStorageMatch.$refs.asCom.pagination.total = 0)
           this.$refs.outStorageMatch && (this.$refs.outStorageMatch.$refs.asCom.showData = [])
           this.$refs.outStorageMatchItem && (this.$refs.outStorageMatchItem.$refs.asCom.showData = [])
           this.$refs.jobResponseOutStorageMatch && (this.$refs.jobResponseOutStorageMatch.$refs.asCom.showData = [])
+        }, 500)
       }
     }
   }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchApply/index.vue

@@ -63,7 +63,7 @@ export default {
     currentAoClick(currentAo) {
       this.subTypeName = '1'
       this.currentAo = currentAo
-      this.$refs.right.init(currentAo)
+      this.$refs.right && this.$refs.right.init(currentAo)
     }
   }
 }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchConfirm/components/left.vue

@@ -44,7 +44,6 @@
       v-model="collapse.active"
       v-loading="loading"
       accordion
-      @change="collapseChange"
     >
       <el-collapse-item
         v-for="(request, index) in requests"
@@ -57,25 +56,19 @@
         <ul v-if="request.lists.length">
           <!-- 带复选框 -->
           <template>
-            <li
-              v-for="(item, subIndex) in request.lists"
-              :key="item.id"
-              class="blue"
-              :class="{active: subIndex === active,'active-background':item.activeBackground}"
-              @click="checkClick(item)"
-            >
-              <!-- :style="{ color: item.pbo.hasLostItem?'blue':'red' }" -->
             <el-checkbox
-                v-model="item.checked"
-                style="margin-right: 6px;"
-                @click.native="stopDefault($event)"
-                @change="v => checkboxChange(v, index, subIndex,item)"
-              />
+              v-model="checkedAll"
+              :indeterminate="isIndeterminate"
+              @change="v => handleCheckAllChange(v)"
+            >全选</el-checkbox>
+            <el-checkbox-group v-model="checkedLists" @change="handleCheckedCitiesChange">
+              <el-checkbox v-for="(item) in request.lists" :key="item.id" :label="item">
                 <i class="el-icon-document" />
-              {{ item.sorties }} ,{{ item.serialNumber || '暂无' }},
+                {{ item.sorties }},
+                {{ item.serialNumber || '暂无' }},
                 {{ item.plannerName }},
-              {{ item.startTime }}
-            </li>
+                {{ item.startTime }}</el-checkbox>
+            </el-checkbox-group>
           </template>
         </ul>
         <span v-else class="empty">暂无数据</span>
@@ -115,7 +108,20 @@ export default {
       // 申请列表
       requests: [
         { name: '配套出库', lists: [] }
-      ]
+      ],
+      checkedAll: false,
+      isIndeterminate: false,
+      checkedLists: []
+    }
+  },
+  watch: {
+    checkedLists: {
+      // immediate: true,
+      deep: true,
+      handler(val) {
+        this.$emit('checkbox:change', val)
+      }
+
     }
   },
   mounted() {
@@ -182,13 +188,15 @@ export default {
         ]
       }
       this.loading = true
+      this.checkedAll = false
+      this.isIndeterminate = false
+      this.checkedLists = []
       // return new Promise((resolve, reject) => {
       post(`OutStorageRequest/search/matchStorageExpireToAo?taskDefinitionKey=${this.selectData.taskKey}`, params).then(res => {
         const data = res.items.content.map(item => {
           return {
             ...item,
-            plannerName: item.joExecutePlan && item.joExecutePlan[0] && item.joExecutePlan[0].planner && item.joExecutePlan[0].planner.name,
-            checked: false
+            plannerName: item.joExecutePlan && item.joExecutePlan[0] && item.joExecutePlan[0].planner && item.joExecutePlan[0].planner.name
           }
         })
         this.requests.find(item => item.name === '配套出库').lists = data
@@ -208,29 +216,14 @@ export default {
       }
       this.init()
     },
-    // 手风琴切换
-    collapseChange(active) {
-      // 三期出库
-      // active === '4' && this.$emit('type2:init', 'RequestOutStorageExpire')
-      // // 召回出库
-      // active === '5' && this.$emit('type2:init', 'RequestOutStorageRecall')
-    },
-    // 切换复选框
-    checkboxChange(v, index, subIndex, item) {
-      this.$set(item, 'activeBackground', v)
-      this.requests[index].lists[subIndex].checked = v
-      const checkList = this.requests.find(item => item.name === '配套出库').lists.filter(item => item.checked)
-      this.$emit('checkbox:change', checkList)
-    },
-    checkClick(item) {
-      this.$set(item, 'activeBackground', true)
-      item.checked = !item.checked
-      const checkList = this.requests.find(item => item.name === '配套出库').lists.filter(item => item.checked)
-      this.$emit('checkbox:change', checkList)
+    handleCheckAllChange(val) {
+      this.checkedLists = val ? this.requests[0].lists : []
+      this.isIndeterminate = false
     },
-    // 阻止事件冒泡
-    stopDefault(e) {
-      e.stopPropagation()
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length
+      this.checkedAll = checkedCount === this.requests[0].lists.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.requests[0].lists.length
     }
   }
 }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchConfirm/components/right copy.vue

-<template>
-  <div class="matchConfirmRight">
-    <split-pane
-      ref="splitPane"
-      :min-percent="20"
-      :default-percent="30"
-      split="horizontal"
-      :class="['detail-pane','collapse']"
-    >
-      <template slot="paneL">
-        <div class="table-box">
-          <dee-as-com
-            ref="outStorageMatch"
-            :table-height="autoTopHeight"
-            :basic-data=" { selectData: selectData }"
-            :lay-config="{ typeName: 'OutStorageMatch', layKey: 'batchSign_OutStorageMatch'}"
-            @selectionChange="selectionChange"
-          />
-        </div>
-      </template>
-      <template slot="paneR">
-        <div class="detail">
-          <split-pane
-            ref="splitPaneInner"
-            :min-percent="20"
-            :default-percent="30"
-            split="horizontal"
-            :class="['detail-pane','collapse']"
-          >
-            <template slot="paneL">
-              <div class="table-box">
-                <dee-as-com
-                  ref="outStorageMatchItem"
-                  :lay-config="{ typeName: 'OutStorageMatchItem', layKey: 'batchSign_OutStorageMatchItem'}"
-                  :table-height="autoBottomHeight"
-                  @selectionChange="selectionChange_item"
-                />
-              </div>
-            </template>
-            <template slot="paneR">
-              <div class="detail">
-                <dee-as-com
-                  ref="jobResponseOutStorageMatch"
-                  table-height="100%"
-                  :lay-config="{ typeName: 'JobResponseOutStorageMatch', layKey: 'batchSign_JobResOutStorageMatch'}"
-                  @selectionChange="selectionChange_jobRes"
-                />
-              </div>
-            </template>
-          </split-pane>
-        </div>
-      </template>
-    </split-pane>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'MatchConfirmRight',
-  components: {},
-  props: {
-    selectData: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      selectionRows: [],
-      selectionItemRows: [],
-      selectionJobResRows: [],
-      autoBottomHeight: '280px',
-      autoTopHeight: '280px'
-    }
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    this.$bus.$on('refreshMatchConfirm', (hasFlag) => {
-      this.$nextTick(() => {
-        this.selectionChange(this.selectionRows)
-        this.selectionChange_item(this.selectionItemRows)
-      })
-    })
-    this.$nextTick(function() {
-      const splitPane = this.$refs.splitPane
-      const height = document.getElementById('app').offsetHeight
-      if (splitPane) {
-        this.$watch(
-          function() {
-            return splitPane.percent
-          },
-          (val, oval) => {
-            this.autoTopHeight = val / 100 * height - 80 + 'px'
-            // this.autoBottomHeight = (100 - val) / 100 * height - 270 + 'px'
-          }
-        )
-      }
-    })
-  },
-  // 组件方法
-  methods: {
-    selectionChange(val) {
-      this.selectionRows = val
-      const requestIds = val && val.map(item => item.id)
-      this.$refs.outStorageMatchItem.$refs.asCom.getData(requestIds)
-    },
-    selectionChange_item(val) {
-      this.selectionItemRows = val
-      const itemIds = val && val.map(item => item.id)
-      this.$refs.jobResponseOutStorageMatch.$refs.asCom.getData(itemIds)
-    },
-    selectionChange_jobRes(val) {
-      this.selectionJobResRows = val
-    },
-    init(checkList) {
-      const aoIds = checkList && checkList.map(item => item.id)
-      this.$refs.outStorageMatch.$refs.asCom.getData(aoIds)
-    }
-  }
-}
-</script>
-
-  <style  lang='scss'>
-  .matchConfirmRight{
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding-left: 8px;
-    // .sub-title{
-    //     padding-top: 0px!important;
-    // }
-    .splitter-pane-resizer.horizontal {
-     opacity: 1;
-     background-color: #F1F4F5;
-     height: 8px;
-     border-bottom: 1px solid #e0e0e0;
-     border-top: 1px solid #e0e0e0;
-   }
-   .detail{
-     height: 100%;
-     background-color: #fff;
-   }
-    .dee-table{
-        .dee-tools {
-            margin: 2px 0!important;
-        }
-        .dee-table-config-bar{
-            margin: 2px 0!important;
-        }
-        .dee-table-pagination {
-            margin-top: 12px!important;
-        }
-     }
-
-  }
-  </style>
-

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchConfirm/components/right.vue

@@ -70,12 +70,14 @@ export default {
       if (aoIds && aoIds.length) {
         this.$refs.outStorageMatch.$refs.asCom.getData(aoIds)
       } else {
-        this.$refs.outStorageMatch.$refs.asCom.pagination.total = 0
-        this.$refs.outStorageMatchItem.$refs.asCom.pagination.total = 0
-        this.$refs.jobResponseOutStorageMatch.$refs.asCom.pagination.total = 0
-        this.$refs.outStorageMatch.$refs.asCom.showData = []
-        this.$refs.outStorageMatchItem.$refs.asCom.showData = []
-        this.$refs.jobResponseOutStorageMatch.$refs.asCom.showData = []
+        setTimeout(() => {
+          this.$refs.outStorageMatch && (this.$refs.outStorageMatch.$refs.asCom.pagination.total = 0)
+          this.$refs.outStorageMatchItem && (this.$refs.outStorageMatchItem.$refs.asCom.pagination.total = 0)
+          this.$refs.jobResponseOutStorageMatch && (this.$refs.jobResponseOutStorageMatch.$refs.asCom.pagination.total = 0)
+          this.$refs.outStorageMatch && (this.$refs.outStorageMatch.$refs.asCom.showData = [])
+          this.$refs.outStorageMatchItem && (this.$refs.outStorageMatchItem.$refs.asCom.showData = [])
+          this.$refs.jobResponseOutStorageMatch && (this.$refs.jobResponseOutStorageMatch.$refs.asCom.showData = [])
+        }, 500)
       }
     }
   }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchConfirm/index.vue

@@ -60,7 +60,7 @@ export default {
   methods: {
     checkboxChange(checkList) {
       this.subTypeName = '1'
-      this.$refs.right.init(checkList)
+      this.$refs.right && this.$refs.right.init(checkList)
     }
   }
 }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchExamine/components/left.vue

@@ -45,24 +45,19 @@
         <ul v-if="request.lists.length">
           <!-- 带复选框 -->
           <template>
-            <li
-              v-for="(item, subIndex) in request.lists"
-              :key="item.id"
-              class="blue"
-              :class="{active: subIndex === active,'active-background':item.activeBackground}"
-              @click="checkClick(item)"
-            >
             <el-checkbox
-                v-model="item.checked"
-                style="margin-right: 6px;"
-                @click.native="stopDefault($event)"
-                @change="v => checkboxChange(v, index, subIndex,item)"
-              />
+              v-model="checkedAll"
+              :indeterminate="isIndeterminate"
+              @change="v => handleCheckAllChange(v)"
+            >全选</el-checkbox>
+            <el-checkbox-group v-model="checkedLists" @change="handleCheckedCitiesChange">
+              <el-checkbox v-for="(item) in request.lists" :key="item.id" :label="item">
                 <i class="el-icon-document" />
-              {{ item.sorties }} ,{{ item.serialNumber || '暂无' }},
+                {{ item.sorties }},
+                {{ item.serialNumber || '暂无' }},
                 {{ item.plannerName }},
-              {{ item.startTime }}
-            </li>
+                {{ item.startTime }}</el-checkbox>
+            </el-checkbox-group>
           </template>
         </ul>
         <span v-else class="empty">暂无数据</span>
@@ -102,7 +97,20 @@ export default {
       // 申请列表
       requests: [
         { name: '配套出库', lists: [] }
-      ]
+      ],
+      checkedAll: false,
+      isIndeterminate: false,
+      checkedLists: []
+    }
+  },
+  watch: {
+    checkedLists: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.$emit('currentAo:click', val)
+      }
+
     }
   },
   mounted() {
@@ -156,13 +164,15 @@ export default {
         ]
       }
       this.loading = true
+      this.checkedAll = false
+      this.isIndeterminate = false
+      this.checkedLists = []
       // return new Promise((resolve, reject) => {
       post(`OutStorageRequest/search/matchStorageExpireToAo?taskDefinitionKey=${this.selectData.taskKey}`, params).then(res => {
         const data = res.items.content.map(item => {
           return {
             ...item,
-            plannerName: item.joExecutePlan && item.joExecutePlan[0] && item.joExecutePlan[0].planner && item.joExecutePlan[0].planner.name,
-            checked: false
+            plannerName: item.joExecutePlan && item.joExecutePlan[0] && item.joExecutePlan[0].planner && item.joExecutePlan[0].planner.name
           }
         })
         this.requests.find(item => item.name === '配套出库').lists = data
@@ -178,22 +188,14 @@ export default {
       this.form = {}
       this.init()
     },
-    // 切换复选框
-    checkboxChange(v, index, subIndex, item) {
-      this.$set(item, 'activeBackground', v)
-      this.requests[index].lists[subIndex].checked = v
-      const checkList = this.requests.find(item => item.name === '配套出库').lists.filter(item => item.checked)
-      this.$emit('currentAo:click', checkList)
-    },
-    checkClick(item) {
-      this.$set(item, 'activeBackground', true)
-      item.checked = !item.checked
-      const checkList = this.requests.find(item => item.name === '配套出库').lists.filter(item => item.checked)
-      this.$emit('currentAo:click', checkList)
+    handleCheckAllChange(val) {
+      this.checkedLists = val ? this.requests[0].lists : []
+      this.isIndeterminate = false
     },
-    // 阻止事件冒泡
-    stopDefault(e) {
-      e.stopPropagation()
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length
+      this.checkedAll = checkedCount === this.requests[0].lists.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.requests[0].lists.length
     }
   }
 }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchExamine/components/right.vue

@@ -73,12 +73,14 @@ export default {
       if (aoIds && aoIds.length) {
         this.$refs.outStorageMatch && this.$refs.outStorageMatch.$refs.asCom.getData(aoIds)
       } else {
+        setTimeout(() => {
           this.$refs.outStorageMatch && (this.$refs.outStorageMatch.$refs.asCom.pagination.total = 0)
           this.$refs.outStorageMatchItem && (this.$refs.outStorageMatchItem.$refs.asCom.pagination.total = 0)
           this.$refs.jobResponseOutStorageMatch && (this.$refs.jobResponseOutStorageMatch.$refs.asCom.pagination.total = 0)
           this.$refs.outStorageMatch && (this.$refs.outStorageMatch.$refs.asCom.showData = [])
           this.$refs.outStorageMatchItem && (this.$refs.outStorageMatchItem.$refs.asCom.showData = [])
           this.$refs.jobResponseOutStorageMatch && (this.$refs.jobResponseOutStorageMatch.$refs.asCom.showData = [])
+        }, 500)
       }
     }
   }

applications/dee-task-center/src/views/workflow/task-center/myPlanTask/outStorageMatchExamine/index.vue

@@ -63,7 +63,7 @@ export default {
     currentAoClick(currentAo) {
       this.subTypeName = '1'
       this.currentAo = currentAo
-      this.$refs.right.init(currentAo)
+      this.$refs.right && this.$refs.right.init(currentAo)
     }
   }
 }