jiangpeng
/
ruoyi-server
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: jiangpeng:d4ec839f3c86d2f90b8784a12ef884a08582a2cb
Branches Tags
jiangpeng:master
...
compare: jiangpeng:618f399982bcfb640f9712009db4906ce113b718
Branches Tags
jiangpeng:master

10 Commits
d4ec839f3c ... 618f399982

Author SHA1 Message Date
Jiang Peng 618f399982 初始化购物车 2024-03-29 17:24:07 +08:00
Jiang Peng bac059eaf4 商品详情页面 2024-03-26 20:34:12 +08:00
Jiang Peng ac293f64d2 修改品类信息 2024-03-21 16:35:40 +08:00
Jiang Peng 971296ea2c 修改品类信息 2024-03-03 19:25:36 +08:00
Jiang Peng dc4905452d 品类信息 2024-03-03 16:54:28 +08:00
Jiang Peng 4ad5dcd0ee 属性属性组 2024-03-03 11:22:26 +08:00
yaoxin 019dfc754c 商品模块属性组增删改 2024-03-01 19:25:49 +08:00
DongZeLiang b3ce31f749 商品属性组列表 2024-02-28 16:51:38 +08:00
DongZeLiang be750e8f53 商品属性组添加 2024-02-28 15:53:47 +08:00
DongZeLiang 9439538463 商品属性功能完善 2024-02-27 16:49:06 +08:00
27 changed files with 2340 additions and 114 deletions
Show Stats Expand all files Collapse all files

15
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) {

9
src/api/product/info.js
View File

@ -9,6 +9,13 @@ export function listInfo(query) {
})
}
// 查询商品信息详细
export function getDetailInfo(id) {
return request({
url: '/product/info/detail/' + id,
method: 'get'
})
}
// 查询商品信息详细
export function getInfo(id) {
return request({
@ -29,7 +36,7 @@ export function addInfo(data) {
// 修改商品信息
export function updateInfo(data) {
return request({
url: '/product/info/'+data.id,
url: '/product/info/'+data.projectAddModel.id,
method: 'put',
data: data
})

44
src/api/shopCart/Info.js 100644
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询购物车列表
export function listInfo(query) {
return request({
url: '/shopCart/Info/list',
method: 'get',
params: query
})
}
// 查询购物车详细
export function getInfo(id) {
return request({
url: '/shopCart/Info/' + id,
method: 'get'
})
}
// 新增购物车
export function addInfo(data) {
return request({
url: '/shopCart/Info',
method: 'post',
data: data
})
}
// 修改购物车
export function updateInfo(data) {
return request({
url: '/shopCart/Info/'+data.id,
method: 'put',
data: data
})
}
// 删除购物车
export function delInfo(id) {
return request({
url: '/shopCart/Info/' + id,
method: 'delete'
})
}

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
}
},
data() {
return {
attributeGroupIdList: [],
checkedAttributeGroupList: [],
attributeGroupQuery: {
pageNum: 1,
pageSize: 10,
name: null
},
attributeGroupTotal: 0,
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();
},
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
}
},
data() {
return {
brandIdList: [],
checkedBrandList: [],
brandQuery: {
pageNum: 1,
pageSize: 10,
name: 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();
},
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>

3
src/components/Editor/index.vue
View File

@ -124,6 +124,9 @@ export default {
methods: {
init() {
const editor = this.$refs.editor;
if (this.readOnly){
this.options.modules.toolbar= {}
}
this.Quill = new Quill(editor, this.options);
// 如果设置了上传地址则自定义图片上传事件
if (this.type == 'url') {

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--;

70
src/layout-shop/index.vue 100644
View File

@ -0,0 +1,70 @@
<template>
<div>
<el-container>
<el-header>
<el-menu
default-active="1"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</el-header>
<el-main>
<el-row :gutter="20">
<el-col :span="12" :offset="6">
<router-view/>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: "layoutShop"
}
</script>
<style scoped>
.el-header, el-footer {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 60px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside{
line-height: 260;
}
.el-container:nth-child(7).el.el-aside{
line-height: 320px;
}
</style>

16
src/main.js
View File

@ -1,4 +1,9 @@
import Vue from 'vue'
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import Cookies from 'js-cookie'
@ -37,6 +42,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 +68,9 @@ 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/router/index.js
View File

@ -2,7 +2,8 @@ import Vue from 'vue'
import Router from 'vue-router'
/* Layout */
import Layout from '@/layout'
import LayoutShop from "@/layout-shop/index.vue";
import detail from "@/views/product/info/detail/index.vue";
Vue.use(Router)
/**
@ -73,6 +74,23 @@ export const constantRoutes = [
}
]
},
{
path: '',
component: LayoutShop,
redirect: 'product-detail',
children: [
{
path: 'product-detail/:detailId(\\d+)',
component: () => import('@/views/product/info/detail/index'),
name: 'ShopProduct',
meta: {title: '商品详情', icon: 'dashboard', affix: true}
}
]
},
// {
// path: '/gb',
// component: detail
// },
{
path: '/user',
component: Layout,

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

@ -63,12 +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" />
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updataTime, '{y}-{m}-{d}') }}</span>
</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">
@ -99,8 +95,11 @@
/>
<!-- 添加或修改商品属性对话框 -->
<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>
@ -145,12 +144,16 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
code: null,
name: null
},
// 表单参数
form: {},
// 表单校验
rules: {
code: [
{ required: true, message: "属性编码不能为空", trigger: "blur" }
],
name: [
{ required: true, message: "属性名不能为空", trigger: "blur" }
],
@ -179,6 +182,7 @@ export default {
reset() {
this.form = {
id: null,
code: null,
name: null,
createBy: null,
createTime: null,

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

@ -73,16 +73,18 @@
<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="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>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updataTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@ -114,23 +116,32 @@
/>
<!-- 添加或修改属性组对话框 -->
<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="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-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>
<CheckAttribute v-model="form.attributeIdList"/>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -190,6 +201,7 @@ export default {
this.getList();
},
methods: {
/** 查询属性组列表 */
getList() {
this.loading = true;
@ -210,12 +222,10 @@ export default {
id: null,
name: null,
states: null,
createBy: null,
createTime: null,
updataBy: null,
updataTime: null,
remark: null
remark: null,
attributeIdList: [],
};
this.checkedAttributeList = []
this.resetForm("form");
},
/** 搜索按钮操作 */

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

@ -116,7 +116,7 @@
/>
<!-- 添加或修改品牌信息对话框 -->
<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="nam">
<el-input v-model="form.nam" placeholder="请输入品牌名称" />

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

@ -26,7 +26,7 @@
/>
</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>
@ -104,26 +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="start">
<el-input v-model="form.start" placeholder="请输入是否启用" />
</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>
@ -134,12 +170,20 @@
</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";
export default {
name: "Category",
dicts: ['sys_yes_no'],
components: {
Treeselect
},
@ -191,9 +235,26 @@ export default {
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();
},
@ -217,7 +278,7 @@ export default {
children: node.children
};
},
/** 查询品类信息下拉树结构 */
/** 查询品类信息下拉树结构 */
getTreeselect() {
listCategory().then(response => {
this.categoryOptions = [];

2
src/views/product/comment/index.vue
View File

@ -110,7 +110,7 @@
/>
<!-- 添加或修改商品评论对话框 -->
<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="projectId">
<el-input v-model="form.projectId" placeholder="请输入商品id" />

304
src/views/product/info/detail/index.vue 100644
View File

@ -0,0 +1,304 @@
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="breadcrumb in receivedShop.categoryInfoList">{{breadcrumb.name}}</el-breadcrumb-item>
</el-breadcrumb>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-carousel trigger="click" height="300px">
<el-carousel-item v-for="item in Products" :key="item">
<img :src="item" alt="坏了" width="100%" height="100%">
</el-carousel-item>
</el-carousel>
<div style="margin-top: 10px ">
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="男女比">
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic
group-separator=","
:precision="2"
decimal-separator="."
:value="value1"
:title="title"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
</el-statistic>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12">
{{receivedShop.projectInfo.name}}
商品规格 {{checkSkuInfo.sku}}
<h2 style="color: red">{{ checkSkuInfo.price }}</h2>
<el-card shadow="hover" style="width: 100%;">
<div style="width: 100%; display: inline-block; ">
<el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
<template slot="suffix">
抢购即将开始
</template>
</el-statistic>
</div>
</el-card>
<el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
<el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrAddModelList":label="ruleAttr.name">
<!-- <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">-->
<!-- <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
<!-- </el-radio-group>-->
<el-radio v-model="form['rule'+index]" @change="selectRuleSku"
v-for="value in ruleAttr.valueList"
:label="value" :key="value" :value="value" border>{{value}}</el-radio>
</el-form-item>
<el-form-item label="数量">
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字" ></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" >加入购物车</el-button>
<el-button>立即购买</el-button>
</el-form-item>
</el-form>
总价格{{num}}
</el-col>
</el-row>
<el-row style="margin-top: 50px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="">商品详情</span>
<el-descriptions v-for="item in receivedShop.attributeGroupList" :title="attributeGroup.groupName" :column="1" >
<el-descriptions-item v-for="attribute in item.attributeList" :label="attribute.name">
{{attributeMap[attribute.id]}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
title="其他属性" :column="1" >
<el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
:label="attributeInfo.name">
{{attributeMap[attributeInfo.id]}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
title="其他属性" :column="1" >
<el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
:label="attributeInfo.name">
{{attributeMap[attributeInfo.id]}}
</el-descriptions-item>
</el-descriptions>
<editor v-model="editorValue" :read-only="true"></editor>
</div>
</el-card>
</el-row>
</div>
</template>
<script>
import {getDetailInfo} from "@/api/product/info";
export default {
name: "productDetail",
data() {
return {
breadcrumbList: [
"服装",
"外衣",
"女士移除"
],
like: true,
value1: 4154.564,
value2: 1314,
title: "增长人数",
form: {
num: 1,
price: 0
},
shopData: {},
receivedShop: {
projectInfo: {
name: ""
},
brandInfo: {
nam: ""
},
attributeInfoList: []
},
num: 1,
editorValue: "阿萨德刚",
attributeMap: [],
// 商品轮播图
Products: [],
checkSkuInfo: {
price : 0.00
},
price: 0.00,
attributeGroup: [],
deadline2 : Date.now() + 1 * 10000 // 10小时 * 60分钟/小时 * 60秒/分钟 * 1000毫秒/秒
}
},
created() {
const detailId=this.$route.params && this.$route.params.detailId
this.initProjectDetailInfo(detailId)
// this.parseShopFromRoute();
// 设置定时器
const timerId = setTimeout(() => {
// 时间到了，调用 hilarity 函数
this.hilarity();
clearTimeout(timerId);
}, this.deadline2 - Date.now());
},
watch: {
'form.num':{
handler:"updateNum",
immediate:true
}
},
methods:{
updateNum() {
this.num = this.price * this.form.num
console.log("qqqqq",this.num)
},
hilarity() {
this.$notify({
title: "提示",
message: "时间已到",
duration: 0,
});
},
initSku(){
let sku =this.receivedShop.projectSkuInfoList[0]['sku'];
let skuArr =sku.split("-");
skuArr.forEach((rule,index) => {
this.form['rule'+index] = rule
})
this.selectRuleSku()
},
selectRuleSku(){
let ruleSize =this.receivedShop.ruleAttrAddModelList.length
let sku = "";
for (let index = 0 ; ;index++){
sku +=this.form['rule'+index]
if (index+1 === ruleSize){
break
}
sku += "-";
}
this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
console.log("sdf",this.checkSkuInfo)
console.log("ppp",this.checkSkuInfo.price)
this.price = this.checkSkuInfo.price
this.updateNum()
},
initProjectDetailInfo(detailId){
getDetailInfo(detailId).then(response => {
this.receivedShop = response.data
console.log("商品",this.receivedShop)
let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
this.Products.push(...ccc)
this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
let key =productAttributeInfo.attributeId;
this.attributeMap[key] = productAttributeInfo["value"]
})
let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
console.log("hieng",ruleAttrLength)
for (let index = 0 ;index < ruleAttrLength ;index++){
this.form["rule"+index] = null
}
console.log("shjo",this.receivedShop.ruleAttrAddModelList)
this.initSku()
})
},
//商品列表
// parseShopFromRoute() {
// // 尝试解析shop查询参
// this.receivedShop = this.$route.query.shop;
// // 确保receivedShop和data属性都存在，并且data下有name属性
// console.log("hhhh ",this.receivedShop); // 打印店铺名称
// // 图片轮播图
// let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
// this.Products.push(...ccc)
// this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
// let key =productAttributeInfo.attributeId;
// this.attributeMap[key] = productAttributeInfo["value"]
// })
//
// let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
// console.log("hieng",ruleAttrLength)
// for (let index = 0 ;index < ruleAttrLength ;index++){
// this.form["rule"+index] = null
// }
// console.log("shjo",this.receivedShop.ruleAttrAddModelList)
// this.initSku()
// },
},
beforeDestroy() {
}
}
</script>
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>

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

@ -115,6 +115,9 @@
<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 class="link-type" @click="toProjectDetail(scope.row.id)">
商品詳情
</el-button>
<el-button
size="mini"
type="text"
@ -142,40 +145,223 @@
/>
<!-- 添加或修改商品信息对话框 -->
<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-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">
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="商品描述">
<editor v-model="form.introduction" :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>
<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="type">
<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="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>
</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="attributeForm" :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>
{{skuList}}
<el-table
:data="skuList"
border
max-height="500"
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="商品描述" prop="introduction">
<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>
@ -185,6 +371,10 @@
<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",
@ -225,22 +415,301 @@ export default {
brandId: null,
},
// 表单参数
form: {},
form: {
mianType: '',
parentType: '',
type:'',
image: '',
price: '',
stock: ''
},
fufObj: [],
// 表单校验
rules: {
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
name: [
{ required: true, message: "商品名称不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
status: [
{ 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" }
],
},
rulesTemplateMap: {
0: ["name", "status", "brandId", "image", "carouselImages"],
1: ["type"],
2: ["ruleId"],
},
stepNumber: 0,
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
},
respData:[],
fifObj: []
};
},
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) {
if (value != null){
getTemplateAttribute(value).then(response => {
console.log("res",response)
const {data} = response;
const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
this.categoryCommonElement.templateAttributeList = templateAttributeList;
this.categoryCommonElement.attributeList = attributeList;
console.log("resData",this.respData);
if (this.respData != null && this.respData.length !== 0){
this.categoryCommonElement.templateAttributeGroupList.forEach(template => {
template.attributeList.forEach(te => {
this.respData.forEach(asPro => {
if (te.id == asPro.attributeId){
console.log("value",asPro.value)
te.value = asPro.value;
this.fufObj.push(asPro);
}
});
});
});
this.categoryCommonElement.templateAttributeList.forEach(tem => {
this.respData.forEach(asPro => {
console.log(asPro)
if (tem.id === asPro.attributeId){
tem.value = asPro.value;
this.fufObj.push(asPro);
}
});
});
this.respData.forEach(asPro => {
if (!this.fufObj.includes(asPro)){
this.attributeCheckedList.push(asPro);
}
});
this.categoryCommonElement.attributeList.forEach(attr => {
this.attributeCheckedList.forEach(attri => {
if (attr.id == attri.attributeId){
attri.name = attr.name;
this.attributeIdCheckedList.push(Number(attr.id));
}
});
});
}
});
}
}
}
},
created() {
this.getList();
},
methods: {
toProjectDetail(detailId){
let url = `${window.location.origin}/product-detail/${detailId}`;
window.open(url)
},
oneSetting(){
this.skuList.forEach(skuInfo => {
console.log(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;
console.log(ruleInfo)
console.log(ruleAttrList)
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) ;
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;
// categoryCommonElement / attributeIdCheckedList / attributeCheckedList
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");
});
},
remoteSearchBrandList(queryValue){
listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
this.brandList = response.data;
});
},
last() {
this.stepNumber--
},
next() {
let isValidate = true;
this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
if (valid) {
isValidate = false;
}
});
if (isValidate){
this.stepNumber++
}
},
/** 查询商品信息列表 */
getList() {
this.loading = true;
@ -267,15 +736,20 @@ export default {
image: null,
carouselImages: null,
status: null,
ruleId: null,
brandId: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
updateTime: null,
skuList: [],
titleList: [],
categoryCommonElement: [],
oneSettingForm: {}
};
this.resetForm("form");
this.initCategoryTree();
this.initRuleList();
},
/** 搜索按钮操作 */
handleQuery() {
@ -296,15 +770,36 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.initCategoryTree()
this.open = true;
this.skuList=[]
this.titleList= []
this.oneSettingForm = {}
this.title = "添加商品信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getInfo(id).then(response => {
console.log("response",response)
this.respData = response.data.asProductAttributeInfos
this.form = response.data;
console.log("sd",this.form.id)
this.initCategoryTree()
this.oneSettingForm = response.data.projectSkuInfos
this.categoryOptionValue = [Number(response.data.mianType),Number(response.data.parentType),Number(response.data.type)]
this.changeRule(response.data.ruleId)
console.log("sku",this.skuList)
console.log("skuu",response.data.projectSkuInfos)
for (var i = 0; i < this.skuList.length; i++) {
this.$set(this.skuList[i], 'image', response.data.projectSkuInfos[i].image);
this.$set(this.skuList[i], 'price', response.data.projectSkuInfos[i].price);
this.$set(this.skuList[i], 'stock', response.data.projectSkuInfos[i].stock);
console.log(this.skuList[i].price, response.data.projectSkuInfos[i].price);
}
console.log("sfdf",this.skuList)
this.open = true;
this.title = "修改商品信息";
});
@ -313,14 +808,47 @@ 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("pto",productAddReq)
if (this.form.id != null) {
updateInfo(this.form).then(response => {
updateInfo(productAddReq).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInfo(this.form).then(response => {
addInfo(productAddReq).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -348,3 +876,11 @@ export default {
}
};
</script>
<style>
.el-select-dropdown__item{
height: 45px;
}
.box-card {
margin: 10px;
}
</style>

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

@ -65,6 +65,18 @@
<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="name" >
<template slot-scope="scope">
<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">
@ -96,7 +108,7 @@
/>
<!-- 添加或修改商品规格对话框 -->
<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="请输入规格名称" />
@ -104,6 +116,45 @@
<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>
@ -155,13 +206,84 @@ export default {
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;
@ -183,10 +305,7 @@ export default {
name: null,
status: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
ruleAttrList:[]
};
this.resetForm("form");
},

229
src/views/product/shop/index.vue 100644
View File

@ -0,0 +1,229 @@
<template>
<div>
<div class="title">选购商品</div>
<table class="table" width="100%">
<template v-for="(item, index) in goodsList" v-if="index%2==0">
<tr>
<td class="video-row" @click="goto(item.id)">
<div class="row-line">
<img :src="item.image" style="width: 400px; height: 400px"/>
<div class="video-title">{{item.name}}</div>
<div>
<el-row :gutter="20">
<el-col :span="8">
<div>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="8">
<div>
<el-statistic title="好评比">
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="8">
<div>
<el-statistic :value="like ? 5 : 1" title="星级">
<template slot="suffix">
<span @click="like = !like" class="like">
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
</el-statistic>
</div>
</el-col>
</el-row>
</div>
</div>
</td>
<!--添加td作为两行之间的间距，td中用&nbsp;进行占位-->
<td class="line-bg">&nbsp;</td>
<td v-if="index+1<goodsList.length" class="video-row" @click="goto(goodsList[index+1].id,goodsList[index+1].title)">
<div class="row-line">
<img :src="goodsList[index+1].image" style="width: 400px; height: 400px"/>
<div class="video-title">{{goodsList[index+1].name}}</div>
<div>
<el-row :gutter="20">
<el-col :span="8">
<div>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:title="title"
></el-statistic>
</div>
</el-col>
<el-col :span="8">
<div>
<el-statistic title="好评比">
<template slot="formatter">
456/2
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="8">
<div>
<el-statistic :value="like ? 4 : 520" title="Feedback">
<template slot="suffix">
<span @click="like = !like" class="like">
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
</el-statistic>
</div>
</el-col>
</el-row>
</div>
</div>
</td>
</tr>
</template>
</table>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getDetailInfo, listInfo} from "@/api/product/info";
export default {
name: "ShopProduct",
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
data() {
//这里存放数据"
return {
like: true,
value1: 4154.564,
value2: 1314,
title: "近期下单",
goodsList: [],
shop: {}
};
},
//计算属性 类似于data概念",
computed: {},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {
getALlGoods(){
listInfo().then(
res => {
console.log(res)
this.goodsList = res.data.rows
}
)
},
goto(id){
console.log(id)
getDetailInfo(id).then(response => {
console.log(response)
this.shop = response.data;
if (response && response.data){
let routeData = this.$router.resolve({ path: '/gb', query: { shop: this.shop } });
this.$router.push(routeData.route);
}else {
console.error("没有获取到表单数据")
}
});
}
},
//生命周期 - 创建完成（可以访问当前this实例）",
created() {
this.getALlGoods()
},
//生命周期 - 挂载完成（可以访问DOM元素）",
mounted() {
},
beforeCreate() {
}, //生命周期 - 创建之前",
beforeMount() {
}, //生命周期 - 挂载之前",
beforeUpdate() {
}, //生命周期 - 更新之前",
updated() {
}, //生命周期 - 更新之后",
beforeDestroy() {
}, //生命周期 - 销毁之前",
destroyed() {
}, //生命周期 - 销毁完成",
activated() {
} //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style lang="scss" scoped>
.wrapper {
height: 100%;
padding: 20px 20px 20px 20px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2A333F;
background-color: #f3f3f3;
line-height: 22px;
}
.title {
font-size: 14px;
text-align: center;
color:#091222;;
letter-spacing: 1px;
margin-bottom: 20px;
}
.table{
width:100%;
}
.video-row{
width: 48%;
height: 160px;
border-radius: 6px;
text-align: center;
.row-line{
background: #FFFFFF;
}
img {
width: 54px;
height: 54px;
margin: 35px 0 14px 0;
}
}
.line-bg{
width: 4%; //两列布局之间增加间距，HTML中添加&nbsp;占位
background: #f3f3f3;
}
.video-title {
margin-bottom: 15px;
padding-bottom: 34px;
}
.like {
cursor: pointer;
font-size: 25px;
display: inline-block;
}
</style>

331
src/views/shopCart/info/index.vue 100644
View File

@ -0,0 +1,331 @@
<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="projectId">
<el-input
v-model="queryParams.projectId"
placeholder="请输入商品"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="SKU" prop="projectSku">
<el-input
v-model="queryParams.projectSku"
placeholder="请输入SKU"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="用户" prop="userId">
<el-input
v-model="queryParams.userId"
placeholder="请输入用户"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="数量" prop="num">
<el-input
v-model="queryParams.num"
placeholder="请输入数量"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="是否选中" prop="isSelected">
<el-input
v-model="queryParams.isSelected"
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="['shopCart: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="['shopCart: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="['shopCart: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="['shopCart: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="projectId" />
<el-table-column label="SKU" align="center" prop="projectSku" />
<el-table-column label="用户" align="center" prop="userId" />
<el-table-column label="数量" align="center" prop="num" />
<el-table-column label="是否选中" align="center" prop="isSelected" />
<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="['shopCart:Info:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['shopCart: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="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="商品" prop="projectId">
<el-input v-model="form.projectId" placeholder="请输入商品" />
</el-form-item>
<el-form-item label="SKU" prop="projectSku">
<el-input v-model="form.projectSku" placeholder="请输入SKU" />
</el-form-item>
<el-form-item label="用户" prop="userId">
<el-input v-model="form.userId" placeholder="请输入用户" />
</el-form-item>
<el-form-item label="数量" prop="num">
<el-input v-model="form.num" placeholder="请输入数量" />
</el-form-item>
<el-form-item label="是否选中" prop="isSelected">
<el-input v-model="form.isSelected" 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 { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/shopCart/Info";
export default {
name: "Info",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 购物车表格数据
InfoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: null,
projectSku: null,
userId: null,
num: null,
isSelected: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
projectId: [
{ required: true, message: "商品不能为空", trigger: "blur" }
],
projectSku: [
{ required: true, message: "SKU不能为空", trigger: "blur" }
],
userId: [
{ required: true, message: "用户不能为空", trigger: "blur" }
],
num: [
{ required: true, message: "数量不能为空", trigger: "blur" }
],
isSelected: [
{ required: true, message: "是否选中不能为空", trigger: "blur" }
],
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询购物车列表 */
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,
projectId: null,
projectSku: null,
userId: null,
num: null,
isSelected: 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
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('shopCart/Info/export', {
...this.queryParams
}, `Info_${new Date().getTime()}.xlsx`)
}
}
};
</script>

2
src/views/system/config/index.vue
View File

@ -155,7 +155,7 @@
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
<el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="参数名称" prop="configName">
<el-input v-model="form.configName" placeholder="请输入参数名称"/>

2
src/views/system/dict/data.vue
View File

@ -153,7 +153,7 @@
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
<el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典类型">
<el-input v-model="form.dictType" :disabled="true"/>

2
src/views/system/dict/index.vue
View File

@ -165,7 +165,7 @@
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
<el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="dictName">
<el-input v-model="form.dictName" placeholder="请输入字典名称"/>

2
src/views/system/post/index.vue
View File

@ -130,7 +130,7 @@
/>
<!-- 添加或修改岗位对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
<el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="岗位名称" prop="postName">
<el-input v-model="form.postName" placeholder="请输入岗位名称"/>

4
src/views/system/role/index.vue
View File

@ -165,7 +165,7 @@
/>
<!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
<el-dialog :title="title" :visible.sync="open" append-to-body width="80%">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称"/>
@ -220,7 +220,7 @@
</el-dialog>
<!-- 分配角色数据权限对话框 -->
<el-dialog :title="title" :visible.sync="openDataScope" append-to-body width="500px">
<el-dialog :title="title" :visible.sync="openDataScope" append-to-body width="80%">
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
<el-input v-model="form.roleName" :disabled="true"/>

2
src/views/tool/build/CodeTypeDialog.vue
View File

@ -4,7 +4,7 @@
:close-on-click-modal="false"
:modal-append-to-body="false"
v-bind="$attrs"
width="500px"
width="80%"
@close="onClose"
@open="onOpen"
v-on="$listeners"