sunshine7058
/
ruoyi-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

属性、属性组、品牌选择主键

dev-ddd
sunshine7058 2024-03-06 19:45:13 +08:00
parent 9a52f80743
commit f4f4824caf
18 changed files with 543 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -0,0 +1,131 @@
<template>
<el-row>
<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 25px"
:key="attribute.name"
closable @close="removeChecked(index)">
{{attribute.name}}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>未选属性</span>
</div>
<el-row>
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
<el-form-item label="属性编码">
<el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
</el-form-item>
<el-form-item label="属性名称">
<el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryAttribute()">查询</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList" >
<el-checkbox v-model="attributeIdList"
:key="attribute.id"
:label="attribute.id"
:value="attribute.id"
@change="checkedAttribute(attribute)"
border>{{attribute.name}}</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="attributeTotal>0"
:limit.sync="attributeQuery.pageSize"
:page.sync="attributeQuery.pageNum"
:total="attributeTotal"
@pagination="queryAttribute"
/>
</el-card>
</el-row>
</template>
<script>
import {listAttribute} from "@/api/product/attribute";
import {listAttributeGroup} from "@/api/product/attributeGroup";
export default {
props:{
value:{
type:Array,
default:[]
}
},
name: 'Index',
data() {
return {
attributeIdList:[],
attributeQuery:{
pageNum: 1,
pageSize: 10,
code: null,
name: null
},
attributeTotal:0,
attributeList:[],
checkedAttributeList:[],
}
},
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)
},
/**删除标签方法 */
removeChecked(index){
this.checkedAttributeList.splice(index,1)
this.attributeIdList.splice(index,1)
},
/** 查询属性列表 */
queryAttribute(){
listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows;
this.attributeTotal = response.data.total;
this.loading = false;
});
},
/** 查询属性组列表 */
getList() {
this.loading = true;
listAttributeGroup(this.queryParams).then(response => {
this.attributeGroupList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
}
}
</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-row>
<el-col :span="2" v-for="(attributeGroup,index) in checkedAttributeGroupList">
<el-tag
style="margin: 5px 25px"
:key="attributeGroup.name"
closable @close="removeChecked(index)">
{{attributeGroup.name}}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>未选属性组</span>
</div>
<el-row>
<el-form :inline="true" :model="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"
:label="attributeGroup.id"
:value="attributeGroup.id"
@change="checkedAttributeGroup(attributeGroup)"
border>{{attributeGroup.name}}</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="attributeGroupTotal>0"
:limit.sync="attributeGroupQuery.pageSize"
:page.sync="attributeGroupQuery.pageNum"
:total="attributeGroupTotal"
@pagination="queryAttributeGroup"
/>
</el-card>
</el-row>
</template>
<script>
import {listAttributeGroup} from "@/api/product/attributeGroup";
export default {
props:{
value:{
type:Array,
default:[]
}
},
name: 'Index',
data() {
return {
attributeGroupIdList:[],
attributeGroupQuery:{
pageNum: 1,
pageSize: 10,
name: null
},
attributeGroupTotal:0,
attributeGroupList:[],
checkedAttributeGroupList:[],
}
},
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)
},
/**删除标签方法 */
removeChecked(index){
this.checkedAttributeGroupList.splice(index,1)
this.attributeGroupIdList.splice(index,1)
},
/** 查询属性列表 */
queryAttributeGroup(){
listAttributeGroup(this.attributeGroupQuery).then(response => {
this.attributeGroupList = response.data.rows;
this.attributeGroupTotal = response.data.total;
this.loading = false;
});
},
/** 查询属性组列表 */
getList() {
this.loading = true;
listAttributeGroupGroup(this.queryParams).then(response => {
this.attributeGroupGroupList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
}
}
</script>
<style scoped>
</style>

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

@ -0,0 +1,127 @@
<template>
<el-row>
<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 25px"
:key="brand.nam"
closable @close="removeChecked(index)">
{{brand.nam}}
</el-tag>
</el-col>
</el-row>
</el-card>
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>未选品牌</span>
</div>
<el-row>
<el-form :inline="true" :model="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"
:label="brand.id"
:value="brand.id"
@change="checkedBrand(brand)"
border>{{brand.nam}}</el-checkbox>
</el-col>
</el-row>
<pagination
v-show="brandTotal>0"
:limit.sync="brandQuery.pageSize"
:page.sync="brandQuery.pageNum"
:total="brandTotal"
@pagination="queryBrand"
/>
</el-card>
</el-row>
</template>
<script>
import {listBrand} from "@/api/product/brand";
export default {
props:{
value:{
type:Array,
default:[]
}
},
name: 'Index',
data() {
return {
brandIdList:[],
brandQuery:{
pageNum: 1,
pageSize: 10,
name: null
},
brandTotal:0,
brandList:[],
checkedBrandList:[],
}
},
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)
},
/**删除标签方法 */
removeChecked(index){
this.checkedBrandList.splice(index,1)
this.brandIdList.splice(index,1)
},
/** 查询品牌列表 */
queryBrand(){
listBrand(this.brandQuery).then(response => {
this.brandList = response.data.rows;
this.brandTotal = response.data.total;
this.loading = false;
});
},
/** 查询品牌组列表 */
getList() {
this.loading = true;
listBrandGroup(this.queryParams).then(response => {
this.brandGroupList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
}
}
</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";
//属性组选择
import CheckAttributeGroup from "@/components/CheckAttributeGroup";
//品牌选择
import CheckBrand from "@/components/CheckBrand";
// 全局方法挂载
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)

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

@ -9,14 +9,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="分组" prop="groupId">
<el-input
v-model="queryParams.groupId"
placeholder="请输入分组"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -71,9 +63,8 @@
<el-table v-loading="loading" :data="attributeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="属性编号" align="center" prop="id" />
<el-table-column label="属性编码" align="center" prop="code" />
<el-table-column label="属性名" align="center" prop="name" />
<el-table-column label="分组" align="center" prop="groupId" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@ -104,14 +95,14 @@
/>
<!-- 添加或修改商品属性对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="属性编码" prop="code">
<el-input v-model="form.code" placeholder="请输入属性编码" />
</el-form-item>
<el-form-item label="属性名" prop="name">
<el-input v-model="form.name" placeholder="请输入属性名" />
</el-form-item>
<el-form-item label="分组" prop="groupId">
<el-input v-model="form.groupId" placeholder="请输入分组" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
@ -153,25 +144,20 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
groupId: null,
code: null,
name: null
},
// 表单参数
form: {},
// 表单校验
rules: {
code: [
{ required: true, message: "属性编码不能为空", trigger: "blur" }
],
name: [
{ required: true, message: "属性名不能为空", trigger: "blur" }
],
groupId: [
{ required: true, message: "分组不能为空", trigger: "blur" }
],
createBy: [
{ required: true, message: "创建人不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
};
},
@ -197,8 +183,8 @@ export default {
reset() {
this.form = {
id: null,
code: null,
name: null,
groupId: null,
remark: null,
createBy: null,
createTime: null,

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

@ -75,6 +75,14 @@
<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"/>
@ -108,13 +116,16 @@
: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-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-col>
<el-col :span="12">
<el-form-item label="状态" prop="states">
<el-radio-group v-model="form.states">
<el-radio
@ -124,9 +135,14 @@
>{{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>
@ -138,10 +154,15 @@
<script>
import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
import { listAttribute } from "@/api/product/attribute";
import CheckAttribute from "@/components/CheckAttribute";
export default {
name: "AttributeGroup",
dicts: ['sys_yes_no'],
components: {
CheckAttribute
},
data() {
return {
// 遮罩层
@ -186,6 +207,35 @@ export default {
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)
}
},
/**删除标签方法 */
removeChecked(index){
this.checkedAttributeList.splice(index,1)
this.form.attributeIdList.splice(index,1)
},
/** 查询属性列表 */
queryAttribute(){
listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows;
this.attributeTotal = response.data.total;
this.loading = false;
});
},
/** 查询属性组列表 */
getList() {
this.loading = true;
@ -210,8 +260,10 @@ export default {
createBy: null,
createTime: null,
updateBy: null,
attributeIdList:[],
updateTime: null
};
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="请输入品牌名称" />

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

@ -106,17 +106,22 @@
</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-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
@ -126,12 +131,39 @@
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="图片" prop="image" >
<image-upload v-model="form.image" :limit="1" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="介绍">
<editor v-model="form.introduction" :min-height="192"/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<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>

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="productId">
<el-input v-model="form.productId" placeholder="请输入商品id" />

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

@ -142,7 +142,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="请输入商品名称" />

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

@ -96,7 +96,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="请输入规格名称" />

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"