修改字段

src/components/Search/index.vue

@@ -1,27 +1,35 @@
 <template>
-    <div ref="search">
+    <div class="search">
         <!-- 动态渲染表单项 -->
-        <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' : '' }">
-                    <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" style="margin-left: 10px;">重置</a-button>
-            </a-form-item>
-        </a-form>
+        <div class="Form">
+            <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].value"
+                        :placeholder="item.type == 'input' ? '请输入' : '请选择' + item.label" 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" style="margin-left: 10px;">重置</a-button>
+                </a-form-item>
+            </a-form>
+        </div>
+
+        <div v-if="show" @click="showIcon = !showIcon" class="icon">
+            {{ showIcon ? '折叠' : '展开' }} &nbsp; <icon-down :rotate="showIcon ? 180 : 0" />
+        </div>
     </div>
 </template>
 
 <script setup>
-import { ref, defineProps, toRefs, watch,defineEmits } from 'vue';
+import { ref, defineProps, toRefs, watch, defineEmits } from 'vue';
 import { Getdictionary } from "@/mixins/index.js";
 
 // 接收 props
@@ -33,23 +41,20 @@ const props = defineProps({
                 type: 'input',
                 label: '字典名称',
                 field: 'source',
-                placeholder: '请输入字典名称',
                 value: '', // 双向绑定的值
             },
             {
                 type: 'input',
                 label: '资费ID',
                 field: 'trafficId',
-                placeholder: '请输入资费ID',
                 value: '', // 双向绑定的值
             },
             {
                 type: 'select',
                 label: '卡类型',
                 field: 'simType',
-                placeholder: '选择卡类型',
                 options: [], // 默认空，后面会通过字典加载
-                dict:'CardType',
+                dict: 'CardType',
                 value: '', // 双向绑定的值
                 width: '200'
             },
@@ -59,37 +64,50 @@ const props = defineProps({
 
 const { SearchForm } = toRefs(props);
 
+// 分割完成的数据
+const InitialData = ref()
+const show = ref(false)
+const showIcon = ref(false)
 const formState = ref({});
 
+const data = ref()
+
 const emit = defineEmits(['query'])
 SearchForm.value.forEach(item => {
     formState.value[item.field] = {
-        value: item.value, 
+        value: item.value,
     };
 });
 
 // 字典加载
-const loadedDicts = ref({}); 
+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);
-    loadedDicts.value[dict] = dictionary || []; 
-    SearchForm.value[index].options = loadedDicts.value[dict]; 
+    loadedDicts.value[dict] = dictionary || [];
+    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); 
+    () => 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);
+            }
         }
-    }
-}, { immediate: true });
+        // 如果当前长度超过5条就需要折叠展开
+        if (SearchForm.value.length >= 6) {
+            show.value = true;
+        }
+        // 初始化切割数组
+        InitialData.value = SearchForm.value.splice(0, 6)
+        data.value = [...InitialData.value, ...SearchForm.value]
+    }, { immediate: true });
 
 // 查询操作
 const handleQuery = () => {
@@ -98,9 +116,28 @@ const handleQuery = () => {
 };
 
 const handleReset = () => {
-    SearchForm.value.forEach(res=>{
+    SearchForm.value.forEach(res => {
         res.value = '';
     })
 }
 
-</script>
+</script>
+
+<style lang="less" scoped>
+.search {
+    display: flex;
+    justify-content: space-between;
+}
+
+.Form{
+    width: 95%;
+}
+
+.icon{
+    display: flex;
+    // align-items: center;
+    color: #3491fa;
+    font-size: 18px;
+    cursor: pointer;
+}
+</style>

src/views/lotCard/cardList/config.js

@@ -1,45 +1,268 @@
 export const columns = [
-    { title: window.$t('lotCard.iccid'), dataIndex: 'iccid', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.source'), dataIndex: 'source', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.userName'), dataIndex: 'userName', align: 'center', ellipsis: true },
-    { title: 'IMSI', dataIndex: 'currentImsi', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.bind'), dataIndex: 'currentImsi', align: 'center', ellipsis: true },
-    { title: 'SIM货币余额', dataIndex: 'moneyBalances', align: 'center', ellipsis:true  },
-    { title: window.$t('lotCard.GenerationDate'), dataIndex: 'createTime', align: 'center', ellipsis: true },
-    // { title: '支付方式', dataIndex: 'payType', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.SimStatus'), dataIndex: 'iccidStatus', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.DatapackageStatus'), dataIndex: 'DatapackageStatus', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.TotalFlow'), dataIndex: 'dataUsageTotal', slotName: 'dataUsageTotal', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.MinutesIncomingVoiceCalls'), dataIndex: 'voiceMtTotal', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.MinutesOutgoingVoiceCalls'), dataIndex: 'voiceMoTotal', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.TotalVoiceMinutes'), dataIndex: 'voiceTotal', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.NumberTextMessagesSent'), dataIndex: 'smsTotal', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.validity')+(window.$t('lotCard.month')), dataIndex: 'validMonth', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.ClosingDate'), dataIndex: 'closeTime', align: 'center', ellipsis: true },
-    { title: 'SIM'+window.$t('lotCard.ActivationDate'), dataIndex: 'activeTime', align: 'center', ellipsis: true },
-    { title: 'IMSI'+window.$t('lotCard.SupplierName'), dataIndex: 'currentImsiProvider', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.CardPackage'), dataIndex: 'tariffName', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.EarlyWarningState'), dataIndex: 'forewarningStatus', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('lotCard.PoolName_Number'), dataIndex: 'poolNum', slotName: 'poolNum', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('lotCard.TheExpirationTime'), dataIndex: 'SilenceEndtime', align: 'center', width: 200, ellipsis: true },
-    { title: window.$t('lotCard.UsedPlanData'), dataIndex: 'dataUsage', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.AvailablePlanData'), dataIndex: 'dataTotal', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.used'), dataIndex: 'usedBg', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.available'), dataIndex: 'usableBg', align: 'center', ellipsis: true },
-    { title: window.$t('lotCard.DefaultRate'), dataIndex: 'dataSpeed', align: 'center', ellipsis: true },
-    {
-        title: window.$t('global.common.operations'),
-        dataIndex: 'id',
-        slotName: 'id',
-        align: 'center',
-        width: 200,
-        fixed: "right",
-    }
-]
+  {
+    title: window.$t("lotCard.iccid"),
+    dataIndex: "iccid",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.source"),
+    dataIndex: "source",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.userName"),
+    dataIndex: "userName",
+    align: "center",
+    ellipsis: true,
+  },
+  { title: "IMSI", dataIndex: "currentImsi", align: "center", ellipsis: true },
+  {
+    title: window.$t("lotCard.bind"),
+    dataIndex: "currentImsi",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: "SIM货币余额",
+    dataIndex: "moneyBalances",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.GenerationDate"),
+    dataIndex: "createTime",
+    align: "center",
+    ellipsis: true,
+  },
+  // { title: '支付方式', dataIndex: 'payType', align: 'center', ellipsis: true },
+  {
+    title: window.$t("lotCard.SimStatus"),
+    dataIndex: "iccidStatus",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.DatapackageStatus"),
+    dataIndex: "DatapackageStatus",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.TotalFlow"),
+    dataIndex: "dataUsageTotal",
+    slotName: "dataUsageTotal",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.MinutesIncomingVoiceCalls"),
+    dataIndex: "voiceMtTotal",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.MinutesOutgoingVoiceCalls"),
+    dataIndex: "voiceMoTotal",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.TotalVoiceMinutes"),
+    dataIndex: "voiceTotal",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.NumberTextMessagesSent"),
+    dataIndex: "smsTotal",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.validity") + window.$t("lotCard.month"),
+    dataIndex: "validMonth",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.ClosingDate"),
+    dataIndex: "closeTime",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: "SIM" + window.$t("lotCard.ActivationDate"),
+    dataIndex: "activeTime",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: "IMSI" + window.$t("lotCard.SupplierName"),
+    dataIndex: "currentImsiProvider",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.CardPackage"),
+    dataIndex: "tariffName",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.EarlyWarningState"),
+    dataIndex: "forewarningStatus",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.PoolName_Number"),
+    dataIndex: "poolNum",
+    slotName: "poolNum",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.TheExpirationTime"),
+    dataIndex: "SilenceEndtime",
+    align: "center",
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.UsedPlanData"),
+    dataIndex: "dataUsage",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.AvailablePlanData"),
+    dataIndex: "dataTotal",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.used"),
+    dataIndex: "usedBg",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.available"),
+    dataIndex: "usableBg",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("lotCard.DefaultRate"),
+    dataIndex: "dataSpeed",
+    align: "center",
+    ellipsis: true,
+  },
+  {
+    title: window.$t("global.common.operations"),
+    dataIndex: "id",
+    slotName: "id",
+    align: "center",
+    width: 200,
+    fixed: "right",
+  },
+];
 
 export const columnsTrafficUse = [
-    { title: window.$t('lotCard.appName'), dataIndex: 'appName', align: 'center', },
-    { title: window.$t('lotCard.mcc'), dataIndex: 'mcc', align: 'center', width: 100 },
-    { title: window.$t('lotCard.qtaconsumption'), dataIndex: 'qtaconsumption', align: 'center', },
-    { title: window.$t('lotCard.time'), dataIndex: 'time', align: 'center', },
-]
+  {
+    title: window.$t("lotCard.appName"),
+    dataIndex: "appName",
+    align: "center",
+  },
+  {
+    title: window.$t("lotCard.mcc"),
+    dataIndex: "mcc",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: window.$t("lotCard.qtaconsumption"),
+    dataIndex: "qtaconsumption",
+    align: "center",
+  },
+  { title: window.$t("lotCard.time"), dataIndex: "time", align: "center" },
+];
+
+export const SearchForm = [
+  {
+    type: "input",
+    label: "ICCID",
+    field: "source",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "来源",
+    field: "simType",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "input",
+    label: "客户名称",
+    field: "source",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "input",
+    label: "IMSI",
+    field: "source",
+    value: "", // 双向绑定的值
+  },
+  {
+    type: "select",
+    label: "流量包状态",
+    field: "simType",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "select",
+    label: "SIM状态",
+    field: "simType",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "SIM激活日期",
+    field: "simType",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "date-picker",
+    label: "SIM关闭日期",
+    field: "simType",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+  {
+    type: "input",
+    label: "IMSI所属供应商名称 ",
+    field: "simType",
+    options: [], // 默认空，后面会通过字典加载
+    dict: "source",
+    value: "", // 双向绑定的值
+    width: "200",
+  },
+];

src/views/lotCard/cardList/index.vue

@@ -3,46 +3,9 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <a-form :model="searchForm"  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-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">{{ $t('form.Search') }}</a-button>
-            <a-button>{{ $t('form.Reset') }}</a-button>
-          </a-space>
-        </a-form-item>
-      </a-form>
+       <Search :SearchForm="SearchForm"/>
     </div>
 
-    <!-- <div class="top-actions">
-      <a-space>
-        <a-button type="primary" @click="showAdd=true">{{ $t('form.Add') }}</a-button>
-      </a-space>
-    </div> -->
-
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="false" :scroll="{ x: 'auto' }">
       <template #poolNum="{ record }">
         <span>{{ record.poolName }}</span>
@@ -72,19 +35,16 @@
 
 <script setup>
 import { onMounted, ref, getCurrentInstance, h } from "vue";
-import { columns } from "./config";
+import { columns,SearchForm } from "./config";
 import { cardInfoList } from "@/api/path/lotCard.api"
 import trafficUseDialog from "./trafficUseDialog.vue";
 import { Getdictionary } from '@/mixins/index.js'
 import {sanitizeObject} from '@/utils/utils'
 import Add from './add.vue'
+import Search from '@/components/Search/index.vue'
 const { proxy } = getCurrentInstance()
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n();
-const searchForm = ref({
-  "iccid": "",
-});
-
 const statusList = ref([]);
 const sourceList = ref([]);
 const serviceList = ref([]);
@@ -103,7 +63,6 @@ const intData = async () => {
   const param = {
     current: pagination.value.current,
     size: pagination.value.pageSize,
-    ...searchForm.value,
   }
   const { data } = await cardInfoList(param)
   dataSource.value = (data.records || []).map((item, index) => {
@@ -140,16 +99,6 @@ const pagesChange = (size) => {
   intData()
 }
 
-
-const handleSearch = () => {
-  formRef.value.validate((errors) => {
-    if (!errors) {
-      intData()
-    }
-  });
-}
-
-
 // 获取字典
 const handleDictValue = async () => {
   // sourceList.value = await Getdictionary('source')