<template>
|
<div class="product-tree-container">
|
<!-- <el-input
|
placeholder="输入名称进行过滤"
|
style="width: 60%"
|
v-model="filterText"
|
size="small"
|
clearable
|
></el-input>-->
|
<el-button v-if="isShow" type="primary" size="mini" @click="add()"
|
style="margin: 10px 0 0 7px;padding: 8px 17px !important;">新增型号
|
</el-button>
|
<el-button v-if="isShow" type="primary" size="mini" @click="updateXh()"
|
style="margin: 10px 0 0 7px;padding: 8px 17px !important;">修改型号
|
</el-button>
|
<el-button v-if="isShow" type="primary" size="mini" @click="deleteXh()"
|
style="margin: 10px 0 0 7px;padding: 8px 17px !important;">删除型号
|
</el-button>
|
<el-divider></el-divider>
|
<el-tree
|
style="height: 90%;overflow: auto"
|
class="filter-tree"
|
:data="productList"
|
:props="defaultProps"
|
default-expand-all
|
node-key="id"
|
:current-node-key="defaultId"
|
:expand-on-click-node="false"
|
:highlight-current="true"
|
@node-click="handleNodeClick"
|
:filter-node-method="filterNode"
|
ref="tree"
|
></el-tree>
|
<!-- 弹窗, 新增 / 修改 -->
|
<add-or-update @refreshDataList="getProductList()" ref="AddOrUpdate"/>
|
</div>
|
</template>
|
<script>
|
import AddOrUpdate from './XhProductModel-AddOrUpdate'
|
|
export default {
|
name: 'ProductModelTree',
|
props: {
|
showXdy: {
|
type: Boolean,
|
default: true
|
},
|
isShow: {
|
type: Boolean,
|
default: true
|
},
|
basic: {
|
type: Number,
|
default: 1
|
},
|
productId: {
|
type: Number,
|
default: null
|
},
|
},
|
|
data() {
|
return {
|
filterText: '',
|
productList: [],
|
defaultId: '',
|
id: '',
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
}
|
}
|
}
|
,
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
}
|
,
|
components: {
|
AddOrUpdate
|
}
|
,
|
/* mounted() {
|
this.getProductList()
|
},*/
|
methods: {
|
// 获取系统列表
|
async getProductList() {
|
let params = {
|
showXdy: this.showXdy,
|
ztShow: this.basic,
|
productId: this.productId
|
}
|
let res = await this.$http.get('/basicInfo/XhProductModel/tree', {params: params})
|
this.productList = res.data
|
if (this.basic === 3) {
|
if (this.productList && this.productList[0].children) {
|
this.defaultId = this.productList[0].children[0].id
|
this.$nextTick(() => {
|
this.$refs.tree.setCurrentKey(this.defaultId); //一定要加这个选中了否则样式没有出来
|
});
|
this.$emit('on-default', this.defaultId)
|
}
|
} else {
|
if (this.productList[0].id) {
|
this.defaultId = this.productList[0].id
|
this.$nextTick(() => {
|
this.$refs.tree.setCurrentKey(this.defaultId); //一定要加这个选中了否则样式没有出来
|
});
|
this.$emit('on-default', this.defaultId)
|
}
|
}
|
console.log(res.data, 'async getProductList()')
|
},
|
add() {
|
this.$refs.AddOrUpdate.$refs.dialog.init(null, {id: null, type: 'xh'})
|
},
|
updateXh() {
|
this.$refs.AddOrUpdate.$refs.dialog.init(this.id, {id: null, type: 'xh'})
|
},
|
async deleteXh() {
|
if (this.id) {
|
this.$tip.alert(this.$t('prompt.deleteBatch'))
|
if (await this.$tip.confirm(this.$t('', {'handle': this.$t('delete')}))) {
|
let res = await this.$http.delete(
|
'/basicInfo/XhProductModel/',
|
{
|
'data': [this.id]
|
}
|
)
|
if (res.success) {
|
await this.$tip.success()
|
await this.getProductList()
|
}
|
}
|
} else {
|
this.$tip.alert('未选择型号')
|
}
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.name.indexOf(value) !== -1
|
},
|
handleNodeClick(data) {
|
this.id = data.id
|
this.$emit('on-selected', data)
|
},
|
}
|
}
|
</script>
|
<style>
|
.product-tree-container {
|
height: 100%;
|
}
|
</style>
|
