zzq
2023-09-28 2b78cf0cd68e1809bc4cad7d730bef6ab9c4c118
src/components/makepager/TableCommonView.vue
@@ -1,6 +1,6 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="table-view" v-loading="loading">
  <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading">
    <el-table
      ref="table"
      border
@@ -19,6 +19,8 @@
      :default-expand-all="tableList.isDefaultExpandAll"
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
      :span-method="objectSpanMethod"
      :summary-method="getSummaries"
      :show-summary="showSummary"
    >
      <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column>
@@ -35,21 +37,19 @@
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <!-- 带点的功能 -->
          <!-- 状态显示 -->
          <div v-else-if="item.status">
            <!-- <span v-if="scope.row.status == '完成'" class="Badge greenSlot"></span>
            <span v-else-if="scope.row.status == '草稿'" class="Badge redSlot"></span>
            <span v-else-if="scope.row.status == '就绪'" class="Badge redSlot"></span>
            <span v-else-if="scope.row.status == '已取消'" class="Badge yellowSlot"></span> -->
            <span
              class="Badge"
              :class="{
                greenSlot: scope.row.status == '完成',
                redSlot: scope.row.status == '已取消',
                blueSlot: scope.row.status == '就绪',
                graySlot: scope.row.status == '草稿'
                greenSlot: scope.row.status == '4'||scope.row.status ==  '完成',
                redSlot: scope.row.status == '5',
                blueSlot: scope.row.status == '3'||scope.row.status ==  '就绪',
                graySlot: scope.row.status == '1',
              }"
              >{{ scope.row[item.prop] }}</span
              >{{
                item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
              }}</span
            >
          </div>
          <!-- 调用方法显示文字 -->
@@ -59,22 +59,26 @@
          <!-- 小于当前时间显示不同颜色 -->
          <span
            v-else-if="item.date"
            :style="{ color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' }"
            :style="{
              color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266'
            }"
            >{{ timeAgo(scope.row[item.prop]) }}</span
          >
          <div v-else-if="item.conversion">
            <span>{{ item.getStatus(scope.row[item.prop]) }}</span>
          </div>
          <span
            v-else-if="item.isClick && scope.row[item.prop]"
            :class="item.className ? item.className : 'sel-name'"
            @click="selCommonClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span v-else-if="item.propType=='mulitple'">
            {{  scope.row[item.prop][item.propTwo]?scope.row[item.prop][item.propTwo]:'--' }}
          <span v-else-if="item.propType == 'mulitple'">
            {{ scope.row[item.prop][item.propTwo] ? scope.row[item.prop][item.propTwo] : "--" }}
          </span>
          <span :class="item.className ? item.className : ''" v-else>{{
            scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? scope.row[item.prop] : "--"
          }}</span>
        </template>
      </el-table-column>
      <slot name="tableButton" />
@@ -106,6 +110,7 @@
          showStyle: true,
          tableInfomation: [], // 接口返回数据
          showcol: [],
          countcol: [],
          allcol: [],
          highlight: false,
          tableColumn: [
@@ -141,6 +146,10 @@
    showCheckcol: {
      type: Boolean,
      default: true
    },
    showSummary: {
      type: Boolean,
      default: false
    }
  },
  data() {
@@ -209,6 +218,40 @@
    },
    timeAgo(val) {
      return timeago(val)
    },
    //求和
    getSummaries(param) {
      if (this.tableList.countcol && this.tableList.countcol.length > 0) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = " "
            return
          }
          this.tableList.countcol.forEach((countcols) => {
            if (column.label === countcols) {
              const values = data.map((item) => Number(item[column.property]))
              if (!values.every((value) => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr)
                  if (!isNaN(value)) {
                    return prev + curr
                  } else {
                    return prev
                  }
                }, 0)
                sums[index] = this.tableList.tableColumn[index - 1].unit + "" + sums[index]
              } else {
                sums[index] = ""
              }
            } else {
              return
            }
          })
        })
        return sums
      }
    }
  }
}
@@ -216,6 +259,12 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.table_height {
  height: 100%;
}
.el-table__body-wrapper {
  height: 100%;
}
.table-view {
  position: relative;
  height: 100%;