bxztApp/packages/screen/src/views/EquipmentManagement/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.sbmc"></el-input>
        </div>
        <div class="inline-flex">
          <label>设备大类:</label>
          <el-input v-model="script.filterData.sbdl"></el-input>
        </div>
        <div class="inline-flex">
          <label>设备类型:</label>
          <el-input v-model="script.filterData.sblx"></el-input>
        </div>
        <div class="inline-flex">
          <label>状态:</label>
          <el-select
            v-model="script.filterData.sbzt"
            placeholder="请选择"
            clearable
            style="width: 150px"
          >
            <el-option label="完好" value="完好" />
            <el-option label="损坏" value="损坏" />
          </el-select>
        </div>
      </div>
      <div class="form-box">
        <div class="event-box">
          <el-button
            type="primary"
            size="large"
            @click="script.openAddEquipmentModel"
            >新增设备</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>
/* * {
  border: 1px solid #ccc;
} */
.root {
  height: 100%;
  padding: 45px;
  display: flex;
  gap: 20px;
}

/* 左侧树形结构区域 */
.left-tree {
  width: 20vw;
  height: 100%;
  padding: 10px;
  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>