拆分列表
This commit is contained in:
caoyang
@@ -67,14 +67,19 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<sub-area v-if="visible" :subVisible="visible" @visible="areaVisible"></sub-area>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
|
||||
// import search from '@/components/search'
|
||||
import subArea from './module/subArea'
|
||||
export default {
|
||||
name:'subscribtion',
|
||||
components:{
|
||||
subArea
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
selectedRowKeys:[],
|
||||
@@ -123,6 +128,7 @@
|
||||
}
|
||||
],
|
||||
tableData:[], //列表数据
|
||||
visible:false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -145,7 +151,7 @@
|
||||
},
|
||||
//订阅领域管理
|
||||
handleBatManage(){
|
||||
|
||||
this.visible=true
|
||||
},
|
||||
//批量取消收藏
|
||||
handleBatCancel(){
|
||||
@@ -185,8 +191,10 @@
|
||||
//点击名称
|
||||
titleClick(records){
|
||||
|
||||
},
|
||||
areaVisible(val){
|
||||
this.visible=val
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="sub-area">
|
||||
<a-modal
|
||||
title="订阅领域管理"
|
||||
class="sub-area-modal"
|
||||
:visible="visible"
|
||||
:confirm-loading="confirmLoading"
|
||||
:okText="'保存'"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-input-search v-model="searchValue" style="margin-bottom: 8px" placeholder="节点快速查找" @change="onChange" />
|
||||
<a-tree
|
||||
v-model="checkedKeys"
|
||||
checkable
|
||||
:expanded-keys="expandedKeys"
|
||||
:auto-expand-parent="autoExpandParent"
|
||||
:tree-data="treeData"
|
||||
:selected-keys="selectedKeys"
|
||||
@select="onSelect"
|
||||
@expand="onExpand"
|
||||
>
|
||||
<template slot="title" slot-scope="{ title }">
|
||||
<span v-if="title.indexOf(searchValue) > -1">
|
||||
{{ title.substr(0, title.indexOf(searchValue)) }}
|
||||
<span style="color: #f50">{{ searchValue }}</span>{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
|
||||
</span>
|
||||
<span v-else>{{ title }}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, deleteAction } from '@/api/manage'
|
||||
export default {
|
||||
name: 'subArea',
|
||||
data(){
|
||||
return{
|
||||
visible:false,
|
||||
confirmLoading:false,
|
||||
checkedKeys:[],
|
||||
selectedKeys: [],
|
||||
expandedKeys: [],
|
||||
autoExpandParent: true,
|
||||
treeData: [
|
||||
{
|
||||
title: '车身结构',
|
||||
key: '0-0',
|
||||
children: [
|
||||
{
|
||||
title: '车身',
|
||||
key: '0-0-0',
|
||||
children: [
|
||||
{ title: '前窗', key: '0-0-0-0' },
|
||||
{ title: '挡风', key: '0-0-0-1' },
|
||||
{ title: '车门', key: '0-0-0-2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '底盘',
|
||||
key: '0-0-1',
|
||||
},
|
||||
{
|
||||
title: '车机系统',
|
||||
key: '0-0-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '软件中心',
|
||||
key: '0-1',
|
||||
children: [
|
||||
{ title: '软件一', key: '0-1-0-0' },
|
||||
{ title: '软件二', key: '0-1-0-1' },
|
||||
{ title: '软件三', key: '0-1-0-2' },
|
||||
],
|
||||
},
|
||||
],
|
||||
dataList:[],
|
||||
searchValue:''
|
||||
}
|
||||
},
|
||||
props:{
|
||||
subVisible:Boolean
|
||||
},
|
||||
watch: {
|
||||
checkedKeys(val) {
|
||||
console.log('onCheck', val);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.visible=this.subVisible
|
||||
},
|
||||
methods:{
|
||||
//获取数据
|
||||
loadData(){
|
||||
let params = {}
|
||||
getAction(``,params).then(res=> {
|
||||
if(res.success){
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
afterVisibleChange(val) {
|
||||
console.log('visible', val);
|
||||
},
|
||||
handleOk(e) {
|
||||
this.confirmLoading = true;
|
||||
this.$emit('visible',false)
|
||||
},
|
||||
handleCancel(e) {
|
||||
this.visible = false;
|
||||
this.$emit('visible',false)
|
||||
},
|
||||
onExpand(expandedKeys) {
|
||||
console.log('onExpand', expandedKeys);
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded children keys.
|
||||
this.expandedKeys = expandedKeys;
|
||||
this.autoExpandParent = false;
|
||||
},
|
||||
onCheck(checkedKeys) {
|
||||
console.log('onCheck', checkedKeys);
|
||||
this.checkedKeys = checkedKeys;
|
||||
},
|
||||
onSelect(selectedKeys, info) {
|
||||
console.log('onSelect', info);
|
||||
this.selectedKeys = selectedKeys;
|
||||
},
|
||||
generateData(_level, _preKey, _tns){
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || this.treeData;
|
||||
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({ title: key, key, scopedSlots: { title: 'title' } });
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return this.generateData(level, key, tns[index].children);
|
||||
});
|
||||
},
|
||||
onChange(e) {
|
||||
const value = e.target.value;
|
||||
const expandedKeys = this.dataList
|
||||
.map(item => {
|
||||
if (item.title.indexOf(value) > -1) {
|
||||
return this.getParentKey(item.key, this.treeData);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((item, i, self) => item && self.indexOf(item) === i);
|
||||
Object.assign(this, {
|
||||
expandedKeys,
|
||||
searchValue: value,
|
||||
autoExpandParent: true,
|
||||
});
|
||||
},
|
||||
generateList(data){
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const node = data[i];
|
||||
const key = node.key;
|
||||
this.dataList.push({ key, title: key });
|
||||
if (node.children) {
|
||||
this.generateList(node.children);
|
||||
}
|
||||
}
|
||||
},
|
||||
getParentKey(key, tree){
|
||||
let parentKey;
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
if (node.children) {
|
||||
if (node.children.some(item => item.key === key)) {
|
||||
parentKey = node.key;
|
||||
} else if (this.getParentKey(key, node.children)) {
|
||||
parentKey = this.getParentKey(key, node.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey;
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sub-area{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.sub-area-modal{
|
||||
.ant-modal-footer{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user