商品属性组添加

dev
DongZeLiang 2024-02-28 15:53:47 +08:00
parent 9439538463
commit be750e8f53
13 changed files with 151 additions and 33 deletions

View File

@ -95,7 +95,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="code">
<el-input v-model="form.code" placeholder="请输入属性编码" />

View File

@ -110,11 +110,15 @@
/>
<!-- 添加或修改属性组对话框 -->
<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-col>
<el-col :span="12">
<el-form-item label="状态" prop="states">
<el-radio-group v-model="form.states">
<el-radio
@ -124,9 +128,73 @@
>{{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>
<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>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
@ -138,6 +206,7 @@
<script>
import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
import {listAttribute} from "@/api/product/attribute";
export default {
name: "AttributeGroup",
@ -179,13 +248,60 @@ 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() {
this.loading = true;
@ -206,10 +322,10 @@ export default {
id: null,
name: null,
states: null,
createBy: null,
createTime: null,
remark: null
remark: null,
attributeIdList: [],
};
this.checkedAttributeList = []
this.resetForm("form");
},
/** 搜索按钮操作 */
@ -233,6 +349,7 @@ export default {
this.reset();
this.open = true;
this.title = "添加属性组";
this.queryAttribute();
},
/** 修改按钮操作 */
handleUpdate(row) {
@ -243,6 +360,7 @@ export default {
this.open = true;
this.title = "修改属性组";
});
this.queryAttribute();
},
/** 提交按钮 */
submitForm() {

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="请输入品牌名称" />

View File

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

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" />

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

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

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="请输入参数名称"/>

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"/>

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="请输入字典名称"/>

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="请输入岗位名称"/>

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"/>

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"