前段属性组的添加,列表,修改
parent
e23e466eb3
commit
d0108ad2ef
|
|
@ -0,0 +1,40 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
// 查询属性列表
|
||||||
|
export function list(name) {
|
||||||
|
return request({
|
||||||
|
url: '/product/attributeInfo/list?name='+name,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//新增属性
|
||||||
|
export function insertAttribute(attribute) {
|
||||||
|
return request({
|
||||||
|
url: '/product/attributeInfo/insertAttribute',
|
||||||
|
method: 'post',
|
||||||
|
data: attribute
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//删除属性
|
||||||
|
export function deleteById(attributeInfoId) {
|
||||||
|
return request({
|
||||||
|
url: '/product/attributeInfo/deleteAttributeById?attributeInfoId='+attributeInfoId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取属性组列表
|
||||||
|
export function getAttributeGroupList(attributeName) {
|
||||||
|
return request({
|
||||||
|
url: '/product/attributeGroup/getAttributeGroupList?attributeName='+attributeName,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function insertAttributeGroup(attributeGroupReq) {
|
||||||
|
return request({
|
||||||
|
url: '/product/attributeGroup/insertAttributeGroup',
|
||||||
|
method: 'post',
|
||||||
|
data: attributeGroupReq
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,257 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-table
|
||||||
|
:data="attributeGroupList"
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
label="属性组编号"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="margin-left: 10px" >{{ scope.row.id }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="属性组名称"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="margin-left: 10px" >{{ scope.row.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="下辖属性"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col v-for="attribute in scope.row.attributeInfos">
|
||||||
|
<el-tag
|
||||||
|
:key="attribute.id"
|
||||||
|
type="">
|
||||||
|
{{attribute.name}}
|
||||||
|
</el-tag>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="备注"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="margin-left: 10px" >{{ scope.row.remark }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="创建时间"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px" value-format="yyyy-MM-dd HH:dd:ss">{{ scope.row.createTime }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="创建人"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="margin-left: 10px" >{{ scope.row.createBy }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="queryAttributeList">新增</el-button>
|
||||||
|
<el-dialog title="收货地址" :visible.sync="isOpenAddAttributeGroup">
|
||||||
|
<el-form :model="attributeGroupReq">
|
||||||
|
<el-form-item label="属性组名称" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="attributeGroupReq.name" autocomplete="off"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="attributeGroupReq.remark" autocomplete="off"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="已选属性" :label-width="formLabelWidth">
|
||||||
|
<el-tag
|
||||||
|
v-for="attribute in attributeGroupReq.selectAttributeList"
|
||||||
|
v-model="attributeGroupReq.selectAttributeList"
|
||||||
|
:key="attribute.id"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(attribute)">
|
||||||
|
{{attribute.name}}
|
||||||
|
</el-tag>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<br>
|
||||||
|
<span>可选属性</span>
|
||||||
|
<div>
|
||||||
|
<el-checkbox @change="updateAttribute(attribute)"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
v-for="attribute in attributeList"
|
||||||
|
:key="attribute.id"
|
||||||
|
v-model="attribute.checked"
|
||||||
|
:label="attribute.name" border></el-checkbox>
|
||||||
|
</div>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="isOpenAddAttributeGroup = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="insertAttributeGroup">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||||
|
//例如：import 《组件名称》 from '《组件路径》,
|
||||||
|
import {getAttributeGroupList, list, insertAttributeGroup} from "@/api/product/attribute";
|
||||||
|
import attribute from "@/views/product/attribute/index.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "attributeGroup",
|
||||||
|
//import引入的组件需要注入到对象中才能使用"
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
|
||||||
|
//这里存放数据"
|
||||||
|
return {
|
||||||
|
attributeName:"",
|
||||||
|
attributeGroupList: [],
|
||||||
|
isOpenAddAttributeGroup: false,
|
||||||
|
formLabelWidth: "120px",
|
||||||
|
//新增请求对象
|
||||||
|
attributeGroupReq: {
|
||||||
|
//已选中属性
|
||||||
|
selectAttributeList: []
|
||||||
|
},
|
||||||
|
attributeQueryName: "",
|
||||||
|
//未选中
|
||||||
|
attributeList: [],
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化",
|
||||||
|
watch: {},
|
||||||
|
//方法集合",
|
||||||
|
methods: {
|
||||||
|
//修改
|
||||||
|
handleDelete(index, row) {
|
||||||
|
this.isOpenAddAttributeGroup = true
|
||||||
|
console.log(index, row);
|
||||||
|
this.attributeGroupReq = row
|
||||||
|
this.attributeGroupReq.selectAttributeList = row.attributeInfos
|
||||||
|
list(this.attributeQueryName).then(
|
||||||
|
res => {
|
||||||
|
this.attributeList = res.data
|
||||||
|
this.attributeList.forEach(
|
||||||
|
attribute => {
|
||||||
|
this.attributeGroupReq.selectAttributeList.forEach(
|
||||||
|
attributeReq =>{
|
||||||
|
if (attribute.id == attributeReq.id){
|
||||||
|
console.log("六六六")
|
||||||
|
attribute.checked = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
},
|
||||||
|
//重置属性
|
||||||
|
reset() {
|
||||||
|
this.attributeGroupReq = {
|
||||||
|
selectAttributeList: []
|
||||||
|
},
|
||||||
|
this.attributeList =[]
|
||||||
|
},
|
||||||
|
//删除选中属性
|
||||||
|
handleClose(attribute){
|
||||||
|
console.log(this.attributeGroupList)
|
||||||
|
debugger
|
||||||
|
this.attributeList.forEach(attr => {
|
||||||
|
|
||||||
|
if (attr.id == attribute.id) {
|
||||||
|
attr.checked = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.attributeGroupReq.selectAttributeList = this.attributeGroupReq.selectAttributeList.filter(item => item!=attribute);
|
||||||
|
},
|
||||||
|
//更新选中属性
|
||||||
|
updateAttribute(attribute) {
|
||||||
|
if (this.attributeGroupReq.selectAttributeList.includes(attribute)){
|
||||||
|
this.attributeGroupReq.selectAttributeList = this.attributeGroupReq.selectAttributeList.filter(item => item !== attribute)
|
||||||
|
}else{
|
||||||
|
this.attributeGroupReq.selectAttributeList.push(attribute)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//得到属性组列表
|
||||||
|
getAttributeGroupList(){
|
||||||
|
getAttributeGroupList(this.attributeName).then(
|
||||||
|
res => {
|
||||||
|
console.log(res);
|
||||||
|
this.attributeGroupList = res.data
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
handleEdit(index, row) {
|
||||||
|
console.log(index, row);
|
||||||
|
},
|
||||||
|
queryAttributeList(){
|
||||||
|
this.isOpenAddAttributeGroup = true
|
||||||
|
list(this.attributeQueryName).then(
|
||||||
|
res => {
|
||||||
|
this.attributeList = res.data
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
insertAttributeGroup() {
|
||||||
|
console.log(this.attributeGroupReq)
|
||||||
|
insertAttributeGroup(this.attributeGroupReq).then(
|
||||||
|
res => {
|
||||||
|
this.reset();
|
||||||
|
this.getAttributeGroupList()
|
||||||
|
this.isOpenAddAttributeGroup = false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||||
|
created() {
|
||||||
|
this.getAttributeGroupList()
|
||||||
|
},
|
||||||
|
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
}, //生命周期 - 创建之前",
|
||||||
|
beforeMount() {
|
||||||
|
}, //生命周期 - 挂载之前",
|
||||||
|
beforeUpdate() {
|
||||||
|
}, //生命周期 - 更新之前",
|
||||||
|
updated() {
|
||||||
|
}, //生命周期 - 更新之后",
|
||||||
|
beforeDestroy() {
|
||||||
|
}, //生命周期 - 销毁之前",
|
||||||
|
destroyed() {
|
||||||
|
}, //生命周期 - 销毁完成",
|
||||||
|
activated() {
|
||||||
|
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-table
|
||||||
|
:data="attributeList"
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
label="创建日期"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.createTime }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="创建人"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.createBy }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="属性编号"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.id }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="属性名称"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="属性描述"
|
||||||
|
width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<i class="el-icon-time"></i>
|
||||||
|
<span style="margin-left: 10px"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss">{{ scope.row.remark }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="操作">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
@click="handleEdit(scope.$index, scope.row)" v-hasPermi="['product:attribute:update']">修改</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete(scope.$index, scope.row)" v-hasPermi="['product:attribute:delete']">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-button size="mini" type="primary" @click="openAdd = true" v-hasPermi="['product:attribute:add']">新增</el-button>
|
||||||
|
|
||||||
|
<el-dialog title="属性信息" :visible.sync="openAdd">
|
||||||
|
<el-form :model="addAttribute">
|
||||||
|
<el-form-item label="属性名称" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="addAttribute.name" autocomplete="off"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="属性备注" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="addAttribute.remark" autocomplete="off"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="cancelInsert">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="insertAttribute">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||||
|
//例如：import 《组件名称》 from '《组件路径》,
|
||||||
|
import {deleteById, insertAttribute, list} from "@/api/product/attribute";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'attribute',
|
||||||
|
//import引入的组件需要注入到对象中才能使用"
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
//这里存放数据"
|
||||||
|
|
||||||
|
return {
|
||||||
|
formLabelWidth: '120px',
|
||||||
|
//获取属性列表的请求参数
|
||||||
|
attributeName: "",
|
||||||
|
//得到的属性列表
|
||||||
|
attributeList: [],
|
||||||
|
//新增属性需要的参数
|
||||||
|
addAttribute: {
|
||||||
|
name: '',
|
||||||
|
remark: ''
|
||||||
|
},
|
||||||
|
//是否显示新增谈话框
|
||||||
|
openAdd: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//计算属性 类似于data概念",
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化",
|
||||||
|
watch: {},
|
||||||
|
//方法集合",
|
||||||
|
methods: {
|
||||||
|
//修改方法
|
||||||
|
handleEdit(index, row) {
|
||||||
|
console.log(index, row);
|
||||||
|
this.addAttribute["name"] = row.name
|
||||||
|
this.addAttribute["remark"] = row.remark
|
||||||
|
this.addAttribute["id"] = row.id
|
||||||
|
this.openAdd = true
|
||||||
|
|
||||||
|
},
|
||||||
|
//删除方法
|
||||||
|
handleDelete(index, row) {
|
||||||
|
deleteById(row.id).then(
|
||||||
|
res=>{
|
||||||
|
console.log(res)
|
||||||
|
this.getAttributeList()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
console.log(index, row);
|
||||||
|
},
|
||||||
|
//获取列表方法
|
||||||
|
getAttributeList(){
|
||||||
|
list(this.attributeName).then(
|
||||||
|
res => {
|
||||||
|
this.attributeList = res.data
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
//新增方法
|
||||||
|
insertAttribute(){
|
||||||
|
insertAttribute(this.addAttribute).then(
|
||||||
|
this.getAttributeList
|
||||||
|
)
|
||||||
|
this.addAttribute["name"] = ""
|
||||||
|
this.addAttribute["remark"] = ""
|
||||||
|
this.addAttribute["id"] = ""
|
||||||
|
this.openAdd = false
|
||||||
|
|
||||||
|
},
|
||||||
|
//新增取消
|
||||||
|
cancelInsert(){
|
||||||
|
this.openAdd = false
|
||||||
|
this.addAttribute = {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||||
|
created() {
|
||||||
|
this.getAttributeList()
|
||||||
|
},
|
||||||
|
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
}, //生命周期 - 创建之前",
|
||||||
|
beforeMount() {
|
||||||
|
}, //生命周期 - 挂载之前",
|
||||||
|
beforeUpdate() {
|
||||||
|
}, //生命周期 - 更新之前",
|
||||||
|
updated() {
|
||||||
|
}, //生命周期 - 更新之后",
|
||||||
|
beforeDestroy() {
|
||||||
|
}, //生命周期 - 销毁之前",
|
||||||
|
destroyed() {
|
||||||
|
}, //生命周期 - 销毁完成",
|
||||||
|
activated() {
|
||||||
|
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue