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

package/src/components/EntityRightFormItem.vue

@@ -0,0 +1,618 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import AddFormItem from '@epxing/components/src/add-form-item'
+export default {
+  name: 'epx-entity-right-form-item',
+  extends: AddFormItem,
+  props: {
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      commonApiList: [],
+      entityApiList: [],
+      ruleList: [],
+      addInterfaceFlag: false,
+      addInterfaceForm: {},
+      commonApiIds: [],
+      commonApis: [],
+      defaultValue: {},
+      rightFormData: {},
+      entityApiMap: {},
+      apiTypeList: [],
+      rightApiByTypeList: {},
+      foldMap: {},
+      checkApiMap: {}
+    }
+  },
+  computed: {
+    checkApis: {
+      get () {
+        const { APIS = '' } = this.data
+        if (APIS) return APIS.split(',')
+        return []
+      },
+      set (v) {
+        this.data.APIS = v.join(',')
+      }
+    },
+    checkRules: {
+      get () {
+        const { RULES = '' } = this.formData
+        if (RULES) return RULES.split(',')
+        return []
+      },
+      set (v) {
+        this.data.RULES = v.join(',')
+      }
+    },
+    checkedRuleList: {
+      get () {
+        const { RULES = '' } = this.data
+        if (RULES) return RULES.split(',')
+        return []
+      },
+      set (v) {
+        this.data.RULES = v.join(',')
+      }
+    },
+    checkAllRule: {
+      get () {
+        return this.checkRules.length === this.ruleList.length
+      },
+      set (v) {
+        if (v) {
+          this.checkRules = this.ruleList.map(item => item.KEY)
+        } else {
+          this.checkRules = []
+        }
+      }
+    },
+    checkAllApiMap: {
+      get () {
+        const checkAllApiMap = {}
+        this.apiTypeList.map(item => {
+          if (this.rightApiByTypeList[item.code]) {
+            checkAllApiMap[item.code] = this.rightApiByTypeList[item.code].every(api => this.checkApis.includes(api.data.NAME))
+          } else {
+            checkAllApiMap[item.code] = false
+          }
+        })
+        return checkAllApiMap
+      }
+    }
+  },
+  watch: {
+    checkApiMap: {
+      handler (v) {
+        this.checkApis = Object.values(v).reduce((arr, item) => [...arr, ...item], [])
+      },
+      deep: true
+    }
+  },
+  methods: {
+    $refesh () {
+      this.getRuleList()
+    },
+    getCheckApiMap () {
+      Promise.all([this.getApiType(), this.getRightApiByType()])
+        .then(([apiTypeList, rightApiByTypeList]) => {
+          const checkApiMap = {}
+          apiTypeList.map(item => {
+            if (rightApiByTypeList[item.code]) {
+              checkApiMap[item.code] = rightApiByTypeList[item.code].filter(api => this.checkApis.includes(api.data.NAME)).map(api => api.data.NAME)
+            } else {
+              checkApiMap[item.code] = []
+            }
+          })
+          this.checkApiMap = checkApiMap
+        })
+    },
+    getEntityApi () {
+      this.$http.get({
+        action: 'getUnusedApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.formData.ENTITY
+      })
+        .then(data => {
+          this.entityApiList = data.entitys
+        })
+    },
+    getApiType () {
+      return this.$http.getCodes({
+        key: 'FM_API_TYPE',
+        scope: 'all'
+      })
+        .then(data => {
+          this.apiTypeList = data
+          return data
+        })
+    },
+    getRightApiByType () {
+      return this.$http.get({
+        action: 'getRightApiByType',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.formData.ENTITY,
+        rightId: this.formData.ID
+      })
+        .then(data => {
+          this.rightApiByTypeList = data
+          return this.rightApiByTypeList
+        })
+    },
+    getRuleList () {
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.ENTITY': this.formData.ENTITY
+      })
+        .then(data => {
+          this.ruleList = data.entitys
+        })
+    },
+    deleteInterfaceList (api) {
+      this.$http.removeMulti({
+        entityId: 'FM_ENTITY_API',
+        ids: api.ID
+      })
+        .then(() => {
+          this.$message.success('删除成功')
+          this.getEntityApi()
+        })
+        .catch(err => {
+          this.$message.error(err.message || '删除失败')
+        })
+    },
+    deleteApi (api) {
+      this.$http.removeMulti({
+        entityId: 'FM_ENTITY_API',
+        ids: api.ID
+      })
+        .then(() => {
+          this.$message.success('删除成功')
+          this.getEntityApi()
+
+          const index = this.checkApis.findIndex(item => item === api.NAME)
+          if (index !== -1) {
+            this.checkApis.splice(index, 1)
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    addCustomApi () {
+      const { LABEL, NAME } = this.addInterfaceForm
+      if (!LABEL) {
+        this.$message.error('请输入接口名称')
+        return
+      }
+      if (!NAME) {
+        this.$message.error('请输入接口命令')
+        return
+      }
+      this.$http.save({
+        entityId: 'FM_ENTITY_API',
+        'bean.CLIENT': this.CLIENT,
+        'bean.SYSTEM': this.SYSTEM,
+        'bean.ENTITY': this.formData.ENTITY,
+        'bean.LABEL': LABEL,
+        'bean.NAME': NAME,
+        'bean.SOURCE': 'entity',
+        'bean.TYPE': this.addInterfaceFlag
+      })
+        .then(data => {
+          this.checkApis.push(NAME)
+          this.addInterfaceFlag = false
+          this.getRightApiByType()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    addRule () {
+      const { addRulePage } = this.$configs
+      this.$createPage({
+        pageId: addRulePage,
+        openType: '2'
+      })
+    },
+    editRule (api) {
+      const { editRulePage } = this.$configs
+      this.$createPage({
+        pageId: editRulePage,
+        id: api.ID
+      })
+    },
+    addInterface () {
+      this.addInterfaceForm = {}
+      this.addInterfaceFlag = true
+    },
+    editInterface (api) {
+      this.addInterfaceForm = { ...api }
+      this.addInterfaceFlag = true
+    },
+    checkAllApi (type, v) {
+      if (v) {
+        const allApis = this.rightApiByTypeList[type] || []
+        this.checkApiMap[type] = allApis.map(item => item.data.NAME)
+      } else {
+        this.checkApiMap[type] = []
+      }
+    },
+    renderForm () {
+      if (this.fieldsConfigs.length > 0) {
+        return (
+          <div>
+            <epx-table-form class="form-content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} v-model={this.data}
+              column={this.column} labelAlign={this.$configs.labelAlign}
+              v-slots= {{
+                default: ({ showLabel, fieldConfigs, metaId, ruleMetaId }) => {
+                  if (fieldConfigs.attriName === 'APIS' && (fieldConfigs.state === 'EDIT' || fieldConfigs.state === 'ADD')) {
+                    return this.apiTypeList.map(apiType => (
+                      <div class="api-type" key={apiType.id}>
+                        <div class="api-type__header">
+                          <span class="api-type__title">{apiType.name}</span>
+                          <span class="api-type__operate" >
+                            <el-checkbox label={apiType.code} value={apiType.code} v-model={this.checkAllApiMap[apiType.code]} onChange={v => this.checkAllApi(apiType.code, v)}>全选</el-checkbox>
+                            <span class="api-type__fold" onClick={() => (this.foldMap[apiType.code] = !this.foldMap[apiType.code])}>{this.foldMap[apiType.code] ? '展开' : '收起'}<i class={this.foldMap[apiType.code] ? 'el-icon-arrow-down' : 'el-icon-arrow-up'}></i></span>
+                          </span>
+                        </div>
+                        <div class="api-type__content" style={{ display: this.foldMap[apiType.code] ? 'none' : 'block' }}>
+                          <el-checkbox-group v-model={this.checkApiMap[apiType.code]} >
+                            {this.rightApiByTypeList[apiType.code] && this.rightApiByTypeList[apiType.code].map(item => (
+                              <el-checkbox label={item.data.NAME} value={item.data.NAME} key={item.data.NAME} >{item.data.NAME} / {item.data.LABEL}</el-checkbox>
+                            ))}
+                          </el-checkbox-group>
+                          <div>
+                            {/* <el-button type="primary" link icon="el-icon-plus" onClick={() => { this.addInterfaceForm = {}; this.addInterfaceFlag = apiType.code }}>添加自定义接口</el-button> */}
+                            {
+                              this.addInterfaceFlag === apiType.code && (
+                                <div class="add-interface" >
+                                  <span>自定义接口：</span>
+                                  <el-input size="default" v-model={this.addInterfaceForm.NAME} placeholder="接口命令"></el-input>
+                                  <el-input size="default" v-model={this.addInterfaceForm.LABEL} placeholder="接口名称"></el-input>
+                                  <el-button size="default" type="primary" link onClick={this.addCustomApi}>保存</el-button>
+                                  <el-button style={{ color: '#666' }} size="default" type="primary" link onClick={() => { this.addInterfaceFlag = false }}>取消</el-button>
+                                </div>
+                              )
+                            }
+                          </div>
+                        </div>
+                      </div>
+
+                    ))
+                  } else if (fieldConfigs.attriName === 'RULES' && (fieldConfigs.state === 'EDIT' || fieldConfigs.state === 'ADD')) {
+                    return (
+                      <div class="api-type">
+                        <div class="api-type__header">
+                          <span class="api-type__title">业务规则</span>
+                          <span class="api-type__operate" >
+                            <el-checkbox v-model={this.checkAllRule}>全选</el-checkbox>
+                            <span class="api-type__fold" onClick={() => (this.foldMap.rule = !this.foldMap.rule)}>{this.foldMap.rule ? '展开' : '收起'}<i class={this.foldMap.rule ? 'el-icon-arrow-down' : 'el-icon-arrow-up'}></i></span>
+                          </span>
+                        </div>
+                        <div class="api-type__content" style={{ display: this.foldMap.rule ? 'none' : 'block' }}>
+                          <el-checkbox-group class="apis-checkbox__group" v-model={this.checkRules} >
+                            {
+                              this.ruleList.map(rule => (
+                                <div class="checkbox" key={rule.KEY}>
+                                  <el-checkbox label={rule.KEY} value={rule.KEY}>
+                                    {rule.NAME}/{rule.KEY}
+                                  </el-checkbox>
+                                </div>
+                              ))
+                            }
+                          </el-checkbox-group>
+                        </div>
+                      </div>
+                    )
+                  }
+                  return (
+                    <epx-table-form-item
+                      show-label={showLabel}
+                      label={fieldConfigs.attriLabel}
+                      fieldConfigs={fieldConfigs}
+                      metaId={metaId}
+                      ruleMetaId={ruleMetaId}
+                    >
+                    </epx-table-form-item>
+                  )
+                }
+              }}
+            >
+            </epx-table-form>
+          </div>
+        )
+      }
+    }
+  },
+  created () {
+    this.getCheckApiMap()
+    this.getRuleList()
+  }
+}
+</script>
+<style scoped lang="scss">
+.container {
+  background: var(--epx-bg-card);
+  &.fold {
+    .form-title-fold__icon {
+      transform: rotate(180deg);
+    }
+    .form-content {
+      height: 0;
+      overflow: hidden;
+    }
+  }
+}
+
+.button-group {
+  text-align: center;
+  padding-bottom: 12px;
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  background: var(--epx-bg-card);
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: var(--epx-border);
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+    margin-left: 10px;
+  }
+}
+
+.form-tilte__simple {
+  margin-bottom: -20px;
+  padding: 6px 12px 0;
+  &::after {
+    display: none;
+  }
+  .form-title-border {
+    border: 0;
+    padding-left: 0;
+  }
+  .form-title__operate {
+    display: none;
+  }
+  .form-title-fold__icon {
+    display: none;
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+
+.form-title-edit {
+  font-size: var(--epx-font-size-base);
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.form-content {
+  transition: all .3s;
+  padding: 10px;
+}
+.form-note {
+  @include bg_color_primary(.2);
+  @include border_color_primary;
+  @include font_color_primary;
+  border: 1px dashed;
+  padding: 8px 12px;
+  border-radius: var(--epx-radius-base);
+  margin: 0 0 12px;
+  >i {
+    margin-right: 8px;
+    font-size: var(--epx-font-size-l);
+  }
+}
+.button-group {
+  margin: 16px 0;
+  display: flex;
+  justify-content: center;
+
+    :deep(.el-button) {
+      padding: 12px 42px;
+      margin: 0 12px;
+    }
+
+}
+.add-interface {
+  display: flex;
+  padding-top: 10px;
+  align-items: center;
+  >span {
+    text-align: right;
+    flex-shrink: 0;
+    flex-shrink: 0;
+    margin-right: 16px;
+  }
+
+    :deep(.el-input) {
+      width: 160px;
+      margin-right: 10px;
+    }
+
+}
+</style>
+<style lang="scss" scoped>
+.apis-checkbox__group {
+  .checkbox{
+    display: inline-block;
+    position: relative;
+    padding-right: 30px;
+    &:hover {
+      .delete {
+        display: inline;
+      }
+    }
+  }
+  .delete {
+    cursor: pointer;
+    position: absolute;
+    right: 12px;
+    top: 11px;
+    color: red;
+    display: none;
+    font-size: var(--epx-font-size-base);
+  }
+}
+.add-right {
+  max-height: 500px;
+  overflow: auto;
+}
+</style>
+<style lang="scss" scoped>
+.interface {
+  background: var(--epx-bg-card);
+}
+.interface-container {
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+.interface-title {
+  display: flex;
+  font-size: var(--epx-font-size-base);
+  justify-content: space-between;
+  align-items: center;
+  i{
+    @include font_color_primary;
+    margin-right: 6px;
+  }
+}
+.interface-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+}
+.interface-item {
+  font-size: var(--epx-font-size-base);
+  width: calc(25% - 20px);
+  height: 54px;
+  box-sizing: border-box;
+  padding: 0 20px;
+  margin:  10px;
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-base);
+  border: 1px solid var(--epx-border);
+  display: flex;
+  justify-content:space-between;
+  align-items: center;
+  .interface-edit {
+    @include font_color_primary;
+    margin-right: 12px;
+  }
+  .interface-delete {
+    color: var(--epx-text-secondary);
+  }
+}
+.interface-operate {
+  white-space: nowrap;
+  i {
+    cursor: pointer;
+  }
+}
+.form-item__title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  height: 48px;
+  border-bottom: 1px solid var(--epx-border);
+  span {
+    border-left: 4px solid;
+    @include border_color_primary;
+    padding-left: 8px;
+  }
+}
+.rule {
+  margin: 0 -12px;
+  margin-top: 20px;
+  border-top: 20px solid #F3F5FA;
+  background: var(--epx-bg-card);
+}
+.rule-edit {
+  cursor: pointer;
+  color: var(--epx-text);
+}
+.add-form__item {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  label {
+   margin-left: 12px;
+  }
+
+    :deep(.el-input) {
+      width: 220px;
+    }
+
+}
+.add-form__button {
+  margin-top: 40px;
+  text-align: center;
+}
+.api-type {
+  background: var(--epx-bg);
+  border-radius: var(--epx-radius-base);
+  margin-bottom: 16px;
+}
+.api-type__header {
+  height: 48px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--epx-border);
+}
+.api-type__title {
+  border-left: 4px solid;
+  @include border_color_primary;
+  font-size: var(--epx-font-size-l);
+  color: var(--epx-text);
+  padding-left: 8px;
+  line-height: 1;
+}
+.api-type__fold {
+  margin-left: 20px;
+  cursor: pointer;
+  color:var(--epx-text);
+  i {
+    margin-left: 4px;
+  }
+}
+.api-type__content {
+  padding: 10px 20px;
+
+    :deep(.el-checkbox) {
+      padding: 10px 0;
+      color: var(--epx-text);
+    }
+
+}
+</style>