@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/views/client/SystemAppAccredit.vue

@@ -0,0 +1,607 @@
+<template>
+  <div class="container" :style="$component.style">
+    <div class="top">
+      <el-button type="primary" @click="addRoleDialog = true"><i class="el-icon-plus"></i>添加授权角色</el-button>
+      <el-input class="input-search" v-model="inputName" clearable placeholder="请输入角色名称" @change="search"></el-input>
+    </div>
+    <div class="role-table" ref="tableCon">
+    <el-table
+    ref="table"
+      :data="tableData"
+      border
+      style="width: 100%"
+      :max-height="maxHight"
+    >
+      <!-- height="100%" -->
+      <el-table-column
+        label="角色名称"
+        width="180">
+        <template v-slot="scope">
+          {{scope.row.roleName}}
+          <el-tag style="marginLeft:4px" size="default" v-if="scope.row.roleType==='client'">通用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="PC端菜单权限"
+        min-width="400">
+        <template v-slot="scope">
+          <div class="set-menu-con">
+            <el-tree
+              class="menu-tree"
+              :props="props"
+              :data="scope.row.pcModule"
+              node-key="id"
+              >
+              <template v-slot="{ node, data }"><span class="tree-node">
+                  <span>
+                    <!-- 图标 -->
+                    <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                    <!-- 文字 -->
+                    <span>{{ node.label }}</span>
+                  </span>
+                  <span class="remove-tree" @click.stop="removeTree(data,scope.row,'pc')"><i class="el-icon-close"></i></span>
+              </span></template>
+            </el-tree>
+            <div>
+              <span title="菜单授权" class="add-menu" @click="settingMenu(scope.row,'pc',$event)">
+                <i class="el-icon-circle-plus-outline"></i>
+                <!-- <span style="marginLeft:4px">菜单授权</span> -->
+              </span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="移动端菜单权限"
+        min-width="400">
+        <template v-slot="scope">
+          <div class="set-menu-con">
+            <el-tree
+              class="menu-tree"
+              :props="props"
+              :data="scope.row.mvModule"
+              node-key="id"
+              >
+              <template v-slot="{ node, data }"><span class="tree-node">
+                  <span>
+                    <!-- 图标 -->
+                    <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                    <!-- 文字 -->
+                    <span>{{ node.label }}</span>
+                  </span>
+                  <span class="remove-tree" @click.stop="removeTree(data,scope.row,'move')"><i class="el-icon-close"></i></span>
+              </span></template>
+            </el-tree>
+            <div>
+              <span title="菜单授权" class="add-menu" @click="settingMenu(scope.row,'move',$event)">
+                <i class="el-icon-circle-plus-outline"></i>
+                <!-- <span style="marginLeft:4px">菜单授权</span> -->
+              </span>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        width="88">
+        <template v-slot="scope">
+          <div class="column-operates">
+            <span @click="deleteMenu(scope.row.roleId)">取消授权</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    </div>
+    <!-- <el-popover
+      ref="popover"
+      placement="bottom-end"
+      width="240"
+      trigger="manual"
+      v-model:visible="pcVisible">
+      <el-card class="tree-card" header="菜单设置" shadow="never" @click.stop>
+          <div class="popover-menu-con">
+              <el-tree
+              ref="tree-pc"
+              class="menu-tree"
+              :props="props"
+              :data="roleUnauthorizedMenu"
+              show-checkbox
+              node-key="id"
+              >
+              </el-tree>
+          </div>
+          <div class="card-body">
+              <el-button v-if="roleUnauthorizedMenu.length>0" type="primary" size="medium" :loading="httpLoading.savePcMenu" @click="savePcMenu">保存</el-button>
+              <el-button size="default" @click="pcVisible=false">取消</el-button>
+          </div>
+      </el-card>
+    </el-popover> -->
+    <el-dialog class="role-dialog" title="添加授权角色" width="960px" v-model="addRoleDialog" >
+      <div class="role-system__content">
+        <el-checkbox-group v-model="checkRoleList">
+          <el-checkbox v-for="item in appAccreditRoleList" :key="item.ID" :label="item.ID" :value="item.ID">{{item.NAME}}
+            <el-tag size="small" v-if="item.TYPE==='client'">通用</el-tag>
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <template v-slot:footer><span class="dialog-footer">
+        <el-button @click="addRoleDialog = false">取 消</el-button>
+        <el-button type="primary" @click="saveAppRole">保 存</el-button>
+      </span></template>
+    </el-dialog>
+    <el-dialog :title="dialogTitle" v-model="setRoleMenuDialog" >
+      <div class="role-menu-container">
+          <div class="menu-content">
+            <el-tree
+              ref="tree-pc"
+              class="menu-tree"
+              :props="props"
+              default-expand-all
+              :data="roleUnauthorizedMenu"
+              show-checkbox
+              node-key="id"
+              >
+               <template v-slot="{ node, data }"><span class="tree-node">
+                  <span>
+                    <!-- 图标 -->
+                    <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                    <!-- 文字 -->
+                    <span>{{ node.label }}</span>
+                  </span>
+              </span></template>
+
+            </el-tree>
+          </div>
+          <div class="card-body">
+              <el-button v-if="roleUnauthorizedMenu.length>0" type="primary" size="medium" :loading="httpLoading.savePcMenu" @click="savePcMenu">保存</el-button>
+              <el-button size="default" @click="setRoleMenuDialog=false">取消</el-button>
+          </div>
+        </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-client-system-app-accredit',
+  mixins: [component],
+  data () {
+    return {
+      roleMenuList: [],
+      tableData: [],
+      inputName: '',
+      serviceId: '',
+      checkRoleList: [],
+      appAllRoleList: [],
+      appAccreditRoleList: [],
+      addRoleDialog: false,
+      props: {
+        label: 'title',
+        children: 'children'
+      },
+      setRoleMenuDialog: false,
+      dialogTitle: '',
+      setMenuInfo: {},
+      roleUnauthorizedMenu: [],
+      roleMode: 'pc',
+      pcVisible: false,
+      // pcMemu: [],
+      pcRoleMemu: [],
+      systemId: '',
+      clickRoleMenu: ''
+    }
+  },
+  methods: {
+    settingMenu (row, type, e) {
+      this.roleMode = type
+      this.setMenuInfo = { ...row }
+      if (this.clickRoleMenu !== (row.roleId + type)) {
+        this.clickRoleMenu = row.roleId + type
+        this.getUnauthorizedMenu(row.roleId)
+      }
+      const text = type === 'move' ? '移动端' : 'PC端'
+      this.dialogTitle = `${row.roleName}-${text}-菜单授权`
+      this.setRoleMenuDialog = true
+
+      // if (this.pcVisible) {
+      //   this.pcVisible = false
+      // } else {
+      //   this.pcVisible = false
+      //   this.$refs.popover.doDestroy(true)
+      //   this.$nextTick(() => {
+      //     this.$refs.popover.referenceElm = e.target
+      //     this.pcVisible = true
+      //   })
+      // }
+    },
+    removeTree (data, row, type) {
+      this.roleMode = type
+      this.setMenuInfo = { ...row }
+
+      this.$confirm('是否删除？', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          action: 'removeRoleModules',
+          entityId: 'FM_ROLE_MODULE',
+          moduleIds: data.id,
+          roleId: this.setMenuInfo.roleId
+        }
+        if (!data.id) {
+          params.serviceId = data.serviceId
+          delete params.moduleIds
+        }
+        this.$http.$post(params)
+          .then(() => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getRoleMenuList()
+            // this.getUnauthorizedMenu()
+          })
+          .catch(err => {
+            this.$message.error(err.message || '处理失败')
+          })
+      })
+    },
+    savePcMenu () {
+      const modules = this.$refs['tree-pc'].getCheckedKeys()
+      const parent = this.$refs['tree-pc'].getHalfCheckedKeys()
+      const arr = [...modules, ...parent]
+      const filterArr = arr.filter(item => {
+        if (item) {
+          return item
+        }
+      })
+      const str = filterArr.join(',')
+      const params = {
+        action: 'saveRoleModules',
+        entityId: 'FM_ROLE_MODULE',
+        roleId: this.setMenuInfo.roleId,
+        moduleIds: str
+      }
+      this.httpLoading.savePcMenu = true
+      this.$http.$post(params)
+        .then(() => {
+          this.getRoleMenuList()
+          this.getUnauthorizedMenu()
+          this.$message.success('保存成功')
+          this.pcVisible = false
+          this.setRoleMenuDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+          this.pcVisible = false
+          this.setRoleMenuDialog = false
+        })
+        .finally(() => {
+          this.httpLoading.savePcMenu = false
+        })
+    },
+    getRoleMenuList () {
+      this.$http.get({
+        action: 'getRoleModules',
+        entityId: 'FM_ROLE_MODULE',
+        roleId: this.setMenuInfo.roleId,
+        systemId: this.systemId,
+        mode: this.roleMode,
+        serviceId: this.serviceId
+      })
+        .then(data => {
+          this.pcRoleMemu = data.length > 0 ? data[0].children : []
+          if (this.roleMode === 'move') {
+            this.setMenuInfo.mvModule = data.length > 0 ? data[0].children : []
+          } else {
+            this.setMenuInfo.pcModule = data.length > 0 ? data[0].children : []
+          }
+          const index = this.roleMenuList.findIndex(item => item.roleId === this.setMenuInfo.roleId)
+          this.roleMenuList.splice(index, 1, { ...this.setMenuInfo })
+          // this.tableData = this.roleMenuList
+          this.search()
+        })
+    },
+    getUnauthorizedMenu () {
+      const params = {
+        action: 'getUnauthorizedModules',
+        entityId: 'FM_ROLE_MODULE',
+        systemId: this.systemId,
+        serviceId: this.serviceId,
+        mode: this.roleMode,
+        roleId: this.setMenuInfo.roleId
+      }
+      this.$http.get(params)
+        .then(data => {
+          this.roleUnauthorizedMenu = data
+        })
+        .catch(err => {
+          this.$message.error(err.message || '获取未授权菜单失败')
+        })
+    },
+    deleteMenu (roleId) {
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          const params = {
+            action: 'removeRoleModules',
+            entityId: 'FM_ROLE_MODULE',
+            roleId: roleId,
+            serviceId: this.serviceId
+          }
+          this.$http.$post(params)
+            .then(() => {
+              this.$message.success('删除成功')
+              this.getRoleList()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+    },
+    saveAppRole () {
+      if (this.checkRoleList.length === 0) {
+        this.$message.error('请先选择授权角色')
+        return
+      }
+      this.$http.$post({
+        action: 'saveServiceRoles',
+        entityId: 'FM_ROLE_SERVICE',
+        serviceId: this.serviceId,
+        roleIds: this.checkRoleList.join(',')
+      })
+        .then(data => {
+          this.$message.success('添加成功')
+          this.addRoleDialog = false
+          this.checkRoleList = []
+          this.getRoleList()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '操作失败')
+        })
+    },
+    getClientSystemAppRole () {
+      // const { roleType } = this.$configs
+      const scopeParams = [
+        {
+          field: 'SYSTEM',
+          mode: 'equal',
+          values: this.systemId,
+          link: 'or'
+        },
+        {
+          field: 'TYPE',
+          mode: 'equal',
+          values: 'client'
+        }
+      ]
+      const params = {
+        entityId: this.$metaId,
+        scopeParams: JSON.stringify(scopeParams),
+        order_field: 'TYPE',
+        order_mode: 'desc'
+      }
+      // if (roleType === 'client') {
+      //   params['scope.TYPE'] = 'client'
+      // } else {
+      //   params['scope.SYSTEM'] = this.systemId
+      //   // params['scope.TYPE'] = 'system'
+      // }
+      this.$http.list(params)
+        .then(data => {
+          this.appAllRoleList = data.entitys
+          this.getRoleList()
+        })
+    },
+    search () {
+      if (this.inputName) {
+        this.tableData = this.roleMenuList.filter(item => {
+          return item.roleName.includes(this.inputName)
+        })
+      } else {
+        this.tableData = this.roleMenuList
+      }
+    },
+    getRoleList () {
+      const { roleType } = this.$configs
+      const params = {
+        action: 'getServiceRoleMenu',
+        entityId: 'FM_MODULE',
+        serviceId: this.serviceId
+      }
+      if (roleType) {
+        params.roleType = roleType
+      }
+      this.$http.$post(params)
+        .then(data => {
+          this.roleMenuList = data ? [...data] : []
+          const hasRole = {}
+          this.roleMenuList.forEach(item => {
+            hasRole[item.roleId] = true
+          })
+          this.appAccreditRoleList = []
+          this.appAllRoleList.forEach(item => {
+            if (!hasRole[item.ID]) {
+              this.appAccreditRoleList.push(item)
+            }
+          })
+          this.tableData = this.roleMenuList
+        })
+        .catch(err => {
+          this.$message.error(err.message || '获取应用角色菜单失败')
+        })
+    }
+  },
+  created () {
+    this.serviceId = this.$query.serviceId || this.$tab.serviceId
+    this.systemId = this.$query.systemId || this.$tab.systemId
+    this.getClientSystemAppRole()
+  },
+  mounted () {
+    if (this.upPage && this.upPage.$el && this.$refs.tableCon) {
+      this.maxHight = this.upPage.$el.offsetHeight - this.$refs.tableCon.offsetTop - 40
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+  height: 100%;
+  background-color: var(--epx-bg-card);
+  box-sizing: border-box;
+  padding: 20px;
+  overflow: auto;
+}
+.top{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.input-search{
+    width: 220px;
+}
+.column-operates{
+  @include font_color_primary;
+  span{
+    cursor: pointer;
+  }
+}
+.operate-left{
+  margin-right: 6px;
+  padding-right: 6px;
+  border-right: 1px solid var(--epx-border);
+}
+.role-table{
+  // max-height: calc(100% - 60px);
+  height: calc(100% - 52px);
+}
+.role-dialog {
+
+   :deep(.el-dialog__body) {
+     max-height: 500px;
+     overflow: auto;
+   }
+   :deep(.el-dialog__footer) {
+      border-top: 1px solid var(--epx-border);
+      padding: 10px 20px;
+   }
+
+}
+.role-system__content {
+  padding: 10px 20px;
+
+    :deep(.el-checkbox) {
+      padding: 10px 0;
+      color: var(--epx-text);
+    }
+
+}
+.menu-tree {
+  width: 100%;
+  padding: 0 8px 12px 0;
+  background:none;
+
+    :deep(.el-tree-node__content:hover) {
+      background-color: rgba($color: #000000, $alpha: 0.04);
+    }
+    :deep(.el-tree__empty-block) {
+      min-height: 20px;
+    }
+
+}
+// .menu-tree::v-deep .el-tree-node>.el-tree-node__children{
+//   overflow: unset;
+// }
+.tree-node {
+  line-height: 32px;
+  flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--epx-font-size-base);
+    padding-right: 8px;
+}
+.tree-node i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: var(--epx-font-size-l);
+}
+
+.role-menu-container{
+    // display: flex;
+    padding-bottom: 10px;
+}
+.pc-menu{
+  // width: 594px;
+  width: 100%;
+  border-radius: var(--epx-radius-base);
+  border: 1px solid #eaedf4;
+}
+.menu-header{
+    background-color: #f4f6f9;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid 1px #eaedf4;
+}
+.menu-content{
+    max-height: 493px;
+    min-height: 69px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 10px 0 20px;
+    .menu-tree{
+      padding: 0;
+    }
+}
+.tree-card{
+
+    :deep(.el-card__body) {
+      padding-top: 10px;
+    }
+
+}
+.popover-menu-con{
+    max-height: 306px;
+    // overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-bottom: 10px;
+}
+.add-menu{
+  cursor: pointer;
+  font-size: var(--epx-font-size-xl);
+  @include font_color_primary;
+  padding-left: 22px;
+  // position: absolute;
+  // left: 32px;
+  // bottom: 8px;
+}
+.remove-tree{
+    display: none;
+}
+.tree-node:hover .remove-tree{
+    display: block;
+}
+.card-body {
+  text-align: center;
+}
+.set-menu-con{
+  // padding-bottom: 16px;
+
+  // display: flex;
+  // justify-content: space-between;
+}
+.set-menu-icon{
+  padding-right: 10px;
+  @include font_color_primary;
+  cursor: pointer;
+  font-size: 18px;
+}
+</style>