| | |
| | | <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="getTreeData"> |
| | | <a-select-option v-for="item in yearList" :key="item" :value="item"> |
| | | {{item}}版 |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="cpcCodeSort" tab="CPC分类"> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="industrycn" tab="新兴产业分类"> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="stratregicIndustry" tab="GBC分类"> |
| | | </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" |
| | | @check=" |
| | | (_, props) => { |
| | | onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect); |
| | | } |
| | | " |
| | | @select=" |
| | | (_, props) => { |
| | | onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect); |
| | | } |
| | | " |
| | | /> |
| | | <a-tab-pane key="ipcCodeSort" tab="IPC分类"> |
| | | <a-select v-model="ICPYear" style="width: 120px;margin-bottom:20px" @change="getTreeData"> |
| | | <a-select-option v-for="item in yearList" :key="item" :value="item"> |
| | | {{ item }}版 |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="cpcCodeSort" tab="CPC分类"> |
| | | |
| | | </a-tab-pane> |
| | | <a-tab-pane key="industrycn" tab="新兴产业分类"> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="stratregicIndustry" tab="GBC分类"> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="locarnoCodeSort" tab="洛迦诺分类"> |
| | | </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:600px;" @check=" |
| | | (_, props) => { |
| | | onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect); |
| | | } |
| | | " @select=" |
| | | (_, props) => { |
| | | onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect); |
| | | } |
| | | " /> |
| | | </template> |
| | | </a-transfer> |
| | | </a-spin> |
| | | </a-spin> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | import { GetIpcClass , GetCpcClass , GetStraindustryTree ,GetEcoindustryTree} from '@/api/url_analyst' |
| | | import { GetIpcClass, GetCpcClass, GetStraindustryTree, GetEcoindustryTree } from '@/api/url_analyst' |
| | | |
| | | function isChecked(selectedKeys, eventKey) { |
| | | return selectedKeys.indexOf(eventKey) !== -1; |
| | |
| | | } |
| | | |
| | | export default { |
| | | props:['currentItem'], |
| | | data(){ |
| | | return{ |
| | | activeKey:'', |
| | | activeKey:'icpList', |
| | | ICPYear:2021, |
| | | yearList:[2021,2020], |
| | | parentCode:'', |
| | | 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' }, |
| | | treeData: [], |
| | | treeLoading: false, |
| | | treeDimensions: { children: 'children', title: 'Desc', key: 'Code' }, |
| | | } |
| | | }, |
| | | computed:{ |
| | | dataSource(){ |
| | | computed: { |
| | | dataSource() { |
| | | let transferDataSource = []; |
| | | function flatten(list = []) { |
| | | list.map(item => { |
| | |
| | | return transferDataSource |
| | | } |
| | | }, |
| | | mounted(){ |
| | | mounted() { |
| | | this.activeKey = this.currentItem.select |
| | | this.targetKeys = this.currentItem.text.split(',') |
| | | if(this.currentItem.treeData&&this.currentItem.treeData.length){ |
| | | if (this.currentItem.treeData && this.currentItem.treeData.length) { |
| | | this.treeData = this.currentItem.treeData |
| | | }else{ |
| | | } else { |
| | | this.getTreeData() |
| | | } |
| | | }, |
| | | methods:{ |
| | | printData(){ |
| | | console.log(this.activeKey,this.targetKeys) |
| | | methods: { |
| | | printData() { |
| | | console.log(this.activeKey, this.targetKeys) |
| | | return { |
| | | targetKeys:this.targetKeys, |
| | | activeKey:this.activeKey, |
| | | treeData:this.treeData |
| | | targetKeys: this.targetKeys, |
| | | activeKey: this.activeKey, |
| | | treeData: this.treeData |
| | | } |
| | | }, |
| | | modelTabChange(key){ |
| | | if(this.treeLoading) return |
| | | modelTabChange(key) { |
| | | if (this.treeLoading) return |
| | | this.activeKey = key |
| | | this.treeData = [] |
| | | this.targetKeys = [] |
| | | this.getTreeData() |
| | | }, |
| | | getTreeData(){ |
| | | 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){ |
| | | |
| | | console.log(this.activeKey); |
| | | switch (this.activeKey) { |
| | | case 'ipcCodeSort': |
| | | url = GetIpcClass |
| | | params = { |
| | | year:this.ICPYear, |
| | | parentCode:this.parentCode |
| | | year: this.ICPYear, |
| | | parentCode: this.parentCode |
| | | } |
| | | this.treeDimensions = {children:'children', title:'Desc', key:'Code' } |
| | | break; |
| | | this.treeDimensions = { children: 'children', title: 'Desc', key: 'Code' } |
| | | break; |
| | | case 'cpcCodeSort': |
| | | url = GetCpcClass |
| | | params = { |
| | | parentCode:this.parentCode |
| | | parentCode: this.parentCode |
| | | } |
| | | this.treeDimensions = {children:'children', title:'Desc', key:'Code' } |
| | | break; |
| | | this.treeDimensions = { children: 'children', title: 'Desc', key: 'Code' } |
| | | break; |
| | | case 'industrycn': |
| | | url = GetStraindustryTree |
| | | this.treeDimensions = {children:'children', title:'lable', key:'value' } |
| | | this.treeDimensions = { children: 'children', title: 'lable', key: 'value' } |
| | | // console.log(this.treeDimensions); |
| | | break; |
| | | break; |
| | | case 'stratregicIndustry': |
| | | url = GetEcoindustryTree |
| | | this.treeDimensions = {children:'children', title:'lable', key:'value' } |
| | | break; |
| | | this.treeDimensions = { children: 'children', title: 'lable', key: 'value' } |
| | | break; |
| | | case 'locarnoCodeSort': |
| | | |
| | | url = GetCpcClass |
| | | params = { |
| | | parentCode: this.parentCode |
| | | } |
| | | this.treeDimensions = { children: 'children', title: 'Desc', key: 'Code' } |
| | | break; |
| | | } |
| | | this.treeLoading = true |
| | | url(params).then(res=>{ |
| | | url(params).then(res => { |
| | | this.treeData = this.formatTreeData(res.Data) |
| | | if(url.toString().indexOf('GetStraindustryTree')>0){ |
| | | // this.treeData |
| | | for(let i=0;i<this.treeData.length;i++){ |
| | | console.log(this.treeData[i]); |
| | | this.treeData[i].title= `${this.treeData[i].value } ${ this.treeData[i].title }` |
| | | for(let k=0;k<this.treeData[i].children.length;k++){ |
| | | this.treeData[i].children[k].title= `${this.treeData[i].children[k].value } ${ this.treeData[i].children[k].title }` |
| | | if (url.toString().indexOf('GetStraindustryTree') > 0) { |
| | | // this.treeData |
| | | for (let i = 0; i < this.treeData.length; i++) { |
| | | console.log(this.treeData[i]); |
| | | this.treeData[i].title = `${this.treeData[i].value} ${this.treeData[i].title}` |
| | | for (let k = 0; k < this.treeData[i].children.length; k++) { |
| | | this.treeData[i].children[k].title = `${this.treeData[i].children[k].value} ${this.treeData[i].children[k].title}` |
| | | } |
| | | } |
| | | } |
| | | } |
| | | if(url.toString().indexOf('GetEcoindustryTree')>0){ |
| | | console.log(1111); |
| | | // this.treeData |
| | | // for(let i=0;i<this.treeData.children.length;i++){ |
| | | // console.log(this.treeData.children[i]); |
| | | // this.treeData.children[i].label= `${this.treeData.children[i].value } ${ this.treeData.children[i].label }` |
| | | // for(let k=0;k<this.treeData.children[i].children.length;k++){ |
| | | // this.treeData.children[i].children[k].label= `${this.treeData.children[i].children[k].value } ${ this.treeData.children[i].children[k].label }` |
| | | // } |
| | | // } |
| | | for(let i=0;i<this.treeData.length;i++){ |
| | | this.treeData[i].title=`${this.treeData[i].value } ${ this.treeData[i].lable}` |
| | | for(let k=0;k<this.treeData[i].children.length;k++){ |
| | | this.treeData[i].children[k].title=`${this.treeData[i].children[k].value } ${ this.treeData[i].children[k].lable}` |
| | | for(let j=0;j<this.treeData[i].children[k].children.length;j++){ |
| | | this.treeData[i].children[k].children[j].title=`${this.treeData[i].children[k].children[j].value } ${ this.treeData[i].children[k].children[j].lable}` |
| | | for(let q=0;q<this.treeData[i].children[k].children[j].children.length;q++){ |
| | | this.treeData[i].children[k].children[j].children[q].title=`${this.treeData[i].children[k].children[j].children[q].value } ${ this.treeData[i].children[k].children[j].children[q].lable}` |
| | | |
| | | } |
| | | if (url.toString().indexOf('GetEcoindustryTree') > 0) { |
| | | console.log(1111); |
| | | // this.treeData |
| | | // for(let i=0;i<this.treeData.children.length;i++){ |
| | | // console.log(this.treeData.children[i]); |
| | | // this.treeData.children[i].label= `${this.treeData.children[i].value } ${ this.treeData.children[i].label }` |
| | | // for(let k=0;k<this.treeData.children[i].children.length;k++){ |
| | | // this.treeData.children[i].children[k].label= `${this.treeData.children[i].children[k].value } ${ this.treeData.children[i].children[k].label }` |
| | | // } |
| | | // } |
| | | for (let i = 0; i < this.treeData.length; i++) { |
| | | this.treeData[i].title = `${this.treeData[i].value} ${this.treeData[i].lable}` |
| | | for (let k = 0; k < this.treeData[i].children.length; k++) { |
| | | this.treeData[i].children[k].title = `${this.treeData[i].children[k].value} ${this.treeData[i].children[k].lable}` |
| | | for (let j = 0; j < this.treeData[i].children[k].children.length; j++) { |
| | | this.treeData[i].children[k].children[j].title = `${this.treeData[i].children[k].children[j].value} ${this.treeData[i].children[k].children[j].lable}` |
| | | for (let q = 0; q < this.treeData[i].children[k].children[j].children.length; q++) { |
| | | this.treeData[i].children[k].children[j].children[q].title = `${this.treeData[i].children[k].children[j].children[q].value} ${this.treeData[i].children[k].children[j].children[q].lable}` |
| | | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | console.log(this.treeData); |
| | | } |
| | | console.log(this.treeData); |
| | | } |
| | | this.treeLoading = false |
| | | }) |
| | | }, |
| | | //统一格式 key title |
| | | formatTreeData(listData){ |
| | | formatTreeData(listData) { |
| | | let tempList = [] |
| | | let that = this |
| | | function flatten(list = []) { |
| | | list.forEach(item => { |
| | | item.title = that.activeKey==='cpcCodeSort'||(that.activeKey==='ipcCodeSort'&&item.ParentCode)? item.Code +" "+ item[that.treeDimensions.title]:item[that.treeDimensions.title] |
| | | |
| | | item.title = that.activeKey === ('cpcCodeSort'||'locarnoCodeSort') || (that.activeKey === 'ipcCodeSort' && item.ParentCode) ? item.Code + " " + item[that.treeDimensions.title] : item[that.treeDimensions.title] |
| | | |
| | | item.key = item[that.treeDimensions.key] |
| | | flatten(item.children); |
| | | }); |
| | |
| | | }, |
| | | transferChange(targetKeys) { |
| | | this.targetKeys = targetKeys; |
| | | handleTreeData(this.treeData,targetKeys) |
| | | handleTreeData(this.treeData, targetKeys) |
| | | }, |
| | | onChecked(_, e, checkedKeys, itemSelect) { |
| | | const { eventKey } = e.node; |
| | |
| | | console.log(this.activeKey); |
| | | setTimeout(() => { |
| | | let url = GetIpcClass |
| | | if(this.activeKey == 'cpcCodeSort'){ |
| | | if (this.activeKey == ('cpcCodeSort'||'locarnoCodeSort')) { |
| | | url = GetCpcClass |
| | | } |
| | | url({ |
| | | year:this.activeKey == 'ipcCodeSort'?this.ICPYear:undefined, |
| | | parentCode:treeNode.dataRef.key |
| | | }).then(res=>{ |
| | | year: this.activeKey == ('cpcCodeSort'||'locarnoCodeSort') ? this.ICPYear : undefined, |
| | | parentCode: treeNode.dataRef.key |
| | | }).then(res => { |
| | | treeNode.dataRef.children = this.formatTreeData(res.Data) |
| | | this.treeData = [...this.treeData]; |
| | | resolve(); |