📖 MALL:商品编辑 => 简化 InfoForm 基础设置

pull/361/MERGE
YunaiV 2024-01-11 09:42:23 +08:00
parent 2c76d3aeee
commit efe702d383
5 changed files with 35 additions and 42 deletions

View File

@ -16,7 +16,7 @@
<template v-if="modelValue">
<img :src="modelValue" class="upload-image" />
<div class="upload-handle" @click.stop>
<div class="handle-icon" @click="editImg">
<div class="handle-icon" @click="editImg" v-if="!disabled">
<Icon icon="ep:edit" />
<span v-if="showBtnText">{{ t('action.edit') }}</span>
</div>
@ -24,7 +24,7 @@
<Icon icon="ep:zoom-in" />
<span v-if="showBtnText">{{ t('action.detail') }}</span>
</div>
<div v-if="showDelete" class="handle-icon" @click="deleteImg">
<div v-if="showDelete && !disabled" class="handle-icon" @click="deleteImg">
<Icon icon="ep:delete" />
<span v-if="showBtnText">{{ t('action.del') }}</span>
</div>

View File

@ -28,7 +28,7 @@
<Icon icon="ep:zoom-in" />
<span>查看</span>
</div>
<div class="handle-icon" @click="handleRemove(file)">
<div class="handle-icon" @click="handleRemove(file)" v-if="!disabled">
<Icon icon="ep:delete" />
<span>删除</span>
</div>

View File

@ -177,7 +177,7 @@ export const fileSizeFormatter = (row, column, cellValue) => {
* @param target
* @param source
*/
export const copyValueToTarget = (target, source) => {
export const copyValueToTarget = (target: any, source: any) => {
const newObj = Object.assign({}, target, source)
// 删除多余属性
Object.keys(newObj).forEach((key) => {

View File

@ -1,3 +1,4 @@
<!-- 商品发布 - 基础设置 -->
<template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
<el-form-item label="商品名称" prop="name">
@ -49,10 +50,10 @@
/>
</el-form-item>
<el-form-item label="商品封面图" prop="picUrl">
<UploadImg v-model="formData.picUrl" height="80px" />
<UploadImg v-model="formData.picUrl" height="80px" :disabled="isDetail" />
</el-form-item>
<el-form-item label="商品轮播图" prop="sliderPicUrls">
<UploadImgs v-model:modelValue="formData.sliderPicUrls" />
<UploadImgs v-model:modelValue="formData.sliderPicUrls" :disabled="isDetail" />
</el-form-item>
</el-form>
</template>
@ -60,16 +61,14 @@
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { defaultProps, handleTree, treeToString } from '@/utils/tree'
import { defaultProps, handleTree } from '@/utils/tree'
import type { Spu } from '@/api/mall/product/spu'
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as ProductBrandApi from '@/api/mall/product/brand'
import { BrandVO } from '@/api/mall/product/brand'
import { CategoryVO } from '@/api/mall/product/category'
defineOptions({ name: 'ProductSpuBasicInfoForm' })
const message = useMessage() //
const props = defineProps({
propFormData: {
type: Object as PropType<Spu>,
@ -79,6 +78,8 @@ const props = defineProps({
isDetail: propTypes.bool.def(false) //
})
const message = useMessage() //
const formRef = ref() // Ref
const formData = reactive<Spu>({
name: '', //
@ -109,6 +110,7 @@ watch(
return
}
copyValueToTarget(formData, data)
// TODO @puhui999 v-model
formData.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
url: item
}))
@ -118,38 +120,30 @@ watch(
}
)
/**
* 表单校验
*/
/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
//
if (!formRef) return
return await unref(formRef).validate((valid) => {
if (!valid) {
message.warning('商品信息未完善!!')
emit('update:activeName', 'basicInfo')
//
throw new Error('商品信息未完善!!')
} else {
//
Object.assign(props.propFormData, formData)
}
})
try {
await unref(formRef)?.validate()
//
Object.assign(props.propFormData, formData)
} catch (e) {
message.error('【基础设置】不完善,请填写相关信息')
emit('update:activeName', 'info')
throw e //
}
}
defineExpose({ validate })
/** 获取分类的节点的完整结构 */
const categoryList = ref<any[]>([]) //
const formatCategoryName = (categoryId: number) => {
return treeToString(categoryList.value, categoryId)
}
const brandList = ref<BrandVO[]>([]) //
/** 初始化 */
const brandList = ref<BrandVO[]>([]) //
const categoryList = ref<CategoryVO[]>([]) //
onMounted(async () => {
//
const data = await ProductCategoryApi.getCategoryList({})
categoryList.value = handleTree(data, 'id', 'parentId')
categoryList.value = handleTree(data, 'id')
//
brandList.value = await ProductBrandApi.getSimpleBrandList()
})

View File

@ -1,9 +1,9 @@
<template>
<ContentWrap v-loading="formLoading">
<el-tabs v-model="activeName">
<el-tab-pane label="基础设置" name="basicInfo">
<BasicInfoForm
ref="basicInfoRef"
<el-tab-pane label="基础设置" name="info">
<InfoForm
ref="infoRef"
v-model:activeName="activeName"
:is-detail="isDetail"
:propFormData="formData"
@ -57,7 +57,7 @@
import { cloneDeep } from 'lodash-es'
import { useTagsViewStore } from '@/store/modules/tagsView'
import * as ProductSpuApi from '@/api/mall/product/spu'
import BasicInfoForm from './BasicInfoForm.vue'
import InfoForm from './InfoForm.vue'
import DescriptionForm from './DescriptionForm.vue'
import OtherSettingsForm from './OtherSettingsForm.vue'
import SkuForm from './SkuForm.vue'
@ -73,9 +73,9 @@ const { params, name } = useRoute() // 查询参数
const { delView } = useTagsViewStore() //
const formLoading = ref(false) // 12
const activeName = ref('basicInfo') // Tag
const activeName = ref('info') // Tag
const isDetail = ref(false) //
const basicInfoRef = ref() // Ref
const infoRef = ref() // Ref
const skuRef = ref() // Ref
const deliveryRef = ref() // Ref
const descriptionRef = ref() // Ref
@ -149,15 +149,14 @@ const getDetail = async () => {
const submitForm = async () => {
//
formLoading.value = true
//
//
try {
await unref(basicInfoRef)?.validate()
//
await unref(infoRef)?.validate()
await unref(skuRef)?.validate()
await unref(deliveryRef)?.validate()
await unref(descriptionRef)?.validate()
await unref(otherSettingsRef)?.validate()
// , server
// , server
const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
deepCopyFormData.skus!.forEach((item) => {
// sku name