新增应用授权页面

src/views/applicationPage/components/permissionList.vue

@@ -0,0 +1,445 @@
+<template>
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="permissionList">
+    <div class="permissionList_tree">
+      <div class="permissionList_tree_head flex">
+        <div class="permissionList_tree_head_list">名称</div>
+        <div class="permissionList_tree_head_list">类型</div>
+        <div class="permissionList_tree_head_list">行权限</div>
+        <div class="permissionList_tree_head_list">操作</div>
+      </div>
+      <div class="permissionList_tree_body">
+        <el-scrollbar style="height: 100%" :horizontal="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">
+                  <el-tooltip class="item" effect="dark" :content="data.filterset" placement="top">
+                    <div class="tmsg">{{ data.filterset }}</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>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+    </div>
+    <div class="permissionList_dialog">
+      <!--高级查询-->
+      <PublicPageDialog dialog-title="行权限" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedDrawer = false" @handleSubmit="advancedTable('advancedDialogForm')">
+        <AdvancedQuery ref="advancedDialogForm" :select-options="selectOptions" :ad-list="false" :ad-dep="adDep" @getAdvancedQueryData="getAdvancedQueryData" />
+      </PublicPageDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublicPageDialog from '@/components/PublicPageDialog'
+import AdvancedQuery from '@/components/AdvancedQuery'
+import { mapGetters } from 'vuex'
+import { listToTree } from '@/utils/validate'
+import { Query, newData, modifyData, moveData, getAuthorization, authorization } from "@/api/webApi"
+import { formatChange } from '@/utils/validate'
+
+export default {
+  name: 'Permissionlist',
+  props: {
+    listMap: {
+      type: Object,
+      default: () => new Object()
+    },
+    treeMap: {
+      type: Object,
+      default: () => new Object()
+    }
+  },
+  components: { PublicPageDialog, AdvancedQuery },
+  data () {
+    return {
+      advancedDrawer: false,
+      loading: false,
+      ischeck: false,
+      data: [],
+      defaultProps: {
+        children: 'children',
+        label: 'pagename'
+      },
+      defaultKeys: [],
+      nodeKey: 'pageconfigurationid',
+      adDep: 1,
+      dataKey: 'pagename',
+      checkDatas: [],
+      queryItem: {},
+      tableKey: '',
+      rowData: {},
+      selectOptions: [],
+      queryId: 6,
+      allAuthData: [],
+    }
+  },
+  watch: {
+    listMap: {
+      handler (row) {
+        if (Object.keys(row).length) {
+          const queryItem = _.cloneDeep(row)
+          if (queryItem.children) delete queryItem.children
+          this.queryItem = queryItem
+          this.restDataRow(queryItem)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    treeMap: {
+      handler (obj) {
+        if (Object.keys(obj).length) {
+          const { serviceid, pagename } = obj
+          this.queryAllAuthData(serviceid, pagename)
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    ...mapGetters(['authArrs'])
+  },
+  methods: {
+    async queryAllAuthData (serviceid, pagename) {
+      this.loading = true;
+      const datacontent = { filter: { 1: 1 } }
+      try {
+        const { code, returnData } = await Query({
+          serviceid,
+          datacontent,
+          event: '0',
+          page: 1,
+          size: 9999,
+        });
+        if (code == 0 && returnData?.length) {
+          this.allAuthData = _.cloneDeep(returnData)
+          this.setAuthData([], returnData)
+        } else {
+          this.$message.error(`获取${pagename}数据失败`);
+        }
+      } catch (error) {
+        this.$message.error(`获取${pagename}数据失败`);
+      }
+      this.loading = false;
+    },
+    disableTreeData (arr = []) {
+      if (!arr.length) return
+      const alldata = _.cloneDeep(arr)
+      const isdata = _.cloneDeep(this.authArrs)
+      const nodata = this.findRepetData(alldata, isdata)
+      if (nodata?.length) {
+        alldata.map(item => {
+          nodata.map(ci => {
+            if (item.pageconfigurationid == ci.pageconfigurationid) {
+              item.disabled = true
+            }
+          })
+        })
+      }
+      return alldata
+    },
+    restDataRow (queryItem = this.queryItem) {
+      this.ischeck = true
+      this.checkDatas = []
+      this.$refs.tree.setCheckedKeys([])
+      this.queryTreeData(queryItem, '权限')
+    },
+    //高级查询-提交
+    advancedTable (refName) {
+      this.$refs[refName].advancedQueryHandler()
+    },
+    getAdvancedQueryData (dataRules) {
+      const ndata = this.checkDatas?.at(-1)
+      const nitem = ndata.filter(item => item.pageconfigurationid == this.rowData.pageconfigurationid)
+      const { id, supergroupid, type } = this.queryItem
+      const { pageconfigurationid, serviceid, selectcolumnlist = '', insetcolumnlist = '', updatecolumnlist = '', filterset = '' } = nitem[0]
+      const rowData = {
+        pageconfigurationid,
+        serviceid,
+        selectcolumnlist,
+        insetcolumnlist,
+        updatecolumnlist,
+        filterset
+      }
+      rowData.filterset = JSON.stringify(dataRules)
+      if (type == 1) {
+        rowData.userid = id
+        this.queryId = 7
+      } else {
+        rowData.usergroupid = id
+        this.queryId = 6
+      }
+      this.sendCheckData('edit', [rowData])
+      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()
+      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 = [], returnData = []) {
+      const narrs = _.cloneDeep(arrs)
+      const ndata = _.cloneDeep(returnData)
+      if (narrs.length) {
+        ndata.map(item => {
+          narrs.map(ci => {
+            if (item.pageconfigurationid == ci.pageconfigurationid && ci.filterset) {
+              const tableColumnArrs = ndata.filter(item => item['superiorid'] == ci.pageconfigurationid && item['pagetype'] == 'column')
+              const htmls = this.formatRowAuth(ci.filterset, tableColumnArrs)
+              item.selectcolumnmsg = ci.filterset
+              item.filterset = htmls.join('')
+            }
+          })
+        })
+      }
+      const alldata = this.disableTreeData(ndata)
+      const treeMenu = listToTree([...alldata], '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 (dataContent, pagename) {
+      this.loading = true;
+      try {
+        const { code, returnData } = await getAuthorization({ datacontent: dataContent });
+        if (code == 0) {
+          const ndata = _.cloneDeep(returnData)
+          this.setAuthData(ndata, this.allAuthData)
+          this.$nextTick(() => {
+            this.checkAuthData(ndata)
+          })
+        } else {
+          this.$message.error(`获取${pagename}数据失败`);
+        }
+      } catch (error) {
+        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)
+        }
+      }
+    },
+    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 (types, data) {
+      const event = types == 'add' ? 1 : types == 'edit' ? 2 : 3
+      const querys = []
+      const items = _.cloneDeep(data)
+      const { id, type } = this.queryItem
+      if (types == 'edit') {
+        items.map(item => {
+          if (item.children) delete item.children
+        })
+        const params = {
+          serviceid: this.queryId,
+          datacontent: [
+            {
+              filter: {
+                pageconfigurationid: items[0].pageconfigurationid
+              },
+              value: items[0]
+            }
+          ],
+          event,
+        }
+        type == 1 ? params.datacontent[0].filter.userid = items[0].userid : params.datacontent[0].filter.usergroupid = items[0].usergroupid
+        querys.push(modifyData(params))
+      } else {
+        const ids = []
+        items.map(item => {
+          if (item.children) delete item.children
+          ids.push(item.pageconfigurationid)
+        })
+        const params = {
+          id,
+          type,
+          datacontent: ids,
+          event
+        }
+        querys.push(authorization(params))
+      }
+      this.getAnscyData(querys, types)
+    },
+    //获取异步数据
+    async getAnscyData (allResult, types) {
+      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) {
+            if (types == 'edit') this.restDataRow()
+            this.$message.success('操作成功')
+          } else {
+            this.$message.error('操作失败')
+          }
+        } else {
+          this.$message.error('网络错误')
+        }
+      })
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.permissionList {
+  height: 100%;
+  &_tree {
+    height: 100%;
+    &_head {
+      height: 42px;
+      line-height: 42px;
+      background-color: #f0f6ff;
+      font-size: 16px;
+      font-size: 600;
+      &_list {
+        padding: 0 20px;
+        width: 25%;
+      }
+    }
+    ::v-deep &_body {
+      height: calc(100% - 52px);
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+      }
+      .is-horizontal {
+        display: none;
+      }
+      .el-tree-node {
+        &__content {
+          height: 49px;
+          border-top: 1px solid #d6d4d4;
+        }
+      }
+      .custom-tree-node {
+        width: 100%;
+        line-height: 28px;
+        &-list {
+          padding-right: 20px;
+          width: 25%;
+          &:last-child {
+            padding-right: 0;
+          }
+        }
+        .tmsg {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/applicationPage/components/permissionTree.vue

@@ -0,0 +1,140 @@
+<template>
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="publicPageTree">
+    <div class="publicPageTree_search">
+      <el-input size="small" placeholder="输入关键字进行过滤" clearable v-model="filterText"></el-input>
+    </div>
+    <div class="publicPageTree_tree">
+      <el-scrollbar style="height: 100%" :horizontal="false">
+        <el-tree class="filter-tree" :data="data" :props="defaultProps" node-key="uniqueKey" :default-expanded-keys="defaultKeys" :highlight-current="true" :filter-node-method="filterNode" ref="tree" @node-click="treeNodeClick" />
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Query } from "@/api/webApi"
+import { list2ToTree } from '@/utils/validate'
+
+export default {
+  name: 'PublicPageTree',
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    treeMap: {
+      type: Object,
+      default: () => new Object()
+    },
+    depMath: {
+      type: Number | String,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      filterText: '',
+      data: [],
+      defaultProps: {
+        children: 'children',
+        label: 'usergroupname'
+      },
+      defaultKeys: [-1],
+      nodeKey: 'pageconfigurationid',
+      msgCaps: [],
+      dataKey: 'usergroupname'
+    }
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val);
+    },
+    treeData: {
+      handler (arr) {
+        if (arr.length) {
+          this.pageInit(arr)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    depMath: {
+      handler (arr) {
+        this.pageInit(arr)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true;
+      return data[this.dataKey].indexOf(value) !== -1;
+    },
+    pageInit (arr) {
+      const { serviceid, pagename } = arr[0]
+      const defaultfilterTag = { 1: 1 }
+      this.queryTreeData(defaultfilterTag, serviceid, pagename)
+    },
+    treeNodeClick (data) {
+      this.$emit('treeNodeClick', data)
+    },
+    setUserTree (arr = []) {
+      //1=用户 2=用户组
+      if (!arr.length) return []
+      const ndata = _.cloneDeep(arr)
+      const ngroup = ndata.filter(item => item.type == 2)
+      const nuser = ndata.filter(item => item.type == 1)
+      const ntree = list2ToTree(ngroup, nuser, 'supergroupid', 'id')
+      return ntree
+    },
+    async queryTreeData (defaultfilter, serviceid, pagename) {
+      this.loading = true;
+      const datacontent = { filter: defaultfilter }
+      try {
+        const { code, returnData } = await Query({
+          serviceid,
+          datacontent,
+          event: '0',
+          page: 1,
+          size: 9999,
+        });
+        if (code == 0 && returnData?.length) {
+          const name = '全部'
+          const treeMenu = this.setUserTree([...returnData])
+          const treeObj = { serviceid: name, superiorid: name, children: treeMenu }
+          treeObj['usergroupname'] = name
+          treeObj['uniqueKey'] = '-1'
+          const treeMenuAll = [treeObj]
+          this.defaultKeys = ['-1']
+          this.data = treeMenuAll
+        } else {
+          this.$message.error(`获取${pagename}数据失败`);
+        }
+      } catch (error) {
+        this.$message.error(`获取${pagename}数据失败`);
+      }
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.publicPageTree {
+  background-color: #fff;
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+  ::v-deep &_tree {
+    margin-top: 20px;
+    height: calc(100% - 52px);
+    .el-scrollbar__wrap {
+      overflow-x: hidden;
+    }
+    .is-horizontal {
+      display: none;
+    }
+  }
+}
+</style>

src/views/applicationPage/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="permissionPage">
+    <PublicPageHeader class="permissionPage_head" :page-title="pageTitle" />
+    <div class="permissionPage_content flex">
+      <div class="permissionPage_content_left">
+        <PublicPageTree :tree-data="treeData" :dep-math="depMath" @treeNodeClick="treeNodeClick" />
+      </div>
+      <div class="permissionPage_content_right">
+        <PublicPageTable :list-map="listMap" :tree-map="treeNodeMap" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublicPageHeader from '@/components/PublicPageHeader'
+import PublicPageTable from './components/permissionList.vue'
+import PublicPageTree from './components/permissionTree.vue'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'Permissionpage',
+  components: { PublicPageHeader, PublicPageTable, PublicPageTree, },
+  data () {
+    return {
+      treeData: [], //tree数据
+      treeParameters: {}, //tree传递参数
+      treeNodeMap: {}, //tree传递map
+      depMath: 0,
+      listMap: {},
+      pageTitle: '权限配置'
+    }
+  },
+  computed: {
+    ...mapGetters(['authArrs']),
+  },
+  mounted () {
+    this.pageInit()
+  },
+  methods: {
+    //页面初始化
+    pageInit () {
+      //获取页面查询参数
+      const { query } = this.$route
+      this.pageQuery = query
+      //获取页面配置
+      const { pagecode, qid, auth_id } = this.$route.meta
+      //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗
+      const pageAuths = this.authArrs
+      if (!pageAuths.length) return
+      //获取当前页面权限类型
+      const pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
+      if (!pageAuthArrs.length) return
+      //获取tree权限
+      const pageAuthtrees = pageAuthArrs.filter(item => item.pagetype == 'tree')
+      if (pageAuthtrees?.length) this.getPageTreeSetting(pageAuthtrees)
+      //获取table权限
+      const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 'table')
+      if (pageAuthtrees?.length) this.treeNodeMap = pageAuthtables[0]
+    },
+    //根据页面tree设置数据
+    getPageTreeSetting (pageAuthtrees) {
+      this.treeData = pageAuthtrees
+    },
+    //获取tree点击
+    treeNodeClick (data) {
+      this.listMap = data
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.permissionPage {
+  height: calc(100vh - 90px);
+  padding: 20px;
+  &_content {
+    margin-top: 20px;
+    height: calc(100vh - 190px);
+    &_left {
+      width: 360px;
+      margin-right: 20px;
+      height: 100%;
+    }
+    &_right {
+      width: calc(100% - 380px);
+      height: 100%;
+      background-color: #fff;
+      padding: 20px;
+    }
+  }
+}
+</style>