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

<template>
  <div class="eventTable height_100" v-DivHeight="getDivHeight" >
    <el-table :data="tableData" 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" :height="row ? '300' : ''">
      <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" :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,
      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,
    editData:null,
    addEditData:null,
  },
  data() {
    return {
      //正在努力加载中
      isFlag: false,
      //没有更多啦！
      isMore: false,
      //禁用懒加载
      disabled: true,
      params: {
        size: 5,
        current: 0
      },
      // 排序数组
      sort: [],
    };
  },
  watch: {
    // 分组时新增或编辑事件处理
    'addEditData'(val) {
      let a = this.tableData.findIndex(item => {
        return item.id == val[0].id
      })
      if (a != -1) {
        this.$set(this.tableData,[a],val[0])
      } else {
        this.$set(this.tableData, [this.tableData.length], val[0])
      }
    },
    'deleData'(val) {
      let a = this.tableData.findIndex(item => {
        return item.id == val[0].id
      })
      if (a != -1) {
        this.tableData.splice(a, 1)
        console.log(this.tableData);
        // 分组时若删除当前分组最后一条数据时重新请求分组接口
        if (this.tableData.length==0) {
          this.$emit('getData',true)
        }
      }
    },
  },
  mounted() {
    if (!this.row) {
      this.disabled = true
    } else {
      this.disabled = false
    }
  },
  methods: {
    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,
        ...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 })
      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)
    },
    // 数据处理
    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>