资费管理

src/views/tariffManagement/config.js

@@ -9,7 +9,7 @@ export const columns = [
     { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bag_size', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.pricing'), dataIndex: 'pricing', align: 'center', width: 200 },
     // { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.settlementCycle'), dataIndex: 'settlementCycleName', align: 'center', width: 200 },
+    { title: window.$t('tariffManagement.settlementCycleLabel'), dataIndex: 'settlement_cycle', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.feeStatus'), dataIndex: 'status', align: 'center', width: 200 },
     {
         title: window.$t('global.common.operations'),

src/views/tariffManagement/index.vue

@@ -4,7 +4,7 @@
         <div class="head-title">
             <span>{{ route.meta.title }} </span>
             <span class="head-title-right">
-                <a-button class="m-r-10" type="primary" @click="dictShowModel(1, null)">{{ $t('form.Add') }}</a-button>
+                <!-- <a-button class="m-r-10" type="primary" @click="dictShowModel(1, null)">{{ $t('form.Add') }}</a-button> -->
             </span>
         </div>
         <!-- 搜索条件区 -->
@@ -53,9 +53,13 @@
         <a-modal :title="typeCurrent == 1 ? $t('form.Add') : $t('form.Edit')" v-model:visible="visible"
             @onCancel="resetForm" centered :maskClosable="false" :footer="null">
             <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit">
+                <div class="formTitle">基本信息</div>
                 <a-form-item :label="$t('tariffManagement.simDataPlanId')" field="sim_data_plan_id">
                     <a-input v-model="formState.sim_data_plan_id" />
                 </a-form-item>
+                <a-form-item :label="$t('tariffManagement.feeCode')" field="feeCode" required="">
+                    <a-input v-model="formState.feeCode" />
+                </a-form-item>
                 <a-form-item :label="$t('tariffManagement.label')" field="label">
                     <a-input v-model="formState.label" />
                 </a-form-item>
@@ -80,7 +84,7 @@
                             }}</a-option>
                     </a-select>
                 </a-form-item>
-                <a-form-item :label="$t('tariffManagement.bagSize')" field="bag_size">
+                <!-- <a-form-item :label="$t('tariffManagement.bagSize')" field="bag_size">
                     <a-input v-model="formState.bag_size" />
                 </a-form-item>
                 <a-form-item :label="$t('tariffManagement.billingCycle')" field="billing_cycle">
@@ -97,7 +101,7 @@
                 </a-form-item>
                 <a-form-item :label="$t('tariffManagement.settlementCycle')" field="settlement_cycle">
                     <a-select v-model="formState.settlement_cycle">
-                        <a-option v-for=" item in settlementCycleList" :key="item.id" :value="item.value">{{ item.label
+                        <a-option v-for=" item in settlementCycleMap" :key="item.id" :value="item.value">{{ item.label
                             }}</a-option>
                     </a-select>
                 </a-form-item>
@@ -106,7 +110,68 @@
                 </a-form-item>
                 <a-form-item :label="$t('tariffManagement.currency')" field="currency">
                     <a-input v-model="formState.currency" />
+                </a-form-item> -->
+                <div class="formTitle">计费信息</div>
+                <a-form-item field="billing_cycle" :label="$t('tariffManagement.billingCycle')" required>
+                    <a-radio-group v-model="formState.billing_cycle">
+                        <a-radio value="1">按天</a-radio>
+                        <a-radio value="2">按月</a-radio>
+                    </a-radio-group>
+                </a-form-item>
+                <a-form-item field="bag_size" :label="$t('tariffManagement.bagSize')">
+                    <a-input v-model="formState.bag_size" :placeholder="$t('tariffManagement.bagSize')" />
+                    <a-select v-model="formState.bagSizeUnit" style="width: 80px; margin-left: 8px;">
+                        <a-option value="KB">KB</a-option>
+                        <a-option value="MB">MB</a-option>
+                        <a-option value="GB">GB</a-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item field="pricing" :label="$t('tariffManagement.pricing')" required>
+                    <a-input v-model="formState.pricing" :placeholder="$t('tariffManagement.pricing')">
+                        <template #append>
+                            元
+                        </template>
+                    </a-input>
+                    <a-select v-model="formState.pricingUnit" style="width: 80px; margin-left: 8px;" placeholder="周期分类">
+                        <a-option value="天">天</a-option>
+                        <a-option value="年">年</a-option>
+                        <a-option value="月">月</a-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item field="settlementCycle" :label="$t('tariffManagement.cycleBuy')">
+                    <a-input v-model="formState.settlementCycleMap.starTime">
+                        <template #prepend>
+                            最短
+                        </template>
+                        <template #append>
+                            个月，最长
+                        </template>
+                    </a-input>
+                    <a-input v-model="formState.settlementCycleMap.endTime" style="width: 50%;">
+                        <template #append>
+                            个月
+                        </template>
+                    </a-input>
+                </a-form-item>
+                <a-form-item field="number" label="连接数">
+                    <a-input v-model="formState.number">
+                        <template #append>
+                            次
+                        </template>
+                    </a-input>
+                </a-form-item>
+                <a-form-item field="voice" label="语音被叫">
+                    <a-input v-model="formState.voice">
+                        <template #append>
+                            元/分
+                        </template>
+                    </a-input>
                 </a-form-item>
+                <a-form-item field="voice" label="计费函数">
+                    <a-input v-model="formState.billingFuc" placeholder="自动生成" :disabled="true" />
+
+                </a-form-item>
+
                 <a-form-item>
                     <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{ $t('form.Confirm')
                         }}</a-button>
@@ -168,14 +233,12 @@ const intData = async () => {
         const billingTypeName = typeList.value.find(val => val.value == item.billing_type)?.label
         const billingCycleName = cycleist.value.find(val => val.value == item.billing_cycle)?.label
         // const methodName = methodList.value.find(val => val.value == item.billing_method)?.label
-        const settlementCycleName = settlementCycleList.value.find(val => val.value == item.settlement_cycle)?.label
         return {
             ...item,
             sourceName,
             trafficTypeName,
             billingTypeName,
             billingCycleName,
-            settlementCycleName,
             feeCode: "NR0" + (index + 1),
             status: "正常"
         }
@@ -219,7 +282,7 @@ const trafficList = ref([])
 const cycleist = ref([])
 const typeList = ref([])
 const methodList = ref([])
-const settlementCycleList = ref([])
+const settlementCycleMap = ref([])
 
 const formState = ref({
     id: "",
@@ -240,13 +303,24 @@ const formState = ref({
     // 计费周期（必填）
     "billing_cycle": "",
     // 计费方式（必填）
-    "billing_method": "",
+    "billing_method": "1",
     // 结算周期（必填）
     "settlement_cycle": "",
     // 价格（必填）
     "pricing": "",
     // 币种（必填）
-    "currency": ""
+    "currency": "",
+
+
+    "settlementCycleMap": {
+        "starTime": "",
+        "endTime": "",
+    },
+    // 流量包大小类型
+    "bagSizeUnit": "KB",
+    "pricingUnit": "月",
+
+
 
 });
 
@@ -260,8 +334,7 @@ const rules = {
     bag_size: [{ required: true, trigger: 'change', }],
     billing_cycle: [{ required: true, trigger: 'change', }],
     billing_method: [{ required: true, trigger: 'change', }],
-    settlement_cycle: [{ required: true, trigger: 'change', }],
-    pricing: [{ required: true, trigger: 'change', }],
+    // pricing: [{ required: true, trigger: 'change', }],
     currency: [{ required: true, trigger: 'change', }],
 };
 
@@ -271,6 +344,20 @@ const handleSubmit = ({ values, errors }) => {
     formRef.value.validate(async (errors) => {
         if (!errors) {
             values.user_id = Number(values.user_id)
+            if (values.settlementCycleMap.starTime && values.settlementCycleMap.starTime) {
+                values.settlement_cycle = values.settlementCycleMap.starTime + '~' + values.settlementCycleMap.endTime
+            } else {
+                Message.warning({
+                    content: "请选择订购周期！",
+                    duration: 2000,
+                })
+            }
+            if (values.bag_size && values.bagSizeUnit) {
+                values.bag_size = values.bag_size + values.bagSizeUnit
+            }
+            if (values.pricingUnit) {
+                values.pricing = values.pricing + '元/' + values.pricingUnit
+            }
             if (formState.value.id) {
                 const { code, data } = await updateTariff(values)
 
@@ -299,11 +386,27 @@ const handleSubmit = ({ values, errors }) => {
 }
 // 弹框
 const dictShowModel = (type, data) => {
+    formRef.value.resetFields();
+    formState.value.settlementCycleMap.starTime = ''
+    formState.value.settlementCycleMap.endTime = ''
     typeCurrent.value = type;
     visible.value = true;
     // 编辑
     if (type == 2) {
+
         Object.assign(formState.value, data);
+        if (data.bag_size) {
+            formState.value.bagSizeUnit = data.bag_size.replace(/\d/g, '')
+            formState.value.bag_size = data.bag_size.match(/\d+/)[0]
+        }
+        if (data.pricing) {
+            formState.value.pricingUnit = data.pricing.split('/')[1] || ''
+            formState.value.pricing = data.pricing.match(/\d+/)[0] || ''
+        }
+        if (data.settlement_cycle) {
+            formState.value.settlementCycleMap.starTime = data.settlement_cycle.split('~')[0] || ''
+            formState.value.settlementCycleMap.endTime = data.settlement_cycle.split('~')[1] || ''
+        }
     }
 }
 // 取消
@@ -321,7 +424,7 @@ const handleDictValue = () => {
     cycleist.value = dictList.filter((item) => item.type_key == enum_dict.BILLING_CYCLE)
     typeList.value = dictList.filter((item) => item.type_key == enum_dict.BILLING_TYPE)
     methodList.value = dictList.filter((item) => item.type_key == enum_dict.BILLING_METHOD)
-    settlementCycleList.value = dictList.filter((item) => item.type_key == enum_dict.SETTLEMENT_CYCLE)
+    settlementCycleMap.value = dictList.filter((item) => item.type_key == enum_dict.SETTLEMENT_CYCLE)
 }
 
 
@@ -372,4 +475,21 @@ onMounted(() => {
 .audit-btn {
     margin-bottom: 10px;
 }
+
+.formTitle {
+    font-size: 18px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center
+}
+
+.formTitle::before {
+    content: "";
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background-color: green;
+    margin-right: 10px;
+
+}
 </style>