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

package/src/components/permiss/RoleMenu.vue

@@ -0,0 +1,547 @@
+<template>
+    <div class="container" :style="$component.style">
+    <div class="top">
+      <el-button v-if="!readonly" type="primary" @click="addRoleAppDialog = true"><i class="el-icon-plus"></i>添加授权应用</el-button>
+      <el-input class="input-search" v-model="inputName" clearable :placeholder="$t('hall.enter_application_name')" @change="search"></el-input>
+    </div>
+    <div class="role-table" ref="tableCon">
+    <el-table
+      ref="table"
+      :data="showTableData"
+      border
+      style="width: 100%"
+      :max-height="maxHight"
+    >
+      <!-- height="100%" -->
+      <el-table-column
+        label="应用名称"
+        width="180">
+        <template v-slot="scope">
+          {{scope.row.title}}
+        </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.pcChildren"
+              node-key="id"
+              :default-expanded-keys="expandKeys[scope.row.serviceId+'-pc']"
+               @node-expand="v=>expandNode(scope.row.serviceId+'-pc',v)"
+              @node-collapse="v=>collapseNode(scope.row.serviceId+'-pc',v)"
+              >
+              <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 v-if="!readonly" class="remove-tree" @click.stop="removeTree(data,'pc')"><i class="el-icon-close"></i></span>
+              </span></template>
+            </el-tree>
+            <div v-if="!readonly">
+              <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.mvChildren"
+              node-key="id"
+              :default-expanded-keys="expandKeys[scope.row.serviceId+'-m']"
+              @node-expand="v=>expandNode(scope.row.serviceId+'-m',v)"
+              @node-collapse="v=>collapseNode(scope.row.serviceId+'-m',v)"
+              >
+              <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 v-if="!readonly" class="remove-tree" @click.stop="removeTree(data,'move')"><i class="el-icon-close"></i></span>
+              </span></template>
+            </el-tree>
+            <div v-if="!readonly">
+              <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
+        v-if="!readonly"
+        label="操作"
+        width="88">
+        <template v-slot="scope">
+          <div class="column-operates">
+            <span @click="cancelAuthorization(scope.row.serviceId)">取消授权</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    </div>
+    <el-dialog class="role-dialog" title="添加授权应用" width="960px" v-model="addRoleAppDialog" >
+      <div class="role-system__content">
+        <el-checkbox-group v-if="unAuthServices.length>0" v-model="checkedServices">
+          <el-checkbox v-for="item in unAuthServices" :key="item.id" :label="item.id" :value="item.id">
+            {{item.name}}
+          </el-checkbox>
+        </el-checkbox-group>
+        <div class="null-data" v-else>
+          <i class="epx-icon-color-kong"></i>
+          <p>{{$t('no data')}}</p>
+        </div>
+      </div>
+      <template v-slot:footer><span class="dialog-footer">
+        <el-button @click="addRoleAppDialog = false">取 消</el-button>
+        <el-button type="primary" @click="saveRoleApp">保 存</el-button>
+      </span></template>
+    </el-dialog>
+    <el-dialog :title="dialogTitle" v-if="setRoleMenuDialog" 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-permiss-role-menu',
+  mixins: [component],
+  data () {
+    return {
+      props: {
+        label: 'title',
+        children: 'children'
+      },
+      inputName: '',
+      tableData: [],
+      showTableData: [],
+      addRoleDialog: false,
+      roleUnauthorizedMenu: [],
+      setRoleMenuDialog: false,
+      addRoleAppDialog: false,
+      unAuthServices: [],
+      checkedServices: [],
+      expandKeys: {}
+    }
+  },
+  computed: {
+    readonly () {
+      const { pageType } = this.$query
+      return pageType === 'READONLY'
+    }
+  },
+  watch: {
+    mode () {
+      this.getPcRoleList()
+    }
+  },
+  methods: {
+    getRoleAppList () {
+      const params = {
+        action: 'getRoleServiceModules',
+        entityId: 'FM_ROLE_MODULE',
+        systemId: this.SYSTEM,
+        roleId: this.$query.id
+      }
+
+      this.$http.$post(params)
+        .then(data => {
+          this.tableData = data
+          this.search()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    search () {
+      this.showTableData = this.tableData.filter(item => item.title.includes(this.inputName))
+    },
+    settingMenu (row, type, e) {
+      this.roleMode = type
+      this.setMenuInfo = { ...row }
+
+      this.getUnauthorizedMenu()
+      const text = type === 'move' ? '移动端' : 'PC端'
+      this.dialogTitle = `${row.title}-${text}-菜单授权`
+      this.setRoleMenuDialog = true
+    },
+    getUnauthorizedMenu () {
+      const params = {
+        action: 'getRoleServiceUnauthorizedModules',
+        entityId: 'FM_ROLE_MODULE',
+        serviceId: this.setMenuInfo.serviceId,
+        mode: this.roleMode,
+        roleId: this.roleId
+      }
+      this.$http.get(params)
+        .then(data => {
+          this.roleUnauthorizedMenu = data
+        })
+        .catch(err => {
+          this.$message.error(err.message || '获取未授权菜单失败')
+        })
+    },
+    removeTree (data, type) {
+      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.roleId
+        }
+        if (!data.id) {
+          params.serviceId = data.serviceId
+          delete params.moduleIds
+        }
+        this.$http.$post(params)
+          .then(() => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getRoleAppList()
+          })
+          .catch(err => {
+            this.$message.error(err.message || '处理失败')
+          })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          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.roleId,
+        moduleIds: str
+      }
+      this.httpLoading.savePcMenu = true
+      this.$http.$post(params)
+        .then(() => {
+          this.getRoleAppList()
+          this.$message.success('保存成功')
+          this.setRoleMenuDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+          this.setRoleMenuDialog = false
+        })
+        .finally(() => {
+          this.httpLoading.savePcMenu = false
+        })
+    },
+    cancelAuthorization (serviceId) {
+      this.$confirm('是否取消授权？', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          action: 'removeRoleModules',
+          entityId: 'FM_ROLE_MODULE',
+          roleId: this.roleId,
+          serviceId: serviceId
+        }
+        this.$http.$post(params)
+          .then(() => {
+            this.$message.success('删除成功')
+            this.getRoleAppList()
+          })
+          .catch(err => {
+            this.$message.error(err.message || '删除失败')
+          })
+      })
+    },
+    getSystemRoleService  () {
+      this.$http.list({
+        action: 'getSystemRoleService',
+        entityId: 'FM_SERVICE',
+        systemId: this.SYSTEM,
+        roleId: this.roleId
+      })
+        .then(data => {
+          const systemRoleServiceData = data.entitys[0]
+          this.unAuthServices = systemRoleServiceData.unAuthServices
+          // this.checkedServices = systemRoleServiceData.authServices.map(item => item.id)
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    saveRoleApp () {
+      this.$http.save({
+        action: 'addRoleServices',
+        entityId: 'FM_ROLE_SERVICE',
+        roleId: this.roleId,
+        serviceIds: this.checkedServices.join(',')
+      })
+        .then(data => {
+          this.getSystemRoleService()
+          this.getRoleAppList()
+          this.addRoleAppDialog = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    expandNode (key, node) {
+      let expandKeys = this.expandKeys[key] || []
+      expandKeys = [...new Set([...expandKeys, node.id])]
+      this.expandKeys[key] = expandKeys
+    },
+    collapseNode (key, node) {
+      const expandKeys = this.expandKeys[key] || []
+      const index = expandKeys.findIndex(item => item === node.id)
+      if (index !== -1) {
+        expandKeys.splice(index, 1)
+      }
+      this.expandKeys[key] = expandKeys
+    }
+  },
+  created () {
+    this.roleId = this.$query.id
+    this.systemId = this.$tab.SYSTEM || this.$query.systemId
+    this.getRoleAppList()
+    this.getSystemRoleService()
+  }
+}
+</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;
+}
+.null-data {
+  min-height:200px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  >i {
+    font-size: 100px;
+  }
+  >span {
+    display:block;
+    font-size: var(--epx-font-size-l);
+    color: var(--epx-text);
+  }
+}
+</style>