From f90ee55e6d63cd02c2b883bd5bd942c487fce56a Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期六, 20 八月 2022 16:51:33 +0800 Subject: [PATCH] 修改bug --- src/views/specialWorkSystem/workPlan/workReservation/index.vue | 428 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 422 insertions(+), 6 deletions(-) diff --git a/src/views/specialWorkSystem/workPlan/workReservation/index.vue b/src/views/specialWorkSystem/workPlan/workReservation/index.vue index 1d4d5c6..7a1cc8d 100644 --- a/src/views/specialWorkSystem/workPlan/workReservation/index.vue +++ b/src/views/specialWorkSystem/workPlan/workReservation/index.vue @@ -1,13 +1,429 @@ <template> - <div>作业预约</div> + <div class="home-container"> + <el-scrollbar height="100%"> + <el-row class="homeCard"> + <el-col :span="14"> + <div class="grid-content topInfo"> + <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 label="类型1" value="类型1"/> + <el-option label="类型2" value="类型2"/> + <el-option label="类型3" value="类型3"/> + </el-select> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> + </div> + </el-col> + </el-row> + <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="dialogAddRecord=true">新建</el-button> +<!-- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>--> + <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> + </el-col> + <el-button type="primary" :icon="Refresh" size="default"/> + </el-row> + <el-table + ref="multipleTableRef" + :data="tableData" + style="width: 100%" + :header-cell-style="{background: '#fafafa'}" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55" /> + <el-table-column type="index" 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="250"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + </div> + <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-scrollbar> + <el-dialog v-model="dialogDetails" title="作业预约"> + <el-form :model="details" label-width="120px"> + <el-form-item label="预约时间"> + <el-input + v-model="details.time" + readonly + /> + </el-form-item> + <el-form-item label="预约部门"> + <el-input + v-model="details.department" + readonly + /> + </el-form-item> + <el-form-item label="动土作业"> + <el-input + v-model="details.dirtyWork" + readonly + /> + </el-form-item> + <el-form-item label="动火作业"> + <el-input + v-model="details.fireWork" + readonly + /> + </el-form-item> + <el-form-item label="吊装作业"> + <el-input + v-model="details.hangWork" + readonly + /> + </el-form-item> + <el-form-item label="受限空间作业"> + <el-input + v-model="details.spaceWork" + readonly + /> + </el-form-item> + <el-form-item label="断路作业"> + <el-input + v-model="details.cut" + readonly + /> + </el-form-item> + <el-form-item label="高处作业"> + <el-input + v-model="details.high" + readonly + /> + </el-form-item> + <el-form-item label="盲板抽堵作业"> + <el-input + v-model="details.block" + readonly + /> + </el-form-item> + <el-form-item label="临时用电作业"> + <el-input + v-model="details.tempUse" + readonly + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd"> + <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> + <el-form-item label="预约时间" prop="time"> + <el-date-picker + v-model="addRecord.time" + type="datetime" + format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + <el-form-item label="预约部门" prop="department"> + <el-select v-model="addRecord.department" placeholder="请选择"> + <el-option label="部门一" value="部门一" /> + <el-option label="部门二" value="部门二" /> + </el-select> + </el-form-item> + <el-form-item label="动土作业"> + <el-input + v-model="addRecord.dirtyWork" + /> + </el-form-item> + <el-form-item label="动火作业"> + <el-input + v-model="addRecord.fireWork" + /> + </el-form-item> + <el-form-item label="吊装作业"> + <el-input + v-model="addRecord.hangWork" + /> + </el-form-item> + <el-form-item label="受限空间作业"> + <el-input + v-model="addRecord.spaceWork" + /> + </el-form-item> + <el-form-item label="断路作业"> + <el-input + v-model="addRecord.cut" + /> + </el-form-item> + <el-form-item label="高处作业"> + <el-input + v-model="addRecord.high" + /> + </el-form-item> + <el-form-item label="盲板抽堵作业"> + <el-input + v-model="addRecord.block" + /> + </el-form-item> + <el-form-item label="临时用电作业"> + <el-input + v-model="addRecord.tempUse" + /> + </el-form-item> + <el-form-item> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + </div> </template> -<script> - export default { - name: "index" - } +<script lang="ts" setup> + import { toRefs, reactive, ref } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + import {useUserInfo} from "/@/stores/userInfo"; + import { Session } from '/@/utils/storage'; + import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue' + import { ElTable, FormInstance, FormRules } from 'element-plus' + let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined], + }; + + interface stateType { + homeOne: Array <type> + } + interface type { + + } + // export default defineComponent({ + // name: 'workCheckinRecord', + // setup() { + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const typeValue = ref('') + const currentPage = ref(1) + const pageSize = ref(10) + const chosenIndex = ref(-1) + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`) + } + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`) + } + const tableData = reactive( + [ + { + time: '2022-06-29 12:32:52', + department: '电工部', + dirtyWork: '', + fireWork: '', + hangWork: '', + spaceWork: '', + cut: '', + high: '', + block: '', + tempUse: '' + }, + { + time: '2022-06-29 12:32:52', + department: '电工部', + dirtyWork: '', + fireWork: '', + hangWork: '', + spaceWork: '', + cut: '', + high: '', + block: '', + tempUse: '' + }, + { + time: '2022-06-29 12:32:52', + department: '土木', + dirtyWork: '', + fireWork: '', + hangWork: '', + spaceWork: '', + cut: '', + high: '', + block: '', + tempUse: '' + } + ] + ) + const addRef = ref<FormInstance>() + const addRules = reactive<FormRules>({ + time:[{required: true, message: '该内容不能为空',trigger:'blur'}], + department:[{required: true, message: '该内容不能为空',trigger:'blur'}] + }) + const dialogDetails = ref(false) + const dialogAddRecord = ref(false) + const deleteDialog = ref(false) + const addRecord = ref({}) + const details = ref({}) + const viewRecord = (row) =>{ + details.value = JSON.parse(JSON.stringify(row)) + dialogDetails.value = true + } + const deleteRecord = (index) =>{ + chosenIndex.value = index + deleteDialog.value = true + } + const conFirmDelete = ()=> { + tableData.splice(chosenIndex.value,1) + deleteDialog.value = false + } + const confirmAddRecord = async (formEl: FormInstance | undefined) =>{ + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + if(chosenIndex.value == -1){ + tableData.unshift(addRecord.value) + }else{ + tableData[chosenIndex.value] = addRecord.value + } + dialogAddRecord.value =false + } else { + console.log('error submit!', fields) + } + }) + + } + const closeAdd =()=>{ + addRecord.value={} + chosenIndex.value = -1 + } + const indexClear = ()=>{ + chosenIndex.value = -1 + } + const editRecord =(index, row)=>{ + dialogAddRecord.value = true + chosenIndex.value = index + addRecord.value = JSON.parse(JSON.stringify(row)) + } + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId',value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; </script> -<style scoped> +<style scoped lang="scss"> + $homeNavLengh: 8; + .home-container { + height: 100%; + overflow: hidden; + padding: 20px; + .homeCard{ + width: 100%; + padding: 20px; + background: #fff; + border-radius: 4px; + } + .el-row{ + display: flex; + align-items: center; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + .grid-content{ + align-items: center; + min-height: 36px; + } + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + &>div{ + white-space: nowrap; + margin-right: 20px; + } + } + } + .mainPages{ + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + .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-input{ + width: 100% !important; + } + .el-date-editor::v-deep{ + width: 100%; + } + .el-select{ + width: 100%; + } </style> -- Gitblit v1.9.2