bxztApp/packages/screen/src/views/SnowEventManagement/index.vue

<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.routeNo"></el-input>
        </div>
        <div class="inline-flex">
          <label>桩号:</label>
          <el-input v-model="script.filterData.stakeNo"></el-input>
        </div>
        <div class="inline-flex">
          <label>填报时间:</label>
          <el-input v-model="script.filterData.reportTime"></el-input>
        </div>
      </div>
      <div class="form-box">
        <div class="event-box">
          <el-button type="primary" size="large" @click="script.generateReport"
            >生成报告</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>