商品属性组初始化

dev
csy 2024-03-01 21:26:59 +08:00
parent 3562f0ece9
commit e75ffd7423
1 changed files with 117 additions and 17 deletions

View File

@ -110,23 +110,91 @@
/>
<!-- 添加或修改属性组对话框 -->
<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="status">
<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-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="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_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>
<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 attributeList">
<el-tag v-if="checkedList.indexOf(attribute.id) > -1"
style="margin: 0 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="checkedList"
:key="attribute.id"
:value="attribute.id"
:label="attribute.id"
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,42 @@ export default {
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
},
tags: [
{ name: '标签一'},
{ name: '标签二'}
],
checkedList:[],
attributeQuery:{
pageNum: 1,
pageSize: 10,
code: null,
name: null
},
attributeTotal: 0,
attributeList: []
};
},
created() {
this.getList();
},
methods: {
removeChecked(index){
console.log(index)
this.checkedList.splice(index-1,1)
},
/**
* 查询属性
*/
queryAttribute(){
listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows;
this.total = response.data.total;
});
},
/** 查询属性组列表 */
getList() {
this.loading = true;
@ -235,6 +333,7 @@ export default {
this.reset();
this.open = true;
this.title = "添加属性组";
this.queryAttribute()
},
/** 修改按钮操作 */
handleUpdate(row) {
@ -245,6 +344,7 @@ export default {
this.open = true;
this.title = "修改属性组";
});
this.queryAttribute();
},
/** 提交按钮 */
submitForm() {