xiaoshi_system/src/views/project/components/view/table.vue

<template>
  <div class="height_100"  v-DivHeight="getDivHeight">
      <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header"
      v-if="showTable" :maxHeight="tableHeight" @sort-change="sortChange"  v-el-table-infinite-scroll="getList" :infinite-scroll-distance="10" 
        :infinite-scroll-disabled="disabled">
        <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" sortable="custom" align="center">
          <template slot-scope="scope">
            <div v-if="['name'].includes(item.value)">
              <el-link type="primary" @click="handleClick(scope.row, item.value)">
                <span  v-html="$commonJS.getColumnData(scope.row, item)"></span>
              </el-link>
            </div>
            <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
          </template>
        </el-table-column>

        <el-table-column v-if="[1].indexOf(isOperate) == -1" label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-dropdown split-button type="primary" size="small" @click="handleCommand('e', scope.row)"
              @command="handleCommand($event, scope.row)">
              <span>编 辑</span>
              <el-dropdown-menu slot="dropdown" style="text-align:center">
                <el-dropdown-item>
                  <el-dropdown @command="handleCommand($event, scope.row)" placement="left-start">
                    <span> 专利导入 </span>
                    <el-dropdown-menu style="text-align:center">
                      <el-dropdown-item command="0"> Excel导入 </el-dropdown-item>
                      <el-dropdown-item command="1">专利号导入 </el-dropdown-item>
                      <el-dropdown-item command="2">检索条件导入 </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
                <el-dropdown-item command="3">任务清单</el-dropdown-item>
                <el-dropdown-item command="5">报告管理</el-dropdown-item>
                <el-dropdown-item command="6">产品架构</el-dropdown-item>
                <!-- <el-dropdown-item command="7">事件</el-dropdown-item> -->
                <!-- <el-dropdown-item command="8">其他附件</el-dropdown-item> -->
                <el-dropdown-item command="9">项目分享</el-dropdown-item>
                <el-dropdown-item command="10" divided style="color:red">删 除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-alert v-if="isFlag" title="正在努力加载中..." type="success" center :closable="false" show-icon></el-alert>
    <el-alert v-if="isMore" title="没有更多啦！" type="warning" center show-icon></el-alert>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
import { workspaceOptions } from "../mixins";
export default {
  mixins: [workspaceOptions,getTableHeight],
  props: {
    isOperate: {//控制显示
      type: [String, Number],
      default: ''
    },

    column: {//显示栏位管理数组
      type: Array,
      default: () => {
        return []
      }
    },
    row: null,
    //操作信息
    handleMessage:'',
  },
  data() {
    return {
      //正在努力加载中
      isFlag: false,
      //没有更多啦！
      isMore: false,
      //禁用懒加载
      disabled: true,
      params: {
        size: 5,
        current: 0
      },
      // 排序数组
      sort: [
        {
          "orderBy": "createTime",
          "orderType": 1
        }
      ],
      //事件类型及所选
      action:{
        type:'',//1表示删除，2表示其他，3表示新增
        id:''
      }
    };
  },
  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.queryPatentProject(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.queryPatentProject(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 }) {
      this.sort=[]//如需要多个字段排序，则不需要清空
      if (order == null) {
        return;
      }
      var orderType = {
        ascending: 0,
        descending: 1
      }
      var params = this.sort.find(item => {
        return item.orderBy == prop
      })
      if (params) {
        params.orderType = orderType[order]
      } else {
        params = {}
        params.orderBy = prop
        params.orderType = orderType[order]
        this.sort.push(params)
      }
      this.params.current = 0
      this.disabled = false
      this.tableData.splice(0)
      this.getList()
    },
  },
};
</script>
<style lang="scss"></style>
<style lang="scss" scoped></style>