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

package/src/components/RightSubList.vue

@@ -0,0 +1,256 @@
+<script>
+// @jsx-vue3（T30 JSX 批②：Vue3 JSX 语法）
+import EntitySubListVue from '@epxing/components/src/entity-sub-list'
+import { captureRef } from '@epxing/core/src/capture-ref'
+export default {
+  name: 'epx-right-sub-list',
+  extends: EntitySubListVue,
+  data () {
+    return {
+      commonDialogVisible: false,
+      commonApiIds: [],
+      commonApis: [],
+      commonFieldsConfigs: [],
+      commonForm: {},
+      defaultValue: {}
+    }
+  },
+  methods: {
+    getCommonApis () {
+      const { id } = this.$query
+      this.$http.get({
+        entityId: 'FM_ENTITY_API',
+        action: 'getCommonApi',
+        targetEntityId: id
+      })
+        .then(data => {
+          this.commonApis = data.apis
+        })
+    },
+    saveCommonApis () {
+      const form = this.$refs.commonForm
+      const data = form.model.data
+      const { id } = this.$query
+      if (this.commonApiIds.length === 0) {
+        this.$message.error('请选择常用权限')
+        return
+      }
+      const params = {
+        entityId: 'FM_ENTITY_RIGHT',
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ENTITY': id,
+        'bean.OPEN_SCOPE': data.OPEN_SCOPE,
+        'bean.AUTH_TYPE': data.AUTH_TYPE
+      }
+      this.commonApiIds.forEach(item => {
+        const common = this.commonApis.find(api => api.TYPE === item)
+        if (common) {
+          this.$http.save({
+            ...params,
+            'bean.NAME': common.TYPE,
+            'bean.APIS': common.APIS
+          })
+            .then(data => {
+              this.$refesh()
+              this.commonDialogVisible = false
+            }).catch(err => {
+              this.$message.error(err.message)
+            })
+        }
+      })
+    },
+    getCommonFieldConfigs () {
+      this.$http.get({
+        action: 'getDefault',
+        entityId: 'FM_ENTITY_RIGHT'
+      })
+        .then(data => {
+          this.defaultValue = data.data
+        })
+      this.$FieldFactory.createFields({
+        metaId: 'FM_ENTITY_RIGHT',
+        pageType: 'EDIT',
+        fields: ['OPEN_SCOPE', 'AUTH_TYPE', { attriName: 'APIS', state: 'HIDDEN' }]
+      })
+        .then(data => {
+          this.commonFieldsConfigs = [...data]
+        })
+    },
+    addCommonAPi () {
+      this.commonForm = { ...this.defaultValue }
+      this.commonDialogVisible = true
+    },
+    renderCommonApi () {
+      return (
+        <el-dialog
+          title="添加常用权限"
+          v-model={this.commonDialogVisible}
+          width="900px"
+          v-slots={{
+            footer: () => (<span class="dialog-footer">
+              <el-button onClick={() => (this.commonDialogVisible = false)}>取 消</el-button>
+              <el-button type="primary" onClick={this.saveCommonApis.bind(this)}>确 定</el-button>
+            </span>)
+          }}>
+          <div class="common-right">
+            {this.commonFieldsConfigs.length > 0 && (
+              <epx-table-form
+                class="form-content"
+                ref={captureRef(this, 'commonForm')}
+                v-model={this.commonForm}
+                fieldsConfigs={this.commonFieldsConfigs}
+                column={1}
+              >
+              </epx-table-form>
+            )}
+            <el-checkbox-group v-model={this.commonApiIds}>
+              <ul class="right-list">
+                {
+                  this.commonApis.map(item => (
+                    <li class="right-item" key={item.TYPE}>
+                      <div class="right-title">
+                        <label>{item.TYPE}</label>
+                        <el-checkbox class="checkbox" label={item.TYPE} value={item.TYPE} size="default">&nbsp;</el-checkbox>
+                      </div>
+                      <div class="right-interface" title={item.APIS.replace(/,/g, '、')}>
+                        接口集：{item.APIS.replace(/,/g, '、')}
+                      </div>
+                    </li>
+                  ))
+                }
+              </ul>
+            </el-checkbox-group>
+          </div>
+
+        </el-dialog>
+      )
+    }
+  },
+  created () {
+    this.renderComponents.push(this.renderCommonApi)
+    this.getCommonApis()
+    this.getCommonFieldConfigs()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$paddingSize: 16px;
+.list-container {
+}
+.search-simple {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.list-table {
+  background: var(--epx-bg-card);
+   // 无边框
+  &.no-border {
+     border: 0;
+    border-top: dashed 1px var(--epx-border);
+    &::after {
+      display: none
+    }
+
+      :deep(th.is-leaf),
+      :deep(td) {
+       border-right: 0
+      }
+
+  }
+}
+.is-label {
+  @include font_color_primary;
+  cursor: pointer;
+}
+.list-operates {
+  background: var(--epx-bg-card);
+  padding: $paddingSize 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.column-operates {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid var(--epx-border);
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--epx-radius-base);
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+   border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+
+.column-operate-btn {
+  font-size: var(--epx-font-size-base);
+}
+.pagination {
+  background: var(--epx-bg-card);
+  padding: $paddingSize 0;
+
+    :deep(.el-select) {
+      margin-left: 24px;
+    }
+    :deep(.el-pagination__total) {
+      float: right;
+    }
+
+}
+.right-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.right-item {
+  font-size: var(--epx-font-size-base);
+  position: relative;
+  width: calc(25% - 20px);
+  box-sizing: border-box;
+  margin: 10px;
+  padding: 16px;
+  border: 1px solid var(--epx-border);
+  border-radius: var(--epx-radius-base);
+}
+.right-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+}
+.right-interface {
+  margin: 10px 0;
+  max-height: 40px;
+  color: var(--epx-text);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>

package/src/components/RoleAddUser.vue

@@ -0,0 +1,56 @@
+<script>
+import UserFind from './UserFind'
+const _comp = {
+  name: 'epx-role-add-user',
+  extends: UserFind,
+  props: {
+    multiple: {
+      type: Boolean,
+      default: true
+    }
+  },
+  style: {
+    margin: 0
+  },
+  methods: {
+    confirm () {
+      const { saveAction } = this.$configs
+      const key = this.$meta.getKey()
+      let label = this.$meta.getLabel()
+      if (this.$configs.LabelFields && this.$configs.LabelFields.length > 0) {
+        label = this.$configs.LabelFields[0]
+      }
+      const result = this.checkedList.filter(item => !!item).map(item => ({ id: item[key], name: item[`${label}#`] || item[label] }))
+      if (this.multiple) {
+        if (result.length === 0) {
+          this.$message.error('请选择用户')
+          return
+        }
+        this.$http.save({
+          action: saveAction,
+          entityId: 'FM_ROLE_USER',
+          'bean.USER_ID': result.map(item => item.id).join(','),
+          'bean.CLIENT': this.CLIENT,
+          'bean.SYSTEM': this.SYSTEM,
+          'bean.ROLE_ID': this.$query.parentId,
+          'bean.IS_MAIN': '0'
+        })
+          .then(data => {
+            this.$message.success('添加成功')
+            this.backPage()
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      }
+    },
+    cancelFn () {
+      this.backPage()
+    }
+  }
+}
+// Vue2 的 extends 会继承 scoped 样式的 _scopeId，Vue3 不继承 __scopeId（连不重写 render 的纯 script
+// 继承也丢，实验室实证）——本组件无自有 <style>，显式继承否则父组件 scoped 样式整体失配。
+_comp.__scopeId = UserFind.__scopeId
+export default _comp
+</script>

package/src/components/RoleApplicationCard.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="applicaiton-container">
+    <ul class="application-list">
+      <li class="application-item" v-for="application in applicationList" :key="application.ID">
+        <div class="application-module">
+          <div class="module-inner">
+              <i :class="['module-icon','fa',  application['SERVICE|ICON'] || 'el-icon-menu']"></i>
+              <span class="module-text">{{application['SERVICE|NAME']}}</span>
+          </div>
+          <div class="module-operates">
+            <span @click="roleSetting(application)">设置</span>
+            <span @click="removeEntity(application)">删除</span>
+          </div>
+        </div>
+      </li>
+      <li class="application-item add-application" >
+        <div class="module-add">
+          <div class="module-inner" @click="addEntity">
+            <i :class="['module-icon', 'el-icon-circle-plus']"></i>
+            <span class="module-text">添加应用</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-role-application-card',
+  mixins: [component],
+  data () {
+    return {
+      applicationList: []
+    }
+  },
+  methods: {
+    roleSetting (row) {
+      const query = {
+        // title: '角色应用新增',
+        metaId: this.$metaId,
+        component: 'role-accredit',
+        roleId: row.ROLE,
+        serviceId: row.SERVICE
+      }
+      this.$createPage(query)
+    },
+    getApplicationList () {
+      this.$http.list({
+        action: 'getRoleService',
+        link: 'service',
+        entityId: 'FM_ROLE_SERVICE',
+        roleId: this.$query.id
+      })
+        .then(data => {
+          this.applicationList = data.entitys
+        })
+    },
+    addEntity () {
+      const query = {
+        title: '角色应用新增',
+        metaId: 'FM_ROLE_SERVICE',
+        flag: 'v_sub_add',
+        component: 'entity-add-page',
+        pageType: 'ADD',
+        submitParams: {
+          'bean.ROLE': this.$query.id
+        },
+        fieldConfigs: {
+          ROLE: { state: 'HIDDEN' }
+        },
+        parentId: this.$query.id,
+        openType: this.$isMobile ? null : 2,
+        callback: this.closeSubAdd
+      }
+      this.$createPage(query)
+    },
+    removeEntity (applicaiton) {
+      this.$confirm('是否删除?', {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.removeMulti({
+          entityId: 'FM_ROLE_SERVICE',
+          ids: applicaiton.ID
+        })
+          .then(data => {
+            this.$message.success('删除成功')
+            this.getApplicationList()
+          })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    closeSubAdd () {
+      this.getApplicationList()
+    }
+  },
+  created () {
+    this.getApplicationList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.applicaiton-container {
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--epx-bg-card);
+  overflow: auto;
+  padding: 0 16px;
+  position: relative;
+}
+.application-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.application-item {
+  width: 16%;
+  min-width: 200px;
+  box-sizing: border-box;
+  height: 188px;
+  padding:  20px;
+  margin-bottom: 20px;
+  position: relative;
+}
+.application-module {
+  position: absolute;
+  width: 180px;
+  left: 50%;
+  margin-left: -90px;
+  height: auto;
+  &:hover {
+    box-shadow: 1px 2px 5px rgba(21, 21, 21, 0.1);
+
+  }
+}
+.application-module:hover .module-operates {
+  display: flex;
+}
+.add-application {
+  cursor: pointer;
+  .application-module {
+    &:hover {
+      box-shadow: none;
+    }
+  }
+  .module-icon {
+    color: var(--epx-text-secondary);
+  }
+}
+.module-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+}
+.module-icon {
+  @include font_color_primary;
+  font-size: 66px;
+  // font-size: 86px;
+  line-height: 1;
+  margin-bottom: 16px;
+}
+.module-operates {
+  display: none;
+  width: 100%;
+  background-color: #f6f9fb;
+  &>span{
+    flex: 1;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+
+.right-container {
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--epx-bg-card);
+  z-index: 1;
+  overflow: auto;
+}
+.right-header {
+  padding: 10px;
+  border-bottom: 1px solid var(--epx-border);
+
+    :deep(.el-page-header__left::after) {
+      display: none;
+    }
+
+}
+.button-group {
+  padding: 16px 0;
+  border-bottom: dashed 1px var(--epx-border);
+}
+.tree-card {
+  max-height: 400px;
+  overflow: auto;
+
+    :deep(.el-card__header) {
+      padding: 12px;
+    }
+    :deep(.el-card__body) {
+      padding: 0;
+    }
+
+}
+.card-body {
+  display: flex;
+  padding: 12px 0;
+  justify-content: center;
+  border-top: 1px solid var(--epx-border);
+}
+.menu-tree {
+  padding: 12px 8px;
+}
+.count {
+  i {
+    margin-left: 8px;
+  }
+  cursor: pointer;
+  &.active, &:hover {
+    @include font_color_primary;
+  }
+}
+.fade-enter-active, .fade-leave-active {
+  transition: transform .3s;
+}
+
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  transform: translateX(100%);
+}
+.add-scope {
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary
+  }
+}
+.edit-scope {
+  cursor: pointer;
+  i {
+    margin-left: 8px;
+    @include font_color_primary
+  }
+}
+.filter-button {
+  text-align: center;
+}
+.field-scope-setting {
+  padding: 16px;
+}
+.field-radio-group {
+  display: block;
+  margin-bottom: 16px;
+}
+.field-checkbox-group {
+  display: inline;
+}
+.check-field-all {
+  margin-right: 30px;
+}
+.field-scope-operate {
+  margin-top: 16px;
+}
+.right-dialog {
+
+    :deep(.el-dialog__body) {
+      // max-height: 400px;
+      height: 600px;
+      overflow: auto;
+      padding: 10px 20px 24px
+    }
+
+}
+</style>
+<style lang="scss">
+.role-app-menu-popper.el-popper {
+  padding: 0;
+}
+.role-app-field-scope-popover.el-popper {
+  padding: 0;
+  .el-popover__title {
+    margin: 0;
+    padding: 16px;
+    border-bottom: 1px solid var(--epx-border);
+  }
+}
+
+</style>