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

package/src/components/right/SystemInterfaceList.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="container">
+    <div class="list-operates" >
+      <div class="button-group" v-if="$configs.operateFlag && checkRightOperates.length > 0 ">
+        <template v-for="operate in operates" :key="operate.text">
+          <el-button size="default" :type="buttonUi(operate.ui)" @click="$handler(operate, null)">{{operate.text}}</el-button>
+        </template>
+      </div>
+      <el-input @change="getData(null)" style="width:200px" clearable v-model="searchText" placeholder="请输入对象编号、对象名称"></el-input>
+    </div>
+    <el-table
+        ref="multipleTable"
+        class="list-table no-border"
+        :data="tableData"
+        height="calc(100% - 128px)"
+        rowKey="entityId"
+        @select="selectionChange"
+        @select-all="selectionAll"
+        border
+        >
+        <el-table-column
+          type="selection"
+          width="55"
+          :reserve-selection="true"
+        >
+        </el-table-column>
+        <el-table-column
+            label="对象名称">
+            <template v-slot="scope">
+                {{scope.row.entityName}}（{{scope.row.entityCode}}）
+            </template>
+        </el-table-column>
+        <!-- <el-table-column
+            label="对象编号">
+            <template v-slot="scope">
+
+            </template>
+        </el-table-column> -->
+        <el-table-column
+            label="权限名称">
+            <template v-slot="scope">
+              <el-checkbox v-for="api in scope.row.apis" :key="api.apiId" :value="!!selectionList.find(item=>item.apiId===api.apiId)" :label="api.apiId" @change="checkApi( scope.row, api)">{{api.apiLabel}}</el-checkbox>
+            </template>
+        </el-table-column>
+        <el-table-column
+            label="操作"
+            width="150">
+            <template v-slot="scope">
+              <div class="column-operates">
+                <el-button type="primary" link @click="deleteAuthorizationRole(scope.row)">删除</el-button>
+              </div>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination
+        v-loading="loading"
+        :currentPage="currentPage"
+        :pageSizes="[5, 10, 15, 20, 30, 50, 100, 200]"
+        :pageSize="pageSize"
+        layout="prev, pager, next, jumper, sizes,total"
+        :total="total"
+        @size-change="sizeChange"
+        @current-change="currentChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import List from '@epxing/components/src/entity-list'
+export default {
+  name: 'epx-right-system-interface-list',
+  pageSize: 10,
+  operateEllipsis: 6,
+  extends: List,
+  computed: {
+    dataScope () {
+      return (scope) => {
+        if (scope) {
+          return JSON.parse(scope).scopeText
+        } else {
+          return '/'
+        }
+      }
+    },
+    fieldScope () {
+      return (scope) => {
+        if (scope) {
+          return JSON.parse(scope).fieldNames
+        } else {
+          return '/'
+        }
+      }
+    },
+    selection () {
+      console.log(this.selectionList)
+      return this.selectionList
+    }
+  },
+  data () {
+    return {
+      tableData: [],
+      searchText: '',
+      selectionList: []
+    }
+  },
+  methods: {
+    search (scopeParams) {
+      if (scopeParams) {
+        this.searchScopeParams = scopeParams
+      }
+    },
+    selectionAll (selection) {
+      if (selection.length === 0) {
+        this.selectionList = []
+      } else {
+        this.selectionList = [...this.tableData]
+      }
+    },
+    selectionChange (selection, row) {
+      console.log(selection, row)
+      const index = selection.findIndex(item => item.entityId === row.entityId)
+      if (index !== -1) {
+        // 删除所有的接口
+        this.selectionList = [...new Set([...this.selectionList, ...row.apis])]
+      } else {
+        row.apis.forEach(api => {
+          const apiIndex = this.selectionList.findIndex(item => item.apiId === api.apiId)
+          if (apiIndex !== -1) this.selectionList.splice(apiIndex, 1)
+        })
+      }
+
+      // 获取对象
+      // this.selection = [...selection]
+      // 选中对象下所有接口
+    },
+    checkApi (row, api) {
+      console.log(row, api)
+      const index = this.selectionList.findIndex(item => item.apiId === api.apiId)
+      const { apis: entityApis } = row
+      // 如果全选了，或者全取消  取消勾选
+      if (index !== -1) {
+        this.selectionList.splice(index, 1)
+        const flag = entityApis.some(api => !this.selectionList.find(item => item.apiId === api.apiId))
+        if (flag) this.$refs.multipleTable.toggleRowSelection(row, false)
+      } else {
+        this.selectionList.push(api)
+        const flag = entityApis.every(api => this.selectionList.find(item => item.apiId === api.apiId))
+        if (flag) {
+          this.$refs.multipleTable.toggleRowSelection(row, true)
+        }
+      }
+      console.log(this.selectionList)
+    },
+    // 添加操作接口
+    addApi () {
+      this.$createPage({
+        title: '添加操作权限',
+        component: 'authorization-add-no-api',
+        metaId: this.$metaId,
+        openType: '2',
+        roleId: this.$query.roleId,
+        systemId: this.$query.systemId,
+        systemType: this.$query.systemType
+      })
+    },
+    // 启用
+    // column删除
+    deleteAuthorizationRole (row) {
+      const id = row.apis.map(item => item.apiSystemId).join(',')
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: id
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.$refs.multipleTable.clearSelection()
+              this.selectionList = []
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+        .catch(() => {})
+    },
+    deleteRoleApis () {
+      if (this.selectionList.length === 0) {
+        this.$message.error('请至少选择一个记录')
+        return
+      }
+      const apiSystemIds = this.selectionList.map(item => item.apiSystemId).join(',')
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: apiSystemIds
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.$refs.multipleTable.clearSelection()
+              this.selectionList = []
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+        .catch(() => {})
+    },
+    // 设置字段范围
+    settingFieldScope () {
+      // console.log(this.selection)
+    },
+    getDefaultOperates () {
+      const { editPage, operates, columnOperates } = this.$configs
+      const defaultOperates = [
+        // {
+        //   text: '添加操作接口',
+        //   handler: 'addApi',
+        //   ui: 'primary'
+        // },
+        // {
+        //   text: '启用',
+        //   handler: 'startApi'
+        // },
+        // {
+        //   text: '停用',
+        //   handler: 'stopApi'
+        // },
+        // {
+        //   text: '设置数据范围',
+        //   handler: 'settingDataScope'
+        // },
+        // {
+        //   text: '设置字段范围',
+        //   handler: 'settingFieldScope'
+        // },
+        {
+          text: '删除',
+          handler: 'deleteRoleApis',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '？',
+          successMsg: '删除成功',
+          params: {
+            ids: `#[${this.$metaKey}]`
+          }
+        }
+      ]
+
+      const defaultColumnOperates = [
+        {
+          text: '编辑',
+          handler: 'goPage',
+          num: 1,
+          component: editPage,
+          openMode: '3',
+          params: {
+            callback: '$[getData]'
+          }
+        },
+        {
+          text: '删除',
+          handler: 'commonAction',
+          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
+      }
+    },
+    addAuthorization (row) {
+      if (row.apiId) {
+        this.$createPage({
+          flag: 'v_entity_api_authorization',
+          metaId: 'FM_ENTITY_RIGHT',
+          id: row.apiId,
+          pageType: 'DETAIL',
+          entityId: row.entityId
+        })
+      } else {
+        this.$message.error('该对象下没有接口')
+      }
+    },
+    // 合并行
+    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex <= 1) {
+        if (row.merge && row.apis.length > 0) {
+          return {
+            rowspan: row.apis.length,
+            colspan: 1
+          }
+        } else if (row.merge && row.apis.length === 0) {
+          return {
+            rowspan: 1,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+    },
+    getData (current, cb) {
+      // eslint-disable-next-line camelcase
+      let { queryParams = {}, pageFlag, orderFields, order_field: orderField = [], order_mode: orderMode = [], limit } = this.$configs
+      const params = {
+        action: 'getSystemLocalApiManagement',
+        systemId: this.$query.id,
+        entityId: this.$metaId,
+        searchText: this.searchText
+      }
+      const functionField = this.listFields.filter(item => {
+        return item.function
+      })
+      let functionList = []
+      if (functionField.length > 0) {
+        functionList = functionField.map(item => ({ dataIndex: item.attriName, function: item.function }))
+        params.fieldFunctions = JSON.stringify(functionList)
+      }
+      if (pageFlag) {
+        params.page = current || this.currentPage
+        params.limit = this.pageSize
+      }
+      if (limit) {
+        params.limit = limit
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+        orderMode = orderFields.map(item => item.sort || 'asc')
+      }
+      if (this.loading) return
+      this.loading = true
+
+      this.$http.list({
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.queryParams,
+        ...this.sortParams,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      })
+        .then(data => {
+          this.initData = true
+          this.loading = false
+          if (current) this.currentPage = current
+          // this.data = data.entitys ? [...data.entitys] : []
+          this.tableData = data.entitys
+          // this.data.forEach(element => {
+          //   if (element.apis.length > 0) {
+          //     element.apis.forEach((item, index) => {
+          //       this.tableData.push({ ...item, ...element, merge: index === 0 })
+          //     })
+          //   } else {
+          //     this.tableData.push({ ...element, merge: true })
+          //   }
+          // })
+          this.total = data.total || data.entitys.length
+          this.$bus.emit('refreshCount', { total: this.total, index: this.$query.componentIndex })
+          if (cb) cb(this.data)
+          this.$dispatchPage('listData', [{ total: this.total, entitys: this.data }])
+          this.$emit('listData', { total: this.total, entitys: this.data })
+          if (this.afterData) this.afterData(this.data)
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  height: 100%;
+  background: var(--epx-bg-card);
+  padding: 10px;
+}
+.list-operates {
+  padding: 6px 0 16px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.list-table {
+
+    :deep(.el-table__row.hover-row>td) {
+      background: none
+    }
+
+}
+.pagination {
+  padding-top: 10px;
+}
+</style>