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

商品属性组添加

day9
xiaohuang 2024-03-25 17:06:38 +08:00
parent d6c70f139a
commit 6278791e55
2 changed files with 158 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,14 +73,15 @@
<el-table v-loading="loading" :data="attributeGroupList" @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-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="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"/>
@ -118,12 +119,14 @@
<!-- 添加或修改属性组对话框 -->
<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">
@ -136,13 +139,96 @@
</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-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-tag>标签一</el-tag>-->
<!-- <el-tag type="success">标签二</el-tag>-->
<!-- <el-tag type="info">标签三</el-tag>-->
<!-- <el-tag type="warning">标签四</el-tag>-->
<!-- <el-tag type="danger">标签五</el-tag>-->
<!-- </el-row>-->
<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>
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
<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>
<el-button @click="cancel">取 消</el-button>
@ -153,6 +239,7 @@
<script>
import { listAttributeGroup, getAttributeGroup, delAttributeGroup, addAttributeGroup, updateAttributeGroup } from "@/api/product/attributeGroup";
import {listAttribute} from "@/api/product/attribute";
export default {
name: "AttributeGroup",
@ -194,7 +281,24 @@ 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() {
@ -202,6 +306,46 @@ export default {
},
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;
this.loading = false;
});
},
/** 查询属性组列表 */
getList() {
this.loading = true;
@ -225,7 +369,7 @@ export default {
remark: null,
attributeIdList: [],
};
this.checkedAttributeList = []
this.checkedAttributeList = [];
this.resetForm("form");
},
/** 搜索按钮操作 */
@ -249,6 +393,7 @@ export default {
this.reset();
this.open = true;
this.title = "添加属性组";
this.queryAttribute()
},
/** 修改按钮操作 */
handleUpdate(row) {
@ -259,6 +404,7 @@ export default {
this.open = true;
this.title = "修改属性组";
});
this.queryAttribute();
},
/** 提交按钮 */
submitForm() {

4
src/views/system/ruanjian/index.vue
View File

@ -120,7 +120,7 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
@ -130,7 +130,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="${comment}" prop="name">
<el-input v-model="form.name" placeholder="请输入${comment}" />