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

属性，属性组，品牌选择组件

dev1
DongZeLiang 2024-02-29 16:16:48 +08:00
parent b3ce31f749
commit 3e541da52c
6 changed files with 454 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,132 @@
<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: []
}
},
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>

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

@ -0,0 +1,128 @@
<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: []
}
},
data() {
return {
attributeGroupIdList: [],
checkedAttributeGroupList: [],
attributeGroupQuery: {
pageNum: 1,
pageSize: 10,
name: null
},
attributeGroupTotal: 0,
attributeGroupList: []
}
},
created() {
this.queryAttributeGroup();
},
methods: {
/**
* 选中值触发方法
*/
checkedAttributeGroup(attributeGroup) {
let isCheck = this.attributeGroupIdList.indexOf(attributeGroup.id) > -1;
if (isCheck) {
this.checkedAttributeGroupList.push(attributeGroup);
} else {
// 删除
this.checkedAttributeGroupList.splice(
this.checkedAttributeGroupList.indexOf(attributeGroup), 1
)
}
this.$emit("input", this.attributeGroupIdList);
},
/**
* 删除选中值
* @param index
*/
removeChecked(index) {
this.checkedAttributeGroupList.splice(index, 1);
this.attributeGroupIdList.splice(index, 1);
},
/**
* 查询属性
*/
queryAttributeGroup() {
listAttributeGroup(this.attributeGroupQuery).then(response => {
this.attributeGroupList = response.data.rows;
this.total = response.data.total;
});
},
}
}
</script>
<style scoped>
</style>

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

@ -0,0 +1,128 @@
<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: []
}
},
data() {
return {
brandIdList: [],
checkedBrandList: [],
brandQuery: {
pageNum: 1,
pageSize: 10,
name: null
},
brandTotal: 0,
brandList: []
}
},
created() {
this.queryBrand();
},
methods: {
/**
* 选中值触发方法
*/
checkedBrand(brand) {
let isCheck = this.brandIdList.indexOf(brand.id) > -1;
if (isCheck) {
this.checkedBrandList.push(brand);
} else {
// 删除
this.checkedBrandList.splice(
this.checkedBrandList.indexOf(brand), 1
)
}
this.$emit("input", this.brandIdList);
},
/**
* 删除选中值
* @param index
*/
removeChecked(index) {
this.checkedBrandList.splice(index, 1);
this.brandIdList.splice(index, 1);
},
/**
* 查询品牌
*/
queryBrand() {
listBrand(this.brandQuery).then(response => {
this.brandList = response.data.rows;
this.total = response.data.total;
});
},
}
}
</script>
<style scoped>
</style>

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)

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

@ -141,66 +141,7 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-row>
<el-row>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>选择属性关联关系</span>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>已选择属性</span>
</div>
<el-row>
<el-col :span="2" v-for="(attribute, index) in checkedAttributeList">
<el-tag
style="margin: 5px 10px"
:key="attribute.name"
closable @close="removeChecked(index)">
{{attribute.name}}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-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="form.attributeIdList"
:key="attribute.id"
:value="attribute.id"
:label="attribute.id"
@change="checkedAttribute(attribute)"
border>{{attribute.name}}</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="attributeQuery.pageNum"
:limit.sync="attributeQuery.pageSize"
@pagination="queryAttribute"
/>
</el-card>
</el-card>
</el-row>
<CheckAttribute v-model="form.attributeIdList"/>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -212,7 +153,6 @@
<script>
import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
import {listAttribute} from "@/api/product/attribute";
export default {
name: "AttributeGroup",
@ -254,59 +194,13 @@ export default {
states: [
{ required: true, message: "状态不能为空", trigger: "change" }
],
},
tags: [
{ name: '标签一' },
{ name: '标签二' }
],
checkedAttributeList: [],
attributeQuery: {
pageNum: 1,
pageSize: 10,
code: null,
name: null
},
attributeTotal: 0,
attributeList: []
}
};
},
created() {
this.getList();
},
methods: {
/**
* 选中值触发方法
*/
checkedAttribute(attribute){
let isCheck = this.form.attributeIdList.indexOf(attribute.id) > -1;
if (isCheck){
this.checkedAttributeList.push(attribute);
}else {
// 删除
this.checkedAttributeList.splice(
this.checkedAttributeList.indexOf(attribute), 1
)
}
},
/**
* 删除选中值
* @param index
*/
removeChecked(index){
console.log(index)
this.checkedAttributeList.splice(index, 1);
this.form.attributeIdList.splice(index, 1);
},
/**
* 查询属性
*/
queryAttribute(){
listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows;
this.total = response.data.total;
});
},
/** 查询属性组列表 */
getList() {
@ -355,7 +249,6 @@ export default {
this.reset();
this.open = true;
this.title = "添加属性组";
this.queryAttribute();
},
/** 修改按钮操作 */
handleUpdate(row) {
@ -366,7 +259,6 @@ export default {
this.open = true;
this.title = "修改属性组";
});
this.queryAttribute();
},
/** 提交按钮 */
submitForm() {

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

@ -106,24 +106,60 @@
<!-- 添加或修改品类信息对话框 -->
<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"/>
</el-tab-pane>
<el-tab-pane label="商品属性组" name="attributeGroup">
<CheckAttributeGroup v-model="form.attributeGroupIdList"/>
</el-tab-pane>
<el-tab-pane label="商品品牌" name="brand">
<CheckBrand v-model="form.brandIdList"/>
</el-tab-pane>
</el-tabs>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -140,6 +176,7 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Category",
dicts: ['sys_yes_no'],
components: {
Treeselect
},