商品中心的新增和编辑功能开发对接完成
This commit is contained in:
parent
085070f331
commit
306328631a
@ -5,5 +5,5 @@ VITE_APP_TITLE = 运营云后台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'http://192.168.18.151:8080'
|
||||
VITE_APP_BASE_API = 'http://192.168.18.99:8080'
|
||||
VITE_APP_PLATFORM = 'http://localhost:9000/platform'
|
||||
10
src/api/common.js
Normal file
10
src/api/common.js
Normal file
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
//云南省所有区域信息
|
||||
export function getRegion(code) {
|
||||
let codeVal = code ? code : '530000';
|
||||
return request('/apis/system/area/region?areaCode=' + codeVal, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@ import request from '@/utils/request'
|
||||
|
||||
// 获取商品管理列表
|
||||
export function getGoodManageInfo(query) {
|
||||
console.log(query)
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/getGoodManage',
|
||||
method: 'get',
|
||||
@ -12,7 +11,6 @@ export function getGoodManageInfo(query) {
|
||||
|
||||
// 获取商品分类列表
|
||||
export function getGoodType(query) {
|
||||
console.log(query)
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/goodType',
|
||||
method: 'get',
|
||||
@ -20,44 +18,52 @@ export function getGoodType(query) {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 查询岗位详细
|
||||
export function getPost(postId) {
|
||||
// 新商品发布
|
||||
export function goodAdd(data) {
|
||||
return request({
|
||||
url: '/system/post/' + postId,
|
||||
method: 'get'
|
||||
url: '/goods/goodInfoManage/goodSave',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 新增岗位
|
||||
export function addPost(data) {
|
||||
// 编辑商品发布
|
||||
export function goodEdit(data) {
|
||||
return request({
|
||||
url: '/system/post',
|
||||
url: '/goods/goodInfoManage/goodEdit',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 商品删除
|
||||
export function goodDelete(data) {
|
||||
return request({
|
||||
url: '/goods/business/category/remove',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改岗位
|
||||
export function updatePost(data) {
|
||||
// 商品上下架
|
||||
export function goodUpAndDown(data) {
|
||||
return request({
|
||||
url: '/system/post',
|
||||
method: 'put',
|
||||
url: '/goods/goodInfoManage/goodEdit',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除岗位
|
||||
export function delPost(postId) {
|
||||
// 获取商品信息(id)
|
||||
export function getGoodInfo(id) {
|
||||
return request({
|
||||
url: '/system/post/' + postId,
|
||||
method: 'delete'
|
||||
url: '/goods/goodInfoManage/getGoodInfo/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取商品优惠信息配置项
|
||||
export function getActiveInfos() {
|
||||
return request({
|
||||
url: '/goods/goodInfoManage/getActiveInfos',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@ -266,6 +266,15 @@
|
||||
.attr-input {
|
||||
width: 120px;
|
||||
}
|
||||
.attr-clomn {
|
||||
width: 160px;
|
||||
}
|
||||
.attr-clomn200 {
|
||||
width: 160px;
|
||||
}
|
||||
.attr-clomn220 {
|
||||
width: 220px;
|
||||
}
|
||||
.attr-box {
|
||||
padding: 16px 16px 6px 16px;
|
||||
border-radius: 6px;
|
||||
@ -273,3 +282,10 @@
|
||||
}
|
||||
}
|
||||
// 新增商品页面-结束
|
||||
|
||||
.flex-left-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@ const props = defineProps({
|
||||
// 上传接口地址
|
||||
action: {
|
||||
type: String,
|
||||
default: "/uploadApis/file/upload"
|
||||
default: "/uploadApis/upload"
|
||||
},
|
||||
// 上传携带的参数
|
||||
data: {
|
||||
|
||||
@ -1,37 +1,24 @@
|
||||
<template>
|
||||
<div class="upload-file">
|
||||
|
||||
<div class="upload-tip">建议比例1:1,不超过60s,视频200MB以内</div>
|
||||
<el-upload
|
||||
multiple
|
||||
:action="uploadFileUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="fileList"
|
||||
:data="data"
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleUploadSuccess"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
class="upload-file-uploader"
|
||||
list-type="picture-card"
|
||||
ref="fileUpload"
|
||||
v-if="!disabled"
|
||||
>
|
||||
|
||||
<div class="upload-tip">建议比例1:1,不超过60s,视频{{ fileSize }}MB以内</div>
|
||||
<el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :data="data"
|
||||
:limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess"
|
||||
:show-file-list="false" :headers="headers" class="upload-file-uploader" list-type="picture-card" ref="fileUpload"
|
||||
v-if="!disabled" :class="{ hide: fileList.length >= limit }">
|
||||
<!-- 上传按钮 -->
|
||||
<el-icon size="30px" color="red">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">上传视频</div>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">上传视频</div>
|
||||
</el-upload>
|
||||
<!-- 上传提示 -->
|
||||
<!-- <div class="el-upload__tip" v-if="showTip && !disabled">
|
||||
请上传
|
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||
的文件
|
||||
</div> -->
|
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||
的文件
|
||||
</div> -->
|
||||
<!-- 文件列表 -->
|
||||
<transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
||||
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
|
||||
@ -55,7 +42,7 @@ const props = defineProps({
|
||||
// 上传接口地址
|
||||
action: {
|
||||
type: String,
|
||||
default: "/uploadApis/file/upload"
|
||||
default: "/uploadApis/upload"
|
||||
},
|
||||
// 上传携带的参数
|
||||
data: {
|
||||
@ -64,12 +51,12 @@ const props = defineProps({
|
||||
// 数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5
|
||||
default: 1
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
default: 100
|
||||
},
|
||||
// 文件类型
|
||||
fileType: {
|
||||
@ -122,7 +109,7 @@ watch(() => props.modelValue, val => {
|
||||
fileList.value = []
|
||||
return []
|
||||
}
|
||||
},{ deep: true, immediate: true })
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
// 上传前校检格式和大小
|
||||
function handleBeforeUpload(file) {
|
||||
@ -169,9 +156,9 @@ function handleUploadError(err) {
|
||||
function handleUploadSuccess(res, file) {
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({ name: res.data.name, url: res.data.url })
|
||||
uploadList.value.forEach(item => {
|
||||
item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
|
||||
})
|
||||
uploadList.value.forEach(item => {
|
||||
item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
|
||||
})
|
||||
uploadedSuccessfully()
|
||||
} else {
|
||||
number.value--
|
||||
@ -239,13 +226,20 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
// .el-upload--picture-card 控制加号部分
|
||||
:deep(.hide .el-upload--picture-card) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-upload-darg {
|
||||
opacity: 0.5;
|
||||
background: #c8ebfb;
|
||||
}
|
||||
|
||||
.upload-file-uploader {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.upload-file-list .el-upload-list__item {
|
||||
border: 1px solid #e4e7ed;
|
||||
line-height: 2;
|
||||
@ -253,34 +247,38 @@ onMounted(() => {
|
||||
position: relative;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.upload-file-list .ele-upload-list__item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ele-upload-list__item-content-action .el-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// 上传提示文字
|
||||
.upload-tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-upload__text {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -204,19 +204,10 @@ const computedCurrentPage = computed({
|
||||
set: (val) => emit('update:currentPage', val)
|
||||
});
|
||||
|
||||
// 监听外部传入的pageSize变化
|
||||
// watch(
|
||||
// () => props.pageSize,
|
||||
// (newVal) => {
|
||||
// internalPageSize.value = newVal;
|
||||
// }
|
||||
// );
|
||||
|
||||
// 分页大小改变
|
||||
const pageSizeChange = (val) => {
|
||||
console.log(`每页 ${val} 条`);
|
||||
internalPageSize.value = val;
|
||||
console.log(props.currentPage, internalPageSize.value);
|
||||
// console.log(`每页 ${val} 条`);
|
||||
// console.log(props.currentPage);
|
||||
emit("update:pageSize", val);
|
||||
emit("page-change", {
|
||||
page: props.currentPage,
|
||||
@ -226,10 +217,10 @@ const pageSizeChange = (val) => {
|
||||
|
||||
// 当前页改变
|
||||
const handleCurrentChange = (val) => {
|
||||
console.log(`当前页改变 ${val} 页`);
|
||||
// console.log(`当前页改变 ${val} 页`);
|
||||
emit("page-change", {
|
||||
page: val,
|
||||
pageSize: internalPageSize.value,
|
||||
pageSize: props.pageSize,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -82,10 +82,16 @@ export const constantRoutes = [
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'addGoods/:activeTab?',
|
||||
component: () => import('@/views/goods/addGoods'),
|
||||
path: 'goodsManage/addGoods/:activeTab?',
|
||||
component: () => import('@/views/goods/goodsManage/addGoods'),
|
||||
name: 'addGoods',
|
||||
meta: { title: '新增商品', icon: '' }
|
||||
},
|
||||
{
|
||||
path: 'goodsManage/editGoods/:activeTab?',
|
||||
component: () => import('@/views/goods/goodsManage/editGoods'),
|
||||
name: 'editGoods',
|
||||
meta: { title: '编辑商品', icon: '' }
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -159,7 +165,7 @@ export const constantRoutes = [
|
||||
children: [
|
||||
{
|
||||
path: 'goods/goodsManage',
|
||||
component: () => import('@/views/goods/goodsManage'),
|
||||
component: () => import('@/views/goods/goodsManage/index'),
|
||||
name: 'goodsManage',
|
||||
hidden: false,
|
||||
meta: {
|
||||
@ -171,7 +177,7 @@ export const constantRoutes = [
|
||||
},
|
||||
{
|
||||
path: 'goods/goodsCategory',
|
||||
component: () => import('@/views/goods/goodsCategory'),
|
||||
component: () => import('@/views/goods/goodsCategory/index'),
|
||||
name: 'goodsCategory',
|
||||
hidden: false,
|
||||
meta: {
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
<el-form ref="formRef" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
|
||||
<!-- 商品名称 -->
|
||||
<el-form-item label="商品名称" prop="goodName">
|
||||
<el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" style="width: 800px" />
|
||||
<el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" placeholder="请输入商品名称"
|
||||
style="width: 800px" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 商品分类 -->
|
||||
@ -54,19 +55,19 @@
|
||||
<div v-if="formInline.specStyle == 1">
|
||||
<!-- 销售价格 -->
|
||||
<el-form-item label="销售价格" prop="salePrice" required>
|
||||
<el-input-number v-model="formInline.salePrice" :min="0" :precision="2" :controls="false" />
|
||||
<span class="unit">元</span>
|
||||
<el-input-number v-model="formInline.salePrice" :min="1" :precision="2" :controls="false"></el-input-number>
|
||||
<span style="padding: 0 10px;">元</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 库存数量 -->
|
||||
<el-form-item label="库存数量" prop="stock" required>
|
||||
<el-input-number v-model="formInline.stock" :min="0" :controls="false" />
|
||||
<el-input-number v-model="formInline.stock" :min="1" :controls="false" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 净含量 -->
|
||||
<el-form-item label="净含量" prop="netContent" required>
|
||||
<el-input-number v-model="formInline.netContent" :min="0" :controls="false" />
|
||||
<el-select v-model="formInline.netContentUnit" style="width: 80px; margin-left: 10px">
|
||||
<el-input-number v-model="formInline.netContent" :min="1" :controls="false" />
|
||||
<el-select v-model="formInline.unit" style="width: 80px; margin-left: 10px">
|
||||
<el-option label="kg" value="kg" />
|
||||
<el-option label="g" value="g" />
|
||||
<el-option label="ml" value="ml" />
|
||||
@ -75,9 +76,46 @@
|
||||
</div>
|
||||
<!-- 多规格 -->
|
||||
<div v-else>
|
||||
多规格
|
||||
<el-form-item label="商品规格" prop="netWeight" required>
|
||||
<div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-item">
|
||||
<el-input v-model="item.goodSpecs" :value="item.goodSpecs" class="attr-clomn" placeholder="请输入规格名称" />
|
||||
<el-icon size="20px" v-if="index !== 0" @click="deleteSpecs(index)" style="cursor: pointer;">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-button icon="plus" type="primary" plain style="margin: 0" @click="addSpecs">添加属性</el-button>
|
||||
</el-form-item>
|
||||
<!-- 价格库存 -->
|
||||
<el-form-item label="价格库存" prop="netWeight" required>
|
||||
<div class="attr-box">
|
||||
<div class="attr-row">
|
||||
<div class="attr-clomn color-gray">商品规格</div>
|
||||
<div class="attr-clomn200 color-gray">销售价格</div>
|
||||
<div class="attr-clomn color-gray">库存数量</div>
|
||||
<div class="attr-clomn220 color-gray">净含量</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-row">
|
||||
<div class="attr-clomn">{{ item.goodSpecs }}</div>
|
||||
<div class="attr-clomn200 flex-left-top">
|
||||
<el-input-number v-model="item.goodPrice" :min="1" :precision="2" :controls="false"></el-input-number>
|
||||
<span style="padding: 0 10px;">元</span>
|
||||
</div>
|
||||
<div class="attr-clomn">
|
||||
<el-input-number v-model="item.goodStock" :min="1" :controls="false" />
|
||||
</div>
|
||||
<div class="attr-clomn220 flex-left-top">
|
||||
<el-input-number v-model="item.netContent" :min="1" :controls="false" />
|
||||
<el-select v-model="item.unit" style="width: 80px; margin-left: 10px">
|
||||
<el-option label="kg" value="kg" />
|
||||
<el-option label="g" value="g" />
|
||||
<el-option label="ml" value="ml" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 商品属性 -->
|
||||
<el-form-item label="商品属性" prop="attribute" required>
|
||||
@ -117,9 +155,9 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 保障服务 -->
|
||||
<el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 2px;">
|
||||
<el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 10px;">
|
||||
<el-checkbox v-model="isSafeguardSelected" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.safeguard.options" :key="index">{{ item.text }}
|
||||
<div style="color: #333;" v-for="(item) in formInline.safeguard.options" :key="item.id">服务承诺:{{ item.text }}
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
@ -127,14 +165,16 @@
|
||||
<el-form-item label="优惠折扣" style="margin-bottom: 10px;">
|
||||
<div style="width: 100%;">
|
||||
<el-checkbox v-model="isDiscountSettings" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
|
||||
item.text }}</div>
|
||||
<div style="color: #333;" v-for="(item) in formInline.discountSettings.options" :key="item.id">
|
||||
优惠设置:{{
|
||||
item.text }}</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<div style="width: 100%;">
|
||||
<el-checkbox v-model="isDiscountRebate" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
|
||||
item.text }}</div>
|
||||
<div style="color: #333;" v-for="(item) in formInline.discountSettings.options" :key="item.id">
|
||||
折扣设置:{{
|
||||
item.text }}</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -152,21 +192,23 @@
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-button type="primary" @click="onSave" style="margin: 10px 0 0 80px;width: 150px;">确认新增</el-button>
|
||||
<el-button type="primary" @click="onSubmit" style="margin: 10px 0 0 80px;width: 150px;">确认新增</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
<script setup name="addGoods">
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
import { ref, reactive, nextTick, onMounted } from "vue";
|
||||
import myUploadImage from "@/components/myUploadImage.vue";
|
||||
import myUploadVideo from "@/components/myUploadVideo.vue";
|
||||
import { getGoodType } from "@/api/goods/info";
|
||||
import { getGoodType, goodAdd, getActiveInfos } from "@/api/goods/info";
|
||||
import { getRegion } from "@/api/common";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const formRef = ref(null)
|
||||
const formInline = reactive({
|
||||
goodName: "高质量水稻",
|
||||
categoryId: "", //一级,
|
||||
goodName: "",
|
||||
categoryId: "", //给后端的最后一级,
|
||||
categoryId1: "", //一级,
|
||||
categoryId2: "", //二级
|
||||
categoryId3: "", //三级
|
||||
@ -175,58 +217,53 @@ const formInline = reactive({
|
||||
brandId: "", //品牌
|
||||
traceCode: "", //溯源码
|
||||
|
||||
specStyle: "1",//规格样式
|
||||
salePrice: 0,//销售价格-单规格
|
||||
stock: 6500,//库存数量-单规格
|
||||
netContent: 0,//净含量-单规格
|
||||
netContentUnit: "kg",//净含量单位
|
||||
netWeight: [
|
||||
specStyle: "1",//规格样式 1单规格 2多规格
|
||||
salePrice: 1,//销售价格-单规格
|
||||
stock: 1,//库存数量-单规格
|
||||
netContent: 1,//净含量-单规格
|
||||
unit: "kg",//净含量单位-单规格
|
||||
netWeight: [ //多规格集合
|
||||
{
|
||||
"goodSpecs": "含氮20%",
|
||||
"goodPrice": 135,
|
||||
"goodStock": 10000,
|
||||
"netContent": "50",
|
||||
"unit": "kg"
|
||||
goodSpecs: "",
|
||||
goodPrice: 1,
|
||||
goodStock: 1,
|
||||
netContent: 1,
|
||||
unit: "kg"
|
||||
}
|
||||
], //规格,格式建议数组
|
||||
], //规格
|
||||
attribute: [
|
||||
{
|
||||
name: '品牌', //属性
|
||||
value: '童涵春堂', //内容
|
||||
},
|
||||
{
|
||||
name: '型号', //属性
|
||||
value: '种子种苗', //内容
|
||||
name: '', //属性
|
||||
value: '', //内容
|
||||
},
|
||||
],
|
||||
selectedAddress: [], //选中的省市区编码数组
|
||||
areaAddress: '云南省,昆明市,五华区', //区域地址
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: "", //详细地址
|
||||
sendAddress: "云南省昆明市", //提交的组合地址
|
||||
isCheckbox: true,
|
||||
sendAddress: "",
|
||||
safeguard: {
|
||||
isSelected: 1, //0未选中 1选中
|
||||
options: [
|
||||
{ text: '该商品,支持【七天无理由退货】服务' },
|
||||
// { id: 10, text: '该商品,支持【七天无理由退货】服务' },
|
||||
]
|
||||
}, //保障服务
|
||||
discountSettings: {
|
||||
isSelected: 0, //0未选中 1选中
|
||||
options: [
|
||||
{ text: '支持【满100减10元】优惠活动' },
|
||||
{ text: '支持【满200减20元】优惠活动' },
|
||||
// { id: 11, text: '支持【满100减10元】优惠活动' },
|
||||
// { id: 13, text: '支持【满200减20元】优惠活动' },
|
||||
]
|
||||
}, //优惠设置
|
||||
discountRebate: {
|
||||
isSelected: 0, //0未选中 1选中
|
||||
options: [
|
||||
{ text: '支持【满两件-打8折】优惠活动' },
|
||||
{ text: '支持【单件-打905折】优惠活动' },
|
||||
// { id: 12, text: '支持【满两件-打8折】优惠活动' },
|
||||
// { id: 14, text: '支持【单件-打905折】优惠活动' },
|
||||
]
|
||||
}, //优惠折扣
|
||||
detailUrl: "",
|
||||
brandId: "44552",
|
||||
traceCode: "45788",
|
||||
brandId: "",
|
||||
traceCode: "",
|
||||
videoUrl: "",
|
||||
});
|
||||
const rules = reactive({
|
||||
@ -309,6 +346,25 @@ const rules = reactive({
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netWeight: formInline.specStyle === '2' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 检查是否至少有一个属性
|
||||
if (!value || value.length === 0) {
|
||||
return callback(new Error('至少需要添加一个属性'))
|
||||
}
|
||||
|
||||
// 检查每个属性名称是否已填写
|
||||
const emptyNames = value.filter(item => !item.goodSpecs?.trim())
|
||||
if (emptyNames.length > 0) {
|
||||
return callback(new Error('请填写所有商品规格'))
|
||||
}
|
||||
|
||||
callback()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
] : [],
|
||||
attribute: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
@ -344,7 +400,33 @@ const rules = reactive({
|
||||
detailAddress: [
|
||||
{ required: true, message: '请输入详细地址', trigger: 'blur' }
|
||||
],
|
||||
})
|
||||
safeguard: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
console.log(value);
|
||||
if (value.isSelected !== 1) { // 如果值不是 1(未选中)
|
||||
callback(new Error('必须选择保障服务')); // 报错
|
||||
} else {
|
||||
callback(); // 校验通过
|
||||
}
|
||||
},
|
||||
trigger: 'change', // 触发时机
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const addSpecs = () => {
|
||||
formInline.netWeight.push({
|
||||
goodSpecs: "",
|
||||
goodPrice: 1.00,
|
||||
goodStock: 1,
|
||||
netContent: 1,
|
||||
unit: "kg"
|
||||
})
|
||||
}
|
||||
const deleteSpecs = (index) => {
|
||||
formInline.netWeight.splice(index, 1)
|
||||
}
|
||||
|
||||
const addAttr = () => {
|
||||
formInline.attribute.push({
|
||||
@ -504,36 +586,77 @@ const changeCategory3 = (id) => {
|
||||
formInline.categoryId = id;
|
||||
};
|
||||
|
||||
const onSave = async () => {
|
||||
const onSubmit = async () => {
|
||||
console.log(formInline);
|
||||
// formRef.validate(valid => {
|
||||
// if (!valid) return
|
||||
// console.log('验证通过!', formRef.value)
|
||||
// })
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
console.log('验证通过!', formRef.value)
|
||||
// 整理提交的参数
|
||||
let params = { ...formInline };
|
||||
if (formInline.specStyle == '1') {
|
||||
params.netWeight = [
|
||||
{
|
||||
goodSpecs: "",
|
||||
goodPrice: formInline.salePrice,
|
||||
goodStock: formInline.stock,
|
||||
netContent: formInline.netContent,
|
||||
unit: formInline.unit
|
||||
}
|
||||
];
|
||||
} else {
|
||||
params.netWeight = formInline.netWeight
|
||||
}
|
||||
params.areaAddress = params.selectedAddress.join(',');
|
||||
|
||||
params.safeguardSelected = formInline.safeguard.isSelected; //保障服务
|
||||
params.discountSettingsSelected = formInline.discountSettings.isSelected; //优惠设置
|
||||
params.discountRebateSelected = formInline.discountRebate.isSelected; //优惠折扣
|
||||
|
||||
// 调用接口提交
|
||||
|
||||
onGoodSave(params)
|
||||
} catch (error) {
|
||||
console.log('验证失败', error)
|
||||
}
|
||||
};
|
||||
|
||||
const getGoodTypeList2 = async () => {
|
||||
const res = await getGoodType({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
});
|
||||
const onGoodSave = async (params) => {
|
||||
let response = await goodAdd(params);
|
||||
if (response.code === 200) {
|
||||
ElMessage.success("新增成功!");
|
||||
formRef.value.resetFields();
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
}
|
||||
|
||||
const getArea = async () => {
|
||||
const res = await getRegion();
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
goodTypeList.value = res.data.list;
|
||||
addressOptions.value = res.data.list;
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
const activeInfoList = ref([]);
|
||||
// 获取商品优惠信息配置项
|
||||
const getActiveInfo = async () => {
|
||||
const res = await getActiveInfos();
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
activeInfoList.value = res.data;
|
||||
formInline.safeguard.options = [...activeInfoList.value.safeguard.options];
|
||||
formInline.discountSettings.options = [...activeInfoList.value.discountSettings.options];
|
||||
formInline.discountRebate.options = [...activeInfoList.value.discountRebate.options];
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getActiveInfo();
|
||||
getGoodTypeList();
|
||||
getArea();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
699
src/views/goods/goodsManage/editGoods.vue
Normal file
699
src/views/goods/goodsManage/editGoods.vue
Normal file
@ -0,0 +1,699 @@
|
||||
<template>
|
||||
<div class="app-container customer-control">
|
||||
<div class="customer-box">
|
||||
<el-form ref="formRef" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
|
||||
<!-- 商品名称 -->
|
||||
<el-form-item label="商品名称" prop="goodName">
|
||||
<el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" placeholder="请输入商品名称"
|
||||
style="width: 800px" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 商品分类 -->
|
||||
<el-form-item label="商品分类" required>
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<el-form-item prop="categoryId1">
|
||||
<el-select v-model="formInline.categoryId1" placeholder="请选择" class="my-el-select"
|
||||
@change="changeCategory1($event)">
|
||||
<el-option v-for="item in categoryList1" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="categoryId2">
|
||||
<el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select"
|
||||
@change="changeCategory2($event)">
|
||||
<el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="categoryId3">
|
||||
<el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select"
|
||||
@change="changeCategory3($event)">
|
||||
<el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 公共品牌 -->
|
||||
<el-form-item label="公共品牌" prop="brandId" v-show="formInline.goodCategorySelectType == 1">
|
||||
<el-input v-model="formInline.brandId" clearable placeholder="请输入公共品牌" style="width: 800px" />
|
||||
</el-form-item>
|
||||
<!-- 溯源编码 -->
|
||||
<el-form-item label="溯源编码" prop="traceCode" v-show="formInline.goodCategorySelectType == 1">
|
||||
<el-input v-model="formInline.traceCode" clearable placeholder="请输入溯源编码" style="width: 800px" />
|
||||
</el-form-item>
|
||||
<!-- 商品图片 -->
|
||||
<el-form-item label="商品图片" prop="goodUrl" required>
|
||||
<div>
|
||||
<myUploadImage v-model="formInline.goodUrl"></myUploadImage>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 规格样式 -->
|
||||
<el-form-item label="规格样式" prop="specStyle" required>
|
||||
<el-radio-group v-model="formInline.specStyle" style="margin-top: -3px;">
|
||||
<el-radio value="1" size="large">单规格</el-radio>
|
||||
<el-radio value="2" size="large">多规格</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-if="formInline.specStyle == 1">
|
||||
<!-- 销售价格 -->
|
||||
<el-form-item label="销售价格" prop="salePrice" required>
|
||||
<el-input-number v-model="formInline.salePrice" :min="1" :precision="2" :controls="false"></el-input-number>
|
||||
<span style="padding: 0 10px;">元</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 库存数量 -->
|
||||
<el-form-item label="库存数量" prop="stock" required>
|
||||
<el-input-number v-model="formInline.stock" :min="1" :controls="false" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 净含量 -->
|
||||
<el-form-item label="净含量" prop="netContent" required>
|
||||
<el-input-number v-model="formInline.netContent" :min="1" :controls="false" />
|
||||
<el-select v-model="formInline.unit" style="width: 80px; margin-left: 10px">
|
||||
<el-option label="kg" value="kg" />
|
||||
<el-option label="g" value="g" />
|
||||
<el-option label="ml" value="ml" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 多规格 -->
|
||||
<div v-else>
|
||||
<el-form-item label="商品规格" prop="netWeight" required>
|
||||
<div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-item">
|
||||
<el-input v-model="item.goodSpecs" :value="item.goodSpecs" class="attr-clomn" placeholder="请输入规格名称" />
|
||||
<el-icon size="20px" v-if="index !== 0" @click="deleteSpecs(index)" style="cursor: pointer;">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-button icon="plus" type="primary" plain style="margin: 0" @click="addSpecs">添加属性</el-button>
|
||||
</el-form-item>
|
||||
<!-- 价格库存 -->
|
||||
<el-form-item label="价格库存" prop="netWeight" required>
|
||||
<div class="attr-box">
|
||||
<div class="attr-row">
|
||||
<div class="attr-clomn color-gray">商品规格</div>
|
||||
<div class="attr-clomn200 color-gray">销售价格</div>
|
||||
<div class="attr-clomn color-gray">库存数量</div>
|
||||
<div class="attr-clomn220 color-gray">净含量</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-row">
|
||||
<div class="attr-clomn">{{ item.goodSpecs }}</div>
|
||||
<div class="attr-clomn200 flex-left-top">
|
||||
<el-input-number v-model="item.goodPrice" :min="1" :precision="2" :controls="false"></el-input-number>
|
||||
<span style="padding: 0 10px;">元</span>
|
||||
</div>
|
||||
<div class="attr-clomn">
|
||||
<el-input-number v-model="item.goodStock" :min="1" :controls="false" />
|
||||
</div>
|
||||
<div class="attr-clomn220 flex-left-top">
|
||||
<el-input-number v-model="item.netContent" :min="1" :controls="false" />
|
||||
<el-select v-model="item.unit" style="width: 80px; margin-left: 10px">
|
||||
<el-option label="kg" value="kg" />
|
||||
<el-option label="g" value="g" />
|
||||
<el-option label="ml" value="ml" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 商品属性 -->
|
||||
<el-form-item label="商品属性" prop="attribute" required>
|
||||
<div v-for="(item, index) in formInline.attribute" :key="index" class="attr-item">
|
||||
<el-input v-model="item.name" :value="item.name" class="attr-input" placeholder="请输入属性名称" />
|
||||
<el-icon size="20px" v-if="index !== 0" @click="deleteAttr(index)" style="cursor: pointer;">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-button icon="plus" type="primary" plain style="margin: 0" @click="addAttr">添加属性</el-button>
|
||||
</el-form-item>
|
||||
<!-- 属性内容 -->
|
||||
<el-form-item label="属性内容" prop="attribute" required>
|
||||
<div class="attr-box">
|
||||
<div class="attr-row">
|
||||
<div class="attr-input color-gray">属性名称</div>
|
||||
<div class="attr-input color-gray">属性内容</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
|
||||
<div class="attr-input">{{ item.name }}</div>
|
||||
<el-input v-model="item.value" class="attr-input" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 发货地址 -->
|
||||
<el-form-item label="发货地址" required>
|
||||
<div style="display: flex; gap: 16px;">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<!-- 省市区级联选择器 -->
|
||||
<el-cascader v-model="formInline.selectedAddress" :options="addressOptions" :props="cascaderProps"
|
||||
placeholder="请选择省市区" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<!-- 详细地址输入框 -->
|
||||
<el-input v-model="formInline.detailAddress" placeholder="详细地址(如街道、门牌号等)" style="width: 220px;" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 保障服务 -->
|
||||
<el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 10px;">
|
||||
<el-checkbox v-model="isSafeguardSelected" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.safeguard.options" :key="index">服务承诺:{{
|
||||
item.text }}
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<!-- 优惠折扣 -->
|
||||
<el-form-item label="优惠折扣" style="margin-bottom: 10px;">
|
||||
<div style="width: 100%;">
|
||||
<el-checkbox v-model="isDiscountSettings" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">
|
||||
优惠设置:{{
|
||||
item.text }}</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<div style="width: 100%;">
|
||||
<el-checkbox v-model="isDiscountRebate" size="large" style="margin-top: -3px;">
|
||||
<div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">
|
||||
折扣设置:{{
|
||||
item.text }}</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 商品详情 -->
|
||||
<el-form-item label="商品详情" prop="detailUrl">
|
||||
<div>
|
||||
<myUploadImage v-model="formInline.detailUrl" :isShowSubscript="false"></myUploadImage>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 商品视频 -->
|
||||
<el-form-item label="商品视频" prop="videoUrl">
|
||||
<div>
|
||||
<myUploadVideo v-model="formInline.videoUrl"></myUploadVideo>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-button type="primary" @click="onSubmit" style="margin: 10px 0 0 80px;width: 150px;">确认编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="editGoods">
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
import { ref, reactive, nextTick, onMounted, watch } from "vue";
|
||||
import myUploadImage from "@/components/myUploadImage.vue";
|
||||
import myUploadVideo from "@/components/myUploadVideo.vue";
|
||||
import { getGoodType, goodEdit, getGoodInfo, getActiveInfos } from "@/api/goods/info";
|
||||
import { getRegion } from "@/api/common";
|
||||
import { ElMessage } from "element-plus";
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const formRef = ref(null)
|
||||
const formData = ref({});
|
||||
const formInline = reactive({
|
||||
goodName: "",
|
||||
categoryId: "", //给后端的最后一级,
|
||||
categoryId1: "", //一级,
|
||||
categoryId2: "", //二级
|
||||
categoryId3: "", //三级
|
||||
goodUrl: "", //逗号分割的多个图片地址字符串
|
||||
goodCategorySelectType: 2, // 商品分类一级选项
|
||||
brandId: "", //品牌
|
||||
traceCode: "", //溯源码
|
||||
|
||||
specStyle: "1",//规格样式 1单规格 2多规格
|
||||
salePrice: 1,//销售价格-单规格
|
||||
stock: 1,//库存数量-单规格
|
||||
netContent: 1,//净含量-单规格
|
||||
unit: "kg",//净含量单位-单规格
|
||||
netWeight: [ //多规格集合
|
||||
{
|
||||
goodSpecs: "",
|
||||
goodPrice: 1,
|
||||
goodStock: 1,
|
||||
netContent: 1,
|
||||
unit: "kg"
|
||||
}
|
||||
], //规格
|
||||
attribute: [
|
||||
{
|
||||
name: '', //属性
|
||||
value: '', //内容
|
||||
},
|
||||
],
|
||||
selectedAddress: [], //选中的省市区编码数组
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: "", //详细地址
|
||||
sendAddress: "",
|
||||
safeguard: {
|
||||
isSelected: 1, //0未选中 1选中
|
||||
options: [
|
||||
// { id: 10, text: '该商品,支持【七天无理由退货】服务' },
|
||||
]
|
||||
}, //保障服务
|
||||
discountSettings: {
|
||||
isSelected: 0, //0未选中 1选中
|
||||
options: [
|
||||
// { id: 11, text: '支持【满100减10元】优惠活动' },
|
||||
// { id: 13, text: '支持【满200减20元】优惠活动' },
|
||||
]
|
||||
}, //优惠设置
|
||||
discountRebate: {
|
||||
isSelected: 0, //0未选中 1选中
|
||||
options: [
|
||||
// { id: 12, text: '支持【满两件-打8折】优惠活动' },
|
||||
// { id: 14, text: '支持【单件-打905折】优惠活动' },
|
||||
]
|
||||
}, //优惠折扣
|
||||
detailUrl: "",
|
||||
brandId: "",
|
||||
traceCode: "",
|
||||
videoUrl: "",
|
||||
});
|
||||
const rules = reactive({
|
||||
goodName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入商品名称',
|
||||
trigger: 'blur'
|
||||
},
|
||||
],
|
||||
categoryId1: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
categoryId2: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
categoryId3: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
goodUrl: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === "" || value.trim() === "") {
|
||||
callback(new Error('请至少上传一张商品图片'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
specStyle: [
|
||||
{ required: true, message: '请选择规格样式', trigger: 'change' }
|
||||
],
|
||||
salePrice: formInline.specStyle === '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
callback(new Error('请输入销售价格'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
stock: formInline.specStyle === '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
callback(new Error('请输入库存数量'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netContent: formInline.specStyle === '1' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || Number(value) <= 0) {
|
||||
callback(new Error('请输入净含量'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
] : [],
|
||||
netWeight: formInline.specStyle === '2' ? [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 检查是否至少有一个属性
|
||||
if (!value || value.length === 0) {
|
||||
return callback(new Error('至少需要添加一个属性'))
|
||||
}
|
||||
|
||||
// 检查每个属性名称是否已填写
|
||||
const emptyNames = value.filter(item => !item.goodSpecs?.trim())
|
||||
if (emptyNames.length > 0) {
|
||||
return callback(new Error('请填写所有商品规格'))
|
||||
}
|
||||
|
||||
callback()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
] : [],
|
||||
attribute: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// 检查是否至少有一个属性
|
||||
if (!value || value.length === 0) {
|
||||
return callback(new Error('至少需要添加一个属性'))
|
||||
}
|
||||
|
||||
// 检查每个属性名称是否已填写
|
||||
const emptyNames = value.filter(item => !item.name?.trim())
|
||||
if (emptyNames.length > 0) {
|
||||
return callback(new Error('请填写所有属性名称和内容'))
|
||||
}
|
||||
|
||||
callback()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
selectedAddress: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (!value || value.length !== 3) {
|
||||
callback(new Error('请选择完整的省市区'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
detailAddress: [
|
||||
{ required: true, message: '请输入详细地址', trigger: 'blur' }
|
||||
],
|
||||
})
|
||||
const addSpecs = () => {
|
||||
formInline.netWeight.push({
|
||||
goodSpecs: "",
|
||||
goodPrice: 1.00,
|
||||
goodStock: 1,
|
||||
netContent: 1,
|
||||
unit: "kg"
|
||||
})
|
||||
}
|
||||
const deleteSpecs = (index) => {
|
||||
formInline.netWeight.splice(index, 1)
|
||||
}
|
||||
|
||||
const addAttr = () => {
|
||||
formInline.attribute.push({
|
||||
name: '',
|
||||
value: '',
|
||||
})
|
||||
}
|
||||
const deleteAttr = (index) => {
|
||||
formInline.attribute.splice(index, 1)
|
||||
}
|
||||
|
||||
// 选中的省市区编码数组(如:['云南省', '昆明市', '呈贡区'])
|
||||
const selectedAddress = ref([]);
|
||||
const detailAddress = ref('');
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
value: 'name', // 选项值字段名
|
||||
label: 'name', // 选项标签字段名
|
||||
children: 'children' // 子选项字段名
|
||||
});
|
||||
// 省市区数据(示例)
|
||||
const addressOptions = ref([
|
||||
{
|
||||
name: '云南省',
|
||||
children: [
|
||||
{
|
||||
name: '昆明市',
|
||||
children: [
|
||||
{ name: '五华区' },
|
||||
{ name: '盘龙区' },
|
||||
{ name: '呈贡区' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '曲靖市',
|
||||
children: [
|
||||
{ name: '麒麟区' },
|
||||
{ name: '沾益区' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
children: [
|
||||
{
|
||||
name: '广州市',
|
||||
children: [
|
||||
{ name: '天河区' },
|
||||
{ name: '越秀区' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 其他省份数据...
|
||||
]);
|
||||
|
||||
// 保障服务
|
||||
const isSafeguardSelected = computed({
|
||||
get: () => formInline.safeguard.isSelected === 1,
|
||||
set: (val) => {
|
||||
formInline.safeguard.isSelected = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
// 优惠设置
|
||||
const isDiscountSettings = computed({
|
||||
get: () => formInline.discountSettings.isSelected === 1,
|
||||
set: (val) => {
|
||||
formInline.discountSettings.isSelected = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
// 优惠折扣
|
||||
const isDiscountRebate = computed({
|
||||
get: () => formInline.discountRebate.isSelected === 1,
|
||||
set: (val) => {
|
||||
formInline.discountRebate.isSelected = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
|
||||
// 文件上传前的校验
|
||||
// const beforeUpload = (file) => {
|
||||
// const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
|
||||
// const isLt2M = file.size / 1024 / 1024 < 2
|
||||
|
||||
// if (!isImage) {
|
||||
// ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
|
||||
// return false
|
||||
// }
|
||||
// if (!isLt2M) {
|
||||
// ElMessage.error('图片大小不能超过2MB!')
|
||||
// return false
|
||||
// }
|
||||
// return true
|
||||
// }
|
||||
// 文件变化时触发验证
|
||||
// const handleChange = () => {
|
||||
// console.log('文件变化时触发验证')
|
||||
// nextTick(() => {
|
||||
// console.log(formInline.images)
|
||||
// formRef.value.validateField('images')
|
||||
// })
|
||||
// }
|
||||
// 移除文件时触发验证
|
||||
// const handleRemove = (file) => {
|
||||
// console.log('移除文件时触发验证')
|
||||
// console.log(file)
|
||||
// console.log(formInline.images)
|
||||
// formInline.images = formInline.images.filter(item => item.uid !== file.uid)
|
||||
// formRef.value.validateField('images')
|
||||
// }
|
||||
// 超出限制提示
|
||||
// const handleExceed = () => {
|
||||
// ElMessage.warning('最多只能上传5张图片!')
|
||||
// }
|
||||
|
||||
const categoryList1 = ref([]);
|
||||
const categoryList2 = ref([]);
|
||||
const categoryList3 = ref([]);
|
||||
|
||||
const getGoodTypeList = async () => {
|
||||
try {
|
||||
let response = await getGoodType();
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
categoryList1.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const changeCategory1 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId1 = id;
|
||||
formInline.categoryId2 = "";
|
||||
categoryList2.value = categoryList1.value.filter((item) => item.id == id)[0].children;
|
||||
formInline.categoryId3 = "";
|
||||
formInline.categoryId = "";
|
||||
categoryList3.value = [];
|
||||
if (id == 70) {
|
||||
// 选择产出品70
|
||||
formInline.goodCategorySelectType = 1;
|
||||
} else {
|
||||
// 选择投入品88
|
||||
formInline.goodCategorySelectType = 2;
|
||||
}
|
||||
};
|
||||
const changeCategory2 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId2 = id;
|
||||
categoryList3.value = categoryList2.value.filter((item) => item.id == id)[0].children;
|
||||
formInline.categoryId3 = "";
|
||||
formInline.categoryId = "";
|
||||
};
|
||||
const changeCategory3 = (id) => {
|
||||
console.log(id);
|
||||
formInline.categoryId3 = id;
|
||||
formInline.categoryId = id;
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
console.log(formInline);
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
console.log('验证通过!', formRef.value)
|
||||
// 整理提交的参数
|
||||
let params = { ...formInline };
|
||||
if (formInline.specStyle == '1') {
|
||||
params.netWeight = [
|
||||
{
|
||||
goodSpecs: "",
|
||||
goodPrice: formInline.salePrice,
|
||||
goodStock: formInline.stock,
|
||||
netContent: formInline.netContent,
|
||||
unit: formInline.unit
|
||||
}
|
||||
];
|
||||
} else {
|
||||
params.netWeight = formInline.netWeight
|
||||
}
|
||||
params.areaAddress = params.selectedAddress.join(',');
|
||||
|
||||
params.safeguardSelected = formInline.safeguard.isSelected; //保障服务
|
||||
params.discountSettingsSelected = formInline.discountSettings.isSelected; //优惠设置
|
||||
params.discountRebateSelected = formInline.discountRebate.isSelected; //优惠折扣
|
||||
|
||||
// 调用接口提交
|
||||
onGoodSave(params)
|
||||
} catch (error) {
|
||||
console.log('验证失败', error)
|
||||
}
|
||||
};
|
||||
|
||||
const onGoodSave = async (params) => {
|
||||
let response = await goodEdit(params);
|
||||
if (response.code === 200) {
|
||||
ElMessage.success("编辑成功!");
|
||||
formRef.value.resetFields();
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
}
|
||||
const getArea = async () => {
|
||||
const res = await getRegion();
|
||||
if (res.code === 200) {
|
||||
addressOptions.value = res.data.list;
|
||||
}
|
||||
};
|
||||
const activeInfoList = ref([]);
|
||||
// 获取商品优惠信息配置项
|
||||
const getActiveInfo = async () => {
|
||||
const res = await getActiveInfos();
|
||||
if (res.code === 200) {
|
||||
activeInfoList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
const getGoodsInfo = async (goodId) => {
|
||||
const res = await getGoodInfo(goodId);
|
||||
if (res.code == 200) {
|
||||
Object.assign(formData.value, res.data);
|
||||
Object.assign(formInline, res.data);
|
||||
|
||||
|
||||
if (res.data.netWeight.length > 1) {
|
||||
formInline.specStyle = '2';
|
||||
} else {
|
||||
formInline.specStyle = '1';
|
||||
console.log(res.data.netWeight[0]);
|
||||
formInline.salePrice = formData.value.netWeight[0]?.goodPrice ?? 1;
|
||||
formInline.stock = formData.value.netWeight[0]?.goodStock ?? 1;
|
||||
formInline.netContent = formData.value.netWeight[0]?.netContent ?? 1;
|
||||
formInline.unit = formData.value.netWeight[0]?.unit ?? "kg";
|
||||
}
|
||||
|
||||
formInline.categoryId1 = formData.value?.categoryId1 ?? "88"
|
||||
formInline.categoryId2 = formData.value?.categoryId2 ?? "";
|
||||
formInline.categoryId3 = formData.value?.categoryId3 ?? "";
|
||||
|
||||
formInline.selectedAddress = formData.value?.areaAddress?.split(",") ?? [];
|
||||
|
||||
formInline.goodUrl = formData.value?.goodUrl?.split(",").slice(0, 5).join(',') ?? "";
|
||||
formInline.detailUrl = formData.value?.detailUrl?.split(",").slice(0, 5).join(',') ?? "";
|
||||
formInline.videoUrl = formData.value?.videoUrl?.split(",").slice(0, 1).join(',') ?? "";
|
||||
|
||||
formInline.safeguard = { isSelected: formData.value?.safeguard?.isSelected ?? 1, options:[...activeInfoList.value.safeguard.options] }
|
||||
formInline.discountSettings = { isSelected: formData.value?.discountSettings?.isSelected ?? 0, options:[...activeInfoList.value.discountSettings.options] }
|
||||
formInline.discountRebate = { isSelected: formData.value?.discountRebate?.isSelected ?? 0, options:[...activeInfoList.value.discountRebate.options] }
|
||||
if (formInline.categoryId1) {
|
||||
categoryList2.value = categoryList1.value.filter((item) => item.id == formInline.categoryId1)[0].children;
|
||||
if (formInline.categoryId2) {
|
||||
let item = categoryList2.value.filter(item => item.id === formInline.categoryId2);
|
||||
categoryList3.value = item[0].children;
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(formInline);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => route.query, (newVal) => {
|
||||
console.log("watch商品id:", newVal.goodId);
|
||||
if (newVal.goodId) {
|
||||
getGoodsInfo(newVal.goodId);
|
||||
}
|
||||
})
|
||||
onMounted(async () => {
|
||||
const { edit, goodId } = route.query;
|
||||
console.log("onMounted商品id:", goodId);
|
||||
getActiveInfo();
|
||||
await getGoodTypeList();
|
||||
getArea();
|
||||
if (goodId) {
|
||||
getGoodsInfo(goodId);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -38,7 +38,7 @@
|
||||
<div class="table-toolbar">
|
||||
<el-button icon="delete" @click="batchDelete" :disabled="btnStatus"
|
||||
style="margin-right: 10px">批量删除</el-button>
|
||||
<router-link to="/goods/addGoods">
|
||||
<router-link to="/goods/goodsManage/addGoods">
|
||||
<el-button type="primary" icon="plus" @click="onSubmit">新增商品</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
@ -105,8 +105,11 @@
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||||
import tableComponent from "@/components/tableComponent.vue";
|
||||
import Mock from "mockjs";
|
||||
import { getGoodManageInfo, getGoodType } from "@/api/goods/info";
|
||||
import { ca } from "element-plus/es/locales.mjs";
|
||||
import { getGoodManageInfo, getGoodType, goodDelete } from "@/api/goods/info";
|
||||
import { id } from "element-plus/es/locales.mjs";
|
||||
import { ElMessage } from 'element-plus'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const formInline = reactive({
|
||||
goodName: "",
|
||||
@ -152,7 +155,7 @@ const tabChange = (Event) => {
|
||||
} else if (Event.index == "1") {
|
||||
// 请求已上架
|
||||
formInline.type = "2";
|
||||
} else if (Event.index == "2"){
|
||||
} else if (Event.index == "2") {
|
||||
// 请求已下架
|
||||
formInline.type = "3";
|
||||
}
|
||||
@ -211,6 +214,7 @@ const generateMockData = () => {
|
||||
return Mock.mock({
|
||||
"list|10": [
|
||||
{
|
||||
"id|+1": 10000,
|
||||
"goodId|+1": 10000,
|
||||
"sort|+1": 1,
|
||||
goodUrl: " @image", //商品图片
|
||||
@ -220,7 +224,7 @@ const generateMockData = () => {
|
||||
salesVolume: "@integer(1000, 20000)", //销量
|
||||
pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
|
||||
stock: "@integer(5000, 90000)", //库存
|
||||
isListed: '@pick(["上架", "下架"])', //状态
|
||||
isListed: '@pick([0, 1, 2, 3, 4])', //状态
|
||||
ordersNums: "@integer(10, 200)",
|
||||
},
|
||||
],
|
||||
@ -229,8 +233,11 @@ const generateMockData = () => {
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
// 测试
|
||||
// tableData.value = generateMockData();
|
||||
// tableTotal.value = tableData.value.length;
|
||||
// console.log(tableData.value);
|
||||
|
||||
try {
|
||||
let response = await getGoodManageInfo(formInline);
|
||||
console.log(response);
|
||||
@ -277,6 +284,11 @@ const toDownload = () => {
|
||||
const handleEdit = (row) => {
|
||||
nowClickRow.value = row;
|
||||
console.log("要编辑的行:", row);
|
||||
// 跳转路由并携带参数,行数据,和query的值edit
|
||||
router.push({
|
||||
path: "/goods/goodsManage/editGoods",
|
||||
query: { goodId: row.goodId }
|
||||
})
|
||||
};
|
||||
// 删除操作
|
||||
const handleDelete = (row) => {
|
||||
@ -284,8 +296,16 @@ const handleDelete = (row) => {
|
||||
console.log("要删除的行:", row);
|
||||
};
|
||||
// 批量删除
|
||||
const batchDelete = () => {
|
||||
console.log("要删除的行:", selectedIds.value);
|
||||
const batchDelete = async() => {
|
||||
console.log("要删除的行:", selectedIds.value.join(","));
|
||||
ElMessage.success("删除成功");
|
||||
// let res = await goodDelete({id: selectedIds.value});
|
||||
// if (res.code == 200) {
|
||||
// ElMessage.success("删除成功");
|
||||
// loadData();
|
||||
// } else {
|
||||
// ElMessage.error("删除失败");
|
||||
// }
|
||||
};
|
||||
|
||||
const titleRef = ref(null);
|
||||
Loading…
x
Reference in New Issue
Block a user