流量包增加搜索字段 & 制卡费回显

src/components/Search/index.vue

@@ -28,9 +28,8 @@
 </template>
 
 <script setup>
-import { ref, defineProps, toRefs, watch, defineEmits } from 'vue';
-import { Getdictionary } from "@/mixins/index.js";
-
+import { ref, watch, defineProps, defineEmits, toRefs } from 'vue';
+import { Getdictionary } from '@/mixins/index.js'
 // 接收 props
 const props = defineProps({
     SearchForm: {
@@ -40,21 +39,21 @@ const props = defineProps({
                 type: 'input',
                 label: '字典名称',
                 field: 'source',
-                value: '', // 双向绑定的值
+                value: '',
             },
             {
                 type: 'input',
                 label: '资费ID',
                 field: 'trafficId',
-                value: '', // 双向绑定的值
+                value: '',
             },
             {
                 type: 'select',
                 label: '卡类型',
                 field: 'simType',
-                options: [], // 默认空，后面会通过字典加载
+                options: [],
                 dict: 'CardType',
-                value: '', // 双向绑定的值
+                value: '',
                 width: '200'
             },
         ],
@@ -63,18 +62,18 @@ const props = defineProps({
 
 const { SearchForm } = toRefs(props);
 
+// 保存原始的SearchForm副本
+const originalSearchForm = ref([]);
+
 // 分割完成的数据
-const InitialData = ref()
-const show = ref(false)
-const showIcon = ref(false)
+const InitialData = ref();
+const show = ref(false);
+const showIcon = ref(false);
 const formState = ref({});
 
-const data = ref()
+const data = ref();
 
-const emit = defineEmits(['query'])
-SearchForm.value.forEach(item => {
-    formState.value[item.field] = item.value;
-});
+const emit = defineEmits(['query', 'reset']);
 
 // 字典加载
 const loadedDicts = ref({});
@@ -88,29 +87,32 @@ const loadDictOptions = async (index, dict) => {
     SearchForm.value[index].options = loadedDicts.value[dict];
 };
 
-watch(
-    () => SearchForm.value,
-    async () => {
-        for (let index = 0; index < SearchForm.value.length; index++) {
-            const item = SearchForm.value[index];
-            if (item.dict && !loadedDicts.value[item.dict]) {
-                await loadDictOptions(index, item.dict);
-            }
-        }
-        // 如果当前长度超过5条就需要折叠展开
-        if (SearchForm.value.length >= 6) {
-            show.value = true;
+// 在watch首次执行或者组件挂载完成时保存原始副本
+watch(() => SearchForm.value, () => {
+    if (originalSearchForm.value.length === 0) {
+        originalSearchForm.value = [...SearchForm.value];
+    }
+    for (let index = 0; index < SearchForm.value.length; index++) {
+        const item = SearchForm.value[index];
+        if (item.dict && !loadedDicts.value[item.dict]) {
+            loadDictOptions(index, item.dict);
         }
-        // 初始化切割数组
-        InitialData.value = SearchForm.value.splice(0, 6)
-        data.value = [...InitialData.value, ...SearchForm.value]
-    }, { immediate: true });
+    }
+    // 如果当前长度超过5条就需要折叠展开
+    if (originalSearchForm.value.length >= 6) {
+        show.value = true;
+    }
+    // 基于原始副本进行数组分割操作
+    InitialData.value = originalSearchForm.value.splice(0, 6);
+    data.value = [...InitialData.value, ...originalSearchForm.value];
+}, { immediate: true, deep: true });
 
 // 查询操作
 const handleQuery = () => {
     emit('query', formState.value);
 };
 
+// 重置操作，正确更新formState并触发reset事件
 const handleReset = () => {
     const newFormState = {};
     SearchForm.value.forEach(item => {
@@ -124,7 +126,9 @@ const handleReset = () => {
     });
     formState.value = newFormState;
     emit('reset', formState.value);
-}
+};
+
+
 
 </script>
 

src/views/order/BuyCard/index.vue

@@ -3,7 +3,7 @@
   <div class="silent-expire-alarm">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="SearchFormBuyOrder"/>
+      <Search :SearchForm="SearchFormBuyOrder" @reset="reset"/>
     </div>
     <div class="audit-btn" v-if="userType == 2">
       <a-button @click="showAudit = true" type="text">
@@ -189,10 +189,14 @@ const columns = [
 ];
 
 // 订单列表
-const intData = async () => {
+const intData = async (item) => {
+  if(item){
+    SearchForm.value = item
+  }
   const param = {
     current: pageData.value.current,
     size: pageData.value.size,
+    ...SearchForm.value
   }
   const simTypeList = await Getdictionary('cardType')
   let sourceList = await Getdictionary('source')
@@ -209,8 +213,13 @@ const intData = async () => {
     });
     pageData.value.total = res.data.total;
   })
-
 }
+
+const reset = (item)=>[
+  SearchForm.value = item,
+  pageData.value.current = 1,
+  intData()
+]
 // 用户退订
 const adminCancel = (data) => {
   TariffOrderCard({ id: data.trafficId }).then(res => {
@@ -271,6 +280,7 @@ const closeModal = (items, obj) => {
 const openPriceing = (data) => {
   showPrning.value = true;
   formPreing.value.id = data.id
+  formPreing.value.amount = data.amount;
 }
 
 const handelPriceing = async () => {
@@ -282,6 +292,7 @@ const handelPriceing = async () => {
   if (res.code === 200) {
     Message.success(res.message)
     closeModal(showPrning.value, formPreing.value)
+    intData()
   }
 }
 

src/views/order/config.js

@@ -2,13 +2,13 @@ export const SearchFormBuyOrder = [
   {
     type: "input",
     label: "订单编号",
-    field: "iccid", 
+    field: "id", 
     value: "", // 双向绑定的值
   },
   {
     type: "select",
     label: "审核状态",
-    field: "source",
+    field: "moderationStatus",
     options: [], // 默认空，后面会通过字典加载
     dict: "source",
     value: "", // 双向绑定的值
@@ -17,24 +17,24 @@ export const SearchFormBuyOrder = [
   {
     type: "input",
     label: "客户名称",
-    field: "iccid", 
+    field: "userName", 
     value: "", // 双向绑定的值
   },
   {
     type: "select",
-    label: "静默期",
-    field: "source",
+    label: "沉默期",
+    field: "periodOfSilence",
     options: [], // 默认空，后面会通过字典加载
-    dict: "source",
+    dict: "silenceOf",
     value: "", // 双向绑定的值
     width: "200",
   },
   {
     type: "select",
     label: "卡类型",
-    field: "source",
+    field: "simType",
     options: [], // 默认空，后面会通过字典加载
-    dict: "source",
+    dict: "cardType",
     value: "", // 双向绑定的值
     width: "200",
   },
@@ -50,18 +50,14 @@ export const SearchFormBuyOrder = [
   {
     type: "date-picker",
     label: "下单时间",
-    field: "closeTime",
-    options: [], // 默认空，后面会通过字典加载
-    dict: "source",
+    field: "createdAt",
     value: "", // 双向绑定的值
     width: "200",
   },
   {
     type: "date-picker",
     label: "有效期",
-    field: "closeTime",
-    options: [], // 默认空，后面会通过字典加载
-    dict: "source",
+    field: "endData",
     value: "", // 双向绑定的值
     width: "200",
   },

src/views/supplier/trafficList/config.js

@@ -26,4 +26,70 @@ export const columns = [
   // }
 ]
 
+export const SearchFormList = [
+  {
+    type: "select",
+    label: "供应商名称",
+    field: "source",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "input",
+    label: "流量包名称",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "地区名称",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "套餐有效天数",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "套餐可用流量",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "默认限速",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "流量使用地区名称",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "短信使用地区名称",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "语音呼出地区名称",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "语音呼入地区名称",
+    field: "userName", 
+    value: "", // 双向绑定的值
+  }
+]
+
 

src/views/supplier/trafficList/index.vue

@@ -1,43 +1,14 @@
 <!-- 流量包管理 -->
 <template>
   <div class="container">
-    <div class="head-title">
-      <span>{{ route.meta.title }} </span>
-    </div>
     <!-- 搜索条件区 -->
-    <!-- <div class="search-section">
-      <a-form :model="searchForm" ref="formRef" layout="inline">
-        <a-form-item field="status" :label="$t('dataPackage.price')">
-          <a-input v-model="searchForm.price" :placeholder="$t('form.PleaseEnterThe') + $t('dataPackage.price')"
-            allow-clear />
-        </a-form-item>
-        <a-form-item field="periodType" :label="$t('dataPackage.operatorType')">
-          <a-input v-model="searchForm.periodType"
-            :placeholder="$t('form.PleaseEnterThe') + $t('dataPackage.operatorType')" 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 @click="showNewDataPackageForm" type="text">
-        <template #icon>
-          <icon-plus-circle/>
-        </template>
-<template #default>{{ $t('form.Add') }}</template>
-</a-button>
-</div> -->
+    <div class="search-section">
+      <Search :SearchForm="SearchFormList" @query="intData" @reset="reset"/>
+    </div>
+
 
     <a-table :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
       @page-change="evChangePage">
-      <template #id="{ record }">
-        <!-- <a-button type="text" size="small" @click="handleEdit(record)">{{ $t('global.common.edit') }}</a-button>
-        <a-button type="text" size="small" @click="handleDelete(record)">{{ $t('global.common.delete') }}</a-button> -->
-      </template>
     </a-table>
 
   </div>
@@ -46,24 +17,24 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { columns } from "./config";
+import { columns,SearchFormList } from "./config";
 import { getDataPlanList } from "@/api/path/lotCard.api"
 import {sanitizeObject} from '@/utils/utils'
-const searchForm = ref({
-  "status": "",
-  "periodType": "",
-});
+import Search from '@/components/Search/index.vue'
+const searchForm = ref({});
 
 
 const dataSource = ref([]);
-const route = useRoute();
 const pagination = ref({
   total: 0,
   pageSize: 10,
   current: 1,
 })
 
-const intData = async () => {
+const intData = async (item) => {
+  if(item){
+    searchForm.value = item
+  }
   const param = {
     current: pagination.value.current,
     size: pagination.value.pageSize,
@@ -82,14 +53,18 @@ const intData = async () => {
   pagination.value.total = data.total
 }
 
+const reset = (item)=>{
+  searchForm.value = item
+  pagination.value.current = 1
+  intData()
+}
+
 
 const evChangePage = (page) => {
   pagination.value.current = page
   intData()
 }
 
-
-
 onMounted(() => {
   intData()
 })