172 lines
4.0 KiB
Vue
172 lines
4.0 KiB
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 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> |