<template> <div class="configuration"> <dee-fold-pane :min-percent="minPercent" :default-percent="defaultPercent" split="vertical" class="detail-pane" > <template slot="paneL"> <left-page :type-name="typeName" :config-details="configDetails" @search="search" @switchTabs="switchTabs" /> </template> <template slot="paneR"> <right-page ref="rightPage" :type-name="typeName" :config-details="configDetails" :tab="currentTab" :table-data="tableData" /> </template> </dee-fold-pane> </div> </template> <script> import leftPage from './leftPage' import rightPage from './rightPage' // import { post } from '@/utils/http' import { getLayouts } from '@/api/cmt' export default { // import引入的组件需要注入到对象中才能使用 components: { leftPage, rightPage }, props: {}, data() { // 这里存放数据 return { currentTab: '1', searchUrl: '/DxAbstractChangeIssue/find/recursion', tableData: [], configDetails: { DxChangeRequest: { form: { configDetails: {} }, table: { configDetails: {} } }, DxChangeNotice: { form: { configDetails: {} }, table: { configDetails: {} } }, DxAbstractChangeIssue: { form: { configDetails: {} }, table: { configDetails: {} } } }, layout: { DxChangeRequest: { form: 'defaultQuery', table: 'defaultResult' }, DxChangeNotice: { form: 'defaultQuery', table: 'defaultResult' }, DxAbstractChangeIssue: { form: 'defaultQuery', table: 'defaultResult' } }, typeList: { '1': 'DxAbstractChangeIssue', '2': 'DxChangeRequest', '3': 'DxChangeNotice' }, typeName: 'DxAbstractChangeIssue', minPercent: 10, defaultPercent: 22 } }, // 监听属性 类似于data概念 computed: { dxService() { return this.$getService(this.typeName) } }, // 监控data中的数据变化 watch: {}, // 生命周期 - 创建完成(可以访问当前this实例) created() { }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() { this.getLayout(this.layout) }, activated() { }, // 方法集合 methods: { // 获取左侧搜索的配置文件以及右侧表格的配置文件 getLayout(layout) { for (const keyObj in layout) { for (const key in layout[keyObj]) { getLayouts(keyObj, layout[keyObj][key]).then(res => { const perkData = res.items.filter(r => { return r.typeKey === keyObj }).slice(-1)[0] this.configDetails[keyObj][key] = perkData ? JSON.parse(perkData.configDetails) : {} }) } } }, switchTabs(tab) { this.typeName = this.typeList[tab.tabs] this.currentTab = tab.tabs this.searchUrl = tab.url this.tableData = [] }, search(form) { const searchItems = this.dxService.newSearchItems() for (const key in form) { searchItems.$addItem(form[key].fieldName, form[key].value, form[key].operator) } this.$refs.rightPage.$refs.mainTable.reloadData({ customSearchItems: searchItems }, true) } } } </script> <style lang='scss'> .configuration { height: 100%; } </style>