100 lines
2.9 KiB
Vue
100 lines
2.9 KiB
Vue
<template>
|
||
<div id="commodity-detail">
|
||
<el-card>
|
||
<h4 class="font-bold">基本信息：</h4>
|
||
<form-wrap :form="$dialog">
|
||
<template #comCategoryId>
|
||
<el-tree-select
|
||
v-model="$dialog.data.comCategoryId"
|
||
:data="categoryOptions"
|
||
></el-tree-select>
|
||
</template>
|
||
<template #video>
|
||
<span>sdfs</span>
|
||
</template>
|
||
<template #mainImg>
|
||
<p>123</p>
|
||
</template>
|
||
</form-wrap>
|
||
</el-card>
|
||
<el-card class="mt-2 sku-info">
|
||
<h4 class="font-bold mb-2">SKU信息:</h4>
|
||
<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="colors[index % 4]" class="mr-1">{{
|
||
child.name
|
||
}}</el-tag>
|
||
</div>
|
||
<el-input
|
||
v-if="inputVisibles[index]"
|
||
ref="InputRefs"
|
||
v-model="inputValue"
|
||
class="w-20"
|
||
size="small"
|
||
@keyup.enter="handleInputConfirm(index)"
|
||
@blur="handleInputConfirm(index)"
|
||
/>
|
||
<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 mb-2">SKU信息:</h4>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { initConfig } from './config'
|
||
import { categoryDataMock, categoryOptionsMock } from './mock'
|
||
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, InputRefs, inputVisibles, onAddCategoryDataOption, handleInputConfirm } =
|
||
useCategoryAddOption(categoryData)
|
||
|
||
const list = computed(() => generateTargetData(categoryData.value))
|
||
console.warn('----- my data is list.value: ', list.value)
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
#commodity-detail {
|
||
--el-color-info: #000;
|
||
.sku-info {
|
||
:deep(.el-card__body) {
|
||
padding-bottom: 12px;
|
||
}
|
||
}
|
||
:deep(.el-button) {
|
||
&.el-button--small {
|
||
padding-top: 5px;
|
||
padding-bottom: 5px;
|
||
}
|
||
color: #666;
|
||
}
|
||
}
|
||
</style>
|