资费管理

src/views/tariffManagement/config.js

@@ -1,17 +1,16 @@
 export const columns = [
-    { title: window.$t('tariffManagement.simDataPlanId'), dataIndex: 'sim_data_plan_id', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.userId'), dataIndex: 'user_id', align: 'center', width: 200 },
+    { title: window.$t('tariffManagement.id'), dataIndex: 'id', align: 'center', width: 200 },
+    { title: window.$t('tariffManagement.feeCode'), dataIndex: 'feeCode', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.label'), dataIndex: 'label', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.source'), dataIndex: 'source', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.trafficType'), dataIndex: 'traffic_type', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.billingType'), dataIndex: 'billing_type', align: 'center', width: 200 },
+    { title: window.$t('tariffManagement.source'), dataIndex: 'sourceName', align: 'center', width: 200 },
+    { title: window.$t('tariffManagement.trafficType'), dataIndex: 'trafficTypeName', align: 'center', width: 200 },
+    { title: window.$t('tariffManagement.billingType'), dataIndex: 'billingTypeName', align: 'center', width: 200 },
+    { title: window.$t('tariffManagement.billingCycle'), dataIndex: 'billingCycleName', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bag_size', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.billingCycle'), dataIndex: 'billing_cycle', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.settlementCycle'), dataIndex: 'settlement_cycle', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.sourcePrice'), dataIndex: 'source_price', align: 'center', width: 200 },
     { title: window.$t('tariffManagement.pricing'), dataIndex: 'pricing', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.currency'), dataIndex: 'currency', 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.feeStatus'), dataIndex: 'status', align: 'center', width: 200 },
     {
         title: window.$t('global.common.operations'),
         dataIndex: 'id',

src/views/tariffManagement/index.vue

@@ -10,8 +10,8 @@
         <!-- 搜索条件区 -->
         <div class="search-section">
             <a-form :model="searchForm" layout="inline">
-                <a-form-item field="simDataPlanId" :label="$t('tariffManagement.simDataPlanId')">
-                    <a-input v-model="searchForm.ICCID"
+                <a-form-item field="sim_data_plan_id" :label="$t('tariffManagement.simDataPlanId')">
+                    <a-input v-model="searchForm.sim_data_plan_id"
                         :placeholder="$t('lotCard.please') + $t('tariffManagement.simDataPlanId')" allow-clear />
                 </a-form-item>
                 <a-form-item>
@@ -23,19 +23,25 @@
             </a-form>
         </div>
 
+        <div class="audit-btn">
+            <a-button type="text" @click="dictShowModel(1, null)">
+                <template #icon>
+                    <icon-plus-circle />
+                </template>
+                <template #default>{{ $t('form.Add') }}</template>
+            </a-button>
+        </div>
+
         <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination"
             :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
             <template #id="{ record }">
-                <!-- 设置价格 -->
-                <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
-                    :cancel-text="$t('form.Cancel')" @ok="handleprice(record)">
-                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
-                        $t('lotCard.titleOrder') }}</a>
-                </a-popconfirm>
+                <!-- 修改 -->
+                <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)">{{
+                    $t('form.Edit') }}</a>
                 <!-- 删除 -->
-                <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
-                    :cancel-text="$t('form.Cancel')" @ok="handleDel(record)">
-                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{ $t('lotCard.titleCancelOrder')
+                <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
+                    :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)">
+                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{ $t('form.Delete')
                         }}</a>
                 </a-popconfirm>
             </template>
@@ -44,8 +50,8 @@
 
 
         <!-- 弹框 -->
-        <a-modal :title="typeCurrent == 1 ? '添加' : '修改'" v-model:visible="visible" @onCancel="resetForm" centered
-            :maskClosable="false" :footer="null">
+        <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">
                 <a-form-item :label="$t('tariffManagement.simDataPlanId')" field="sim_data_plan_id">
                     <a-input v-model="formState.sim_data_plan_id" />
@@ -84,10 +90,16 @@
                     </a-select>
                 </a-form-item>
                 <a-form-item :label="$t('tariffManagement.billingMethod')" field="billing_method">
-                    <a-input v-model="formState.billing_method" />
+                    <a-select v-model="formState.billing_method">
+                        <a-option v-for=" item in methodList" :key="item.id" :value="item.value">{{ item.label
+                            }}</a-option>
+                    </a-select>
                 </a-form-item>
                 <a-form-item :label="$t('tariffManagement.settlementCycle')" field="settlement_cycle">
-                    <a-input v-model="formState.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>
+                    </a-select>
                 </a-form-item>
                 <a-form-item :label="$t('tariffManagement.pricing')" field="pricing">
                     <a-input v-model="formState.pricing" />
@@ -96,8 +108,9 @@
                     <a-input v-model="formState.currency" />
                 </a-form-item>
                 <a-form-item>
-                    <a-button type="primary" html-type="submit" style="margin-right: 10px;">确定</a-button>
-                    <a-button @click="resetForm">取消</a-button>
+                    <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{ $t('form.Confirm')
+                        }}</a-button>
+                    <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
                 </a-form-item>
             </a-form>
         </a-modal>
@@ -113,29 +126,15 @@ import { deleteTariff, updateTariff, addTariff, tariffList } from "@/api/path/ta
 import { enum_dict } from "@/hooks/enum";
 import { useSystemStore } from '@/store/modules/systemStore'
 
-const useSystem = useSystemStore()
 
 const { proxy } = getCurrentInstance()
 const formRef = ref()
 const searchForm = ref({
-    "simDataPlanId": "",
-    "is_Refuel": "",
-    "refuelingId": "",
-    "dataBundleId": "",
-    "quantity": 0,
-    "ICCID": "",
-    "sendLang": "",
-    "price": "",
-    "totalAmount": "",
-    "currency": "",
-    "userId": 0,
-    "current": 1,
-    "size": 10
+    "sim_data_plan_id": "",
 });
 
 
 
-const dicId = ref('');
 const dataSource = ref([]);
 const route = useRoute();
 const pagination = ref({
@@ -154,7 +153,6 @@ const rowSelection = reactive({
 });
 const selectedKeys = ref([])
 
-const dialogRef = ref()
 
 
 const intData = async () => {
@@ -164,30 +162,46 @@ const intData = async () => {
         ...searchForm.value,
     }
     const { data } = await tariffList(param)
-    dataSource.value = data.records || []
+    dataSource.value = (data.records || []).map((item, index) => {
+        const sourceName = sourceList.value.find(val => val.value == item.source)?.label
+        const trafficTypeName = trafficList.value.find(val => val.value == item.traffic_type)?.label
+        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: "正常"
+        }
+    })
     pagination.value.total = data.total
 }
 
 
 
 
-// 设置价格
-const handleprice = async (info) => {
-}
-
 // 删除
-const handleDel = async (record) => {
-
+const handleDel = async (id) => {
+    const { code } = await deleteTariff({ id })
+    if (code == 200) {
+        Message.success({
+            content: "删除成功！",
+            duration: 2000,
+        })
+        intData()
+    }
 };
 
 //
 
 const handleSearch = () => {
-    formRef.value.validate((errors) => {
-        if (!errors) {
-            intData()
-        }
-    });
+    intData()
 }
 const resetSearch = () => {
     proxy.$refs.formRef.resetFields()
@@ -197,15 +211,18 @@ const resetSearch = () => {
 
 
 
-// 弹窗数据-----------------------------------------------------------------
+// -------------------弹窗数据------------------------------------
 const visible = ref(false);
 const typeCurrent = ref(null);
 const sourceList = ref([])
 const trafficList = ref([])
 const cycleist = ref([])
 const typeList = ref([])
-const formState = reactive({
+const methodList = ref([])
+const settlementCycleList = ref([])
 
+const formState = ref({
+    id: "",
     // 资费名称（必填）
     "label": "",
     // 流量包ID（必填）
@@ -251,56 +268,66 @@ const rules = {
 
 // 提交
 const handleSubmit = ({ values, errors }) => {
-
+    formRef.value.validate(async (errors) => {
+        if (!errors) {
+            values.user_id = Number(values.user_id)
+            if (formState.value.id) {
+                const { code, data } = await updateTariff(values)
+
+                if (code == 200) {
+                    Message.success({
+                        content: "修改成功！",
+                        duration: 2000,
+                    })
+                    visible.value = false;
+                    intData()
+                }
+            } else {
+                const { code, data } = await addTariff(values)
+                if (code == 200) {
+                    Message.success({
+                        content: "添加成功！",
+                        duration: 2000,
+                    })
+                    visible.value = false;
+                    intData()
+                }
+            }
+        }
+    });
 
-}
-// 删除
-const deleteChange = (e) => {
-    dictionaryDelete({ id: e }).then(res => {
-        intData();
-    })
 }
 // 弹框
 const dictShowModel = (type, data) => {
     typeCurrent.value = type;
     visible.value = true;
+    // 编辑
     if (type == 2) {
-        dicId.value = data.id;
-        formState.label = data.label;
-        formState.value = data.value;
-        formState.typeKey = data.type_key;
-        formState.typeLabel = data.type_label;
-        formState.remark = data.remark;
+        Object.assign(formState.value, data);
     }
 }
 // 取消
 const resetForm = () => {
     visible.value = false;
-    dicId.value = null;
     formRef.value.resetFields();
-    Object.assign(formState, {
-        label: '',
-        value: '',
-        typeKey: '',
-        typeLabel: '',
-        remark: '',
-    });
 }
 
 // --------------------------------------------------------
-
+// 获取字典
 const handleDictValue = () => {
     const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
     sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
-    trafficList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFICTYPE)
-    cycleist.value = dictList.filter((item) => item.type_key == enum_dict.BILLINGCYCLE)
-    typeList.value = dictList.filter((item) => item.type_key == enum_dict.BILLINGTYPE)
+    trafficList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFI_CTYPE)
+    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)
 }
 
 
 onMounted(() => {
     handleDictValue()
-    // intData()
+    intData()
 })
 
 
@@ -341,4 +368,8 @@ onMounted(() => {
         }
     }
 }
+
+.audit-btn {
+    margin-bottom: 10px;
+}
 </style>