admin-vue3/src/views/crm/quotation/components/QuotationProductDetail.vue

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    v-loading="formLoading"
    label-width="0px"
    :inline-message="true"
  >
    <AuthTable :data="formData" :fields="formFields" class="-mt-10px">
      <!-- <template #productsother> -->
        <!-- <el-table-column label="序号" type="index" width="100" /> -->
        <!-- <el-table-column label="产品名称" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.productName`" :rules="formRules.productName" class="mb-0px!">
              {{row.productName}}
            </el-form-item>
          </template>
        </el-table-column> -->
        <!-- </template> -->
      <template #productscategory>
        <el-table-column label="产品类型" align="center" min-width="100">
          <template #default="{ row }">
            <dict-tag :type="DICT_TYPE.CRM_PRODUCT_CATEGORY" :value="row.category" />
          </template>
        </el-table-column>
      </template>
      <template #productsdetailType>
        <el-table-column label="产品明细类型" align="center" min-width="190">
          <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_PRODUCT_DETAIL_TYPE" :value="row.detailType" />
          </template>
        </el-table-column>
      </template>
      <template #productsproductUnit>
        <el-table-column label="产品单位" align="center" min-width="150">
          <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="row.productUnit" />
          </template>
        </el-table-column>
      </template>
      <template #productsbasicServiceFee>
        <el-table-column label="基础服务费（元）" min-width="130">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.basicServiceFee`" :rules="formRules.basicServiceFee" class="mb-0px!">
              <!-- <el-input v-model="row.basicServiceFee" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)" placeholder=""  /> -->
              {{row.basicServiceFee}}
            </el-form-item>
          </template>
        </el-table-column>
      </template>
      <template #productsadvancePaymentServiceFee>
        <el-table-column label="垫资服务费（元）" min-width="140">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.advancePaymentServiceFee`" :rules="formRules.offlinePrice" class="mb-0px!">
              <!-- <el-input v-model="row.offlinePrice" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)" placeholder=""  /> -->
              {{row.advancePaymentServiceFee}}
            </el-form-item>
          </template>
        </el-table-column>
      </template>
      <template #productsbookingPaymentServiceFee>
        <el-table-column label="代订服务费（元）" min-width="130">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.bookingPaymentServiceFee`" :rules="formRules.advancePaymentServiceFee" class="mb-0px!">
              {{row.bookingPaymentServiceFee}}
            </el-form-item>
          </template>
        </el-table-column>
      </template>
      <template #productsbillSortingServiceFee>
        <el-table-column label="票据分拣服务费（元）" min-width="130">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.billSortingServiceFee`" :rules="formRules.billSortingServiceFee" class="mb-0px!">
              {{row.billSortingServiceFee}}
            </el-form-item>
          </template>
        </el-table-column>
      </template>
      <template #productstotalServiceFee>
        <el-table-column label="服务费收入合计（元）" min-width="130">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.totalServiceFee`" :rules="formRules.totalServiceFee" class="mb-0px!">
              {{row.totalServiceFee}}
            </el-form-item>
          </template>
        </el-table-column>
      </template>
      <template #productsproductInvoice>
        <el-table-column label="产品票据" align="center" min-width="150">
          <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_PRODUCT_INVOICE" :value="row.productInvoice" />
          </template>
        </el-table-column>
      </template>
      <template #productsproductInvoiceItem>
        <el-table-column label="产品开具项目" align="center" min-width="250">
          <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_PRODUCT_INVOICE_ITEMS" :value="row.productInvoiceItem" />
            
          </template>
        </el-table-column>
      </template>
      <template #productsserviceInvoice>
        <el-table-column label="服务费票据" align="center" min-width="150">
          <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_SERVICE_FEE_INVOICE" :value="row.serviceInvoice" />
          </template>
        </el-table-column>
      </template>
      <template #productsserviceInvoiceItem>
        <el-table-column label="服务开具项目" align="center" min-width="250">
          <template #default="{ row }">
              <dict-tag :type="DICT_TYPE.CRM_SERVICE_FEE_INVOICE_ITEMS" :value="row.serviceInvoiceItem" />
          </template>
        </el-table-column>
      </template>
      
    </AuthTable>
  </el-form>
  <el-row justify="center" class="mt-3">
    <!-- <el-button @click="handleAdd" round>+ 添加CRM 报价产品关联</el-button> -->
  </el-row>
</template>
<script setup lang="ts">
import { QuotationApi } from '@/api/crm/quotation'
import { BillTemplateApi, BillTemplateVO } from '@/api/crm/billtemplate'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as BusinessApi from '@/api/crm/business'

const props = defineProps<{
  quotationId: undefined, // 报价编号（主表的关联字段）
  businessId: undefined,
  billTemplateId: undefined,
  products: undefined,
  formFields: {},
}>()
const formLoading = ref(false) // 表单的加载中
const formData = ref([])
const formRules = reactive({
  quotationId: [{ required: true, message: '报价编号不能为空', trigger: 'blur' }],
  productId: [{ required: true, message: '产品编号不能为空', trigger: 'blur' }],
  productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
  detailType: [{ required: true, message: '产品分类编号不能为空', trigger: 'blur' }],
  productUnit: [{ required: true, message: '产品单位不能为空', trigger: 'blur' }],
  onlinePrice: [{ required: true, message: '线上价格不能为空', trigger: 'blur' }],
  offlinePrice: [{ required: true, message: '线下价格不能为空', trigger: 'blur' }],
  totalPrice: [{ required: true, message: '总计价格不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 监听主表的关联字段的变化，加载对应的子表数据 */

watch(
  () => props.products,
  (val) => {
    if (!val || val.length === 0) {
      return;
    }
    nextTick(() => {
       // 循环处理
    // val.forEach((item) => {
    //   if (item.offlinePrice != null && item.onlinePrice != null) {
    //     item.downlinePrice = Number((Number(item.offlinePrice) + Number(item.onlinePrice)).toFixed(2)) || 0;
    //     item.totalPrice = Number((Number(item.downlinePrice) + Number(item.onlinePrice)).toFixed(2)) || 0;
    //   } else {
    //     item.totalPrice = 0;
    //   }
    // });
      formData.value = val
    })
  },
  { immediate: true }

);

/** 新增按钮操作 */
const handleAdd = () => {
  const row = {
    quotationId: undefined,
    productId: undefined,
    productName: undefined,
    detailType: undefined,
    productUnit: undefined,
    onlinePrice: undefined,
    offlinePrice: undefined,
    totalPrice: undefined,
    productInvoice: undefined,
    productInvoiceItems: undefined,
    serviceFeeInvoice: undefined,
    serviceFeeInvoiceItems: undefined
  }
  row.quotationId = props.quotationId
  formData.value.push(row)
}

/** 删除按钮操作 */
const handleDelete = (index) => {
  formData.value.splice(index, 1)
}

/** 表单校验 */
const validate = () => {
  return formRef.value.validate()
}

/** 表单值 */
const getData = () => {
  return formData.value
}
const getName = (opt, val) => {
  const arr = opt.filter(v => v.value == val)
  return arr.length ? arr[0]['label'] : ''
}

defineExpose({ validate, getData })
</script>