epx-frame 3.5.0-shpgy.1

package/src/frame/components/ListTable.vue

@@ -0,0 +1,796 @@
+<template>
+  <!-- 表格区域 -->
+    <div v-if="$isMobile" class="mtable-container" @click="selectOperateColumn=null">
+      <!-- 操作栏 -->
+      <div class="mtable-opera-bar">
+        <div class="mtable-opera-bar-inner">
+          <p class="fl">
+            <span>共 {{total}} 条，已选 <font>{{checkList.length}}</font> 条，</span>
+            <el-button class="mtable-select" size="medium" type="text" @click="switchCheckBox">{{!showCheckBox?'立即选择': '取消'}}</el-button>
+          </p>
+          <!-- 选择/取消 -->
+          <div class="mtable-buttons">
+            <el-dropdown trigger="click" placement="top" v-if="listConfigs.operateFlag && listConfigs.operates && listConfigs.operates.length>0">
+              <el-button size="medium" type="text" >
+                <i class="el-icon-copy-document"></i>操作
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <template v-for="operate in listConfigs.operates">
+                  <el-dropdown-item :key="operate.text" @click.native="$emit('handler',[operate])">{{operate.text}}</el-dropdown-item>
+                </template>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </div>
+      </div>
+      <ul
+        class="list"
+        style="overflow:auto"
+        v-infinite-scroll="getData"
+        infinite-scroll-distance="10px"
+        :infinite-scroll-disabled="data.length>=total"
+       >
+        <el-checkbox-group class="mtable-checkbox-group" v-model="checkList" @change="v=>$emit('handleSelectionChange', v)">
+          <li v-for="item in data" :key="item[$metaKey]" class="epx-list-item" @click="$emit('detailPage', item)">
+            <div class="mtable-checkbox" @click.stop v-if="showCheckBox"><el-checkbox :label="item[$metaKey]"> </el-checkbox></div>
+            <div class="epx-list-item-content">
+              <p v-for="field in mListFields" :key="field.attriName">{{ item[field.attriName + '#'] ||  item[field.attriName] }}</p>
+            </div>
+            <div class="epx-list-item-extra"  @click.stop>
+              <!-- 如果存在操作列 -->
+              <el-dropdown v-if="listConfigs.operateColumnFlag!==false && columnOperates.length>0" trigger="click" @visible-change="(show)=>(activeDropDown = show?item[$metaKey]: '')">
+                <span :class="['el-dropdown-link',{'active': activeDropDown===item[$metaKey]}]">
+                  <i class="el-icon-more"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <template v-for="operate in columnOperates">
+                    <el-dropdown-item :key="operate.text" @click.native="$emit('handler',[operate, item])" :icon="operate.iconCls">{{operate.text}}</el-dropdown-item>
+                  </template>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <i class="el-icon-arrow-right" v-else></i>
+            </div>
+          </li>
+        </el-checkbox-group>
+         <p class="loading" v-if="loading"><i class="el-icon-loading"></i>加载中...</p>
+         <p class="no-more" v-if="total!=null && data.length>=total">没有更多了</p>
+      </ul>
+    </div>
+    <div v-else :class="['table-container', { 'is-locked': locked }]" >
+      <el-drawer
+        class="table-container__drawer"
+        :visible.sync="filterDrawer"
+        size="600px"
+        direction="rtl"
+      >
+        <epx-filter ref="filter" :metaId="meta.getCode()" :fields.sync="filterFields" :relations="meta.getRelations()" :all-fields="getAllFields" :params.sync="searchParams" :filter.sync="selectFilter" />
+      </el-drawer>
+
+      <!-- 按钮区域 -->
+      <div class="table-operates">
+        <div class="button-group" >
+          <template  v-if="listConfigs.operateFlag && listConfigs.operates && listConfigs.operates.length>0">
+            <template v-for="operate in operates">
+              <el-button size="medium" :key="operate.text" :type="operate.ui | buttonUi" @click="$emit('handler',[operate])">{{operate.text}}</el-button>
+            </template>
+            <!-- 按钮组 -->
+            <el-dropdown v-if="moreOperates.length>0" class="more-table-operates" trigger="click">
+              <el-button size="medium" type="primary" >
+                <i class="el-icon-more"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <template v-for="item in moreOperates">
+                  <el-dropdown-item :key="item.text" @click.native="$emit('handler',[item])">{{item.text}}</el-dropdown-item>
+                </template>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </div>
+        <!-- 内联查询 显示条件->不配置筛选区域 -->
+        <div class="search-inline" v-if="searchConfigs.flag && searchConfigs.mode==='keywords'" >
+          <el-input size="medium" :placeholder="keywordsLabel" v-model="searchKey" class="input-with-select"  @change="keywordSearch" clearable suffix-icon="el-icon-search">
+          </el-input>
+          <div :class="['search-inline__filter', { 'search-inline__filter--select': searchParams.length>0 }]" @click.stop="filterDrawer=true">
+            <i class="epx-icon-filter"></i>
+            <span v-if="searchParams.length>0">
+              {{selectFilter.NAME ? selectFilter.NAME : `${searchParams.length}项`}}
+              <i class="el-icon-close" @click.stop="searchParams =[];selectFilter={}; $refs.filter.clearConditions()"></i>
+            </span>
+          </div>
+          </div>
+      </div>
+      <div :class="['table', 'no-border', { 'no-locked': locked!==true }]" >
+        <el-table
+          ref="table"
+          :data="data"
+          v-loading="loading"
+          border
+          style="width: 100%"
+          :height="locked?'100%': null"
+          @selection-change="v=>$emit('handleSelectionChange', v)"
+          @cell-dblclick="v=>$emit('detailPage', v)"
+          @cell-click="clickCell"
+          @sort-change="sortChange"
+        >
+          <el-table-column
+            v-if="listConfigs.multiSelectColumnFlag"
+            type="selection"
+            width="40"
+            :fixed="true"
+          >
+          </el-table-column>
+          <el-table-column
+            v-if="listConfigs.serialColumnFlag"
+            label="序号"
+            width="60"
+            :fixed="lockedIndex!==-1"
+          >
+            <template  slot-scope="scope">
+              {{ pageSize * (currentPage-1) +scope.$index + 1}}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column v-if="listConfigs.operateColumnFlag!==false && columnOperates.length>0 && listConfigs.operateColumnPosition!=='end'"
+             label="操作"
+             :sortable="sortable"
+            :min-width="listConfigs.operateColumnWidth || 100"
+            :fixed="(listConfigs.operateColumnLocked || lockedIndex!==-1)? 'left': false"
+          >
+            <div class="column-operates" slot-scope="scope">
+              <template>
+                <template v-for="operate in unfoldColumnOperates">
+                  <el-button
+                    class="column-operate-btn"
+                    :key="operate.text"
+                    @click="$emit('handler',[operate,scope.row])"
+                    type="text"
+                    size="small"
+                  >
+                    <i v-if="operate.iconCls" :class="operate.iconCls"></i>
+                    {{operate.text}}
+                  </el-button>
+                </template>
+              </template>
+              <template v-if="foldColumnOperates.length>0" >
+                <el-dropdown trigger="click" @visible-change="(show)=>(activeDropDown = show?scope.row[$metaKey]: '')">
+                  <span :class="['el-dropdown-link',{'active': activeDropDown===scope.row[$metaKey]}]">
+                    <i class="el-icon-more"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <template v-for="operate in foldColumnOperates">
+                      <el-dropdown-item :key="operate.text" @click.native="$emit('handler',[operate,scope.row])" :icon="operate.iconCls">{{operate.text}}</el-dropdown-item>
+                    </template>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </template>
+            </div>
+          </el-table-column>
+          <template v-for="(field, index) in listFields">
+            <el-table-column
+              v-if="field.state!=='HIDDEN'"
+              :key="field.attriName"
+              :prop="field.attriName+'#'"
+              :label="field.attriLabel"
+              :sortable="sortable"
+              :min-width="field.width || 120"
+              :width="field.width"
+              :fixed="index<=lockedIndex"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                 <!-- 根据类型显示字段 -->
+                <epx-form-field :values="scope.row" @update-value="v=>updateTableItem(scope,v)" v-if="editInfo.rowId===scope.row[metaKey]&& field.state==='EDIT'" :fieldConfig="{...field}"  />
+                <template v-else>
+                  <epx-file v-if="field.dataType==='blob'||field.dataType==='photo'" :values="scope.row" :fieldConfigs="{...field}"></epx-file>
+                <span v-else :class="{label: field.isLabel==='1' || (field.attribute && field.attribute.isLabel==='1')}" @click="clickField(field, scope.row)">{{scope.row[field.attriName+'#'] || scope.row[field.attriName]}}</span>
+                </template>
+              </template>
+            </el-table-column>
+          </template>
+          <!-- 操作列 -->
+          <el-table-column v-if="listConfigs.operateColumnFlag!==false && columnOperates.length>0 && listConfigs.operateColumnPosition==='end'"
+             label="操作"
+             sortable="column"
+
+            :min-width="listConfigs.operateColumnWidth || 100"
+            :fixed="listConfigs.operateColumnLocked? 'right': false"
+          >
+           <div class="column-operates" slot-scope="scope">
+              <template>
+                <template v-for="operate in unfoldColumnOperates">
+                  <el-button
+                    class="column-operate-btn"
+                    :key="operate.text"
+                    @click="$emit('handler', [operate,scope.row])"
+                    type="text"
+                    size="small"
+                  >
+                    <i v-if="operate.iconCls" :class="operate.iconCls"></i>
+                    {{operate.text}}
+                  </el-button>
+                </template>
+              </template>
+              <template v-if="foldColumnOperates.length>0" >
+                <el-dropdown trigger="click" @visible-change="(show)=>(activeDropDown = show?scope.row[$metaKey]: '')">
+                  <span :class="['el-dropdown-link',{'active': activeDropDown===scope.row[$metaKey]}]">
+                    <i class="el-icon-more"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <template v-for="operate in foldColumnOperates">
+                      <el-dropdown-item :key="operate.text" @click.native="$emit('handler',[operate,scope.row])" :icon="operate.iconCls">{{operate.text}}</el-dropdown-item>
+                    </template>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </template>
+            </div>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页配置 -->
+      <div class="pagination" v-if="listConfigs.pageFlag">
+        <el-pagination
+          :current-page="currentPage"
+          :page-sizes="[10, 15, 20, 30, 50, 100, 200]"
+          :page-size="pageSize"
+          layout="prev, pager, next, jumper, sizes,total"
+          :total="total"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'epx-list-table',
+  props: {
+    meta: Object,
+    data: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    listConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    listFields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    total: Number,
+    searchConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    searchFields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    getData: Function
+  },
+  data () {
+    return {
+      activeDropDown: '',
+      searchKey: '',
+      filterFields: [],
+      searchParams: [],
+      searchKeyParams: [],
+      selectOperateColumn: null,
+      checkList: [],
+      showCheckBox: false,
+      filterDrawer: false,
+      selectFilter: {},
+      editInfo: {}
+    }
+  },
+  computed: {
+    metaKey () {
+      return this.meta.getKey()
+    },
+    keywords () {
+      const fields = new Set([...this.meta.keyNames, this.meta.label, 'CODE'])
+      const { keywords = [...fields] } = this.searchConfigs
+      return keywords
+    },
+    locked () {
+      const { locked = true } = this.listConfigs
+      return locked
+    },
+    sortable () {
+      const { sortable = true } = this.listConfigs
+      return sortable
+    },
+    keywordsLabel () {
+      const labels = this.keywords.filter(item => !!item).map(item => this.meta.getLabelByField(item || item.attriName))
+      return '输入' + labels.join('、') + '查询'
+    },
+    getAllFields () {
+      const attributes = this.meta.getAttributes()
+      const allFields = []
+      for (const key in attributes) {
+        const attribute = attributes[key]
+        const { name, label, relatedEntity, codeKey, dataType } = attribute
+        allFields.push({
+          attriName: name,
+          attriLabel: label,
+          dataType,
+          codeKey: relatedEntity || codeKey,
+          attribute
+        })
+      }
+      return allFields
+    },
+    lockedIndex () {
+      const index = this.$_.findLastIndex(this.listFields, (item) => item.locked)
+      return index
+    },
+    mListFields () {
+      const fields = this.listFields.filter(item => item.state !== 'HIDDEN')
+      if (fields.length > 4) fields.length = 4
+      return fields
+    },
+    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
+    }
+  },
+  watch: {
+    searchParams (v) {
+      this.$emit('search', [...v, ...this.searchKeyParams])
+    },
+    searchFields () {
+      this.filterFields = [...this.searchFields]
+    }
+  },
+  methods: {
+    currentChange (page) {
+      this.$emit('changeCurrentPage', page)
+    },
+    sizeChange (size) {
+      this.$emit('changePageSize', size)
+    },
+    // 关键词查询
+    keywordSearch () {
+      // 获取当前外联标签字段
+      this.$emit('search-keyword', {
+        keywordFields: this.keywords.join(','),
+        keywordValue: this.searchKey
+      })
+    },
+    clickField ({ isLabel, attribute = {} }, item) {
+      if (isLabel === '1' || attribute.isLabel === '1') {
+        this.$emit('detailPage', item)
+      }
+    },
+    clickCell (row, column, cell, event) {
+      event.stopPropagation()
+      if (column.property) {
+        this.editInfo = {
+          rowId: row[this.metaKey],
+          row: row,
+          fieldName: column.property.replace('#', '')
+        }
+      }
+    },
+    updateTableItem (scope, value) {
+      const item = { ...scope.row, ...value }
+      if (item) {
+        const submitForm = {}
+        for (const key in item) {
+          if (!key.includes('#')) {
+            submitForm['bean.' + key] = item[key]
+          }
+        }
+        this.$http.update({
+          action: 'update',
+          entityId: this.$metaId,
+          ...submitForm
+        })
+          .then(() => {
+            this.editInfo = {}
+            this.$set(this.data, scope.$index, item)
+          })
+      }
+    },
+    switchCheckBox () {
+      if (this.showCheckBox) {
+        this.showCheckBox = false
+        this.checkList = []
+      } else {
+        this.showCheckBox = true
+      }
+    },
+    sortChange ({ column, prop, order }) {
+      let sortParams = {}
+      if (order) {
+        sortParams = { sort: prop, order: order === 'ascending' ? 'ASC' : 'DESC' }
+      }
+      this.$emit('sort', sortParams)
+    }
+  },
+  created () {
+    // this.getListFields()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$paddingSize: 16px;
+.table-container {
+  background: #fff;
+  border-radius: 4px;
+  padding: $paddingSize;
+  display: flex;
+  flex-direction: column;
+  // min-height: 300px;
+  &::v-deep {
+    .el-drawer__header {
+      display: none;
+    }
+    .table-container__drawer {
+      .el-drawer {
+        outline: none;
+      }
+      .el-drawer__body {
+        height: 100%;
+      }
+    }
+    .el-table  {
+      min-height: 150px;
+    }
+  }
+}
+
+.is-locked {
+  flex: 1;
+  // overflow: hidden;
+}
+.table-operates {
+  padding-bottom: $paddingSize;
+  display: flex;
+  justify-content: space-between;
+}
+.search-inline {
+  display: flex;
+  align-items: center;
+  &::v-deep {
+    .el-input{
+      margin-right: 12px;
+    }
+  }
+}
+.search-inline__filter {
+  cursor: pointer;
+}
+
+.search-inline__filter>i{
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+}
+.search-inline__filter--select {
+  white-space: nowrap;
+  @include bg_color_primary(.2);
+  @include font_color_primary;
+  border-radius: 4px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  >i{
+    @include font_color_primary;
+    margin-right: 6px;
+   }
+   >span i {
+     cursor: pointer;
+   }
+
+}
+.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;
+  &.no-locked {
+    &::v-deep {
+      .el-table__body-wrapper  {
+        height: auto!important;
+      }
+    }
+  }
+  ::v-deep{
+    th {
+      color: #909399;
+      line-height: 1;
+      padding: 8px 0;
+      &:hover {
+        background: rgb(245, 247, 250);
+      }
+      .cell {
+        white-space: nowrap;
+      }
+    }
+    td{
+      padding: 9px 0;
+    }
+  }
+  .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;
+    }
+  }
+}
+
+/**移动端 */
+
+.mtable-container {
+  flex: 1;
+  flex-shrink: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .list {
+    overflow: auto;
+  }
+}
+
+.epx-list-item {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  position: relative;
+  border-color: #ebedf0;
+  padding: 6px 16px;
+  overflow: hidden;
+  &::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);
+  }
+  .epx-list-item-content {
+    flex: 1;
+    color: #666;
+  }
+  .epx-list-item-extra {
+    font-size: 20px;
+    color: #999;
+    margin-left: 20px;
+  }
+}
+
+.loading {
+  padding: 10px 0;
+  text-align: center;
+  @include font_color_primary;
+  i {
+    margin-right: 6px;
+  }
+}
+.no-more {
+  padding: 10px 0;
+  text-align: center;
+  @include font_color_primary;
+}
+.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;
+}
+</style>