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

<template>
  <div class="eventTable 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', 'reportProjectNum', 'patentProjectNum'].includes(item.value)">
            <el-link @click="handleItem(scope.row, item.value)">{{ scope.row[item.value] }}</el-link>
          </div>
          <div v-else-if="['scenarioId', 'eventDate'].includes(item.value)" v-html="getColumnData(scope.row, item.value)">
          </div>
          <div v-else>{{ scope.row[item.value] ? scope.row[item.value] : '--' }}</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="handleClick(scope.row)"
              @command="handleCommand($event,scope.row)">
              <span>编 辑</span>
              <el-dropdown-menu slot="dropdown" style="text-align:center">
                <el-dropdown-item command="0">新增专利数据库</el-dropdown-item>
                <el-dropdown-item>
                  <el-dropdown trigger="hover" placement="right-start">
                    <span class="el-dropdown-link"> 新增报告 </span>
                    <el-dropdown-menu  class="children_item" v-if="dictMessage.REPORT_TYPE">
                        <el-dropdown-item v-for="item in dictMessage.REPORT_TYPE.filter(item=>!['6'].includes(item.dictChildValue))" :key="item.dictChildLabel"  @click.native="handleAnalyse(item.dictChildValue,scope.row)" v-if="$permission('/pcs/report/add/' + item.permission)">{{item.dictChildLabel}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> 
                </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 mixins from '../mixins';
export default {
  mixins: [mixins,getTableHeight],
  props: {
    isOperate: {//控制显示
      type: [String,Number],
      default: ''
    },
    column: {//显示栏位管理数组
      type: Array,
      default: () => {
        return [
          {
            ifGroup: false,
            ifSearch: true,
            name: "事件名称",
            type: "String",
            value: "name",
          },
          {
            name: "创建人",
            type: "String",
            value: "createName",
            ifSearch: true,
            ifGroup: false
          },
          {
            name: "创建时间",
            type: "DateTime",
            value: "createTime",
            ifSearch: true,
            ifGroup: true
          },
          {
            name: "发生时间",
            type: "DateTime",
            value: "eventDate",
            ifSearch: true,
            ifGroup: true
          },
          {
            name: "描述",
            type: "String",
            value: "description",
            ifSearch: true,
            ifGroup: false
          },
          {
            name: "应用场景",
            type: "Integer",
            value: "scenarioId",
            ifSearch: true,
            ifGroup: true
          }
        ]
      }
    },
    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.queryEvent(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.params.current * this.params.size >= this.params.total) {
        this.isMore = true
        this.disabled = true
        setTimeout(() => {
          this.isMore = false;
          this.isFlag = false
        }, 1000)
      }
      if (this.disabled) return;
      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.queryEvent(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()
    },
    // 数据处理
    getColumnData(row, key) {
      if (key == 'scenarioId') {
        if (row.scenarioName) {
          return row.scenarioName
        } else {
          return '--'
        }
      }else if (key == 'eventDate') {
        if (row.eventDate) {
          return row.eventDate.slice(0, 10)
        } else {
          return '--'
        }
      }
    },

  },
};
</script>
<style lang="scss">
.eventTable {}
</style>
<style lang="scss" scoped></style>