登录页面和查询分类设置

yangfeng

2023-07-10 8e7cd003414ea4ca8f42fb3171de18f8839ece17

 src/components/makepager/CommonFormTableView.vue

@@ -1,65 +1,50 @@
<template>
  <div class="page-view">
    <el-form ref="form" :model="productTableList" :show-message="false" label-position="right">
      <el-table :data="productTableList.tableData" style="width: 100%">
        <el-table-column prop="id" label="#" width="30"></el-table-column>
        <el-table-column prop="productName" label="产品名称">
          <template slot-scope="scope">
            <el-form-item
              label=" "
              :prop="'tableData.' + scope.$index + '.productName'"
              :rules="[{ required: true, message: '输入不能为空' }]"
            >
              <el-input v-model.trim="scope.row.productName" maxlength="50" size="mini" style="width: 70px"></el-input>
            </el-form-item>
      <el-table
        :data="productTableList.tableData"
        :show-summary="showSummary.show"
        :summary-method="getSummaries"
        :span-method="arraySpanMethod"
        style="width: 100%"
      >
        <el-table-column
          v-for="(item, i) in productTableList.tableColumn"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.min"
          align="right"
        >
          <!-- 表头样式 -->
          <template slot="header">
            <span v-if="item.isRequird" style="color: #f56c6c">*</span>
            <span>{{ item.label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productNumber" label="产品编号"></el-table-column>
        <el-table-column prop="startDate" label="服务开始日" width="140">
          <!-- column样式 -->
          <template slot-scope="scope">
            <el-form-item
              v-if="item.input"
              label=" "
              :prop="'tableData.' + scope.$index + '.startDate'"
              :rules="[{ required: true, message: '输入不能为空' }]"
              :prop="'tableData.' + scope.$index + '.' + item.prop"
              :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            >
              <el-date-picker
                v-model="scope.row.startDate"
                size="mini"
                type="date"
                placeholder="选择日期"
                style="width: 90px"
              >
              <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input>
            </el-form-item>
            <el-form-item
              v-else-if="item.date"
              label=" "
              :prop="'tableData.' + scope.$index + '.' + item.prop"
              :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            >
              <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> -->
              <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px">
              </el-date-picker>
            </el-form-item>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endDate" label="服务到期日" width="140">
          <template slot-scope="scope">
            <el-form-item
              label=" "
              :prop="'tableData.' + scope.$index + '.endDate'"
              :rules="[{ required: true, message: '输入不能为空' }]"
            >
              <el-date-picker
                v-model="scope.row.endDate"
                size="mini"
                type="date"
                placeholder="选择日期"
                style="width: 90px"
              >
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column prop="" label="含税单价"> </el-table-column>
        <el-table-column prop="" label="不含税单价"> </el-table-column>
        <el-table-column prop="" label="折扣率(%)"></el-table-column>
        <el-table-column prop="" label="折扣额"> </el-table-column>
        <el-table-column prop="" label="税(销售)"> </el-table-column>
        <el-table-column prop="" label="实际含税单价"></el-table-column>
        <el-table-column prop="" label="价税合计"> </el-table-column>
        <el-table-column prop="" label="描述"> </el-table-column>
      </el-table>
    </el-form>
    <div style="margin: 10px">
@@ -67,6 +52,18 @@
      <el-button size="small" type="primary">导入明细</el-button>
      <el-button size="small" type="primary">清空</el-button>
      <el-button size="small" type="primary">重算</el-button>
    </div>
    <div v-if="showSummary.total || showSummary.refundable" style="height: 42px; line-height: 42px">
      <el-row :gutter="10">
        <el-col v-if="showSummary.total" :span="2" :offset="22">
          <span style="font-weight: bold">合计</span>
          <span style="margin-left: 10px">0.00</span>
        </el-col>
        <el-col v-if="showSummary.refundable" :span="2" :offset="22">
          <span style="font-weight: bold">应退款</span>
          <span style="margin-left: 10px">0.00</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
@@ -84,6 +81,18 @@
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
          ]
        }
      }
    },
    showSummary: {
      type: Object,
      default: () => {
        return {
          show: false,
          total: false,
          refundable: false,
          sumProp: [],
          mergeNumber: 1
        }
      }
    }
@@ -105,6 +114,76 @@
    },
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },
    // 行合并
    arraySpanMethod() {
      if (this.showSummary.show) {
        this.$nextTick(() => {
          if (this.$refs.table) {
            var current = this.$refs.table.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] = 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]
          }
        })
        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)
    }
  }
}
@@ -117,4 +196,21 @@
    margin-bottom: 0;
  }
}
::v-deep {
  .el-form-item__label {
    display: none;
  }
  .el-table__footer-wrapper tbody td.el-table__cell {
    background-color: #fff;
    text-align: right;
    font-weight: bold;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 0px;
  }
  .el-table .cell,
  .el-table th.el-table__cell > .cell {
    padding: 0 5px;
  }
}
</style>