xiaoshi_system/src/views/patentMining/components/view/commonTable.vue

<template>
  <div class="height_100" v-DivHeight="getDivHeight">
    <el-table :data="tableData" border header-row-class-name="custom-table-header" @sort-change="sortChange"   
    v-if="showTable" :maxHeight="tableHeight" v-el-table-infinite-scroll="getList" :infinite-scroll-distance="10" 
    :infinite-scroll-disabled="disabled" style="width: 100%">

      <el-table-column label="#" width="60" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
        </template>
      </el-table-column>

      <el-table-column v-for="item in column.filter(item => !item.ifHidden)" :render-header=" $commonJS.renderHeaderMethods" :key="item.value" :prop="item.value"
        :label="item.name" align="center" sortable="custom">
        <template slot-scope="scope">
          <div v-if="['name'].includes(item.value)">
            <el-link type="primary" @click="handleItem(scope.row, item.value)" >
              <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
            </el-link>
          </div>
          <div v-else-if="['ifSearch'].includes(item.value)" v-html="$commonJS.getColumnData(scope.row, item , null , {data:ifSearch})"></div>
          <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="120px">
        <template slot-scope="scope">
          <div>
            <el-dropdown split-button type="primary" size="small" @command="handleCommand($event, scope.row)">
              <span @click="handleCommand('e', scope.row)">编辑</span>
              <el-dropdown-menu slot="dropdown" style="text-align: center;">
                <el-dropdown-item divided class="color-red" command="1">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import { getTableHeight } from '@/views/components/mixins'
import mixins from '../mixins'
export default {
  mixins: [mixins,getTableHeight],
  components: {},
  props: {
    column: {//显示栏位管理数组
      type: Array,
      default: () => {
        return []
      }
    },
    row: null,
    //操作信息
    handleMessage: ''
  },
  data() {
    return {
      ifSearch: {
        false:'否',
        true:'是',
      },

      //正在努力加载中
      isFlag: false,
      //没有更多啦！
      isMore: false,
      //禁用懒加载
      disabled: true,
      params: {
        size: 5,
        current: 0
      },
      // 排序数组
      sort: [
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      //事件类型及所选
      action: {
        type: '',//1表示删除，2表示其他，3表示新增
        id: ''
      }
    };
  },
  computed: {},
  watch: {
    handleMessage(val) {
      if (val) {
        this.updateData()
      }
    }
  },
  mounted() {
    if (!this.row) {
      this.disabled = true
    } else {
      this.disabled = false
    }
  },
  methods: {
    //更新数据
    updateData() {
      if (this.action.type == 1) {
        if (this.tableData.length == 1) {
          return false
        }
        var startIndex = this.tableData.findIndex(item => {
          return item.id == this.action.id
        })
        this.tableData.splice(startIndex, 1)
        let params = {
          ...this.params,
          searchQuery: this.$commonJS.objectToString(this.row.searchOption),//检索条件
          orderDTOList: this.sort,//排序
          groupField: this.row.groupBy,
          groupFieldValue: this.row.row.value,
        }
        this.getList2(params, 1)
      } else if (this.action.type == 2) {

        let params = {
          ...this.params,
          searchQuery: `id=${this.action.id}`,//检索条件
          groupField: this.row.groupBy,
          groupFieldValue: this.row.row.value,
        }
        this.getList2(params, 2)
      }
    },

    getList2(params, type) {
      this.$api.queryPatentDigProject(params).then(res => {
        if (res.code == 200) {
          if (type == 1) {
            var startIndex = (params.current - 1) * size
            var endIndex = this.tableData.length
            var len = endIndex - startIndex
            this.tableData.splice(startIndex, len, ...res.data.data)
            this.params.total = res.data.total
          } else if (type == 2) {
            var startIndex = this.tableData.findIndex(item => {
              return item.id == this.action.id
            })
            this.tableData.splice(startIndex, 1, ...res.data.data)
          }

        }
      }).catch(err => {
      })
    },

    getList() {
      if (!this.row) return;
      if (this.disabled) return;
      if (this.params.current * this.params.size >= this.params.total) {
        this.isMore = true
        this.disabled = true
        setTimeout(() => {
          this.isMore = false;
          this.isFlag = false
        }, 1000)
      }
      
      this.params.current += 1
      let params = {
        ...this.params,
        searchQuery: this.$commonJS.objectToString(this.row.searchOption),//检索条件
        orderDTOList: this.sort,//排序
        groupField: this.row.groupBy,
        groupFieldValue: this.row.row.value,
      }
      this.isMore = false;
      this.isFlag = true;
      this.$api.queryPatentDigProject(params).then(res => {
        if (res.code == 200) {
          this.tableData.push(...res.data.data)
          this.params.total = res.data.total  
        }
      }).catch(err => {
      })
      setTimeout(() => {
        this.isMore = false;
        this.isFlag = false
      }, 1000)
    },

    // 排序
    sortChange({ column, prop, order }) {
      this.handleSort({ column, prop, order })
      if (!this.row) {
        this.$emit('on-sort', { column, prop, order })
      }
    },
    // 排序方法
    handleSort({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort:this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.params.current = 0
      this.disabled = false
      this.tableData.splice(0)
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped></style>