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

Default Changelist

day_01
yuanjunzhe 2024-03-12 15:01:06 +08:00
parent 05196b0c9d
commit fe9f1516f8
20 changed files with 1843 additions and 590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/product/attribute.js
View File

@ -29,7 +29,7 @@ export function addAttribute(data) {
// 修改商品属性
export function updateAttribute(data) {
return request({
url: '/product/attribute',
url: '/product/attribute/'+data.id,
method: 'put',
data: data
})

2
src/api/product/attributeGroup.js
View File

@ -29,7 +29,7 @@ export function addAttributeGroup(data) {
// 修改属性组
export function updateAttributeGroup(data) {
return request({
url: '/product/attributeGroup',
url: '/product/attributeGroup/'+data.id,
method: 'put',
data: data
})

12
src/api/product/brand.js
View File

@ -1,6 +1,6 @@
import request from '@/utils/request'
// 查询商品品牌列表
// 查询品牌信息列表
export function listBrand(query) {
return request({
url: '/product/brand/list',
@ -9,7 +9,7 @@ export function listBrand(query) {
})
}
// 查询商品品牌详细
// 查询品牌信息详细
export function getBrand(id) {
return request({
url: '/product/brand/' + id,
@ -17,7 +17,7 @@ export function getBrand(id) {
})
}
// 新增商品品牌
// 新增品牌信息
export function addBrand(data) {
return request({
url: '/product/brand',
@ -26,16 +26,16 @@ export function addBrand(data) {
})
}
// 修改商品品牌
// 修改品牌信息
export function updateBrand(data) {
return request({
url: '/product/brand',
url: '/product/brand/'+data.id,
method: 'put',
data: data
})
}
// 删除商品品牌
// 删除品牌信息
export function delBrand(id) {
return request({
url: '/product/brand/' + id,

17
src/api/product/category.js
View File

@ -16,6 +16,21 @@ export function getCategory(id) {
method: 'get'
})
}
// 查询品类共有元素
export function getTemplateAttribute(id) {
return request({
url: '/product/category/getTemplateAttribute/' + id,
method: 'get'
})
}
// 查询品类信息详细
export function parentCommonElement(id) {
return request({
url: '/product/category/parentCommonElement/' + id,
method: 'get'
})
}
// 新增品类信息
export function addCategory(data) {
@ -29,7 +44,7 @@ export function addCategory(data) {
// 修改品类信息
export function updateCategory(data) {
return request({
url: '/product/category',
url: '/product/category/'+data.id,
method: 'put',
data: data
})

44
src/api/product/comment.js 100644
View File

@ -0,0 +1,44 @@
import request from '../../../../cloud-ui123/src/utils/request'
// 查询商品评论列表
export function listComment(query) {
return request({
url: '/product/comment/list',
method: 'get',
params: query
})
}
// 查询商品评论详细
export function getComment(id) {
return request({
url: '/product/comment/' + id,
method: 'get'
})
}
// 新增商品评论
export function addComment(data) {
return request({
url: '/product/comment',
method: 'post',
data: data
})
}
// 修改商品评论
export function updateComment(data) {
return request({
url: '/product/comment/'+data.id,
method: 'put',
data: data
})
}
// 删除商品评论
export function delComment(id) {
return request({
url: '/product/comment/' + id,
method: 'delete'
})
}

20
src/api/product/product.js → src/api/product/info.js
View File

@ -1,44 +1,44 @@
import request from '@/utils/request'
// 查询商品信息列表
export function listProduct(query) {
export function listInfo(query) {
return request({
url: '/product/product/list',
url: '/product/info/list',
method: 'get',
params: query
})
}
// 查询商品信息详细
export function getProduct(id) {
export function getInfo(id) {
return request({
url: '/product/product/' + id,
url: '/product/info/' + id,
method: 'get'
})
}
// 新增商品信息
export function addProduct(data) {
export function addInfo(data) {
return request({
url: '/product/product',
url: '/product/info',
method: 'post',
data: data
})
}
// 修改商品信息
export function updateProduct(data) {
export function updateInfo(data) {
return request({
url: '/product/product',
url: '/product/info/'+data.id,
method: 'put',
data: data
})
}
// 删除商品信息
export function delProduct(id) {
export function delInfo(id) {
return request({
url: '/product/product/' + id,
url: '/product/info/' + id,
method: 'delete'
})
}

44
src/api/product/productComment.js
View File

@ -1,44 +0,0 @@
import request from '@/utils/request'
// 查询商品评论列表
export function listProductComment(query) {
return request({
url: '/product/productComment/list',
method: 'get',
params: query
})
}
// 查询商品评论详细
export function getProductComment(id) {
return request({
url: '/product/productComment/' + id,
method: 'get'
})
}
// 新增商品评论
export function addProductComment(data) {
return request({
url: '/product/productComment',
method: 'post',
data: data
})
}
// 修改商品评论
export function updateProductComment(data) {
return request({
url: '/product/productComment',
method: 'put',
data: data
})
}
// 删除商品评论
export function delProductComment(id) {
return request({
url: '/product/productComment/' + id,
method: 'delete'
})
}

2
src/api/product/rule.js
View File

@ -29,7 +29,7 @@ export function addRule(data) {
// 修改商品规格
export function updateRule(data) {
return request({
url: '/product/rule',
url: '/product/rule/'+data.id,
method: 'put',
data: data
})

156
src/components/CheckAttribute/index.vue 100644
View File

@ -0,0 +1,156 @@
<template>
<el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择属性关联关系</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>已选择属性</span>
</div>
<el-row>
<el-col :span="2" v-for="(attribute, index) in checkedAttributeList">
<el-tag
style="margin: 5px 10px"
:key="attribute.name"
closable @close="removeChecked(index)">
{{ attribute.name }}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-divider></el-divider>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>未选属性</span>
</div>
<el-row>
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryAttribute">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
<el-checkbox
v-model="attributeIdList"
:key="attribute.id"
:value="attribute.id"
:label="attribute.id"
@change="checkedAttribute(attribute)"
border>{{ attribute.name }}
</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="attributeQuery.pageNum"
:limit.sync="attributeQuery.pageSize"
@pagination="queryAttribute"
/>
</el-card>
</el-card>
</el-row>
</template>
<script>
import {listAttribute} from "@/api/product/attribute";
export default {
name: "CheckAttribute",
props: {
value: {
type: Array,
default: () => []
},
checkedList: {
type: Array,
default: null
}
},
watch: {
value: {
handler(val) {
if (val.toString() !== this.attributeIdList.toString()){
this.attributeIdList = val
this.checkedAttributeList = []
}
},
immediate: true
},
checkedList: {
handler(val) {
if (val !== undefined && val.length >0){
this.checkedAttributeList = val
this.attributeIdList = this.checkedAttributeList.map(checked => checked.id);
}
},
immediate: true
}
},
data() {
return {
attributeIdList: [],
checkedAttributeList: [],
attributeQuery: {
pageNum: 1,
pageSize: 10,
code: null,
name: null
},
attributeTotal: 0,
attributeList: []
}
},
created() {
this.queryAttribute();
},
methods: {
/**
* 选中值触发方法
*/
checkedAttribute(attribute) {
let isCheck = this.attributeIdList.indexOf(attribute.id) > -1;
if (isCheck) {
this.checkedAttributeList.push(attribute);
} else {
// 删除
this.checkedAttributeList.splice(
this.checkedAttributeList.indexOf(attribute), 1
)
}
this.$emit("input", this.attributeIdList);
},
/**
* 删除选中值
* @param index
*/
removeChecked(index) {
this.checkedAttributeList.splice(index, 1);
this.attributeIdList.splice(index, 1);
},
/**
* 查询属性
*/
queryAttribute() {
listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows;
this.total = response.data.total;
});
},
}
}
</script>
<style scoped>
</style>

152
src/components/CheckAttributeGroup/index.vue 100644
View File

@ -0,0 +1,152 @@
<template>
<el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择属性组关联关系</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>已选择属性组</span>
</div>
<el-row>
<el-col :span="2" v-for="(attributeGroup, index) in checkedAttributeGroupList">
<el-tag
style="margin: 5px 10px"
:key="attributeGroup.name"
closable @close="removeChecked(index)">
{{ attributeGroup.name }}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-divider></el-divider>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>未选属性组</span>
</div>
<el-row>
<el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
<el-form-item label="属性组名称">
<el-input v-model="attributeGroupQuery.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryAttributeGroup">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="attributeGroup in attributeGroupList">
<el-checkbox
v-model="attributeGroupIdList"
:key="attributeGroup.id"
:value="attributeGroup.id"
:label="attributeGroup.id"
@change="checkedAttributeGroup(attributeGroup)"
border>{{ attributeGroup.name }}
</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="attributeGroupQuery.pageNum"
:limit.sync="attributeGroupQuery.pageSize"
@pagination="queryAttributeGroup"
/>
</el-card>
</el-card>
</el-row>
</template>
<script>
import {listAttributeGroup} from "@/api/product/attributeGroup";
export default {
name: "CheckAttributeGroup",
props: {
value: {
type: Array,
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: [],
checkedAttributeGroupList: [],
attributeGroupQuery: {
pageNum: 1,
pageSize: 10,
name: null
},
attributeGroupTotal: 0,
attributeGroupList: []
}
},
created() {
this.queryAttributeGroup();
},
methods: {
/**
* 选中值触发方法
*/
checkedAttributeGroup(attributeGroup) {
let isCheck = this.attributeGroupIdList.indexOf(attributeGroup.id) > -1;
if (isCheck) {
this.checkedAttributeGroupList.push(attributeGroup);
} else {
// 删除
this.checkedAttributeGroupList.splice(
this.checkedAttributeGroupList.indexOf(attributeGroup), 1
)
}
this.$emit("input", this.attributeGroupIdList);
},
/**
* 删除选中值
* @param index
*/
removeChecked(index) {
this.checkedAttributeGroupList.splice(index, 1);
this.attributeGroupIdList.splice(index, 1);
},
/**
* 查询属性
*/
queryAttributeGroup() {
listAttributeGroup(this.attributeGroupQuery).then(response => {
this.attributeGroupList = response.data.rows;
this.total = response.data.total;
});
},
}
}
</script>
<style scoped>
</style>

152
src/components/CheckBrand/index.vue 100644
View File

@ -0,0 +1,152 @@
<template>
<el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择品牌关联关系</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>已选择品牌</span>
</div>
<el-row>
<el-col :span="2" v-for="(brand, index) in checkedBrandList">
<el-tag
style="margin: 5px 10px"
:key="brand.nam"
closable @close="removeChecked(index)">
{{ brand.nam }}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-divider></el-divider>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>未选品牌</span>
</div>
<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-form-item>
<el-form-item>
<el-button type="primary" @click="queryBrand">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="brand in brandList">
<el-checkbox
v-model="brandIdList"
:key="brand.id"
:value="brand.id"
:label="brand.id"
@change="checkedBrand(brand)"
border>{{ brand.nam }}
</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="brandQuery.pageNum"
:limit.sync="brandQuery.pageSize"
@pagination="queryBrand"
/>
</el-card>
</el-card>
</el-row>
</template>
<script>
import {listBrand} from "@/api/product/brand";
export default {
name: "CheckBrand",
props: {
value: {
type: Array,
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: [],
checkedBrandList: [],
brandQuery: {
pageNum: 1,
pageSize: 10,
name: null
},
brandTotal: 0,
brandList: []
}
},
created() {
this.queryBrand();
},
methods: {
/**
* 选中值触发方法
*/
checkedBrand(brand) {
let isCheck = this.brandIdList.indexOf(brand.id) > -1;
if (isCheck) {
this.checkedBrandList.push(brand);
} else {
// 删除
this.checkedBrandList.splice(
this.checkedBrandList.indexOf(brand), 1
)
}
this.$emit("input", this.brandIdList);
},
/**
* 删除选中值
* @param index
*/
removeChecked(index) {
this.checkedBrandList.splice(index, 1);
this.brandIdList.splice(index, 1);
},
/**
* 查询品牌
*/
queryBrand() {
listBrand(this.brandQuery).then(response => {
this.brandList = response.data.rows;
this.total = response.data.total;
});
},
}
}
</script>
<style scoped>
</style>

1
src/components/ImageUpload/index.vue
View File

@ -151,6 +151,7 @@ export default {
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({name: res.data.url, url: res.data.url});
console.log(res.data.url)
this.uploadedSuccessfully();
} else {
this.number--;

47
src/views/product/attribute/index.vue
View File

@ -9,14 +9,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="分组" prop="gruopId">
<el-input
v-model="queryParams.gruopId"
placeholder="请输入分组"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -71,9 +63,8 @@
<el-table v-loading="loading" :data="attributeList" @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="code" />
<el-table-column label="属性名" align="center" prop="name" />
<el-table-column label="分组" align="center" prop="gruopId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@ -94,7 +85,7 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -104,14 +95,14 @@
/>
<!-- 添加或修改商品属性对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<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="code">
<el-input v-model="form.code" placeholder="请输入属性编码" />
</el-form-item>
<el-form-item label="属性名" prop="name">
<el-input v-model="form.name" placeholder="请输入属性名" />
</el-form-item>
<el-form-item label="分组" prop="gruopId">
<el-input v-model="form.gruopId" placeholder="请输入分组" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
@ -131,6 +122,12 @@ export default {
name: "Attribute",
data() {
return {
queryParam: {
pageNum: 1,
pageSize: 10,
name: null,
states: null
},
// 遮罩层
loading: true,
// 选中数组
@ -153,13 +150,19 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
gruopId: null,
code: null,
name: null
},
// 表单参数
form: {},
// 表单校验
rules: {
code: [
{ required: true, message: "属性编码不能为空", trigger: "blur" }
],
name: [
{ required: true, message: "属性名不能为空", trigger: "blur" }
],
}
};
},
@ -171,8 +174,8 @@ export default {
getList() {
this.loading = true;
listAttribute(this.queryParams).then(response => {
this.attributeList = response.rows;
this.total = response.total;
this.attributeList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
@ -185,13 +188,11 @@ export default {
reset() {
this.form = {
id: null,
code: null,
name: null,
gruopId: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
remark: null
};
this.resetForm("form");
},

219
src/views/product/attributeGroup/index.vue
View File

@ -9,6 +9,16 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="states">
<el-select v-model="queryParams.states" placeholder="请选择状态" clearable>
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -63,9 +73,19 @@
<el-table v-loading="loading" :data="attributeGroupList" @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="name" />
<el-table-column label="转态" align="center" prop="status" />
<el-table-column label="组内属性" align="center" prop="attributeInfoList" >
<template slot-scope="scope">
<el-tag v-for="attributeInfo in scope.row.attributeInfoList">
{{attributeInfo.name}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="states">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.states"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@ -96,14 +116,97 @@
/>
<!-- 添加或修改属性组对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<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="name">
<el-input v-model="form.name" placeholder="请输入组名称" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="组名称" prop="name">
<el-input v-model="form.name" placeholder="请输入组名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态" prop="states">
<el-radio-group v-model="form.states">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-row>
<el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择属性关联关系</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>已选择属性</span>
</div>
<el-row>
<el-col :span="2" v-for="(attribute,index) in checkedAttributeList">
<el-tag
style="margin: 5px 10px"
:key="attribute.name"
closable @close="removeChecked(index)">
{{attribute.name}}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>未选择属性</span>
</div>
<el-row>
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryAttribute">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
<el-checkbox
v-model="form.attributeIdList"
:key="attribute.id"
:value="attribute.id"
:label="attribute.id"
@change="checkedAttribute(attribute)"
border>{{attribute.name}}</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="attributeQuery.pageNum"
:limit.sync="attributeQuery.pageSize"
@pagination="queryAttribute"
/>
</el-card>
</el-card>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -115,9 +218,18 @@
<script>
import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
import { listAttribute } from '@/api/product/attribute'
export default {
name: "AttributeGroup",
dicts: ['sys_yes_no'],
watch:{
'form.attributeIdList':{
handler(val){
console.log(val)
}
}
},
data() {
return {
// 遮罩层
@ -143,31 +255,95 @@ export default {
pageNum: 1,
pageSize: 10,
name: null,
status: null,
states: null
},
// 表单参数
form: {},
// 表单校验
rules: {
}
name: [
{ required: true, message: "组名称不能为空", trigger: "blur" }
],
states: [
{ required: true, message: "状态不能为空", trigger: "change" }
],
},
tags: [
{ name: '标签一' },
{ name: '标签二' }
],
checkedAttributeList: [],
attributeQuery: {
pageNum: 1,
pageSize: 10,
code: null,
name: null
},
attributeTotal: 0,
attributeList: []
};
},
activated() {
this.getList();
},
created() {
this.getList();
},
methods: {
/**
* 选中值触发方法
*/
checkedAttribute(attribute){
let isCheck = this.form.attributeIdList.indexOf(attribute.id) > -1;
if (isCheck){
this.checkedAttributeList.push(attribute)
}else {
//删除
let att = undefined
this.checkedAttributeList.forEach(checked =>{
if (checked.id == attribute.id){
att =attribute
}
})
this.checkedAttributeList.splice(
this.checkedAttributeList.indexOf(att),1
)
}
},
/**
* 删除选中值
* @param index
*/
removeChecked(index){
console.log(this.form.attributeIdList)
this.checkedAttributeList.splice(index,1)
this.form.attributeIdList.splice(index,1)
console.log(this.form.attributeIdList)
},
/**
* 查询属性
*/
queryAttribute(){
listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
/** 查询属性组列表 */
getList() {
this.loading = true;
listAttributeGroup(this.queryParams).then(response => {
this.attributeGroupList = response.rows;
this.total = response.total;
this.attributeGroupList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.getList()
this.reset();
},
// 表单重置
@ -175,13 +351,11 @@ export default {
this.form = {
id: null,
name: null,
status: null,
states: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
attributeIdList: [],
};
this.checkedAttributeList = []
this.resetForm("form");
},
/** 搜索按钮操作 */
@ -205,16 +379,25 @@ export default {
this.reset();
this.open = true;
this.title = "添加属性组";
this.queryAttribute();
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.checkedAttributeList = row.attributeInfoList
const id = row.id || this.ids
getAttributeGroup(id).then(response => {
const att = this.form.attributeIdList
this.form = response.data;
this.open = true;
this.title = "修改属性组";
this.form.attributeIdList = att
row.attributeInfoList.forEach(att =>{
this.form.attributeIdList.push(att.id)
})
this.queryAttribute();
});
this.queryAttribute();
},
/** 提交按钮 */
submitForm() {

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

@ -1,16 +1,16 @@
<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="name">
<el-form-item label="品牌名称" prop="nam">
<el-input
v-model="queryParams.name"
v-model="queryParams.nam"
placeholder="请输入品牌名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-form-item label="是否启用" prop="start">
<el-select v-model="queryParams.start" placeholder="请选择是否启用" clearable>
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
@ -74,18 +74,18 @@
<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="name" />
<el-table-column label="logo" align="center" prop="logo" width="100">
<el-table-column label="品牌名称" align="center" prop="nam" />
<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"/>
</template>
</el-table-column>
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="状态" align="center" prop="status">
<el-table-column label="是否启用" align="center" prop="start">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.start"/>
</template>
</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">
<template slot-scope="scope">
@ -115,20 +115,17 @@
@pagination="getList"
/>
<!-- 添加或修改商品品牌对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<!-- 添加或修改品牌信息对话框 -->
<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="name">
<el-input v-model="form.name" placeholder="请输入品牌名称" />
<el-form-item label="品牌名称" prop="nam">
<el-input v-model="form.nam" placeholder="请输入品牌名称" />
</el-form-item>
<el-form-item label="logo" prop="logo">
<image-upload v-model="form.logo"/>
<el-form-item label="LOGO" prop="logo">
<image-upload v-model="form.logo" :limit="1" :is-show-tip="false"/>
</el-form-item>
<el-form-item label="介绍">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-form-item label="是否启用" prop="start">
<el-radio-group v-model="form.start">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
@ -136,6 +133,9 @@
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="介绍">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
@ -168,7 +168,7 @@ export default {
showSearch: true,
// 总条数
total: 0,
// 商品品牌表格数据
// 品牌信息表格数据
brandList: [],
// 弹出层标题
title: "",
@ -178,15 +178,30 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
nam: null,
logo: null,
start: null,
introduction: null,
status: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
nam: [
{ required: true, message: "品牌名称不能为空", trigger: "blur" }
],
logo: [
{ required: true, message: "LOGO不能为空", trigger: "blur" }
],
start: [
{ required: true, message: "是否启用不能为空", trigger: "change" }
],
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
};
},
@ -194,12 +209,12 @@ export default {
this.getList();
},
methods: {
/** 查询商品品牌列表 */
/** 查询品牌信息列表 */
getList() {
this.loading = true;
listBrand(this.queryParams).then(response => {
this.brandList = response.rows;
this.total = response.total;
this.brandList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
@ -212,10 +227,10 @@ export default {
reset() {
this.form = {
id: null,
name: null,
nam: null,
logo: null,
start: null,
introduction: null,
status: null,
remark: null,
createBy: null,
createTime: null,
@ -244,7 +259,7 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.title = "添加商品品牌";
this.title = "添加品牌信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
@ -253,7 +268,7 @@ export default {
getBrand(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改商品品牌";
this.title = "修改品牌信息";
});
},
/** 提交按钮 */
@ -279,7 +294,7 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除商品品牌编号为"' + ids + '"的数据项？').then(function() {
this.$modal.confirm('是否确认删除品牌信息编号为"' + ids + '"的数据项？').then(function() {
return delBrand(ids);
}).then(() => {
this.getList();

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

@ -1,34 +1,32 @@
<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="name">
<el-form-item label="品类名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入品类信息"
placeholder="请输入品类名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="父级" prop="parentId">
<el-form-item label="父级品类" prop="parentId">
<el-input
v-model="queryParams.parentId"
placeholder="请输入父级"
placeholder="请输入父级品类"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择是否启用" clearable>
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-form-item label="是否启用" prop="start">
<el-input
v-model="queryParams.start"
placeholder="请输入是否启用"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@ -64,16 +62,16 @@
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="品类信息" prop="name" />
<el-table-column label="品类名称" prop="name" />
<el-table-column label="图片" align="center" prop="image" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.image" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="父级" align="center" prop="parentId" />
<el-table-column label="是否启用" align="center" prop="status">
<el-table-column label="父级品类" align="center" prop="parentId" />
<el-table-column label="是否启用" align="center" prop="start">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.start"/>
</template>
</el-table-column>
<el-table-column label="介绍" align="center" prop="introduction" />
@ -106,32 +104,62 @@
</el-table>
<!-- 添加或修改品类信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<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="name">
<el-input v-model="form.name" placeholder="请输入品类信息" />
</el-form-item>
<el-form-item label="图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="父级" prop="parentId">
<treeselect v-model="form.parentId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择父级" />
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="介绍">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="父级品类" prop="parentId">
<treeselect v-model="form.parentId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="品类名称" prop="name">
<el-input v-model="form.name" placeholder="请输入品类名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否启用" prop="start">
<el-radio-group v-model="form.start">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="图片" prop="image">
<image-upload v-model="form.image" :limit="1" :is-show-tip="false"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="介绍">
<editor v-model="form.introduction" :min-height="80"/>
</el-form-item>
</el-col>
</el-row>
<el-tabs value="attribute" type="card" >
<el-tab-pane label="商品属性" name="attribute">
<CheckAttribute v-model="form.attributeIdList" :checked-list="attributeInfoList"/>
</el-tab-pane>
<el-tab-pane label="商品属性组" name="attributeGroup">
<CheckAttributeGroup v-model="form.attributeGroupIdList" :checked-list="attributeGroupList"/>
</el-tab-pane>
<el-tab-pane label="商品品牌" name="brand">
<CheckBrand v-model="form.brandIdList" :checked-list="brandInfoList"/>
</el-tab-pane>
</el-tabs>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -142,7 +170,14 @@
</template>
<script>
import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/product/category";
import {
listCategory,
getCategory,
delCategory,
addCategory,
updateCategory,
parentCommonElement
} from "@/api/product/category";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@ -175,22 +210,51 @@ export default {
name: null,
image: null,
parentId: null,
status: null,
start: null,
introduction: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: "品类名称不能为空", trigger: "blur" }
],
image: [
{ required: true, message: "图片不能为空", trigger: "blur" }
],
parentId: [
{ required: true, message: "父级不能为空", trigger: "blur" }
{ required: true, message: "父级品类不能为空", trigger: "blur" }
],
status: [
{ required: true, message: "是否启用不能为空", trigger: "change" }
start: [
{ required: true, message: "是否启用不能为空", trigger: "blur" }
],
}
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
},
attributeInfoList: [],
attributeGroupList: [],
brandInfoList: [],
};
},
watch: {
'form.parentId': {
handler(val){
if (val !== undefined && val !== 0){
parentCommonElement(val).then(response => {
this.attributeInfoList = response.data.attributeInfoList;
this.attributeGroupList = response.data.attributeGroupList;
this.brandInfoList = response.data.brandInfoList;
})
}
},
immediate: true
}
},
created() {
this.getList();
},
@ -214,7 +278,7 @@ export default {
children: node.children
};
},
/** 查询品类信息下拉树结构 */
/** 查询品类信息下拉树结构 */
getTreeselect() {
listCategory().then(response => {
this.categoryOptions = [];
@ -235,7 +299,7 @@ export default {
name: null,
image: null,
parentId: null,
status: null,
start: null,
introduction: null,
remark: null,
createBy: null,
@ -279,7 +343,7 @@ export default {
this.reset();
this.getTreeselect();
if (row != null) {
this.form.parentId = row.id;
this.form.parentId = row.parentId;
}
getCategory(row.id).then(response => {
this.form = response.data;

75
src/views/product/productComment/index.vue → src/views/product/comment/index.vue
View File

@ -1,18 +1,18 @@
<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="商品id" prop="productId">
<el-form-item label="商品id" prop="projectId">
<el-input
v-model="queryParams.productId"
v-model="queryParams.projectId"
placeholder="请输入商品id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="父级id" prop="parentId">
<el-form-item label="父类id" prop="parentId">
<el-input
v-model="queryParams.parentId"
placeholder="请输入父级id"
placeholder="请输入父类id"
clearable
@keyup.enter.native="handleQuery"
/>
@ -31,7 +31,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['product:productComment:add']"
v-hasPermi="['product:comment:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -42,7 +42,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:productComment:edit']"
v-hasPermi="['product:comment:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -53,7 +53,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['product:productComment:remove']"
v-hasPermi="['product:comment:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -63,23 +63,23 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['product:productComment:export']"
v-hasPermi="['product:comment:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productCommentList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="commentList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="商品id" align="center" prop="productId" />
<el-table-column label="商品id" align="center" prop="projectId" />
<el-table-column label="评论" align="center" prop="comment" />
<el-table-column label="图片" align="center" prop="images" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.images" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="父级id" align="center" prop="parentId" />
<el-table-column label="父类id" align="center" prop="parentId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@ -88,19 +88,19 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:productComment:edit']"
v-hasPermi="['product:comment:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:productComment:remove']"
v-hasPermi="['product:comment:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -110,10 +110,10 @@
/>
<!-- 添加或修改商品评论对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<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="商品id" prop="productId">
<el-input v-model="form.productId" placeholder="请输入商品id" />
<el-form-item label="商品id" prop="projectId">
<el-input v-model="form.projectId" placeholder="请输入商品id" />
</el-form-item>
<el-form-item label="评论">
<editor v-model="form.comment" :min-height="192"/>
@ -121,8 +121,8 @@
<el-form-item label="图片" prop="images">
<image-upload v-model="form.images"/>
</el-form-item>
<el-form-item label="父级id" prop="parentId">
<el-input v-model="form.parentId" placeholder="请输入父级id" />
<el-form-item label="父类id" prop="parentId">
<el-input v-model="form.parentId" placeholder="请输入父类id" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
@ -137,10 +137,10 @@
</template>
<script>
import { listProductComment, getProductComment, delProductComment, addProductComment, updateProductComment } from "@/api/product/productComment";
import { listComment, getComment, delComment, addComment, updateComment } from "../../../../../cloud-ui/src/api/product/comment";
export default {
name: "ProductComment",
name: "Comment",
data() {
return {
// 遮罩层
@ -156,7 +156,7 @@ export default {
// 总条数
total: 0,
// 商品评论表格数据
productCommentList: [],
commentList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
@ -165,7 +165,7 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
productId: null,
projectId: null,
comment: null,
images: null,
parentId: null,
@ -174,6 +174,15 @@ export default {
form: {},
// 表单校验
rules: {
projectId: [
{ required: true, message: "商品id不能为空", trigger: "blur" }
],
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
};
},
@ -184,9 +193,9 @@ export default {
/** 查询商品评论列表 */
getList() {
this.loading = true;
listProductComment(this.queryParams).then(response => {
this.productCommentList = response.rows;
this.total = response.total;
listComment(this.queryParams).then(response => {
this.commentList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
@ -199,7 +208,7 @@ export default {
reset() {
this.form = {
id: null,
productId: null,
projectId: null,
comment: null,
images: null,
parentId: null,
@ -237,7 +246,7 @@ export default {
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getProductComment(id).then(response => {
getComment(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改商品评论";
@ -248,13 +257,13 @@ export default {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateProductComment(this.form).then(response => {
updateComment(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addProductComment(this.form).then(response => {
addComment(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -267,7 +276,7 @@ export default {
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除商品评论编号为"' + ids + '"的数据项？').then(function() {
return delProductComment(ids);
return delComment(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
@ -275,9 +284,9 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download('product/productComment/export', {
this.download('product/comment/export', {
...this.queryParams
}, `productComment_${new Date().getTime()}.xlsx`)
}, `comment_${new Date().getTime()}.xlsx`)
}
}
};

742
src/views/product/info/index.vue 100644
View File

@ -0,0 +1,742 @@
<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="name">
<el-input
v-model="queryParams.name"
placeholder="请输入商品名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="商品状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择商品状态" clearable>
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="规格" prop="ruleId">
<el-input
v-model="queryParams.ruleId"
placeholder="请输入规格"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input
v-model="queryParams.brandId"
placeholder="请输入品牌"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['product:info:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:info:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['product:info:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['product:info:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="infoList" @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="name" />
<el-table-column label="商品描述" align="center" prop="introduction" />
<el-table-column label="主类型" align="center" prop="mianType" />
<el-table-column label="父类型" align="center" prop="parentType" />
<el-table-column label="商品类型" align="center" prop="type" />
<el-table-column label="商品图片" align="center" prop="image" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.image" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="商品轮播图" align="center" prop="carouselImages" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="商品状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="规格" align="center" prop="ruleId" />
<el-table-column label="品牌" align="center" prop="brandId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:info:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:info:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改商品信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-steps :active="stepNumber" finish-status="success">
<el-step title="基本信息"></el-step>
<el-step title="品类属性"></el-step>
<el-step title="商品规格"></el-step>
<el-step title="商品描述"></el-step>
</el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<div v-show="stepNumber === 0">
<el-row>
<el-col :span="12">
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="商品状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="品牌" prop="brandId">
<el-select
v-model="form.brandId"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteSearchBrandList"
:loading="loading">
<el-option
v-for="brand in brandList"
:key="brand.id"
:label="brand.nam"
: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>
</el-row>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="商品图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="商品轮播图" prop="carouselImages">
<image-upload v-model="form.carouselImages"/>
</el-form-item>
</el-row>
</div>
<div v-show="stepNumber === 1">
<el-form-item label="品类" prop="ruleId">
<el-cascader
style="width: 100%"
v-model="categoryOptionValue"
clearable
:props="{'value': 'id', 'label': 'name'}"
:options="categoryOptions"></el-cascader>
</el-form-item>
<el-empty v-show="categoryOptionValue.length === 0" description="请选择品类，在进行操作"></el-empty>
<el-tabs v-show="categoryOptionValue.length > 0" v-model="activeName" type="border-card">
<el-tab-pane label="商品属性组" name="attributeGroup">
<el-row style="overflow-x: auto; height: 300px;">
<el-col :span="6" v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>属性组【{{templateAttributeGroup.groupName}}】</span>
</div>
<div style="height: 200px; width: 100%;">
<el-form ref="form" 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>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="商品属性" name="attribute">
<el-row style="overflow-x: auto; height: 300px;">
<el-form ref="form" :model="form" label-width="80px">
<el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
<el-form-item :label="templateAttribute.name" >
<el-input v-model="templateAttribute.value"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</el-tab-pane>
<el-tab-pane label="自有属性" name="third">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>添加商品属性</span>
</div>
<el-row>
<el-button v-show="!customAttributeFormStatus" @click="customAttributeFormStatus = true">添加自有属性</el-button>
<el-form v-show="customAttributeFormStatus" :inline="true" :model="customAttributeForm" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item label="属性值">
<el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveCustomAttribute">确定</el-button>
</el-form-item>
</el-form>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择属性</span>
</div>
<el-row style="height: 80px; overflow-y: auto">
<el-checkbox-group v-model="attributeIdCheckedList" @change="attributeCheckedFun">
<el-col :span="4" v-for="attribute in categoryCommonElement.attributeList" style="margin: 5px 0">
<el-checkbox :label="attribute.id" :value="attribute.id" :key="attribute.id" border>{{attribute.name}}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-row>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>属性值填写</span>
</div>
<el-row style="overflow-x: auto; height: 300px;">
<el-form ref="form" :model="form" label-width="80px">
<el-col :span="6" v-for="attribute in attributeCheckedList">
<el-form-item :label="attribute.name">
<el-input v-model="attribute.value"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
<div v-show="stepNumber === 2">
<el-form-item label="规格" prop="ruleId">
<el-select v-model="form.ruleId" placeholder="请选择" @change="changeRule" style="width: 100%;">
<el-option
v-for="rule in ruleList"
:key="rule.id"
:label="rule.name"
:value="rule.id">
<span>{{rule.name}} - {{rule.ruleAttrList.map(ruleAttr => ruleAttr.name).toString()}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form :inline="true" :model="oneSettingForm" class="demo-form-inline">
<el-form-item label="图片">
<image-upload
:limit="1"
:is-show-tip="false"
v-model="oneSettingForm.image" placeholder="审批人"></image-upload>
</el-form-item>
<el-form-item label="价格">
<el-input v-model="oneSettingForm.price" placeholder="价格"></el-input>
</el-form-item>
<el-form-item label="库存">
<el-input v-model="oneSettingForm.stock" placeholder="库存"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="oneSetting">一键设置</el-button>
</el-form-item>
</el-form>
<el-table
:data="skuList"
border
style="width: 100%">
<el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
<template slot-scope="scope">
<span v-if="title.prop.indexOf('prop') > -1">{{scope.row[title.prop]}}</span>
<el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]" :precision="2" :step="0.01"></el-input-number>
<image-upload v-else-if="['image'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]"
:limit="1"
:is-show-tip="false"
></image-upload>
</template>
</el-table-column>
</el-table>
</div>
<div v-show="stepNumber === 3">
<el-form-item label="商品描述">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button style="margin-top: 12px;" @click="last" v-if="stepNumber > 0">上一步</el-button>
<el-button style="margin-top: 12px;" @click="next" v-if="stepNumber < 3">下一步</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
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";
export default {
name: "Info",
dicts: ['sys_yes_no'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 商品信息表格数据
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
introduction: null,
mianType: null,
parentType: null,
type: null,
image: null,
carouselImages: null,
status: null,
ruleId: null,
brandId: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
name:[
{ required: true, message: '请输入商品名称', trigger: 'blur' },
{ min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
],
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
},
stepNumber: 1,
brandList: [],
categoryOptions: [],
categoryOptionValue: [],
ruleList: [],
activeName: "attributeGroup",
customAttributeForm: {
},
customAttributeFormStatus: false,
attributeIdCheckedList: [],
attributeCheckedList: [],
categoryCommonElement: {
templateAttributeGroupList: [],
templateAttributeList: [],
attributeList: []
},
templateTitleList:[
{
"label":"规格图片",
"prop":"image"
},
{
"label":"商品库存",
"prop":"stock"
},
{
"label":"商品价格",
"prop":"price"
}
],
titleList:[],
skuList:[],
oneSettingForm:{
"image":null,
"stock":null,
"price":null,
}
};
},
watch: {
categoryOptionValue: {
handler(value){
if (value !== null && value !== undefined && value.length > 0){
this.form.mianType = value[0];
this.form.parentType = value[1];
this.form.type = value[2];
}else {
this.form.mianType = null;
this.form.parentType = null;
this.form.type = null;
}
}
},
"form.type": {
handler(value) {
console.log(value)
if (value != null){
getTemplateAttribute(value).then(response => {
const {data} = response;
const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
this.categoryCommonElement.templateAttributeList = templateAttributeList;
this.categoryCommonElement.attributeList = attributeList;
})
}
}
}
},
created() {
this.getList();
},
methods: {
oneSetting(){
this.skuList.forEach(skuInfo =>{
skuInfo.image = this.oneSettingForm.image
skuInfo.stock = this.oneSettingForm.stock
skuInfo.price = this.oneSettingForm.price
})
},
changeRule(ruleId){
this.titleList = []
let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
const {ruleAttrList} = ruleInfo;
let skuTotal = 1;
for (let ruleAttrListKey in ruleAttrList) {
let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
this.titleList.push({
"label":ruleAttrInfo.name,
"prop":"prop"+ruleAttrListKey
})
skuTotal = skuTotal * ruleAttrInfo.valueList.length;
}
this.titleList.push(...this.templateTitleList) ;
console.log(this.titleList);
this.skuList = [];
for (let i = 0; i < skuTotal; i++) {
this.skuList.push(
{
"image": null,
"price": 85.62,
"stock": 236
}
);
}
// currentIndex 当前下标
for (let currentIndex in ruleAttrList) {
let ruleAttrInfo = ruleAttrList[currentIndex];
// 连续出现次数 循环出现次数
let continuousSize = 1, forSize = 1;
for (let continuousIndex = parseInt(currentIndex) + 1 ; continuousIndex < ruleAttrList.length ; continuousIndex++ ){
continuousSize = continuousSize * ruleAttrList[continuousIndex].valueList.length;
}
for (let forIndex = parseInt(currentIndex) - 1; forIndex >= 0; forIndex--){
forSize = forSize * ruleAttrList[forIndex].valueList.length
}
console.log(`${ruleAttrInfo.name} 规格 连续出现次数：${continuousSize} 循环出现次数：${forSize}`)
let counter = 0;
for (let forIndex = 0; forIndex < forSize; forIndex++) {
const {valueList} = ruleAttrInfo;
valueList.forEach(value => {
for (let continuousIndex = 0; continuousIndex < continuousSize; continuousIndex++) {
this.skuList[counter++]["prop"+currentIndex] = value;
}
})
}
}
},
saveCustomAttribute(){
addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
if (response.code === 200){
// 添加逻辑
let attributeId = response.data,
code = this.customAttributeForm.code,
name = this.customAttributeForm.name,
value = this.customAttributeForm.value;
this.categoryCommonElement.attributeList.push({
"id":attributeId,
"name":name,
"code":code
});
this.attributeIdCheckedList.push(attributeId);
this.attributeCheckedList.push({
"id":attributeId,
"name":name,
"value":value
});
this.customAttributeForm = {}
this.customAttributeFormStatus =false;
}
})
},
attributeCheckedFun() {
// attributeIdCheckedList -> attributeCheckedList 不在
// 1 -> ID 1 : attributeCheckedList[] -> 1
// 2 -> ID 3 : attributeCheckedList[1] -> 3
let attributeId =this.attributeIdCheckedList
.find(attributeId =>
this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1
)
if (attributeId !== undefined){
let attributeInfo = this.categoryCommonElement.attributeList.find(attributeInfo => attributeInfo.id === attributeId);
this.attributeCheckedList.push(attributeInfo);
}else {
// attributeIdCheckedList [3] : attributeCheckedList [] -> [3]
// attributeIdCheckedList [3,5] : attributeCheckedList [3] -> [3,5]
// attributeIdCheckedList [3,5,9] : attributeCheckedList [3,5] -> [3,5,9]
// attributeIdCheckedList [3,9] : attributeCheckedList [3,5,9] -> [3,9]
// attributeCheckedList 集合 不在 attributeIdCheckedList 集合的元素，然后删除
let attributeChecked = this.attributeCheckedList.find(attributeChecked => this.attributeIdCheckedList.indexOf(attributeChecked.id) === -1);
this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked), 1);
}
},
initRuleList(){
listRule({"params[isPage]": false}).then(response => {
this.ruleList = response.data;
});
},
initCategoryTree(){
listCategory().then(response => {
this.categoryOptions = [];
this.categoryOptions = this.handleTree(response.data, "id", "parentId");
console.log(this.categoryOptions)
});
},
remoteSearchBrandList(queryValue){
listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
this.brandList = response.data;
});
},
last() {
this.stepNumber--
},
next() {
this.stepNumber++
},
/** 查询商品信息列表 */
getList() {
this.loading = true;
listInfo(this.queryParams).then(response => {
this.infoList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
introduction: null,
mianType: null,
parentType: null,
type: null,
image: null,
carouselImages: null,
status: null,
ruleId: null,
brandId: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
this.initCategoryTree();
this.initRuleList();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加商品信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getInfo(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改商品信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateInfo(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInfo(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
return delInfo(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('product/info/export', {
...this.queryParams
}, `info_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style>
.el-select-dropdown__item{
height: 45px;
}
.box-card {
margin: 10px;
}
</style>

338
src/views/product/product/index.vue
View File

@ -1,338 +0,0 @@
<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="name">
<el-input
v-model="queryParams.name"
placeholder="请输入商品名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="规格" prop="ruleId">
<el-input
v-model="queryParams.ruleId"
placeholder="请输入规格"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input
v-model="queryParams.brandId"
placeholder="请输入品牌"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['product:product:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:product:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['product:product:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['product:product:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="productList" @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="name" />
<el-table-column label="描述" align="center" prop="describe" />
<el-table-column label="类型" align="center" prop="type" />
<el-table-column label="图片" align="center" prop="image" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.image" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="轮播图片" align="center" prop="carouselImages" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="规格" align="center" prop="ruleId" />
<el-table-column label="品牌" align="center" prop="brandId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:product:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:product:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改商品信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="描述">
<editor v-model="form.describe" :min-height="192"/>
</el-form-item>
<el-form-item label="图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="轮播图片" prop="carouselImages">
<image-upload v-model="form.carouselImages"/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="规格" prop="ruleId">
<el-input v-model="form.ruleId" placeholder="请输入规格" />
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input v-model="form.brandId" placeholder="请输入品牌" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/product/product";
export default {
name: "Product",
dicts: ['sys_yes_no'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 商品信息表格数据
productList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
describe: null,
type: null,
image: null,
carouselImages: null,
status: null,
ruleId: null,
brandId: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询商品信息列表 */
getList() {
this.loading = true;
listProduct(this.queryParams).then(response => {
this.productList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
describe: null,
type: null,
image: null,
carouselImages: null,
status: null,
ruleId: null,
brandId: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加商品信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getProduct(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改商品信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateProduct(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addProduct(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
return delProduct(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('product/product/export', {
...this.queryParams
}, `product_${new Date().getTime()}.xlsx`)
}
}
};
</script>

163
src/views/product/rule/index.vue
View File

@ -9,16 +9,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -75,11 +65,19 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="规格名称" align="center" prop="name" />
<el-table-column label="状态" align="center" prop="status">
<el-table-column label="规格属性名" align="center" prop="name" >
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
<el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.name}}</span></el-row>
</template>
</el-table-column>
<el-table-column label="规格属性值" align="center" prop="name" >
<template slot-scope="scope">
<el-row v-for="ruleAttr in scope.row.ruleAttrList"><span>{{ruleAttr.valueList.toString()}}</span></el-row>
</template>
</el-table-column>
<el-table-column label="规格状态" align="center" prop="status" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@ -100,7 +98,7 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -110,23 +108,53 @@
/>
<!-- 添加或修改商品规格对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<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="name">
<el-input v-model="form.name" placeholder="请输入规格名称" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-row v-for="(ruleAttr, index) in form.ruleAttrList">
<el-row style="margin: 20px 0">
<el-tag
:key="ruleAttr.name"
@close="removeRule(index)"
closable>
{{ruleAttr.name}}
</el-tag>
</el-row>
<el-row style="margin: 10px 0">
<el-tag
style="float: left; margin-right: 20px"
v-for="(ruleProperty, index) in ruleAttr.valueList"
:key="ruleProperty"
@close="removeRuleProperty(ruleAttr.valueList, index)"
closable>
{{ruleProperty}}
</el-tag>
<el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus" size="mini">添加</el-button>
<el-input v-if="ruleAttr.ruleAttrAddStatus"
v-model="addRulePropertyValue"
@blur="addRuleProperty(ruleAttr, false)"
@keyup.enter.native="addRuleProperty(ruleAttr, true)"
size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/>
</el-row>
<el-divider></el-divider>
</el-row>
<el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus = !ruleAddFormStatus">添加规格</el-button>
<el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">
<el-form-item label="规格名称">
<el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
</el-form-item>
<el-form-item label="规格属性">
<el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="ruleAddFormFun">添加</el-button>
</el-form-item>
</el-form>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -141,7 +169,6 @@ import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/r
export default {
name: "Rule",
dicts: ['sys_yes_no'],
data() {
return {
// 遮罩层
@ -173,19 +200,96 @@ export default {
form: {},
// 表单校验
rules: {
}
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
},
ruleAddForm: {
name: null,
valueList: null,
},
ruleAddFormStatus: false,
addRulePropertyValue: null
};
},
created() {
this.getList();
},
methods: {
removeRule(index){
this.form.ruleAttrList.splice(index, 1);
},
removeRuleProperty(valueList,index){
valueList.splice(index, 1);
},
addRuleProperty(ruleAttr, continuousInput){
if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
if (!continuousInput){
ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
}
return;
}
if (ruleAttr.valueList.indexOf(this.addRulePropertyValue) > -1){
this.$message({
message: `规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`,
type: 'warning'
});
return;
}
ruleAttr.valueList.push(this.addRulePropertyValue)
this.addRulePropertyValue = null;
if (!continuousInput){
ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
}
},
ruleAddFormFun(){
if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
this.$message({
message: '规格名称不可为空',
type: 'warning'
});
return;
}
if (this.ruleAddForm.valueList === null || this.ruleAddForm.valueList.length === 0){
this.$message({
message: '规格属性不可为空',
type: 'warning'
});
return;
}
let ruleAttr = this.form.ruleAttrList.find(ruleAttr => ruleAttr.name === this.ruleAddForm.name);
if (ruleAttr === undefined){
this.form.ruleAttrList.push({
"name": this.ruleAddForm.name,
"valueList": [this.ruleAddForm.valueList],
"ruleAttrAddStatus": false
})
}else {
if (ruleAttr.valueList.indexOf(this.ruleAddForm.valueList) > -1){
this.$message({
message: `规格[${this.ruleAddForm.name}]属性值[${this.ruleAddForm.valueList}]已经存在`,
type: 'warning'
});
return;
}
ruleAttr.valueList.push(this.ruleAddForm.valueList)
}
this.ruleAddForm = {
name: null,
valueList: null,
}
this.ruleAddFormStatus = false;
},
/** 查询商品规格列表 */
getList() {
this.loading = true;
listRule(this.queryParams).then(response => {
this.ruleList = response.rows;
this.total = response.total;
this.ruleList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
@ -201,10 +305,7 @@ export default {
name: null,
status: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
ruleAttrList:[]
};
this.resetForm("form");
},