feat: cache

src/views/supplier/xsWhitelist/index.vue

@@ -23,22 +23,22 @@
         <dt class="text-sm text-[#666] mb-2">{{ item.typeName }}：</dt>
         <dd class="flex mb-2">
           <div v-for="child in item.options" :key="item.typeId + '-' + child.id">
-            <el-tag size="large" closable effect="plain" type="info" class="mr-1">{{
+            <el-tag  closable effect="plain" type="info" class="mr-1">{{
               child.name
             }}</el-tag>
-            <el-input
-              v-if="inputVisible"
-              ref="InputRef"
-              v-model="inputValue"
-              class="w-20"
-              size="small"
-              @keyup.enter="handleInputConfirm"
-              @blur="handleInputConfirm"
-            />
-            <el-button v-else class="button-new-tag" size="small" @click="onAddCategoryDataOption">
-              新增
-            </el-button>
           </div>
+          <el-input
+            v-if="inputVisible"
+            ref="InputRef"
+            v-model="inputValue"
+            class="w-20"
+            size="small"
+            @keyup.enter="handleInputConfirm"
+            @blur="handleInputConfirm"
+          />
+          <el-button v-else class="button-new-tag" size="small" @click="onAddCategoryDataOption">
+            新增
+          </el-button>
         </dd>
       </dl>
     </el-card>
@@ -67,13 +67,14 @@
 <script setup lang="ts">
 import { initConfig } from './config'
 import { categoryDataMock, categoryOptionsMock } from './mock'
-import { generateTargetData } from './use-method'
+import { generateTargetData, useCategoryAddOption } from './use-method'
 
 const { $dialog, dialog1 } = toRefs(initConfig().value!)
 $dialog.value.config = dialog1.value
 
 const categoryOptions = ref(categoryOptionsMock)
 const categoryData = ref(categoryDataMock)
+const { inputValue, inputVisible, onAddCategoryDataOption, handleInputConfirm} = useCategoryAddOption(categoryData)
 
 const list = computed(() => generateTargetData(categoryData.value))
 console.warn('----- my data is list.value: ', list.value)

src/views/supplier/xsWhitelist/use-method.ts

@@ -48,7 +48,8 @@ export const generateTargetData = (categoryData: CategoryDataMock): TargetData[]
   return result
 }
 
-export const useCategoryAddOption = (categoryData) => {
+// 
+export const useCategoryAddOption = (categoryData: any) => {
   const inputVisible = ref(false)
   const InputRef = ref()
   const inputValue = ref('')
@@ -60,9 +61,10 @@ export const useCategoryAddOption = (categoryData) => {
   }
   const handleInputConfirm = () => {
     if (inputValue.value) {
-      dynamicTags.value.push(inputValue.value)
+      categoryData.value.push(inputValue.value)
     }
     inputVisible.value = false
     inputValue.value = ''
   }
+  return { inputVisible, InputRef, inputValue, onAddCategoryDataOption, handleInputConfirm}
 }