haoxuan
2024-04-19 75b4bf4554da6622cfe00f577829b256fc44f32c
src/components/makepager/TableCommonView.vue
@@ -1,6 +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" v-loading="loading">
    <el-table
      ref="table"
      border
@@ -33,6 +33,7 @@
        :min-width="item.min"
        show-overflow-tooltip
        :sortable="item.sortable"
        :align="item.textAlign"
        v-if="item.isShowColumn"
      >
        <template slot-scope="scope">
@@ -42,10 +43,10 @@
            <span
              class="Badge"
              :class="{
                greenSlot: scope.row.status == '4'||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',
                blueSlot: scope.row.status == '3' || scope.row.status == '就绪',
                graySlot: scope.row.status == '1'
              }"
              >{{
                item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
@@ -62,10 +63,10 @@
            :style="{
              color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266'
            }"
            >{{ timeAgo(scope.row[item.prop]) }}</span
            >{{ scope.row[item.prop] }}</span
          >
          <div v-else-if="item.conversion">
            <span>{{ item.getStatus(scope.row[item.prop]) }}</span>
            <p class="exceed_width">{{ item.getStatus(scope.row[item.prop]) }}</p>
          </div>
          <span
            v-else-if="item.isClick && scope.row[item.prop]"
@@ -115,7 +116,7 @@
          highlight: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
            { label: "", prop: "", min: 200, tooltip: true, textAlign: "center" }
          ]
        }
      },
@@ -241,7 +242,8 @@
                    return prev
                  }
                }, 0)
                sums[index] = this.tableList.tableColumn[index - 1].unit + "" + sums[index]
                let unitIndex = this.tableList.tableColumn.findIndex((obj) => obj.label === column.label)
                sums[index] = this.tableList.tableColumn[unitIndex].unit + sums[index]
              } else {
                sums[index] = ""
              }
@@ -298,16 +300,18 @@
  .styleBtn {
    position: absolute;
    width: 30px;
    height: 48px;
    height: 35px;
    // line-height: 26px;
    background: #f1f3f8;
    background: transparent;
    border-top-right-radius: 8px;
    top: 0px;
    right: 2px;
    // z-index: 9999;
    display: flex;
    align-items: center;
    z-index: 9999;
    .label {
      position: absolute;
      top: 12px;
      top: 6px;
      font-size: 20px;
      cursor: pointer;
      color: #000;
@@ -344,6 +348,61 @@
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: auto;
    .exceed_width {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
::v-deep .el-table .cell {
  font-size: 12px;
  line-height: 17px;
  font-family: PingFangSC;
  color: rgba(0, 0, 0, 0.9);
  .el-button--text {
    width: auto;
    height: auto;
    font-family: PingFangSC-Medium, sans-serif;
  }
}
::v-deep .el-table .el-table__cell {
  padding: 6px 0 !important;
  height: 35px;
  text-align: center;
}
::v-deep {
  .el-table .cell .el-button--text.el-button--small {
    padding: 4px 0;
  }
  .el-table .el-table__cell {
    padding: 6px 0 !important;
    height: 35px;
    text-align: center;
  }
  .el-table__body-wrapper {
    height: unset !important;
  }
  .el-table__cell.is-left {
    text-align: left !important;
  }
  .el-table__cell.is-right {
    text-align: right !important;
  }
}
.overSpread1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10;
}
.el-table__cell {
  text-align: unset !important;
}
</style>