| | |
| | | <template> |
| | | <div> |
| | | <div class="search"> |
| | | <el-row :gutter="10" style="width: 100%;"> |
| | | <el-col :span="20" style="display: flex;flex-wrap: wrap;"> |
| | | <div class="search_thing"> |
| | | <div class="search_label">流程编号:</div> |
| | | <div class="search_input"> |
| | | <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%" |
| | | @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input> |
| | | </div> |
| | | </div> |
| | | <div class="search_thing" style="padding-left: 20px;"> |
| | | <el-button size="small" @click="resetSearch">重 置</el-button> |
| | | <el-button size="small" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查 询</el-button> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <div class="btns"> |
| | | <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button> |
| | | <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form :model="search" ref="search" size="small" :inline="true"> |
| | | <el-form-item label="流程编号"> |
| | | <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%" |
| | | @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="mini" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查询</el-button> |
| | | <el-button size="mini" @click="resetSearch">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div> |
| | | <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button> |
| | | <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button> |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <el-table :data="tableDatalist" height="calc(100vh - 20em)" style="width: 100% ;" |
| | |
| | | </el-table> |
| | | <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]" |
| | | :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange"> |
| | | @current-change="handleCurrentChange" background> |
| | | </el-pagination> |
| | | </div> |
| | | <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备情况" |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .dialog-content { |
| | | max-height: 70vh; |
| | | /* 设置最大高度 */ |
| | | overflow-y: auto; |
| | | /* 启用垂直滚动 */ |
| | | } |
| | | |
| | | h4 { |
| | | font-weight: 400; |
| | | font-size: 16px; |
| | | margin: 10px 0; |
| | | } |
| | | |
| | | /* |
| | | 保存提交按钮样式 |
| | | */ |
| | | h4 .title { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | h4 .title .line { |
| | | display: inline-block; |
| | | width: 3px; |
| | | height: 16px; |
| | | background: #3A7BFA; |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | .tables { |
| | | width: 100%; |
| | | height: calc(100vh - 15em); |
| | | } |
| | | |
| | | .el-from { |
| | | max-width: 400px; |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | .form-row { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | |
| | | .form-row .el-form-item { |
| | | flex: 1; |
| | | /* 每个表单项占据相同比例的空间 */ |
| | | margin-right: 100px; |
| | | /* 可选:为右侧元素添加间距 */ |
| | | } |
| | | |
| | | /* 移除最后一个元素的右边距 */ |
| | | .form-row .el-form-item:last-child { |
| | | margin-right: 0; |
| | | |
| | | } |
| | | |
| | | .search { |
| | | background-color: #fff; |
| | | margin: 10px 0; |
| | | height: 46px; |
| | | display: flex; |
| | | align-items: center; |
| | | position: relative; |
| | | } |
| | | |
| | | .search_thing { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 40px; |
| | | } |
| | | |
| | | .search_label { |
| | | width: 70px; |
| | | font-size: 14px; |
| | | text-align: right; |
| | | } |
| | | |
| | | .search_input { |
| | | width: 70%; |
| | | } |
| | | |
| | | .btns { |
| | | position: absolute; |
| | | right: 0; |
| | | top: 50%; |
| | | transform: translate(0, -50%); |
| | | } |
| | | |
| | | .form .search_label { |
| | | width: 120px; |
| | | justify-content: space-between; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |