epx-frame 3.5.0-shpgy.1

package/src/frame/packages/entity-list/EntityList.vue

@@ -0,0 +1,2105 @@
+<script>
+import component from '@/utils/mixins/component'
+import EditField from './components/EditField'
+export default {
+  name: 'epx-entity-list',
+  mixins: [component],
+  addPage: 'entity-add-page',
+  editPage: 'entity-edit-page',
+  detailPage: 'entity-detail-page',
+  addPageFlag: 'v_add',
+  detailPageFlag: 'v_add',
+  editPageFlag: 'v_add',
+  action: 'list',
+  detailFlag: true,
+  searchFlag: true,
+  showKeyword: true,
+  searchMode: 'keyword', // field filter keyword
+  showSearchLabel: false,
+  showFilter: true,
+  flag: true, // 是否显示
+  locked: true, // 是否锁定列表
+  border: false,
+  headerBorder: false,
+  titleFlag: true, // 是否需要标题
+  queryParams: {}, // 查询参数
+  listFields: null, // 查询字段
+  fieldConfigs: {}, // 字段配置
+  pageFlag: true, // 是否需要分页
+  pageSize: 20, // 每页记录数
+  operateEllipsis: 2,
+  operateFlag: true,
+  multiSelectColumnFlag: true, // 是否显示多选框列
+  serialColumnFlag: true, // 是否显示序号列
+  operateColumnFlag: true, // 是否显示操作列
+  totalFlag: true,
+  operateColumnWidth: 100, // 操作列宽度
+  operateColumnPosition: 'start', // 操作列位置
+  operateColumnLocked: false,
+  operateColumnEllipsis: 2, // Boolean/ Number,
+  sortable: true,
+  fixedTable: false,
+  components: {
+    [EditField.name]: EditField
+  },
+  props: {
+    queryParams: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    id: String,
+    popup: {
+      type: Boolean,
+      default: false
+    },
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  inject: ['upPage'],
+  computed: {
+    // 展示查询字段数量
+    showFieldNum () {
+      const { showFieldNum = 0 } = this.$configs
+      return showFieldNum
+    },
+    lockedIndex () {
+      const index = this.$_.findLastIndex(this.listFields, (item) => item.locked)
+      return index
+    },
+    readonly () {
+      const { pageType } = this.$query
+      const { componentType = pageType } = this.$configs
+      return componentType === 'READONLY'
+    },
+    selection () {
+      const selection = this.selectionIds.map(item => this.dataMap[item] || { [this.$metaKey]: item })
+      return selection
+    },
+    buttonUi () {
+      return ui => (ui === 'blue' || ui === 'soft-blue') ? 'primary' : ui
+    },
+    showFlag () {
+      return !this.$configs.showCondition || this.$configs.showCondition.length === 0 || this.$util.runExpByScope.call(this, this.$configs.showCondition, this.formData)
+    },
+    checkRightOperates () {
+      const { operates = [] } = this.$configs
+      return operates.filter(item => this.$checkOperateRight(item))
+    },
+    operates () {
+      const { operateEllipsis = 1 } = this.$configs
+      let showOperateLength = 0
+      if (operateEllipsis === false) return this.checkRightOperates
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.length = showOperateLength
+      }
+      return cOperates
+    },
+    moreOperates () {
+      const { operateEllipsis = 1 } = this.$configs
+      let showOperateLength = 0
+      if (operateEllipsis === false) return []
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...this.checkRightOperates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.splice(0, showOperateLength)
+        return cOperates
+      }
+      return []
+    },
+    columnOperates () {
+      const { columnOperates = [] } = this.$configs
+      return columnOperates.filter(item => this.$checkOperateRight(item))
+    },
+    foldColumnOperates () {
+      const { operateColumnEllipsis = true } = this.$configs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return []
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      if (this.columnOperates.length > showOperatesLength) {
+        const foldButtons = [...this.columnOperates]
+        if (showOperatesLength !== 0) foldButtons.splice(0, showOperatesLength)
+        return foldButtons
+      } else {
+        return []
+      }
+    },
+    unfoldColumnOperates () {
+      const { operateColumnEllipsis = true } = this.$configs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return this.columnOperates
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      const unfoldButtons = [...this.columnOperates]
+      if (showOperatesLength === 0) return []
+      if (unfoldButtons.length > showOperatesLength) unfoldButtons.length = showOperatesLength
+      return unfoldButtons
+    },
+    params () {
+      const { queryParams = {} } = this.$configs
+      const params = {
+        ...this.$formatParams(queryParams),
+        ...this.queryParams,
+        ...this.searchKeyParams
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      return params
+    },
+    scopeParams () {
+      const { scopeParams: configScopeParams = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$query
+      const scopeParams = []
+      if (typeof configScopeParams === 'object' && !Array.isArray(configScopeParams)) {
+        Object.entries(configScopeParams).forEach(([key, value]) => {
+          scopeParams.push({
+            field: key,
+            ...value
+          })
+        })
+      } else {
+        scopeParams.push(...configScopeParams)
+      }
+      if (typeof queryScopeParams === 'object' && !Array.isArray(queryScopeParams)) {
+        Object.entries(queryScopeParams).forEach(([key, value]) => {
+          scopeParams.push({
+            field: key,
+            ...value
+          })
+        })
+      } else {
+        scopeParams.push(...queryScopeParams)
+      }
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...scopeParams, ...this.searchScopeParams])
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || eval(`that.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    },
+    scopeParamsStr () {
+      return JSON.stringify(this.scopeParams)
+    },
+    columnFields () {
+      return this.listFields.map(item => {
+        if (typeof item === 'string') return { attriName: item + '#' }
+        if (item.orderFieds) {
+          item.orderFieds = item.orderFieds.map(item => {
+            if (typeof item === 'string') return { attriName: item }
+            return item
+          })
+        }
+        const field = { attriName: item.attriName }
+        if (item.type === 'meta') {
+          field.type = item.type
+          const showWay = item.function && item.function !== 'GROUP_CONCAT' ? 'statistics' : 'value'
+          field.showWay = item.showWay || showWay
+          if (item.function) field.statisticsType = item.function
+        } else {
+          field.attriName = item.attriName + '#'
+        }
+        if (item.showFieldNum) {
+          field.showFieldNum = item.showFieldNum
+        }
+        if (item.separator) {
+          field.separator = item.separator
+        }
+        if (item.fields && item.fields.length > 0) {
+          field.fields = item.fields.map(item => item + '#')
+        }
+        if (item.showFieldName) {
+          field.showFieldName = item.showFieldName
+        }
+        if (item.orderFieds) {
+          field.orderFieds = item.orderFieds
+        }
+        if (item.scopeParams) {
+          field.scopeParams = this.formatScope(item.scopeParams)
+        }
+        return field
+      })
+    },
+    fieldScope () {
+      const scope = {}
+      this.listFields.forEach(item => {
+        if (item.scopeParams) {
+          scope[item.attriName] = this.formatScope(item.scopeParams)
+        }
+      })
+      return scope
+    },
+
+    validScopeLength () {
+      let length = 0
+      this.searchScopeParams.forEach(item => {
+        if (item.values) {
+          length++
+        } else if (!item.values && (item.mode === 'is_null' || item.mode === 'not_null')) {
+          length++
+        }
+      })
+      return length
+    },
+    isSelectAll () {
+      const allData = []
+      const getAllData = (arr) => {
+        arr.forEach(item => {
+          allData.push(item)
+          if (item.children) {
+            getAllData(item.children)
+          }
+        })
+      }
+      getAllData(this.data)
+      if (allData.length === 0) return false
+      const flag = allData.every(item => this.selectionIds.includes(item[this.$metaKey]))
+      return flag
+    },
+    tableProps () {
+      const { config: pageConfigs = {} } = this.$pageInfo
+      const props = {}
+      if (this.$configs.fixedTable && pageConfigs.layout === 'flex') {
+        props.height = '100%'
+      }
+      return props
+    }
+
+  },
+  data () {
+    return {
+      renderComponents: [this.renderSearch, this.renderButtons, this.renderTable],
+      data: [],
+      listFields: [],
+      loading: false,
+      currentPage: 1,
+      pageSize: 20,
+      total: 0,
+      activeDropDown: '',
+      sortParams: {},
+      searchScopeParams: [],
+      searchKeyParams: {},
+      filterDrawer: false,
+      checkEntityWay: '',
+      editField: {},
+      selectionIds: [],
+      dataMap: {}
+    }
+  },
+  watch: {
+    params (v) {
+      if (!this.$_.isEqual(this.oldParams, v)) {
+        if (this.initData) {
+          this.currentPage = 1
+          this.reloadData()
+        }
+      }
+      this.oldParams = v
+    },
+    searchKeyParams (v) {
+      this.currentPage = 1
+      this.reloadData()
+    }
+  },
+
+  methods: {
+    initComponent () {
+      if (!this.showFlag) return
+      const { pageSize } = this.$configs
+      this.pageSize = Number(pageSize)
+      this.getDefaultOperates()
+      this.getFields()
+    },
+    getDefaultOperates () {
+      const { addPage, editPage, operates, columnOperates } = this.$configs
+      const defaultOperates = [
+        {
+          text: this.$t('add'),
+          handler: 'addEntity',
+          ui: 'primary',
+          component: addPage,
+          openMode: '3',
+          num: 0,
+          params: {
+            callback: '$[getData]'
+          }
+        },
+        {
+          text: this.$t('delete'),
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '?',
+          successMsg: this.$t('deleted successfully'),
+          params: {
+            ids: `#[${this.$metaKey}]`
+          }
+        },
+        {
+          text: this.$t('import'),
+          handler: 'goPage',
+          pageFlag: 'v_import',
+          component: 'import-page'
+        },
+        {
+          text: this.$t('export'),
+          handler: 'goPage',
+          pageFlag: 'v_export',
+          component: 'export-page',
+          params: {
+            selects: `#[${this.$metaKey}]`,
+            total: '$[total]',
+            params: '$[params]',
+            scopeParams: '$[scopeParams]',
+            fields: '$[listFields]'
+          }
+        }
+      ]
+
+      const defaultColumnOperates = [
+        {
+          text: this.$t('edit'),
+          handler: 'editEntity',
+          num: 1,
+          component: editPage,
+          openMode: '3',
+          params: {
+            callback: '$[getData]'
+          }
+        }
+        // {
+        //   text: '删除',
+        //   handler: 'commonAction',
+        //   action: 'removeMulti',
+        //   num: 'n',
+        //   confirmMsg: '确认删除？',
+        //   successMsg: '删除成功',
+        //   params: {
+        //     ids: `#[${this.$metaKey}]`
+        //   }
+        // }
+      ]
+      if (!operates) {
+        this.$set(this.$configs, 'operates', defaultOperates)
+      }
+      if (!columnOperates) {
+        this.$set(this.$configs, 'columnOperates', defaultColumnOperates)
+      }
+    },
+    $refesh () {
+      this.reloadData()
+    },
+    search (scopeParams) {
+      if (scopeParams) {
+        this.searchScopeParams = scopeParams
+      }
+    },
+    searchKeyword (searchKeyParams) {
+      this.searchKeyParams = searchKeyParams
+    },
+    getData (current, cb) {
+      let { metaViewId, queryParams = {}, pageFlag, orderFields, order_field: orderField = [], order_mode: orderMode = [], limit, action, isTree } = this.$configs
+      const params = {
+        action,
+        entityId: this.$metaId,
+        metaViewId
+      }
+      // if (fields.length > 0) {
+      //   params.columnFieldNames = fields.join('#,') + '#'
+      // }
+      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 && !isTree) {
+        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.sortParams && this.sortParams.sort) {
+        const { sort, order } = this.sortParams
+        orderField = [sort]
+        orderMode = [order]
+      }
+
+      if (this.loading) return
+      this.loading = true
+      const requestParams = {
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.searchKeyParams,
+        ...this.queryParams,
+        columnFields: this.columnFields,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      }
+      if (isTree) {
+        this.getTreeData(requestParams, cb)
+      } else {
+        this.$http.list(requestParams)
+          .then(data => {
+            this.initData = true
+            this.loading = false
+            if (current) this.currentPage = current
+            if (!data) return
+            this.data = [...data.entitys]
+            this.total = data.total || data.entitys.length
+            this.getAllDataMap(data.entitys)
+            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((err) => {
+            this.loading = false
+            this.$message.error(err.message)
+          })
+      }
+    },
+    getAllDataMap (data) {
+      const dataMap = { ...this.dataMap }
+      const setDataMap = (arr) => {
+        arr.forEach(item => {
+          dataMap[item[this.$metaKey]] = item
+          if (item.children) setDataMap(item.children)
+        })
+      }
+      setDataMap(data)
+      this.dataMap = dataMap
+    },
+    getTreeData (params, cb) {
+      const { treeField = [], action = 'listTree' } = this.$configs
+      let parentField = 'UP'
+      const { attributes = {}, id } = this.$meta || {}
+      const field = Object.values(attributes).find(item => item.relatedEntity === id)
+      if (field) parentField = field.name
+      this.$http.$post({
+        action,
+        parentField: treeField[0] || parentField,
+        ...params
+      })
+        .then(data => {
+          this.initData = true
+          this.loading = false
+          if (!data) return
+          this.data = [...data.entitys]
+          this.total = data.total || data.entitys.length
+          this.getAllDataMap(data.entitys)
+          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((err) => {
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    },
+    /**
+     * 重新加载数据
+     */
+    reloadData () {
+      this.getData(null, data => {
+        // 如果selection里没有 旧删除
+        const existSelection = []
+        const dataMap = {}
+        data.forEach(dataItem => {
+          dataMap[dataItem[this.$metaKey]] = dataItem
+        })
+        this.selectionIds.forEach(item => {
+          if (dataMap[item[this.$metaKey]]) existSelection.push(item[this.$metaKey])
+        })
+        if (!this.$_.isEqual(this.selectionIds, existSelection)) {
+          this.selectionIds = existSelection
+        }
+      })
+    },
+    getFields () {
+      const { role } = this.$route.params
+      this.$http.get({
+        action: 'getEntityRoleFieldScope',
+        entityId: 'FM_ROLE_FIELDSCOPE',
+        metaId: this.$metaId,
+        roleCode: role
+      })
+        .then(data => {
+          const { listFields, fieldConfigs = {} } = this.$configs
+          this.$FieldFactory.createFields({
+            defaultFieldConfigs: fieldConfigs,
+            fieldScope: data,
+            fields: listFields,
+            meta: this.$meta
+            // metaId: this.$metaId
+          })
+            .then(data => {
+              this.listFields = [...data]
+              this.getData()
+            })
+        })
+    },
+    currentChange (current) {
+      this.getData(current)
+    },
+    sizeChange (size) {
+      this.pageSize = size
+      this.getData()
+    },
+    selectAll (v) {
+      // 添加到所有id
+      const allData = []
+      const getAllData = (arr) => {
+        arr.forEach(item => {
+          allData.push(item)
+          if (item.children) {
+            getAllData(item.children)
+          }
+        })
+      }
+      getAllData(this.data)
+      if (this.isSelectAll) {
+        allData.forEach(item => {
+          const index = this.selectionIds.indexOf(item[this.$metaKey])
+          if (index !== -1) this.selectionIds.splice(index, 1)
+        })
+      } else {
+        this.selectionIds = [...new Set([...this.selectionIds, ...allData.map(item => item[this.$metaKey])])]
+      }
+    },
+    sortChange ({ column, prop, order }) {
+      if (order) {
+        this.sortParams = { sort: prop, order: order === 'ascending' ? 'asc' : 'desc' }
+      } else {
+        this.sortParams = {}
+      }
+
+      this.getData()
+    },
+    getShowColumnOperates (row) {
+      const columnOperates = this.columnOperates.filter(item => !item.showCondition || item.showCondition.length === 0 || this.$util.runExpByScope.call(this, item.showCondition, row))
+      return columnOperates
+    },
+    getFoldColumnOperates (columnOperates = this.columnOperates) {
+      const { operateColumnEllipsis = true } = this.$configs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return []
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      if (columnOperates.length > showOperatesLength) {
+        const foldButtons = [...columnOperates]
+        if (showOperatesLength !== 0) foldButtons.splice(0, showOperatesLength)
+        return foldButtons
+      } else {
+        return []
+      }
+    },
+    getUnFoldColumnOperates (columnOperates = this.columnOperates) {
+      const { operateColumnEllipsis = true } = this.$configs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return columnOperates
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      const unfoldButtons = [...columnOperates]
+      if (showOperatesLength === 0) return []
+      if (unfoldButtons.length > showOperatesLength) unfoldButtons.length = showOperatesLength
+      return unfoldButtons
+    },
+    formatScope (scopeParams) {
+      const _scopeParams = this.$_.cloneDeep(scopeParams)
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || eval(`that.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    },
+    addEntity (config = {}, item) {
+      const { addPage: metaPageId } = this.$meta
+      const { pageId = metaPageId } = config
+      this.goPage({ pageId, ...config }, item)
+    },
+    editEntity (config = {}, item) {
+      const { editPage: metaPageId } = this.$meta
+      const { pageId = metaPageId } = config
+      this.goPage({ pageId, ...config }, item)
+    },
+    clickCell (row, column, cell, e) {
+      e.stopPropagation()
+      const { editable } = this.$configs
+      const fieldConfigs = this.listFields.find(item => item.attriName === column.columnKey)
+      if (editable || (fieldConfigs && fieldConfigs.editable)) {
+        if (this.editField.rowId) {
+          this.updateField(() => {
+            this.editField = {
+              rowId: row.ID,
+              columnId: column.columnKey
+            }
+          })
+        } else {
+          this.editField = {
+            rowId: row.ID,
+            columnId: column.columnKey
+          }
+        }
+      }
+    },
+    clickField (field, row) {
+      const { detailPage } = this.$meta
+      const { detailPageId, codeKey } = field
+      const { isLabel } = field.attribute || {}
+      if (detailPageId) {
+        this.$createPage({
+          metaId: codeKey,
+          component: 'entity-add-page',
+          pageId: detailPageId || detailPage,
+          pageType: 'DETAIL',
+          id: row[field.attriName],
+          openType: '2'
+        })
+      } else if (field.isLabel || (isLabel === '1' && !field.attriName.includes('|'))) {
+        this.viewEntity({}, row)
+      }
+    },
+    changeField (v) {
+      this.$set(this.editField, 'changeData', v)
+    },
+    updateField (cb) {
+      const { rowId, changeData } = this.editField
+      if (!rowId) return
+      if (!changeData) {
+        this.editField = {}
+        return typeof cb === 'function' && cb()
+      }
+      const formData = {}
+      for (const key in changeData) {
+        if (!key.includes('#')) formData['bean.' + key] = changeData[key]
+      }
+      return this.$http.$post({
+        action: 'update', // 操作命令 list/ get id/ find/ update / save
+        entityId: this.$metaId, // 当前对象id
+        'bean.ID': rowId,
+        ...formData
+      })
+        .then(() => {
+          const rowIndex = this.data.findIndex(item => item.ID === rowId)
+          this.data.splice(rowIndex, 1, { ...this.data[rowIndex], ...changeData })
+          this.editField = {}
+          typeof cb === 'function' && cb()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    detailPage (item) {
+      this.viewEntity({}, item)
+    },
+    /**
+     * 页面跳转
+     * @param num 选中记录数(1,必须选中且只能选中一条记录；n：必须选中至少一条记录；0不需要选中记录)
+     * @param pageFlag 目标页面的标识符
+     * @param metaId 目标页面的对象
+     * @param openMode 打开方式
+     * @param params #[列表对象的某字段名]"，(如果是选中的多条记录，将字段值拼成一个字符串，用逗号隔开) "$[当前页面的某变量名]"
+     * @param comfirmMsg 操作提交之前的确认信息（如果为空，就不需要确认）
+     */
+    goPage ({ pageFlag, metaId = this.$metaId, num = 0, openMode = '3', component, pageId, menuId, pageType, confirmMsg = null, params = {} }, row) {
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      let selections = []
+      const formatParams = {}
+      const _params = { ...params }
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (selections.length === 0) {
+        if (num !== 0 && num !== '0') {
+          this.$message.error('请选择一个记录')
+          return
+        }
+      } else if (selections.length > 1) {
+        if (num === 1 || num === '1') {
+          this.$message.error('只能选择一个记录')
+          return
+        }
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || eval(`that.$tab.${valueKey}`) || ''
+          } catch (err) {
+            console.error(err)
+            value = ''
+          }
+        }
+        if (/#\{(.+)\}/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/#\{(.+)\}/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            console.error(err)
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = selections.map(item => item[key])
+            return values.join(',')
+          })
+        }
+        formatParams[key] = value
+      }
+      // 提交方法
+      const submitFn = () => {
+        this.$createPage({
+          flag: pageFlag,
+          metaId: metaId,
+          pageId,
+          menuId,
+          openType: openMode,
+          component,
+          pageType,
+          ...formatParams
+        })
+      }
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    viewEntity (config, item) {
+      const { detailPage: metaPageId } = this.$meta
+      const { detailPageFlag, detailPageId, addPageFlag, detailPage, detailFlag, openMode } = this.$configs
+      if (!detailFlag) return
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: detailPageFlag || addPageFlag,
+        component: detailPage,
+        pageId: detailPageId || metaPageId,
+        pageType: this.readonly ? 'READONLY' : 'DETAIL',
+        id: item[key],
+        openType: openMode
+      }
+      if (this.$isMobile) delete query.openType
+      this.$createPage({
+        ...query
+      })
+    },
+    removeEntity (config, row) {
+      this.deleteEntity(config, row)
+    },
+    deleteEntity (config, row) {
+      let ids = ''
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      if (row) {
+        ids = [row[key]]
+      } else {
+        if (this.selection.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        }
+        ids = this.selection.map(item => item[key])
+      }
+
+      this.$confirm(this.$t('Confirm the deletion') + '?')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: ids.join(',')
+          })
+            .then(() => {
+              this.$message.success(this.$t('deleted successfully'))
+              this.selectionIds = []
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || this.$t('Delete failed'))
+            })
+        })
+        .catch(() => {})
+    },
+    // 页面导出
+    entityExport () {
+      const { queryParams = {} } = this.$configs
+      const params = {
+        ...this.$formatParams(queryParams),
+        ...this.queryParams
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'export-page', // 默认模板 epx-export + component
+        flag: 'v_export',
+        selects: this.selection,
+        total: this.total,
+        params,
+        field: this.$meta.getExportFields()
+      })
+    },
+    // 批量编辑
+    editMultiEntity (config) {
+      const { params = {} } = config
+      const { queryParams = {} } = this.$configs
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'batch-edit', // 默认模板 epx-export + component
+        flag: 'v_batch_edit',
+        selects: this.selection,
+        total: this.total,
+        params: {
+          ...this.$formatParams(queryParams),
+          ...this.queryParams
+        },
+        ...params,
+        field: this.$meta.getExportFields()
+      })
+    },
+    // 页面导入
+    entityImport () {
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'import-page', // 默认模板 epx-export + component
+        flag: 'v_import',
+        meta: this.$meta
+      })
+    },
+    /**
+     * 去审核
+     */
+    goCheckPage (config, item) {
+      // 获取审核页面
+      const { params = {} } = config
+      const _params = { ...params }
+      const formatParams = {}
+      if (!item) {
+        if (this.selection.length > 1) {
+          this.$message.error(this.$t('Do not select multiple records'))
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        }
+        item = this.selection[0]
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = item[key]
+            return values
+          })
+        }
+        formatParams[key] = value
+      }
+      const { pageFlag, taskActivityId } = config
+      if (pageFlag) {
+        this.$createPage({
+          metaId: this.$metaId,
+          flag: pageFlag,
+          component: 'entity-check-page',
+          taskActivityId,
+          ...formatParams
+        })
+        return
+      }
+      this.$http.get({
+        action: 'getTaskPage',
+        entityId: 'ACT_RU_EXECUTION',
+        id: item[this.$metaKey]
+      })
+        .then(data => {
+          this.$createPage({
+            metaId: this.$metaId,
+            pageId: data.page,
+            pageType: 'DETAIL',
+            component: 'entity-check-page',
+            taskActivityId,
+            ...formatParams
+          })
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('deal with failure'))
+        })
+    },
+    checkEntity (operate, row) {
+      const { action = 'handleTask', destActivityId, params, num = 1, confirmMsg = '', successMsg = this.$t('handle a successful'), failMsg = this.$t('deal with failure') } = operate
+      const _params = { ...params }
+      const formatParams = {}
+      let selections = []
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (num !== 0 && num !== '0') {
+        if (selections.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        } else if (selections.length > 1) {
+          if (num === 1) {
+            this.$message.error(this.$t('Only one record can be selected'))
+            return
+          }
+        }
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = selections.map(item => item[key] || item)
+            return values.join(',')
+          })
+        }
+        formatParams[key] = value
+      }
+      const checkParams = {
+        action,
+        entityId: this.$metaId,
+        currentMetaId: this.$metaId,
+        id: this.$query.id,
+        destActivityId,
+        ...formatParams
+      }
+      const submitFn = () => {
+        if (this.isRequesting) return
+        this.isRequesting = true
+        this.$http.$request(checkParams)
+          .then(data => {
+            this.isRequesting = false
+            this.$message.success(successMsg)
+            this.reloadData()
+          })
+          .catch(err => {
+            this.isRequesting = false
+            this.$message.error(err.message || failMsg)
+          })
+      }
+      if (confirmMsg) {
+        this.$confirm(confirmMsg, this.$t('hint'), {
+          confirmButtonText: this.$t('determine'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          submitFn()
+        })
+      } else {
+        submitFn()
+      }
+    },
+    async getCheckOperateList (operate, id) {
+      const params = {
+        action: 'getTaskDestFlow',
+        entityId: 'ACT_RU_EXECUTION',
+        id: id,
+        currentMetaId: this.$metaId
+      }
+
+      return this.$http.get(params)
+        .then(data => {
+          return Promise.resolve(data.map(item => ({ ...operate, text: item.name || item.id, destActivityId: item.id })))
+        })
+        .catch(() => {
+          return Promise.resolve([])
+        })
+    },
+    async batchCheck (operate, row) {
+      const { action = 'batchHandleTask', params, num = 'n', successMsg = this.$t('handle a successful'), failMsg = this.$t('deal with failure') } = operate
+      const _params = { ...params }
+      const formatParams = {}
+      let selections = []
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (num !== 0 && num !== '0') {
+        if (selections.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        } else if (selections.length > 1) {
+          if (num === 1) {
+            this.$message.error(this.$t('Only one record can be selected'))
+            return
+          }
+        }
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      if (!_params.ids) {
+        _params.ids = `#[${this.$metaKey}]`
+      }
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = selections.map(item => item[key] || item)
+            return values.join(',')
+          })
+        }
+        formatParams[key] = value
+      }
+
+      const submitFn = async (destActivityId) => {
+        const checkParams = {
+          action,
+          entityId: this.$metaId,
+          currentMetaId: this.$metaId,
+          destActivityId,
+          ...formatParams
+        }
+        if (this.isRequesting) return
+        this.isRequesting = true
+        this.$http.$request(checkParams)
+          .then(data => {
+            this.isRequesting = false
+            this.$message.success(successMsg)
+            this.reloadData()
+          })
+          .catch(err => {
+            this.isRequesting = false
+            this.$message.error(err.message || failMsg)
+          })
+      }
+      const operates = await this.getCheckOperateList(operate, selections.map(item => item[this.$metaKey])[0])
+      this.$msgbox({
+        title: this.$t('please select the audit mode'),
+        message: this.renderCheckOperates(operates),
+        showCancelButton: true,
+        confirmButtonText: this.$t('determine'),
+        cancelButtonText: this.$t('cancel')
+      })
+        .then(() => {
+          submitFn(this.checkEntityWay)
+          this.checkEntityWay = null
+        })
+        .catch(() => {
+          this.checkEntityWay = null
+        })
+    },
+    renderCheckOperates (operates) {
+      const selectRadio = (item, e) => {
+        this.checkEntityWay = item.destActivityId
+        operates.forEach(operate => {
+          const radioRef = this.$refs['radio-' + operate.destActivityId]
+          if (radioRef) {
+            const radio = radioRef.$el
+            radio.querySelector('.el-radio__input').className = radio.querySelector('.el-radio__input').className.replace(/\sis-checked/g, '')
+          }
+        })
+        const radioRef = this.$refs['radio-' + item.destActivityId]
+        if (radioRef) {
+          const radio = radioRef.$el
+          radio.querySelector('.el-radio__input').className += ' is-checked'
+        }
+      }
+      return (
+        <div key={new Date().getTime()}>
+          {
+            operates.map(item => (
+              <el-radio ref={'radio-' + item.destActivityId} value={this.checkEntityWay === item.destActivityId} label={item.destActivityId} nativeOnClick={(e) => selectRadio(item, e)}>{item.text}</el-radio>
+            ))
+          }
+        </div>
+      )
+    },
+    applyEntity (buttonConfig, row) {
+      const { mask, num = 1, processCode, processNode = '', startNode, result = '1', action = 'apply', params, successMsg = this.$t('handle a successful'), failMsg = this.$t('deal with failure') } = buttonConfig
+      const _params = { ...params }
+      const formatParams = {}
+      let selections = []
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (num !== 0 && num !== '0') {
+        if (selections.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        } else if (selections.length > 1) {
+          if (num === 1) {
+            this.$message.error(this.$t('Only one record can be selected'))
+            return
+          }
+        }
+      }
+      if (!_params.id) {
+        _params.id = `#[${this.$metaKey}]`
+      }
+      // 格式化params
+      for (const key in _params) {
+        let value = _params[key]
+        if (/\$\[(.+)\]/.test(_params[key])) {
+          try {
+            const valueKey = _params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(_params[key])) {
+          value = _params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = selections.map(item => item[key] || item)
+            return values.join(',')
+          })
+        }
+        formatParams[key] = value
+      }
+      let queryParams = {
+        action,
+        entityId: this.$metaId,
+        processCode
+      }
+      if (processNode) {
+        queryParams.destActivityId = processNode
+      } else {
+        queryParams.startNode = startNode
+        queryParams.result = result
+      }
+      queryParams = { ...queryParams, ...formatParams }
+      if (this.isRequesting) return
+      this.isRequesting = true
+      let loading = null
+      if (mask) {
+        loading = this.$loading({
+          target: this.$el,
+          background: 'rgba(255, 255, 255, 0.5)',
+          text: this.$t('Operating, please wait...')
+        })
+      }
+      this.$http.apply({
+        ...params,
+        ...queryParams
+      }, {
+        requestKey: 'process'
+      })
+        .then(data => {
+          this.$message.success(successMsg)
+          this.isRequesting = false
+          if (loading) loading.close()
+          this.reloadData()
+        })
+        .catch(err => {
+          this.$message.error(err.message || failMsg)
+          this.isRequesting = false
+          if (loading) loading.close()
+        })
+    },
+    /**
+     * 通用打印
+     */
+    print ({ num = 0, printWay = 'custom', printCode = '', cptName = '', params = {}, ...props }, row) {
+      // 格式化params
+      let selections = []
+      const formatParams = {}
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (num !== 0 && num !== '0') {
+        if (selections.length === 0) {
+          this.$message.error(this.$t('please select a record'))
+          return
+        } else if (selections.length > 1) {
+          if (num === 1 || num === '1') {
+            this.$message.error(this.$t('Only one record can be selected'))
+            return
+          }
+        }
+      }
+      // 添加主键
+      if (!params.id) params.id = `#[${this.$metaKey}]`
+      for (const key in params) {
+        let value = params[key]
+        if (/\$\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/\$\[(.+)\]/, (match, key) => {
+            // eslint-disable-next-line no-eval
+            return eval(`that.${key}`) || eval(`that.$query.${key}`) || eval(`that.$tab.${key}`) || ''
+          })
+        }
+        if (/#\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = selections.map(item => item[key])
+            return values.join(',')
+          })
+        }
+        formatParams[key] = value
+      }
+      if (printWay === 'fine') {
+        const ids = selections.map(item => `'${item[this.$metaKey]}'`)
+        formatParams.id = ids.join(',')
+        this.fineReportPrint(cptName, formatParams)
+      } else {
+        this.customReportPrint(printCode, formatParams, props)
+      }
+    },
+    /**
+     * 自定义报表打印方法
+     * @param {String} code 报表编号
+     * @param {Object} params 参数
+     */
+    customReportPrint (code, params, props) {
+      this.$http.find({
+        entityId: 'FM_FORM',
+        'scope.CODE': code
+      })
+        .then(data => {
+          const { NAME, TYPE } = data.data
+          if (TYPE === 'excelReport') {
+            this.$createPage({
+              component: props.printPage || 'excel-preview',
+              name: NAME,
+              code,
+              params,
+              showDownload: props.showDownload
+            })
+          } else {
+            this.$http.$post({
+              action: 'exportPdf',
+              querySystem: this.appConfig.SYSTEM,
+              entityId: 'FM_FORM',
+              code,
+              ...params
+            }, {
+              responseType: 'blob'
+            })
+              .then(({ blob }) => {
+                const url = window.URL.createObjectURL(blob, { type: 'application/pdf' })
+                window.open(url)
+              })
+              .catch(err => {
+                this.$message.error(err.message)
+              })
+          }
+        })
+    },
+    fineReportPrint (cptName, params) {
+      const rootPath = this.$util.getAbsPath('/ReportServer')
+      let query = `&reportlet=com.epxing.frame.core.report.ReportReader&__bypagesize__=false&cptname=${cptName}`
+      for (const key in params) {
+        query += '&' + key + '=' + params[key]
+      }
+
+      window.open(rootPath + query)
+    },
+    /**
+       * 打印方法
+       * @param {String} cptName 报表编号
+       * @param {Object} 参数
+       * @param {Object} item 当前选中的数据
+       */
+    simplePrintFromColumn ({ cptName, params }, item) {
+      const rootPath = this.$util.getAbsPath('/ReportServer')
+      let query = `&reportlet=com.commons.ReportReader&__bypagesize__=false&cptname=${cptName}`
+      params.forEach(param => {
+        query += `&${param.name}=${item[param.valueField]}`
+      })
+      window.open(rootPath + query)
+    },
+    /**
+     * 帆软报表打印
+     */
+    simplePrint ({ cptName, params }, row) {
+      const rootPath = this.$util.getAbsPath('/ReportServer')
+      let query = `&reportlet=com.epxing.frame.core.report.ReportReader&__bypagesize__=false&cptname=${cptName}`
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      const formatParams = {}
+      let selections = []
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (selections.length === 0) {
+        this.$message.error(this.$t('please select a record'))
+        return
+      }
+      // if (!params.id) {
+      // params.id = `#[${this.$metaKey}]`
+      // }
+
+      // 格式化params
+      for (const key in params) {
+        let value = params[key]
+        if (/\$\[(.+)\]/.test(params[key])) {
+          try {
+            const valueKey = params[key].replace(/\$\[(.+)\]/, (match, key) => key)
+            // eslint-disable-next-line no-eval
+            value = eval(`that.${valueKey}`) || eval(`that.$query.${valueKey}`) || ''
+          } catch (err) {
+            value = ''
+          }
+        }
+        if (/#\[(.+)\]/.test(params[key])) {
+          value = params[key].replace(/#\[(.+)\]/, (match, key) => {
+            const values = selections.map(item => item[key] || item)
+            return values.join(',')
+          })
+        }
+        formatParams[key] = value
+      }
+      const ids = selections.map(item => `'${item[this.$metaKey]}'`)
+      formatParams.id = ids.join(',')
+      for (const key in formatParams) {
+        query += '&' + key + '=' + formatParams[key]
+      }
+      window.open(rootPath + query)
+    },
+    renderField (field) {
+      return {
+        scopedSlots: {
+          default: ({ row }) => <epx-entity-list-edit-field fieldConfigs={field} row={row} onClick={this.clickField.bind(this)} onChange={this.changeField.bind(this)} isEdit={this.editField.rowId === row.ID && this.editField.columnId === field.attriName} />
+        }
+      }
+    },
+    renderColumnOperates () {
+      return {
+        scopedSlots: {
+          default: ({ row }) => {
+            const showColumnOperates = this.getShowColumnOperates(row)
+            const foldColumnOperates = this.getFoldColumnOperates(showColumnOperates)
+            const unfoldColumnOperates = this.getUnFoldColumnOperates(showColumnOperates)
+            return (
+              <div class="column-operates">
+                {
+                  unfoldColumnOperates.map(operate => {
+                    return (
+                      <el-button
+                        class="column-operate-btn"
+                        key={operate.text}
+                        type="text"
+                        size="small"
+                        onClick={this.$handler.bind(this, operate, row)}
+                      >
+                        { operate.iconCls && <i class={operate.iconCls}></i>}
+                        {operate.text}
+                      </el-button>
+                    )
+                  })
+                }
+                {
+                  foldColumnOperates.length > 0 && (
+                    <el-dropdown trigger="click" onVisible-change={(show) => (this.activeDropDown = show ? row[this.$pageMetaKey] : '')}>
+                      <span class={['el-dropdown-link', { active: this.activeDropDown === row[this.$pageMetaKey] }]}>
+                        <i class="el-icon-more"></i>
+                      </span>
+                      <el-dropdown-menu slot="dropdown">
+                        {
+                          foldColumnOperates.map(operate => {
+                            return (
+                              <el-dropdown-item key={operate.text} nativeOnClick={this.$handler.bind(this, operate, row)} icon={operate.iconCls}>
+                                {operate.text}
+                              </el-dropdown-item>
+                            )
+                          })
+                        }
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  )
+                }
+              </div>
+            )
+          }
+        }
+      }
+    },
+    renderButtons () {
+      const { operateFlag, searchFlag, searchMode, showFilter, filterFields, keywords, totalFlag, showKeyword } = this.$configs
+      const showOperate = operateFlag && this.checkRightOperates.length > 0
+      const showKeyWordSearch = searchFlag && searchMode === 'keyword' && showKeyword
+      if (this.readonly || (!showOperate && !showKeyWordSearch && !totalFlag)) return
+      return (
+        <div class="list-operates" >
+          <div>
+            { operateFlag && this.checkRightOperates.length > 0 &&
+              <div class="button-group">
+                {
+                  this.operates.map(operate => {
+                    if (operate.operateType === 'dropdown') {
+                      return (
+                        <el-dropdown class="more-table-operates">
+                          <el-button size="medium" key={operate.text} type={this.buttonUi(operate.ui)}>
+                            { operate.icon && <i class={['operate-icon', operate.icon]}></i>}
+                            {operate.text}
+                            <i class="el-icon-arrow-down el-icon--right"></i>
+                          </el-button>
+                          <el-dropdown-menu slot="dropdown">
+                            {
+                              operate.operates.map(item => (
+                                <el-dropdown-item key={item.key} nativeOnClick={this.$handler.bind(this, item, null)}>{item.text}</el-dropdown-item>
+                              ))
+                            }
+                          </el-dropdown-menu>
+                        </el-dropdown>
+                      )
+                    }
+                    return (
+                      <el-button size="medium" key={operate.text} type={this.buttonUi(operate.ui)} onClick={this.$handler.bind(this, operate, null)}>
+                        { operate.icon && <i class={['operate-icon', operate.icon]}></i>}
+                        {operate.text}
+                      </el-button>
+                    )
+                  })
+                }
+                {
+                  this.moreOperates.length > 0 && (
+                    <el-dropdown class="more-table-operates" trigger="click">
+                      <el-button size="medium">
+                        <i class="el-icon-more"></i>
+                      </el-button>
+                      <el-dropdown-menu slot="dropdown">
+                        {
+                          this.moreOperates.map(operate => (
+                            <el-dropdown-item key={operate.text} nativeOnClick={this.$handler.bind(this, operate, null)}>{operate.text}</el-dropdown-item>
+
+                          ))
+                        }
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  )
+                }
+              </div>
+            }
+          </div>
+          {
+            searchFlag && searchMode === 'keyword' && showKeyword ? (
+              <div class="search-simple fr">
+                <epx-search-keyword vModel={this.searchKeyParams} meta={this.$meta} metaId={this.$metaId} keywords={keywords}></epx-search-keyword>
+                { showFilter && (
+                  <span>
+                    <el-button style={{ marginLeft: '8px' }} type="text" onClick={() => (this.filterDrawer = true)}>
+                      <el-tooltip class="item" effect="dark" content={this.$t('advanced filter')} placement="top">
+                        <i class="epx-icon-filter" ></i>{this.searchScopeParams.length > 0 ? `（${this.validScopeLength}）` : ''}
+                      </el-tooltip>
+                    </el-button>
+                    <epx-scope-drawer visible={this.filterDrawer} {...{ on: { 'update:visible': v => (this.filterDrawer = v) } }} metaId={this.$metaId} metaViewId={this.$configs.metaViewId} ref="filterDrawer" vModel={this.searchScopeParams} filterFields={filterFields}/>
+                  </span>
+                )}
+              </div>
+            ) : totalFlag ? (
+              <span >{this.$t('general')}{this.total}{this.$t('data')}</span>
+            ) : null
+          }
+        </div>
+      )
+    },
+    // 查询组件
+    renderSearch () {
+      const { searchFlag, searchMode, showKeyword, searchFields, filterFields, keywords, showFilter, showSearchLabel } = this.$configs
+      if (!searchFlag) return null
+      if (searchMode === 'field') {
+        return (
+          <epx-search-fields metaId={this.$metaId} metaViewId={this.$configs.metaViewId} showKeyword={showKeyword} fields={searchFields} showFilter={showFilter} showSearchLabel={showSearchLabel} filterFields={filterFields} keywords={keywords} onSearch={this.search.bind(this)} onSearch-keyword={this.searchKeyword.bind(this)}></epx-search-fields>
+        )
+      } else if (searchMode === 'filter') {
+        return (
+          <epx-search-filter metaViewId={this.$configs.metaViewId} metaId={this.$metaId} showKeyword={showKeyword} fields={searchFields} showFilter={showFilter} filterFields={filterFields} keywords={keywords} onSearch={this.search.bind(this)} onSearch-keyword={this.searchKeyword.bind(this)}></epx-search-filter>
+        )
+      }
+    },
+    renderTable () {
+      const { pageFlag, operateColumnFlag, operateColumnWidth, operateColumnPosition, operateColumnLocked, multiSelectColumnFlag, serialColumnFlag, columnOperates = [], sortable, border, headerBorder, isTree, stripe = true } = this.$configs
+      return (
+        <div class="table">
+          <el-checkbox-group class="table-checkbox-group" vModel={this.selectionIds}>
+            <el-table
+              v-loading={this.loading}
+              class={{ 'list-table': true, 'no-border': !border, 'header-border': border && headerBorder }}
+              ref="table"
+              rowKey={this.$metaKey}
+              stripe={stripe}
+              fit={true} // !this.popup
+              tree-props={{ children: 'children', hasChildren: 'hasChildren' }}
+              border
+              data={this.data}
+              onRow-dblclick={v => this.viewEntity({}, v)}
+              onCell-click={this.clickCell}
+              onSort-change={this.sortChange}
+              { ...{ props: this.tableProps } }
+            >
+              {/* 选择列 */}
+              {
+                multiSelectColumnFlag && (
+                  <el-table-column
+                    type="index"
+                    width="55"
+                    reserve-selection={true}
+                    fixed={!this.popup}
+                    scopedSlots={{
+                      default: ({ row }) => <el-checkbox label={row[this.$metaKey]} ><span></span></el-checkbox>,
+                      header: () => <label class={{ 'el-checkbox': true, 'is-checked': this.isSelectAll }} ><span class={{ 'el-checkbox__input': true, 'is-checked': this.isSelectAll }}><span class="el-checkbox__inner" onClick={this.selectAll}></span><input type="checkbox" class="el-checkbox__original"/></span></label>
+                    }}
+                  >
+                  </el-table-column>
+                )
+              }
+              {/* 序号列 */}
+              {
+                serialColumnFlag && (
+                  <el-table-column
+                    width="55"
+                    label={this.$t('numerical order')}
+                    type="index"
+                    index={index => (this.currentPage - 1) * this.pageSize + index + 1}
+                    fixed={this.lockedIndex !== -1}
+                  >
+                  </el-table-column>
+                )
+              }
+              {/* 操作列 */}
+              {
+                !this.readonly && operateColumnFlag !== false && columnOperates.length > 0 && operateColumnPosition !== 'end' && (
+                  <el-table-column class-name="operate-column__cell" width={operateColumnWidth} fixed={operateColumnLocked || this.lockedIndex !== -1 ? 'left' : false} label={this.$t('operation')} { ...this.renderColumnOperates() }></el-table-column>
+                )
+              }
+              {
+                this.listFields.map((field, index) => {
+                  if (field.state !== 'HIDDEN') {
+                    return (
+                      <el-table-column column-key={field.attriName} prop={field.attriName} {...field} min-width={field.width || 120} sortable={sortable ? 'custom' : false} resizable show-overflow-tooltip label={field.attriLabel} fixed={index <= this.lockedIndex}
+                        { ...this.renderField(field) }>
+
+                      </el-table-column>
+                    )
+                  }
+                })
+              }
+              {/* 操作列 */}
+              {
+                !this.readonly && operateColumnFlag !== false && columnOperates.length > 0 && operateColumnPosition === 'end' && (
+                  <el-table-column width={operateColumnWidth} fixed={operateColumnLocked ? 'right' : false} label={this.$t('operation')} { ...this.renderColumnOperates() }></el-table-column>
+                )
+              }
+            </el-table>
+          </el-checkbox-group>
+          {/* 分页 */}
+          {
+            pageFlag && !isTree && (
+              <div class="pagination">
+                <el-pagination
+                  currentPage={this.currentPage}
+                  pageSizes={[5, 10, 15, 20, 30, 50, 100, 200, 500, 1000]}
+                  pageSize={this.pageSize}
+                  layout="prev, pager, next, jumper, sizes,total"
+                  total={this.total}
+                  onSize-change={this.sizeChange}
+                  onCurrent-change={this.currentChange}
+                >
+                </el-pagination>
+              </div>
+            )
+          }
+        </div>
+      )
+    },
+    tableHeaderFxiedListener (event) {
+      const scrollEl = event.target
+      const table = this.$refs.table.$el
+      const tableHeader = table.querySelector('.el-table__header-wrapper')
+      const tableBody = table.querySelector('.el-table__body-wrapper')
+      const tableFixed = table.querySelector('.el-table__fixed')
+      let tableFixedHeader = null
+      if (tableFixed) {
+        tableFixedHeader = tableFixed.querySelector('.el-table__fixed-header-wrapper')
+      }
+      const tableTop = table.getBoundingClientRect().top
+      const top = scrollEl.getBoundingClientRect().top
+      if (tableTop <= top) {
+        // 表头
+        if (!this.copyTableHeader) {
+          setTimeout(() => {
+            this.copyTableHeader = tableHeader.cloneNode(true)
+            this.copyTableHeader.className += ' el-table__header-wrapper-copy'
+            this.copyTableHeader.style = 'position:fixed;top: 60px;z-index:4;background:#fff;margin-left: -12px;padding-left: 12px;width:' + tableHeader.offsetWidth + 'px'
+            if (tableFixedHeader) {
+              tableFixedHeader.className += ' el-table__fixed-header-wrapper-copy'
+              tableFixedHeader.style = 'position:fixed;top: 60px;z-index:5;left: auto;overflow: hidden;width:' + tableFixed.offsetWidth + 'px'
+            }
+            try {
+              table.insertBefore(this.copyTableHeader, tableHeader)
+            } catch (error) {}
+          }, 0)
+        }
+        setTimeout(() => {
+          const tableHeaderChildren = this.copyTableHeader.children[0]
+          tableHeaderChildren.style.transform = `translate(-${tableBody.scrollLeft}px)`
+        }, 10)
+      } else {
+        // 移除悬浮样式
+        if (tableFixedHeader) {
+          tableFixedHeader.className = 'el-table__fixed-header-wrapper'
+          tableFixedHeader.style = ''
+        }
+
+        const copyTableHeaderElements = document.querySelectorAll('.el-table__header-wrapper-copy')
+        for (let i = 0; i < copyTableHeaderElements.length; i++) {
+          const element = copyTableHeaderElements[i]
+          try {
+            table.removeChild(element)
+          } catch (error) {
+
+          }
+        }
+        this.copyTableHeader = null
+      }
+    },
+    tableBodyScrollListener () {
+      const tableBody = this.$refs.list.querySelector('.el-table__body-wrapper')
+      if (this.copyTableHeader) {
+        const tableFixed = this.copyTableHeader.children[0]
+        tableFixed.style.transform = `translate(-${tableBody.scrollLeft}px)`
+      }
+    },
+    containerClick () {
+      this.editField = {}
+    }
+  },
+  render () {
+    if (this.showFlag) {
+      return (
+        <div ref="list" class={['list-container', { fold: this.isFold }, { 'list-container--fixed': this.$configs.fixedTable }]} style={this.$component.style} >
+          {
+            this.renderComponents.map(componentFn => componentFn())
+          }
+        </div>
+      )
+    }
+    return null
+  },
+  mounted () {
+    if (this.upPage) {
+      const scrollEl = this.upPage.$el
+      this.copyTableHeader = null
+      scrollEl.addEventListener('scroll', this.tableHeaderFxiedListener)
+      if (this.$refs.list) {
+        const tableBody = this.$refs.list.querySelector('.el-table__body-wrapper')
+        if (tableBody) tableBody.addEventListener('scroll', this.tableBodyScrollListener)
+      }
+    }
+    window.addEventListener('click', this.updateField)
+    this.$event.on('search', (scopeParams) => {
+      this.search(scopeParams)
+    })
+    this.$event.on('search-keyword', (searchKeyParams) => {
+      this.searchKeyParams = searchKeyParams
+      this.search()
+    })
+    this.$event.on('get-data', (...props) => {
+      this.getData(...props)
+    })
+    /**
+     * 更新数据
+     */
+    // this.$on('getData', (scopeParams) => {
+    //   this.search(scopeParams)
+    // })
+  },
+  beforeDestroy () {
+    if (this.upPage) {
+      const scrollEl = this.upPage.$el
+      const tableBody = this.$refs.list.querySelector('.el-table__body-wrapper')
+      this.copyTableHeader = null
+      scrollEl.removeEventListener('scroll', this.tableHeaderFxiedListener)
+      if (tableBody) tableBody.removeEventListener('scroll', this.tableBodyScrollListener)
+    }
+    window.removeEventListener('click', this.updateField)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$paddingSize: 16px;
+.list-container {
+  overflow: auto;
+  &.fold {
+    .list-operates {
+      display: none;
+    }
+    .list-table {
+      display: none;
+    }
+    .form-title-fold__icon {
+      transform: rotate(180deg);
+    }
+    .list-note-container {
+      display: none;
+    }
+  }
+  &::v-deep {
+    .el-table__header-wrapper-copy, .el-table__fixed-header-wrapper-copy {
+      .caret-wrapper {
+        opacity: 0;
+      }
+    }
+    .operate-column__cell {
+      .cell {
+        display: flex;
+        align-items: center;
+        .el-table__placeholder {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+  &.list-container--fixed {
+    display: flex;
+    flex-direction: column;
+    .table {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .table-checkbox-group {
+      flex: 1;
+      overflow: auto;
+    }
+    .list-table {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+}
+
+.search-simple {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.list-table {
+  background: #fff;
+  // padding:0 12px;
+   // 无边框
+  &.no-border {
+    border: 0;
+    border-top: dashed 1px #e3e3e3;
+    &::after {
+      display: none
+    }
+    ::v-deep {
+      th.is-leaf, td {
+       border-right: 0
+      }
+    }
+  }
+}
+.header-border{
+  ::v-deep{
+    td {
+       border-right: 0;
+      }
+  }
+}
+.is-label {
+  @include font_color_primary;
+  cursor: pointer;
+}
+.list-operates {
+  background: #fff;
+  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 {
+    padding: 4px 0;
+  }
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid #e3e3e3;
+    }
+  }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  float: left;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  line-height: 30px;
+  overflow: hidden;
+   border: 0;
+  outline: none;
+  margin-left: 6px;
+  &.active {
+    @include bg_color_primary( 0.1);
+  }
+}
+
+.operate-icon {
+  margin-right: 4px;
+}
+
+.column-operate-btn {
+  font-size: 16px;
+}
+.pagination {
+  background: #fff;
+  padding: $paddingSize 0;
+  ::v-deep{
+    .el-select  {
+      margin-left: 24px;
+    }
+    .el-pagination__total {
+      float: right;
+    }
+  }
+}
+.field__photo {
+  &::v-deep {
+    .el-avatar {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      display: block;
+      >img {
+        width: 100%
+      }
+    }
+  }
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: 18px;
+  line-height: 36px;
+  white-space: pre-wrap;
+  background: #fff;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: #e3e3e3;
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: 20px;
+    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: 16px;
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.list-note-container {
+  background: #fff;
+  padding: 12px 10px 0;
+}
+.form-note {
+  @include bg_color_primary(.2);
+  @include border_color_primary;
+  @include font_color_primary;
+  border: 1px dashed;
+  padding: 8px 12px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  display: flex;
+  align-items: center;
+  >i {
+    margin-right: 8px;
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+}
+</style>