epx-frame 3.5.0-shpgy.1

package/src/frame/views/List.vue

@@ -0,0 +1,955 @@
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'epx-list-page',
+  detailFlag: true, // 能否打开详情页
+  searchFlag: true, // 是否显示查询区域
+  searchMode: 'multiField', // 简单查询模式
+  addPage: 'add',
+  addPageFlag: 'v_add',
+  detailPageFlag: 'v_add',
+  editPageFlag: 'v_add',
+  // 查询区域
+  searchConfigs: {
+    mode: 'keywords', // mode:'keywords(关键字查询,默认) | select(选项式查询) | fields(字段组合查询)'
+    flag: true, // 是否显示
+    showFieldNum: 0,
+    searchType: 'inline',
+    collapsible: true, // 是否可以隐藏
+    title: '筛选条件',
+    searchMode: 'simple'
+  },
+  filterConfigs: {
+    flag: true // 是否显示
+  },
+  // 列表区域
+  listConfigs: {
+    flag: true, // 是否显示
+    locked: true, // 是否锁定列表
+    titleFlag: true, // 是否需要标题
+    queryParams: {}, // 查询参数
+    listFields: null, // 查询字段
+    fieldConfigs: {}, // 字段配置
+    pageFlag: true, // 是否需要分页
+    pageSize: 20, // 每页记录数
+    operateEllipsis: 1,
+    operateFlag: true,
+    multiSelectColumnFlag: true, // 是否显示多选框列
+    serialColumnFlag: true, // 是否显示序号列
+    operateColumnFlag: true, // 是否显示操作列
+    operateColumnWidth: 100, // 操作列宽度
+    operateColumnPosition: 'start', // 操作列位置
+    operateColumnLocked: false,
+    operateColumnEllipsis: true, // Boolean/ Number,
+    sortable: true,
+    columnOperates: [{
+      text: '编辑',
+      handler: 'editEntity'
+    },
+    {
+      text: '删除',
+      handler: 'removeEntity'
+    }],
+    operates: [{ // 操作按钮
+      text: '新增',
+      ui: 'primary',
+      handler: 'addEntity'
+    },
+    {
+      text: '导入',
+      ui: 'primary',
+      handler: 'entityImport'
+    }, {
+      text: '导出',
+      cls: 'btn_hollow',
+      handler: 'entityExport'
+    }
+    ]
+  },
+  data () {
+    return {
+      renderComponents: [this.renderSearch, this.renderList],
+      drawer: false,
+      openMenus: [],
+      tableData: [],
+      listData: [],
+      currentPage: 1,
+      pageSize: 20,
+      total: null,
+      loading: false,
+      loadingList: false,
+      listFields: [],
+      filterFields: [],
+      filterData: {},
+      searchFields: [],
+      searchParams: {},
+      mobileSearchParams: {},
+      formData: {},
+      selection: [],
+      unfold: false,
+      searchKey: '',
+      searchKeyParams: {},
+      isSubList: false,
+      activeDropDown: '',
+      showFilter: false,
+      sortParams: {}
+    }
+  },
+  provide () {
+    return {
+      searchParams: this.searchParams
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById'
+    ]),
+    listConfigs () {
+      const { listConfigs = {} } = this.pageConfig
+      return listConfigs
+    },
+    mListFields () {
+      const fields = this.listFields.filter(item => item.state !== 'HIDDEN')
+      if (fields.length > 4) fields.length = 4
+      return fields
+    },
+    noMore () {
+      if (this.total !== null) {
+        return this.listData.length >= this.total
+      }
+      return false
+    },
+    searchConfigs () {
+      const { searchConfigs = {} } = this.pageConfig
+      return searchConfigs
+    },
+    filterConfigs () {
+      const { filterConfigs = {} } = this.pageConfig
+      return filterConfigs
+    },
+    // filterFields () {
+    //   const { filterFields = [] } = this.filterConfigs
+    //   return filterFields
+    // },
+    operates () {
+      const { operates = [], operateEllipsis = 1 } = this.listConfigs
+      let showOperateLength = 0
+      if (operateEllipsis === false) return operates
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...operates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.length = showOperateLength
+      }
+      return cOperates
+    },
+    moreOperates () {
+      const { operates = [], operateEllipsis = 1 } = this.listConfigs
+      let showOperateLength = 0
+      if (operateEllipsis === false) return []
+      if (operateEllipsis !== true) {
+        showOperateLength = operateEllipsis
+      }
+      const cOperates = [...operates]
+      if (cOperates.length > showOperateLength) {
+        cOperates.splice(0, showOperateLength)
+        return cOperates
+      }
+      return []
+    },
+    columnOperates () {
+      const { columnOperates = [] } = this.listConfigs
+      return columnOperates
+    },
+    foldColumnOperates () {
+      const { columnOperates = [], operateColumnEllipsis = true } = this.listConfigs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return []
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      if (columnOperates.length > showOperatesLength) {
+        const foldButtons = [...columnOperates]
+        foldButtons.splice(0, showOperatesLength)
+        return foldButtons
+      } else {
+        return []
+      }
+    },
+    unfoldColumnOperates () {
+      const { columnOperates = [], operateColumnEllipsis = true } = this.listConfigs
+      let showOperatesLength = 0
+      if (operateColumnEllipsis === false) return columnOperates
+      if (operateColumnEllipsis !== true) {
+        showOperatesLength = operateColumnEllipsis
+      }
+      const unfoldButtons = [...columnOperates]
+      if (unfoldButtons.length > showOperatesLength) unfoldButtons.length = showOperatesLength
+
+      return unfoldButtons
+    }
+  },
+  filters: {
+    buttonUi (ui) {
+      return (ui === 'blue' || ui === 'soft-blue') ? 'primary' : ui
+    },
+    simpleSearch (searchFields) {
+      const fields = [...searchFields]
+      if (fields.length > 3) fields.length = 3
+      return fields
+    }
+  },
+  watch: {
+    filterData: {
+      handler (v) {
+        this.currentPage = 1
+        this.tableData = []
+        this.getData()
+      },
+      deep: true
+    },
+    $isMobile () {
+      this.resetList()
+    }
+  },
+  methods: {
+    select (key, index) {
+      if (index === 0) {
+        this.openMenus = [key]
+      } else if (index === 1) {
+        this.$set(this.openMenus, index, key)
+      }
+    },
+    getList () {
+      const { id } = this.meta
+      const { queryParams = {}, pageFlag, listFields = [] } = this.listConfigs
+      // const { searchMode } = this.searchConfigs
+      const fields = listFields.map(item => (item.attriName || item))
+      const params = {
+        action: 'list',
+        entityId: id,
+        columnFieldNames: fields.join('#,') + '#'
+      }
+      if (pageFlag) {
+        params.page = this.currentPage
+        params.limit = this.pageSize
+      }
+      // if (this.searchParams && searchMode) {
+      //   params.searchMode = searchMode
+      // }
+      // 防止重复请求
+      if (this.loadingList) return
+      this.loadingList = true
+      const filterParams = {}
+      for (const key in this.filterData) {
+        const values = this.filterData[key]
+        if (values && values.length > 0) {
+          filterParams['search.' + key + '#in'] = values.join(',')
+        }
+      }
+      this.$http.list({
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.queryParams,
+        ...this.mobileSearchParams,
+        ...filterParams
+      })
+        .then(data => {
+          this.loadingList = false
+          this.total = data.total
+          if (data.entitys.length >= this.pageSize) {
+            // this.currentPage++
+          }
+          this.listData = [...this.listData, ...data.entitys]
+        })
+        .catch(() => {
+          this.loadingList = false
+        })
+    },
+    getData () {
+      const { queryParams = {}, pageFlag, listFields = [] } = this.listConfigs
+      const { scopeParams: queryScopeParams = {} } = this.$query
+      const scopeParams = JSON.parse(JSON.stringify(queryScopeParams))
+      // eslint-disable-next-line no-unused-vars
+      const that = this
+      for (const scopeKey in scopeParams) {
+        const scope = scopeParams[scopeKey]
+        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}`) || ''
+            } catch (error) {
+              console.error(error)
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      const { searchMode } = this.searchConfigs
+      const fields = listFields.map(item => (item.attriName || item))
+      const params = {
+        action: 'list',
+        entityId: this.$metaId,
+        columnFieldNames: fields.join('#,') + '#'
+      }
+      if (pageFlag) {
+        params.page = this.currentPage
+        params.limit = this.pageSize
+      }
+
+      const filterParams = {}
+      for (const key in this.filterData) {
+        const filterList = this.filterData[key]
+        const values = filterList.map(item => item.id)
+        if (values && values.length > 0) {
+          filterParams['scope.' + key + '#in'] = values.join(',')
+        }
+      }
+      if (this.searchParams && searchMode) {
+        params.searchMode = 'advance'
+      }
+      if (this.loading) return
+      this.loading = true
+      this.$http.list({
+        ...params,
+        ...this.$formatParams(queryParams),
+        ...this.sortParams, // 排序字段
+        ...this.queryParams,
+        ...this.searchParams,
+        ...this.searchKeyParams,
+        ...filterParams,
+        scopeParams: JSON.stringify(scopeParams)
+      })
+        .then(data => {
+          this.loading = false
+          this.total = data.total || data.entitys.length
+          if (this.$isMobile && pageFlag) {
+            this.tableData = [...this.tableData, ...data.entitys]
+            this.currentPage++
+          } else {
+            this.tableData = [...data.entitys]
+          }
+          if (this.afterData) this.afterData(this.tableData)
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    resetList () {
+      this.loading = false
+      this.currentPage = 1
+      this.filterItem = {}
+      this.searchParams = {}
+      this.tableData = []
+      this.getData()
+    },
+    getFieldConfig () {
+      if (!this.listConfigs.listFields) {
+        const listConfigs = { ...this.listConfigs }
+        listConfigs.listFields = this.meta.getListFields()
+        this.$set(this.pageConfig, 'listConfigs', listConfigs)
+      }
+      const { listFields, fieldConfigs = {} } = this.listConfigs
+      const { searchFields = [] } = this.searchConfigs
+      const { filterFields = [] } = this.filterConfigs
+      if (searchFields.length > 0) {
+        this.$FieldFactory.createFields({
+          defaultFieldConfigs: fieldConfigs,
+          fields: searchFields,
+          meta: this.meta,
+          pageType: 'SEARCH'
+        })
+          .then(data => {
+            this.searchFields = [...data]
+          })
+      }
+
+      if (filterFields.length > 0 && this.filterConfigs.flag) {
+        this.$FieldFactory.createFields({
+          defaultFieldConfigs: fieldConfigs,
+          fields: filterFields,
+          meta: this.meta,
+          pageType: 'SEARCH'
+        })
+          .then(data => {
+            this.filterFields = [...data]
+          })
+      }
+      this.$FieldFactory.createFields({
+        defaultFieldConfigs: fieldConfigs,
+        fields: listFields,
+        meta: this.meta,
+        pageType: this.pageType
+      })
+        .then(data => {
+          this.listFields = [...data]
+        })
+    },
+    changePageSize (size) {
+      this.pageSize = size
+      this.getData()
+    },
+    changeCurrentPage (currentPage) {
+      this.currentPage = currentPage
+      this.getData()
+    },
+    buttonOpera (props) {
+      this.$handler(...props)
+    },
+    search (searchParams) {
+      const params = {
+        searchMode: 'advance'
+      }
+      searchParams.map((item, i) => {
+        if (i < searchParams.length - 1) {
+          params[`search.link${i + 1}`] = item.link || 'and'
+        }
+        params[`search.leftBrace${i + 1}`] = item.leftBrace || ''
+        params[`search.field${i + 1}`] = ''
+        params[`search.value${i + 1}`] = item.value
+        if (item.dateType) params[`search.dateType${i + 1}`] = item.dateType
+        params[`search.attriName${i + 1}`] = (item.field || item.attriName).replace('#', '').replace(/\|/g, '.')
+        params[`search.relation${i + 1}`] = item.relation
+        params[`search.realRelation${i + 1}`] = item.relation
+        params[`search.realValue${i + 1}`] = item.realValue || item.value
+        params[`search.rightBrace${i + 1}`] = item.rightBrace || ''
+        params[`search.metaId${i + 1}`] = this.$metaId
+      })
+      params.size = searchParams.length
+      this.searchParams = { ...params }
+      this.currentPage = 1
+      if (this.$isMobile) {
+        this.tableData = []
+      }
+      this.getData()
+    },
+    sortFn (sort) {
+      this.sortParams = sort
+      this.getData()
+    },
+    clear () {
+      this.searchKey = ''
+      this.searchParams = {}
+      this.searchKeyParams = {}
+      this.getData()
+    },
+    unfoldFn () {
+      this.unfold = !this.unfold
+    },
+    addEntity (buttonConfig = {}) {
+      const { addPageFlag, addPage, openMode: pageConfig } = this.pageConfig
+      const { pageFlag = addPageFlag, openMode = pageConfig } = buttonConfig
+      const query = {
+        metaId: this.$metaId,
+        flag: pageFlag,
+        component: addPage,
+        pageType: 'ADD',
+        openType: openMode,
+        callback: this.getData
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    detailPage (item) {
+      this.viewEntity({}, item)
+    },
+    viewEntity (config, item) {
+      const { detailPageFlag, addPage, detailFlag, openMode } = this.pageConfig
+      if (!detailFlag) return
+      let key = 'ID'
+      if (this.meta) {
+        key = this.meta.getKey()
+      }
+      const query = {
+        metaId: this.$metaId,
+        flag: detailPageFlag,
+        component: addPage,
+        pageType: 'DETAIL',
+        id: item[key],
+        openType: openMode,
+        callback: this.getData
+      }
+      if (this.$isMobile) delete query.openType
+      this.$createPage({
+        ...query
+      })
+    },
+    editEntity (config, row) {
+      let item = null
+      if (row) {
+        item = row
+      } else {
+        if (this.selection.length > 1) {
+          this.$message.error('请不要选择多个记录')
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selection[0]
+      }
+      let key = 'ID'
+      if (this.meta) {
+        key = this.meta.getKey()
+      }
+      const { editPageFlag, addPage, openMode } = this.pageConfig
+      const query = {
+        metaId: this.$metaId,
+        flag: editPageFlag,
+        component: addPage,
+        pageType: 'EDIT',
+        id: item[key],
+        openType: openMode,
+        callback: this.getData
+
+      }
+      this.$createPage({
+        ...query
+      })
+    },
+    handleSelectionChange (val) {
+      this.selection = val
+    },
+    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('请选择一个记录')
+          return
+        }
+        ids = this.selection.map(item => item[key])
+      }
+
+      this.$confirm('确认删除？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: ids.join(',')
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+        .catch(() => {})
+    },
+    // 页面导出
+    entityExport () {
+      const { queryParams = {} } = this.listConfigs
+      const filterParams = {}
+      for (const key in this.filterData) {
+        const values = this.filterData[key]
+        if (values && values.length > 0) {
+          filterParams['search.' + key + '#in'] = values.join(',')
+        }
+      }
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'export-o', // 默认模板 epx-export + component
+        flag: 'v_export',
+        selects: this.selection.map(item => item[this.$metaKey]).join(','),
+        total: this.total,
+        params: {
+          ...this.$formatParams(queryParams),
+          ...this.queryParams,
+          ...this.searchParams,
+          ...this.searchKeyParams,
+          ...filterParams
+        },
+        field: this.meta.getExportFields()
+      })
+    },
+    // 批量编辑
+    editMultiEntity () {
+      const { queryParams = {} } = this.listConfigs
+      const filterParams = {}
+      for (const key in this.filterData) {
+        const values = this.filterData[key]
+        if (values && values.length > 0) {
+          filterParams['search.' + key + '#in'] = values.join(',')
+        }
+      }
+      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,
+          ...this.searchParams,
+          ...this.searchKeyParams,
+          ...filterParams
+        },
+        field: this.meta.getExportFields()
+      })
+    },
+    // 页面导入
+    entityImport () {
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'import-o', // 默认模板 epx-export + component
+        flag: 'v_import',
+        meta: this.meta
+      })
+    },
+    /**
+     * 通用打印
+     */
+    print ({ num = 1, params }, row) {
+      // 格式化params
+      let selections = []
+      const formatParams = {}
+      // 检测是否选中元素
+      if (row) {
+        selections = [{ ...row }]
+      } else {
+        if (this.selection) selections = [...this.selection]
+      }
+      if (num !== 0) {
+        if (selections.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        } else if (selections.length > 1) {
+          if (num === 1) {
+            this.$message.error('只能选择一个记录')
+            return
+          }
+        }
+      }
+      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
+      }
+      this.$http.$post({
+        action: 'exportPdf',
+        querySystem: this.appConfig.SYSTEM,
+        entityId: 'FM_FORM',
+        ...formatParams
+      }, {
+        responseType: 'blob'
+      })
+        .then(data => {
+          const url = window.URL.createObjectURL(new Blob([data], { type: 'application/pdf' }))
+          window.open(url)
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    /**
+       * 打印方法
+       * @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)
+    },
+    confirmFilter (values) {
+      for (const key in values) {
+        this.$set(this.filterData, key, values[key])
+      }
+    },
+    clearFilter () {
+      this.filterData = {}
+    },
+    init () {
+      // this.getPageConfigs()
+      const { pageSize } = this.listConfigs
+      this.pageSize = pageSize
+      // 获取列表显示字段和字段配置，如果没有字段默认获取所有字段
+      this.getFieldConfig()
+      this.getData()
+      // this.getList()
+    },
+    renderSearch (h) {
+      const { flag, mode = 'keywords' } = this.searchConfigs
+      if (flag && (mode === 'fields' || mode === 'select')) {
+        return (
+          <epx-search
+            searchFields={this.searchFields}
+            searchConfigs={this.searchConfigs}
+            meta={this.meta}
+            onSearch={this.search}
+            onFilter={ v => { this.filterData = v } }
+            total={this.total}
+            onSwitchMore={() => { this.showFilter = !this.showFilter }}
+          />
+        )
+      } else {
+        return null
+      }
+    },
+    renderList (h) {
+      return (
+        <epx-list-table
+          ref="listTable"
+          meta={this.meta}
+          data={this.tableData}
+          loading={this.loading}
+          listConfigs={this.listConfigs}
+          listFields={this.listFields}
+          searchFields={this.searchFields}
+          currentPage={this.currentPage}
+          pageSize={this.pageSize}
+          total={this.total}
+          searchConfigs={this.searchConfigs}
+          getData={this.getData}
+          onSearch={this.search}
+          onSort={this.sortFn}
+          onSwitchFilter={() => { this.showFilter = !this.showFilter }}
+          onHandleSelectionChange={this.handleSelectionChange}
+          onDetailPage={this.detailPage}
+          onHandler={this.buttonOpera}
+          onChangePageSize={this.changePageSize}
+          onChangeCurrentPage={this.changeCurrentPage}
+        />
+      )
+    }
+  },
+  created () {
+    this.init()
+  },
+  render (h) {
+    return (
+      <div class="container list">
+        { this.renderComponents.map(renderFn => renderFn(h)) }
+      </div>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$paddingSize: 16px; // 默认间隔
+
+.container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-container {
+  box-shadow: 0 0 8px rgba(#757575, .1);
+  padding: $paddingSize 16px 0;
+  background: #fff;
+  height: 42px;
+  overflow: hidden;
+  transition: all .5s;
+}
+.search-inner {
+  display: flex;
+}
+.form-item {
+  &::v-deep {
+    .el-form-item__content .el-input-group {
+      width: 220px;
+    }
+    // .el-input-group__append {
+    //   .search-btn {
+    //     // background-color: #1f82ef;
+    //     // border-color: #1f82ef;
+    //     // color:#fff;
+    //   }
+    // }
+  }
+}
+
+.fold-operates {
+  flex-shrink: 0;
+}
+.search-operates {
+  text-align: center;
+}
+
+.table-container {
+  background: #fff;
+  border-radius: 4px;
+  padding: $paddingSize;
+  display: flex;
+  flex-direction: column;
+}
+.table-operates {
+  padding-bottom: $paddingSize;
+  display: flex;
+  justify-content: space-between;
+}
+.search-inline {
+  display: flex;
+  &::v-deep {
+    .el-input{
+      margin-right: 12px;
+    }
+  }
+}
+.more-table-operates {
+  margin-left: 10px
+}
+.more {
+  i {
+    transition: all .4s;
+  }
+  .show {
+    transform: rotate(180deg);
+  }
+}
+.table{
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  border-top:  dashed 1px #e3e3e3;;
+  ::v-deep th {
+    color: #909399;
+    line-height: 1;
+    padding: 8px 0;
+    &:hover {
+      background: rgb(245, 247, 250);
+    }
+    .cell {
+      white-space: nowrap;
+    }
+  }
+  .label {
+    @include font_color_primary;
+    cursor: pointer;
+  }
+  // 无边框
+  &.no-border {
+    ::v-deep {
+      .el-table th.is-leaf, .el-table td {
+       border-right: 0
+      }
+      .el-table--border {
+        border: 0;
+        &::after {
+          display: none
+        }
+      }
+    }
+  }
+  .el-icon-more {
+    font-size: 16px;
+  }
+}
+.column-operates {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  button:not(:last-child) {
+    &::after {
+      content: '';
+      position: relative;
+      right: -6px;
+      top:0 ;
+      height: 14px;
+      border-right:  1px solid #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);
+  }
+}
+
+.column-operate-btn {
+  font-size: 14px;
+}
+
+.pagination {
+  padding-top: $paddingSize;
+  ::v-deep{
+    .el-select  {
+      margin-left: 24px;
+    }
+    .el-pagination__total {
+      float: right;
+    }
+  }
+}
+/**手机设备 */
+
+.mobile-search-container {
+  background: #fff;
+  padding: 8px 10px;
+  .mobile-search-inner {
+    padding: 0 12px;
+    background-color: #f7f8fa;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    .mobile-search-icon {
+      color: #666;
+      margin-right: 8px;
+    }
+    .mobile-search-input {
+      flex: 1;
+      color: #333;
+      input {
+        width: 100%;
+        outline: none;
+        border: none;
+        background: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .container {
+    overflow: hidden;
+  }
+}
+</style>