|
|
@@ -0,0 +1,105 @@
|
|
|
+<template>
|
|
|
+ <!-- 情况一：添加/修改 -->
|
|
|
+ <el-form
|
|
|
+ v-if="!isDetail"
|
|
|
+ ref="productSpuBasicInfoRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="120px"
|
|
|
+ >
|
|
|
+ <!-- TODO 芋艿：宽度！！ -->
|
|
|
+ <!-- TODO 芋艿：这里要挪出去 -->
|
|
|
+ <el-form-item label="运费模板" prop="deliveryTemplateId">
|
|
|
+ <el-select v-model="formData.deliveryTemplateId" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in deliveryTemplateList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 情况二：详情 -->
|
|
|
+ <Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
|
|
|
+ <template #deliveryTemplateId="{ row }">
|
|
|
+ {{ deliveryTemplateList.find((item) => item.id === row.deliveryTemplateId)?.name }}
|
|
|
+ </template>
|
|
|
+ </Descriptions>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { PropType } from 'vue'
|
|
|
+import { copyValueToTarget } from '@/utils'
|
|
|
+import { propTypes } from '@/utils/propTypes'
|
|
|
+import { basicInfoSchema } from './spu.data'
|
|
|
+import type { Spu } from '@/api/mall/product/spu'
|
|
|
+import * as ExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
|
|
|
+
|
|
|
+defineOptions({ name: 'ProductSpuBasicInfoForm' })
|
|
|
+
|
|
|
+// ====== 商品详情相关操作 ======
|
|
|
+const { allSchemas } = useCrudSchemas(basicInfoSchema)
|
|
|
+
|
|
|
+// ====== end ======
|
|
|
+
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ propFormData: {
|
|
|
+ type: Object as PropType<Spu>,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ activeName: propTypes.string.def(''),
|
|
|
+ isDetail: propTypes.bool.def(false) // 是否作为详情组件
|
|
|
+})
|
|
|
+const productSpuBasicInfoRef = ref() // 表单 Ref
|
|
|
+const formData = reactive<Spu>({
|
|
|
+ deliveryTemplateId: null // 运费模版
|
|
|
+})
|
|
|
+const rules = reactive({
|
|
|
+ deliveryTemplateId: [required]
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 将传进来的值赋值给 formData
|
|
|
+ */
|
|
|
+watch(
|
|
|
+ () => props.propFormData,
|
|
|
+ (data) => {
|
|
|
+ if (!data) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ copyValueToTarget(formData, data)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+/**
|
|
|
+ * 表单校验
|
|
|
+ */
|
|
|
+const emit = defineEmits(['update:activeName'])
|
|
|
+const validate = async () => {
|
|
|
+ // 校验表单
|
|
|
+ if (!productSpuBasicInfoRef) return
|
|
|
+ return await unref(productSpuBasicInfoRef).validate((valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ message.warning('商品信息未完善！！')
|
|
|
+ emit('update:activeName', 'delivery')
|
|
|
+ // 目的截断之后的校验
|
|
|
+ throw new Error('商品信息未完善！！')
|
|
|
+ } else {
|
|
|
+ // 校验通过更新数据
|
|
|
+ Object.assign(props.propFormData, formData)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+defineExpose({ validate })
|
|
|
+
|
|
|
+const deliveryTemplateList = ref([]) // 运费模版
|
|
|
+onMounted(async () => {
|
|
|
+ deliveryTemplateList.value = await ExpressTemplateApi.getSimpleTemplateList()
|
|
|
+})
|
|
|
+</script>
|
YunaiV