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

package/src/components/permiss/RoleSubList.vue

@@ -0,0 +1,263 @@
+
+<script>
+// @jsx-vue3（T30 JSX 批③：scopedSlots 集群 Vue3 化）
+import EntitySubList from '@epxing/components/src/entity-sub-list'
+export default {
+  name: 'epx-permiss-role-sublist',
+  extends: EntitySubList,
+  data () {
+    return {
+      renderComponents: [this.renderSearch, this.renderButtons, this.renderTable, this.renderScope],
+      filterDrawer: false,
+      filterScopeParams: [],
+      subItem: {}
+    }
+  },
+  computed: {
+    getFieldScopeChinese () {
+      return fieldScope => {
+        if (fieldScope) {
+          const scope = JSON.parse(fieldScope)
+          return scope.fieldNames
+        }
+      }
+    }
+  },
+  methods: {
+    getDefaultOperates () {
+      const { addPageFlag, editPageFlag, operates, columnOperates, openMode } = this.$configs
+      const defaultOperates = [
+        {
+          text: '批量分配角色',
+          handler: 'allocateRole',
+          ui: 'primary',
+          pageFlag: addPageFlag,
+          num: 0,
+          metaId: this.$metaId,
+          openMode: openMode
+        },
+        {
+          text: '删除',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: `#[${this.$metaKey}]`
+          }
+        }
+      ]
+
+      const defaultColumnOperates = [
+        {
+          text: '设置数据范围',
+          handler: 'setDataScope',
+          pageFlag: editPageFlag,
+          num: 1,
+          openMode,
+          metaId: this.$metaId,
+          params: {
+            id: `#[${this.$metaKey}]`,
+            component: '$[$configs.addPage]',
+            pageType: 'EDIT',
+            fieldConfigs: '$[addFormFieldConfigs]',
+            parentId: '$[parentId]',
+            callback: '$[getData]',
+            isSub: true
+          }
+        },
+        {
+          text: '设置字段范围',
+          handler: 'setFieldScope',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: `#[${this.$metaKey}]`
+          }
+        }
+      ]
+      if (!operates) {
+        this.configs.operates = defaultOperates
+      }
+      if (!columnOperates) {
+        this.configs.columnOperates = defaultColumnOperates
+      }
+    },
+    setFieldScope (config, item) {
+      if (this.$query.linkEntity) {
+        let fields = ''
+        let fieldType = '1'
+        if (item.FIELD_SCOPE) {
+          fields = JSON.parse(item.FIELD_SCOPE).fields
+          fieldType = JSON.parse(item.FIELD_SCOPE).type
+        }
+        const query = {
+          metaId: this.$query.linkEntity,
+          saveMetaId: this.$metaId,
+          component: 'permiss-field-scope',
+          openType: '2',
+          title: '设置字段范围',
+          itemId: item.ID,
+          fieldType,
+          fields,
+          callback: this.getData
+        }
+        this.$createPage({
+          ...query
+        })
+      } else {
+        this.$message.error('没有关联对象')
+      }
+    },
+    setDataScope (config, item) {
+      if (this.$query.linkEntity) {
+        this.subItem = item
+        this.filterScopeParams = []
+        if (item.DATA_SCOPE) {
+          this.filterScopeParams = JSON.parse(item.DATA_SCOPE).scopeParams
+        }
+        this.filterDrawer = true
+      } else {
+        this.$message.error('没有关联对象')
+      }
+    },
+    allocateRole () {
+      const query = {
+        metaId: this.$metaId,
+        component: 'premiss-allocate-role',
+        openType: '2',
+        title: '批量分配角色',
+        rightId: this.parentId,
+        callback: this.getData
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    addSystemPermiss () {
+      const query = {
+        metaId: this.$metaId,
+        component: 'add-system-permiss',
+        openType: '2',
+        title: '批量分配系统',
+        rightId: this.parentId,
+        callback: this.getData
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    saveScopeParams () {
+      const scopeParams = this.$refs.filterDrawer.scopeParams || []
+      let scopeText = ''
+      // 防止数据获取不到
+      const _scopeParmas = scopeParams.map(item => {
+        const { lb = '', field, mode, values, rb = '', link, label, 'mode#': modelLabel = '是', 'values#': valueLabel, 'link#': linkLabel = '', valueType = '' } = item
+        const text = lb + label + modelLabel + (valueLabel || values) + rb + linkLabel
+        scopeText += text
+        if (valueType) {
+          return { lb, field, mode, valueType, values, rb, link }
+        }
+        return { lb, field, mode, values, rb, link }
+      })
+      const params = {
+        action: 'setDataScope',
+        entityId: this.$metaId,
+        id: this.subItem.ID
+      }
+      const scopeInfo = JSON.stringify({
+        scopeParams: _scopeParmas,
+        scopeText
+      })
+      this.$http.save({
+        ...params,
+        scopeInfo: scopeInfo
+      })
+        .then(() => {
+          this.getData()
+          this.filterDrawer = false
+          this.$message.success('保存成功')
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+        })
+    },
+    renderField (field) {
+      const { isLabel } = field.attribute || {}
+      return {
+        default: ({ row }) => {
+          if (field.dataType === 'blob' || field.dataType === 'photo') {
+            return (
+              <epx-file values={row} fieldConfigs={{ ...field, state: 'DETAIL' }}></epx-file>
+            )
+          }
+          if (field.dataType === 'rule') {
+            return (
+              <font color={field.color}>
+                {this.getChineseValue(row[field.attriName])}
+              </font>
+            )
+          }
+          if (field.dataType === 'scope') {
+            return (
+              <font color={field.color}>
+                {this.getScopeChinese(row[field.attriName])}
+              </font>
+            )
+          }
+          if (field.dataType === 'date' || field.dataType === 'date_ym') {
+            return (
+              <font color={field.color}>
+                {row[field.attriName] === '2050-01-01' || row[field.attriName] === '2050-01' || row[field.attriName] === '9999-99' || row[field.attriName] === '9999' ? '至今' : row[field.attriName]}
+              </font>
+            )
+          }
+          if (field.dataType === 'tag') {
+            if (!row[field.attriName]) return null
+            const tagList = row[field.attriName].split(',')
+            return (
+              <span>
+                {
+                  tagList.map((item, index) => (
+                    <el-tag style={{ marginRight: '8px' }} key={item}>{ item }
+                      { index < tagList.length - 1 &&
+                          <span style={{ opacity: 0, width: 0, float: 'left' }}>、</span>
+                      }
+                    </el-tag>
+                  ))
+                }
+              </span>
+            )
+          }
+          if (field.attriName === 'FIELD_SCOPE') {
+            return (
+              <font color={field.color}>
+                {this.getFieldScopeChinese(row[field.attriName])}
+              </font>
+            )
+          }
+          return (
+            <font class={{ 'is-label': field.isLabel || isLabel === '1' }} color={field.color} onClick={this.clickField.bind(this, field, row)}>
+              { row[field.attriName + '#'] || row[field.attriName] }
+            </font>
+          )
+        }
+      }
+    },
+    renderScope () {
+      return (
+        <epx-scope-drawer visible={this.filterDrawer} {...{ 'onUpdate:visible': v => (this.filterDrawer = v) }} metaId={this.$query.linkEntity} modeType={['FIXED_VALUE', 'SYSTEM_VARIABLE', 'DEFINED']} ref="filterDrawer" params={this.filterScopeParams} v-slots={{ button: () => (<el-button style={{ marginLeft: '45%' }} type="primary" onClick={this.saveScopeParams}>保存</el-button>) }}>
+
+        </epx-scope-drawer>
+      )
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

package/src/components/permiss/jurisdiction.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="container">
+      <!-- <div class="title">角色授权 —— {{baseInfo.NAME}}({{baseInfo['SYSTEM#']}})</div> -->
+      <div class="jurisdiction" v-loading="loading">
+          <div class="left">
+            <div class="tree-title">未授权限</div>
+            <el-tree
+              class="menu-tree"
+              ref="left-tree"
+              :props="props"
+              :data="chooseTreeData"
+              node-key="id"
+              show-checkbox
+              >
+              <template v-slot="{ node, data }"><span class="tree-node">
+                  <!-- 图标 -->
+                  <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                  <!-- 文字 -->
+                  <span>{{ node.label }}</span>
+              </span></template>
+            </el-tree>
+          </div>
+          <div class="center">
+              <div class="button-con">
+                  <el-button type="primary" @click="shouquan">授权<i class="el-icon-right"></i></el-button>
+                  <el-button type="danger" @click="xiaoquan"><i class="el-icon-back"></i>销权</el-button>
+              </div>
+          </div>
+          <div class="right">
+            <div class="tree-title-right title-three">
+              <div class="tree-title-item">已授权限</div>
+              <div class="tree-title-item">数据范围</div>
+              <div class="tree-title-item">字段范围</div>
+            </div>
+            <el-tree
+              :data="selectedTreeData"
+              show-checkbox
+              ref="select-tree"
+              :expand-on-click-node="false"
+              node-key="id"
+              >
+              <template v-slot="{ data }"><div class="custom-tree-node">
+                <div class="line-tree">
+                  <div class="line-tree-item line-tree-item-one">
+                    <!-- 图标 -->
+                    <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                    {{ data.title }}
+                  </div>
+                  <!-- <el-tooltip class="item" effect="dark" :content="getDataScopeText(data.dataScope)" placement="top">
+                    <div class="line-tree-item line-tree-item-two" @click="setDataScope(data)">{{getDataScopeText(data.dataScope)}}</div>
+                  </el-tooltip> -->
+                  <div class="line-tree-item line-tree-item-two" :title="getDataScopeText(data.dataScope)" @click="setDataScope(data)">
+                    <span v-if="getDataScopeText(data.dataScope)">{{getDataScopeText(data.dataScope)}}</span>
+                    <span v-else class="setting-btn">设置</span>
+                  </div>
+                  <div class="line-tree-item line-tree-item-two" :title="getFielfScopeText(data.fieldScope)" @click="setFieldScope(data)">
+                    <span v-if="getFielfScopeText(data.fieldScope)">{{getFielfScopeText(data.fieldScope)}}</span>
+                    <span v-else class="setting-btn">设置</span>
+                  </div>
+                </div>
+              </div></template>
+            </el-tree>
+            <epx-scope-drawer v-model:visible="filterDrawer" :metaId="info.entityId" ref="filterDrawer" :params="scopeParams" :modeType="['FIXED_VALUE', 'SYSTEM_VARIABLE', 'DEFINED']">
+              <template v-slot:button><el-button :style="{ marginLeft: '45%' }" type="primary" @click="saveScopeParams">保存</el-button></template>
+            </epx-scope-drawer>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-permiss-role-jurisdiction',
+  mixins: [component],
+  data () {
+    return {
+      props: {
+        label: 'title',
+        children: 'children'
+      },
+      baseInfo: {},
+      roleId: '',
+      selectedTreeData: [],
+      chooseTreeData: [],
+      selection: [],
+      loading: false,
+      info: {},
+      itemId: '',
+      filterDrawer: false,
+      scopeParams: []
+    }
+  },
+  computed: {
+    getDataScopeText () {
+      return (scope) => {
+        let text = ''
+        if (scope) {
+          text = JSON.parse(scope).scopeText
+        }
+        return text
+      }
+    },
+    getFielfScopeText () {
+      return (scope) => {
+        let text = ''
+        if (scope) {
+          text = JSON.parse(scope).fieldNames
+        }
+        return text
+      }
+    }
+  },
+  methods: {
+    setFieldScope (item) {
+      if (item.entityId) {
+        let fields = ''
+        let fieldType = '1'
+        if (item.fieldScope) {
+          fields = JSON.parse(item.fieldScope).fields
+          fieldType = JSON.parse(item.fieldScope).type
+        }
+        const scope = [{ field: 'ROLE', mode: 'equal', values: this.baseInfo.ID }, { field: 'RIGHT', mode: 'equal', values: item.id }]
+        const scopeParams = JSON.stringify(scope)
+        this.$http.find({
+          entityId: 'FM_ROLE_RIGHT',
+          scopeParams
+        })
+          .then(data => {
+            const query = {
+              metaId: item.entityId,
+              component: 'permiss-field-scope',
+              openType: '2',
+              title: '设置字段范围',
+              itemId: data.data.ID,
+              fieldType,
+              fields,
+              callback: this.getSelectedTreeData
+            }
+            this.$createPage({
+              ...query
+            })
+          })
+      } else {
+        this.$message.error('没有关联对象')
+      }
+    },
+    setDataScope (item) {
+      this.info = item
+      if (item.entityId) {
+        this.subItem = item
+        this.scopeParams = []
+        if (item.dataScope) {
+          this.scopeParams = JSON.parse(item.dataScope).scopeParams
+        }
+        const scope = [{ field: 'ROLE', mode: 'equal', values: this.baseInfo.ID }, { field: 'RIGHT', mode: 'equal', values: item.id }]
+        const scopeParams = JSON.stringify(scope)
+        this.$http.find({
+          entityId: 'FM_ROLE_RIGHT',
+          scopeParams
+        })
+          .then(data => {
+            this.itemId = data.data.ID
+            this.filterDrawer = true
+          })
+      } else {
+        this.$message.error('没有关联对象')
+      }
+    },
+    saveScopeParams () {
+      const scopeParams = this.$refs.filterDrawer.scopeParams || []
+      let scopeText = ''
+      // 防止数据获取不到
+      const _scopeParmas = scopeParams.map(item => {
+        const { lb = '', field, mode, values, rb = '', link, label, 'mode#': modelLabel = '是', 'values#': valueLabel, 'link#': linkLabel = '', valueType = '' } = item
+        const text = lb + label + modelLabel + (valueLabel || values) + rb + linkLabel
+        scopeText += text
+        if (valueType) {
+          return { lb, field, mode, valueType, values, rb, link }
+        }
+        return { lb, field, mode, values, rb, link }
+      })
+      const params = {
+        action: 'setDataScope',
+        entityId: 'FM_ROLE_RIGHT',
+        id: this.itemId
+      }
+      const scopeInfo = JSON.stringify({
+        scopeParams: _scopeParmas,
+        scopeText
+      })
+      this.$http.save({
+        ...params,
+        scopeInfo: scopeInfo
+      })
+        .then(() => {
+          this.getSelectedTreeData()
+          this.filterDrawer = false
+          this.$message.success('保存成功')
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+        })
+    },
+    // 授权
+    shouquan () {
+      const select = this.$refs['left-tree'].getCheckedKeys()
+      const parent = this.$refs['left-tree'].getHalfCheckedKeys()
+      const selection = [...select, ...parent]
+      if (selection.length === 0) {
+        this.$message.error('请选择至少一条数据')
+        return
+      }
+      const rightIds = selection.join(',')
+      this.loading = true
+      this.$http.$post({
+        action: 'saveRoleRights',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        rightIds
+      })
+        .then(data => {
+          this.loading = false
+          this.$message.success('授权成功！')
+          this.getChooseTreeData()
+          this.getSelectedTreeData()
+        })
+    },
+    // 销权
+    xiaoquan () {
+      // if (this.selection.length === 0) {
+      //   this.$message.error('请选择至少一条数据')
+      //   return
+      // }
+      // const rightIds = this.selection.map(item => item.id).join(',')
+      const selection = this.$refs['select-tree'].getCheckedKeys()
+      if (selection.length === 0) {
+        this.$message.error('请选择至少一条数据')
+        return
+      }
+      const rightIds = selection.join(',')
+      this.loading = true
+      this.$http.$post({
+        action: 'removeRoleRight',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        rightIds
+      })
+        .then(data => {
+          this.loading = false
+          this.$message.success('销权成功！')
+          this.getChooseTreeData()
+          this.getSelectedTreeData()
+        })
+    },
+    getBaseInfo () {
+      this.$http.get({
+        entityId: 'FM_ROLE',
+        id: this.roleId
+      })
+        .then(data => {
+          this.baseInfo = data.data
+        })
+    },
+    getChooseTreeData () {
+      this.$http.list({
+        action: 'getChooseTreeData',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        systemId: this.$tab.SYSTEM
+      })
+        .then(data => {
+          this.chooseTreeData = data
+        })
+    },
+    getSelectedTreeData () {
+      this.$http.list({
+        action: 'getSelectedTreeData',
+        entityId: 'FM_ROLE_RIGHT',
+        roleId: this.roleId,
+        systemId: this.$tab.SYSTEM
+      })
+        .then(data => {
+          this.selectedTreeData = data
+        })
+    }
+  },
+  created () {
+    this.roleId = this.$query.id
+    this.getBaseInfo()
+    this.getChooseTreeData()
+    this.getSelectedTreeData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+    box-sizing: border-box;
+    height: 100%;
+    padding: 16px;
+    background-color: var(--epx-bg-card);
+}
+.title{
+    height: 46px;
+    line-height: 46px;
+    font-size: var(--epx-font-size-l);
+    color: var(--epx-text);
+    text-indent: 12px;
+    border-bottom: 1px dotted var(--epx-border);
+    margin-bottom: 16px;
+}
+.jurisdiction{
+    height: calc(100% - 70px);
+    display: flex;
+}
+.left{
+    flex: 3;
+    height: 100%;
+    border: 1px solid var(--epx-border);
+}
+.center{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-content: center;
+    align-items: center;
+}
+.button-con{
+    text-align: center;
+}
+.button-con :deep(.el-button){
+    margin-left: 0;
+    margin-bottom: 16px;
+}
+.right{
+    flex: 6;
+    height: 100%;
+    border: 1px solid var(--epx-border);
+}
+.setting{
+  text-indent: 6px;
+  cursor: pointer;
+}
+.menu-tree{
+  height: calc(100% - 46px);
+  overflow: auto;
+}
+.tree-title{
+  height: 45px;
+  line-height: 45px;
+  padding: 0 10px;
+  color: var(--epx-text-secondary);
+  font-size: var(--epx-font-size-base);
+  font-weight: bold;
+  border-bottom: 1px solid var(--epx-border);
+}
+// color:var(--epx-text);
+.left :deep(.el-tree-node__content){
+  height: 45px;
+  border-bottom: 1px solid var(--epx-border);
+}
+.tree-title-right{
+  height: 46px;
+  line-height: 46px;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid var(--epx-border);
+}
+.title-three{
+  display: flex;
+}
+.tree-title-item{
+  flex: 4;
+  text-indent: 16px;
+  border-right: 1px solid var(--epx-border);
+}
+.tree-title-four{
+  flex: 1;
+  text-align: center;
+  font-size: var(--epx-font-size-xl);
+}
+.custom-tree-node{
+  width: calc(100% - 46px);
+  height: 100%;
+}
+.line-tree{
+  height: 100%;
+  display: flex;
+}
+.line-tree-item{
+  height: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.line-tree-item-one{
+  flex: 4;
+  i{
+    margin-right: 8px;
+    font-size: var(--epx-font-size-l);
+    color: #1f82ef;
+  }
+}
+.line-tree-item-two{
+  flex:5;
+  margin: 0 10px;
+  overflow: hidden;
+}
+.line-tree-item-two:hover{
+  color: #1f82ef;
+}
+.setting-btn{
+  color: #1f82ef;
+  margin-left: 20px;
+}
+
+  // .el-tree-node{
+  :deep(.el-tree-node__content) {
+    box-sizing: border-box;
+    height: 46px;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--epx-border);
+  }
+
+</style>