用户管理修改为装置和表头可选择并装置系统互相关联选择

src/views/module_interLock/systemUser/modules/SystemUserForm.vue

@@ -42,13 +42,23 @@
                 >
                 <!-- class="j-table-force-nowrap" -->
                 <!-- @change="handleTableChange" -->
+                <span slot="manageTitle">
+                  <a-checkbox v-model="manageHeader" :indeterminate="indeterminateManageHeader" :disabled="model.isSystem" @change="changeManageHeader"/>
+                  <div>管理</div>
+                </span>
                 <span slot="manage" slot-scope="text, record">
-                  <span v-if="record.interlockType === '0'">-</span>
-                  <a-checkbox v-if="record.interlockType === '1'" v-model="record.manage" :disabled="model.isSystem"/>
+                  <!-- <span v-if="record.interlockType === '0' && !record.children">-</span> -->
+                  <!-- <a-checkbox v-else v-model="record.manage" :indeterminate="record.indeterminateManage" :disabled="model.isSystem"/> -->
+                  <a-checkbox v-model="record.manage" :indeterminate="record.indeterminateManage" :disabled="model.isSystem"/>
+                </span>
+                <span slot="viewTitle">
+                  <a-checkbox v-model="viewHeader" :indeterminate="indeterminateViewHeader" :disabled="model.isSystem" @change="changeViewHeader"/>
+                  <div>查看</div>
                 </span>
                 <span slot="view" slot-scope="text, record">
-                  <span v-if="record.interlockType === '0'">-</span>
-                  <a-checkbox v-if="record.interlockType === '1'" v-model="record.view" :disabled="model.isSystem"/>
+                  <!-- <span v-if="record.interlockType === '0' && !record.children">-</span> -->
+                  <!-- <a-checkbox v-else v-model="record.view" :indeterminate="record.indeterminateView" :disabled="model.isSystem"/> -->
+                  <a-checkbox v-model="record.view" :indeterminate="record.indeterminateView" :disabled="model.isSystem"/>
                 </span>
               </a-table>
             </a-form-model-item>
@@ -116,22 +126,28 @@
             dataIndex: 'interlockName'
           },
           {
-            title:'管理',
+            // title:'管理',
             align:"center",
             dataIndex: 'manage',
             width:147,
+            slots: { title: 'manageTitle' },
             scopedSlots: { customRender: 'manage' },
             customCell: (record, index)=>{ return this.customCell(record, index, 'manage')}
           },
           {
-            title:'查看',
+            // title:'查看',
             align:"center",
             dataIndex: 'view',
             width:147,
+            slots: { title: 'viewTitle' },
             scopedSlots: { customRender: 'view' },
             customCell: (record, index)=>{ return this.customCell(record, index, 'view')}
           },
         ],
+        manageHeader: false,
+        indeterminateManageHeader: false,
+        viewHeader: false,
+        indeterminateViewHeader: false,
       }
     },
     computed: {
@@ -148,13 +164,11 @@
       this.modelDefault = JSON.parse(JSON.stringify(this.model));
     },
     methods: {
+      // 新增
       async add () {
         this.confirmLoading = true
-        // var interlockOrgData = []
         await getAction(`/base/interlockBase/list`).then(res=>{
-          // interlockOrgData = res
-          // if(res.success){
-          // }
+          // 重组数据
           var arr = res.map(item => {
             var reValue = {}
             reValue.interlockName = item.interlockName
@@ -165,36 +179,41 @@
             reValue.limitType = ''
             reValue.manage = false
             reValue.view = false
+            reValue.indeterminateManage = false
+            reValue.indeterminateView = false
             return reValue
           })
+          // arr.push({
+          //   interlockName: '所有',
+          //   interlockApparatusId: '',
+          //   interlockSystemId: '0',
+          //   manage: false,
+          //   view: false,
+          //   indeterminateManage: false,
+          //   indeterminateView: false,
+          // })
           this.tpmTreeData = this.handleTree(arr, "interlockSystemId", "interlockApparatusId")
           this.confirmLoading = false
         })
       },
+      // 编辑
       async edit (record) {
         this.confirmLoading = true
         var interlockOrgData = []
+        // 获取装置设置数据
         await getAction(`/base/interlockBase/list`).then(res=>{
           interlockOrgData = res
-          // if(res.success){
-          // }
         })
+        // 获取当前选择账户的详情以及权限等
         getAction(this.url.queryById, {id: record.id}).then(response => {
           this.model = Object.assign({}, response.result);
           this.model.isSystem = this.model.role === '0' ? true : false
-          console.log('model', this.model)
+          // console.log('model', this.model)
           var systemLimitList = response.result.systemLimitList
-          // data.forEach(element => {
-          //   var index = interlockOrgData.findIndex(item => element.interlockSystemId === item.id)
-          //   if(index !== -1){
-          //     // interlockOrgData[index].limitType = element.limitType
-          //     interlockOrgData[index].manage = element.limitType==='0'?true:false
-          //     interlockOrgData[index].view = element.limitType==='1'?true:false
-          //   }
-          // })
+          // 重组数据
           var arr = interlockOrgData.map(ele => {
             var value = systemLimitList.find(item => item.interlockSystemId === ele.id)
-            console.log(value)
+            // console.log(value)
             var reValue = {}
             if(value){reValue.id = value.id}
             reValue.interlockName = ele.interlockName
@@ -205,6 +224,8 @@
             reValue.limitType = ''
             reValue.manage = false
             reValue.view = false
+            reValue.indeterminateManage = false
+            reValue.indeterminateView = false
             if(this.model.role === '0'){
               reValue.manage = true
             }
@@ -219,18 +240,118 @@
           // console.log(arr)
           this.tpmTreeData = this.handleTree(arr, "interlockSystemId", "interlockApparatusId")
           // console.log(this.tpmTreeData)
+          // 根据子系统回显父装置的多选框样式
+          this.tpmTreeData.forEach(ele => {
+            if(ele.children && ele.children.length > 0){
+              // 设置每一个父装置管理选择框样式
+              var chooseLengthM = ele.children.filter(item => item.manage).length
+              ele.indeterminateManage = !!chooseLengthM && chooseLengthM < ele.children.length
+              ele.manage = chooseLengthM === ele.children.length
+              // 设置每一个父装置查看选择框样式
+              var chooseLengthV = ele.children.filter(item => item.view).length
+              ele.indeterminateView = !!chooseLengthV && chooseLengthV < ele.children.length
+              ele.view = chooseLengthV === ele.children.length
+            }
+          })
+          // 根据装置设置总管理/查看的多选框样式
+          // 设置总的管理/查看多选框样式
+          var chooseLengthMH = this.tpmTreeData.filter(item => item.manage || (!item.manage && item.indeterminateManage)).length
+          this.indeterminateManageHeader = !!chooseLengthMH && chooseLengthMH < this.tpmTreeData.length
+          this.manageHeader = chooseLengthMH === this.tpmTreeData.length
+          var chooseLengthVH = this.tpmTreeData.filter(item => item.view || (!item.view && item.indeterminateView)).length
+          this.indeterminateViewHeader = !!chooseLengthVH && chooseLengthVH < this.tpmTreeData.length
+          this.viewHeader = chooseLengthVH === this.tpmTreeData.length
+
           this.visible = true;
           this.confirmLoading = false
         })
       },
+      // 表头管理多选框切换选择时
+      changeManageHeader(e){
+        // console.log(e.target.checked)
+        if(e.target.checked){
+          // 自身样式相应改变
+          this.viewHeader = false
+          this.indeterminateViewHeader = false
+          this.indeterminateManageHeader = false
+          for (let i = 0; i < this.tpmTreeData.length; i++) {
+            // 父装置样式改变
+            const element = this.tpmTreeData[i];
+            element.manage = true
+            element.indeterminateManage = false
+            element.view = false
+            element.indeterminateView = false
+            if(element.children && element.children.length > 0){
+              element.children.forEach(item => {
+                // 子系统样式改变  
+                item.manage = true
+                item.view = false
+              })
+            }
+          }
+        } else {
+          for (let i = 0; i < this.tpmTreeData.length; i++) {
+            const element = this.tpmTreeData[i];
+            element.manage = false
+            element.view = false
+            if(element.children && element.children.length > 0){
+              element.children.forEach(item => {
+                item.manage = false
+                item.view = false
+              })
+            }
+          }
+        }
+      },
+      // 表头查看多选框切换选择时
+      changeViewHeader(e){
+        if(e.target.checked){
+          this.manageHeader = false
+          this.indeterminateManageHeader = false
+          this.indeterminateViewHeader = false
+          for (let i = 0; i < this.tpmTreeData.length; i++) {
+            // 父装置样式改变
+            const element = this.tpmTreeData[i];
+            element.view = true
+            element.indeterminateManage = false
+            element.manage = false
+            element.indeterminateView = false
+            if(element.children && element.children.length > 0){
+              element.children.forEach(item => {
+                // 子系统样式改变  
+                item.view = true
+                item.manage = false
+              })
+            }
+          }
+        } else {
+          for (let i = 0; i < this.tpmTreeData.length; i++) {
+            const element = this.tpmTreeData[i];
+            element.view = false
+            element.manage = false
+            if(element.children && element.children.length > 0){
+              element.children.forEach(item => {
+                item.view = false
+                item.manage = false
+              })
+            }
+          }
+        }
+      },
       // 角色切换时
       roleChange(e){
         // this.$set(this.model, 'isSystem', e)
         this.model = {...this.model}
         if(e){
           // 当前为管理员
+          this.manageHeader = true
+          this.indeterminateViewHeader = false
+          this.indeterminateManageHeader = false
           for (let i = 0; i < this.tpmTreeData.length; i++) {
             const element = this.tpmTreeData[i];
+            element.manage = true
+            element.indeterminateManage = false
+            element.indeterminateView = false
             if(element.children && element.children.length > 0){
               element.children.forEach(item => {
                 item.manage = true
@@ -240,8 +361,10 @@
           }
         } else {
           // 当前为管理员
+          this.manageHeader = false
           for (let i = 0; i < this.tpmTreeData.length; i++) {
             const element = this.tpmTreeData[i];
+            element.manage = false
             if(element.children && element.children.length > 0){
               element.children.forEach(item => {
                 item.manage = false
@@ -257,13 +380,107 @@
           },
           on: { // 事件
             click: (event) => {
+              // console.log(event)
+              // console.log(event.target.checked)
               // console.log(record, rowIndex, value)
-              if(value === 'manage' && event.target.type === 'checkbox' && !record.manage){
-                record.view = false
+              // 当前点击为装置且点击为装置选择框
+              if(record.interlockType === '0' && event.target.type === 'checkbox'){
+                // 全选管理
+                if(value === 'manage' && event.target.checked){
+                  // 当前父装置多选框样式以及管理查看取反设置
+                  record.indeterminateView = false
+                  record.indeterminateManage = false
+                  record.manage = true
+                  record.view = false
+                  // 根据装置选择情况判断子系统的选择状态
+                  if(record.children && record.children.length > 0){
+                    record.children.forEach(ele => {
+                      ele.manage = true
+                      ele.view = false
+                    })
+                  }
+                }
+                // 全选查看
+                if(value === 'view' && event.target.checked){
+                  // 当前父装置多选框样式以及管理查看取反设置
+                  record.indeterminateManage = false
+                  record.indeterminateView = false
+                  record.view = true
+                  record.manage = false
+                  // 根据装置选择情况判断子系统的选择状态
+                  if(record.children && record.children.length > 0){
+                    record.children.forEach(ele => {
+                      ele.view = true
+                      ele.manage = false
+                    })
+                  }
+                }
+                // 取消全选
+                if(!event.target.checked){
+                  record.indeterminateManage = false
+                  record.indeterminateView = false
+                  record.view = false
+                  record.manage = false
+                  if(record.children && record.children.length > 0){
+                    record.children.forEach(ele => {
+                      ele.manage = false
+                      ele.view = false
+                    })
+                  }
+                }
               }
-              if(value === 'view' && event.target.type === 'checkbox' && !record.view){
-                record.manage = false
+              // 当前点击为装置且点击为系统选择框
+              if(record.interlockType === '1' && event.target.type === 'checkbox'){
+                console.log(record, rowIndex, value)
+                // 管理和查看相互取反，并设置对应父装置的多选框样式
+                // interlockApparatusId相当于pid，interlockSystemId相当于id
+                // 某系统选择管理时
+                if(value === 'manage'){
+                  // 取反
+                  // if(event.target.checked){record.view = false}
+                  record.view = event.target.checked ? !event.target.checked : record.view
+                  // 设置为true/false是为了下面判断length
+                  record.manage = event.target.checked
+                  var pidValue = this.tpmTreeData.find(item => item.interlockSystemId === record.interlockApparatusId)
+                  // 设置当前子系统父装置管理选择框样式
+                  var chooseLengthM = pidValue.children.filter(item => item.manage).length
+                  pidValue.indeterminateManage = !!chooseLengthM && chooseLengthM < pidValue.children.length
+                  pidValue.manage = chooseLengthM === pidValue.children.length
+                  // 设置当前子系统父装置查看选择框样式
+                  var chooseLengthV = pidValue.children.filter(item => item.view).length
+                  pidValue.indeterminateView = !!chooseLengthV && chooseLengthV < pidValue.children.length
+                  pidValue.view = chooseLengthV === pidValue.children.length
+                }
+                if(value === 'view'){
+                  // 取反
+                  record.manage = event.target.checked ? !event.target.checked : record.manage
+                  // 设置为true/false是为了下面判断length
+                  record.view = event.target.checked
+                  // 设置当前子系统父装置查看选择框样式
+                  var pidValue = this.tpmTreeData.find(item => item.interlockSystemId === record.interlockApparatusId)
+                  var chooseLengthV = pidValue.children.filter(item => item.view).length
+                  pidValue.indeterminateView = !!chooseLengthV && chooseLengthV < pidValue.children.length
+                  pidValue.view = chooseLengthV === pidValue.children.length
+                  // 设置当前子系统父装置管理选择框样式
+                  var chooseLengthM = pidValue.children.filter(item => item.manage).length
+                  pidValue.indeterminateManage = !!chooseLengthM && chooseLengthM < pidValue.children.length
+                  pidValue.manage = chooseLengthM === pidValue.children.length
+                }
               }
+              // 设置总的管理/查看多选框样式
+              // console.log(this.tpmTreeData)
+              // 管理选择但没完全选择样式
+              var hasChooseLengthMH = this.tpmTreeData.filter(item => item.manage || (!item.manage && item.indeterminateManage)).length
+              // 管理全选样式
+              var chooseAllLengthMH = this.tpmTreeData.filter(item => item.manage).length
+              this.indeterminateManageHeader = !!hasChooseLengthMH && hasChooseLengthMH <= this.tpmTreeData.length && chooseAllLengthMH !== this.tpmTreeData.length
+              this.manageHeader = chooseAllLengthMH === this.tpmTreeData.length
+              // 查看选择但没完全选择样式
+              var hasChooseLengthVH = this.tpmTreeData.filter(item => item.view || (!item.view && item.indeterminateView)).length
+              // 查看全选样式
+              var chooseAllLengthVH = this.tpmTreeData.filter(item => item.view).length
+              this.indeterminateViewHeader = !!hasChooseLengthVH && hasChooseLengthVH <= this.tpmTreeData.length && chooseAllLengthVH !== this.tpmTreeData.length
+              this.viewHeader = chooseAllLengthVH === this.tpmTreeData.length
             },
           },
         };