修改模态框无法关闭 增加客户端采购订单选择流量池

src/api/path/tariffManagement.api.js

@@ -1,4 +1,3 @@
-
 import service from '../../utils/axios'
 
 // 查询资费计划
@@ -23,15 +22,20 @@ export function deleteTariff(params) {
 
 // 添加资费套餐
 export function addTariffPackage(data) {
-  return service.post('/admin/platform/addTariffProduct', data)
+    return service.post('/admin/platform/addTariffProduct', data)
 }
 
 // 查询资费商品
-export function CheckTariffPackages(params){
-    return service.get('/admin/platform/tariffProductList', {params})
+export function CheckTariffPackages(params) {
+    return service.get('/admin/platform/tariffProductList', { params })
 }
 
 // 更新资费商品
-export function UpdateTariffTtems(data){
+export function UpdateTariffTtems(data) {
     return service.post('/admin/platform/updateTariffProduct', data)
+}
+
+// 删除资费商品
+export function DeleteTariffItems(params) {
+    return service.get('/admin/platform/deleteTariffProduct', { params })
 }

src/components/Search/index.vue

@@ -3,16 +3,18 @@
         <!-- 动态渲染表单项 -->
         <a-form :model="formState" layout="inline">
             <a-form-item v-for="(item, index) in SearchForm" :key="index" :label="item.label" :field="item.field">
-                <component  :is="'a-' + item.type" v-model="formState[item.field].value"
-                    :placeholder="item.placeholder" allow-clear :style="{width:item.width?item.width+'px':''}">
-                    <a-option v-for="option in item.options" :key="option.value" :value="option.value" v-if="item.type=='select'">
-                        {{ option.label }}
-                    </a-option>
+                <component :is="'a-' + item.type" v-model="formState[item.field].value" :placeholder="item.placeholder"
+                    allow-clear :style="{ width: item.width ? item.width + 'px' : '' }">
+                    <template v-if="item.type == 'select'">
+                        <a-option v-for="option in item.options" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                        </a-option>
+                    </template>
                 </component>
             </a-form-item>
             <a-form-item>
                 <a-button type="primary" @click="handleQuery">查询</a-button>
-                <a-button @click="handleReset">重置</a-button>
+                <a-button @click="handleReset" style="margin-left: 10px;">重置</a-button>
             </a-form-item>
         </a-form>
     </div>
@@ -47,9 +49,9 @@ const props = defineProps({
                 field: 'simType',
                 placeholder: '选择卡类型',
                 options: [], // 默认空，后面会通过字典加载
+                dict:'CardType',
                 value: '', // 双向绑定的值
-                dict: 'CardType', // 字典加载的标识
-                width:'200'
+                width: '200'
             },
         ],
     },
@@ -66,21 +68,29 @@ SearchForm.value.forEach(item => {
 });
 
 // 字典加载
+const loadedDicts = ref({}); // 存储已加载的字典
 const loadDictOptions = async (index, dict) => {
+    if (loadedDicts.value[dict]) {
+        // 如果字典已加载，则直接使用缓存的字典数据
+        SearchForm.value[index].options = loadedDicts.value[dict];
+        return;
+    }
     const dictionary = await Getdictionary(dict);
-    SearchForm.value[index].options = dictionary || []; // 更新 options
+    loadedDicts.value[dict] = dictionary || []; // 更新缓存
+    SearchForm.value[index].options = loadedDicts.value[dict]; // 更新 options
 };
 
 // 监听 SearchForm 更新，加载字典
-watchEffect(async () => {
-    // 遍历 SearchForm，检查是否有字典需要加载
+watch(
+  () => SearchForm.value, // 只监听 SearchForm 的变化
+  async () => {
     for (let index = 0; index < SearchForm.value.length; index++) {
         const item = SearchForm.value[index];
-        if (item.dict) {
-            await loadDictOptions(index, item.dict);
+        if (item.dict && !loadedDicts.value[item.dict]) {
+            await loadDictOptions(index, item.dict); // 加载字典
         }
     }
-});
+}, { immediate: true });
 
 // 查询操作
 const handleQuery = () => {
@@ -88,13 +98,4 @@ const handleQuery = () => {
     emit('query', formState.value);
 };
 
-// 重置操作
-const handleReset = () => {
-    // 重置表单状态
-    for (let key in formState.value) {
-        formState.value[key].value = '';
-    }
-    emit('reset', formState.value);
-};
-
 </script>

src/mixins/index.js

@@ -2,8 +2,8 @@ import { dictionaryDeleteAll } from "@/api/path/dict.js";
 import { ref } from "vue";
 // 获取字典
 export function Getdictionary(params) {
-  // 返回 Promise
-  return dictionaryDeleteAll({ typeKey: params }).then((res) => {
-    return res.data; // 将响应数据返回
-  });
-}
+    // 返回 Promise
+    return dictionaryDeleteAll({ typeKey: params }).then((res) => {
+        return res.data; // 将响应数据返回
+    });
+}

src/views/login/login-form.vue

@@ -89,7 +89,7 @@ const handleSubmit = async () => {
   })
   await updateRouteByMenu(router, systemStore)
   router.push({
-    path: "/system-menu",
+    path: "/",
   })
 }
 

src/views/order/BuyCard/Card.vue

@@ -26,13 +26,18 @@
                     <a-option v-for="item of silenceOptions" :value="item.value" :label="item.label" />
                 </a-select>
             </a-form-item>
-            <a-form-item label="流量池" field="flowPool">
+            <a-form-item label="组池" field="flowPool">
                 <a-radio-group v-model="formState.isTrafficPool" :options="flowPoolData">
                     <template #label="{ data }">
                         <a-tag>{{ data.label }}</a-tag>
                     </template>
                 </a-radio-group>
             </a-form-item>
+            <a-form-item label="流量池" v-if="formState.isTrafficPool==1">
+                <a-select v-model="formState.periodOfSilence" :style="{ width: '380px' }" placeholder="请选择流量池">
+                    <a-option v-for="item of silenceOptions" :value="item.value" :label="item.label" />
+                </a-select>
+            </a-form-item>
             <a-form-item label="购卡数量" field="num">
                 <a-input v-model="formState.quantity" placeholder="请输入购卡数量" />
             </a-form-item>
@@ -45,7 +50,7 @@
 </template>
 
 <script setup>
-import { ref, toRefs, defineProps, onMounted, toRef } from 'vue';
+import { ref, toRefs, defineProps, watch, toRef } from 'vue';
 import { tariffList } from "@/api/path/tariffManagement.api";
 import { Getdictionary } from '@/mixins/index.js'
 import {CardPurchase} from '@/api/path/order'
@@ -57,11 +62,10 @@ const props = defineProps({
     }
 })
 
-
 const modelValue = toRef(props, 'modelValue')
 const emit = defineEmits(['update:modelValue', 'submit'])
 const state = ref({
-    userName: localStorage.getItem('user_login_information')?.username,
+    userName: JSON.parse(localStorage.getItem('user_login_information'))?.username,
     userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
     showAudit: false,
     formRef: null,
@@ -169,9 +173,14 @@ const closeModal = (val) => {
         formState.value[key] = ''
     })
 }
-
-onMounted(() => {
-    handleDictValue()
+// 流量池
+watch(()=>formState.value?.isTrafficPool,val=>{
+    console.log(val);
+})
+watch(()=>modelValue.value,val=>{
+    if(val){
+        handleDictValue()
+    }
 })
 </script>
 <style scoped></style>

src/views/order/BuyCard/detaile.vue

@@ -132,6 +132,10 @@ const cancel = () => {
     emit('update:modelValue', false)
 }
 
+const closeModal = ()=>{
+    showCard.value = false
+}
+
 watch(() => FormDataList.value, val => {
     if (Object.keys(val).length === 0) return
     AcquireOrdertariff({ id: val.trafficId }).then(res => {

src/views/tariffManagement/Management/meal.vue

@@ -1,29 +1,31 @@
 <template>
     <a-modal width="55%" v-model:visible="modelValue" @ok="handleOk" @cancel="handleCancel" title="套餐">
-        <div class="add"><a-button type="primary" @click="addMeal">添加套餐</a-button></div>
+        <div class="add"><a-button type="primary" @click="addMeal" v-if="role.getRole == 1">添加套餐</a-button></div>
         <div class="item_warp">
-            <div v-for="(item, index) in wanberFloter">
-                <a-card :title="'套餐' + (index + 1)">
-                    <template #extra>
-                        <a-link @click="deletaMeal(index)">删除</a-link>
-                    </template>
-                    <div class="Form">
-                        <a-form :model="item" auto-label-width :rules="rules" ref="formRef">
-                            <a-form-item field="period" label="套餐期限(月)" v-if="role.getRole == 1">
-                                <a-input v-model="item.period" placeholder="请输入" />
-                            </a-form-item>
-                            <a-form-item field="price" label="套餐价格">
-                                <a-input v-model="item.price" placeholder="请输入" />
-                            </a-form-item>
-                            <a-form-item field="currency" label="币种" v-if="role.getRole == 1">
-                                <a-select v-model="item.currency" :style="{ width: '320px' }" placeholder="请选择币种">
-                                    <a-option v-for="res of Pricing" :value="res.value" :label="res.label" />
-                                </a-select>
-                            </a-form-item>
-                        </a-form>
-                    </div>
-                </a-card>
-            </div>
+            <a-table :columns="columns" :data="wanberFloter" style="margin-top: 20px" :pagination="false"
+                :scroll="{ y: 'auto' }">
+                <template #period="{ record, rowIndex }">
+                    <a-input v-model="record.period" :disabled="role.getRole !== 1"/>
+                </template>
+                <template #price="{ record, rowIndex }">
+                    <a-input v-model="record.price" />
+                </template>
+                <template #currency="{ record, rowIndex }">
+                    <a-select v-model="record.currency" :style="{ width: '300px' }" placeholder="请选择币种" :disabled="role.getRole !== 1">
+                        <a-option v-for="res of Pricing" :value="res.value" :label="res.label" />
+                    </a-select>
+                </template>
+                <template #setting="{ record }">
+                    <a class="a-link" href="javascript:;" style="margin-right: 1rem"
+                        @click="addUpate(record)">{{ record.id == '' ? '添加' : '修改' }}</a>
+                    <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
+                        :cancel-text="$t('form.Cancel')" @ok="deletaMeal(record.id)">
+                        <a class="a-link" href="javascript:;" v-if="role.getRole == 1">{{
+                            $t('form.Delete')
+                            }}</a>
+                    </a-popconfirm>
+                </template>
+            </a-table>
         </div>
     </a-modal>
 </template>
@@ -33,7 +35,7 @@ import { ref, onMounted, toRefs, toRef, watch } from 'vue';
 import { Getdictionary } from '@/mixins/index.js'
 import { useSystemStore } from '@/store/modules/systemStore'
 import { Message } from '@arco-design/web-vue'
-import { addTariffPackage, CheckTariffPackages,UpdateTariffTtems } from '@/api/path/tariffManagement.api'
+import { addTariffPackage, CheckTariffPackages, UpdateTariffTtems, DeleteTariffItems } from '@/api/path/tariffManagement.api'
 const props = defineProps({
     modelValue: {
         type: Boolean,
@@ -48,12 +50,32 @@ const role = useSystemStore()
 const modelValue = toRef(props, 'modelValue')
 const traffIds = toRef(props, 'traffIds')
 const indexSet = ref(0)
+
 const emit = defineEmits(['update:modelValue', 'submit'])
-const rules = {
-    period: [{ required: true, trigger: 'change', }],
-    price: [{ required: true, trigger: 'change', }],
-    currency: [{ required: true, trigger: 'change', }],
-}
+const columns = [{
+    title: '套餐期限(月)',
+    dataIndex: 'period',
+    slotName: 'period',
+    ellipsis: true,
+    align: 'center',
+}, {
+    title: '套餐价格',
+    dataIndex: 'price',
+    slotName: 'price',
+    ellipsis: true,
+    align: 'center',
+}, {
+    title: '币种',
+    dataIndex: 'currency',
+    slotName: 'currency',
+    ellipsis: true,
+    align: 'center',
+}, {
+    title: '操作',
+    slotName: 'setting',
+    ellipsis: true,
+    align: 'center',
+}];
 const state = ref({
     wanberFloter: [
         { id: '', period: '', price: '', currency: '' }
@@ -64,26 +86,23 @@ const state = ref({
 const { wanberFloter, formRef, Pricing } = toRefs(state.value)
 // 添加套餐
 const handleOk = () => {
-    if (indexSet.value === 0) {
-        // 添加
-        addTariffPackage({ tariffId: traffIds.value, list: wanberFloter.value }).then(res => {
-            if (res.code === 200) {
-                Message.success('添加成功')
-                emit('update:modelValue', false)
-                emit('submit', true)
-                handleCancel()
-            }
-        })
+    emit('update:modelValue', false)
+    emit('submit', true)
+    handleCancel()
+}
+// 确定或者修改
+const addUpate = async (item) => {
+    item.period = Number(item.period)
+    let res;
+    if (item.id == '') {
+        res = await addTariffPackage({ TrafficId: traffIds.value, price: item.price, currency: item.currency, period: item.period })
     } else {
-        // 修改
-        UpdateTariffTtems(wanberFloter.value).then(res=>{
-            if(res.code === 200){
-                Message.success('修改成功')
-                emit('update:modelValue', false)
-                emit('submit', true)
-                handleCancel()
-            }
-        })
+        res = await UpdateTariffTtems(item)
+    }
+
+    if (res.code === 200) {
+        Message.success(res.message)
+        await getList()
     }
 }
 const handleCancel = () => {
@@ -95,9 +114,12 @@ const handleCancel = () => {
 const addMeal = () => {
     wanberFloter.value.push({ id: '', period: '', price: '', currency: '' })
 }
-const deletaMeal = (index) => {
-    if (wanberFloter.value.length !== 1) {
-        wanberFloter.value.splice(index, 1)
+// 删除
+const deletaMeal = async (ids) => {
+    let res = await DeleteTariffItems({ id: ids })
+    if (res.code === 200) {
+        Message.success("删除成功")
+        await getList()
     }
 }
 
@@ -105,16 +127,18 @@ const handeDict = async () => {
     Pricing.value = await Getdictionary('currencyType')
 }
 
-watch(() => traffIds.value, val => {
-    if (!val) return
-    CheckTariffPackages({ tariffId: val }).then(res => {
+const getList = () => {
+    CheckTariffPackages({ tariffId: traffIds.value }).then(res => {
         if (res.code === 200) {
             indexSet.value = res.data.length
-            if (res.data.length !== 0) {
-                wanberFloter.value = res.data
-            }
+            wanberFloter.value = res.data
         }
     })
+}
+
+watch(() => traffIds.value, async val => {
+    if (!val) return
+    await getList()
 })
 
 onMounted(() => {

src/views/tariffManagement/config.js

@@ -1,20 +1,20 @@
 export let columns = [
-    { title: window.$t('tariffManagement.id'), dataIndex: 'id', align: 'center', width: 200 ,ellipsis:true},
+    { 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.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.billingCycle'), dataIndex: 'billingCycleName', 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.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('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.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('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('global.common.operations'),
         dataIndex: 'id',
@@ -25,25 +25,33 @@ export let columns = [
     }
 ]
 
-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 },
-]
+// 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 planColumns = [
@@ -51,9 +59,4 @@ export const planColumns = [
     { 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 },
-]
-
-
-
-
-
+]

src/views/tariffManagement/index.vue

@@ -9,38 +9,7 @@
     </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>
-          <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>
+      <Search :SearchForm="SearchForm" />
     </div>
     <div class="audit-btn">
       <a-button type="text" @click="dictShowModel(1, null)" v-if="role.getRole == 1">
@@ -50,18 +19,18 @@
         <template #default>{{ $t('form.Add') }}</template>
       </a-button>
     </div>
-    <a-table row-key="id" :data="dataSource" :columns="role.getRole == 1 ? columns : columnsCustomer"
+    <a-table row-key="id" :data="dataSource" :columns="columns"
       :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)">{{
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)" v-if="role.getRole == 1">{{
           $t('form.Edit')
         }}</a>
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="meal(record)">套餐</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">{{
+          <a class="a-link" href="javascript:;" style="margin-right: 1rem" v-if="role.getRole == 1">{{
             $t('form.Delete')
           }}</a>
         </a-popconfirm>
@@ -93,7 +62,7 @@
 
     </a-modal>
 
-    <Meal v-model:model-value="modealShow" :traffIds="ids" @submit="intData()"/>
+    <Meal v-model:model-value="modealShow" :traffIds="ids" @submit="intData()" />
     <Add v-model:model-value="visible" :type-index="typeCurrent" :FormDataList="FormDataList" @submit="intData()"></Add>
   </div>
 </template>
@@ -101,16 +70,42 @@
 <script setup>
 import { onMounted, ref, toRefs, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
-import { columns, columnsCustomer, planColumns } from "./config";
+import { columns, planColumns } from "./config";
 import { deleteTariff, tariffList } from "@/api/path/tariffManagement.api"
 import { Getdictionary } from '@/mixins/index.js'
 import { useSystemStore } from '@/store/modules/systemStore'
 import Meal from './Management/meal.vue'
 import Add from './Management/add.vue'
+import Search from '@/components/Search/index.vue'
 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": "", },
   FormDataList: {},
@@ -135,7 +130,7 @@ const state = ref({
     showCheckedAll: true,
     onlyCurrent: false,
   },
-  ids:null
+  ids: null
 })
 const {
   searchForm,
@@ -200,15 +195,6 @@ const evChangePage = (page) => {
   intData()
 }
 
-const handleSearch = () => {
-  intData()
-}
-const resetSearch = () => {
-  searchForm.value.label = ""
-  intData()
-}
-
-
 // 弹框
 const dictShowModel = (type, data) => {
   FormDataList.value = type == 1 ? {} : data