目录
manager-menu.vue
<template lang="pug"> --组件的模板结构,采用pug语法
.manager-menu --页面名称
op-query-header.manager-menu__query-header(--引入query-header组件到manager-menu的请求头
slot='search', --定义slot属性,直接赋值
:config='headerConfig', --定义config属性,下面需要为headerConfig赋值
@search='doQuery', --定义search事件为doQuery
ref='queryHeader', --定义别名为queryHeader,可以调用query-header的所有属性和方法
@click-add='add' --定义点击事件新增
)
op-grid-table(ref='fundManagerTable', :config='tableConfig')
--引入列表组件,别名为fundManagerTable,定义config属性,在下面需要为tableConfig赋值
op-biz-block-form-dialog( --引入form表单
ref='BizBlockFormDialog', --定义biz-block-form-dialog的别名为BizBlockFormDialog
:block-id='blockId', --定义block-id属性,下面需要为blockId赋值
biz-type='FUND_MANAGER', --定义biz-type属性,直接赋值
:hidden-data='hiddenData', --定义隐藏参数属性,下面需要为hiddenData赋值
@success='onSuccess' --定义success点击事件
)
</template>
<script>
import magicButtonConfigHelper from '@/components/buttons/utils/magic-button-config-helper'; --引入magicButtonConfigHelper,为button参数进行转换
export default { --出口默认值
name: 'manager-menu', --命名
props: { --子组件获取父组件属性和方法的唯一出口
menuMeta: { --定义一个变量,获取父组件的属性
type: Object,
default: () => ({}),
},
buttons: { --定义一个变量,获取父组件的属性
type: Array,
default: () => [],
},
},
data() { --参数
return {
tableConfig: { --为template中grid-table定义的config赋值
url: '/fund/manager/page', --后台接口
listeners: { --定义一个监听器
// 双击事件
'row-dblclick': (row) => this.toDetail(row), --双击事件,启动详情页
},
columns: this.menuMeta.columns, --为columns赋值,从menuMeta中获取
pagination: true,
pageNumber: 1,
queryParams: {}, --定义参数queryParams,接收参数
pageList: [20, 50, 100, 200],
},
blockId: this.menuMeta.blockId, --为blockId赋值,从menuMeta中获取
hiddenData: this.menuMeta.hiddenData, --为hiddenData赋值,从menuMeta中获取
};
},
computed: { --计算函数
headerConfig() { --定义headerConfig方法
return {
filters: this.menuMeta.queryHeader?.filters ?? [],
buttons: magicButtonConfigHelper(this.buttons),
};
},
},
methods: { --方法
onSuccess() {
this.$refs.fundManagerTable.reload();
},
add() {
--因为上面通过ref定义了组件的别名,新增可以通过this.$refs直接调用别名对应组件里的所有方法
this.$refs.BizBlockFormDialog.open({});
},
doQuery(query) {
this.tableConfig.queryParams = Object.assign( --??????
{},
this.tableConfig.queryParams,
query
);
this.$refs.fundManagerTable.reload();
},
toDetail(row) { --$http里面封装了ajax
this.$http.jumpDetail('FUND_MANAGER', row.managerId);
},
},
};
</script>
<style lang="scss" scoped>
.manager-menu { --为整个manager-menu进行css渲染
padding: var(--gutter);
&__query-header {
padding-bottom: var(--gutter);
}
&__grid { --为grid-table进行修饰渲染
&::v-deep .search-grid__header { --grid-table的header部分
padding: var(--gutter) 0;
}
&::v-deep .search-grid__body { --grid-table的body部分
.search-grid__body-content {
margin: 0;
}
}
}
}
</style>
fund-manager-header.vue
<template lang='pug'>
.fund-manager-header
biz-header( --???
ref='bizHeader',
:biz-type='bizType',
:biz-id='bizId',
:info-config='meta'
)
</template>
<script>
import BizHeader from '@/components/block/biz-header';
export default {
name: 'fund-manager-header',
components: {
BizHeader,
},
props: {
meta: {
type: Object,
default: () => ({}),
},
},
computed: {
bizId() {
return this.$route.query.bizId;
},
bizType() {
return this.$route.query.bizType;
},
},
};
</script>