yangfeng
2023-08-16 1f4bc9f584c07a0958747657b7353ccbd1d56b41
src/components/makepager/TableCommonView.vue
@@ -1,5 +1,5 @@
<template>
  <div class="page-view">
  <div class="table-view">
    <el-table
      ref="table"
      border
@@ -13,7 +13,7 @@
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#ECF4FF', color: '#666' }"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column v-if="selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
@@ -21,14 +21,84 @@
        :label="item.label"
        :width="item.width"
        :min-width="item.min"
        sortable
        show-overflow-tooltip
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <span v-else>{{ scope.row[item.prop] }}</span>
          <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
          <span v-else-if="item.isTime">{{
            dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26"
              ? "--"
              : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
          }}</span>
          <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selNameClick(scope.row)">{{
            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
          >
          <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">
                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                  {{ item.name }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <div v-else-if="item.isProductAmount" 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">
                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                  {{ item.amount }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
      </el-table-column>
      <slot name="tableButton" />
      <div slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-table>
  </div>
</template>
@@ -37,10 +107,15 @@
export default {
  name: "TableCommonView",
  props: {
    selectBox: {
      type: Boolean,
      default: true
    },
    tableList: {
      type: Object,
      default: () => {
        return {
          selectBox: true,
          tableInfomation: [], // 接口返回数据
          tableColumn: [
            // table表单
@@ -93,30 +168,29 @@
    getSummaries(param) {
      if (this.showSummary.show) {
        const { columns, data } = param
        console.log(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, ".", ",")
                return prev + curr
              } else {
                return this.number_format(prev, 2, ".", ",")
                return prev
              }
            }, 0)
            sums[index + 1]
          }
        })
        // console.log(sums)
        return sums
      }
    },
    //定义number_format方法
    // 数字换行为金额显示格式
    number_format(number, decimals, dec_point, thousands_sep) {
      decimals = 2 //这里默认设置保留两位小数,也可以注释这句采用传入的参数
      /*
@@ -143,6 +217,55 @@
        s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数
      }
      return s.join(dec)
    },
    // 时间显示
    dateFormat(fmt, date) {
      let ret = ""
      date = new Date(date)
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加,必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"))
        }
      }
      return fmt
    },
    // 新建编辑选择弹窗
    selNameClick(row) {
      this.$emit("selCommonClick", row)
    },
    // 销售线索
    selSalesLeadClick(row) {
      this.$emit("selSalesLeadClick", row)
    },
    // 客户名称
    selClientClick(row) {
      this.$emit("selClientClick", row)
    },
    // 联系人姓名
    selContactsClick(row) {
      this.$emit("selContactsClick", row)
    },
    // 销售总单
    selMasterClick(row) {
      this.$emit("selMasterClick", row)
    },
    // 客户服务单
    selServiceOrderClick(row) {
      this.$emit("selServiceOrderClick", row)
    },
    // 公共(销售机会、报价单、销售总单、销售子单。。。)
    selCommonClick(row) {
      this.$emit("selCommonClick", row)
    }
  }
}
@@ -150,10 +273,41 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  margin-top: 20px;
.table-view {
  // margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 40px;
  // margin-bottom: 40px;
  .blue {
    width: 70px;
    text-align: center;
    color: #fff;
    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: 57px;
      line-height: 57px;
      .name-view {
        padding-left: 10px;
        border-bottom: 1px solid #ebeef5;
      }
      .no-bottom {
        border-bottom: 0px;
      }
    }
    .no-product {
      height: 57px;
      line-height: 57px;
    }
  }
}
::v-deep {
  .el-table__footer-wrapper tbody td.el-table__cell {