<template>
|
<app-page-tab v-bind="tabPageProps" v-if="isRender">
|
<template #index="scope">
|
<index-page v-bind="indexPageProps">
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
<slot :name="slot" v-bind="scope"/>
|
</template>
|
</index-page>
|
</template>
|
<template #chart="scope">
|
<chart-page v-bind="chartPageProps"/>
|
</template>
|
<template #header-button="scope" v-if="view !== 'chart'">
|
<slot name="header-button" v-bind="scope" v-if="!props.typeList.includes(scope.selected.tab)"/>
|
<div v-if="props.typeList.length === 0 || props.typeList.includes(scope.selected.tab)">
|
<el-button
|
icon="View"
|
size="small"
|
type="primary"
|
@click="onTab(scope.selected.tab)"
|
>
|
结构图
|
</el-button>
|
<el-button
|
icon="Plus"
|
size="small"
|
type="primary"
|
@click="onDialog({})"
|
>
|
新增
|
</el-button>
|
|
<el-button
|
icon="Edit"
|
size="small"
|
type="primary"
|
:disabled="!scope.selected.edit?.id"
|
@click="onDialog(scope.selected.edit)">
|
编辑
|
</el-button>
|
<el-button
|
:disabled="!scope.selected.edit?.id"
|
size="small"
|
type="danger"
|
icon="Delete"
|
@click="onDelete(scope.selected.edit)"
|
>
|
</el-button>
|
|
</div>
|
</template>
|
</app-page-tab>
|
</template>
|
|
<script setup>
|
|
import ChartPage from './ChartPage'
|
|
import IndexPage from './IndexPage';
|
import {openTab} from "@/utils/iframe.js";
|
import {uuid} from "@/utils/tools.js";
|
|
import {useEntityStore} from "@/store/modules";
|
|
import {splitTextToTags} from '@/utils/tools.js';
|
|
const entityStore = useEntityStore();
|
|
const indexPageRef = ref();
|
const tabPageRef = ref();
|
|
const router = useRouter();
|
const route = useRoute();
|
|
const isRender = ref(false);
|
|
const params = router.currentRoute.value.query;
|
|
const props = defineProps({
|
tabList: {
|
type: Array,
|
default: []
|
},
|
typeList: {
|
type: Array,
|
default: []
|
}
|
});
|
|
const indexPageProps = {
|
tabList: props.tabList,
|
ref: indexPageRef,
|
subCurrent(row) {
|
tabPageRef.value.assignSelected(row);
|
}
|
}
|
|
const chartPageProps = {}
|
|
const onDialog = (row) => {
|
indexPageRef.value.onDialog(row);
|
}
|
|
const onDelete = (row) => {
|
indexPageRef.value.onDelete(row);
|
}
|
|
const onTab = async (type) => {
|
await openTab({
|
icon: 'icon-product',
|
id: uuid(),
|
sceneCode: "edit",
|
text: "结构图",
|
title: "结构图",
|
path: route.path,
|
params: {view: 'chart', id: uuid(), type}
|
}
|
);
|
}
|
|
const formatParams = (text) => {
|
const tags = splitTextToTags(text, '@', '}');
|
return tags.map((item) => {
|
if (item.type === 'field') {
|
return params[item.field] || '';
|
}
|
return item.value;
|
}).join('');
|
}
|
|
onMounted(async () => {
|
const {data} = await entityStore.getEntitySet({
|
dataName: "sys_data_field_rule_page_config",
|
filter: "active = 'T'",
|
});
|
const type = (params.type || '').split(",").filter(Boolean);
|
|
if (type.length > 0) {
|
data.entityset = type.map((e) => data.entityset.find(({type}) => e === type)).filter(Boolean);
|
}
|
|
let pageConfig = data.entityset.filter(e => props.typeList.length === 0 || props.typeList.includes(e.type)).map(e => (
|
{
|
type: e.type,
|
label: e.remark,
|
lib: {
|
filter: formatParams(e.rule_type_filter || ''),
|
},
|
rule: {
|
dataName: formatParams(e.rule_data_name || ''),
|
filter: formatParams(e.rule_sub_filter || '')
|
},
|
property: {
|
dataName: formatParams(e.field_data_name || ''),
|
filter: formatParams(e.field_sub_filter || ''),
|
value: formatParams(e.field_code || ''),
|
name: formatParams(e.field_value || ''),
|
}
|
}
|
));
|
|
indexPageProps.pageConfig = pageConfig;
|
chartPageProps.pageConfig = pageConfig;
|
isRender.value = true;
|
})
|
|
/**
|
* index form chart
|
*/
|
const view = params.view || 'index';
|
|
const tabPageProps = {
|
ref: tabPageRef,
|
tabList: [
|
view === 'index' ?
|
{
|
name: view,
|
title: '规则模版'
|
}
|
: {
|
name: view,
|
title: '规则结构图'
|
}
|
]
|
};
|
|
const tabAssignSelected = row => tabPageRef.value.assignSelected(row);
|
|
defineExpose({
|
tabAssignSelected
|
});
|
|
|
</script>
|
