From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/views/modules/prod/prodInfo.vue | 302 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 302 insertions(+), 0 deletions(-)
diff --git a/src/views/modules/prod/prodInfo.vue b/src/views/modules/prod/prodInfo.vue
new file mode 100644
index 0000000..ea6f123
--- /dev/null
+++ b/src/views/modules/prod/prodInfo.vue
@@ -0,0 +1,302 @@
+<template>
+ <div class="mod-prod-info">
+ <el-form :model="dataForm"
+ ref="dataForm"
+ label-width="100px">
+ <el-form-item label="产品图片">
+ <mul-pic-upload v-model="dataForm.imgs" />
+ </el-form-item>
+ <el-form-item label="状态">
+ <el-radio-group v-model="dataForm.status">
+ <el-radio :label="1">上架</el-radio>
+ <el-radio :label="0">下架</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="产品分类"
+ :rules="[{ required: true, message: '请选择产品分类'}]"
+ prop="categoryId">
+ <el-col :span="8">
+ <el-cascader expand-trigger="hover"
+ :options="category.list"
+ :props="category.props"
+ v-model="category.selected"
+ change-on-select
+ @change="handleCategoryChange">
+ </el-cascader>
+ </el-col>
+ </el-form-item>
+ <el-form-item label="产品分组" :rules="[{ required: true, message: '请选择产品分组'}]">
+ <el-col :span="8">
+ <el-select v-model="dataForm.tagList"
+ multiple
+ style="width: 250px"
+ placeholder="请选择">
+ <el-option v-for="item in this.tags"
+ :key="item.id"
+ :label="item.title"
+ :value="item.id">
+ </el-option>
+ </el-select>
+ </el-col>
+ </el-form-item>
+ <el-form-item label="产品名称"
+ prop="prodName"
+ :rules="[
+ { required: true, message: '产品名称不能为空'},
+ { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品名称', trigger: 'blur' }
+ ]">
+ <el-col :span="8">
+ <el-input v-model="dataForm.prodName"
+ placeholder="产品名称"
+ maxlength="50"></el-input>
+ </el-col>
+ </el-form-item>
+ <el-form-item label="产品卖点"
+ prop="brief":rules="[
+ { required: false, pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品卖点', trigger: 'blur' }
+ ]">
+ <el-col :span="8">
+ <el-input v-model="dataForm.brief"
+ type="textarea"
+ :autosize="{minRows: 2, maxRows: 4}"
+ placeholder="产品卖点"></el-input>
+ </el-col>
+ </el-form-item>
+ <el-form-item label="配送方式">
+ <el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery">商家配送</el-checkbox>
+ <el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp">用户自提</el-checkbox>
+ </el-form-item>
+ <prod-transport v-show="dataForm.deliveryMode.hasShopDelivery"
+ v-model="dataForm.deliveryTemplateId"></prod-transport>
+ <sku-tag ref="skuTag"
+ :skuList="dataForm.skuList"
+ @change="skuTagChangeSkuHandler"></sku-tag>
+ <sku-table ref="skuTable"
+ v-model="dataForm.skuList"
+ :prodName.sync="dataForm.prodName"></sku-table>
+
+ <el-form-item label="产品详情"
+ prop="content">
+ <tiny-mce v-model="dataForm.content"
+ ref="content"
+ style="width:1000px"></tiny-mce>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary"
+ @click="dataFormSubmit()">确定</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+</template>
+
+<script>
+import { treeDataTranslate, idList } from '@/utils'
+import MulPicUpload from '@/components/mul-pic-upload'
+import ProdTransport from './prod-transport'
+import SkuTag from './sku-tag'
+import SkuTable from './sku-table'
+import TinyMce from '@/components/tiny-mce'
+import { Debounce } from '@/utils/debounce'
+
+export default {
+ data () {
+ return {
+ // 分类树展示与回显
+ category: {
+ list: [],
+ selected: [],
+ props: {
+ value: 'categoryId',
+ label: 'categoryName'
+ }
+ },
+ // 规格列表
+ dataForm: {
+ prodName: '',
+ brief: '',
+ pic: '',
+ imgs: '',
+ categoryId: 0,
+ prodId: 0,
+ skuList: [],
+ tagList: [],
+ content: '',
+ status: 1,
+ deliveryMode: {
+ hasShopDelivery: false,
+ hasUserPickUp: false
+ },
+ deliveryTemplateId: null
+ },
+ tags: [],
+ resourcesUrl: process.env.VUE_APP_RESOURCES_URL
+ }
+ },
+ components: {
+ MulPicUpload,
+ ProdTransport,
+ TinyMce,
+ SkuTag,
+ SkuTable
+ },
+ computed: {
+ defalutSku () {
+ return this.$store.state.prod.defalutSku
+ }
+ },
+ activated () {
+ this.dataForm.prodId = this.$route.query.prodId
+ this.getDataList()
+ },
+ methods: {
+ // 获取分类数据
+ getDataList () {
+ this.getTagList()
+ this.getCategoryList().then(() => {
+ if (this.dataForm.prodId) {
+ // 获取产品数据
+ this.$http({
+ url: this.$http.adornUrl(`/prod/prod/info/${this.dataForm.prodId}`),
+ method: 'get',
+ params: this.$http.adornParams()
+ }).then(({ data }) => {
+ this.dataForm = data
+ this.dataForm.deliveryMode = JSON.parse(data.deliveryMode)
+ this.$refs.skuTag.init(data.skuList)
+ this.$refs.skuTable.init()
+ this.category.selected = idList(this.category.list, this.dataForm.categoryId, 'categoryId', 'children').reverse()
+ this.dataForm.tagList = data.tagList
+ })
+ } else {
+ this.$nextTick(() => {
+ this.$refs['dataForm'].resetFields()
+ this.$refs.skuTag.init()
+ this.dataForm.pic = ''
+ this.dataForm.imgs = ''
+ })
+ }
+ })
+ },
+ // 获取分类信息
+ getCategoryList () {
+ return this.$http({
+ url: this.$http.adornUrl('/prod/category/listCategory'),
+ method: 'get',
+ params: this.$http.adornParams()
+ }).then(({ data }) => {
+ this.category.list = treeDataTranslate(data, 'categoryId', 'parentId')
+ })
+ },
+ // 选择分类改变事件
+ handleCategoryChange (val) {
+ this.dataForm.categoryId = val[val.length - 1]
+ },
+ // 表单提交
+ dataFormSubmit: Debounce(function () {
+ this.$refs['dataForm'].validate((valid) => {
+ if (!valid) {
+ return
+ }
+ if (!this.dataForm.imgs) {
+ this.errorMsg('请选择图片上传')
+ return
+ }
+ if (!this.dataForm.deliveryMode) {
+ this.errorMsg('请选择配送方式')
+ return
+ }
+ if (this.dataForm.deliveryMode.hasShopDelivery && !this.dataForm.deliveryTemplateId) {
+ this.errorMsg('请选择运费模板')
+ return
+ }
+ let param = Object.assign({}, this.dataForm)
+ // 设置价格和库存
+ this.paramSetPriceAndStocks(param)
+
+ param.deliveryMode = undefined
+ param.deliveryModeVo = this.dataForm.deliveryMode
+ // 商品主图
+ param.pic = this.dataForm.imgs.split(',')[0]
+ this.$http({
+ url: this.$http.adornUrl(`/prod/prod`),
+ method: param.prodId ? 'put' : 'post',
+ data: this.$http.adornData(param)
+ }).then(({ data }) => {
+ this.$message({
+ message: '操作成功',
+ type: 'success',
+ duration: 1500,
+ onClose: () => {
+ this.visible = false
+ this.$store.commit('common/removeMainActiveTab')
+ this.$router.push({ name: 'prod-prodList' })
+ this.$emit('refreshDataList')
+ }
+ })
+ })
+ })
+ }),
+ paramSetPriceAndStocks (param) {
+ // 获取规格属性信息
+ // param.skuList = this.$refs.prodSpec.getTableSpecData()
+ // 商品库存
+ param.totalStocks = 0
+ // 商品价格
+ param.price = 0
+ // 商品原价
+ param.oriPrice = 0
+ // 商品实际库存
+ for (let i = 0; i < param.skuList.length; i++) {
+ const element = param.skuList[i]
+ if (element.status !== 1) {
+ continue
+ }
+ if (param.price === 0) {
+ param.price = element.price ? Number.parseFloat(element.price) : 0
+ }
+ // 商品价格为最低价的那件商品的价格
+ param.price = Math.min(param.price, element.price)
+ if (param.price === element.price) {
+ param.oriPrice = element.oriPrice ? Number.parseFloat(element.oriPrice) : 0
+ }
+ param.totalStocks += element.stocks ? Number.parseInt(element.stocks) : 0
+ }
+ // 如果sku没有商品名称，则使用商品的商品名称
+ if (param.skuList.length === 1) {
+ param.skuList[0].prodName = this.dataForm.prodName
+ }
+ },
+ skuTagChangeSkuHandler (skuList) {
+ const prodName = this.dataForm.prodName
+ skuList.forEach(sku => {
+ if (sku.properties) {
+ sku.skuName = ''
+ let properties = sku.properties.split(';')
+ for (const propertiesKey in properties) {
+ sku.skuName += properties[propertiesKey].split(':')[1] + ' '
+ }
+ sku.prodName = prodName + ' ' + sku.skuName
+ }
+ })
+ this.dataForm.skuList = skuList
+ },
+ errorMsg (message) {
+ this.$message({
+ message: message,
+ type: 'error',
+ duration: 1500
+ })
+ },
+ // 获取所有的分组信息
+ getTagList () {
+ this.$http({
+ url: this.$http.adornUrl('/prod/prodTag/listTagList'),
+ method: 'get',
+ params: this.$http.adornParams()
+ }).then(({ data }) => {
+ this.tags = data
+ })
+ }
+ }
+}
+</script>
--
Gitblit v1.9.3