<template>
|
<div class="transfer-wrapper">
|
<a-tabs :activeKey="activeKey" @change="modelTabChange">
|
<a-tab-pane key="ipcCodeSort" tab="IPC分类">
|
<a-select v-model="ICPYear" style="width: 120px;margin-bottom:20px" @change="getTreeData1">
|
<a-select-option v-for="item in yearList" :key="item" :value="item">
|
{{ item }}版
|
</a-select-option>
|
</a-select>
|
<a-input-search placeholder="请输入您想要查询的IPC分类" v-model="parentCodeSearch" style="width: 300px;margin: 0 10px;"
|
enter-button @search="onSearch" />
|
<a-button type="primary" @click="reset">
|
重置
|
</a-button>
|
</a-tab-pane>
|
|
<a-tab-pane key="cpcCodeSort" tab="CPC分类">
|
<a-input-search placeholder="请输入您想要查询的CPC分类" v-model="parentCodeSearch"
|
style="width: 300px;margin-right: 10px;margin-bottom: 20px;" enter-button @search="onSearch" />
|
<a-button type="primary" @click="reset">
|
重置
|
</a-button>
|
</a-tab-pane>
|
|
<a-tab-pane key="industrycode" tab="国民经济行业分类">
|
<a-input-search placeholder="请输入您想要查询的国民经济行业分类" v-model="parentCodeSearch"
|
style="width: 300px;margin-right: 10px;margin-bottom: 20px;" enter-button @search="onSearch" />
|
<a-button type="primary" @click="reset">
|
重置
|
</a-button>
|
</a-tab-pane>
|
<a-tab-pane key="strategicIndustryCode" tab="新兴产业分类">
|
<a-input-search placeholder="请输入您想要查询的新兴产业分类" v-model="parentCodeSearch"
|
style="width: 300px;margin-right: 10px;margin-bottom: 20px;" enter-button @search="onSearch" />
|
<a-button type="primary" @click="reset">
|
重置
|
</a-button>
|
</a-tab-pane>
|
<a-tab-pane key="locarnoCodeSort" tab="洛迦诺分类">
|
<a-input-search placeholder="请输入您想要查询的洛迦诺分类" v-model="parentCodeSearch"
|
style="width: 300px;margin-right: 10px;margin-bottom: 20px;" enter-button @search="onSearch" />
|
<a-button type="primary" @click="reset">
|
重置
|
</a-button>
|
</a-tab-pane>
|
</a-tabs>
|
<a-spin :spinning="treeLoading">
|
<a-transfer class="tree-transfer" :data-source="dataSource" :target-keys="targetKeys" :render="item => item.title"
|
:show-select-all="false" @change="transferChange">
|
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
|
<a-tree v-if="direction === 'left' && !treeLoading" blockNode checkable checkStrictly
|
:defaultExpandAll="false" :checkedKeys="[...selectedKeys, ...targetKeys]" :treeData="treeData"
|
:load-data="onLoadData" style="height:300px;overflow:auto;max-width:600px;" @check="
|
(_, props) => {
|
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
|
}
|
" @select="
|
(_, props) => {
|
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
|
}
|
" />
|
</template>
|
</a-transfer>
|
</a-spin>
|
</div>
|
</template>
|
|
<script>
|
|
import { GetIpcClass, GetCpcClass, GetStraindustryTree, GetEcoindustryTree, GetLoccn, GetIpcClassTree, GetCpcClassTree } from '@/api/url_analyst'
|
|
function isChecked(selectedKeys, eventKey) {
|
return selectedKeys.indexOf(eventKey) !== -1;
|
}
|
|
function handleTreeData(data, targetKeys = []) {
|
data.forEach(item => {
|
item['disabled'] = targetKeys.includes(item.key);
|
if (item.children) {
|
handleTreeData(item.children, targetKeys);
|
}
|
});
|
return data;
|
}
|
|
export default {
|
props: ['currentItem'],
|
data() {
|
return {
|
activeKey: '',
|
activeKey: 'icpList',
|
ICPYear: 2021,
|
yearList: [2021, 2020],
|
parentCode: '',
|
targetKeys: [],
|
// dataSource: transferDataSource,
|
treeData: [],
|
treeLoading: false,
|
treeDimensions: { children: 'children', title: 'Desc', key: 'Code' },
|
parentCodeSearch: '',
|
fitst: true,
|
copy:'1',
|
}
|
},
|
computed: {
|
dataSource() {
|
let transferDataSource = [];
|
function flatten(list = []) {
|
list.map(item => {
|
item.disabled = false
|
transferDataSource.push(item);
|
flatten(item.children);
|
});
|
}
|
flatten(JSON.parse(JSON.stringify(this.treeData)));
|
return transferDataSource
|
}
|
},
|
mounted() {
|
this.activeKey = this.currentItem.select
|
this.targetKeys = this.currentItem.text.split(',')
|
if (this.currentItem.treeData && this.currentItem.treeData.length) {
|
this.treeData = this.currentItem.treeData
|
} else {
|
this.getTreeData()
|
}
|
console.log(this.treeData );
|
},
|
|
methods: {
|
onSearch() {
|
if(this.parentCodeSearch===''){
|
this.$message.warning('请输入关键词');
|
}else{
|
this.getTreeData1()
|
}
|
// this.parentCode= this.parentCodeSearch
|
// this.getTreeData1()
|
|
},
|
reset() {
|
this.parentCodeSearch = ''
|
this.parentCode = ''
|
this.getTreeData()
|
},
|
printData() {
|
console.log(this.activeKey, this.targetKeys)
|
return {
|
targetKeys: this.targetKeys,
|
activeKey: this.activeKey,
|
treeData: this.treeData
|
}
|
},
|
modelTabChange(key) {
|
this.parentCodeSearch = ''
|
this.parentCode = ''
|
if (this.treeLoading) return
|
this.activeKey = key
|
this.treeData = []
|
this.targetKeys = []
|
this.getTreeData()
|
},
|
getTreeData1() {
|
let url = {}
|
let params = {}
|
this.treeData = []
|
this.targetKeys = []
|
// fenlei:[{code:'icpList',name:'IPC(国际分类)'},{code:'cpcList',name:'CPC(合作专利分类)'},{code:'industrycn',name:'国民经济行业分类'},{code:'stratregicIndustry',name:'战略性新兴产业分类'}],
|
console.log(this.activeKey);
|
switch (this.activeKey) {
|
case 'ipcCodeSort':
|
url = GetIpcClass
|
params = { "year": `${this.ICPYear}`, "json": JSON.stringify([{ FieldName: 'desc', ConditionalType: '1', FieldValue: this.parentCodeSearch }]) },
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'Code' }
|
break;
|
case 'cpcCodeSort':
|
url = GetCpcClass
|
params = { "json": JSON.stringify([{ FieldName: 'desc', ConditionalType: '1', FieldValue: this.parentCodeSearch }]) },
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'Code' }
|
// this.treeDimensions = { children: 'children', title: 'lable', key: 'value',valueshow:'valueshow' }
|
break;
|
case 'industrycode':
|
url = GetEcoindustryTree
|
params = { "json": JSON.stringify([{ FieldName: 'Name', ConditionalType: '1', FieldValue: this.parentCodeSearch }]) },
|
// this.treeDimensions = { children: 'children', title: 'lable', key: 'value',valueshow:'valueshow' }
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'value' }
|
break;
|
case 'strategicIndustryCode':
|
url = GetStraindustryTree
|
params = { "json": JSON.stringify([{ FieldName: 'Name', ConditionalType: '1', FieldValue: this.parentCodeSearch }]) },
|
// this.treeDimensions = { children: 'children', title: 'lable', key: 'value',valueshow:'valueshow' }
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'value' }
|
break;
|
case 'locarnoCodeSort':
|
url = GetLoccn
|
params = { "json": JSON.stringify([{ FieldName: 'desc', ConditionalType: '1', FieldValue: this.parentCodeSearch }]) },
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'value' }
|
// this.treeDimensions = { children: 'children', title: 'lable', key: 'value' ,valueshow:'valueshow'}
|
break;
|
}
|
this.treeLoading = true
|
url(params).then(res => {
|
this.treeData = this.formatTreeData(res.Data)
|
this.treeLoading = false
|
})
|
},
|
getTreeData() {
|
let url = {}
|
let params = {}
|
this.treeData = []
|
this.targetKeys = []
|
// fenlei:[{code:'icpList',name:'IPC(国际分类)'},{code:'cpcList',name:'CPC(合作专利分类)'},{code:'industrycn',name:'国民经济行业分类'},{code:'stratregicIndustry',name:'战略性新兴产业分类'}],
|
console.log(this.activeKey);
|
switch (this.activeKey) {
|
case 'ipcCodeSort':
|
url = GetIpcClassTree
|
params = {
|
year: this.ICPYear,
|
parentCode: this.parentCode
|
}
|
this.treeDimensions = { children: 'children', title: 'Desc', key: 'Code' }
|
break;
|
case 'cpcCodeSort':
|
url = GetCpcClassTree
|
params = {
|
parentCode: this.parentCode
|
}
|
this.treeDimensions = { children: 'children', title: 'Desc', key: 'Code' }
|
break;
|
case 'industrycode':
|
url = GetEcoindustryTree
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'value' }
|
break;
|
case 'strategicIndustryCode':
|
url = GetStraindustryTree
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'value' }
|
break;
|
case 'locarnoCodeSort':
|
url = GetLoccn
|
params = {
|
parentCode: this.parentCode
|
}
|
// this.treeDimensions = { children: 'children', title: 'Desc', key: 'Code' }
|
this.treeDimensions = { children: 'children', title: 'lable', key: 'value' }
|
break;
|
}
|
this.treeLoading = true
|
url(params).then(res => {
|
this.treeData = this.formatTreeData(res.Data)
|
this.treeLoading = false
|
})
|
},
|
//统一格式 key title
|
formatTreeData(listData) {
|
// console.log(search);
|
let tempList = []
|
let that = this
|
function flatten(list = []) {
|
list.forEach(item => {
|
// item.title=(that.activeKey==='strategicIndustryCode')?item.valueshow.split(' ')[1]: item.valueshow
|
item.title= item.valueshow
|
item.key = item[that.treeDimensions.key]
|
flatten(item.children);
|
});
|
}
|
console.log(tempList);
|
tempList = JSON.parse(JSON.stringify(listData))
|
flatten(tempList);
|
that.copy=''
|
|
return tempList
|
},
|
transferChange(targetKeys) {
|
this.targetKeys = targetKeys;
|
handleTreeData(this.treeData, targetKeys)
|
},
|
onChecked(_, e, checkedKeys, itemSelect) {
|
const { eventKey } = e.node;
|
itemSelect(eventKey, !isChecked(checkedKeys, eventKey));
|
},
|
onLoadData(treeNode) {
|
return new Promise(resolve => {
|
if (treeNode.dataRef.children) {
|
resolve();
|
return;
|
}
|
console.log(this.activeKey);
|
setTimeout(() => {
|
let url = GetIpcClassTree
|
if (this.activeKey == 'cpcCodeSort') {
|
url = GetCpcClassTree
|
}
|
this.copy=treeNode.dataRef.key
|
url({
|
// year: this.activeKey == 'cpcCodeSort' ? this.ICPYear : undefined,
|
year: this.activeKey == 'ipcCodeSort' ? this.ICPYear : undefined,
|
parentCode: treeNode.dataRef.key
|
}).then(res => {
|
treeNode.dataRef.children = this.formatTreeData(res.Data)
|
this.treeData = [...this.treeData];
|
resolve();
|
})
|
}, 1000);
|
});
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.ant-transfer-customize-list /deep/ .ant-transfer-list {
|
min-width: 300px !important;
|
}
|
|
/* /deep/ .ant-transfer-list{
|
width: 180px !important;
|
} */
|
/* .ant-transfer-customize-list .ant-transfer-list{
|
|
} */
|
</style>
|
