From be17b7971f263369fd78b1f257f05f6a4c18a6c6 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期五, 15 七月 2022 09:06:49 +0800 Subject: [PATCH] 添加修改页面 --- src/views/specialWorkSystem/workPlan/workReservation/index.vue | 206 +++++++++++++++++++++++++++------------------------ 1 files changed, 108 insertions(+), 98 deletions(-) diff --git a/src/views/specialWorkSystem/workPlan/workReservation/index.vue b/src/views/specialWorkSystem/workPlan/workReservation/index.vue index 8546f9f..392884d 100644 --- a/src/views/specialWorkSystem/workPlan/workReservation/index.vue +++ b/src/views/specialWorkSystem/workPlan/workReservation/index.vue @@ -2,71 +2,69 @@ <div class="home-container"> <el-scrollbar height="100%"> <el-row class="homeCard"> -<!-- <div class="homeCard">--> - <el-col :span="6"> + <el-col :span="16"> <div class="grid-content topInfo"> - <div>当前所属部门:</div> - <div>电工部</div> - </div> - </el-col> - <el-col :span="6"> - <div class="grid-content topInfo"> - <div>预约时间:</div> - <div class="block"> - <el-date-picker - v-model="searchTime" - type="date" - placeholder="" - size="large" + <div>当前所属部门:<span>电工部</span></div> + <el-date-picker + v-model="searchTime" + type="datetime" + placeholder="预约时间" + size="large" + style="width: 100%;white-space: nowrap;margin-right: 20px" + /> + <el-select v-model="typeValue" placeholder="请选择预约类型" style="width: 100%"> + <el-option + v-for="item in reserveOptions" + :key="item.value" + :label="item.label" + :value="item.value" /> - </div> + </el-select> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> </div> </el-col> - <el-col :span="6"> - <div class="grid-content topInfo"> - <div>预约类型:</div> - <div> - <el-select v-model="typeValue" class="m-2" placeholder="Select" size="large"> - <el-option - v-for="item in reserveOptions" - :key="item.value" - :label="item.label" - :value="item.value" - /> - </el-select> - </div> - </div> - </el-col> - <el-col :span="6" class="topBtns"> - <div class="grid-content topInfo"> - <div style="margin-right: 20px"><el-button type="primary" plain>查询历史</el-button></div> - <div><el-button type="success" @click="dialogFormVisible = true">新增预约</el-button></div> - </div> - </el-col> -<!-- </div>--> </el-row> - <el-row> - <div class="homeCard"> - <el-table :data="tableData" border style="width: 100%"> - <el-table-column prop="id" label="编号" width="120" /> - <el-table-column prop="time" label="预约时间" width="150" /> - <el-table-column prop="department" label="预约部门" width="180" /> - <el-table-column prop="dirtyWork" label="动土作业" width="100" /> - <el-table-column prop="fireWork" label="动火作业" width="100" /> - <el-table-column prop="hangWork" label="吊装作业" width="100" /> - <el-table-column prop="spaceWork" label="受限空间作业"/> - <el-table-column prop="cut" label="断路"/> - <el-table-column prop="high" label="高处" /> - <el-table-column prop="block" label="盲板抽堵"/> - <el-table-column prop="tempUse" label="临时用电"/> - <el-table-column fixed="right" label="操作" align="center" width="180"> - <template #default> - <el-button link type="primary" size="small">操作</el-button> - </template> - </el-table-column> - </el-table> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogFormVisible = true">新增预约</el-button> + </el-col> + </el-row> + <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background: '#fafafa'}"> + <el-table-column prop="id" label="编号" width="120" /> + <el-table-column prop="time" label="预约时间" width="150" /> + <el-table-column prop="department" label="预约部门" width="180" /> + <el-table-column prop="dirtyWork" label="动土作业" width="100" /> + <el-table-column prop="fireWork" label="动火作业" width="100" /> + <el-table-column prop="hangWork" label="吊装作业" width="100" /> + <el-table-column prop="spaceWork" label="受限空间作业"/> + <el-table-column prop="cut" label="断路"/> + <el-table-column prop="high" label="高处" /> + <el-table-column prop="block" label="盲板抽堵"/> + <el-table-column prop="tempUse" label="临时用电"/> + <el-table-column fixed="right" label="操作" align="center" width="180"> + <template #default> + <el-button link type="primary" size="small">操作</el-button> + </template> + </el-table-column> + </el-table> </div> - </el-row> + <div class="pageBtn"> + <el-pagination + v-model:currentPage="currentPage" + v-model:page-size="pageSize" + :page-sizes="[10, 15]" + small=false + background + layout="total, sizes, prev, pager, next, jumper" + :total="100" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </div> <el-dialog v-model="dialogFormVisible" title="新增预约"> <el-form :model="reservationForm"> <el-form-item label="我的当前部门" :label-width="formLabelWidth"> @@ -107,6 +105,7 @@ import { initBackEndControlRoutes } from '/@/router/backEnd'; import {useUserInfo} from "/@/stores/userInfo"; import { Session } from '/@/utils/storage'; + import { Edit, View, Plus, Delete, Refresh, Search, Upload } from '@element-plus/icons-vue' let global: any = { homeChartOne: null, homeChartTwo: null, @@ -213,6 +212,7 @@ typeValue, reserveOptions, tableData, + Plus, dialogFormVisible, formLabelWidth, reservationForm, @@ -228,59 +228,69 @@ height: 100%; overflow: hidden; padding: 20px; - .el-row{ - margin-bottom: 20px; - } - .el-row:last-of-type { - margin-bottom: 0; - } .homeCard{ width: 100%; - display: flex; - align-items: center; padding: 20px; background: #fff; border-radius: 4px; } - .grid-content{ - align-items: center; - min-height: 36px; - } - - .topInfo{ + .el-row{ display: flex; align-items: center; - font-size: 16px; - font-weight: bold; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } - .demo-datetime-picker { + .topInfo { display: flex; - width: 100%; - padding: 0; - flex-wrap: wrap; - } - .demo-datetime-picker .block { - padding: 30px 0; - text-align: center; - border-right: solid 1px var(--el-border-color); - flex: 1; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } } } - .topBtns{ + .main-card{ + width: 100%; + .cardTop{ + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn{ + margin: 0; + } + } + } + .pageBtn{ display: flex; + align-items: center; justify-content: right; + margin-top: 20px; + + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } } - .el-button--text { - margin-right: 15px; - } - .el-select { - width: 300px; - } - .el-input { - width: 300px; - } - .dialog-footer button:first-child { - margin-right: 10px; - } + } + .el-input{ + width: 100% !important; + } + .el-date-editor::v-deep{ + width: 100%; + } + .el-select{ + width: 100%; } </style> -- Gitblit v1.9.2