用户组授权

src/components/AdvancedQuery/index.vue

@@ -10,7 +10,7 @@
                   col.prop === 'comparisonOperator' ||
                   col.inputType[rowIndex] === 'select'
                 ">
-                  <el-select style="width: 120px;"  size="small" v-model="row[col.prop]" placeholder="请选择" @change="
+                  <el-select style="width: 120px;" size="small" v-model="row[col.prop]" placeholder="请选择" @change="
                     value => {
                       selectChangeHandler(value, rowIndex, colIndex)
                     }
@@ -19,7 +19,7 @@
                   </el-select>
                 </template>
                 <template v-else-if="col.inputType === 'select'">
-                  <el-select style="width: 130px;"  size="small" v-model="row[col.prop]" placeholder="请选择" @change="
+                  <el-select style="width: 130px;" size="small" v-model="row[col.prop]" placeholder="请选择" @change="
                     value => {
                       selectChangeHandler(value, rowIndex, colIndex)
                     }
@@ -216,6 +216,47 @@ export default {
         this.queryHandler()
       },
       deep: true
+    },
+    selectOptions: {
+      handler (arr) {
+        if (arr && arr.length) {
+          const datas = []
+          const types = []
+          arr.forEach(item => {
+            if (isNaN(item.value) && !isNaN(Date.parse(item.value))) {
+              types.push('date')
+            } else {
+              types.push('text')
+            }
+            const paramValue = ['is Null', 'is not Null'].includes(
+              item.comparisonOperator
+            )
+              ? ' '
+              : item.value
+            const obj = {
+              // leftBrackets: item.left,
+              paramKey: item.column,
+              comparisonOperator: item.comparator,
+              // rightBrackets: item.right,
+              paramValue,
+              connector: item.connector,
+            }
+            datas.push(obj)
+          })
+          this.queryHandler()
+          setTimeout(() => {
+            this.paramsTableCols[1].options = new Array(arr.length).fill(
+              comparisonOperatorOptions.slice(0, 5).reverse()
+            )
+            this.paramsTableCols[2].inputType = types
+            this.paramsForm.params = datas
+          }, 200)
+        } else {
+          this.paramsForm.params = []
+        }
+      },
+      deep: true,
+      immediate: true,
     }
   },
   mounted () {

src/main.js

@@ -18,12 +18,16 @@ import router from './router'
 import '@/getMenu'
 import '@/config/checkPermission' //按钮权限 全局自定义指令v-is
 
+import { message } from '@/utils/message'
+
 Vue.use(ElementUI)
 Vue.prototype._ = _
 Vue.prototype.$echarts = echarts
 Vue.use(elTableInfiniteScroll)
 Vue.use(xss)
 
+Vue.prototype.$message = message
+
 Vue.config.productionTip = false
 
 new Vue({

src/utils/message.js

@@ -0,0 +1,22 @@
+// message.js
+import { Message } from 'element-ui'
+let messageInstance = null
+const resetMessage = options => {
+  if (messageInstance) {
+    messageInstance.close()
+  }
+  messageInstance = Message(options)
+}
+['error', 'success', 'info', 'warning'].forEach(type => {
+  resetMessage[type] = options => {
+    if (typeof options === 'string') {
+      options = {
+        message: options
+      }
+    }
+    options.type = type
+    return resetMessage(options)
+  }
+})
+export const message = resetMessage
+

src/views/permissionPage/components/permissionList.vue

@@ -9,12 +9,16 @@
       </div>
       <div class="permissionList_tree_body">
         <el-scrollbar style="height: 100%" :horizontal="false">
-          <el-tree ref="tree" :data="data" show-checkbox node-key="tid" default-expand-all :expand-on-click-node="false">
+          <el-tree ref="tree" :data="data" show-checkbox node-key="pageconfigurationid" default-expand-all :expand-on-click-node="false" @check="checkChange">
             <template slot-scope="{node,data}">
               <div class="custom-tree-node flex">
                 <div class="custom-tree-node-list">{{data.pagename}}</div>
                 <div class="custom-tree-node-list">{{data.pagetype}}</div>
-                <div class="custom-tree-node-list">类型等于机场</div>
+                <div class="custom-tree-node-list">
+                  <el-tooltip class="item" effect="dark" :content="data.selectcolumnlist" placement="top">
+                    <div class="tmsg">{{ data.selectcolumnlist }}</div>
+                  </el-tooltip>
+                </div>
                 <div class="custom-tree-node-list">
                   <template v-if="data.pagetype == 'table'">
                     <el-button size="mini" type="text" @click="details(node, data)">行权限</el-button>
@@ -29,7 +33,7 @@
     <div class="permissionList_dialog">
       <!--高级查询-->
       <PublicPageDialog dialog-title="行权限" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
-        <AdvancedQuery ref="advancedDialogForm" :ad-list="false" :ad-dep="adDep" @getAdvancedQueryData="getAdvancedQueryData" />
+        <AdvancedQuery ref="advancedDialogForm" :select-options="selectOptions" :ad-list="false" :ad-dep="adDep" @getAdvancedQueryData="getAdvancedQueryData" />
       </PublicPageDialog>
     </div>
   </div>
@@ -40,7 +44,9 @@ import PublicPageDialog from '@/components/PublicPageDialog'
 import AdvancedQuery from '@/components/AdvancedQuery'
 import { mapGetters } from 'vuex'
 import { listToTree } from '@/utils/validate'
-import { Query } from "@/api/webApi"
+import { Query, newData, modifyData, moveData, } from "@/api/webApi"
+import { formatChange } from '@/utils/validate'
+
 export default {
   name: 'Permissionlist',
   props: {
@@ -58,6 +64,7 @@ export default {
     return {
       advancedDrawer: false,
       loading: false,
+      ischeck: false,
       data: [],
       defaultProps: {
         children: 'children',
@@ -66,7 +73,12 @@ export default {
       defaultKeys: [],
       nodeKey: 'pageconfigurationid',
       adDep: 1,
-      dataKey: 'pagename'
+      dataKey: 'pagename',
+      checkDatas: [],
+      queryItem: {},
+      tableKey: '',
+      rowData: {},
+      selectOptions: []
     }
   },
   watch: {
@@ -75,6 +87,10 @@ export default {
         if (Object.keys(row).length) {
           const queryItem = {}
           queryItem[this.nodeKey] = row[this.nodeKey]
+          this.ischeck = true
+          this.checkDatas = []
+          this.queryItem = queryItem
+          this.$refs.tree.setCheckedKeys([])
           this.queryTreeData(6, queryItem, '用户组')
         }
       },
@@ -98,31 +114,109 @@ export default {
     ...mapGetters(['authArrs'])
   },
   mounted () {
-    this.data = []
-    this.authsTree()
+    this.setAuthData()
   },
   methods: {
-    //用户权限树
-    authsTree () {
-      const ndata = _.cloneDeep(this.authArrs)
-      ndata.map((item, index) => { item.tid = index })
-      const treeMenu = listToTree(ndata, 'superiorid', 'pageconfigurationid')
-      this.data = treeMenu
-    },
     //高级查询-提交
     advancedTable (refName) {
       this.$refs[refName].advancedQueryHandler()
     },
     getAdvancedQueryData (dataRules) {
-      console.log(dataRules)
+      const ndata = this.checkDatas?.at(-1)
+      const nitem = ndata.filter(item => item.pageconfigurationid == this.rowData.pageconfigurationid)
+      this.rowData.userpermissionsid = nitem[0].userpermissionsid
+      this.rowData.selectcolumnlist = JSON.stringify(dataRules)
+      this.sendCheckData('edit', [this.rowData], 'userpermissionsid')
+      this.advancedDrawer = false
+    },
+    formatRowAuth (nstr, arr) {
+      if (!nstr || !arr) return []
+      const nitem = JSON.parse(nstr)
+      const tableValues = [...arr]
+      if (nitem?.length && tableValues?.length) {
+        const htmls = []
+        const ndatas = [...nitem]
+        tableValues.map(({ pagename, pagecode }) => {
+          ndatas.map(({ column, comparator, connector, value }) => {
+            if (pagecode == column) {
+              const comparatorfh = comparator == '=' ? '等于' : '不等于'
+              const connectorfh = connector == 'and' ? '并且' : connector == 'or' ? '或者' : ''
+              const str = pagename + comparatorfh + value + connectorfh
+              htmls.push(str)
+            }
+          })
+        })
+        return htmls
+      }
     },
+    //打开行权限
     details (node, data) {
+      if (!this.ischeck) {
+        this.$message.error('请先选中左边的权限树后再操作')
+        this.$refs.tree.setCheckedKeys([])
+        return
+      }
+      if (!this.checkDatas.length) {
+        this.$message.error('请先勾选权限后再操作')
+        return
+      }
       const ndata = _.cloneDeep(data)
+      const { pageconfigurationid } = ndata
+      const nitem = this.checkDatas?.at(-1).filter(item => item.pageconfigurationid == pageconfigurationid)
+      if (!nitem.length) {
+        this.$message.error('请先勾选权限后再操作')
+        return
+      }
       this.adDep = Math.random()
-      sessionStorage.setItem('tableColumns', JSON.stringify(ndata.children))
+      this.rowData = ndata
+      sessionStorage.setItem('tableColumns', JSON.stringify({ tableKey: pageconfigurationid, tableValues: ndata.children }))
       this.$store.dispatch('auth/changeAuthMsg', ndata.children)
+      if (data.selectcolumnmsg) {
+        this.selectOptions = JSON.parse(data.selectcolumnmsg)
+      }
       this.advancedDrawer = true
     },
+    //初始化数据
+    setAuthData (arrs = []) {
+      const narrs = _.cloneDeep(arrs)
+      const ndata = _.cloneDeep(this.authArrs)
+      if (narrs.length) {
+        ndata.map(item => {
+          narrs.map(ci => {
+            if (item.pageconfigurationid == ci.pageconfigurationid && ci.selectcolumnlist) {
+              const tableColumnArrs = ndata.filter(item => item['superiorid'] == ci.pageconfigurationid && item['pagetype'] == 'column')
+              const htmls = this.formatRowAuth(ci.selectcolumnlist, tableColumnArrs)
+              item.selectcolumnmsg = ci.selectcolumnlist
+              item.selectcolumnlist = htmls.join('')
+            }
+          })
+        })
+      }
+      const treeMenu = listToTree(ndata, 'superiorid', 'pageconfigurationid')
+      this.data = treeMenu
+    },
+    //勾选已有权限
+    checkAuthData (ndata) {
+      const returnData = _.cloneDeep(ndata)
+      if (ndata?.length) {
+        const ids = []
+        ndata.map(({ pageconfigurationid }) => {
+          ids.push(pageconfigurationid)
+        })
+        this.$refs.tree.setCheckedKeys(ids)
+        const treeDatas = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
+        const res = this.findRepetData(treeDatas, returnData)
+        if (res?.length) {
+          res.map((item) => {
+            if (item.pageconfigurationid) {
+              this.$refs.tree.setChecked(item.pageconfigurationid, false, false);
+            }
+          })
+        }
+        this.checkDatas.push(ndata)
+      }
+    },
+    //获取当前用户组/用户已有权限
     async queryTreeData (serviceid, defaultfilter, pagename) {
       this.loading = true;
       const datacontent = { filter: defaultfilter }
@@ -133,8 +227,11 @@ export default {
           event: '0'
         });
         if (code == 0) {
-          console.log(returnData)
-          this.$refs.tree.setCheckedKeys([1])
+          const ndata = _.cloneDeep(returnData)
+          this.setAuthData(ndata)
+          this.$nextTick(() => {
+            this.checkAuthData(ndata)
+          })
         } else {
           this.$message.error(`获取${pagename}数据失败`);
         }
@@ -142,6 +239,89 @@ export default {
         this.$message.error(`获取${pagename}数据失败`);
       }
       this.loading = false;
+    },
+    checkChange () {
+      if (!this.ischeck) {
+        this.$message.error('请先选中左边的权限树后再操作')
+        this.$refs.tree.setCheckedKeys([])
+        return
+      }
+      const checks = this.$refs.tree.getCheckedNodes() //选中
+      const halfchecks = this.$refs.tree.getHalfCheckedNodes() //半选中
+      const allchecks = [...checks, ...halfchecks]
+      this.checkDatas.push(allchecks)
+      this.isAddorDel()
+    },
+    isAddorDel () {
+      const ndatas = _.cloneDeep(this.checkDatas)
+      if (ndatas.length == 1) {
+        this.sendCheckData('add', ndatas[0])
+      } else {
+        const [nitems1, nitems2] = [ndatas.at(-1), ndatas.at(-2)]
+        if (nitems1.length > nitems2.length) {
+          const res = this.findRepetData(nitems1, nitems2)
+          this.sendCheckData('add', res)
+        } else {
+          const res = this.findRepetData(nitems1, nitems2)
+          this.sendCheckData('del', res, 'userpermissionsid')
+        }
+      }
+    },
+    findRepetData (nitems1, nitems2) {
+      const key = 'pageconfigurationid'
+      const res = [...nitems1, ...nitems2].filter(
+        (item) =>
+          !(
+            nitems1.some((p) => item[key] == p[key]) &&
+            nitems2.some((c) => item[key] == c[key])
+          )
+      )
+      return res
+    },
+    //发送新增编辑删除数据
+    sendCheckData (type, data, key) {
+      const event = type == 'add' ? 1 : type == 'edit' ? 2 : 3
+      const querys = []
+      const items = _.cloneDeep(data)
+      items.map(item => {
+        if (item.children) delete item.children
+        const paramsItem = {
+          pageconfigurationid: item.pageconfigurationid,
+          userpermissionsid: item.userpermissionsid,
+          serviceid: item.serviceid,
+          insetcolumnlist: item.insetcolumnlist || '',
+          updatecolumnlist: item.updatecolumnlist || '',
+          selectcolumnlist: item.selectcolumnlist || '',
+          filterset: item.filterset || ''
+        }
+        const params = {
+          serviceid: 6,
+          datacontent: formatChange(Object.assign(paramsItem, this.queryItem), event, key),
+          event
+        }
+        type == 'add' ? querys.push(newData(params)) : type == 'edit' ? querys.push(modifyData(params)) : querys.push(moveData(params))
+      })
+      this.getAnscyData(querys)
+    },
+    //获取异步数据
+    async getAnscyData (allResult) {
+      if (!allResult.length) return
+      this.loading = true
+      const results = await Promise.allSettled(allResult)
+      results.map((item) => {
+        const { status, value } = item
+        if (status == 'fulfilled') {
+          const { code } = value
+          if (code == 0) {
+            this.$message.success('操作成功')
+          } else {
+            this.$message.error('操作失败')
+          }
+        } else {
+          this.$message.error('网络错误')
+        }
+      })
+      this.loading = false
     }
   }
 }
@@ -187,6 +367,11 @@ export default {
             padding-right: 0;
           }
         }
+        .tmsg {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
       }
     }
   }