epx-frame 3.5.0-shpgy.1

package/src/frame/packages/m-entity-list/MEntityList.vue

@@ -0,0 +1,1083 @@
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-m-entity-list',
+  mixins: [component],
+  addPageFlag: 'm_add',
+  addPage: 'm-entity-add-page',
+  detailFlag: true,
+  pageFlag: true,
+  limieSize: 0,
+  searchKeywordFlag: true,
+  showFilter: true,
+  operateColumnFlag: true, // 是否显示操作列
+  operateColumnEllipsis: 0,
+  // 操作按钮
+  // 操作列
+  // 多选操作按钮
+  style: {
+    margin: 0
+  },
+  props: {
+    pageType: String
+  },
+  data () {
+    return {
+      renderComponents: [this.renderSearch, this.renderList, this.renderMultiOperates],
+      activeDropDown: '',
+      listFields: [],
+      rows: [],
+      data: [],
+      loading: false,
+      searchScopeParams: [],
+      pageFlag: true,
+      currentPage: 1,
+      pageSize: 20,
+      total: null,
+      showPopover: {},
+      activeItem: {},
+      showCheckBox: false,
+      selections: [],
+      searchkeyParams: {}
+    }
+  },
+  computed: {
+    readonly () {
+      const { componentType = this.pageType } = this.$configs
+      return componentType === 'READONLY'
+    },
+    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
+    },
+    showMultiOperates () {
+      const { multiOperates = [] } = this.$configs
+      const showMultiOperates = multiOperates.filter(item => this.$checkOperateRight(item))
+      if (showMultiOperates.length > 2) showMultiOperates.length = 1
+      return showMultiOperates
+    },
+    moreMultiOperates () {
+      const { multiOperates = [] } = this.$configs
+      const showMultiOperates = multiOperates.filter(item => this.$checkOperateRight(item))
+      if (showMultiOperates.length > 2) {
+        showMultiOperates.splice(0, 1)
+        return showMultiOperates
+      }
+      return []
+    },
+    columnFields () {
+      const { iconField = [] } = this.$configs
+      return [...this.listFields, ...iconField].map(item => {
+        if (typeof item === 'string') return { attriName: item + '#' }
+
+        if (item.scopeParams) {
+          item.scopeParams = this.formatScope(item.scopeParams)
+        }
+        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
+          field.showWay = item.showWay || 'value'
+          field.separator = '、'
+        } 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 = item.scopeParams
+        }
+        return field
+      })
+    },
+    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
+    },
+    selectAll () {
+      return this.data.every(item => this.selections.includes(item[this.$metaKey]))
+    },
+    selection () {
+      return this.data.filter(item => this.selections.includes(item[this.$metaKey]))
+    }
+  },
+  methods: {
+    initComponent () {
+      this.getDefaultOperates()
+      this.getFields()
+    },
+    getDefaultOperates () {
+      const { addPage, columnOperates, multiOperates } = this.$configs
+
+      const defaultColumnOperates = [
+        {
+          text: this.$t('MultiSelect'),
+          handler: 'multiSelect'
+        },
+        {
+          text: this.$t('edit'),
+          handler: 'goPage',
+          num: 1,
+          component: addPage,
+          openMode: '3',
+          params: {
+            pageType: 'EDIT',
+            callback: '$[reloadData]'
+          }
+        },
+        {
+          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}]`
+          }
+        }
+      ]
+      const defaultMultiOperates = [
+        {
+          text: this.$t('delete'),
+          icon: 'el-icon-delete',
+          handler: 'commonAction',
+          action: 'removeMulti',
+          num: 'n',
+          confirmMsg: this.$t('Confirm the deletion') + '?',
+          successMsg: this.$t('deleted successfully'),
+          params: {
+            ids: `#[${this.$metaKey}]`
+          }
+
+        }
+      ]
+      if (!columnOperates) {
+        this.$set(this.$configs, 'columnOperates', defaultColumnOperates)
+      }
+      if (!multiOperates) {
+        this.$set(this.$configs, 'multiOperates', defaultMultiOperates)
+      }
+    },
+    // 获取字段配置，生成columns
+    getFields () {
+      let { fieldConfigs = {}, rows } = this.$configs
+      if (!rows) {
+        const label = this.$meta.getLabel()
+        if (label) {
+          rows = [[label]]
+        } else {
+          rows = []
+        }
+      }
+      // 获取rows
+      const fields = [].concat(...rows)
+      this.$FieldFactory.createFields({
+        defaultFieldConfigs: fieldConfigs,
+        fields: fields,
+        meta: this.$meta
+      })
+        .then(data => {
+          this.listFields = [...data]
+          const _columns = []
+          let _fields = []
+          this.rows = rows.map(row => {
+            return row.map(field => {
+              const item = data.find(item => item.attriName === (field.attriName || field))
+              if (item) return item
+              else return field
+            })
+          })
+          this.listFields.forEach(field => {
+            if (field.isWrap) {
+              _columns.push(_fields)
+              _fields = []
+            }
+            _fields.push(field)
+          })
+          if (_fields.length > 0) {
+            _columns.push(_fields)
+            _fields = []
+          }
+          this.columns = _columns
+          this.getData()
+        })
+        .catch(() => {
+          this.getData()
+        })
+    },
+    longpressFn (item, event) {
+      this.showCheckBox = true
+    },
+    multiSelect () {
+      this.showCheckBox = true
+    },
+    getData () {
+      // eslint-disable-next-line camelcase
+      let { queryParams = {}, pageFlag = true, orderFields, order_field: orderField = [], order_mode: orderMode = [], limitSize = 0 } = this.$configs
+      const params = {
+        action: 'list',
+        entityId: this.$metaId
+      }
+      params.columnFields = this.columnFields
+      if (pageFlag) {
+        params.page = this.currentPage
+        params.limit = limitSize !== 0 ? limitSize : this.pageSize
+      }
+      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
+      const submitParams = {
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.queryParams,
+        ...this.sortParams,
+        ...this.searchParams,
+        ...this.searchkeyParams,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(',')
+      }
+      if (this.scopeParams && this.scopeParams.length > 0) {
+        submitParams.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$http.list(submitParams)
+        .then(data => {
+          this.loading = false
+          this.total = data.total || data.entitys.length
+          if (pageFlag) {
+            this.currentPage++
+            this.data = [...this.data, ...data.entitys]
+          } else {
+            this.data = [...data.entitys]
+          }
+          this.$event.emit('setListData', { total: this.total, entitys: this.data })
+          if (this.afterData) this.afterData(this.data)
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+
+    $refesh () {
+      this.reloadData()
+    },
+    reloadData () {
+      this.currentPage = 1
+      this.showMultiOperates = false
+      this.showCheckBox = false
+      this.data = []
+      this.getData()
+    },
+    clickItem (item, event) {
+      event.stopPropagation()
+      if (this.showCheckBox) {
+        const index = this.selections.findIndex(id => item.ID === id)
+        if (index === -1) {
+          this.selections.push(item.ID)
+          this.$forceUpdate()
+        } else {
+          this.selections.splice(index, 1)
+        }
+      } else {
+        this.viewEntity(null, item)
+      }
+    },
+    viewEntity (config, item) {
+      const { detailPageFlag, addPageFlag, addPage, detailFlag, openMode, detailPageId, detailPageParams = {} } = this.$configs
+      if (!detailFlag) return
+      let key = 'ID'
+      if (this.$meta) {
+        key = this.$meta.getKey()
+      }
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      const _params = { ...detailPageParams }
+      const formatParams = {}
+      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) {
+            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 value = item[key]
+            return value
+          })
+        }
+        formatParams[key] = value
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: detailPageFlag || addPageFlag,
+        component: addPage,
+        pageType: 'DETAIL',
+        pageId: detailPageId,
+        id: item[key],
+        openType: openMode,
+        ...formatParams
+      }
+      if (this.$isMobile) delete query.openType
+      this.$createPage({
+        ...query
+      })
+    },
+    cancelMultiSelect () {
+      this.showCheckBox = false
+    },
+    renderListFooter () {
+      return (
+        <div>
+          { this.loading && <p class="loading"><i class="el-icon-loading"></i>{this.$t('Loading in...')}</p> }
+          { this.total != null && (this.total === this.data.length) && <p class="no-more">{this.$t('no more')}</p> }
+        </div>
+
+      )
+    },
+    showSearch (scopeParams) {
+      this.currentPage = 1
+      this.searchScopeParams = scopeParams.filter(item => {
+        return item.values
+      })
+      this.data = []
+      this.getDataThrottle()
+    },
+    changeSelectAll () {
+      if (!this.selectAll) {
+        this.selections = this.data.map(item => item.ID)
+      } else {
+        this.selections = []
+      }
+    },
+    clearSearch () {
+      if (this.$refs.searchFilter) this.$refs.searchFilter.clear()
+      if (this.$refs.searchKey) this.$refs.searchKey.clear()
+      this.currentPage = 1
+      this.showMultiOperates = false
+      this.showCheckBox = false
+      this.data = []
+    },
+    /**
+     * 去审核
+     */
+    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'))
+        })
+    },
+    // 关键词查询
+    renderKeywordSearch () {
+      const { searchKeywordFlag, keywords } = this.$configs
+      if (searchKeywordFlag) {
+        return (
+          <epx-m-search ref="searchKey" meta={this.$meta} fields={keywords}></epx-m-search>
+        )
+      }
+    },
+    renderFilter () {
+      const { showFilter, filterFields = [] } = this.$configs
+      if (showFilter && filterFields && filterFields.length > 0) {
+        return (
+          <epx-search-filter ref="searchFilter" onSearch={this.showSearch} showFilter={showFilter} filterFields={filterFields}></epx-search-filter>
+
+        )
+      }
+    },
+    renderSearch () {
+      const { searchKeywordFlag, showFilter, filterFields = [] } = this.$configs
+      if (!searchKeywordFlag && (!showFilter || !filterFields || filterFields.length === 0)) {
+        return null
+      }
+      return (
+        <div class="list-search">
+          { this.renderKeywordSearch() }
+          { this.renderFilter() }
+          <div class="m-search__bar">
+            <span class="m-search__record"> {this.$t('general')} {this.total} {this.$t('records')}</span>
+            <span class="m-search__clear" onClick={this.clearSearch.bind(this)}>
+              <i class="epx-icon-clear"></i>
+              {this.$t('empty filter')}
+            </span>
+          </div>
+        </div>
+      )
+    },
+    renderTotal () {
+      return (
+        <div class="m-search__bar">
+          <span class="m-search__record">{this.$t('general')}{this.total}{this.$t('records')}</span>
+          <span>
+            <i class="epx-icon-clear"></i>
+            {this.$t('empty filter')}
+          </span>
+        </div>
+      )
+    },
+    renderColumnOperates (item) {
+      const { operateColumnFlag } = this.$configs
+      if (this.readonly) return null
+      return (
+        <div class="list-item-extra" onClick={e => e.stopPropagation()}>
+          {
+            operateColumnFlag && this.columnOperates.length > 0 ? (
+              <el-dropdown trigger="click" onVisible-change={(show) => (this.activeDropDown = show ? item[this.$metaKey] : '')}>
+                <span class={['el-dropdown-link', { active: this.activeDropDown === item[this.$metaKey] }]}>
+                  <i class="el-icon-more"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  {
+                    this.columnOperates.map(operate => (
+                      <el-dropdown-item key={operate.text} nativeOnClick={this.$handler.bind(this, operate, item)} icon={operate.iconCls}>
+                        {operate.text}
+                      </el-dropdown-item>
+                    ))
+                  }
+                </el-dropdown-menu>
+              </el-dropdown>
+            ) : (
+              null
+              // <i class="el-icon-arrow-right"></i>
+            )
+          }
+        </div>
+      )
+    },
+    renderList () {
+      const { iconField = [], limieSize = 0, pageFlag = true } = this.$configs
+      let directives = []
+      if (limieSize === 0 && pageFlag && (!this.total || this.total > this.data.length)) {
+        directives = [
+          { name: 'infinite-scroll', value: this.getData }
+        ]
+      }
+      const longPressDirectives = item => [
+        { name: 'longpress', value: e => this.longpressFn(item, e) }
+      ]
+      const icon = iconField[0]
+      return (
+        <el-checkbox-group class="checkbox-group" vModel={this.selections}>
+          <ul
+            class="list"
+            ref="list"
+            {...{ directives }}
+            infinite-scroll-distance="10px"
+            infinite-scroll-disabled={this.data.length >= this.total}
+          >
+            {
+              this.data.map(item => (
+                <li key={item[this.$metaKey]}
+                  class="list-item"
+                  {...{ directives: longPressDirectives(item) }}
+                  onClick={this.clickItem.bind(this, item)}
+                >
+                  { this.showCheckBox && <el-checkbox label={item[this.$metaKey]} nativeOnClick={e => e.stopPropagation()}><span></span></el-checkbox>}
+                  <div class="list-item-content">
+                    {
+                      icon && (
+                        <p class="list-item-icon">
+                          { item[icon] && <img src={this.$util.getFileUrl(item[icon])} /> }
+                        </p>
+                      )
+                    }
+                    <div class="list-item-field">
+                      {
+                        this.rows.map(rowItem => {
+                          return (
+                            <p key={rowItem.map(item => item.attriName).join('')}>
+                              {
+                                rowItem.map((field, index) => {
+                                  if (field.state === 'HIDDEN') return null
+                                  let value = item[field.attriName + '#'] || item[field.attriName] || ''
+                                  if (field.type === 'meta') {
+                                    value = value.replaceAll('\n', ' , ')
+                                  }
+                                  const nextField = rowItem[index + 1]
+                                  let nextValue = null
+                                  if (nextField) {
+                                    nextValue = item[nextField.attriName + '#'] || nextField[field.attriName]
+                                  }
+                                  return <span>
+                                    { field.showLabel && (field.attriLabel + '：')}
+                                    { field.style === 'tag' && value ? (
+                                      <span class="field-tag">
+                                        <font style={{ color: field.color, fontWeight: field.fontWeight, fontSize: field.fontSize + 'px' }}>{value}</font>
+                                      </span>
+                                    ) : (
+                                      <font style={{ color: field.color, fontWeight: field.fontWeight, fontSize: field.fontSize + 'px' }}>{value}</font>
+                                    ) }
+                                    {index !== rowItem.length - 1 && value && (field.showLabel || nextValue) ? field.split || ' | ' : ''}
+                                  </span>
+                                })
+                              }
+                            </p>
+                          )
+                        })
+                      }
+                    </div>
+                  </div>
+                  {this.renderColumnOperates(item) }
+                </li>
+              ))
+            }
+            { this.renderListFooter() }
+          </ul>
+          {/** 多选操作 */}
+        </el-checkbox-group>
+      )
+    },
+    renderMultiOperates () {
+      if (this.showCheckBox && this.showMultiOperates) {
+        return (
+          <ul class="mulit-operates" onClick={e => e.stopPropagation()}>
+            <ul class="mulit-operates__default">
+              <li class="mulit-operate-item" >
+                <el-checkbox value={this.selectAll} onChange={this.changeSelectAll}><span></span></el-checkbox>
+                <span>{this.$t('check all')}</span>
+              </li>
+              <li class="mulit-operate-item" onClick={this.cancelMultiSelect}>
+                <span>{this.$t('cancel')}</span>
+              </li>
+            </ul>
+            <ul class="mulit-operates__configs">
+              {
+                this.showMultiOperates.map(item => (
+                  <li class="mulit-operate-item" onClick={this.$handler.bind(this, item, null)}>
+                    <i class={['fa', item.icon]} style={{ marginRight: '4px' }}></i>
+                    <span>{item.text}</span>
+                  </li>
+                ))
+              }
+              {
+                this.moreMultiOperates.length > 0 && (
+
+                  <el-dropdown trigger="click">
+                    <li class="mulit-operate-item">
+                      {this.$t('more')}
+                    </li>
+                    <el-dropdown-menu slot="dropdown">
+                      {
+                        this.moreMultiOperates.map(operate => (
+                          <el-dropdown-item key={operate.text} nativeOnClick={this.$handler.bind(this, operate, null)} icon={operate.icon}>
+                            {operate.text}
+                          </el-dropdown-item>
+                        ))
+                      }
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                )
+              }
+            </ul>
+
+          </ul>
+        )
+      }
+    }
+  },
+  created () {
+    this.getDataThrottle = this.$_.debounce(() => {
+      this.getData()
+    }, 200)
+
+    this.$event.on('searchKey', (scopeParams) => {
+      this.currentPage = 1
+      this.searchScopeParams = scopeParams
+      this.data = []
+      this.getDataThrottle()
+    })
+    this.$event.on('search-keyword', v => {
+      this.searchkeyParams = v
+      this.currentPage = 1
+      this.data = []
+      this.getDataThrottle()
+    })
+  },
+  render () {
+    return (
+      <div class={['container', { fold: this.isFold }]} style={this.$component.style}>
+        {
+          this.renderComponents.map(componentFn => componentFn())
+        }
+      </div>
+    )
+  }
+}
+</script>
+
+<style scoped lang="scss" >
+.container, .checkbox-group {
+  max-height: 100vh;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.container.fold {
+  .list-search {
+    display: none;
+  }
+  .checkbox-group {
+    display: none;
+  }
+  .form-title-fold__icon {
+    transform: rotate(180deg);
+  }
+}
+
+.checkbox-group {
+  flex: 1;
+  overflow: hidden;
+}
+
+.list {
+  height: 100%;
+  // background: #fff;
+  overflow: auto;
+  position: relative;
+  font-size: 16px;
+
+}
+.field-tag {
+  @include bg_color_primary(.1);
+  border: 1px solid ;
+  @include border_color_primary;
+  padding: 2px 6px;
+  border-radius: 4px;
+  >font {
+    @include font_color_primary;
+  }
+}
+
+/**移动端 */
+
+.mtable-container {
+  flex: 1;
+  flex-shrink: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .list {
+    overflow: auto;
+  }
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  position: relative;
+  border-color: #ebedf0;
+  padding: 6px 16px;
+  overflow: hidden;
+  user-select: none;
+  &:focus {
+
+    background: #999;
+  }
+  &::after {
+    position: absolute;
+    left: 20px;
+    bottom: 0;
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 1px;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 1px 0 0;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+  .list-item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    color: #666;
+    line-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .list-item-field {
+      flex: 1;
+      overflow: hidden;
+    }
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 1px 0;
+    }
+    p:first-child {
+      >font:first-child {
+        color: #333;
+      }
+    }
+  }
+  .list-item-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: #ccc;
+    margin-right: 8px;
+    flex-shrink: 0;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .list-item-extra {
+    font-size: 20px;
+    color: #999;
+    margin-left: 20px;
+    flex-shrink: 0;
+
+  }
+}
+
+.loading {
+  padding: 10px 0;
+  text-align: center;
+  @include font_color_primary;
+  i {
+    margin-right: 6px;
+  }
+}
+.no-more {
+  padding: 10px 0;
+  text-align: center;
+  color: 999;
+}
+.mtable-opera-bar {
+  flex-shrink: 0;
+  position: relative;
+  height: 44px;
+}
+.mtable-opera-bar-inner {
+  position: absolute;
+  z-index: 1;
+  background: #fff;
+  width: 100%;
+  height: 44px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  box-shadow: 0px 1px 3px rgba(0,0,0,.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .el-button--text {
+    padding: 0;
+  }
+  i {
+    margin-right: 4px;
+  }
+  font {
+    @include font_color_primary;
+  }
+  .mtable-select {
+    margin-right: 12px;
+    position: relative;
+    // &::after {
+    //   content: '';
+    //   display: block;
+    //   position: absolute;
+    //   right: -6px;
+    //   top: 50%;
+    //   width: 1px;
+    //   height: 16px;
+    //   margin-top: -8px;
+    //   background: #e3e3e3;
+    // }
+  }
+}
+.mtable-checkbox-group {
+  font-size: inherit;
+  &::v-deep {
+    .el-checkbox__label {
+      display: none;
+    }
+  }
+}
+.mtable-checkbox {
+  margin-right: 12px;
+}
+.mulit-operates {
+  display: flex;
+  justify-content: space-between;
+  background: #F2F3F7;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  line-height:50px;
+  box-shadow: 0 2px 5px rgba(0,0,0,.2);
+  z-index: 200;
+  >div {
+    flex: 1;
+  }
+}
+
+.mulit-operate-item {
+  display: inline-block;
+  width: 80px;
+  text-align: center;
+  >span {
+    color: #333;
+  }
+}
+.m-search__bar {
+  height: 48px;
+  padding: 0 12px;
+  background: #fff;
+  border-bottom: 1px solid #e3e3e3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.m-search__record {
+  color: #555
+}
+.m-search__clear {
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: 18px;
+  line-height: 36px;
+  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;
+  }
+}
+</style>