zzq
2023-09-28 2b78cf0cd68e1809bc4cad7d730bef6ab9c4c118
src/components/makepager/TableCommonView.vue
@@ -1,9 +1,6 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div
    :class="{ 'table-view': true, table_height: !showSummary }"
    v-loading="loading"
  >
  <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading">
    <el-table
      ref="table"
      border
@@ -25,15 +22,8 @@
      :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>
      <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>
      <el-table-column
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
@@ -46,9 +36,7 @@
        v-if="item.isShowColumn"
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{
            "¥" + number_format(scope.row[item.prop], 2, ".", ",")
          }}</span>
          <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <!-- 状态显示 -->
          <div v-else-if="item.status">
            <span
@@ -60,26 +48,19 @@
                graySlot: scope.row.status == '1',
              }"
              >{{
                item.isCallMethod
                  ? item.getCallMethod(scope.row[item.prop], scope.row)
                  : scope.row[item.prop]
                item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
              }}</span
            >
          </div>
          <!-- 调用方法显示文字 -->
          <div v-else-if="item.isCallMethod">
            <span>{{
              item.getCallMethod(scope.row[item.prop], scope.row)
            }}</span>
            <span>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span>
          </div>
          <!-- 小于当前时间显示不同颜色 -->
          <span
            v-else-if="item.date"
            :style="{
              color:
                new Date().getTime() > new Date(scope.row[item.prop]).getTime()
                  ? '#D23F3A'
                  : '#606266',
              color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266'
            }"
            >{{ timeAgo(scope.row[item.prop]) }}</span
          >
@@ -93,18 +74,10 @@
            >{{ scope.row[item.prop] }}</span
          >
          <span v-else-if="item.propType == 'mulitple'">
            {{
              scope.row[item.prop][item.propTwo]
                ? scope.row[item.prop][item.propTwo]
                : "--"
            }}
            {{ 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]
              : "--"
            scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? scope.row[item.prop] : "--"
          }}</span>
        </template>
      </el-table-column>
@@ -116,22 +89,15 @@
    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div v-if="showCheckcol" class="styleBtn">
      <i @click="checkcol()" class="label">...</i>
      <el-checkbox-group
        v-model="showcolList"
        v-show="iscolopen"
        class="checkbox-group"
        @change="selCeckBoxList"
      >
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
          >{{ item }}
        </el-checkbox>
      <el-checkbox-group v-model="showcolList" v-show="iscolopen" class="checkbox-group" @change="selCeckBoxList">
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
import { timeago } from "@/common/config/index";
import { timeago } from "@/common/config/index"
export default {
  name: "TableCommonView",
  props: {
@@ -149,147 +115,146 @@
          highlight: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true },
          ],
        };
            { label: "", prop: "", min: 200, tooltip: true }
          ]
        }
      },
      showcol: {
        typeof: Array,
        default: () => [],
      },
        default: () => []
      }
    },
    // 合并单元格
    rowData: {
      type: Array,
      default: () => {
        return [];
      },
        return []
      }
    },
    // 加载的loading
    loading: {
      type: Boolean,
      default: false,
      default: false
    },
    // 选中的样式
    selectClassRow: {
      type: Object,
      default: () => {
        return {};
      },
        return {}
      }
    },
    showCheckcol: {
      type: Boolean,
      default: true,
      default: true
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
      default: false
    }
  },
  data() {
    return {
      iscolopen: false,
      showcolList: this.tableList.showcol,
    };
      showcolList: this.tableList.showcol
    }
  },
  watch: {},
  computed: {},
  beforeUpdate() {},
  methods: {
    onMaskClick() {
      this.iscolopen = false;
      this.iscolopen = false
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      row;
      column;
      row
      column
      if (this.rowData && this.rowData.length > 0) {
        // 产品BOM 表格特殊处理 合并单元格
        if (columnIndex < 5 || columnIndex == 9) {
          const _row = this.rowData[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          const _row = this.rowData[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col,
          };
            colspan: _col
          }
        }
      }
    },
    tableRowClick(row) {
      this.$emit("tableRowClick", row);
      this.$emit("tableRowClick", row)
    },
    handleReserve(row) {
      return row._id ? row._id : row.id;
      return row._id ? row._id : row.id
    },
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val);
      this.$emit("getSelectArray", val)
    },
    // 公共详情
    selCommonClick(row) {
      this.$emit("selCommonClick", row);
      this.$emit("selCommonClick", row)
    },
    // 选择列
    checkcol() {
      this.iscolopen = !this.iscolopen;
      this.iscolopen = !this.iscolopen
    },
    closeCheckbox() {
      let label = document.querySelector(".label");
      let label = document.querySelector(".label")
      if (label) {
        this.iscolopen = false;
        this.iscolopen = false
      }
    },
    selCeckBoxList(val) {
      this.$emit("selTableCol", val);
      this.$emit("selTableCol", val)
    },
    // 单选行相关
    tableRowClassName({ row }) {
      if (Object.keys(this.selectClassRow).length > 0) {
        if (row.id == this.selectClassRow.id) {
          return "onSelect";
          return "onSelect"
        }
      }
      this.$emit("tableRowClassName", row);
      this.$emit("tableRowClassName", row)
    },
    timeAgo(val) {
      return timeago(val);
      return timeago(val)
    },
    //求和
    getSummaries(param) {
      if (this.tableList.countcol && this.tableList.countcol.length > 0) {
        const { columns, data } = param;
        const sums = [];
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = " ";
            return;
            sums[index] = " "
            return
          }
          this.tableList.countcol.forEach((countcols) => {
            if (column.label === countcols) {
              const values = data.map((item) => Number(item[column.property]));
              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);
                  const value = Number(curr)
                  if (!isNaN(value)) {
                    return prev + curr;
                    return prev + curr
                  } else {
                    return prev;
                    return prev
                  }
                }, 0);
                sums[index] =
                  this.tableList.tableColumn[index - 1].unit + "" + sums[index];
                }, 0)
                sums[index] = this.tableList.tableColumn[index - 1].unit + "" + sums[index]
              } else {
                sums[index] = "";
                sums[index] = ""
              }
            } else {
              return;
              return
            }
          });
        });
        return sums;
          })
        })
        return sums
      }
    },
  },
};
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -297,7 +262,7 @@
.table_height {
  height: 100%;
}
.el-table__body-wrapper{
.el-table__body-wrapper {
  height: 100%;
}
.table-view {
@@ -379,9 +344,6 @@
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: auto;
  }
  .el-table__body-wrapper {
    // height: ;
  }
}
</style>