<template>
|
<div>
|
<el-row>
|
<el-col :span="5">
|
<category-tree
|
ref="tree"
|
@hand-show-add-category="handShowAddCategory"
|
@hand-tree-item="handTreeItem"
|
></category-tree>
|
</el-col>
|
<el-col
|
:span="19"
|
class="tabs cardCurrentStyle1"
|
>
|
<div :style="'min-height:' + (height-233) +'px;'" class="right-con">
|
<el-tabs
|
type="card"
|
v-model="activeName"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane
|
label="分类品牌管理"
|
name="first"
|
>
|
<addItem-prop
|
ref="addItemProp1"
|
:formData="listQuery"
|
:catId="catId"
|
:tableData="brandList"
|
:total="brandListTotal"
|
@hand-refresh-list="handRefreshList"
|
v-loading='brandLoading'
|
style="margin-top:20px;"
|
:showBtn="showBtn"
|
>
|
<template slot="columns">
|
<el-table-column
|
label="品牌名称"
|
prop="brandName"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
label="品牌描述"
|
prop="brandDesc"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column label="操作" :width="`${$store.getters.colSize+1}px`">
|
<template slot-scope="scope">
|
<wly-btn
|
:type="'danger'"
|
@click="removeItem(scope.row,scope.$index,1)"
|
>删除</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</addItem-prop>
|
</el-tab-pane>
|
<el-tab-pane
|
label="分类属性管理"
|
name="second"
|
>
|
<addItem-prop
|
ref="addItemProp2"
|
:formData="listQuery"
|
:catId="catId"
|
:tableData="propList"
|
:total="propListTotal"
|
@hand-refresh-list="handRefreshList"
|
v-loading='propLoading'
|
style="margin-top:20px;"
|
>
|
<template slot="columns">
|
<el-table-column
|
label="属性名称"
|
prop="propName"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
label="是否必须"
|
prop="propRequired"
|
>
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.propRequired ? 'warning':'info'">{{scope.row.propRequired ? '是' : '否'}}</el-tag>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column
|
label="筛选属性"
|
prop="propFilter"
|
>
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.propFilter ? 'warning':'info'">{{scope.row.propFilter ? '是' : '否'}}</el-tag>
|
</template>
|
</el-table-column> -->
|
<el-table-column
|
label="单品属性"
|
prop="propSku"
|
>
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.propSku ? 'warning':'info'">{{scope.row.propSku ? '是' : '否'}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="展现形式"
|
prop="propShow"
|
>
|
<template slot-scope="scope">
|
{{scope.row.propShow === '0'? '文本': scope.row.propShow === '1' ? '下拉': '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
:width="`${(2 * $store.getters.colSize)+60}px`"
|
>
|
<template slot-scope="scope">
|
<wly-btn
|
:type="'primary'"
|
@click="editItem(scope.row ,scope.$index)"
|
>编辑</wly-btn>
|
<wly-btn
|
:type="'warning'"
|
@click="propItem(scope.row,scope.$index)"
|
>属性值管理</wly-btn>
|
<!-- <wly-btn
|
:type="'danger'"
|
@click="removeItem(scope.row,scope.$index,2)"
|
>删除</wly-btn> -->
|
</template>
|
</el-table-column>
|
</template>
|
</addItem-prop>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-col>
|
</el-row>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
title="属性值管理"
|
:close-on-click-modal="false"
|
:modal-append-to-body="false"
|
width="40%"
|
v-if="dialogVisible"
|
>
|
<prop-mgt
|
:dialogVisible.sync="dialogVisible"
|
:propForm="propForm"
|
></prop-mgt>
|
</el-dialog>
|
<add-category
|
:show.sync='show'
|
:title="title"
|
:row="row"
|
@hand-refresh-tree-data="handRefreshTreeData"
|
:catId="catId"
|
></add-category>
|
<edit-prop
|
:show.sync='propShow'
|
:row="editPropForm"
|
></edit-prop>
|
|
</div>
|
</template>
|
<script>
|
import { mapGetters } from 'vuex'
|
import categoryTree from '@/views/productCategory/components/categoryTree.vue'
|
import addItemProp from '@/views/productCategory/components/addItemProp.vue'
|
import editProp from '@/views/productCategory/components/editProp.vue'
|
import addCategory from '@/views/productCategory/info.vue'
|
import propMgt from '@/views/productCategory/components/propMgt.vue'
|
import { objectCopy } from '@/utils/objectCopyHelper'
|
import productCategoryApi from '@/api/productmanagement/productCategory'
|
import productPropMetaApi from '@/api/productmanagement/productPropMeta'
|
|
export default {
|
components: { categoryTree, addItemProp, addCategory, editProp, propMgt },
|
data () {
|
return {
|
activeName: 'first',
|
listQuery: {
|
buttonText: '添加品牌',
|
tag: 1
|
},
|
height: 300,
|
show: false,
|
title: null,
|
row: {},
|
catId: null,
|
brandList: [],
|
propList: [],
|
brandListTotal: 0,
|
propListTotal: 0,
|
brandLoading: false,
|
propLoading: false,
|
propShow: false,
|
editPropForm: {},
|
dialogVisible: false,
|
propForm: {},
|
total: 0,
|
showBtn: true
|
}
|
},
|
computed: {
|
...mapGetters([
|
'mainContainerHeight'
|
])
|
},
|
watch: {
|
mainContainerHeight (newHeight, oldHeight) {
|
this.height = newHeight
|
}
|
},
|
created () {
|
this.$nextTick(function () {
|
this.height = window.innerHeight
|
})
|
},
|
methods: {
|
/**
|
* 编辑属性
|
*/
|
editItem (row, index) {
|
this.propShow = true
|
this.editPropForm = objectCopy(row)
|
},
|
/**
|
* 属性值管理
|
*/
|
propItem (row, index) {
|
productPropMetaApi.getInfo({ propId: row.propId }).then(res => {
|
if (res.data) {
|
this.dialogVisible = true
|
this.propForm.propId = res.data.propId
|
this.propForm.propName = res.data.propName
|
this.propForm.propValueCheckExplain = res.data.propValueCheckExplain
|
this.propForm.propValueType = res.data.propValueType
|
this.propForm.propShow = row.propShow
|
}
|
})
|
},
|
/**
|
* 刷新列表
|
*/
|
handRefreshList (data, tag) {
|
this.listQuery.pageNum = data.pageNum
|
this.listQuery.pageSize = data.pageSize
|
if (tag === 1) {
|
this.getCategoryBrandList()
|
} else {
|
this.getCategoryPropList()
|
}
|
},
|
/**
|
* 获取分类品牌列表
|
*/
|
getCategoryBrandList () {
|
this.brandLoading = true
|
productCategoryApi
|
.getCategoryBrandList({ categoryId: this.catId })
|
.then(res => {
|
if (res.data) {
|
this.brandList = res.data
|
this.brandListTotal = this.brandList.length
|
this.brandLoading = false
|
}
|
})
|
.catch(() => {
|
this.brandLoading = false
|
})
|
},
|
/**
|
* 获取分类属性列表
|
*/
|
getCategoryPropList () {
|
this.propLoading = true
|
this.listQuery.catId = this.catId
|
productCategoryApi
|
.getCategoryPropList(this.listQuery)
|
.then(res => {
|
if (res.data) {
|
this.propList = res.data.list
|
this.propListTotal = res.data.total
|
this.propLoading = false
|
}
|
})
|
.catch(() => {
|
this.propLoading = false
|
})
|
},
|
/**
|
* 刷新列表
|
*/
|
fn () {
|
this.getCategoryBrandList()
|
this.getCategoryPropList()
|
},
|
/**
|
* 选择某个树节点触发
|
*/
|
handTreeItem (row) {
|
this.initData()
|
if (row) {
|
this.catId = row.catId
|
this.fn()
|
}
|
},
|
/**
|
* 初始化数据
|
*/
|
initData () {
|
this.brandList = []
|
this.propList = []
|
this.brandListTotal = 0
|
this.propListTotal = 0
|
this.$refs.addItemProp1.resetTable()
|
this.$refs.addItemProp2.resetTable()
|
},
|
/**
|
*刷新分类树
|
*/
|
handRefreshTreeData () {
|
this.$refs.tree.queryList()
|
},
|
/**
|
* 打开新增编辑弹框
|
*/
|
handShowAddCategory (data, tag) {
|
if (tag === 1) {
|
if (data) {
|
this.title = '新增子分类'
|
this.row.parentCatId = data.catId
|
} else {
|
this.title = '新增分类'
|
this.row = {}
|
}
|
} else {
|
this.title = '编辑分类'
|
this.row = objectCopy(data)
|
}
|
this.show = true
|
},
|
/**
|
* 删除表格数据
|
*/
|
removeItem (row, index, tag) {
|
this.$confirm('确认删除这条数据吗？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
if (tag === 1) {
|
this.deleteCategoryBrandItem(row) // 删除分类品牌
|
} else {
|
this.deleteCategoryPropItem(row) // 删除分类属性
|
}
|
})
|
.catch(() => {})
|
},
|
/**
|
* 删除分类品牌
|
*/
|
deleteCategoryBrandItem (row) {
|
productCategoryApi
|
.deleteCategoryBrandItem({ productId: row.productId })
|
.then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$refs.addItemProp1.handleConditionChange()
|
}
|
})
|
},
|
/**
|
* 删除分类属性
|
*/
|
deleteCategoryPropItem (row) {
|
productCategoryApi
|
.deleteCategoryPropItem({ prodPropId: row.prodPropId })
|
.then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.$refs.addItemProp2.handleConditionChange()
|
}
|
})
|
},
|
/**
|
*标签页切换时修改按钮文字
|
*/
|
handleClick (tab, event) {
|
if (tab.index === '0') {
|
this.listQuery.buttonText = '添加品牌'
|
this.listQuery.tag = 1
|
this.showBtn = true
|
} else {
|
this.listQuery.buttonText = '添加属性'
|
this.listQuery.tag = 2
|
this.showBtn = false
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.tabs {
|
padding-left: 20px;
|
border-radius: 4px;
|
}
|
.right-con{
|
background: #fff;
|
padding:20px;
|
border-radius: 4px;
|
}
|
</style>
|
