From 090979fb07fb906450ef27bbaa1f6a208d2a8564 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Thu, 6 Nov 2025 11:17:05 +0800
Subject: [PATCH] =?UTF-8?q?PC=E5=85=BB=E6=8A=A4=E7=AB=99=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=20=E6=96=B0=E5=A2=9E=E8=AE=BE=E5=A4=87=E5=92=8C=E7=89=A9?=
 =?UTF-8?q?=E8=B5=84=E7=AE=A1=E7=90=86=E8=B7=B3=E8=BD=AC=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/screen/src/router/index.js           |   4 +-
 .../src/views/EquipmentManagement/index.js    |  52 +-
 .../src/views/EquipmentManagement/index.vue   |   2 +-
 .../src/views/MaterialManagement/index.js     |  50 +-
 .../src/views/MaterialManagement/index.vue    |   7 +-
 .../views/ServiceStationManagePage/index.vue  |  40 +-
 .../src/views/SnowEventManagement/index.js    | 463 ++++++++++++++++++
 .../src/views/SnowEventManagement/index.vue   | 149 ++++++
 8 files changed, 747 insertions(+), 20 deletions(-)
 create mode 100644 packages/screen/src/views/SnowEventManagement/index.js
 create mode 100644 packages/screen/src/views/SnowEventManagement/index.vue

diff --git a/packages/screen/src/router/index.js b/packages/screen/src/router/index.js
index c48a536..5c86e34 100644
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@@ -18,12 +18,12 @@ const routes = [
     component: () => import('../views/ServiceStationManagePage/index.vue')
   },
   {
-    path: '/yhzsb',
+    path: '/yhzsb/:data',
     name: 'yhzsb',
     component: () => import('../views/EquipmentManagement/index.vue')
   },
   {
-    path: '/yhzwz',
+    path: '/yhzwz/:data',
     name: 'yhzwz',
     component: () => import('../views/MaterialManagement/index.vue')
   }
diff --git a/packages/screen/src/views/EquipmentManagement/index.js b/packages/screen/src/views/EquipmentManagement/index.js
index 0f12fa3..c6f2f07 100644
--- a/packages/screen/src/views/EquipmentManagement/index.js
+++ b/packages/screen/src/views/EquipmentManagement/index.js
@@ -1,9 +1,10 @@
-import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
 import { request } from "@/utils/request";
 import { Search } from "@element-plus/icons-vue";
 import DetailDialog from "./detailDialog.vue";
 import EditDialog from "./editDialog.vue";
 import AddDialog from "./addDialog.vue";
+import { useRoute } from 'vue-router'
 
 const treeData = ref([]);
 const treeProps = {
@@ -122,6 +123,7 @@ const getTreeData = async () => {
 };
 // 处理节点点击事件
 const handleNodeClick = (data, node) => {
+    if (!data || !data.type) return;
     if (data.type === 'area' && node.expanded === false) {
         console.log('树节点关闭', node.expanded)
         yhzid.value = ''; // 重置养护站id
@@ -395,13 +397,49 @@ const openAddEquipmentModel = () => {
 }
 
 
+
+
 export default () => {
 
     const treeRef = ref(null);
     watch(() => filterText.value, (val) => {
         treeRef.value.filter(val || '')
+
+        // 添加自动点击逻辑
+
+        nextTick(() => {
+            setTimeout(() => {
+                const visibleNodes = getFilteredVisibleNodes()
+                if (visibleNodes.length === 2) {
+                    handleAutoClickNode(visibleNodes[1])
+                }
+            }, 100) // 增加 100ms 延迟确保过滤完成
+        })
+
     })
 
+    // 获取过滤后的可见节点
+    const getFilteredVisibleNodes = () => {
+        return Object.values(treeRef.value?.store?.nodesMap || {})
+            .filter(node => node.visible && !node.isHidden)
+    }
+    const handleAutoClickNode = (node) => {
+        // 展开父节点
+        if (node.parent) {
+            node.parent.expanded = true
+        }
+
+        // 执行点击逻辑
+        handleNodeClick(
+            node.data,
+            {
+                data: node.data,
+                expanded: false,
+                isCurrent: true
+            }
+        )
+    }
+
     watch(
         [() => filterData, qxmc, yhzid],
         ([newFilterData, newQxmc, newYhzid]) => {
@@ -410,10 +448,16 @@ export default () => {
         { deep: true }
     )
 
+    const route = useRoute()
 
-    onMounted(() => {
-        getTreeData();
-        getyhzsbList();
+
+    onMounted(async () => {
+        await getTreeData();
+        await getyhzsbList();
+        const rowData = JSON.parse(decodeURIComponent(route.params.data));
+        if (rowData) {
+            filterText.value = rowData.mc;
+        };
     });
     return {
         treeRef,
diff --git a/packages/screen/src/views/EquipmentManagement/index.vue b/packages/screen/src/views/EquipmentManagement/index.vue
index 3ec3c12..cdf82a5 100644
--- a/packages/screen/src/views/EquipmentManagement/index.vue
+++ b/packages/screen/src/views/EquipmentManagement/index.vue
@@ -92,7 +92,7 @@ import MyDialog from "../../component/MyDialog";
 const script = scriptFn();
 const { treeRef, dialogRef } = script;
 </script>
-<style>
+<style scoped>
 /* * {
   border: 1px solid #ccc;
 } */
diff --git a/packages/screen/src/views/MaterialManagement/index.js b/packages/screen/src/views/MaterialManagement/index.js
index e5e0afd..8c82d54 100644
--- a/packages/screen/src/views/MaterialManagement/index.js
+++ b/packages/screen/src/views/MaterialManagement/index.js
@@ -1,10 +1,10 @@
-import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
 import { request } from "@/utils/request";
 import { Search } from "@element-plus/icons-vue";
 import DetailDialog from "./detailDialog.vue";
 import EditDialog from "./editDialog.vue";
 import AddDialog from "./addDialog.vue";
-import { th } from "element-plus/es/locales.mjs";
+import { useRoute } from 'vue-router'
 
 const treeData = ref([]);
 const treeProps = {
@@ -110,6 +110,7 @@ const getTreeData = async () => {
 };
 // 处理节点点击事件
 const handleNodeClick = (data, node) => {
+    if (!data || !data.type) return;
     if (data.type === 'area' && node.expanded === false) {
         console.log('树节点关闭', node.expanded)
         yhzid.value = ''; // 重置养护站id
@@ -388,8 +389,41 @@ export default () => {
     const treeRef = ref(null);
     watch(() => filterText.value, (val) => {
         treeRef.value.filter(val || '')
+
+        // 添加自动点击逻辑
+        nextTick(() => {
+            setTimeout(() => {
+                const visibleNodes = getFilteredVisibleNodes()
+                if (visibleNodes.length === 2) {
+                    handleAutoClickNode(visibleNodes[1])
+                }
+            }, 100) // 增加 100ms 延迟确保过滤完成
+        })
+
     })
 
+    // 获取过滤后的可见节点
+    const getFilteredVisibleNodes = () => {
+        return Object.values(treeRef.value?.store?.nodesMap || {})
+            .filter(node => node.visible && !node.isHidden)
+    }
+    const handleAutoClickNode = (node) => {
+        // 展开父节点
+        if (node.parent) {
+            node.parent.expanded = true
+        }
+
+        // 执行点击逻辑
+        handleNodeClick(
+            node.data,
+            {
+                data: node.data,
+                expanded: false,
+                isCurrent: true
+            }
+        )
+    }
+
     watch(
         [() => filterData, qxmc, yhzid],
         ([newFilterData, newQxmc, newYhzid]) => {
@@ -399,9 +433,15 @@ export default () => {
     )
 
 
-    onMounted(() => {
-        getTreeData();
-        getyhzwzList();
+    const route = useRoute()
+
+    onMounted(async () => {
+        await getTreeData();
+        await getyhzwzList();
+        const rowData = JSON.parse(decodeURIComponent(route.params.data));
+        if (rowData) {
+            filterText.value = rowData.mc;
+        };
     });
     return {
         treeRef,
diff --git a/packages/screen/src/views/MaterialManagement/index.vue b/packages/screen/src/views/MaterialManagement/index.vue
index de7595a..b8bdbb6 100644
--- a/packages/screen/src/views/MaterialManagement/index.vue
+++ b/packages/screen/src/views/MaterialManagement/index.vue
@@ -28,10 +28,7 @@
       </div>
       <div class="form-box">
         <div class="event-box">
-          <el-button
-            type="primary"
-            size="large"
-            @click="script.openAddModel"
+          <el-button type="primary" size="large" @click="script.openAddModel"
             >新增物资</el-button
           >
           <el-button type="info" size="large" @click="script.handelExport"
@@ -72,7 +69,7 @@ import MyDialog from "../../component/MyDialog";
 const script = scriptFn();
 const { treeRef, dialogRef } = script;
 </script>
-<style>
+<style scoped>
 /* * {
   border: 1px solid #ccc;
 } */
diff --git a/packages/screen/src/views/ServiceStationManagePage/index.vue b/packages/screen/src/views/ServiceStationManagePage/index.vue
index a71839a..414f1b5 100644
--- a/packages/screen/src/views/ServiceStationManagePage/index.vue
+++ b/packages/screen/src/views/ServiceStationManagePage/index.vue
@@ -183,6 +183,7 @@
 <script lang="ts" setup>
 import DynamicTable from "../../component/DynamicTable";
 import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { request } from "@/utils/request";
 import { Search } from "@element-plus/icons-vue";
 import MyDialog from "../../component/MyDialog";
@@ -408,10 +409,30 @@ const columns = [
   {
     prop: "sbsl",
     label: "设备数量",
+    render: (row) => () =>
+      h(
+        ElButton,
+        {
+          link: true,
+          type: "primary",
+          onClick: () => handleClickSb(row),
+        },
+        () => row.sbsl
+      ),
   },
   {
     prop: "wzsl",
     label: "物资数量",
+    render: (row) => () =>
+      h(
+        ElButton,
+        {
+          link: true,
+          type: "primary",
+          onClick: () => handleClickWz(row),
+        },
+        () => row.wzsl
+      ),
   },
   {
     prop: "rysl",
@@ -475,7 +496,7 @@ const columns = [
                   method: "POST",
                   data: {
                     id: row.id,
-                  }
+                  },
                 });
                 if (res.code === "00000") {
                   ElMessage.success("删除成功");
@@ -506,12 +527,25 @@ const pagination = reactive({
     getTableData();
   },
 });
+
+const router = useRouter();
+const route = useRoute();
+const handleClickSb = (row) => {
+  router.push({
+    path: `/yhzsb/${encodeURIComponent(JSON.stringify(row))}`,
+  });
+};
+
+const handleClickWz = (row) => {
+  router.push({
+    path: `/yhzwz/${encodeURIComponent(JSON.stringify(row))}`,
+  });
+};
 </script>
   
-  <style lang="scss" scoped>
+  <style scoped>
 .root {
   height: 100%;
-  // padding: 5px;
 }
 .event-box {
   margin: 20px 0;
diff --git a/packages/screen/src/views/SnowEventManagement/index.js b/packages/screen/src/views/SnowEventManagement/index.js
new file mode 100644
index 0000000..8c82d54
--- /dev/null
+++ b/packages/screen/src/views/SnowEventManagement/index.js
@@ -0,0 +1,463 @@
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+import { request } from "@/utils/request";
+import { Search } from "@element-plus/icons-vue";
+import DetailDialog from "./detailDialog.vue";
+import EditDialog from "./editDialog.vue";
+import AddDialog from "./addDialog.vue";
+import { useRoute } from 'vue-router'
+
+const treeData = ref([]);
+const treeProps = {
+    children: "children",
+    label: "name",
+    key: "id",
+}
+const filterText = ref(''); // 树节点过滤条件
+const tableData = ref([]);
+const qxmc = ref(''); // 区县名称
+const yhzid = ref(''); // 养护站id
+const filterData = reactive({
+    wzmc: '',
+}); // 表格过滤条件
+const pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+    pageSizes: [10, 20, 50],
+    layout: "prev, pager, next, jumper",
+    onChange: (page, pageSize) => {
+        pagination.current = page;
+        pagination.pageSize = pageSize;
+        getyhzwzList(qxmc.value, yhzid.value, filterData);
+    },
+}); // 表格分页
+const modelVisible = ref(false); // 弹窗显示状态
+const model = reactive({
+    title: '',
+    content: null,
+    props: {},
+    onCancel: null,
+    onConfirm: null,
+}); // 弹窗内容
+const dialogType = ref(''); // 弹窗类型
+const dialogRef = ref(null); // 弹窗实例
+
+const INIT_FORM = {
+    rkrq: "",
+    rkdw: "",
+    sl: "",
+    dw: "",
+    cfdd: "",
+    fzr: "",
+    lxdh: "",
+    ye: "",
+    qxmc: "",
+    wzmc: "",
+    fzrid: "",
+    yhzid: "",
+}; // 表单初始值
+const form = reactive({ ...INIT_FORM }); // 表单
+
+
+
+// 节点过滤函数
+const filterNode = (value, node) => {
+    const keyword = (value || '').toLowerCase();
+
+    const nodeData = node || {}
+
+    // 处理区域节点匹配
+    if (nodeData.type === 'area') {
+        return (nodeData.rawName || '').toLowerCase().includes(keyword)
+    }
+
+    // 处理站点节点匹配
+    if (nodeData.type === 'site') {
+        const parentData = node.parent?.data?.type === 'area' ? node.parent.data : {}
+        const parentMatch = (parentData.rawName || '').toLowerCase().includes(keyword)
+        return parentMatch || (nodeData.name || '').toLowerCase().includes(keyword)
+    }
+
+    return false
+}
+// 获取养护站列表分组
+const getTreeData = async () => {
+    try {
+        const res = await request({
+            url: '/snow-ops-platform/yhz/listAreaGroup',
+            method: 'GET'
+        })
+        if (res.code === '00000') {
+            treeData.value = Object.entries(res.data).map(([areaName, sites]) => ({
+                id: areaName,
+                name: `${areaName}(${sites.length})`,
+                type: 'area',
+                children: sites.map(site => ({
+                    id: site.id,
+                    name: `${site.mc}(${site.wzsl})`,
+                    type: 'site'
+                })),
+                rawName: areaName // 原始名称
+            }));
+            console.log('treeData', toRaw(treeData.value))
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+// 处理节点点击事件
+const handleNodeClick = (data, node) => {
+    if (!data || !data.type) return;
+    if (data.type === 'area' && node.expanded === false) {
+        console.log('树节点关闭', node.expanded)
+        yhzid.value = ''; // 重置养护站id
+        qxmc.value = ''; // 重置区县名称
+        return;
+    }
+    if (data.type === 'area') {
+        console.log('你点击的是区县', data.id)
+        yhzid.value = ''; // 重置养护站id
+        qxmc.value = data.id; // 保存区县名称
+
+    }
+    if (data.type === 'site') {
+        console.log('你点击的是站点', data.name)
+        yhzid.value = data.id; // 保存养护站id
+        qxmc.value = ''; // 重置区县名称
+    }
+};
+
+// 获取养护站物资列表
+const getyhzwzList = async (qxmc, yhzid, filterData) => {
+    try {
+        const data = {
+            qxmc: qxmc,
+            yhzid: yhzid,
+            wzmc: filterData?.wzmc || '',
+            pageNum: pagination.current,
+            pageSize: pagination.pageSize,
+        }
+        const res = await request({
+            url: '/snow-ops-platform/yjwz/list',
+            method: 'GET',
+            params: data,
+        })
+        if (res.code === '00000') {
+            tableData.value = res.data.records;
+            pagination.total = res.data.total;
+        } else {
+            tableData.value = [];
+            pagination.total = 0;
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+
+const columns = [
+    {
+        prop: 'wzmc',
+        label: '物资名称',
+    },
+    {
+        prop: 'ye',
+        label: '余量',
+    },
+    {
+        prop: 'rkdw',
+        label: '入库单位',
+    },
+    {
+        prop: 'rkrq',
+        label: '入库日期',
+    },
+    {
+        prop: 'sl',
+        label: '数量',
+    },
+    {
+        prop: 'dw',
+        label: '单位',
+    },
+    {
+        prop: 'cfdd',
+        label: '存放地点',
+    },
+    {
+        prop: 'fzr',
+        label: '负责人',
+    },
+    {
+        prop: 'lxdh',
+        label: '联系电话',
+    },
+    {
+        prop: 'qxmc',
+        label: '所属区县',
+    },
+    {
+        label: "操作",
+        fixed: "right",
+        width: 150,
+        render: (row) => () =>
+            h("div", { class: "action-btns" }, [
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            dialogType.value = 'detail'
+                            await getDetailData(row);
+                        },
+                    },
+                    () => "详情"
+                ),
+                h(
+                    ElButton,
+                    {
+                        type: "primary",
+                        link: true,
+                        onClick: async () => {
+                            dialogType.value = 'edit'
+                            await getDetailData(row);
+                        },
+                    },
+                    () => "编辑"
+                ),
+                h(
+                    ElButton,
+                    {
+                        type: "danger",
+                        link: true,
+                        onClick: async () => {
+                            try {
+                                await ElMessageBox.confirm("确定要删除该设备吗？", "删除确认", {
+                                    confirmButtonText: "确定",
+                                    cancelButtonText: "取消",
+                                    type: "warning",
+                                });
+                                const res = await request({
+                                    url: `/snow-ops-platform/yjwz/delete`,
+                                    method: 'POST',
+                                    data: {
+                                        rid: row.rid,
+                                    }
+                                });
+                                if (res.code === '00000') {
+                                    ElMessage.success('删除成功');
+                                    getyhzwzList(qxmc.value, yhzid.value, filterData);
+                                } else {
+                                    throw new Error(res.message);
+                                }
+                            } catch (error) {
+                                ElMessage.error(error.message);
+                                console.log(error);
+                            }
+                        },
+                    },
+                    () => "删除"
+                ),
+
+            ]),
+    },
+]
+
+const handleEdit = async () => {
+    try {
+        await dialogRef?.value?.dynamicComponentRef?.formRef.validate();
+        console.log('form', toRaw(form))
+        const res = await request({
+            url: '/snow-ops-platform/yjwz/update',
+            method: 'POST',
+            data: toRaw(form),
+        });
+        if (res.code === '00000') {
+            ElMessage.success('编辑成功');
+            dialogType.value = '';
+            modelVisible.value = false;
+            getyhzwzList(qxmc.value, yhzid.value, filterData);
+        } else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log('error', error)
+    }
+};
+
+// 获取养护站物资详情
+const getDetailData = async (row) => {
+    try {
+        const res = await request({
+            url: `/snow-ops-platform/yjwz/getById?rid=${row.rid}`,
+            method: 'GET',
+        });
+        if (!res || res.code !== '00000') {
+            throw new Error('获取物资详情失败')
+        }
+        if (res.code === '00000') {
+            if (dialogType.value === 'detail') {
+                model.title = `物资详情`;
+                model.content = DetailDialog;
+                model.props = {
+                    detailData: res.data,
+                };
+                model.onCancel = () => {
+                    dialogType.value = '';
+                    modelVisible.value = false;
+                };
+                model.onConfirm = () => {
+                    dialogType.value = '';
+                    modelVisible.value = false;
+                };
+                modelVisible.value = true;
+            }
+            if (dialogType.value === 'edit') {
+                model.title = `编辑物资`;
+                model.content = EditDialog;
+                Object.assign(form, res.data);
+                model.props = {
+                    detailData: res.data,
+                    form: form,
+                };
+                model.onCancel = () => {
+                    dialogType.value = '';
+                    modelVisible.value = false;
+                };
+                model.onConfirm = async () => {
+                    await handleEdit();
+                };
+                modelVisible.value = true;
+            }
+
+        }
+        else {
+            throw new Error(res.message);
+        }
+    } catch (error) {
+        ElMessage.error(error.message);
+        console.log(error);
+    }
+};
+
+// 打开新增物资弹窗
+const openAddModel = () => {
+    model.title = `新增物资`;
+    model.content = AddDialog;
+    Object.assign(form, INIT_FORM);
+    model.props = {
+        detailData: {},
+        form: form,
+    };
+    model.onCancel = () => {
+        dialogType.value = '';
+        modelVisible.value = false;
+    };
+    model.onConfirm = async () => {
+        try {
+            console.log('form', toRaw(form))
+            const res = await request({
+                url: '/snow-ops-platform/yjwz/add',
+                method: 'POST',
+                data: toRaw(form),
+            });
+            if (res.code === '00000') {
+                ElMessage.success('新增成功');
+                dialogType.value = '';
+                modelVisible.value = false;
+                getyhzwzList(qxmc.value, yhzid.value, filterData);
+            } else {
+                throw new Error(res.message);
+            }
+        } catch (error) {
+            ElMessage.error(error.message);
+            console.log('error', error)
+        }
+    };
+    modelVisible.value = true;
+}
+
+
+export default () => {
+
+    const treeRef = ref(null);
+    watch(() => filterText.value, (val) => {
+        treeRef.value.filter(val || '')
+
+        // 添加自动点击逻辑
+        nextTick(() => {
+            setTimeout(() => {
+                const visibleNodes = getFilteredVisibleNodes()
+                if (visibleNodes.length === 2) {
+                    handleAutoClickNode(visibleNodes[1])
+                }
+            }, 100) // 增加 100ms 延迟确保过滤完成
+        })
+
+    })
+
+    // 获取过滤后的可见节点
+    const getFilteredVisibleNodes = () => {
+        return Object.values(treeRef.value?.store?.nodesMap || {})
+            .filter(node => node.visible && !node.isHidden)
+    }
+    const handleAutoClickNode = (node) => {
+        // 展开父节点
+        if (node.parent) {
+            node.parent.expanded = true
+        }
+
+        // 执行点击逻辑
+        handleNodeClick(
+            node.data,
+            {
+                data: node.data,
+                expanded: false,
+                isCurrent: true
+            }
+        )
+    }
+
+    watch(
+        [() => filterData, qxmc, yhzid],
+        ([newFilterData, newQxmc, newYhzid]) => {
+            getyhzwzList(newQxmc, newYhzid, newFilterData)
+        },
+        { deep: true }
+    )
+
+
+    const route = useRoute()
+
+    onMounted(async () => {
+        await getTreeData();
+        await getyhzwzList();
+        const rowData = JSON.parse(decodeURIComponent(route.params.data));
+        if (rowData) {
+            filterText.value = rowData.mc;
+        };
+    });
+    return {
+        treeRef,
+        treeData,
+        treeProps,
+        filterText,
+        filterNode,
+        handleNodeClick,
+
+        tableData,
+        filterData,
+        pagination,
+        columns,
+        modelVisible,
+        dialogRef,
+        model,
+        openAddModel,
+    }
+}
\ No newline at end of file
diff --git a/packages/screen/src/views/SnowEventManagement/index.vue b/packages/screen/src/views/SnowEventManagement/index.vue
new file mode 100644
index 0000000..b8bdbb6
--- /dev/null
+++ b/packages/screen/src/views/SnowEventManagement/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="root">
+    <div class="left-tree">
+      <div class="fillter-box">
+        <el-input
+          v-model="script.filterText.value"
+          placeholder="请输入搜索内容"
+          clearable
+        ></el-input>
+      </div>
+      <div class="tree-box">
+        <el-tree
+          ref="treeRef"
+          :data="script.treeData.value"
+          :props="script.treeProps"
+          @node-click="script.handleNodeClick"
+          accordion
+          :filter-node-method="script.filterNode"
+        />
+      </div>
+    </div>
+    <div class="right-form">
+      <div class="select-box">
+        <div class="inline-flex">
+          <label>物资名称:</label>
+          <el-input v-model="script.filterData.wzmc"></el-input>
+        </div>
+      </div>
+      <div class="form-box">
+        <div class="event-box">
+          <el-button type="primary" size="large" @click="script.openAddModel"
+            >新增物资</el-button
+          >
+          <el-button type="info" size="large" @click="script.handelExport"
+            >导出</el-button
+          >
+        </div>
+        <div class="form-content">
+          <DynamicTable
+            :dataSource="script.tableData.value"
+            :columns="script.columns"
+            :autoHeight="true"
+            :pagination="script.pagination"
+          ></DynamicTable>
+        </div>
+      </div>
+    </div>
+    <div class="model-box">
+      <MyDialog
+        v-model="script.modelVisible.value"
+        :title="script.model?.title"
+        :dynamicComponent="script.model?.content"
+        :component-props="script.model?.props"
+        :onConfirm="script.model?.onConfirm"
+        :onCancel="script.model?.onCancel"
+        ref="dialogRef"
+        width="60%"
+      >
+      </MyDialog>
+    </div>
+  </div>
+</template>
+
+<script  setup>
+import scriptFn from "./index.js";
+import DynamicTable from "../../component/DynamicTable";
+import MyDialog from "../../component/MyDialog";
+
+const script = scriptFn();
+const { treeRef, dialogRef } = script;
+</script>
+<style scoped>
+/* * {
+  border: 1px solid #ccc;
+} */
+.root {
+  height: 100%;
+  /* padding: 45px; */
+  display: flex;
+  gap: 20px;
+}
+
+/* 左侧树形结构区域 */
+.left-tree {
+  width: 20vw;
+  height: 100%;
+  padding: 25px 25px 0 25px;
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.fillter-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tree-box {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+}
+
+/* 右侧表单区域 */
+.right-form {
+  width: 80vw;
+  height: 100%;
+  padding: 10px;
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.select-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  gap: 20px;
+}
+.inline-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.inline-flex label {
+  white-space: nowrap; /* 禁止换行 */
+}
+.form-box {
+  width: 100%;
+  height: calc(100% - 60px);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.event-box {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+}
+.form-content {
+  width: 100%;
+  height: calc(100% - 60px);
+}
+.model-box {
+  position: absolute;
+}
+</style>
\ No newline at end of file