Martin
/
yjz_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品添加

day_01
yuanjunzhe 2024-03-23 09:01:19 +08:00
parent fe9f1516f8
commit 289035bd3c
7 changed files with 152 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/CheckAttribute/index.vue
View File

@ -69,7 +69,7 @@ export default {
props: {
value: {
type: Array,
default: () => []
default: []
},
checkedList: {
type: Array,
@ -80,16 +80,16 @@ export default {
value: {
handler(val) {
if (val.toString() !== this.attributeIdList.toString()){
this.attributeIdList = val
this.attributeIdList = val;
this.checkedAttributeList = []
}
},
immediate: true
immediate: true,
},
checkedList: {
handler(val) {
if (val !== undefined && val.length >0){
this.checkedAttributeList = val
handler(val){
if (val !== undefined && val.length > 0){
this.checkedAttributeList = val;
this.attributeIdList = this.checkedAttributeList.map(checked => checked.id);
}
},
@ -104,10 +104,11 @@ export default {
pageNum: 1,
pageSize: 10,
code: null,
name: null
name: null,
},
attributeTotal: 0,
attributeList: []
attributeList: [],
total:0
}
},
created() {

42
src/components/CheckAttributeGroup/index.vue
View File

@ -66,33 +66,13 @@ export default {
props: {
value: {
type: Array,
default: () => []
default: []
},
checkedList: {
type: Array,
default: null
}
},
watch: {
value: {
handler(val) {
if (val.toString() !== this.attributeGroupIdList.toString()){
this.attributeGroupIdList = val
this.checkedAttributeGroupList = []
}
},
immediate: true
},
checkedList: {
handler(val) {
if (val !== null && val.length >0){
this.checkedAttributeGroupList = val
this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
}
},
immediate: true
}
},
data() {
return {
attributeGroupIdList: [],
@ -106,6 +86,26 @@ export default {
attributeGroupList: []
}
},
watch: {
value: {
handler(val) {
if (val.toString() !== this.attributeGroupIdList.toString()){
this.attributeGroupIdList = val;
this.checkedAttributeGroupList = []
}
},
immediate: true,
},
checkedList: {
handler(val){
if (val !== undefined && val.length > 0){
this.checkedAttributeGroupList = val;
this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
}
},
immediate: true
}
},
created() {
this.queryAttributeGroup();
},

54
src/components/CheckBrand/index.vue
View File

@ -12,9 +12,9 @@
<el-col :span="2" v-for="(brand, index) in checkedBrandList">
<el-tag
style="margin: 5px 10px"
:key="brand.nam"
:key="brand.name"
closable @close="removeChecked(index)">
{{ brand.nam }}
{{ brand.name }}
</el-tag>
</el-col>
</el-row>
@ -27,7 +27,7 @@
<el-row>
<el-form :inline="true" :model="brandQuery" class="demo-form-inline">
<el-form-item label="品牌名称">
<el-input v-model="brandQuery.nam" placeholder="品牌名称"></el-input>
<el-input v-model="brandQuery.name" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryBrand">查询</el-button>
@ -42,7 +42,7 @@
:value="brand.id"
:label="brand.id"
@change="checkedBrand(brand)"
border>{{ brand.nam }}
border>{{ brand.name }}
</el-checkbox>
</el-col>
</el-row>
@ -62,37 +62,17 @@
import {listBrand} from "@/api/product/brand";
export default {
name: "CheckBrand",
namee: "CheckBrand",
props: {
value: {
type: Array,
default: () => []
default: []
},
checkedList: {
type: Array,
default: null
}
},
watch: {
vlue: {
handler(val) {
if (val.toString() !== this.brandIdList.toString()){
this.brandIdList = val
this.checkedBrandList = []
}
},
immediate: true
},
checkedList: {
handler(val){
if (val !== null && val.length > 0){
this.checkedBrandList = val
this.brandIdList = this.checkedBrandList.map(checked => checked.id);
}
},
immediate: true
}
},
data() {
return {
brandIdList: [],
@ -100,12 +80,32 @@ export default {
brandQuery: {
pageNum: 1,
pageSize: 10,
name: null
namee: null
},
brandTotal: 0,
brandList: []
}
},
watch: {
value: {
handler(val) {
if (val.toString() !== this.brandIdList.toString()){
this.brandIdList = val;
this.checkedBrandList = []
}
},
immediate: true,
},
checkedList: {
handler(val){
if (val !== undefined && val.length > 0){
this.checkedBrandList = val;
this.brandIdList = this.checkedBrandList.map(checked => checked.id);
}
},
immediate: true
}
},
created() {
this.queryBrand();
},

10
src/main.js
View File

@ -37,6 +37,12 @@ import DictTag from '@/components/DictTag'
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
// 属性选择
import CheckAttribute from "@/components/CheckAttribute/index.vue";
// 属性组选择
import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue";
// 品牌选择
import CheckBrand from "@/components/CheckBrand/index.vue";
// 全局方法挂载
Vue.prototype.getDicts = getDicts
@ -57,6 +63,10 @@ Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('CheckAttribute', CheckAttribute)
Vue.component('CheckAttributeGroup', CheckAttributeGroup)
Vue.component('CheckBrand', CheckBrand)
Vue.use(directive)
Vue.use(plugins)

20
src/views/product/brand/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="品牌名称" prop="nam">
<el-form-item label="品牌名称" prop="name">
<el-input
v-model="queryParams.nam"
v-model="queryParams.name"
placeholder="请输入品牌名称"
clearable
@keyup.enter.native="handleQuery"
@ -74,7 +74,7 @@
<el-table v-loading="loading" :data="brandList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="品牌名称" align="center" prop="nam" />
<el-table-column label="品牌名称" align="center" prop="name" />
<el-table-column label="LOGO" align="center" prop="logo" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.logo" :width="50" :height="50"/>
@ -87,7 +87,7 @@
</el-table-column>
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" class-namee="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
@ -118,8 +118,8 @@
<!-- 添加或修改品牌信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="品牌名称" prop="nam">
<el-input v-model="form.nam" placeholder="请输入品牌名称" />
<el-form-item label="品牌名称" prop="name">
<el-input v-model="form.name" placeholder="请输入品牌名称" />
</el-form-item>
<el-form-item label="LOGO" prop="logo">
<image-upload v-model="form.logo" :limit="1" :is-show-tip="false"/>
@ -152,7 +152,7 @@
import { listBrand, getBrand, delBrand, addBrand, updateBrand } from "@/api/product/brand";
export default {
name: "Brand",
namee: "Brand",
dicts: ['sys_yes_no'],
data() {
return {
@ -178,7 +178,7 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
nam: null,
name: null,
logo: null,
start: null,
introduction: null,
@ -187,7 +187,7 @@ export default {
form: {},
// 表单校验
rules: {
nam: [
name: [
{ required: true, message: "品牌名称不能为空", trigger: "blur" }
],
logo: [
@ -227,7 +227,7 @@ export default {
reset() {
this.form = {
id: null,
nam: null,
name: null,
logo: null,
start: null,
introduction: null,

3
src/views/product/category/index.vue
View File

@ -305,7 +305,8 @@ export default {
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
updateTime: null,
attributeIdList:[]
};
this.resetForm("form");
},

86
src/views/product/info/index.vue
View File

@ -183,11 +183,11 @@
<el-option
v-for="brand in brandList"
:key="brand.id"
:label="brand.nam"
:label="brand.name"
:value="brand.id">
<el-row>
<image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
<div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
<div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.name}}</div>
</el-row>
</el-option>
</el-select>
@ -229,7 +229,7 @@
<span>属性组【{{templateAttributeGroup.groupName}}】</span>
</div>
<div style="height: 200px; width: 100%;">
<el-form ref="form" label-width="80px">
<el-form ref="templateAttributeGroupForm" label-width="80px">
<el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
<el-input v-model="attribute.value"></el-input>
</el-form-item>
@ -370,6 +370,7 @@ import {listBrand} from "@/api/product/brand";
import {getTemplateAttribute, listCategory} from "@/api/product/category";
import {listRule} from "@/api/product/rule";
import {addAttribute} from "@/api/product/attribute";
import attribute from '@/views/product/attribute/index.vue'
export default {
name: "Info",
@ -413,18 +414,34 @@ export default {
form: {},
// 表单校验
rules: {
name:[
{ required: true, message: '请输入商品名称', trigger: 'blur' },
{ min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
name: [
{ required: true, message: "商品名称不能为空", trigger: "blur" }
],
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
status: [
{ required: true, message: "商品状态不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
brandId: [
{ required: true, message: "商品品牌不能为空", trigger: "blur" }
],
image: [
{ required: true, message: "商品图片不能为空", trigger: "blur" }
],
carouselImages: [
{ required: true, message: "商品轮播图不能为空", trigger: "blur" }
],
type: [
{ required: true, message: "商品品类不能为空", trigger: "blur" }
],
ruleId: [
{ required: true, message: "商品规格不能为空", trigger: "blur" }
],
},
stepNumber: 1,
rulesTemplateMap:{
0: ["name", "status", "brandId", "image", "carouselImages"],
1: ["type"],
2: ["ruleId"],
},
stepNumber: 0,
brandList: [],
categoryOptions: [],
categoryOptionValue: [],
@ -621,7 +638,16 @@ export default {
this.stepNumber--
},
next() {
this.stepNumber++
let isValidate = true;
this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
console.log(valid)
if (valid) {
isValidate = false;
}
});
if (isValidate){
this.stepNumber++
}
},
/** 查询商品信息列表 */
getList() {
@ -697,6 +723,40 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
let attrValueList = [];
for (const templateAttributeGroup of this.categoryCommonElement.templateAttributeGroupList) {
templateAttributeGroup.attributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
}
this.categoryCommonElement.templateAttributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
this.attributeCheckedList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === this.form.ruleId);
const {ruleAttrList} = ruleInfo;
let ruleAttrSize = ruleAttrList.length;
let productSkuList = this.skuList.map(skuInfo => {
let sku = "";
for (let index = 0; ; index++) {
sku += skuInfo["prop"+index];
if (index+1 >= ruleAttrSize){
break;
}else {
sku += "-";
}
}
return {
sku: sku,
image: skuInfo.image,
stock: skuInfo.stock,
price: skuInfo.price
}
})
let productAddReq = {
projectAddModel: this.form,
attrValueList: attrValueList,
productSkuList: productSkuList
};
console.log(productAddReq)
if (this.form.id != null) {
updateInfo(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
@ -704,7 +764,7 @@ export default {
this.getList();
});
} else {
addInfo(this.form).then(response => {
addInfo(productAddReq).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();