feat(cnas,business): 客户满意度模板化表单与年度汇总导出、费用统计增强、路由加载自愈

吴羡

4 天以前 00e6928c50d58ed93fef75454d4f2ef0110d89e9

 src/views/business/costStatistics/index.vue

@@ -4,6 +4,12 @@
    <div class="search">
      <div>
        <el-form :model="entity" ref="entity" size="small" :inline="true">
          <el-form-item label="送样时间">
            <el-date-picker v-model="monthRange" type="monthrange" size="small"
                            value-format="YYYY-MM" range-separator="至"
                            start-placeholder="开始月份" end-placeholder="结束月份"
                            style="width: 240px" @change="refreshTable()"></el-date-picker>
          </el-form-item>
          <el-form-item label="委托编号" prop="entrustCode">
            <el-input size="small" placeholder="请输入" clearable v-model="entity.entrustCode"
                      @keyup.enter="refreshTable()"></el-input>
@@ -29,8 +35,31 @@
    </div>
    <div>
      <lims-table :tableData="tableData" :column="column"
                  :height="'calc(100vh - 250px)'" @pagination="pagination"
                  :page="page" :tableLoading="tableLoading"></lims-table>
                  :height="'calc(100vh - 300px)'" @pagination="pagination"
                  :isSelection="true" :handleSelectionChange="handleSelectionChange"
                  :page="page" :tableLoading="tableLoading">
        <template #isDiscount="{ row }">
          <el-select v-model="row.isDiscount" size="small" style="width: 80px"
                     @change="handleDiscountChange(row)">
            <el-option label="无" :value="0"></el-option>
            <el-option label="有" :value="1"></el-option>
          </el-select>
        </template>
        <template #discountAmount="{ row }">
          <el-input-number v-model="row.discountAmount" size="small" style="width: 100%"
                           :controls="false" :precision="2" :min="0"
                           :disabled="row.isDiscount !== 1"
                           placeholder="请输入" @change="handleAmountChange(row)"></el-input-number>
        </template>
        <template #feeRemark="{ row }">
          <el-input v-model="row.feeRemark" size="small" maxlength="500"
                    @change="handleFeeRemarkChange(row)"></el-input>
        </template>
      </lims-table>
    </div>
    <div class="sum-bar">
      <span>已勾选 <b class="sum-count">{{ selectedRows.length }}</b> 条</span>
      <span>总金额：<b class="sum-amount">¥{{ selectedTotal }}</b></span>
    </div>
    <viewInfoDia ref="viewInfoDia" v-if="viewInfoDia"></viewInfoDia>
  </div>
@@ -39,8 +68,9 @@
<script>
import limsTable from "@/components/Table/lims-table.vue";
import viewInfoDia from "./components/viewInfoDia.vue";
import {selectRatesPage} from "@/api/business/insOrderRates";
import {selectRatesPage, updateOrderFee} from "@/api/business/insOrderRates";
import {selectCustomPageList} from "@/api/system/customer";
import { ElMessage } from "element-plus";

export default {
  components: {limsTable,viewInfoDia},
@@ -50,10 +80,11 @@
        sample: null,
        company: null,
      },
      monthRange: [],
      tableData: [],
      tableLoading: false,
      column: [
        { label: '下单时间', prop: 'createTime', width: 150 },
        { label: '送样时间', prop: 'sampleDate', width: 120 },
        { label: '委托编号', prop: 'entrustCode', width: 160 },
        { label: '样品名称', prop: 'sample', width: 160 },
        { label: '委托单位', prop: 'company' },
@@ -84,8 +115,28 @@
          },
        },
        { label: '委托人', prop: 'prepareUser' },
        { label: '生产单位', prop: 'production' },
        { label: '总价', prop: 'totalPrice' },
        { label: '总价', prop: 'totalPrice', width: 110 },
        {
          label: '是否优惠',
          prop: 'isDiscount',
          width: 100,
          dataType: 'slot',
          slot: 'isDiscount'
        },
        {
          label: '优惠后金额',
          prop: 'discountAmount',
          width: 130,
          dataType: 'slot',
          slot: 'discountAmount'
        },
        {
          label: '备注',
          prop: 'feeRemark',
          minWidth: 160,
          dataType: 'slot',
          slot: 'feeRemark'
        },
        {
          dataType: "action",
          fixed: "right",
@@ -107,7 +158,19 @@
        current: 1
      },
      companyOptions: [],
      viewInfoDia: false
      viewInfoDia: false,
      selectedRows: []
    }
  },
  computed: {
    // 勾选合计：有优惠且填了优惠后金额的按优惠后金额算，否则按总价算
    selectedTotal() {
      const total = this.selectedRows.reduce((sum, row) => {
        const useDiscount = row.isDiscount === 1 && row.discountAmount !== null && row.discountAmount !== undefined
        const amount = Number(useDiscount ? row.discountAmount : row.totalPrice)
        return sum + (isFinite(amount) ? amount : 0)
      }, 0)
      return total.toFixed(2)
    }
  },
  mounted() {
@@ -117,10 +180,15 @@
  methods :{
    refreshTable() {
      this.tableLoading = true
      selectRatesPage({ ...this.page, ...this.entity }).then(res => {
      const [startMonth, endMonth] = this.monthRange || []
      selectRatesPage({ ...this.page, ...this.entity, startMonth, endMonth }).then(res => {
        this.tableLoading = false
        this.tableData = res.data.records
        this.tableData = (res.data.records || []).map(item => {
          item.isDiscount = item.isDiscount === 1 ? 1 : 0
          return item
        })
        this.page.total = res.data.total
        this.selectedRows = []
      }).catch(err => {
        this.tableLoading = false
      })
@@ -128,6 +196,7 @@
    // 重置
    refresh() {
      this.resetForm('entity')
      this.monthRange = []
      this.refreshTable()
    },
    // 查询委托单位下拉框数据
@@ -152,6 +221,53 @@
      this.page.size = page.limit
      this.refreshTable()
    },
    // 勾选行变化
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 切换是否优惠
    handleDiscountChange(row) {
      if (row.isDiscount === 1) {
        // 选“有”时带出总价，用户再改成实际优惠后金额
        if (row.discountAmount === null || row.discountAmount === undefined || row.discountAmount === '') {
          row.discountAmount = this.amountOf(row.totalPrice)
        }
      } else {
        row.discountAmount = null
      }
      this.saveFee(row)
    },
    // 优惠后金额改完保存
    handleAmountChange(row) {
      if (row.isDiscount !== 1) {
        row.discountAmount = null
        return
      }
      if (row.discountAmount === null || row.discountAmount === undefined || row.discountAmount === '') {
        ElMessage.warning('有优惠时请填写优惠后金额')
        return
      }
      this.saveFee(row)
    },
    // 备注改完保存
    handleFeeRemarkChange(row) {
      this.saveFee(row)
    },
    amountOf(value) {
      const num = Number(value)
      if (!isFinite(num)) return 0
      return Math.round(num * 100) / 100
    },
    saveFee(row) {
      updateOrderFee({
        id: row.id,
        isDiscount: row.isDiscount,
        discountAmount: row.isDiscount === 1 ? row.discountAmount : null,
        feeRemark: row.feeRemark || null
      }).catch(() => {
        this.refreshTable()
      })
    },
    // 查看详情
    openDia (row) {
      this.viewInfoDia = true
@@ -164,8 +280,28 @@
</script>
<style scoped>
.search {
  height: 46px;
  min-height: 46px;
  display: flex;
  justify-content: space-between;
}
.sum-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 8px;
  padding: 10px 16px;
  background: #fff;
  border-top: 1px solid var(--el-border-color-light);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.sum-count {
  color: var(--el-color-primary);
}
.sum-amount {
  color: var(--el-color-danger);
  font-size: 16px;
}
</style>