445 lines
14 KiB
Vue
445 lines
14 KiB
Vue
<template>
|
||
<div id="commodity-detail">
|
||
<el-card>
|
||
<h4 class="font-bold">基本信息：</h4>
|
||
<form-wrap :form="$dialog">
|
||
<template #appCategoryId>
|
||
<el-tree-select
|
||
show-checkbox
|
||
v-model="$dialog.data.appCategoryId"
|
||
:props="defaultAdminCategoryTreeProps"
|
||
:render-after-expand="false"
|
||
:default-expanded-keys="defaultCheckedNodes.app"
|
||
@check="
|
||
(checkedNode: any, checkedStatus: any) =>
|
||
handleCheckChange(checkedNode, checkedStatus, 'app', $dialog.data)
|
||
"
|
||
:load="handleLoadNode2"
|
||
lazy
|
||
>
|
||
</el-tree-select>
|
||
</template>
|
||
<template #mainFile>
|
||
<file-upload-btn
|
||
accept="image/*"
|
||
size="default"
|
||
@change="(val) => handleChooseFiles('mainImageUrl', val, fileList)"
|
||
/>
|
||
<el-button class="ml-2" @click="onClickChooseResourceBtn('mainImageUrl')"
|
||
>资源库导入</el-button
|
||
>
|
||
</template>
|
||
<template #videoFile>
|
||
<file-upload-btn
|
||
size="default"
|
||
accept="video/*"
|
||
@change="(val) => handleChooseFiles('videoUrl', val, fileList)"
|
||
/>
|
||
<el-button class="ml-2" @click="onClickChooseResourceBtn('videoUrl')"
|
||
>资源库导入</el-button
|
||
>
|
||
</template>
|
||
<template #subFile>
|
||
<file-upload-btn
|
||
size="default"
|
||
multiple
|
||
accept="image/*"
|
||
@change="(val) => handleChooseFiles('subImageUrl', val, fileList)"
|
||
/>
|
||
<el-button class="ml-2" @click="onClickChooseResourceBtn('subImageUrl')"
|
||
>资源库导入</el-button
|
||
>
|
||
</template>
|
||
<template #fileReviewList>
|
||
<resource-review v-model:fileList="fileList" />
|
||
</template>
|
||
</form-wrap>
|
||
</el-card>
|
||
<el-card class="mt-2 sku-info">
|
||
<h4 class="font-bold mb-2">属性配置:</h4>
|
||
<el-form inline>
|
||
<el-form-item label="后台类目">
|
||
<el-tree-select
|
||
show-checkbox
|
||
v-model="$dialog.data.adminCategoryId"
|
||
:props="defaultAdminCategoryTreeProps"
|
||
:render-after-expand="false"
|
||
:default-expanded-keys="defaultCheckedNodes.admin"
|
||
@check="
|
||
(checkedNode: any, checkedStatus: any) =>
|
||
handleAfterChangeCategory(
|
||
handleCheckChange(checkedNode, checkedStatus, 'admin', $dialog.data)
|
||
)
|
||
"
|
||
:load="handleLoadNode"
|
||
lazy
|
||
style="width: 240px"
|
||
>
|
||
</el-tree-select>
|
||
</el-form-item>
|
||
<el-form-item label="特色">
|
||
<div class="flex">
|
||
<el-input
|
||
class="w-1/2"
|
||
v-model="$dialog.data.feature1"
|
||
placeholder="请输入特色1"
|
||
></el-input>
|
||
<el-input
|
||
class="w-1/2 ml-2"
|
||
v-model="$dialog.data.feature2"
|
||
placeholder="请输入特色2"
|
||
></el-input>
|
||
</div>
|
||
</el-form-item>
|
||
<br />
|
||
<el-form-item label="测试商品">
|
||
<el-switch v-model="$dialog.data.isTest" :active-value="1" :inactive-value="0" />
|
||
</el-form-item>
|
||
<el-form-item label="新品">
|
||
<el-switch v-model="$dialog.data.isNew" :active-value="1" :inactive-value="0" />
|
||
</el-form-item>
|
||
<el-form-item label="限时秒杀">
|
||
<el-switch v-model="$dialog.data.isFlash" :active-value="1" :inactive-value="0" />
|
||
</el-form-item>
|
||
<el-form-item label="上线">
|
||
<el-switch v-model="$dialog.data.status" active-value="online" inactive-value="down" />
|
||
</el-form-item>
|
||
<el-form-item label="加入首页">
|
||
<el-switch v-model="$dialog.data.frontPage" :active-value="1" :inactive-value="0" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-popover
|
||
:visible="visiblePropertyLine"
|
||
placement="bottom"
|
||
title="请输入属性类型标题"
|
||
:width="200"
|
||
trigger="click"
|
||
>
|
||
<template #reference>
|
||
<el-button type="primary" class="ml-2 !text-white" @click="onClickAddPropertyTypeBtn"
|
||
>新增属性类型</el-button
|
||
>
|
||
</template>
|
||
<el-input
|
||
ref="propertyTypeInputRef"
|
||
v-model="inputPropertyLineValue"
|
||
@keyup.enter="onAddPropertyLine($dialog.data.adminCategoryId, inputPropertyLineValue)"
|
||
@blur="visiblePropertyLine = false"
|
||
></el-input>
|
||
</el-popover>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div ref="dragRef">
|
||
<dl v-for="(item, index) in adminCategoryData" :key="item.id" class="flex items-center">
|
||
<dt class="text-sm text-[#666] mb-2">
|
||
<span v-if="editPropertyTypeIndex !== index">{{ item.categoryPropertyName }}</span>
|
||
<el-input
|
||
ref="editPropertyTypeInputRef"
|
||
v-else
|
||
v-model="editPropertyTypeValue"
|
||
size="small"
|
||
class="w-20"
|
||
@keyup.enter="handleEditPropertyTypeConfirm(item, skuList, adminCategoryData)"
|
||
@blur="editPropertyTypeIndex = NaN"
|
||
/>：
|
||
</dt>
|
||
<dd class="flex mb-2">
|
||
<div v-for="child in item.vvPropertyValueList" :key="item.id + '-' + child.id">
|
||
<el-input
|
||
v-if="curPropertyValueId === item.id + '_' + child.id"
|
||
ref="editPropertyValueInputRef"
|
||
class="w-20"
|
||
size="small"
|
||
v-model="inputEditPropertyValue"
|
||
@keyup.enter="onEditPropertyValue(child, skuList, item.vvPropertyValueList)"
|
||
@blur="curPropertyValueId = ''"
|
||
></el-input>
|
||
<el-tag
|
||
v-else
|
||
closable
|
||
effect="plain"
|
||
:type="colors[index % 4]"
|
||
class="mr-1 property-type-tag"
|
||
size="large"
|
||
@click="onClickPropertyValue(item, child)"
|
||
@close="onDeletePropertyValue(index, child.id)"
|
||
>
|
||
<el-popover title="" placement="top-start" :width="280">
|
||
<template #reference>
|
||
<el-icon
|
||
color="#999"
|
||
class="mr-1"
|
||
v-if="!child.imageUrl"
|
||
@click.stop="onChangePropertyTypeImage(child)"
|
||
><Picture
|
||
/></el-icon>
|
||
<img
|
||
v-else
|
||
:src="child.imageUrl"
|
||
alt=""
|
||
class="w-6 h-6 mr-1"
|
||
@click.stop="onChangePropertyTypeImage(child)"
|
||
/>
|
||
</template>
|
||
<div>
|
||
<file-upload-btn
|
||
class="inline-block"
|
||
size="small"
|
||
accept="image/*"
|
||
@change="(val) => (child.imageUrl = val[0].resourceUrl)"
|
||
/>
|
||
<el-button
|
||
type="success"
|
||
size="small"
|
||
class="ml-2"
|
||
@click="(showFileExplorer = true) && (curPropertyTypeImage = child)"
|
||
>资源库导入</el-button
|
||
>
|
||
<el-button type="danger" size="small" class="ml-2" @click="child.imageUrl = ''"
|
||
>清空</el-button
|
||
>
|
||
</div> </el-popover
|
||
><span>{{ child.categoryPropertyValue }}</span></el-tag
|
||
>
|
||
</div>
|
||
<el-input
|
||
v-if="inputVisibles[index]"
|
||
ref="InputRefs"
|
||
v-model="inputValue"
|
||
class="w-20"
|
||
size="small"
|
||
@keyup.enter="handleInputConfirm(index, skuList)"
|
||
@blur="handleInputConfirm(index)"
|
||
/>
|
||
<el-button
|
||
v-else
|
||
type="primary"
|
||
class="button-new-tag ml-1 !text-white"
|
||
size="small"
|
||
@click="onAddPropertyValue(index)"
|
||
>
|
||
+ 新增
|
||
</el-button>
|
||
<el-button
|
||
type="warning"
|
||
class="button-new-tag ml-1 !text-white"
|
||
size="small"
|
||
@click="onEditPropertyTypeBtn(index)"
|
||
>
|
||
修改属性
|
||
</el-button>
|
||
<el-button
|
||
type="danger"
|
||
class="button-new-tag ml-1 !text-white"
|
||
size="small"
|
||
@click="
|
||
() => {
|
||
onDeletePropertyTypeBtn(index, adminCategoryData, skuList)
|
||
skuList = generateSkuList(adminCategoryData)
|
||
}
|
||
"
|
||
>
|
||
删除属性
|
||
</el-button>
|
||
</dd>
|
||
</dl>
|
||
</div>
|
||
|
||
<h4 class="my-1">sku配置：</h4>
|
||
<div
|
||
class="flex w-full flex-wrap justify-between p-2 rounded-[5px]"
|
||
style="border: 1px dashed #bbb"
|
||
>
|
||
<category-config :list="skuList.slice(0, Math.floor(skuList.length / 2))" />
|
||
<category-config
|
||
:startIndex="Math.floor(skuList.length / 2)"
|
||
:list="skuList.slice(Math.floor(skuList.length / 2))"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
<el-card>
|
||
<h4 class="font-bold mb-2">内容编辑:</h4>
|
||
<wan-editor v-model="$dialog.data.htmlContent"></wan-editor>
|
||
</el-card>
|
||
<el-button class="mt-2 !text-white" type="primary" @click="onSubmit()">提交</el-button>
|
||
<FileExplorerDialog
|
||
v-model="showFileExplorer"
|
||
v-model:initPathArray="currentPathArray"
|
||
@select="handleChooseResourceFileCallback"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { initConfig } from './config'
|
||
import {
|
||
generateSkuList,
|
||
usePropertyValue,
|
||
colors,
|
||
useDrag,
|
||
handleLoadNode,
|
||
handleLoadNode2,
|
||
handleCheckChange,
|
||
defaultAdminCategoryTreeProps,
|
||
defaultCheckedNodes,
|
||
fileList,
|
||
TSkuList,
|
||
onChangePropertyTypeImage
|
||
} from './use-method'
|
||
import {
|
||
handleGetDialogData,
|
||
handleGetNewAdminCategoryData,
|
||
handleGetNewSkuList
|
||
} from './edit-method'
|
||
import { handleValidFormData, handleGetSubmitParams } from './submit-method'
|
||
import {
|
||
editPropertyTypeIndex,
|
||
editPropertyTypeValue,
|
||
editPropertyTypeInputRef,
|
||
onEditPropertyTypeBtn,
|
||
handleEditPropertyTypeConfirm,
|
||
onDeletePropertyTypeBtn,
|
||
inputEditPropertyValue,
|
||
editPropertyValueInputRef,
|
||
onClickPropertyValue,
|
||
onEditPropertyValue,
|
||
curPropertyValueId
|
||
} from './init-method'
|
||
import categoryConfig from './category-config.vue'
|
||
import wanEditor from './editor.vue'
|
||
import fileUploadBtn from '@/components/FileUploadBtn/index.vue'
|
||
import resourceReview from '@/components/ResourceReview/index.vue'
|
||
import { curPropertyTypeImage, useImportFile, handleChooseFiles } from './choose-file-method'
|
||
import FileExplorerDialog from '@/components/FileExplorerDialog/index.vue'
|
||
import { Atrans$DialogRes } from '@/utils/page/config'
|
||
import { ElMessage } from 'element-plus'
|
||
import { Picture } from '@element-plus/icons-vue'
|
||
|
||
const route = useRoute()
|
||
const $dialog = ref<Atrans$DialogRes>({} as Atrans$DialogRes)
|
||
const init = async () => {
|
||
defaultCheckedNodes.value = { admin: [], app: [] }
|
||
const data = initConfig().value!
|
||
$dialog.value = data.$dialog
|
||
$dialog.value.config = data.dialog1
|
||
$dialog.value.data = {
|
||
htmlContent: '',
|
||
appCategoryId: '',
|
||
adminCategoryId: '',
|
||
isTest: 0,
|
||
isNew: 0,
|
||
isFlash: 0,
|
||
title: '',
|
||
frontPage: 0,
|
||
status: 'down'
|
||
}
|
||
adminCategoryData.value = []
|
||
skuList.value = []
|
||
if (route.query.id) {
|
||
const res = await api.commodity.getCommodityDetail.post!<any>({ productId: route.query.id })
|
||
handleGetDialogData(res.data, $dialog, fileList, defaultCheckedNodes)
|
||
adminCategoryData.value = handleGetNewAdminCategoryData(res.data.vvProductPropertyList)
|
||
initPropertyData(adminCategoryData.value)
|
||
skuList.value = handleGetNewSkuList(res.data.vvSkuList)
|
||
} else {
|
||
fileList.value = []
|
||
initPropertyData(adminCategoryData.value)
|
||
}
|
||
}
|
||
|
||
const {
|
||
showFileExplorer,
|
||
currentPathArray,
|
||
handleChooseResourceFileCallback,
|
||
onClickChooseResourceBtn
|
||
} = useImportFile(fileList)
|
||
|
||
const adminCategoryData = ref([])
|
||
const {
|
||
inputValue,
|
||
visiblePropertyLine,
|
||
inputPropertyLineValue,
|
||
InputRefs,
|
||
inputVisibles,
|
||
initPropertyData,
|
||
onAddPropertyValue,
|
||
onClosePropertyValue,
|
||
handleInputConfirm,
|
||
onAddPropertyLine
|
||
} = usePropertyValue()
|
||
|
||
const { dragRef, createDrag } = useDrag(adminCategoryData)
|
||
createDrag()
|
||
const skuList = ref<TSkuList[]>([])
|
||
|
||
// 当改变后台类目的时候，进行修改重置sku
|
||
const handleAfterChangeCategory = (data: any) => {
|
||
console.warn('----- my data is data.vvCategoryPropertyDTOList: ', data)
|
||
adminCategoryData.value = data.categoryPropertyList || []
|
||
initPropertyData(adminCategoryData.value)
|
||
skuList.value = generateSkuList(adminCategoryData.value)
|
||
}
|
||
|
||
const onDeletePropertyValue = (index: number, id: number) =>
|
||
onClosePropertyValue(index, id, skuList)
|
||
|
||
const propertyTypeInputRef = ref()
|
||
const onClickAddPropertyTypeBtn = () => {
|
||
visiblePropertyLine.value = true
|
||
nextTick(() => {
|
||
propertyTypeInputRef.value.input!.focus()
|
||
})
|
||
}
|
||
|
||
const router = useRouter()
|
||
const onSubmit = () => {
|
||
const msg = handleValidFormData(
|
||
$dialog.value.data,
|
||
fileList.value,
|
||
adminCategoryData.value,
|
||
skuList.value
|
||
)
|
||
if (msg) return ElMessage.error(msg)
|
||
const params = handleGetSubmitParams(
|
||
route.query.type === 'add',
|
||
$dialog.value.data,
|
||
fileList.value,
|
||
adminCategoryData.value,
|
||
skuList.value,
|
||
defaultCheckedNodes
|
||
)
|
||
console.warn('----- my data is params111: ', params)
|
||
if (route.query.type === 'edit') Object.assign(params, { id: route.query.id })
|
||
api.commodity.addOrUpdateCommodity.post!(params).then((res) => {
|
||
router.replace({ path: '/goods/commodity/index' })
|
||
console.warn('----- my data is res: ', res)
|
||
})
|
||
}
|
||
|
||
init()
|
||
</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;
|
||
}
|
||
.property-type-tag {
|
||
:deep(.el-tag__content) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|