张涛
2024-08-30 082b572b91abd0d5ae8e409714553130448aa6d1
src/components/makepager/TableCommonView.vue
@@ -1,37 +1,27 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="table-view" v-loading="loading">
    <el-table
      ref="table"
      border
      :data="tableList.tableInfomation"
      tooltip-effect="dark"
      :height="'calc(100% - 0px)'"
      :max-height="tableList.maxHeight"
      style="width: 100%"
      :lazy="tableList.lazy"
      :show-summary="showSummary.show"
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }"
      size="mini"
      @row-click="tableRowClick"
      :row-class-name="tableRowClassName"
    >
    <el-table ref="table" border :data="tableList.tableInfomation" tooltip-effect="dark" :height="'calc(100% - 0px)'"
      :max-height="tableList.maxHeight" style="width: 100%" :lazy="tableList.lazy" :show-summary="showSummary.show"
      :summary-method="getSummaries" :span-method="arraySpanMethod"
      :class="tableList.headerHeight ? 'table-height-47px' : ''" @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#f1f3f8', height: tableList.headerHeight ? tableList.headerHeight : '37px', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }"
      size="mini" @row-click="tableRowClick" :row-class-name="tableRowClassName">
      <el-table-column v-if="selectBox" type="selection" width="40" :selectable="selectable"> </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"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="item.min"
        show-overflow-tooltip
        :sortable="item.sortable"
        v-if="item.isShowColumn"
      >
      <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"
        :fixed="tableList.isFixed"></el-table-column>
      <el-table-column v-for="(item, i) in tableColumn" :key="i" :prop="item.prop" :label="item.label"
        :width="item.width" :min-width="item.min" show-overflow-tooltip :sortable="item.sortable" :fixed="item.fixed"
        v-if="item.isShowColumn">
        <template slot="header">
          {{ item.label }}
          <div v-if="item.weekDay">{{ item.weekDay }}</div>
          <span v-if="item.iconRight">
            <i :class="item.iconRight" style="font-size: 16px; margin-left: 5px; cursor: pointer"
              @click="handleShow(item)"></i>
          </span>
        </template>
        <template slot-scope="scope">
          <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
@@ -44,42 +34,27 @@
            scope.row[item.prop]
          }}</span>
          <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span>
          <span
            v-else-if="item.isSalesLeadClick && scope.row[item.prop]"
            class="sel-name"
            @click="selSalesLeadClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isClientClick && scope.row[item.prop]"
            class="sel-name"
            @click="selClientClick(scope.row)"
            >{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span
          >
          <span
            v-else-if="item.isContactClick && scope.row[item.prop]"
            class="sel-name"
            @click="selContactsClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isMasterClick && scope.row[item.prop]"
            class="sel-name"
            @click="selMasterClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isServiceOrder && scope.row[item.prop]"
            class="sel-name"
            @click="selServiceOrderClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isCommonClick && scope.row[item.prop]"
            class="sel-name"
            @click="selCommonClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span v-else-if="item.isSalesLeadClick && scope.row[item.prop]" class="sel-name"
            @click="selSalesLeadClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isClientClick && scope.row[item.prop]" class="sel-name"
            @click="selClientClick(scope.row)">{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
          <span v-else-if="item.isContactClick && scope.row[item.prop]" class="sel-name"
            @click="selContactsClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isMasterClick && scope.row[item.prop]" class="sel-name"
            @click="selMasterClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isServiceOrder && scope.row[item.prop]" class="sel-name"
            @click="selServiceOrderClick(scope.row)">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.isCommonClick && scope.row[item.prop]" class="sel-name"
            @click="selCommonClick(scope.row, item.prop, item)">
            <div v-if="item.isCallMethod">
              <span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">
                <span v-if="item.isIcon" v-html="item.getCallMethod(scope.row[item.prop], scope.row)"></span>
                <span v-else>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span>
              </span>
            </div>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </span>
          <div v-else-if="item.isProductName" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
@@ -126,6 +101,18 @@
              item.getCallMethod(scope.row[item.prop], scope.row)
            }}</span>
          </div>
          <div v-else-if="item.isEditTd">
            <template v-if="scope.row[item.prop + 'editType'] == 'inputFloat'">
              <el-input-number v-model="scope.row[item.prop]" placeholder="请输入" :min="0" :precision="2"
                :controls="false" size="mini" style="width: calc(100% - 80px); margin-right: 5px"></el-input-number>
              <el-button type="text" @click="saveEditShow(item.prop, scope.row, scope)">保存</el-button>
            </template>
            <span v-else>
              {{ scope.row[item.prop] }}
              <i class="el-icon-edit" style="font-size: 16px; margin-left: 5px; cursor: pointer"
                @click="handleEditShow(scope.row, scope, item)"></i>
            </span>
          </div>
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
      </el-table-column>
@@ -158,6 +145,7 @@
      default: () => {
        return {
          selectIndex: true,
          isFixed: false,
          tableInfomation: [], // 接口返回数据
          showcol: [],
          allcol: [],
@@ -198,6 +186,7 @@
  data() {
    return {
      iscolopen: false,
      tableColumn: [],
      showcol: []
    }
  },
@@ -208,9 +197,35 @@
        this.showcol = newVal
      },
      immediate: true
    }
    },
    "tableList.tableColumn": {
      handler(newVal) {
        this.tableColumn = newVal
      },
      immediate: true
    },
  },
  methods: {
    // 表格编辑
    handleEditShow(row, scope, item) {
      console.log('item', item)
      scope.row[item.prop + 'editType'] == 'inputFloat'
      this.$set(this.tableList.tableInfomation[scope.$index], item.prop + 'editType', 'inputFloat')
      this.$forceUpdate()
    },
    saveEditShow(prop, row, scope) {
      if (row.editType == 'inputFloat') {
        let value = scope.row[prop]
        let reg2 = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
        if (!reg2.test(value) || value == 0) {
          this.$message.error("需要填写大于0的2位小数!")
          return true
        }
        this.$forceUpdate()
      }
      this.$set(this.tableList.tableInfomation[scope.$index], prop + 'editType', '')
      this.$emit("inputContent", prop, row, scope)
    },
    onMaskClick() {
      this.iscolopen = false
    },
@@ -381,8 +396,8 @@
      this.$emit("selServiceOrderClick", row)
    },
    // 公共(销售机会、报价单、销售总单、销售子单。。。)
    selCommonClick(row) {
      this.$emit("selCommonClick", row)
    selCommonClick(row, prop, item) {
      this.$emit("selCommonClick", row, prop, item)
    },
    // 行点击
    tableRowClick(row, column, event) {
@@ -404,7 +419,11 @@
      } else {
        return false
      }
    }
    },
    // 自定义表头点击事件
    handleShow(item) {
      this.$emit("handleShow", item);
    },
  }
}
</script>
@@ -414,6 +433,7 @@
.table-view {
  position: relative;
  height: 100%;
  .blue {
    width: 70px;
    text-align: center;
@@ -421,40 +441,68 @@
    background-color: $color-primary;
    border-radius: 4px;
  }
  .sel-name {
    color: $color-primary;
    cursor: pointer;
  }
  .product-view {
    // background: #cc7d7d;
    margin-left: -10px;
    margin-right: -11px;
    li {
      height: 22px;
      line-height: 22px;
      .name-view {
        padding-left: 10px;
        border-bottom: 1px solid #ebeef5;
      }
      .no-bottom {
        border-bottom: 0;
      }
    }
    li:last-child .name-view {
      border-bottom: none;
    }
    .no-product {
      height: 22px;
      line-height: 22px;
    }
  }
}
::v-deep {
  .el-table__footer-wrapper {
    tbody td.el-table__cell {
      background-color: #fff;
      font-weight: bold;
    }
  }
  .el-table__fixed {
    height: calc(100% - 8px) !important;
  }
  .el-table__fixed-body-wrapper {
    top: 37px !important;
  }
  .table-height-47px .el-table__fixed-body-wrapper {
    top: 47px !important;
  }
  .el-table__body-wrapper {
    height: calc(100% - 38px) !important;
  }
  .table-height-47px .el-table__body-wrapper {
    height: calc(100% - 48px) !important;
  }
}
@@ -463,12 +511,14 @@
  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;
@@ -506,6 +556,7 @@
  top: 0;
  right: -6px;
  z-index: 11;
  .label {
    position: absolute;
    top: 6px;
@@ -515,6 +566,7 @@
    color: #000;
    transform: rotate(-90deg);
  }
  .checkbox-group {
    width: 160px;
    height: 300px;