cuishiyu
/
2108a-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品品类功能

dev
csy 2024-03-05 13:52:30 +08:00
parent 1033707324
commit 6b28b3deb2
6 changed files with 608 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

9
src/main.js
View File

@ -37,6 +37,12 @@ import DictTag from '@/components/DictTag'
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
// 属性选择
import CheckAttribute from "@/components/CheckAttribute/index.vue";
// 属性组选择
import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue";
// 品牌选择
import CheckBrand from "@/components/CheckBrand/index.vue";
// 全局方法挂载
Vue.prototype.getDicts = getDicts
@ -57,6 +63,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)

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

@ -201,6 +201,7 @@
</el-card>
</el-card>
</el-row>
<CheckAttribute v-model="form.attributeIdList"/>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>

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

@ -44,50 +44,36 @@
</el-col>
<el-col :span="1.5">
<el-button
type="success"
type="info"
plain
icon="el-icon-edit"
icon="el-icon-sort"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['product:category: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:category: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:category:export']"
>导出</el-button>
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="categoryList" @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
v-if="refreshTable"
v-loading="loading"
:data="categoryList"
row-key="id"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="品类名称" prop="name" />
<el-table-column label="图片" align="center" prop="image" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.image" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="父级品类" align="center" prop="parentId" />
<el-table-column label="是否启用" align="center" prop="start" />
<el-table-column label="是否启用" align="center" prop="start">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.start"/>
</template>
</el-table-column>
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@ -99,6 +85,13 @@
@click="handleUpdate(scope.row)"
v-hasPermi="['product:category:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
v-hasPermi="['product:category:add']"
>新增</el-button>
<el-button
size="mini"
type="text"
@ -110,42 +103,63 @@
</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-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="parentId">
<treeselect v-model="form.parentId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
</el-form-item>
<el-form-item label="品类名称" prop="name">
<el-input v-model="form.name" placeholder="请输入品类名称" />
</el-form-item>
<el-form-item label="图片" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="是否启用" prop="start">
<el-input v-model="form.start" placeholder="请输入是否启用" />
<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-form-item label="介绍" prop="introduction">
<el-input v-model="form.introduction" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="父级品类" prop="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>
@ -156,25 +170,29 @@
</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
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 品类信息表格数据
categoryList: [],
// 品类信息树选项
@ -183,10 +201,12 @@ export default {
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
image: null,
parentId: null,
@ -215,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();
},
@ -226,8 +263,7 @@ export default {
getList() {
this.loading = true;
listCategory(this.queryParams).then(response => {
this.categoryList = response.data.rows;
this.total = response.data.total;
this.categoryList = this.handleTree(response.data, "id", "parentId");
this.loading = false;
});
},
@ -275,7 +311,6 @@ export default {
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
@ -283,23 +318,34 @@ export default {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
handleAdd(row) {
this.reset();
this.getTreeselect();
if (row != null && row.id) {
this.form.parentId = row.id;
} else {
this.form.parentId = 0;
}
this.open = true;
this.title = "添加品类信息";
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getCategory(id).then(response => {
this.getTreeselect();
if (row != null) {
this.form.parentId = row.parentId;
}
getCategory(row.id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改品类信息";
@ -327,19 +373,12 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除品类信息编号为"' + ids + '"的数据项？').then(function() {
return delCategory(ids);
this.$modal.confirm('是否确认删除品类信息编号为"' + row.id + '"的数据项？').then(function() {
return delCategory(row.id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('product/category/export', {
...this.queryParams
}, `category_${new Date().getTime()}.xlsx`)
}
}
};