销售模块剩余部分新建页面

yangfeng

2023-07-07 e34c2e67208bd63e320a4504ce8cf40a83ba7cbb

 src/components/makepager/TableCommonView.vue

@@ -7,10 +7,13 @@
      tooltip-effect="dark"
      style="width: 100%"
      :lazy="tableList.lazy"
      :show-summary="showSummary.show"
      :summary-method="getSummaries"
      :span-method="arraySpanMethod"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#ECF4FF', color: '#666' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
@@ -18,8 +21,14 @@
        :label="item.label"
        :width="item.width"
        :min-width="item.min"
        show-overflow-tooltip="true"
        sortable
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <span v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <slot name="tableButton" />
    </el-table>
@@ -41,25 +50,100 @@
          ]
        }
      }
    },
    showSummary: {
      type: Object,
      default: () => {
        return {
          show: false,
          sumProp: [],
          mergeNumber: 1
        }
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    maxHeight() {
      if (this.tableList.height) {
        return `calc(100vh - ${this.tableList.height})`
      }
      return undefined
    }
  },
  computed: {},
  methods: {
    handleReserve(row) {
      return row._id ? row._id : row.id
    },
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },
    // 行合并
    arraySpanMethod() {
      if (this.showSummary.show) {
        this.$nextTick(() => {
          if (this.$refs.table.$el) {
            var current = this.$refs.table.$el
              .querySelector(".el-table__footer-wrapper")
              .querySelector(".el-table__footer")
            var cell = current.rows[0].cells
            for (let i = 0; i < this.showSummary.mergeNumber; i++) {
              cell[i].style.display = "none"
            }
            cell[this.showSummary.mergeNumber].classList.remove("is-left")
            cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
          }
        })
      }
    },
    // 金额合计
    getSummaries(param) {
      if (this.showSummary.show) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === this.showSummary.mergeNumber) {
            sums[index] = "本页总计"
          }
          const values = data.map((item) => Number(item[column.property]))
          // if (column.property === this.showSummary.sumProp) {
          if (this.showSummary.sumProp.includes(column.property)) {
            sums[index + 1] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return this.number_format(prev + curr, 2, ".", ",")
              } else {
                return this.number_format(prev, 2, ".", ",")
              }
            }, 0)
            sums[index + 1]
          }
        })
        return sums
      }
    },
    // 数字换行为金额显示格式
    number_format(number, decimals, dec_point, thousands_sep) {
      decimals = 2 //这里默认设置保留两位小数，也可以注释这句采用传入的参数
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       * */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "")
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point
      var s = n.toString().split(".")
      var re = /(-?\d+)(\d{3})/
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2")
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || ""
        s[1] += new Array(prec - s[1].length + 1).join("0")
      } else {
        s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数
      }
      return s.join(dec)
    }
  }
}
@@ -71,5 +155,17 @@
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 40px;
  .blue {
    padding: 10px;
    color: #fff;
    background-color: blue;
    border-radius: 4px;
  }
}
::v-deep {
  .el-table__footer-wrapper tbody td.el-table__cell {
    background-color: #fff;
    text-align: right;
  }
}
</style>