这是规则组,。。
<template>
<d2-container id="rule-group">
<div class="rule-box">
<CategoryTree
businessType="rule-group"
ref="category-tree"
@treeNodeClickEvent="handleClickTree"
:categoryListCache="categoryListCache"
title="规则组分类"
/>
<el-tabs class="card-border" type="border-card" style="overflow: hidden" @tab-click="tabClick">
<el-tab-pane label="规则组管理" style="height: 100%">
<!-- 规则组实体表格 -->
<RuleGroupTable v-if="tabIndex == 0" :ruleGroupList="ruleGroupList" :ruleCaptionList="ruleCaptionList" :total="total" :ruleCaption="ruleCaption" @refreshRuleGroup="refreshRuleGroup" :pagination="pagination" :category_id="treeId" :dimension="dimension" :ruleLoading="ruleLoading" :insertable="insertable" />
</el-tab-pane>
<el-tab-pane label="分类管理" style="height: 100%">
<!-- 分类数据表格 -->
<CategoryTable v-if="tabIndex == 1" :categoryList="categoryList" :parentCat="treeId" @refreshCategory="refreshCategory" categoryType="rule-group" />
</el-tab-pane>
</el-tabs>
</div>
</d2-container>
</template>
这是整体的一个页面布局吧,有三个组件
components: {
CategoryTree,
RuleGroupTable,
CategoryTable,
},
CategoryTree是左侧得树形结构,封装在views得components中了。
接收参数 :传递数据类型、数据列表、标题啥的
props: {
// 分类列表
categoryListCache: {
type: Array
},
title: {
type: String
},
businessType: {
type: String
},
isIcon: {
type: Boolean,
default: false
},
isMasterSvg: {
type: Boolean,
default: false
},
isRevisionSvg: {
type: Boolean,
default: false
},
},
树形结构也有很多组件,搜索、刷新什么的。
规则模型
index是整体得一个。左侧一个树结构tree组件 右侧表格,根据左侧选择得模型,ruletable 生成动态表格。。根据传入得type生成不一样得表格
<RuleTable
:businessType="businessType"
:category_id="treeId"
:ruleList="ruleList"
@handlePageChangeEvent="handlePageChangeEvent"
:total="total"
@refresh="refresh"
:ruleType="value"
:pagination="pagination"
/>
接着是ruletable里面,表格得内容和点击得时候查看规则
表格里传递很多数据,