BasicInfoForm.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <template>
  2. <!-- 情况一:添加/修改 -->
  3. <el-form
  4. v-if="!isDetail"
  5. ref="productSpuBasicInfoRef"
  6. :model="formData"
  7. :rules="rules"
  8. label-width="120px"
  9. >
  10. <el-row>
  11. <el-col :span="12">
  12. <el-form-item label="商品名称" prop="name">
  13. <el-input v-model="formData.name" placeholder="请输入商品名称" />
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="12">
  17. <el-form-item label="商品分类" prop="categoryId">
  18. <el-tree-select
  19. v-model="formData.categoryId"
  20. :data="categoryList"
  21. :props="defaultProps"
  22. check-strictly
  23. class="w-1/1"
  24. node-key="id"
  25. placeholder="请选择商品分类"
  26. @change="categoryNodeClick"
  27. />
  28. </el-form-item>
  29. </el-col>
  30. <el-col :span="12">
  31. <el-form-item label="商品关键字" prop="keyword">
  32. <el-input v-model="formData.keyword" placeholder="请输入商品关键字" />
  33. </el-form-item>
  34. </el-col>
  35. <el-col :span="12">
  36. <el-form-item label="单位" prop="unit">
  37. <el-select v-model="formData.unit" class="w-1/1" placeholder="请选择单位">
  38. <el-option
  39. v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_UNIT)"
  40. :key="dict.value"
  41. :label="dict.label"
  42. :value="dict.value"
  43. />
  44. </el-select>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="12">
  48. <el-form-item label="商品简介" prop="introduction">
  49. <el-input
  50. v-model="formData.introduction"
  51. :rows="3"
  52. placeholder="请输入商品简介"
  53. type="textarea"
  54. />
  55. </el-form-item>
  56. </el-col>
  57. <el-col :span="12">
  58. <el-form-item label="商品封面图" prop="picUrl">
  59. <UploadImg v-model="formData.picUrl" height="80px" />
  60. </el-form-item>
  61. </el-col>
  62. <el-col :span="24">
  63. <el-form-item label="商品轮播图" prop="sliderPicUrls">
  64. <UploadImgs v-model:modelValue="formData.sliderPicUrls" />
  65. </el-form-item>
  66. </el-col>
  67. <el-col :span="12">
  68. <el-form-item label="运费模板" prop="deliveryTemplateId">
  69. <el-select v-model="formData.deliveryTemplateId" placeholder="请选择">
  70. <el-option
  71. v-for="item in deliveryTemplateList"
  72. :key="item.id"
  73. :label="item.name"
  74. :value="item.id"
  75. />
  76. </el-select>
  77. <!-- TODO 可能情况:善品录入后选择运费发现下拉选择中没有对应的模版 这里需不需要做添加运费模版后选择的功能 -->
  78. <!-- <el-button class="ml-20px">运费模板</el-button>-->
  79. </el-form-item>
  80. </el-col>
  81. <el-col :span="12">
  82. <el-form-item label="品牌" prop="brandId">
  83. <el-select v-model="formData.brandId" placeholder="请选择">
  84. <el-option
  85. v-for="item in brandList"
  86. :key="item.id"
  87. :label="item.name"
  88. :value="item.id"
  89. />
  90. </el-select>
  91. </el-form-item>
  92. </el-col>
  93. <el-col :span="12">
  94. <el-form-item label="商品规格" props="specType">
  95. <el-radio-group v-model="formData.specType" @change="onChangeSpec">
  96. <el-radio :label="false" class="radio">单规格</el-radio>
  97. <el-radio :label="true">多规格</el-radio>
  98. </el-radio-group>
  99. </el-form-item>
  100. </el-col>
  101. <el-col :span="12">
  102. <el-form-item label="分销类型" props="subCommissionType">
  103. <el-radio-group v-model="formData.subCommissionType" @change="changeSubCommissionType">
  104. <el-radio :label="false">默认设置</el-radio>
  105. <el-radio :label="true" class="radio">自行设置</el-radio>
  106. </el-radio-group>
  107. </el-form-item>
  108. </el-col>
  109. <!-- 多规格添加-->
  110. <el-col :span="24">
  111. <el-form-item v-if="!formData.specType">
  112. <SkuList ref="skuListRef" :prop-form-data="formData" :propertyList="propertyList" />
  113. </el-form-item>
  114. <el-form-item v-if="formData.specType" label="商品属性">
  115. <el-button class="mr-15px mb-10px" @click="attributesAddFormRef.open">添加规格</el-button>
  116. <ProductAttributes :propertyList="propertyList" @success="generateSkus" />
  117. </el-form-item>
  118. <template v-if="formData.specType && propertyList.length > 0">
  119. <el-form-item label="批量设置">
  120. <SkuList :is-batch="true" :prop-form-data="formData" :propertyList="propertyList" />
  121. </el-form-item>
  122. <el-form-item label="属性列表">
  123. <SkuList ref="skuListRef" :prop-form-data="formData" :propertyList="propertyList" />
  124. </el-form-item>
  125. </template>
  126. </el-col>
  127. </el-row>
  128. </el-form>
  129. <!-- 情况二:详情 -->
  130. <Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
  131. <template #categoryId="{ row }"> {{ categoryString(row.categoryId) }}</template>
  132. <template #brandId="{ row }">
  133. {{ brandList.find((item) => item.id === row.brandId)?.name }}
  134. </template>
  135. <template #deliveryTemplateId="{ row }">
  136. {{ deliveryTemplateList.find((item) => item.id === row.deliveryTemplateId)?.name }}
  137. </template>
  138. <template #specType="{ row }">
  139. {{ row.specType ? '多规格' : '单规格' }}
  140. </template>
  141. <template #subCommissionType="{ row }">
  142. {{ row.subCommissionType ? '自行设置' : '默认设置' }}
  143. </template>
  144. <template #picUrl="{ row }">
  145. <el-image :src="row.picUrl" class="w-60px h-60px" @click="imagePreview(row.picUrl)" />
  146. </template>
  147. <template #sliderPicUrls="{ row }">
  148. <el-image
  149. v-for="(item, index) in row.sliderPicUrls"
  150. :key="index"
  151. :src="item.url"
  152. class="w-60px h-60px mr-10px"
  153. @click="imagePreview(row.sliderPicUrls)"
  154. />
  155. </template>
  156. <template #skus>
  157. <SkuList
  158. ref="skuDetailListRef"
  159. :is-detail="isDetail"
  160. :prop-form-data="formData"
  161. :propertyList="propertyList"
  162. />
  163. </template>
  164. </Descriptions>
  165. <!-- 商品属性添加 Form 表单 -->
  166. <ProductPropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
  167. </template>
  168. <script lang="ts" setup>
  169. import { PropType } from 'vue'
  170. import { isArray } from '@/utils/is'
  171. import { copyValueToTarget } from '@/utils'
  172. import { propTypes } from '@/utils/propTypes'
  173. import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/utils/tree'
  174. import { createImageViewer } from '@/components/ImageViewer'
  175. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  176. import { UploadImg, UploadImgs } from '@/components/UploadFile'
  177. import { getPropertyList, ProductAttributes, ProductPropertyAddForm, SkuList } from './index'
  178. import { basicInfoSchema } from './spu.data'
  179. import type { Spu } from '@/api/mall/product/spu'
  180. import * as ProductCategoryApi from '@/api/mall/product/category'
  181. import { getSimpleBrandList } from '@/api/mall/product/brand'
  182. import { getSimpleTemplateList } from '@/api/mall/trade/delivery/expressTemplate/index'
  183. // ====== 商品详情相关操作 ======
  184. const { allSchemas } = useCrudSchemas(basicInfoSchema)
  185. /** 商品图预览 */
  186. const imagePreview = (args) => {
  187. const urlList = []
  188. if (isArray(args)) {
  189. args.forEach((item) => {
  190. urlList.push(item.url)
  191. })
  192. } else {
  193. urlList.push(args)
  194. }
  195. createImageViewer({
  196. urlList
  197. })
  198. }
  199. // ====== end ======
  200. defineOptions({ name: 'ProductSpuBasicInfoForm' })
  201. const message = useMessage() // 消息弹窗
  202. const props = defineProps({
  203. propFormData: {
  204. type: Object as PropType<Spu>,
  205. default: () => {}
  206. },
  207. activeName: propTypes.string.def(''),
  208. isDetail: propTypes.bool.def(false) // 是否作为详情组件
  209. })
  210. const attributesAddFormRef = ref() // 添加商品属性表单
  211. const productSpuBasicInfoRef = ref() // 表单 Ref
  212. const propertyList = ref([]) // 商品属性列表
  213. const skuListRef = ref() // 商品属性列表Ref
  214. /** 调用 SkuList generateTableData 方法*/
  215. const generateSkus = (propertyList) => {
  216. skuListRef.value.generateTableData(propertyList)
  217. }
  218. const formData = reactive<Spu>({
  219. name: '', // 商品名称
  220. categoryId: null, // 商品分类
  221. keyword: '', // 关键字
  222. unit: null, // 单位
  223. picUrl: '', // 商品封面图
  224. sliderPicUrls: [], // 商品轮播图
  225. introduction: '', // 商品简介
  226. deliveryTemplateId: null, // 运费模版
  227. brandId: null, // 商品品牌
  228. specType: false, // 商品规格
  229. subCommissionType: false, // 分销类型
  230. skus: []
  231. })
  232. const rules = reactive({
  233. name: [required],
  234. categoryId: [required],
  235. keyword: [required],
  236. unit: [required],
  237. introduction: [required],
  238. picUrl: [required],
  239. sliderPicUrls: [required],
  240. deliveryTemplateId: [required],
  241. brandId: [required],
  242. specType: [required],
  243. subCommissionType: [required]
  244. })
  245. /**
  246. * 将传进来的值赋值给 formData
  247. */
  248. watch(
  249. () => props.propFormData,
  250. (data) => {
  251. if (!data) {
  252. return
  253. }
  254. copyValueToTarget(formData, data)
  255. formData.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
  256. url: item
  257. }))
  258. propertyList.value = getPropertyList(data)
  259. },
  260. {
  261. immediate: true
  262. }
  263. )
  264. /**
  265. * 表单校验
  266. */
  267. const emit = defineEmits(['update:activeName'])
  268. const validate = async () => {
  269. // 校验 sku
  270. if (!skuListRef.value.validateSku()) {
  271. message.warning('商品相关价格不能低于 0.01 元!!')
  272. throw new Error('商品相关价格不能低于 0.01 元!!')
  273. }
  274. // 校验表单
  275. if (!productSpuBasicInfoRef) return
  276. return await unref(productSpuBasicInfoRef).validate((valid) => {
  277. if (!valid) {
  278. message.warning('商品信息未完善!!')
  279. emit('update:activeName', 'basicInfo')
  280. // 目的截断之后的校验
  281. throw new Error('商品信息未完善!!')
  282. } else {
  283. // 校验通过更新数据
  284. Object.assign(props.propFormData, formData)
  285. }
  286. })
  287. }
  288. defineExpose({ validate })
  289. /** 分销类型 */
  290. const changeSubCommissionType = () => {
  291. // 默认为零,类型切换后也要重置为零
  292. for (const item of formData.skus) {
  293. item.subCommissionFirstPrice = 0
  294. item.subCommissionSecondPrice = 0
  295. }
  296. }
  297. /** 选择规格 */
  298. const onChangeSpec = () => {
  299. // 重置商品属性列表
  300. propertyList.value = []
  301. // 重置sku列表
  302. formData.skus = [
  303. {
  304. price: 0,
  305. marketPrice: 0,
  306. costPrice: 0,
  307. barCode: '',
  308. picUrl: '',
  309. stock: 0,
  310. weight: 0,
  311. volume: 0,
  312. subCommissionFirstPrice: 0,
  313. subCommissionSecondPrice: 0
  314. }
  315. ]
  316. }
  317. const categoryList = ref([]) // 分类树
  318. /**
  319. * 选择分类时触发校验
  320. */
  321. const categoryNodeClick = () => {
  322. if (!checkSelectedNode(categoryList.value, formData.categoryId)) {
  323. formData.categoryId = null
  324. message.warning('必须选择二级及以下节点!!')
  325. }
  326. }
  327. /**
  328. * 获取分类的节点的完整结构
  329. *
  330. * @param categoryId 分类id
  331. */
  332. const categoryString = (categoryId) => {
  333. return treeToString(categoryList.value, categoryId)
  334. }
  335. const brandList = ref([]) // 精简商品品牌列表
  336. const deliveryTemplateList = ref([]) // 运费模版
  337. onMounted(async () => {
  338. // 获得分类树
  339. const data = await ProductCategoryApi.getCategoryList({})
  340. categoryList.value = handleTree(data, 'id', 'parentId')
  341. // 获取商品品牌列表
  342. brandList.value = await getSimpleBrandList()
  343. // 获取运费模版
  344. deliveryTemplateList.value = await getSimpleTemplateList()
  345. })
  346. </script>