feat: cache

src/auto-import.d.ts

@@ -7,7 +7,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const api: typeof import('../../../../../src/api/index')['api']
+  const api: typeof import('src/api/index')['api']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
@@ -18,8 +18,8 @@ declare global {
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
   const h: typeof import('vue')['h']
-  const handleInit: typeof import('../../../../../src/utils/page/index')['handleInit']
+  const handleInit: typeof import('src/utils/page/index')['handleInit']
-  const handleMessageBox: typeof import('../../../../../src/utils/page/index')['handleMessageBox']
+  const handleMessageBox: typeof import('src/utils/page/index')['handleMessageBox']
   const inject: typeof import('vue')['inject']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -44,7 +44,7 @@ declare global {
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
-  const pageConfig: typeof import('../../../../../src/utils/page/config')['pageConfig']
+  const pageConfig: typeof import('src/utils/page/config')['pageConfig']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']

src/views/supplier/xsWhitelist/category-config.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="max-w-1/2">
+    <dl v-for="item in list" :key="item.typeId" class="flex mb-1 items-center">
+      <dt>
+        <el-button type="primary" plain size="small" class="mr-2">{{ item.name }}</el-button>
+      </dt>
+      <dd class="flex">
+        <img :src="item.img" alt="" />
+        <p>
+          <span class="text-xs text-[#666]">数量：</span
+          ><el-input v-model="item.num" size="small" class="w-20 mr-2"></el-input>
+        </p>
+        <p>
+          <span class="text-xs text-[#666]">原价：</span
+          ><el-input v-model="item.sale" size="small" class="w-20 mr-2"></el-input>
+        </p>
+        <p>
+          <span class="text-xs text-[#666]">售价：</span
+          ><el-input v-model="item.amount" size="small" class="w-20 mr-2"></el-input>
+        </p>
+      </dd>
+    </dl>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ list: [] }>()
+</script>

src/views/supplier/xsWhitelist/index.vue

@@ -19,47 +19,45 @@
     </el-card>
     <el-card class="mt-2 sku-info">
       <h4 class="font-bold mb-2">SKU信息:</h4>
-      <dl v-for="item in categoryData" :key="item.typeId">
+      <dl v-for="(item, index) in categoryData" :key="item.typeId" class="flex items-center">
         <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  closable effect="plain" type="info" class="mr-1">{{
+            <el-tag closable effect="plain" :type="colors[index % 4]" class="mr-1">{{
               child.name
             }}</el-tag>
           </div>
           <el-input
-            v-if="inputVisible"
+            v-if="inputVisibles[index]"
-            ref="InputRef"
+            ref="InputRefs"
             v-model="inputValue"
             class="w-20"
             size="small"
-            @keyup.enter="handleInputConfirm"
+            @keyup.enter="handleInputConfirm(index)"
-            @blur="handleInputConfirm"
+            @blur="handleInputConfirm(index)"
           />
-          <el-button v-else class="button-new-tag" size="small" @click="onAddCategoryDataOption">
+          <el-button
-            新增
+            v-else
+            class="button-new-tag ml-1"
+            size="small"
+            @click="onAddCategoryDataOption(index)"
+          >
+            + 新增
           </el-button>
         </dd>
       </dl>
+
+      <h4 class="my-1">价格配置：</h4>
+      <div
+        class="flex w-full flex-wrap justify-between p-2 rounded-[5px]"
+        style="border: 1px dashed #bbb"
+      >
+        <category-config :list="list.slice(0, Math.floor(list.length / 2))" />
+        <category-config :list="list.slice(Math.floor(list.length / 2))" />
+      </div>
     </el-card>
     <el-card>
-      <h4 class="font-bold">SKU信息:</h4>
+      <h4 class="font-bold mb-2">SKU信息:</h4>
-      <dl v-for="item in list" :key="item.typeId" class="flex mb-1 items-center">
-        <dt>
-          <el-button plain size="small" class="mr-2">{{ item.name }}</el-button>
-        </dt>
-        <dd class="flex">
-          <img :src="item.img" alt="" />
-          <p>
-            <span class="text-xs text-[#666]">原价：</span
-            ><el-input v-model="item.sale" size="small" class="w-20 mr-2"></el-input>
-          </p>
-          <p>
-            <span class="text-xs text-[#666]">售价：</span
-            ><el-input v-model="item.amount" size="small" class="w-20 mr-2"></el-input>
-          </p>
-        </dd>
-      </dl>
     </el-card>
   </div>
 </template>
@@ -67,14 +65,16 @@
 <script setup lang="ts">
 import { initConfig } from './config'
 import { categoryDataMock, categoryOptionsMock } from './mock'
-import { generateTargetData, useCategoryAddOption } from './use-method'
+import { generateTargetData, useCategoryAddOption, colors } from './use-method'
+import categoryConfig from './category-config.vue'
 
 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 { inputValue, InputRefs, inputVisibles, onAddCategoryDataOption, handleInputConfirm } =
+  useCategoryAddOption(categoryData)
 
 const list = computed(() => generateTargetData(categoryData.value))
 console.warn('----- my data is list.value: ', list.value)
@@ -89,6 +89,10 @@ console.warn('----- my data is list.value: ', list.value)
     }
   }
   :deep(.el-button) {
+    &.el-button--small {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
     color: #666;
   }
 }

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

@@ -18,6 +18,7 @@ interface TargetData {
   name: string
   sale: string
   img: string
+  num: number
   amount: string
 }
 
@@ -34,6 +35,7 @@ export const generateTargetData = (categoryData: CategoryDataMock): TargetData[]
         serialNo,
         name,
         sale: '',
+        num: 0,
         img: '',
         amount: ''
       })
@@ -50,21 +52,25 @@ export const generateTargetData = (categoryData: CategoryDataMock): TargetData[]
 
 // 
 export const useCategoryAddOption = (categoryData: any) => {
-  const inputVisible = ref(false)
+  
-  const InputRef = ref()
+  const inputVisibles = ref(Array.from({length: categoryData.value.length }, (_) => false))
+  
+  const InputRefs = ref()
   const inputValue = ref('')
-  const onAddCategoryDataOption = () => {
+  const onAddCategoryDataOption = (index: number) => {
-    inputVisible.value = true
+    inputVisibles.value[index] = true
     nextTick(() => {
-      InputRef.value!.input!.focus()
+      InputRefs.value[index].input!.focus()
     })
   }
-  const handleInputConfirm = () => {
+  const handleInputConfirm = (index: number) => {
     if (inputValue.value) {
-      categoryData.value.push(inputValue.value)
+      categoryData.value[index].options.push({ id: inputValue.value, name: inputValue.value, isAdd: true })
     }
-    inputVisible.value = false
+    inputVisibles.value[index] = false
     inputValue.value = ''
   }
-  return { inputVisible, InputRef, inputValue, onAddCategoryDataOption, handleInputConfirm}
+  return { inputVisibles, InputRefs, inputValue, onAddCategoryDataOption, handleInputConfirm}
 }
+
+export const colors = ['primary', 'success', 'warning', 'danger', 'info']