增加搜索字段 & 增加测试流量包字段 & 修改搜索组件功能

src/components/Layout/components/layout/blendLeft.vue

@@ -34,7 +34,6 @@
           <a-menu :selectedKeys="routeItemSelectedKeys" id="layout-sider" theme="light" mode="vertical"
             :collapsed="false" :auto-open="true">
             <template v-for="routeItem in menuSecondData?.children || []">
-              <!-- {{ routeItem }} -->
               <a-menu-item v-if="!routeItem.children || routeItem.children.length === 0"
                 :key="routeItem.name?.toString()" @click="evGoPage(routeItem)">
                 <span class="menu-level-font">{{ routeItem.meta.title }}</span>

src/components/Search/index.vue

@@ -5,7 +5,7 @@
             <a-form :model="formState" layout="inline">
                 <a-form-item v-for="(item, index) in showIcon ? data : InitialData" :key="index" :label="item.label"
                     :field="item.field" :wrapper-col-style="{ marginBottom: '20px' }">
-                    <component :is="'a-' + item.type" v-model="formState[item.field]"
+                    <component :is="'a-' + item.type" v-model="formState[item.field]" item.Custom
                         :placeholder="item.type == 'input' ? '请输入' : '请选择' + item.label" allow-clear
                         :style="{ width: item.width ? item.width + 'px' : '' }">
                         <template v-if="item.type == 'select'">
@@ -112,9 +112,18 @@ const handleQuery = () => {
 };
 
 const handleReset = () => {
-    SearchForm.value.forEach(res => {
-        res.value = '';
-    })
+    const newFormState = {};
+    SearchForm.value.forEach(item => {
+        if (typeof item.value === 'string') {
+            newFormState[item.field] = '';
+        } else if (Array.isArray(item.value)) {
+            newFormState[item.field] = [];
+        } else if (typeof item.value === 'object') {
+            newFormState[item.field] = {};
+        }
+    });
+    formState.value = newFormState;
+    emit('reset', formState.value);
 }
 
 </script>

src/i18n/zh/tariffManagement.js

@@ -39,12 +39,14 @@ export default {
     SetMeal:'套餐',
     SelectiveTrafficPacket:'选择流量包',
     BasicInformation:'基本信息',
-    DataPackage:'流量包',
     BillingInformation:'计费信息',
     PackageTermMonth:'套餐期限(月)',
     PackagePrice:'套餐价格',
     Currency:'币种',
     AddPackage:'添加套餐',
     endDate:'有效期',
-    BillingMode:'计费方式'
+    BillingMode:'计费方式',
+    TestFlowPacket:'测试流量包',
+    simDataPlanIdName:'流量包名称',
+    TestFlowPacketName:'测试流量包名称'
 }

src/views/lotCard/cardList/index.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-       <Search :SearchForm="SearchForm" @query="intData"/>
+       <Search :SearchForm="SearchForm" @query="intData" @reset="reset"/>
     </div>
 
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="false" :scroll="{ x: 'auto' }">
@@ -23,7 +23,7 @@
     </a-table>
 
     <div class="pagtion">
-      <a-pagination :total="pagination.total" show-total show-jumper show-page-size @change="evChangePage"
+      <a-pagination :total="pagination.total" v-model:current="pagination.current " show-total show-jumper show-page-size @change="evChangePage"
         @page-size-change="pagesChange" />
     </div>
     <!-- 查看流量消耗 -->
@@ -49,6 +49,7 @@ const statusList = ref([]);
 const sourceList = ref([]);
 const serviceList = ref([]);
 const dataSource = ref([]);
+const SearchFormList = ref({});
 const pagination = ref({
   total: 0,
   pageSize: 10,
@@ -60,10 +61,13 @@ const trafficUseDialogRef = ref()
 
 
 const intData = async (item) => {
+  if(item){
+    SearchFormList.value = item
+  }
   const param = {
     current: pagination.value.current,
     size: pagination.value.pageSize,
-    ...item
+    ...SearchFormList.value
   }
   const { data } = await cardInfoList(param)
   dataSource.value = (data.records || []).map((item, index) => {
@@ -84,6 +88,12 @@ const intData = async (item) => {
   pagination.value.total = data.total
 }
 
+const reset = (item)=>{
+  pagination.value.current = 1
+  SearchFormList.value = item
+  intData()
+}
+
 // 详情
 const handletrafficUseDialog = (data) => {
   trafficUseDialogRef.value.open(data)

src/views/order/BuyCard/index.vue

@@ -3,7 +3,7 @@
   <div class="silent-expire-alarm">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search />
+      <Search :SearchForm="SearchFormBuyOrder"/>
     </div>
     <div class="audit-btn" v-if="userType == 2">
       <a-button @click="showAudit = true" type="text">
@@ -113,6 +113,7 @@ import Search from '@/components/Search/index.vue'
 import returnCard from './returnCard.vue'
 import {useI18n} from 'vue-i18n'
 const {t} = useI18n();
+import {SearchFormBuyOrder} from '../config'
 // 数据层
 const state = ref({
   userName: localStorage.getItem('user_login_information')?.username,
@@ -145,7 +146,8 @@ const state = ref({
   formEndDate: {
     id: '',
     endDate: ''
-  }
+  },
+  SearchForm:{}
 });
 
 const {
@@ -164,7 +166,8 @@ const {
   showPrning,
   formPreing,
   showEndDate,
-  formEndDate
+  formEndDate,
+  SearchForm
 } = toRefs(state.value);
 
 const columns = [

src/views/order/config.js

@@ -0,0 +1,68 @@
+export const SearchFormBuyOrder = [
+  {
+    type: "input",
+    label: "订单编号",
+    field: "iccid", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "审核状态",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "input",
+    label: "客户名称",
+    field: "iccid", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "静默期",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "卡类型",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "运营商名称",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "下单时间",
+    field: "closeTime",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "有效期",
+    field: "closeTime",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+];

src/views/tariffManagement/Management/add.vue

@@ -8,15 +8,26 @@
                 <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="simDataPlanId">
-                    <a-select v-model="formState.simDataPlanId" :disabled="typeIndex !== 1">
+                    <a-select v-model="formState.simDataPlanId" :disabled="typeIndexSet !== 1">
                         <a-option v-for=" (item, index) in planList" :key="item.id" :value="item.id">{{
-                            $t('tariffManagement.DataPackage') }} {{
+                            $t('tariffManagement.simDataPlanId') }} {{
+                                item.productName
+                            }}
+                        </a-option>
+                    </a-select>
+                </a-form-item>
+            </template>
+            <template v-if="formState.source">
+                <a-form-item :label="$t('tariffManagement.TestFlowPacket')" field="testsimDataPlanId">
+                    <a-select v-model="formState.testsimDataPlanId" :disabled="typeIndexSet !== 1">
+                        <a-option v-for=" (item, index) in planList" :key="item.id" :value="item.id">{{
+                            $t('tariffManagement.TestFlowPacket') }} {{
                                 item.productName
                             }}
                         </a-option>
@@ -30,7 +41,7 @@
                 <a-select v-model="formState.userId">
                     <a-option v-for=" item in userIdList" :key="item.id" :value="item.id">{{
                         item.name
-                        }}
+                    }}
                     </a-option>
                 </a-select>
             </a-form-item>
@@ -38,7 +49,7 @@
                 <a-select v-model="formState.billingMethod">
                     <a-option v-for=" item in methodList" :key="item.id" :value="item.value">{{
                         item.label
-                        }}
+                    }}
                     </a-option>
                 </a-select>
             </a-form-item>
@@ -46,7 +57,7 @@
                 <a-select v-model="formState.currency">
                     <a-option v-for=" item in currency" :key="item.id" :value="item.value">{{
                         item.label
-                        }}
+                    }}
                     </a-option>
                 </a-select>
             </a-form-item>
@@ -92,7 +103,7 @@
             <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>
@@ -125,7 +136,7 @@ const props = defineProps({
 })
 
 const modelValue = toRef(props, 'modelValue')
-const typeIndex = toRef(props, 'typeIndex')
+const typeIndexSet = ref(null)
 const FormDataList = toRef(props, 'FormDataList')
 const emit = defineEmits(['update:modelValue', 'submit'])
 
@@ -157,7 +168,8 @@ const state = ref({
         "mrcAmount": '',
         // 网络接入费
         "networkAccessFee": '',
-        "endDate": ''
+        "endDate": '',
+        "testsimDataPlanId": null
     },
     sourceList: [],
     userIdList: [],
@@ -185,6 +197,7 @@ const rules = {
     mrcAmount: [{ required: true, trigger: 'change', }],
     networkAccessFee: [{ required: true, trigger: 'change', }],
     endDate: [{ required: true, trigger: 'change', }],
+    testsimDataPlanId: [{ required: true, trigger: 'change', }],
 };
 
 
@@ -299,8 +312,12 @@ watch(() => FormDataList.value, val => {
         }
     })
     formState.value.id = val.id
+}, { immediate: true })
+
 
-    console.log(val);
+watch(() => props.typeIndex, val => {
+    if (val == null) return
+    typeIndexSet.value = val
 }, { immediate: true })
 
 onMounted(() => {

src/views/tariffManagement/config.js

@@ -1,63 +1,274 @@
 export let columns = [
-    { title: window.$t('tariffManagement.id'), dataIndex: 'Number', align: 'center', width: 200, ellipsis: true },
-    // { title: window.$t('tariffManagement.feeCode'), dataIndex: 'feeCode', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.userName'), dataIndex: 'userName', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('tariffManagement.label'), dataIndex: 'label', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('tariffManagement.source'), dataIndex: 'sourceName', align: 'center', width: 200, ellipsis: true },
-    // { 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, ellipsis: true },
-    { title: window.$t('tariffManagement.BillingMode'), dataIndex: 'billingMethodName', align: 'center', width: 200, ellipsis: true },
-    // { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bagSize', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.pricing'), dataIndex: 'pricingName', align: 'center', width: 200, ellipsis: true },
-    // { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.ActivatedNames'), dataIndex: 'Activated', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('tariffManagement.feeStatus'), dataIndex: 'status', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('tariffManagement.MRCName'), dataIndex: 'mrcAmount', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('tariffManagement.networkName'), dataIndex: 'networkAccessFee', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('tariffManagement.endDate'), dataIndex: 'endDate', align: 'center', width: 200, ellipsis: true },
-    {
-        title: window.$t('global.common.operations'),
-        dataIndex: 'id',
-        slotName: 'id',
-        align: 'center',
-        width: 180,
-        fixed: "right",
-    }
-]
+  {
+    title: window.$t("tariffManagement.id"),
+    dataIndex: "Number",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  // { title: window.$t('tariffManagement.feeCode'), dataIndex: 'feeCode', align: 'center', width: 200 },
+  {
+    title: window.$t("tariffManagement.userName"),
+    dataIndex: "userName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.label"),
+    dataIndex: "label",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.source"),
+    dataIndex: "sourceName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.simDataPlanIdName"),
+    dataIndex: "metadataPackagesName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.TestFlowPacketName"),
+    dataIndex: "testMetadataPackagesName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  // { 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,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.BillingMode"),
+    dataIndex: "billingMethodName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  // { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bagSize', align: 'center', width: 200 },
+  {
+    title: window.$t("tariffManagement.pricing"),
+    dataIndex: "pricingName",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  // { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
+  {
+    title: window.$t("tariffManagement.ActivatedNames"),
+    dataIndex: "Activated",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.feeStatus"),
+    dataIndex: "status",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.MRCName"),
+    dataIndex: "mrcAmount",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.networkName"),
+    dataIndex: "networkAccessFee",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("tariffManagement.endDate"),
+    dataIndex: "endDate",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("global.common.operations"),
+    dataIndex: "id",
+    slotName: "id",
+    align: "center",
+    width: 180,
+    fixed: "right",
+  },
+];
+// 资费套餐
+export const planColumns = [
+  {
+    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: "sourceName",
+    align: "center",
+    width: 200,
+  },
+  {
+    title: window.$t("tariffManagement.bagSize"),
+    dataIndex: "bag_size",
+    align: "center",
+    width: 200,
+  },
+];
 
-// export const columnsCustomer = [
-//     { title: window.$t('tariffManagement.id'), dataIndex: 'id', align: 'center', width: 200, ellipsis: true },
-//     // { title: window.$t('tariffManagement.feeCode'), dataIndex: 'feeCode', align: 'center', width: 200 },
-//     { title: window.$t('tariffManagement.userName'), dataIndex: 'userName', align: 'center', width: 200, ellipsis: true },
-//     { title: window.$t('tariffManagement.label'), dataIndex: 'label', align: 'center', width: 200, ellipsis: true },
-//     { title: window.$t('tariffManagement.source'), dataIndex: 'sourceName', align: 'center', width: 200, ellipsis: true },
-//     // { 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, ellipsis: true },
-//     // { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bagSize', align: 'center', width: 200 },
-//     { title: '结算周期', dataIndex: 'billingCycleName', align: 'center', width: 200 },
-//     { title: '流量资费价格', dataIndex: 'bagSize', align: 'center', width: 200 },
-//     { title: '充值定价', dataIndex: '', align: 'center', width: 200 },
-//     { title: window.$t('tariffManagement.pricing'), dataIndex: 'pricingName', align: 'center', width: 200, ellipsis: true },
-//     // { title: window.$t('tariffManagement.billingMethod'), dataIndex: 'billing_method', align: 'center', width: 200 },
-//     { title: window.$t('tariffManagement.settlementCycleLabel'), dataIndex: 'settlementCycle', align: 'center', width: 200, ellipsis: true },
-//     { title: window.$t('tariffManagement.ActivatedNames'), dataIndex: 'Activated', align: 'center', width: 200, ellipsis: true },
-//     { title: window.$t('tariffManagement.feeStatus'), dataIndex: 'status', align: 'center', width: 200, ellipsis: true },
-//     {
-//         title: window.$t('global.common.operations'),
-//         dataIndex: 'id',
-//         slotName: 'id',
-//         align: 'center',
-//         width: 180,
-//         fixed: "right",
-//     }
-// ]
+// 资费搜索字段
+export const trafficSearchFrom = [
+  {
+    type: "input",
+    label: "客户名称",
+    field: "username",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "资费名称",
+    field: "label",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "供应商名称",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "计费方式",
+    field: "billingMethod",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "billingMethod",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "计费周期",
+    field: "BillingCycle",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "BillingCycle",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "有效期",
+    field: "endDate",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+];
 
+// 客户搜索字段
+export const UserSearchForm = [
+  {
+    type: "input",
+    label: "客户名称",
+    field: "name",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "客户账号",
+    field: "username",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "客户状态",
+    field: "state",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "userType",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "range-picker",
+    label: "创建时间",
+    field: "createdAt",
+    value: [], // 双向绑定的值
+    width: "300",
+    Custom: 'mode="month"', // 自定义值
+  },
+];
 
-export const planColumns = [
-    { 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: 'sourceName', align: 'center', width: 200 },
-    { title: window.$t('tariffManagement.bagSize'), dataIndex: 'bag_size', align: 'center', width: 200 },
-]
+export const UserColumns = [
+  {
+    title: window.$t("customer.id"),
+    dataIndex: "id",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("customer.customerName"),
+    dataIndex: "name",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("customer.userAdmin"),
+    dataIndex: "username",
+    align: "center",
+  },
+  {
+    title: window.$t("customer.customerStatus"),
+    slotName: "state",
+    align: "center",
+    ellipsis: true,
+  },
+  { title: "app_key  ", dataIndex: "appKey", align: "center", ellipsis: true },
+  {
+    title: "app_secret",
+    dataIndex: "appSecret",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("customer.startTime"),
+    dataIndex: "createdAt",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("customer.updateTime"),
+    dataIndex: "updatedAt",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("global.common.operations"),
+    slotName: "operation",
+    align: "center",
+    ellipsis: true,
+  },
+];

src/views/tariffManagement/customer/NewCustomerForm.vue

@@ -68,10 +68,9 @@
           <!-- Status -->
           <a-form-item field="state" :label="$t('customer.statusName')" required validate-trigger="blur">
             <a-radio-group v-model="formData.state">
-              <a-radio value="1">{{ $t('customer.status.normal') }}</a-radio>
-              <a-radio value="2">{{ $t('customer.status.disabled') }}</a-radio>
-              <a-radio value="3">{{ $t('customer.status.pending') }}</a-radio>
-              <a-radio value="4">{{ $t('customer.status.suspended') }}</a-radio>
+              <a-radio :value="item.value" v-for="item in userTypes">{{
+                item.value == 1 ? $t('customer.status.normal') : (item.value == 2 ? $t('customer.status.disabled') : (item.value == 3 ? $t('customer.status.pending') : $t('customer.status.suspended')))
+                }}</a-radio>
             </a-radio-group>
           </a-form-item>
         </a-form>
@@ -221,7 +220,7 @@ import { dictionaryDetail } from '@/api/path/dict.js'
 import Upload from "@/components/upload/index.vue";
 import { systemFindRoleList } from "@/api/path/system.api.js";
 import { addCustomer, updateCustomer } from "@/api/customer.js";
-
+import { Getdictionary } from '@/mixins/index.js'
 const { t } = useI18n();
 import { encryptByDES } from '@/utils/crypto.js'
 
@@ -234,6 +233,7 @@ const props = defineProps({
 
 const invoiceList = ref([])
 const roles = ref([])
+const userTypes = ref([])
 watch(
   () => props.editData,
   (newVal) => {
@@ -404,6 +404,11 @@ const getRolesData = async () => {
   }
 }
 
+const getList = async () => {
+  let res = await Getdictionary('userType')
+  userTypes.value = res.data
+}
+
 watch(() => props.visible, val => {
   if (!val) {
     Object.keys(formData.value).forEach(key => {
@@ -412,8 +417,9 @@ watch(() => props.visible, val => {
   } else {
     getRolesData()
     getDistList()
+    getList()
   }
-},{immediate:true})
+}, { immediate: true })
 
 </script>
 

src/views/tariffManagement/customer/index.vue

@@ -3,56 +3,26 @@
   <div class="customer-management">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <a-form :model="searchForm" layout="inline">
-        <a-form-item field="customerName" :label="$t('customer.customerName')">
-          <a-input v-model="searchForm.customerName" :placeholder="$t('customer.enterCustomerName')" allow-clear />
-        </a-form-item>
-        <a-form-item field="operatorType" :label="$t('customer.operatorType')">
-          <a-select v-model="searchForm.operatorType" :placeholder="$t('customer.selectOperatorType')" allow-clear
-            style="width: 160px">
-            <a-option v-for="op in operatorTypeOptions" :key="op.value" :value="op.value">
-              {{ $t(`customer.operatorTypes.${op.value}`) }}
-            </a-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item>
-          <a-button type="primary" @click="handleSearch">{{ $t('global.common.search') }}</a-button>
-        </a-form-item>
-        <a-form-item>
-          <a-button @click="resetSearch">{{ $t('global.common.reset') }}</a-button>
-        </a-form-item>
-      </a-form>
+      <Search :SearchForm="UserSearchForm" @query="fetchCustomerList"/>
     </div>
 
     <!-- 顶部操作区 -->
     <div class="top-actions">
       <a-space>
         <a-button type="primary" @click="showNewCustomerForm">{{ $t('customer.addCustomer') }}</a-button>
-        <!-- <a-button @click="handleBatchDelete">{{ $t('customer.batchDelete') }}</a-button> -->
       </a-space>
     </div>
 
     <!-- 数据表格 -->
-    <a-table row-key="id" :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: 'auto' }"
+    <a-table row-key="id" :columns="UserColumns" :data="tableData" :pagination="pagination" :scroll="{ x: 'auto' }"
       :row-selection="{ type: 'checkbox', showCheckedAll: true }" @page-change="onPageChange">
       <template #state="{ record }">
         <a-tag :color="getStatusColor(record.state)">
           {{ $t(`customer.status.${getStatusText(record.state)}`) }}
         </a-tag>
       </template>
-      <template #user_type="{ record }">
-        {{ $t(`customer.${getUserType(record.user_type)}`) }}
-      </template>
       <template #operation="{ record }">
         <a-space>
-          <!--          <a-button type="text" size="small" @click="handleRecharge(record)">{{-->
-          <!--              $t('customer.recharge')-->
-          <!--            }}-->
-          <!--          </a-button>-->
-          <!--          <a-button type="text" size="small" @click="handlePackageManagement(record)">{{-->
-          <!--              $t('customer.packageManagement')-->
-          <!--            }}-->
-          <!--          </a-button>-->
           <a-button type="text" size="small" @click="handleEdit(record)">{{
             $t('global.common.edit')
           }}
@@ -73,24 +43,12 @@ import { Message } from '@arco-design/web-vue';
 import { useI18n } from 'vue-i18n';
 import NewCustomerForm from './NewCustomerForm.vue';
 import { getMessUserList, deleteMessUser } from '@/api/customer.js';
-
+import {UserSearchForm,UserColumns} from '../config'
+import Search from '@/components/Search/index.vue'
 const { t } = useI18n();
 
 const loading = ref(false);
 
-const columns = computed(() => [
-  { title: t('customer.id'), dataIndex: 'id', align: 'center', ellipsis: true },
-  { title: t('customer.customerName'), dataIndex: 'name', align: 'center', ellipsis: true },
-  { title: t('customer.userAdmin'), dataIndex: 'username', align: 'center' },
-  { title: t('customer.customerStatus'), slotName: 'state', align: 'center', ellipsis: true },
-  { title: 'app_key  ', dataIndex: 'appKey', align: 'center', ellipsis: true },
-  { title: 'app_secret', dataIndex: 'appSecret', align: 'center', ellipsis: true },
-  { title: t('customer.userTypeName'), align: 'center', dataIndex: 'userType', ellipsis: true },
-  { title: t('customer.startTime'), dataIndex: 'createdAt', align: 'center', ellipsis: true },
-  { title: t('customer.updateTime'), dataIndex: 'updatedAt', align: 'center', ellipsis: true },
-  { title: t('global.common.operations'), slotName: 'operation', align: 'center', ellipsis: true },
-]);
-
 onMounted(() => {
   fetchCustomerList();
 });
@@ -102,26 +60,16 @@ const pagination = reactive({
   current: 1,
   pageSize: 10,
 });
-const fetchCustomerList = async () => {
-  try {
+const fetchCustomerList = async (item) => {
     const response = await getMessUserList({
       current: pagination.current,
       pageSize: pagination.pageSize,
-      customerName: searchForm.customerName,
-      operatorType: searchForm.operatorType,
+      ...item
     });
     if (response.code === 200 && response.data) {
-      tableData.value = response.data.records.map(res => ({ ...res, userType: res.userType == 1 ? '平台' : '客户' }))
+      tableData.value = response.data.records
       pagination.total = response.data.total;
-      pagination.current = response.data.current;
-      pagination.pageSize = response.data.size;
-    } else {
-      Message.error(response.message || 'Failed to fetch customer list');
     }
-  } catch (error) {
-    Message.error('Failed to fetch customer list');
-    console.error(error);
-  }
 };
 
 const onPageChange = (page) => {
@@ -133,15 +81,6 @@ const newCustomerFormVisible = ref(false);
 const editMode = ref(false);
 const editData = ref(null);
 
-const searchForm = reactive({
-  customerName: '',
-  operatorType: '',
-});
-
-const operatorTypeOptions = [
-  { value: 'domestic', label: t('customer.operatorTypes.domestic') },
-  { value: 'international', label: t('customer.operatorTypes.international') },
-];
 
 const showNewCustomerForm = () => {
   editMode.value = false;
@@ -177,18 +116,6 @@ const handleNewCustomerSubmit = (formData) => {
   }
 };
 
-const handleSearch = () => {
-  pagination.current = 1;
-  fetchCustomerList();
-};
-
-const resetSearch = () => {
-  Object.keys(searchForm).forEach(key => {
-    searchForm[key] = '';
-  });
-  pagination.current = 1;
-  fetchCustomerList();
-};
 
 const getStatusColor = (state) => {
   const stateColors = {
@@ -200,14 +127,6 @@ const getStatusColor = (state) => {
   return stateColors[state] || 'default';
 };
 
-const getUserType = (state) => {
-  const stateType = {
-    '1': 'platform',
-    '2': 'client'
-  }
-  return stateType[state] || 'undefined';
-}
-
 const getStatusText = (state) => {
   const stateTexts = {
     '1': 'normal',     // 正常

src/views/tariffManagement/index.vue

@@ -1,15 +1,9 @@
 <!-- 资费管理 -->
 <template>
   <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">
-      <Search :SearchForm="SearchForm" />
+      <Search :SearchForm="trafficSearchFrom" @query="intData" @reset="reset"/>
     </div>
     <div class="audit-btn">
       <a-button type="text" @click="dictShowModel(1, null)" v-if="role.getRole == 1">
@@ -73,7 +67,7 @@
 <script setup>
 import { onMounted, ref, toRefs, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
-import { columns, planColumns } from "./config";
+import { columns, planColumns ,trafficSearchFrom} from "./config";
 import { deleteTariff, tariffList } from "@/api/path/tariffManagement.api"
 import { Getdictionary } from '@/mixins/index.js'
 import { useSystemStore } from '@/store/modules/systemStore'
@@ -86,34 +80,8 @@ const { t } = useI18n();
 const role = useSystemStore()
 const { proxy } = getCurrentInstance()
 const route = useRoute();
-const SearchForm = [
-  {
-    type: 'input',
-    label: '资费名称',
-    field: 'source',
-    placeholder: '请输入资费名称',
-    value: '', // 双向绑定的值
-  },
-  {
-    type: 'input',
-    label: '客户名称',
-    field: 'trafficId',
-    placeholder: '请输入客户名称',
-    value: '', // 双向绑定的值
-  },
-  {
-    type: 'select',
-    label: '供应商名称',
-    field: 'simType',
-    placeholder: '请选择供应商名称',
-    options: [], // 默认空，后面会通过字典加载
-    value: '', // 双向绑定的值
-    dict: 'source', // 字典加载的标识
-    width: '200'
-  },
-]
 const state = ref({
-  searchForm: { "label": "", },
+  searchForm: {},
   FormDataList: {},
   currency: [],
   dataSource: [],
@@ -159,7 +127,10 @@ const {
   methodList
 } = toRefs(state.value);
 
-const intData = async () => {
+const intData = async (item) => {
+  if(item){
+    searchForm.value = item
+  }
   const param = {
     current: pagination.value.current,
     size: pagination.value.pageSize,
@@ -196,6 +167,12 @@ const intData = async () => {
   pagination.value.total = data.total
 }
 
+const reset = (item)=>{
+  searchForm.value = item 
+  pagination.value.current = 1
+  intData()
+}
+
 
 // 删除
 const handleDel = async (id) => {