diff --git a/src/views/goods/commodity/detail-dialog/edit-method.ts b/src/views/goods/commodity/detail-dialog/edit-method.ts index a7bb71c..ef528cd 100644 --- a/src/views/goods/commodity/detail-dialog/edit-method.ts +++ b/src/views/goods/commodity/detail-dialog/edit-method.ts @@ -87,10 +87,10 @@ export const handleGetNewAdminCategoryData = (data: any) => { export const handleGetNewSkuList = (data: any) => { return data.map((item: any) => ({ ...item, - name: item.vvSkuPropertyValueList.reduce((str: string, cur: any) => { + name: item.vvSkuPropertyValueList.reduce((str: string, cur: any, index: number) => { cur.categoryPropertyName = cur.productPropertyName cur.categoryPropertyValue = cur.productPropertyValue - str += cur.productPropertyValue + str += index === 0 ? cur.productPropertyValue : '-' + cur.productPropertyValue return str }, '') })) diff --git a/src/views/goods/commodity/detail-dialog/index.vue b/src/views/goods/commodity/detail-dialog/index.vue index 7f16a8b..dcf2b21 100644 --- a/src/views/goods/commodity/detail-dialog/index.vue +++ b/src/views/goods/commodity/detail-dialog/index.vue @@ -103,24 +103,51 @@ trigger="click" > - +
-
{{ item.categoryPropertyName }}:
+
+ {{ item.categoryPropertyName }} + : +
+ {{ child.categoryPropertyValue }} @@ -136,12 +163,29 @@ /> + 新增 + + 修改属性 + + + 删除属性 +
@@ -189,6 +233,19 @@ import { 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' @@ -258,6 +315,14 @@ const htmlContent = ref('自定义') 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( @@ -285,6 +350,7 @@ const onSubmit = () => { console.warn('----- my data is res: ', res) }) } + init() diff --git a/src/views/goods/commodity/detail-dialog/init-method.ts b/src/views/goods/commodity/detail-dialog/init-method.ts new file mode 100644 index 0000000..10f8ea2 --- /dev/null +++ b/src/views/goods/commodity/detail-dialog/init-method.ts @@ -0,0 +1,37 @@ +export const editPropertyTypeIndex = ref(NaN) +export const editPropertyTypeValue = ref('') +export const editPropertyTypeInputRef = ref() +export const onEditPropertyTypeBtn = (index: number) => { + editPropertyTypeIndex.value = index + nextTick(() => { + editPropertyTypeInputRef.value[0].input!.focus() + }) +} + +export const handleEditPropertyTypeConfirm = async (item: any) => { + item.categoryPropertyName = editPropertyTypeValue.value + editPropertyTypeIndex.value = NaN +} + +export const onDeletePropertyTypeBtn = (index: number, adminCategoryData: any, skuList: any) => { + adminCategoryData.splice(index, 1) + skuList.length = 0 +} + +export const curPropertyValueId = ref('') +export const inputEditPropertyValue = ref('') +export const editPropertyValueInputRef = ref() + +export const onClickPropertyValue = (item: any, child: any) => { + curPropertyValueId.value = item.id + '-' + child.id + inputEditPropertyValue.value = child.categoryPropertyValue + nextTick(() => { + editPropertyValueInputRef.value[0].input!.focus() + }) +} + +export const onEditPropertyValue = (child: any, skuList: any) => { + child.categoryPropertyValue = inputEditPropertyValue.value + curPropertyValueId.value = '' + inputEditPropertyValue.value = '' +} diff --git a/src/views/goods/commodity/detail-dialog/use-method.ts b/src/views/goods/commodity/detail-dialog/use-method.ts index f2fe8f6..5ddeee0 100644 --- a/src/views/goods/commodity/detail-dialog/use-method.ts +++ b/src/views/goods/commodity/detail-dialog/use-method.ts @@ -104,18 +104,20 @@ export const usePropertyValue = () => { const handleInputConfirm = (lineIndex: number, skuList: TSkuList[] = []) => { if (inputValue.value) { const id = Math.random() - adminCategoryData[lineIndex].vvPropertyValueList.push({ + const newData = { id, + categoryPropertyName: adminCategoryData[lineIndex].categoryPropertyName, categoryPropertyValue: inputValue.value, isAdd: true - }) - skuList.push( - ...generateAddSkuList( - lineIndex, - { id, categoryPropertyValue: inputValue.value }, - adminCategoryData - ) - ) + } + adminCategoryData[lineIndex].vvPropertyValueList.push({ ...newData }) + if (skuList?.length && skuList[0].vvSkuPropertyValueList.length < adminCategoryData.length) { + skuList.forEach((item: TSkuList) => { + item.name += '-' + inputValue.value + item.vvSkuPropertyValueList.push({ ...newData }) + }) + } + skuList.push(...generateAddSkuList(lineIndex, { ...newData }, adminCategoryData)) } inputVisibles.value[lineIndex] = false inputValue.value = '' @@ -159,12 +161,13 @@ export const usePropertyValue = () => { console.warn('----- my data is result111: ', result) return result } - const onAddPropertyLine = () => { + const onAddPropertyLine = (categoryId: number, val: string) => { visiblePropertyLine.value = false + console.warn('----- my data is inputPropertyLineValue: ', val) adminCategoryData.push({ id: Math.random(), - categoryId: 17, - categoryName: '', + categoryId, + categoryName: val, visiblePropertyLine, categoryPropertyName: inputPropertyLineValue.value, vvPropertyValueList: []