修正

package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^1.7.2",
         "crypto-js": "^4.2.0",
         "dayjs": "^1.11.11",
+        "echarts": "^5.5.1",
         "less": "^4.2.0",
         "less-loader": "^12.2.0",
         "lodash": "^4.17.21",
@@ -1706,6 +1707,20 @@
         "domelementtype": "1"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -4988,6 +5003,19 @@
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
 }

src/i18n/zh/flowPool.js

@@ -36,4 +36,12 @@ export default {
     exportCard: "导卡",
     warnTabs: "预警设置",
     infoTabs: "基础信息",
+
+    // 流量池
+    status:'流量池状态',
+    flowPoolStatus:'请选择流量池状态',
+    operator:'运营商名称',
+    operatorName:'请选择运营商名称',
+    start_time:'更新时间',
+    start_timeName:'请选择更新时间'
 }

src/i18n/zh/lotCard.js

@@ -85,6 +85,21 @@ export default {
     appName: '应用程序名称',
 
     // 卡-订单
-    orderType: "订单状态"
+    orderType: "订单状态",
 
+    // 资费管理搜索
+    soundName:'请选择供应商',
+    FlowTypeName:"请选择流量类型",
+    BillingTypeName:'请选择计费分类',
+    ChargingCycleName:'请选择计费周期',
+
+    // 卡清单管理
+    iccidType:'主卡状态',
+    iccidTypeName:'请选择主卡状态',
+    statrt_time:'创建时间',
+    statrt_timeType:'请选择创建时间',
+    Renewal_time:'更新时间',
+    Renewal_timeType:'请选择更新时间',
+    sourceCard:'来源',
+    sourceCardType:'请选择来源'
 }  

src/i18n/zh/tariffManagement.js

@@ -25,5 +25,11 @@ export default {
     priceplan: "超套价格",
 
     // 按钮
-    addPlanBtn: "添加资费计划"
+    addPlanBtn: "添加资费计划",
+
+    // 资费管理搜索
+    soundName: '供应商名称',
+    FlowType: '流量类型',
+    BillingType:'计费分类',
+    ChargingCycle:'计费周期'
 }

src/main.js

@@ -30,6 +30,9 @@ async function appInit() {
   
   window['$t'] = i18n.global.t
 
+
+  app.config.warnHandler = () => null;
+
   // 挂载路由
   await setupRouter(app)
   // 路由准备就绪后挂载APP实例

src/views/flowPool/index.vue

@@ -17,6 +17,19 @@
                     <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('flowPool.label')"
                         allow-clear />
                 </a-form-item>
+              <a-form-item field="label" :label="$t('flowPool.status')">
+                <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.flowPoolStatus')">
+                  <a-option v-for="item of trafficList" :value="item.id" :label="item.label" />
+                </a-select>
+              </a-form-item>
+              <a-form-item field="label" :label="$t('flowPool.operator')">
+                <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.operatorName')">
+                  <a-option v-for="item of sourceList" :value="item.id" :label="item.label" />
+                </a-select>
+              </a-form-item>
+              <a-form-item field="label" :label="$t('flowPool.start_time')">
+                <a-date-picker style="width: 200px;" :placeholder="$t('flowPool.start_timeName')"/>
+              </a-form-item>
                 <a-form-item>
                     <a-space>
                         <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>

src/views/login/login-form.vue

@@ -67,7 +67,7 @@ const handleSubmit = async () => {
   })
   systemStore.setStateValue({
     key: 'user_login_information',
-    value: JSON.stringify(data.userInfo),
+    value: JSON.stringify(data.userInfo?data.userInfo:data),
     localStorage: true,
   })
   systemStore.setStateValue({

src/views/lotCard/cardList/config.js

@@ -11,14 +11,14 @@ export const columns = [
   { title: window.$t('lotCard.tariff'), dataIndex: 'tariff', align: 'center', width: 200 },
   { title: window.$t('lotCard.ServiceUsageMode'), dataIndex: 'serviceName', align: 'center', width: 200 },
   { title: window.$t('lotCard.LastModifyTime'), dataIndex: 'last_modify_time', align: 'center', width: 200 },
-  // {
-  //   title: window.$t('global.common.operations'),
-  //   dataIndex: 'id',
-  //   slotName: 'id',
-  //   align: 'center',
-  //   width: 280,
-  //   fixed: "right",
-  // }
+  {
+    title: window.$t('global.common.operations'),
+    dataIndex: 'id',
+    slotName: 'id',
+    align: 'center',
+    width: 280,
+    fixed: "right",
+  }
 ]
 
 export const columnsTrafficUse = [

src/views/lotCard/cardList/index.vue

@@ -5,7 +5,7 @@
       <span>{{ route.meta.title }} </span>
       <span class="head-title-right">
         <a-popconfirm :content="$t('form.ImportConfirm')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
-          @ok="handleImport()">
+                      @ok="handleImport()">
           <!-- <a-button class="m-r-10" type="primary"> {{ $t('form.Import') }}</a-button> -->
         </a-popconfirm>
       </span>
@@ -15,9 +15,30 @@
     <div class="search-section">
       <a-form :model="searchForm" ref="formRef" layout="inline">
         <a-form-item field="iccid" :label="$t('lotCard.iccid')">
-          <a-input v-model="searchForm.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')" allow-clear />
+          <a-input v-model="searchForm.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')" allow-clear/>
+        </a-form-item>
+        <!--        主卡状态-->
+        <a-form-item field="iccid" :label="$t('lotCard.iccidType')">
+          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('lotCard.iccidTypeName')">
+            <a-option v-for="item of statusList" :value="item.id" :label="item.label"/>
+          </a-select>
+        </a-form-item>
+        <!--        来源-->
+        <a-form-item field="iccid" :label="$t('lotCard.sourceCard')">
+          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('lotCard.sourceCardType')">
+            <a-option v-for="item of sourceList" :value="item.id" :label="item.label"/>
+          </a-select>
+        </a-form-item>
+        <!--        创建时间-->
+        <a-form-item field="iccid" :label="$t('lotCard.statrt_time')">
+          <a-date-picker style="width: 200px;" ::placeholder="$t('lotCard.statrt_timeType')"/>
+        </a-form-item>
+        <!--        更新时间-->
+        <a-form-item field="iccid" :label="$t('lotCard.Renewal_time')">
+          <a-date-picker style="width: 200px;" ::placeholder="$t('lotCard.Renewal_timeType')"/>
         </a-form-item>
         <a-form-item>
+
           <a-space>
             <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
             <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
@@ -27,31 +48,33 @@
     </div>
 
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="pagination"
-      :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }" :expandable="expandable"
-      @page-change="evChangePage">
+             :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }"
+             :expandable="expandable"
+             @page-change="evChangePage">
       <template #id="{ record }">
         <!-- 查看流量消耗 -->
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">{{
-          $t('lotCard.trafficUse') }}</a>
+            $t('lotCard.trafficUse')
+          }}</a>
       </template>
 
     </a-table>
     <!-- 查看流量消耗 -->
-    <trafficUseDialog ref="trafficUseDialogRef" />
+    <trafficUseDialog ref="trafficUseDialogRef"/>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, getCurrentInstance, h } from "vue";
-import { useRoute } from "vue-router";
-import { columns } from "./config";
-import { Message, Notification } from '@arco-design/web-vue'
-import { cardInfoList, cardInfoImport, orderList, orderFlowData } from "@/api/path/lotCard.api"
+import {onMounted, ref, reactive, getCurrentInstance, h} from "vue";
+import {useRoute} from "vue-router";
+import {columns} from "./config";
+import {Message, Notification} from '@arco-design/web-vue'
+import {cardInfoList, cardInfoImport, orderList, orderFlowData} from "@/api/path/lotCard.api"
 import trafficUseDialog from "./trafficUseDialog.vue";
-import { enum_dict } from "@/hooks/enum";
+import {enum_dict} from "@/hooks/enum";
 import list from "./list.vue";
 
-const { proxy } = getCurrentInstance()
+const {proxy} = getCurrentInstance()
 const formRef = ref()
 const searchForm = ref({
   "iccid": "",
@@ -84,12 +107,11 @@ const intData = async () => {
     size: pagination.value.pageSize,
     ...searchForm.value,
   }
-  const { data } = await cardInfoList(param)
-
+  const {data} = await cardInfoList(param)
   dataSource.value = (data.records || []).map((item) => {
     // 卡下级信息
     let orderArr = []
-    orderList({ current: 1, size: 999, ICCID: item.iccid }).then(res => {
+    orderList({current: 1, size: 999, ICCID: item.iccid}).then(res => {
 
       res.data.records?.forEach(async (orderItem, index) => {
         // const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
@@ -158,12 +180,10 @@ const expandable = {
   expandedRowRender: (record) => {
     if (record.orderArr && Array.isArray(record.orderArr) && record.orderArr.length > 0) {
       return h('div', {}, [
-        h(list, { 'data': record.orderArr })
+        h(list, {'data': record.orderArr})
       ]);
     }
     return h('div', {}, '暂无数据')
-
-
   },
 };
 
@@ -181,7 +201,7 @@ const handleImport = async () => {
       iccid: item
     }
   })
-  const { code, data } = await cardInfoImport({ iccidList })
+  const {code, data} = await cardInfoImport({iccidList})
   if (code == 200) {
     Message.success({
       content: data,
@@ -192,6 +212,7 @@ const handleImport = async () => {
 
 };
 
+// 查看当前流量消耗详情
 const handletrafficUseDialog = (data) => {
   console.log(data.iccid, "data.iccid")
   trafficUseDialogRef.value.open(data.iccid)

src/views/system/dict/index.vue

@@ -1,58 +1,60 @@
 <template>
-    <div class="container">
-        <div class="head-title">
-            <span> 字典管理 </span>
-            <div class="form-row">
-                <a-input v-model="formData.type_label" style="margin: 0 0.6rem" placeholder="请输入字典名称" />
-                <a-input v-model="formData.type_key" style="margin: 0 0.6rem" placeholder="请输入字典类型" />
-                <a-button type="primary" style="margin: 0 0.6rem" @click="intData">查询</a-button>
-                <a-button style="margin: 0 0.6rem 0 0" @click="resetSelectData">重置</a-button>
-                <a-button type="primary" @click="dictShowModel(1, null)">添加字典</a-button>
-            </div>
-        </div>
-
-        <a-table :data="dataSource" :columns="columns" :scroll="{ x: 'auto' }" :pagination="pageData"
-            @page-change="evChangePage">
-            <template #operation="{ record }">
-                <a class="a-link" href="javascript:;" style="margin: 0 1rem;" @click="dictShowModel(2, record)">修改</a>
-                <a-popconfirm :content="`是否确认删除字典编号为 ${record.id} 的数据项?`" @ok="deleteChange(record.id)" type="warning">
-                    <a class="a-link" href="javascript:;" style="color: red;">删除</a>
-                </a-popconfirm>
-
-            </template>
-        </a-table>
-
-        <!-- 弹框 -->
-        <a-modal :title="typeCurrent == 1 ? '添加字典' : '修改字典'" 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="字典名称" field="typeLabel">
-                    <a-input v-model="formState.typeLabel" />
-                </a-form-item>
-                <a-form-item label="字典类型" field="typeKey">
-                    <a-input v-model="formState.typeKey" />
-                </a-form-item>
-                <a-form-item label="数据标签" field="label">
-                    <a-input v-model="formState.label" />
-                </a-form-item>
-                <a-form-item label="数据键值" field="value">
-                    <a-input v-model="formState.value" />
-                </a-form-item>
-                <a-form-item label="备注" field="remark">
-                    <a-textarea v-model="formState.remark" />
-                </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-form-item>
-            </a-form>
-        </a-modal>
+  <div class="container">
+    <div class="head-title">
+      <span> 字典管理 </span>
+      <div class="form-row">
+        <a-input v-model="formData.type_label" style="margin: 0 0.6rem" placeholder="请输入字典名称"/>
+        <a-input v-model="formData.type_key" style="margin: 0 0.6rem" placeholder="请输入字典类型"/>
+        <a-button type="primary" style="margin: 0 0.6rem" @click="intData">查询</a-button>
+        <a-button style="margin: 0 0.6rem 0 0" @click="resetSelectData">重置</a-button>
+        <a-button type="primary" @click="dictShowModel(1, null)">添加字典</a-button>
+      </div>
     </div>
+
+    <a-table :data="dataSource"  row-key="id" :columns="columns" :scroll="{ x: 'auto' }" :pagination="pageData"
+             @page-change="evChangePage">
+      <template #operation="{ record }">
+        <a class="a-link" href="javascript:;" style="margin: 0 1rem;" @click="dictShowModel(2, record)">修改</a>
+        <a-popconfirm :content="`是否确认删除字典编号为 ${record.id} 的数据项?`" @ok="deleteChange(record.id)"
+                      type="warning">
+          <a class="a-link" href="javascript:;" style="color: red;">删除</a>
+        </a-popconfirm>
+
+      </template>
+    </a-table>
+
+    <!-- 弹框 -->
+    <a-modal :title="typeCurrent == 1 ? '添加字典' : '修改字典'" 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="字典名称" field="typeLabel">
+          <a-input v-model="formState.typeLabel"/>
+        </a-form-item>
+        <a-form-item label="字典类型" field="typeKey">
+          <a-input v-model="formState.typeKey"/>
+        </a-form-item>
+        <a-form-item label="数据标签" field="label">
+          <a-input v-model="formState.label"/>
+        </a-form-item>
+        <a-form-item label="数据键值" field="value">
+          <a-input v-model="formState.value"/>
+        </a-form-item>
+        <a-form-item label="备注" field="remark">
+          <a-textarea v-model="formState.remark"/>
+        </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-form-item>
+      </a-form>
+    </a-modal>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from "vue";
-import { dictionaryList, dictionaryAdd, dictionaryDelete, dictionaryUpdate } from '@/api/path/dict';
+import {onMounted, ref, reactive} from "vue";
+import {dictionaryList, dictionaryAdd, dictionaryDelete, dictionaryUpdate} from '@/api/path/dict';
 
 const visible = ref(false);
 const typeCurrent = ref(null);
@@ -60,168 +62,183 @@ const formRef = ref();
 const dicId = ref(null);
 
 const formData = ref({
-    type_key: '',
-    type_label: '',
+  type_key: '',
+  type_label: '',
 
 });
 const columns = ref([
-    { title: '数据键值', dataIndex: 'value', align: 'center', width: 120 },
-    { title: '数据标签', dataIndex: 'label', align: 'center', width: 120 },
-    { title: '字典名称', dataIndex: 'type_label', align: 'center', width: 120 },
-    { title: '字典类型', dataIndex: 'type_key', align: 'center', width: 150 },
+  {title: '数据键值', dataIndex: 'value', align: 'center', width: 120},
+  {title: '数据标签', dataIndex: 'label', align: 'center', width: 120},
+  {title: '字典名称', dataIndex: 'type_label', align: 'center', width: 120},
+  {title: '字典类型', dataIndex: 'type_key', align: 'center', width: 150},
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    align: 'center',
+    width: 180
+  },
+  {title: '创建时间', dataIndex: 'created_at', align: 'center', width: 200},
+  {
+    title: '操作',
+    dataIndex: 'id',
+    slotName: 'operation',
+    align: 'center',
+    width: 220,
+    fixed: "right",
+  }
+])
+const rules = {
+  label: [{required: true, trigger: 'change',}],
+  value: [
     {
-        title: '备注',
-        dataIndex: 'remark',
-        align: 'center',
-        width: 180
+      required: true,
+      trigger: 'change',
     },
-    { title: '创建时间', dataIndex: 'created_at', align: 'center', width: 200 },
+  ],
+  typeKey: [
     {
-        title: '操作',
-        dataIndex: 'id',
-        slotName: 'operation',
-        align: 'center',
-        width: 220,
-        fixed: "right",
-    }
-])
-const rules = {
-    label: [{ required: true, trigger: 'change', }],
-    value: [
-        {
-            required: true,
-            trigger: 'change',
-        },
-    ],
-    typeKey: [
-        {
-            required: true,
-            trigger: 'change',
-        },
-    ],
-    typeLabel: [
-        {
-            required: true,
-            trigger: 'change',
-        },
-    ],
-    remark: [
-        {
-            required: true,
-            trigger: 'change',
-        },
-    ],
+      required: true,
+      trigger: 'change',
+    },
+  ],
+  typeLabel: [
+    {
+      required: true,
+      trigger: 'change',
+    },
+  ],
+  remark: [
+    {
+      required: true,
+      trigger: 'change',
+    },
+  ],
 };
 
 const formState = reactive({
-    label: '',
-    value: '',
-    typeKey: '',
-    typeLabel: '',
-    remark: '',
+  label: '',
+  value: '',
+  typeKey: '',
+  typeLabel: '',
+  remark: '',
 });
 
 const pageData = ref({
-    total: 0,
-    pageSize: 10,
-    current: 1,
+  total: 0,
+  pageSize: 15,
+  current: 1,
 })
 const dataSource = ref([]);
 
 // 列表
 const intData = async () => {
-    const param = {
-        current: pageData.value.current,
-        size: pageData.value.pageSize,
-        ...formData.value
+  const param = {
+    current: pageData.value.current,
+    size: pageData.value.pageSize,
+    ...formData.value
+  }
+  const {data} = await dictionaryList(param)
+  dataSource.value = data.records.reduce((acc, res) => {
+    let existingItem = acc.find(item => item.type_key === res.type_key);
+
+    if (existingItem) {
+      // 如果已经存在相同type_key的项，将当前项添加到其children数组中
+      if (!existingItem.children) {
+        existingItem.children = [];
+      }
+      existingItem.children.push(res);
+    } else {
+      // 如果不存在相同type_key的项，直接添加到结果数组acc中
+      acc.push(res);
     }
-    const { data } = await dictionaryList(param)
-    dataSource.value = data.records;
-    pageData.value.total = data.total;
+
+    return acc;
+  }, []);
+  pageData.value.total = data.total;
 }
 // 提交
-const handleSubmit = ({ values, errors }) => {
-    const submitData = {
-        label: formState.label,
-        value: formState.value,
-        typeKey: formState.typeKey,
-        typeLabel: formState.typeLabel,
-        remark: formState.remark,
-        id: typeCurrent.value == 1 ? undefined : dicId.value
-    }
-    if (typeCurrent.value == 1) {
-        dictionaryAdd(submitData).then(res => {
-            intData();
-            resetForm();
-        })
-    } else {
-        dictionaryUpdate(submitData).then(res => {
-            intData();
-            resetForm();
-        })
-    }
+const handleSubmit = ({values, errors}) => {
+  const submitData = {
+    label: formState.label,
+    value: formState.value,
+    typeKey: formState.typeKey,
+    typeLabel: formState.typeLabel,
+    remark: formState.remark,
+    id: typeCurrent.value == 1 ? undefined : dicId.value
+  }
+  if (typeCurrent.value == 1) {
+    dictionaryAdd(submitData).then(res => {
+      intData();
+      resetForm();
+    })
+  } else {
+    dictionaryUpdate(submitData).then(res => {
+      intData();
+      resetForm();
+    })
+  }
 
 }
 // 删除
 const deleteChange = (e) => {
-    dictionaryDelete({ id: e }).then(res => {
-        intData();
-    })
+  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;
-    }
+  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;
+  }
 }
 // 取消
 const resetForm = () => {
-    visible.value = false;
-    dicId.value = null;
-    formRef.value.resetFields();
-    Object.assign(formState, {
-        label: '',
-        value: '',
-        typeKey: '',
-        typeLabel: '',
-        remark: '',
-    });
+  visible.value = false;
+  dicId.value = null;
+  formRef.value.resetFields();
+  Object.assign(formState, {
+    label: '',
+    value: '',
+    typeKey: '',
+    typeLabel: '',
+    remark: '',
+  });
 }
 
 const evChangePage = (page) => {
-    pageData.value.current = page
-    intData()
+  pageData.value.current = page
+  intData()
 }
 
 // 重置
 const resetSelectData = () => {
-    formData.value.type_key = "";
-    formData.value.type_label = "";
-    intData();
+  formData.value.type_key = "";
+  formData.value.type_label = "";
+  intData();
 }
 
 onMounted(() => {
-    intData();
+  intData();
 })
 
 </script>
 
 <style scoped lang="less">
 .container {
-    .head-title {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .form-row {
-        display: flex;
-    }
+  .head-title {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .form-row {
+    display: flex;
+  }
 }
 </style>

src/views/tariffManagement/index.vue

@@ -1,320 +1,362 @@
 <!-- 资费管理 -->
 <template>
-    <div class="container">
-        <div class="head-title">
-            <span>{{ route.meta.title }} </span>
-            <span class="head-title-right">
+  <div class="container">
+    <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> -->
             </span>
-        </div>
-        <!-- 搜索条件区 -->
-        <div class="search-section">
-            <a-form :model="searchForm" layout="inline">
-                <a-form-item field="label" :label="$t('tariffManagement.label')">
-                    <a-input v-model="searchForm.label"
-                        :placeholder="$t('lotCard.please') + $t('tariffManagement.label')" allow-clear />
-                </a-form-item>
-                <a-form-item>
-                    <a-space>
-                        <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
-                        <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
-                    </a-space>
-                </a-form-item>
-            </a-form>
-        </div>
-
-        <div class="audit-btn">
-            <a-button type="text" @click="dictShowModel(1, null)" v-if="role.getRole == 1">
-                <template #icon>
-                    <icon-plus-circle />
-                </template>
-                <template #default>{{ $t('form.Add') }}</template>
-            </a-button>
-        </div>
-
-        <a-table row-key="id" :data="dataSource" :columns="role.getRole == 1 ? columns : columnsCustomer"
-            :pagination="pagination" :scroll="{ x: 'auto' }" @page-change="evChangePage">
-            <template #id="{ record }">
-                <!-- 修改 -->
-                <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)">{{
-                    $t('form.Edit') }}</a>
-                <!-- 删除 -->
-                <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>
+    </div>
+    <!-- 搜索条件区 -->
+    <div class="search-section">
+      <a-form :model="searchForm" layout="inline">
+        <!--        资费名称-->
+        <a-form-item field="label" :label="$t('tariffManagement.label')">
+          <a-input v-model="searchForm.label"
+                   :placeholder="$t('lotCard.please') + $t('tariffManagement.label')" allow-clear/>
+        </a-form-item>
+        <!--        供应商-->
+        <a-form-item field="label" :label="$t('tariffManagement.soundName')">
+          <a-select v-model="value" :style="{width:'320px'}" :placeholder="$t('lotCard.soundName')">
+            <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{
+                item.label
+              }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+        <!--         流量类型-->
+        <a-form-item field="label" :label="$t('tariffManagement.FlowType')">
+          <a-select v-model="value" :style="{width:'320px'}" :placeholder="$t('lotCard.FlowTypeName')">
+            <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{
+                item.label
+              }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+        <!--计费类型-->
+        <a-form-item field="label" :label="$t('tariffManagement.BillingType')">
+          <a-select v-model="value" :style="{width:'320px'}" :placeholder="$t('lotCard.BillingTypeName')">
+            <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{
+                item.label
+              }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+<!--        计费周期-->
+        <a-form-item field="label" :label="$t('tariffManagement.ChargingCycle')">
+          <a-select v-model="formState.pricingUnit" style="width: 140px; margin-left: 8px;"  :placeholder="$t('lotCard.ChargingCycleName')">
+            <a-option value="天">天</a-option>
+            <a-option value="年">年</a-option>
+            <a-option value="月">月</a-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item>
+          <a-space>
+            <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
+            <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+    </div>
 
-        </a-table>
-
-
-        <!--资费 弹框 -->
-        <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.source')" field="source">
-                    <a-select v-model="formState.source">
-                        <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <template v-if="formState.source">
-                    <a-form-item :label="$t('tariffManagement.simDataPlanId')" field="sim_data_plan_id">
-                        <a-select v-model="formState.sim_data_plan_id">
-                            <a-option v-for=" item in planList" :key="item.superior_id" :value="item.id"> 流量包{{ item.id
-                                }}</a-option>
-                        </a-select>
-                    </a-form-item>
-                </template>
-
-                <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>
-                <a-form-item :label="$t('tariffManagement.userId')" field="user_id">
-                    <a-select v-model="formState.user_id">
-                        <a-option v-for=" item in userIdList" :key="item.id" :value="item.id">{{ item.name
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item :label="$t('tariffManagement.trafficType')" field="traffic_type">
-                    <a-select v-model="formState.traffic_type">
-                        <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item :label="$t('tariffManagement.billingType')" field="billing_type">
-                    <a-select v-model="formState.billing_type">
-                        <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <!-- <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">
-                    <a-select v-model="formState.billing_cycle">
-                        <a-option v-for=" item in cycleist" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item :label="$t('tariffManagement.billingMethod')" field="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-select v-model="formState.settlement_cycle">
-                        <a-option v-for=" item in settlementCycleMap" :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" />
-                </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>
-                    <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
-                </a-form-item>
-            </a-form>
-        </a-modal>
-
-
-
-        <a-modal width="70%" :visible="planVisible" title="选择流量包" @ok="handleSubmitPlan" @cancel="handleCancel">
-            <!-- 搜索条件区 -->
-            <div class="search-section">
-                <a-form :model="formData" layout="inline">
-                    <a-form-item field="label" :label="$t('tariffManagement.label')">
-                        <a-input v-model="formData.label"
-                            :placeholder="$t('lotCard.please') + $t('tariffManagement.label')" allow-clear />
-                    </a-form-item>
-                    <a-form-item>
-                        <a-space>
-                            <a-button type="primary" @click="handleSearchPlan">{{ $t('form.Search') }}</a-button>
-                            <a-button @click="resetSearchPlan">{{ $t('form.Reset') }}</a-button>
-                        </a-space>
-                    </a-form-item>
-                </a-form>
-            </div>
-            <a-table row-key="id" :data="planList" :columns="planColumns" :scroll="{ x: 'auto' }"
-                :row-selection="rowSelectionPlan" v-model:selectedKeys="selectedKeysPlan">
-
-            </a-table>
-
-        </a-modal>
+    <div class="audit-btn">
+      <a-button type="text" @click="dictShowModel(1, null)" v-if="role.getRole == 1">
+        <template #icon>
+          <icon-plus-circle/>
+        </template>
+        <template #default>{{ $t('form.Add') }}</template>
+      </a-button>
     </div>
+
+    <a-table row-key="id" :data="dataSource" :columns="role.getRole == 1 ? columns : columnsCustomer"
+             :pagination="pagination" :scroll="{ x: 'auto' }" @page-change="evChangePage">
+      <template #id="{ record }">
+        <!-- 修改 -->
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)">{{
+            $t('form.Edit')
+          }}</a>
+        <!-- 删除 -->
+        <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>
+
+    </a-table>
+
+
+    <!--资费 弹框 -->
+    <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.source')" field="source">
+          <a-select v-model="formState.source">
+            <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{
+                item.label
+              }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+        <template v-if="formState.source">
+          <a-form-item :label="$t('tariffManagement.simDataPlanId')" field="sim_data_plan_id">
+            <a-select v-model="formState.sim_data_plan_id">
+              <a-option v-for=" item in planList" :key="item.superior_id" :value="item.id"> 流量包{{
+                  item.id
+                }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+        </template>
+
+        <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>
+        <a-form-item :label="$t('tariffManagement.userId')" field="user_id">
+          <a-select v-model="formState.user_id">
+            <a-option v-for=" item in userIdList" :key="item.id" :value="item.id">{{
+                item.name
+              }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('tariffManagement.trafficType')" field="traffic_type">
+          <a-select v-model="formState.traffic_type">
+            <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{
+                item.label
+              }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('tariffManagement.billingType')" field="billing_type">
+          <a-select v-model="formState.billing_type">
+            <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{
+                item.label
+              }}
+            </a-option>
+          </a-select>
+        </a-form-item>
+        <!-- <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">
+            <a-select v-model="formState.billing_cycle">
+                <a-option v-for=" item in cycleist" :key="item.id" :value="item.value">{{ item.label
+                    }}</a-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('tariffManagement.billingMethod')" field="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-select v-model="formState.settlement_cycle">
+                <a-option v-for=" item in settlementCycleMap" :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" />
+        </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>
+          <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+
+    <a-modal width="70%" :visible="planVisible" title="选择流量包" @ok="handleSubmitPlan" @cancel="handleCancel">
+      <!-- 搜索条件区 -->
+      <div class="search-section">
+        <a-form :model="formData" layout="inline">
+          <a-form-item field="label" :label="$t('tariffManagement.label')">
+            <a-input v-model="formData.label"
+                     :placeholder="$t('lotCard.please') + $t('tariffManagement.label')" allow-clear/>
+          </a-form-item>
+          <a-form-item>
+            <a-space>
+              <a-button type="primary" @click="handleSearchPlan">{{ $t('form.Search') }}</a-button>
+              <a-button @click="resetSearchPlan">{{ $t('form.Reset') }}</a-button>
+            </a-space>
+          </a-form-item>
+        </a-form>
+      </div>
+      <a-table row-key="id" :data="planList" :columns="planColumns" :scroll="{ x: 'auto' }"
+               :row-selection="rowSelectionPlan" v-model:selectedKeys="selectedKeysPlan">
+
+      </a-table>
+
+    </a-modal>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, getCurrentInstance, nextTick, watch } from "vue";
-import { useRoute } from "vue-router";
-import { columns, columnsCustomer, planColumns } from "./config";
-import { Message, Notification } from '@arco-design/web-vue'
-import { deleteTariff, updateTariff, addTariff, tariffList } from "@/api/path/tariffManagement.api"
-import { getDataPlanList } from "@/api/path/lotCard.api"
-import { userList } from '@/api/path/system.api'
-
-import { enum_dict } from "@/hooks/enum";
-import { useSystemStore } from '@/store/modules/systemStore'
+import {onMounted, ref, reactive, getCurrentInstance, nextTick, watch} from "vue";
+import {useRoute} from "vue-router";
+import {columns, columnsCustomer, planColumns} from "./config";
+import {Message, Notification} from '@arco-design/web-vue'
+import {deleteTariff, updateTariff, addTariff, tariffList} from "@/api/path/tariffManagement.api"
+import {getDataPlanList} from "@/api/path/lotCard.api"
+import {userList} from '@/api/path/system.api'
+
+import {enum_dict} from "@/hooks/enum";
+import {useSystemStore} from '@/store/modules/systemStore'
+
 const role = useSystemStore()
 
 
-const { proxy } = getCurrentInstance()
+const {proxy} = getCurrentInstance()
 const formRef = ref()
 const searchForm = ref({
-    "label": "",
+  "label": "",
 });
 
 
-
 const dataSource = ref([]);
 const route = useRoute();
 const pagination = ref({
-    total: 0,
-    pageSize: 10,
-    current: 1,
+  total: 0,
+  pageSize: 10,
+  current: 1,
 })
 
 
-
-
 const rowSelection = reactive({
-    type: 'checkbox',
-    showCheckedAll: true,
-    onlyCurrent: false,
+  type: 'checkbox',
+  showCheckedAll: true,
+  onlyCurrent: false,
 });
 const selectedKeys = ref([])
 
 
-
 const intData = async () => {
-    const param = {
-        current: pagination.value.current,
-        size: pagination.value.pageSize,
-        ...searchForm.value,
+  const param = {
+    current: pagination.value.current,
+    size: pagination.value.pageSize,
+    ...searchForm.value,
+  }
+  const {data} = await tariffList(param)
+  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
+    return {
+      ...item,
+      sourceName,
+      trafficTypeName,
+      billingTypeName,
+      billingCycleName,
+      feeCode: "NR0" + (index + 1),
+      status: "正常"
     }
-    const { data } = await tariffList(param)
-    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
-        return {
-            ...item,
-            sourceName,
-            trafficTypeName,
-            billingTypeName,
-            billingCycleName,
-            feeCode: "NR0" + (index + 1),
-            status: "正常"
-        }
-    })
-    pagination.value.total = data.total
+  })
+  pagination.value.total = data.total
 }
 
 
-
-
 // 删除
 const handleDel = async (id) => {
-    const { code } = await deleteTariff({ id })
-    if (code == 200) {
-        Message.success({
-            content: "删除成功！",
-            duration: 2000,
-        })
-        intData()
-    }
+  const {code} = await deleteTariff({id})
+  if (code == 200) {
+    Message.success({
+      content: "删除成功！",
+      duration: 2000,
+    })
+    intData()
+  }
 };
 
 const evChangePage = (page) => {
-    pagination.value.current = page
-    intData()
+  pagination.value.current = page
+  intData()
 }
 
 const handleSearch = () => {
-    intData()
+  intData()
 }
 const resetSearch = () => {
-    searchForm.value.label = ""
-    intData()
+  searchForm.value.label = ""
+  intData()
 }
 
 
-
-
 // -------------------弹窗数据------------------------------------
 const planList = ref([])
 const userIdList = ref([])
@@ -330,164 +372,164 @@ const methodList = ref([])
 const settlementCycleMap = ref([])
 
 const formState = ref({
-    id: "",
-    // 资费名称（必填）
-    "label": "",
-    // 流量包ID（必填）
-    "sim_data_plan_id": null,
-    // 用户ID（必填）
-    "user_id": null,
-    // 来源（必填）
-    "source": "",
-    // 流量类型（必填）
-    "traffic_type": "",
-    // 计费类型（必填）
-    "billing_type": "",
-    // 流量包Size（必填）
-    "bag_size": "",
-    // 计费周期（必填）
-    "billing_cycle": "",
-    // 计费方式（必填）
-    "billing_method": "1",
-    // 结算周期（必填）
-    "settlement_cycle": "",
-    // 价格（必填）
-    "pricing": "",
-    // 币种（必填）
-    "currency": "",
-
-
-    "settlementCycleMap": {
-        "starTime": "",
-        "endTime": "",
-    },
-    // 流量包大小类型
-    "bagSizeUnit": "KB",
-    "pricingUnit": "月",
+  id: "",
+  // 资费名称（必填）
+  "label": "",
+  // 流量包ID（必填）
+  "sim_data_plan_id": null,
+  // 用户ID（必填）
+  "user_id": null,
+  // 来源（必填）
+  "source": "",
+  // 流量类型（必填）
+  "traffic_type": "",
+  // 计费类型（必填）
+  "billing_type": "",
+  // 流量包Size（必填）
+  "bag_size": "",
+  // 计费周期（必填）
+  "billing_cycle": "",
+  // 计费方式（必填）
+  "billing_method": "1",
+  // 结算周期（必填）
+  "settlement_cycle": "",
+  // 价格（必填）
+  "pricing": "",
+  // 币种（必填）
+  "currency": "",
+
+
+  "settlementCycleMap": {
+    "starTime": "",
+    "endTime": "",
+  },
+  // 流量包大小类型
+  "bagSizeUnit": "KB",
+  "pricingUnit": "月",
 });
 
 const rules = {
-    label: [{ required: true, trigger: 'change', }],
-    sim_data_plan_id: [{ required: true, trigger: 'change', }],
-    user_id: [{ required: true, trigger: 'change', }],
-    source: [{ required: true, trigger: 'change', }],
-    traffic_type: [{ required: true, trigger: 'change', }],
-    billing_type: [{ required: true, trigger: 'change', }],
-    bag_size: [{ required: true, trigger: 'change', }],
-    billing_cycle: [{ required: true, trigger: 'change', }],
-    billing_method: [{ required: true, trigger: 'change', }],
-    // pricing: [{ required: true, trigger: 'change', }],
-    currency: [{ required: true, trigger: 'change', }],
+  label: [{required: true, trigger: 'change',}],
+  sim_data_plan_id: [{required: true, trigger: 'change',}],
+  user_id: [{required: true, trigger: 'change',}],
+  source: [{required: true, trigger: 'change',}],
+  traffic_type: [{required: true, trigger: 'change',}],
+  billing_type: [{required: true, trigger: 'change',}],
+  bag_size: [{required: true, trigger: 'change',}],
+  billing_cycle: [{required: true, trigger: 'change',}],
+  billing_method: [{required: true, trigger: 'change',}],
+  // pricing: [{ required: true, trigger: 'change', }],
+  currency: [{required: true, trigger: 'change',}],
 };
 
 
 // 提交
-const handleSubmit = ({ values, errors }) => {
-    formRef.value.validate(async (errors) => {
-        if (!errors) {
-            const formVal = JSON.parse(JSON.stringify(values))
-            delete formVal.settlementCycleMap
-            delete formVal.bagSizeUnit
-            delete formVal.pricingUnit
-
-            formVal.currency = '1'
-            formVal.user_id = Number(values.user_id)
-            formVal.sim_data_plan_id = String(values.sim_data_plan_id)
-            if (values.settlementCycleMap.starTime && values.settlementCycleMap.starTime) {
-                formVal.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(formVal)
-
-                if (code == 200) {
-                    Message.success({
-                        content: "修改成功！",
-                        duration: 2000,
-                    })
-                    visible.value = false;
-                    intData()
-                }
-            } else {
-                const { code, data } = await addTariff(formVal)
-                if (code == 200) {
-                    Message.success({
-                        content: "添加成功！",
-                        duration: 2000,
-                    })
-                    visible.value = false;
-                    intData()
-                }
-            }
+const handleSubmit = ({values, errors}) => {
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const formVal = JSON.parse(JSON.stringify(values))
+      delete formVal.settlementCycleMap
+      delete formVal.bagSizeUnit
+      delete formVal.pricingUnit
+
+      formVal.currency = '1'
+      formVal.user_id = Number(values.user_id)
+      formVal.sim_data_plan_id = String(values.sim_data_plan_id)
+      if (values.settlementCycleMap.starTime && values.settlementCycleMap.starTime) {
+        formVal.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(formVal)
+
+        if (code == 200) {
+          Message.success({
+            content: "修改成功！",
+            duration: 2000,
+          })
+          visible.value = false;
+          intData()
+        }
+      } else {
+        const {code, data} = await addTariff(formVal)
+        if (code == 200) {
+          Message.success({
+            content: "添加成功！",
+            duration: 2000,
+          })
+          visible.value = false;
+          intData()
         }
-    });
+      }
+    }
+  });
 
 }
 // 弹框
 const dictShowModel = (type, data) => {
-    handleModelId()
-    formRef.value.resetFields();
-    formState.value.settlementCycleMap.starTime = ''
-    formState.value.settlementCycleMap.endTime = ''
-    typeCurrent.value = type;
-
-    // 编辑
-    if (type == 2) {
-        Object.assign(formState.value, data);
-        formState.value.sim_data_plan_id = Number(formState.value.sim_data_plan_id)
-        formState.value.user_id = Number(formState.value.user_id)
-        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] || ''
-        }
+  handleModelId()
+  formRef.value.resetFields();
+  formState.value.settlementCycleMap.starTime = ''
+  formState.value.settlementCycleMap.endTime = ''
+  typeCurrent.value = type;
+
+  // 编辑
+  if (type == 2) {
+    Object.assign(formState.value, data);
+    formState.value.sim_data_plan_id = Number(formState.value.sim_data_plan_id)
+    formState.value.user_id = Number(formState.value.user_id)
+    if (data.bag_size) {
+      formState.value.bagSizeUnit = data.bag_size.replace(/\d/g, '')
+      formState.value.bag_size = data.bag_size.match(/\d+/)[0]
     }
-    nextTick(() => {
-        visible.value = true;
-    })
+    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] || ''
+    }
+  }
+  nextTick(() => {
+    visible.value = true;
+  })
 }
 
 // 获取id数组
 const handleModelId = async () => {
-    const param = {
-        current: 1,
-        size: 999,
-    }
-    userList(param).then(res => {
-        userIdList.value = (res.data.records || []).filter((item) => item.user_type == '2')
-    })
+  const param = {
+    current: 1,
+    size: 999,
+  }
+  userList(param).then(res => {
+    userIdList.value = (res.data.records || []).filter((item) => item.user_type == '2')
+  })
 }
 const handleDataPlan = async () => {
-    const param = {
-        current: 1,
-        size: 999,
-        source: formState.value.source
-    }
-    getDataPlanList(param).then(res => {
-        planList.value = res.data.records || []
-    })
+  const param = {
+    current: 1,
+    size: 999,
+    source: formState.value.source
+  }
+  getDataPlanList(param).then(res => {
+    planList.value = res.data.records || []
+  })
 }
 // 取消
 const resetForm = () => {
-    visible.value = false;
-    formRef.value.resetFields();
+  visible.value = false;
+  formRef.value.resetFields();
 }
 
 // --------------------------------------------------------
@@ -498,9 +540,9 @@ const formData = ref({})
 // const planList = ref([])
 const selectedKeysPlan = ref([])
 const rowSelectionPlan = reactive({
-    type: 'radio',
-    showCheckedAll: true,
-    onlyCurrent: false,
+  type: 'radio',
+  showCheckedAll: true,
+  onlyCurrent: false,
 });
 
 
@@ -511,13 +553,13 @@ const handleSearchPlan = () => {
 
 }
 const handleCancel = () => {
-    planVisible.value = false
+  planVisible.value = false
 }
 const handleSubmitPlan = () => {
-    if (selectedKeysPlan.value.length > 0) {
-        formState.value.sim_data_plan_id = String(selectedKeysPlan.value[0])
-        planVisible.value = false
-    }
+  if (selectedKeysPlan.value.length > 0) {
+    formState.value.sim_data_plan_id = String(selectedKeysPlan.value[0])
+    planVisible.value = false
+  }
 
 }
 
@@ -525,88 +567,88 @@ watch(
     () => formState.value.source,
     (newValue, oldValue) => {
 
-        if (newValue != oldValue) {
-            handleDataPlan()
-        }
+      if (newValue != oldValue) {
+        handleDataPlan()
+      }
     },
-    { immediate: true }
+    {immediate: true}
 );
 
 // -------------------------------------------------------
 // 获取字典
 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.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)
-    settlementCycleMap.value = dictList.filter((item) => item.type_key == enum_dict.SETTLEMENT_CYCLE)
+  const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
+  sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
+  console.log(sourceList.value)
+  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)
+  settlementCycleMap.value = dictList.filter((item) => item.type_key == enum_dict.SETTLEMENT_CYCLE)
 }
 
 
 onMounted(() => {
-    handleDictValue()
-    intData()
+  handleDictValue()
+  intData()
 })
 
 
-
 </script>
 
 <style scoped lang="less">
 .head-title-right {
-    .m-r-10 {
-        margin-right: 10px;
-    }
+  .m-r-10 {
+    margin-right: 10px;
+  }
 
 }
 
 .search-section {
-    margin-top: 20px;
-    margin-bottom: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .container {
-    .head-title {
-        display: flex;
-        justify-content: space-between;
-    }
+  .head-title {
+    display: flex;
+    justify-content: space-between;
+  }
 
-    .form-row {
-        display: flex;
+  .form-row {
+    display: flex;
 
-        .form-row-col {
-            width: 25%;
-            display: flex;
-            align-items: center;
+    .form-row-col {
+      width: 25%;
+      display: flex;
+      align-items: center;
 
-            .form-row-label {
-                width: 120px;
-                text-align: right;
-            }
-        }
+      .form-row-label {
+        width: 120px;
+        text-align: right;
+      }
     }
+  }
 }
 
 .audit-btn {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .formTitle {
-    font-size: 18px;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center
+  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;
+  content: "";
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background-color: green;
+  margin-right: 10px;
 
 }
 </style>