修改测试

bms-front/src/views/price/basic/surcharge/components/SurchargeFormDialog.vue

@@ -0,0 +1,190 @@
+<template>
+  <el-dialog :title="title" v-model="visible" width="640px" append-to-body>
+    <basic-form ref="formRef" v-model="form" :schemas="schemas" label-width="100px" />
+    <template #footer>
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import BasicForm from '@/components/BasicForm'
+import { getSurcharge, addSurcharge, updateSurcharge } from '@/api/price/surcharge'
+import { listRegionOptions } from '@/api/data/region'
+
+const emit = defineEmits(['success'])
+const { proxy } = getCurrentInstance()
+
+const formRef = ref()
+const visible = ref(false)
+const title = ref('')
+const form = ref(emptyForm())
+const regionOptions = ref([])
+
+const countrySelectOptions = computed(() => {
+  const all = [{ label: "全部国家", value: '' }]
+  return all.concat((regionOptions.value || []).map(r => ({
+    label: regionLabel(r),
+    value: r.countryCode2
+  })))
+})
+
+const schemas = computed(() => [
+  {
+    label: "附加费名称",
+    prop: 'scName',
+    component: 'input',
+    placeholder: "如 燃油附加费",
+    span: 12,
+    width: '100%',
+    props: { maxlength: 100 },
+    rules: [{ required: true, message: "附加费名称不能为空", trigger: 'blur' }]
+  },
+  {
+    label: "费用类型",
+    prop: 'feeType',
+    component: 'select',
+    placeholder: "请选择",
+    dict: 'bms_fee_type',
+    span: 12,
+    width: '100%',
+    disabled: true,
+    rules: [{ required: true, message: "请选择费用类型", trigger: 'change' }]
+  },
+  {
+    label: "计费方式",
+    prop: 'chargeType',
+    component: 'select',
+    placeholder: "请选择",
+    dict: 'bms_charge_type',
+    span: 12,
+    width: '100%',
+    rules: [{ required: true, message: "请选择计费方式", trigger: 'change' }]
+  },
+  {
+    label: "计费数值",
+    prop: 'chargeValue',
+    component: 'inputNumber',
+    span: 12,
+    width: '100%',
+    props: { min: 0, precision: 6, step: 1, controlsPosition: 'right' },
+    rules: [{ required: true, message: "计费数值不能为空", trigger: 'blur' }]
+  },
+  {
+    label: "币种",
+    prop: 'currency',
+    component: 'select',
+    placeholder: "请选择",
+    dict: 'bms_currency',
+    span: 12,
+    width: '100%'
+  },
+  {
+    label: "取值方式",
+    prop: 'roundMode',
+    component: 'select',
+    placeholder: "请选择",
+    dict: 'bms_round_mode',
+    span: 12,
+    width: '100%',
+    rules: [{ required: true, message: "请选择取值方式", trigger: 'change' }]
+  },
+  {
+    label: "适用国家",
+    prop: 'countryCode',
+    component: 'select',
+    placeholder: "全部国家",
+    options: countrySelectOptions.value,
+    span: 12,
+    width: '100%',
+    props: { filterable: true, clearable: true }
+  },
+  {
+    label: "状态",
+    prop: 'ssCode',
+    component: 'radio',
+    span: 12,
+    options: [
+      { label: "有效", value: 'on' },
+      { label: "停用", value: 'of' }
+    ]
+  },
+  {
+    label: "备注",
+    prop: 'scNote',
+    component: 'textarea',
+    placeholder: "请输入备注",
+    span: 24,
+    width: '100%',
+    props: { rows: 2, maxlength: 500 }
+  }
+])
+
+function emptyForm() {
+  return {
+    scId: undefined,
+    scName: undefined,
+    feeType: 'SURCHARGE',
+    chargeType: 'FIXED',
+    chargeValue: undefined,
+    currency: 'CNY',
+    roundMode: 'HALF_UP',
+    ssCode: 'on',
+    countryCode: undefined,
+    scNote: undefined
+  }
+}
+
+function regionLabel(r) {
+  const cn = r.countryNameCn || r.countryNameEn || ''
+  return cn ? `${r.flagEmoji || ''} ${cn} (${r.countryCode2})`.trim() : r.countryCode2
+}
+
+function ensureRegions() {
+  if (regionOptions.value.length) return Promise.resolve()
+  return listRegionOptions().then(res => {
+    regionOptions.value = res.data || []
+  })
+}
+
+function reset() {
+  form.value = emptyForm()
+  nextTick(() => formRef.value?.clearValidate())
+}
+
+function open(row) {
+  reset()
+  ensureRegions()
+  if (!row) {
+    title.value = "新建附加费"
+    visible.value = true
+    return
+  }
+  getSurcharge(row.scId).then(res => {
+    const data = res.data || {}
+    if (data.ssCode) data.ssCode = String(data.ssCode).toLowerCase()
+    form.value = { ...emptyForm(), ...data }
+    title.value = "修改附加费"
+    visible.value = true
+    nextTick(() => formRef.value?.clearValidate())
+  })
+}
+
+function submitForm() {
+  formRef.value.validate(valid => {
+    if (!valid) return
+    const payload = { ...form.value }
+    if (!payload.countryCode) payload.countryCode = undefined
+    if (payload.chargeValue != null) payload.chargeValue = Number(payload.chargeValue)
+    const req = payload.scId != null ? updateSurcharge(payload) : addSurcharge(payload)
+    req.then(() => {
+      proxy.$modal.msgSuccess(payload.scId != null ? "修改成功" : "新增成功")
+      visible.value = false
+      emit('success')
+    })
+  })
+}
+
+defineExpose({ open })
+</script>

bms-front/src/views/price/basic/surcharge/index.vue

@@ -63,99 +63,24 @@
       </template>
     </basic-table>
 
-    <el-dialog :title="title" v-model="open" width="640px" append-to-body>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="附加费名称" prop="scName">
-              <el-input v-model="form.scName" placeholder="如 燃油附加费" maxlength="100" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="费用类型" prop="feeType">
-              <el-select v-model="form.feeType" placeholder="请选择" style="width: 100%" disabled>
-                <el-option v-for="d in bms_fee_type" :key="d.value" :label="d.label" :value="d.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="计费方式" prop="chargeType">
-              <el-select v-model="form.chargeType" placeholder="请选择" style="width: 100%">
-                <el-option v-for="c in bms_charge_type" :key="c.value" :label="c.label" :value="c.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="计费数值" prop="chargeValue">
-              <el-input-number v-model="form.chargeValue" :min="0" :precision="6" :step="1" controls-position="right" style="width: 100%" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="币种" prop="currency">
-              <el-select v-model="form.currency" placeholder="请选择" style="width: 100%">
-                <el-option v-for="c in bms_currency" :key="c.value" :label="c.label" :value="c.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="取值方式" prop="roundMode">
-              <el-select v-model="form.roundMode" placeholder="请选择" style="width: 100%">
-                <el-option v-for="d in bms_round_mode" :key="d.value" :label="d.label" :value="d.value" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="适用国家" prop="countryCode">
-              <el-select v-model="form.countryCode" placeholder="全部国家" clearable filterable style="width: 100%">
-                <el-option label="全部国家" value="" />
-                <el-option v-for="r in regionOptions" :key="r.countryCode2" :label="regionLabel(r)" :value="r.countryCode2" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态" prop="ssCode">
-              <el-radio-group v-model="form.ssCode">
-                <el-radio value="on">有效</el-radio>
-                <el-radio value="of">停用</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="备注" prop="scNote">
-          <el-input v-model="form.scNote" type="textarea" :rows="2" placeholder="请输入备注" maxlength="500" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="open = false">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <surcharge-form-dialog ref="formDialogRef" @success="() => tableRef.refresh()" />
   </div>
 </template>
 
 <script setup name="PriceSurcharge">
-import { listSurcharge, getSurcharge, addSurcharge, updateSurcharge, delSurcharge } from '@/api/price/surcharge'
+import { listSurcharge, delSurcharge } from '@/api/price/surcharge'
+import SurchargeFormDialog from './components/SurchargeFormDialog.vue'
 import { listRegionOptions } from '@/api/data/region'
 import { onMounted } from 'vue'
 
 const { proxy } = getCurrentInstance()
-const { bms_fee_type, bms_round_mode, bms_charge_type, bms_currency } = useDict('bms_fee_type', 'bms_round_mode', 'bms_charge_type', 'bms_currency')
+const { bms_charge_type } = useDict('bms_charge_type')
 
 const tableRef = ref()
-const open = ref(false)
-const title = ref('')
+const formDialogRef = ref()
 const regionOptions = ref([])
 
 const columns = [
-  { label: 'scId', prop: 'scId', align: 'center', width: 80 },
   { label: '附加费名称', prop: 'scName', align: 'center', minWidth: 140, showOverflowTooltip: true },
   { label: '费用类型', prop: 'feeType', align: 'center', width: 110, dict: 'bms_fee_type' },
   { label: '计费方式', prop: 'chargeType', align: 'center', width: 130 },
@@ -192,18 +117,6 @@ const searchColumns = [
   }
 ]
 
-const data = reactive({
-  form: {},
-  rules: {
-    scName: [{ required: true, message: '附加费名称不能为空', trigger: 'blur' }],
-    feeType: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
-    chargeType: [{ required: true, message: '请选择计费方式', trigger: 'change' }],
-    chargeValue: [{ required: true, message: '计费数值不能为空', trigger: 'blur' }],
-    roundMode: [{ required: true, message: '请选择取值方式', trigger: 'change' }]
-  }
-})
-const { form, rules } = toRefs(data)
-
 function queryList(params) {
   return listSurcharge(params)
 }
@@ -213,11 +126,6 @@ function chargeTypeLabel(val) {
   return found ? found.label : (val || '-')
 }
 
-function regionLabel(r) {
-  const cn = r.countryNameCn || r.countryNameEn || ''
-  return cn ? `${r.flagEmoji || ''} ${cn} (${r.countryCode2})`.trim() : r.countryCode2
-}
-
 function countryLabel(code) {
   if (!code) return '全部'
   const found = regionOptions.value.find(r => r.countryCode2 === code)
@@ -243,52 +151,12 @@ function formatChargeValue(row) {
   return v + ' ' + (row.currency || 'CNY')
 }
 
-function reset() {
-  form.value = {
-    scId: undefined,
-    scName: undefined,
-    feeType: 'SURCHARGE',
-    chargeType: 'FIXED',
-    chargeValue: undefined,
-    currency: 'CNY',
-    roundMode: 'HALF_UP',
-    ssCode: 'on',
-    countryCode: undefined,
-    scNote: undefined
-  }
-  proxy.resetForm('formRef')
-}
-
 function handleAdd() {
-  reset()
-  open.value = true
-  title.value = '新建附加费'
+  formDialogRef.value.open()
 }
 
 function handleUpdate(row) {
-  reset()
-  getSurcharge(row.scId).then(res => {
-    const data = res.data || {}
-    if (data.ssCode) data.ssCode = String(data.ssCode).toLowerCase()
-    form.value = data
-    open.value = true
-    title.value = '修改附加费'
-  })
-}
-
-function submitForm() {
-  proxy.$refs['formRef'].validate(valid => {
-    if (!valid) return
-    const payload = { ...form.value }
-    if (!payload.countryCode) payload.countryCode = undefined
-    if (payload.chargeValue != null) payload.chargeValue = Number(payload.chargeValue)
-    const req = payload.scId != null ? updateSurcharge(payload) : addSurcharge(payload)
-    req.then(() => {
-      proxy.$modal.msgSuccess(payload.scId != null ? '修改成功' : '新增成功')
-      open.value = false
-      tableRef.value.refresh()
-    })
-  })
+  formDialogRef.value.open(row)
 }
 
 function handleDelete(ids) {

bms-front/src/views/price/billing/quote.vue

@@ -5,15 +5,9 @@
         <el-card shadow="never">
           <template #header><span>试算参数</span></template>
           <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
-            <el-form-item label="客户ID" prop="customerId">
-              <el-input-number
-                v-model="form.customerId"
-                :min="1"
-                :controls="false"
-                placeholder="请输入客户ID"
-                style="width: 100%"
-              />
-              <div class="form-hint">与套餐绑定客户ID一致；无套餐时走产品默认价</div>
+            <el-form-item label="客户" prop="customerCode">
+              <customer-select v-model="form.customerCode" value-key="customerCode" placeholder="请选择客户" />
+              <div class="form-hint">与套餐绑定客户一致；无套餐时走产品默认价</div>
             </el-form-item>
             <el-form-item label="产品" prop="productCode">
               <el-select
@@ -285,7 +279,7 @@ function handleViewHistory(row) {
 }
 
 const form = reactive({
-  customerId: undefined,
+  customerCode: undefined,
   productCode: undefined,
   countryCode: undefined,
   weight: undefined,
@@ -293,7 +287,7 @@ const form = reactive({
 })
 
 const rules = {
-  customerId: [{ required: true, message: '请输入客户ID', trigger: 'blur' }],
+  customerCode: [{ required: true, message: '请选择客户', trigger: 'change' }],
   productCode: [{ required: true, message: '请选择产品', trigger: 'change' }],
   countryCode: [{ required: true, message: '请选择目的国/地区', trigger: 'change' }],
   weight: [{ required: true, message: '请输入计费重量', trigger: 'blur' }]
@@ -340,7 +334,7 @@ function handleQuote() {
     result.value = null
     errorMsg.value = ''
     const payload = {
-      customerId: form.customerId,
+      customerCode: form.customerCode,
       productCode: form.productCode,
       countryCode: form.countryCode,
       weight: form.weight
@@ -364,7 +358,7 @@ function handleQuote() {
 }
 
 function resetForm() {
-  form.customerId = undefined
+  form.customerCode = undefined
   form.productCode = undefined
   form.countryCode = undefined
   form.weight = undefined

bms-front/src/views/price/set/create.vue

@@ -222,16 +222,18 @@
         title="套餐创建后处于草稿状态，可暂不绑定客户。一个客户只能绑定一个套餐。"
       />
       <el-table :data="form.customers" border empty-text="暂未绑定客户">
-        <el-table-column label="客户ID" min-width="120">
+        <el-table-column label="客户" min-width="220">
           <template #default="{ row }">
-            <el-input v-model="row.customerId" placeholder="客户ID" />
-          </template>
-        </el-table-column>
-        <el-table-column label="客户名称" min-width="140">
-          <template #default="{ row }">
-            <el-input v-model="row.customerName" placeholder="客户名称" />
+            <customer-select
+              v-model="row.customerCode"
+              value-key="customerCode"
+              placeholder="请选择客户"
+              @change="(code, item) => onBindCustomerChange(row, code, item)"
+            />
           </template>
         </el-table-column>
+        <el-table-column label="客户代码" prop="customerCode" min-width="120" show-overflow-tooltip />
+        <el-table-column label="客户名称" prop="customerName" min-width="140" show-overflow-tooltip />
         <el-table-column label="优先级" width="110">
           <template #default="{ row }">
             <el-input-number v-model="row.bindPriority" :min="1" controls-position="right" style="width: 100%" />
@@ -448,6 +450,7 @@ function emptyDetail() {
 function emptyCustomer() {
   return {
     customerId: undefined,
+    customerCode: undefined,
     customerName: '',
     bindPriority: form.customers.length + 1,
     prBegindate: form.effectiveDate,
@@ -463,6 +466,13 @@ function addCustomerRow() {
   form.customers.push(emptyCustomer())
 }
 
+function onBindCustomerChange(row, code, item) {
+  console.log('onBindCustomerChange', row, code, item)
+  row.customerCode = code || undefined
+  row.customerName = item ? item.customerName : ''
+  row.customerId = item ? item.customerId : undefined
+}
+
 function clearCascadeAfterProduct(row) {
   row.countryCode = undefined
   row.countryName = undefined
@@ -545,10 +555,10 @@ function buildPayload(submitFlag) {
     roundMode: d.roundMode || 'HALF_UP'
   }))
   const customers = (form.customers || [])
-    .filter(c => c.customerId)
+    .filter(c => c.customerCode)
     .map(c => ({
       ...c,
-      customerId: Number(c.customerId)
+      customerCode: c.customerCode
     }))
     console.log('details', details)
 

bms-front/src/views/price/set/detail.vue

@@ -142,6 +142,7 @@
       <el-table :data="set.customers || []" border empty-text="暂未绑定客户">
         <el-table-column label="绑定ID" prop="customerPricesetId" width="100" />
         <el-table-column label="客户ID" prop="customerId" width="110" />
+        <el-table-column label="客户代码" prop="customerCode" min-width="120" show-overflow-tooltip />
         <el-table-column label="客户名称" prop="customerName" min-width="140" />
         <el-table-column label="优先级" width="110">
           <template #default="{ row }">{{ row.bindPriority }}{{ row.bindPriority === 1 ? '（最高）' : '' }}</template>
@@ -241,11 +242,19 @@
 
     <el-dialog :title="customerTitle" v-model="customerOpen" width="520px" append-to-body>
       <el-form ref="customerFormRef" :model="customerForm" :rules="customerRules" label-width="110px">
-        <el-form-item label="客户ID" prop="customerId">
-          <el-input v-model="customerForm.customerId" />
+        <el-form-item label="客户" prop="customerCode">
+          <customer-select
+            v-model="customerForm.customerCode"
+            value-key="customerCode"
+            placeholder="请选择客户"
+            @change="onCustomerSelectChange"
+          />
         </el-form-item>
-        <el-form-item label="客户名称" prop="customerName">
-          <el-input v-model="customerForm.customerName" maxlength="100" />
+        <el-form-item label="客户代码">
+          <el-input v-model="customerForm.customerCode" disabled />
+        </el-form-item>
+        <el-form-item label="客户名称">
+          <el-input v-model="customerForm.customerName" disabled />
         </el-form-item>
         <el-form-item label="优先级" prop="bindPriority">
           <el-input-number v-model="customerForm.bindPriority" :min="1" controls-position="right" />
@@ -299,7 +308,7 @@ const customerTitle = ref('')
 const customerFormRef = ref()
 const customerForm = ref({})
 const customerRules = {
-  customerId: [{ required: true, message: '客户ID不能为空', trigger: 'blur' }],
+  customerCode: [{ required: true, message: '请选择客户', trigger: 'change' }],
   prBegindate: [{ required: true, message: '生效日期不能为空', trigger: 'change' }]
 }
 
@@ -605,10 +614,17 @@ function removeDetail(row) {
   }).catch(() => {})
 }
 
+function onCustomerSelectChange(code, item) {
+  customerForm.value.customerCode = code || undefined
+  customerForm.value.customerName = item ? item.customerName : ''
+  customerForm.value.customerId = undefined
+}
+
 function openCustomerDialog(row) {
   customerForm.value = row ? { ...row } : {
     priceSetId: set.value.priceSetId,
     customerId: undefined,
+    customerCode: undefined,
     customerName: '',
     bindPriority: 1,
     prBegindate: set.value.effectiveDate,
@@ -624,7 +640,8 @@ function submitCustomer() {
     const payload = {
       ...customerForm.value,
       priceSetId: set.value.priceSetId,
-      customerId: Number(customerForm.value.customerId)
+      customerId: customerForm.value.customerId,
+      customerCode: customerForm.value.customerCode
     }
     const req = payload.customerPricesetId ? updateSetCustomer(payload) : addSetCustomer(payload)
     req.then(() => {