83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import type { TableConfig } from './store/formDesignStore';
|
|
|
|
import { watch } from 'vue';
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import AttributePanel from './components/AttributePanel.vue';
|
|
import DesignCanvas from './components/DesignCanvas.vue';
|
|
import MaterialPanel from './components/MaterialPanel.vue';
|
|
import { useFormDesignStore } from './store/formDesignStore';
|
|
|
|
const LEFT_PANEL_WIDTH = 288;
|
|
const RIGHT_PANEL_WIDTH = 306;
|
|
|
|
const props = defineProps<{
|
|
dataSource?: TableConfig[];
|
|
/** 当前表单编码，用于按钮「生成单据」动作绑定模板 */
|
|
formCode?: string;
|
|
/** 表单物理库连接 code（与 FormMeta.db_config 一致） */
|
|
formDbConfig?: string;
|
|
}>();
|
|
|
|
const store = useFormDesignStore();
|
|
const { leftPanelCollapsed, rightPanelCollapsed } = storeToRefs(store);
|
|
|
|
// 监听数据源变化，更新 Store
|
|
watch(
|
|
() => props.dataSource,
|
|
(val) => {
|
|
if (val) {
|
|
store.setDataSource(val);
|
|
}
|
|
},
|
|
{ immediate: true, deep: true },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="form-design-container bg-background-deep flex h-full w-full overflow-hidden"
|
|
:class="
|
|
leftPanelCollapsed && rightPanelCollapsed ? 'gap-0' : 'gap-3'
|
|
"
|
|
>
|
|
<!-- Left: Material Panel -->
|
|
<div
|
|
class="h-full flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out"
|
|
:style="{
|
|
width: leftPanelCollapsed ? '0px' : `${LEFT_PANEL_WIDTH}px`,
|
|
}"
|
|
>
|
|
<div class="h-full" :style="{ width: `${LEFT_PANEL_WIDTH}px` }">
|
|
<MaterialPanel />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center: Design Canvas -->
|
|
<div class="relative h-full min-w-0 flex-1 overflow-hidden">
|
|
<DesignCanvas />
|
|
</div>
|
|
|
|
<!-- Right: Attribute Panel -->
|
|
<div
|
|
class="h-full flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out"
|
|
:style="{
|
|
width: rightPanelCollapsed ? '0px' : `${RIGHT_PANEL_WIDTH}px`,
|
|
}"
|
|
>
|
|
<div class="h-full" :style="{ width: `${RIGHT_PANEL_WIDTH}px` }">
|
|
<AttributePanel :form-code="formCode" :form-db-config="formDbConfig" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.form-design-container {
|
|
/* Ensure container takes full height relative to its parent */
|
|
height: 100%;
|
|
}
|
|
</style>
|