feat: cache
This commit is contained in:
zc
parent
ab2ec6309f
commit
af14f26096
8
src/auto-import.d.ts
vendored
8
src/auto-import.d.ts
vendored
@ -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 handleMessageBox: typeof import('../../../../../src/utils/page/index')['handleMessageBox']
|
||||
const handleInit: typeof import('src/utils/page/index')['handleInit']
|
||||
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']
|
||||
|
||||
28
src/views/supplier/xsWhitelist/category-config.vue
Normal file
28
src/views/supplier/xsWhitelist/category-config.vue
Normal file
@ -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>
|
||||
@ -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"
|
||||
ref="InputRef"
|
||||
v-if="inputVisibles[index]"
|
||||
ref="InputRefs"
|
||||
v-model="inputValue"
|
||||
class="w-20"
|
||||
size="small"
|
||||
@keyup.enter="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
@keyup.enter="handleInputConfirm(index)"
|
||||
@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>
|
||||
<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>
|
||||
<h4 class="font-bold mb-2">SKU信息:</h4>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = () => {
|
||||
inputVisible.value = true
|
||||
const onAddCategoryDataOption = (index: number) => {
|
||||
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']
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user