ll
/
ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品信息-ui

master
2812875475 2024-03-07 08:49:48 +08:00
parent 6874ae2edc
commit 8efdd4a8ba
8 changed files with 996 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询商品测试列表
export function listGood(query) {
return request({
url: '/product/good/list',
method: 'get',
params: query
})
}
// 查询商品测试详细
export function getGood(id) {
return request({
url: '/product/good/' + id,
method: 'get'
})
}
// 新增商品测试
export function addGood(data) {
return request({
url: '/product/good',
method: 'post',
data: data
})
}
// 修改商品测试
export function updateGood(data) {
return request({
url: '/product/good/'+data.id,
method: 'put',
data: data
})
}
// 删除商品测试
export function delGood(id) {
return request({
url: '/product/good/' + id,
method: 'delete'
})
}

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

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

8
src/components/AttributeGroup/index.vue
View File

@ -26,11 +26,11 @@
</div>
<el-row>
<el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="attributeGroupQuery.code" placeholder="属性编码"></el-input>
<el-form-item label="属性组编码">
<el-input v-model="attributeGroupQuery.code" placeholder="属性组编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="attributeGroupQuery.name" placeholder="属性名称"></el-input>
<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>

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

@ -221,7 +221,7 @@
:total="attributeTotal"
:page.sync="attribute.pageNum"
:limit.sync="attribute.pageSize"
@pagination="getList1"
@pagination="attributeQuery"
/>
{{ attributeIdList }}
</el-card>
@ -295,7 +295,7 @@ export default {
},
// 表单参数
form: {
attributeIds:"",
attributeIdList: [],
},
// 表单校验
rules: {
@ -310,12 +310,11 @@ export default {
},
created() {
this.getList();
this.getList1();
},
methods: {
attributeQuery() {
listAttribute(this.queryParams).then(response => {
listAttribute(this.attribute).then(response => {
this.attributeList = response.data.rows;
this.attributeTotal = response.data.total;
});
@ -323,13 +322,6 @@ export default {
handleClose(index) {
this.attributeIdList.splice(this.attributeIdList.indexOf(index), 1)
},
/** 查询商品属性列表 */
getList1() {
listAttribute(this.attribute).then(response => {
this.attributeList = response.data.rows;
this.attributeTotal = response.data.total;
});
},
/** 查询商品属性组列表 */
getList() {
this.loading = true;
@ -387,6 +379,7 @@ export default {
this.reset();
const id = row.id || this.ids
getAttributeGroup(id).then(response => {
console.log(response)
this.form = response.data;
this.attributeIdList=response.data.attributeIdList
this.open = true;
@ -409,7 +402,6 @@ export default {
this.attributeIdList=[]
});
} else {
this.form.attributeIdList=this.attributeIdList
addAttributeGroup(this.form).then(response => {
this.$modal.msgSuccess("新增成功");

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

@ -216,7 +216,11 @@ export default {
introduction: null,
},
// 表单参数
form: {},
form: {
attributeInfoList: [],
brandInfoList: [],
attributeGroupList: [],
},
// 表单校验
rules: {
name: [
@ -354,11 +358,18 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.brandInfoList=this.brandInfoList
this.form.attributeInfoList=this.attributeInfoList
this.form.attributeGroupList=this.attributeGroupList
console.log(this.form)
if (this.form.id != null) {
updateCategory(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
this.attributeInfoList=[]
this.attributeGroupList=[]
this.brandInfoList=[]
});
} else {
addCategory(this.form).then(response => {
@ -366,6 +377,9 @@ export default {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.attributeInfoList=[]
this.attributeGroupList=[]
this.brandInfoList=[]
});
}
}

540
src/views/product/good/index.vue 100644
View File

@ -0,0 +1,540 @@
<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="typeName">
<el-input
v-model="queryParams.typeName"
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:good: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:good: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:good: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:good:export']"
>导出
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
{{goodList}}
<el-table v-loading="loading" :data="goodList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="id" align="center" prop="id"/>
<el-table-column label="属性名" align="center" prop="name"/>
<el-table-column label="可检索" align="center" prop="searching"/>
<el-table-column label="值类型" align="center" prop="typeName"/>
<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="checkValue"/>
<el-table-column label="启用" align="center" prop="enable"/>
<el-table-column label="所属分类" align="center" prop="classify"/>
<el-table-column label="所属分组" align="center" prop="groupValue"/>
<el-table-column label="快速展示" align="center" prop="quickShow">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.quickShow"/>
</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">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:good:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:good: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-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="typeName">
<el-switch
style="display: block"
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="只能单个值"
inactive-text="允许多个值">
</el-switch>
</el-form-item>
<el-form-item label="可选值">
<Attribute v-model="form.attributeIdList" :checked-list="attributeInfoList"/>
</el-form-item>
<el-form-item label="图标" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="所属分组">
<el-cascader :options="options" clearable></el-cascader>
</el-form-item>
<el-form-item label="可检索" prop="searching">
<el-switch
v-model="form.searching"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="快速展示" prop="quickShow">
<el-switch
v-model="form.quickShow"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="启用" prop="enable">
<el-switch
v-model="form.enable"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" 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 {listGood, getGood, delGood, addGood, updateGood} from "@/api/product/good";
export default {
name: "Good",
dicts: ['sys_normal_disable'],
data() {
return {
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
}, {
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}],
attributeInfoList: [],
value: true,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 商品测试表格数据
goodList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
typeName: null,
},
// 表单参数
form: {},
// 表单校验
rules: {}
};
},
created() {
this.getList();
},
methods: {
/** 查询商品测试列表 */
getList() {
this.loading = true;
listGood(this.queryParams).then(response => {
console.log(response)
this.goodList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
searching: null,
typeName: null,
image: null,
checkValue: null,
enable: null,
classify: null,
groupValue: null,
quickShow: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: 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
getGood(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) {
updateGood(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addGood(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 delGood(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
this.download('product/good/export', {
...this.queryParams
}, `good_${new Date().getTime()}.xlsx`)
}
}
};
</script>

233
src/views/product/productInfo/index.vue
View File

@ -9,22 +9,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="主类型" prop="mainType">
<el-input
v-model="queryParams.mainType"
placeholder="请输入主类型"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="父类型" prop="parentType">
<el-input
v-model="queryParams.parentType"
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>
@ -39,7 +23,7 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['product:productInfo:add']"
v-hasPermi="['product:info:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
@ -50,7 +34,7 @@
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:productInfo:edit']"
v-hasPermi="['product:info:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
@ -61,7 +45,7 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['product:productInfo:remove']"
v-hasPermi="['product:info:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
@ -71,13 +55,13 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['product:productInfo:export']"
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="productInfoList" @selection-change="handleSelectionChange">
<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" />
@ -95,7 +79,11 @@
<image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="商品状态" align="center" prop="status" />
<el-table-column label="商品状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="规格" align="center" prop="ruleId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@ -105,14 +93,14 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:productInfo:edit']"
v-hasPermi="['product:info:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['product:productInfo:remove']"
v-hasPermi="['product:info:remove']"
>删除</el-button>
</template>
</el-table-column>
@ -128,44 +116,149 @@
<!-- 添加或修改商品信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-steps :active="active" 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-if="active==1">
<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_normal_disable"
: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="name">
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="商品描述">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
<el-form-item label="主类型" prop="mainType">
<el-input v-model="form.mainType" placeholder="请输入主类型" />
</el-form-item>
<el-form-item label="父类型" prop="parentType">
<el-input v-model="form.parentType" placeholder="请输入父类型" />
</el-form-item>
</el-col>
<el-col :span="12">
<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="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-col>
</el-row>
</div>
<div v-if="active==2">
<el-form-item label="商品备注">
<editor v-model="form.remark" :min-height="192"/>
</el-form-item>
</div>
<div v-if="active==3">
</div>
<div v-if="active==4">
<el-form-item label="商品品类" prop="name">
<el-input v-model="form.name" placeholder="商品品类" />
</el-form-item>
</div>
</el-form>
<el-button style="margin-top: 12px;" @click="back">上一步</el-button>
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
<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 { listProductInfo, getProductInfo, delProductInfo, addProductInfo, updateProductInfo } from "@/api/product/productInfo";
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
import {listBrand} from "@/api/product/brand";
export default {
name: "ProductInfo",
name: "Info",
dicts: ['sys_normal_disable'],
data() {
return {
options: [],
value: [],
list: [],
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"],
brandList: [],
ruleList: [],
ruleAddForm: {
name: null,
ruleList: null,
},
ruleAddFormStatus: false,
addRulePropertyValue: null,
active:1,
// 遮罩层
loading: true,
// 选中数组
@ -179,7 +272,7 @@ export default {
// 总条数
total: 0,
// 商品信息表格数据
productInfoList: [],
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
@ -192,12 +285,10 @@ export default {
introduction: null,
mainType: null,
parentType: null,
type: null,
status: null,
ruleId: null,
},
// 表单参数
form: {},
form: {
},
// 表单校验
rules: {
name: [
@ -207,13 +298,13 @@ export default {
{ required: true, message: "商品描述不能为空", trigger: "blur" }
],
mainType: [
{ required: true, message: "主类型不能为空", trigger: "blur" }
{ required: true, message: "主类型不能为空", trigger: "change" }
],
parentType: [
{ required: true, message: "父类型不能为空", trigger: "blur" }
{ required: true, message: "父类型不能为空", trigger: "change" }
],
type: [
{ required: true, message: "商品类型不能为空", trigger: "blur" }
{ required: true, message: "商品类型不能为空", trigger: "change" }
],
image: [
{ required: true, message: "商品图片不能为空", trigger: "blur" }
@ -230,24 +321,50 @@ export default {
remark: [
{ required: true, message: "备注不能为空", trigger: "blur" }
],
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
this.getBrandList();
},
mounted() {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {
getBrandList() {
listBrand(this.queryParams).then(response => {
this.brandList = response.data.rows;
});
},
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
},
next() {
if (this.active++ >= 4) this.active = 1;
},
back() {
if (this.active-- <= 1) this.active = 4;
},
/** 查询商品信息列表 */
getList() {
this.loading = true;
listProductInfo(this.queryParams).then(response => {
this.productInfoList = response.data.rows;
listInfo(this.queryParams).then(response => {
this.infoList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
@ -265,7 +382,7 @@ export default {
introduction: null,
mainType: null,
parentType: null,
type: [],
type: null,
image: null,
carouselImages: null,
status: null,
@ -304,9 +421,8 @@ export default {
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getProductInfo(id).then(response => {
getInfo(id).then(response => {
this.form = response.data;
this.form.type = this.form.type.split(",");
this.open = true;
this.title = "修改商品信息";
});
@ -315,15 +431,14 @@ export default {
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.type = this.form.type.join(",");
if (this.form.id != null) {
updateProductInfo(this.form).then(response => {
updateInfo(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addProductInfo(this.form).then(response => {
addInfo(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -336,7 +451,7 @@ export default {
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
return delProductInfo(ids);
return delInfo(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
@ -344,9 +459,9 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
this.download('product/productInfo/export', {
this.download('product/info/export', {
...this.queryParams
}, `productInfo_${new Date().getTime()}.xlsx`)
}, `info_${new Date().getTime()}.xlsx`)
}
}
};

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

@ -1,3 +1,4 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
@ -61,11 +62,30 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
{{ruleList}}
<el-table v-loading="loading" :data="ruleList" @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="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="name" >
<template slot-scope="scope">
<el-row v-for="rule in scope.row.ruleAttrList"><span>{{rule.name}}</span></el-row>
</template>
</el-table-column>
<el-table-column label="规格属性值" align="center" prop="name" >
<template slot-scope="scope">
<el-row v-for="rule in scope.row.ruleAttrList"><span>{{rule.ruleList.toString()}}</span></el-row>
</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">
@ -74,7 +94,7 @@
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['product:rule:edit']"
v-hasPermi="['product:rule:query']"
>修改</el-button>
<el-button
size="mini"
@ -96,14 +116,92 @@
/>
<!-- 添加或修改商品规格对话框 -->
<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-row>
<el-col :span="12">
<el-form-item label="规格名称" prop="name">
<el-input v-model="form.name" placeholder="请输入规格名称" />
</el-form-item>
<el-form-item label="备注">
<editor v-model="form.remark" :min-height="192"/>
</el-col>
<el-col :span="12">
<el-form-item label="规格状态" prop="states">
<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-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-row>
<el-row v-for="(rule, index) in form.ruleList">
<el-row style="margin: 15px 10px">
规格名称：
<el-tag
:key="rule.name"
@close="removeRule(index)"
closable>
{{rule.name}}
</el-tag>
</el-row>
<el-row style="margin: 15px 10px">
规格属性：
<el-tag
v-for="(ruleProperty, index) in rule.ruleList"
:key="ruleProperty"
@close="removeRuleProperty(rule.ruleList, index)"
closable>
{{ruleProperty}}
</el-tag>
<el-button v-if="!rule.ruleAddStatus" @click="rule.ruleAddStatus = !rule.ruleAddStatus" size="mini">添加</el-button>
<el-input v-if="rule.ruleAddStatus"
v-model="addRulePropertyValue"
@blur="addRuleProperty(rule, false)"
@keyup.enter.native="addRuleProperty(rule, true)"
size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/>
</el-row>
<el-divider></el-divider>
</el-row>
<el-button v-if="!ruleAddFormStatus" type="success" @click="ruleAddFormStatus = !ruleAddFormStatus">添加规格</el-button>
<el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">
<el-row>
<el-form-item label="规格名称">
<el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="规格属性">
<el-input v-model="ruleAddForm.ruleList" placeholder="请输入规格属性"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-button type="danger" @click="ruleAdd" plain>添加</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -118,6 +216,7 @@ import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/r
export default {
name: "Rule",
dicts: ['sys_yes_no'],
data() {
return {
// 遮罩层
@ -146,7 +245,10 @@ export default {
status: null,
},
// 表单参数
form: {},
form: {
ruleList:[],
ruleAttrList:[]
},
// 表单校验
rules: {
createBy: [
@ -155,17 +257,92 @@ export default {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
},
ruleAddForm: {
name: null,
ruleList: null,
},
ruleAddFormStatus: false,
addRulePropertyValue: null
};
},
created() {
this.getList();
},
methods: {
removeRule(index){
this.form.ruleList.splice(index, 1);
},
removeRuleProperty(ruleList,index){
ruleList.splice(index, 1);
},
addRuleProperty(rule, continuousInput){
if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
if (!continuousInput){
rule.ruleAddStatus = !rule.ruleAddStatus
}
return;
}
if (rule.ruleList.indexOf(this.addRulePropertyValue) > -1){
this.$message({
message: `规格[${rule.name}]属性值[${this.addRulePropertyValue}]已经存在`,
type: 'warning'
});
return;
}
rule.ruleList.push(this.addRulePropertyValue)
this.addRulePropertyValue = null;
if (!continuousInput){
rule.ruleAddStatus = !rule.ruleAddStatus
}
},
ruleAdd(){
if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
this.$message({
message: '规格名称不可为空',
type: 'warning'
});
return;
}
if (this.ruleAddForm.ruleList === null || this.ruleAddForm.ruleList.length === 0){
this.$message({
message: '规格属性不可为空',
type: 'warning'
});
return;
}
let rule = this.form.ruleList.find(rule => rule.name === this.ruleAddForm.name);
if (rule === undefined){
this.form.ruleList.push({
"name": this.ruleAddForm.name,
"ruleList": [this.ruleAddForm.ruleList],
"ruleAddStatus": false
})
}else {
if (rule.ruleList.indexOf(this.ruleAddForm.ruleList) > -1){
this.$message({
message: `规格[${this.ruleAddForm.name}]属性值[${this.ruleAddForm.ruleList}]已经存在`,
type: 'warning'
});
return;
}
rule.ruleList.push(this.ruleAddForm.ruleList)
}
this.ruleAddForm = {
name: null,
ruleList: null,
}
this.ruleAddFormStatus = false;
},
/** 查询商品规格列表 */
getList() {
this.loading = true;
listRule(this.queryParams).then(response => {
console.log(response)
this.ruleList = response.data.rows;
this.total = response.data.total;
this.loading = false;
@ -183,10 +360,7 @@ export default {
name: null,
status: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
ruleList:[]
};
this.resetForm("form");
},
@ -217,7 +391,10 @@ export default {
this.reset();
const id = row.id || this.ids
getRule(id).then(response => {
console.log(response)
this.form = response.data;
this.form.ruleList= response.data.ruleAttrList
this.form.ruleList.ruleAddForm=response.data.ruleList.ruleList
this.open = true;
this.title = "修改商品规格";
});