From 54051120c1b27732f05b8c2f4a0112ac02323696 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期三, 14 九月 2022 17:36:40 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt --- src/views/specialWorkSystem/workPlan/workReservation/index.vue | 775 +++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 481 insertions(+), 294 deletions(-) diff --git a/src/views/specialWorkSystem/workPlan/workReservation/index.vue b/src/views/specialWorkSystem/workPlan/workReservation/index.vue index 7c89a19..8e696b2 100644 --- a/src/views/specialWorkSystem/workPlan/workReservation/index.vue +++ b/src/views/specialWorkSystem/workPlan/workReservation/index.vue @@ -1,429 +1,616 @@ <template> <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 style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="6" style="display:flex;align-items: center"> + <span style="white-space: nowrap">申请部门:</span> + <div class="grid-content topInfo"> + <el-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/> + </div> + </el-col> + <el-col :span="6" style="display:flex;align-items: center;"> + <span style="white-space: nowrap;margin-left: 20px">预约日期:</span> + <div class="grid-content topInfo"> + <el-date-picker + v-model="searchDate" + type="date" + format="YYYY-MM-DD" value-format="YYYY-MM-DD" + /> + </div> + </el-col> + <el-button style="margin-left: 20px" type="primary" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> + </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-col> + <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData"/> + </el-row> + <el-table + :data="tableData" + style="width: 100%" + height="calc(100% - 100px)" + :header-cell-style="{background: '#fafafa'}" + > +<!-- <el-table-column type="selection" width="55" />--> + <el-table-column type="index" label="序号" width="80" /> + <el-table-column prop="applyDepName" align="center" label="申请部门"/> + <el-table-column prop="appointmentTime" align="center" label="预约时间"/> + <el-table-column prop="hotWork" align="center" label="动火作业"/> + <el-table-column prop="confinedSpaceOper" align="center" label="受限空间作业"/> + <el-table-column prop="liftingOper" align="center" label="吊装作业"/> + <el-table-column prop="groundBreakingOper" align="center" label="动土作业"/> + <el-table-column prop="openCircuitOper" align="center" label="断路作业"/> + <el-table-column prop="workAtHeight" align="center" label="高处作业" /> + <el-table-column prop="temporaryPowerOper" align="center" label="临时用电作业"/> + <el-table-column prop="blindPlatePluggingOper" align="center" 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="editRecordBtn(scope.$index, scope.row)">修改</el-button> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + <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="totalSize" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> </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.applyDepName" + readonly + /> + </el-form-item> <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" + v-model="details.appointmentTime" 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" + v-model="details.hotWork" readonly /> </el-form-item> <el-form-item label="受限空间作业"> <el-input - v-model="details.spaceWork" + v-model="details.confinedSpaceOper" + readonly + /> + </el-form-item> + <el-form-item label="吊装作业"> + <el-input + v-model="details.liftingOper" + readonly + /> + </el-form-item> + <el-form-item label="动土作业"> + <el-input + v-model="details.groundBreakingOper" readonly /> </el-form-item> <el-form-item label="断路作业"> <el-input - v-model="details.cut" + v-model="details.openCircuitOper" 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" + v-model="details.workAtHeight" readonly /> </el-form-item> <el-form-item label="临时用电作业"> <el-input - v-model="details.tempUse" + v-model="details.temporaryPowerOper" readonly /> </el-form-item> - <el-form-item> - <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + <el-form-item label="盲板抽堵作业"> + <el-input + v-model="details.blindPlatePluggingOper" + readonly + /> </el-form-item> </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button type="primary" @click="dialogDetails = false">确认</el-button> + </span> + </template> </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-form-item label="申请部门" prop="applyDepId"> + <el-cascader placeholder="若选择部门非本人所在部门,则记录不会出现在该页面" :disabled = isDisabled v-model="addRecord.applyDepId" :options="departmentList" :props="casProps" :show-all-levels="false" @change="handleChange" /> + </el-form-item> + <el-form-item label="预约时间" prop="appointmentTime"> <el-date-picker - v-model="addRecord.time" - type="datetime" - format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" + v-model="addRecord.appointmentTime" + type="date" + format="YYYY-MM-DD" value-format="YYYY-MM-DD" + :disabled = isDisabled /> </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-form-item label="动火作业" prop="hotWork"> <el-input - v-model="addRecord.dirtyWork" + v-model="addRecord.hotWork" /> </el-form-item> - <el-form-item label="动火作业"> + <el-form-item label="受限空间作业" prop="confinedSpaceOper"> <el-input - v-model="addRecord.fireWork" + v-model="addRecord.confinedSpaceOper" /> </el-form-item> - <el-form-item label="吊装作业"> + <el-form-item label="吊装作业" prop="liftingOper"> <el-input - v-model="addRecord.hangWork" + v-model="addRecord.liftingOper" /> </el-form-item> - <el-form-item label="受限空间作业"> + <el-form-item label="动土作业" prop="groundBreakingOper"> <el-input - v-model="addRecord.spaceWork" + v-model="addRecord.groundBreakingOper" /> </el-form-item> - <el-form-item label="断路作业"> + <el-form-item label="断路作业" prop="openCircuitOper"> <el-input - v-model="addRecord.cut" + v-model="addRecord.openCircuitOper" /> </el-form-item> - <el-form-item label="高处作业"> + <el-form-item label="高处作业" prop="workAtHeight"> <el-input - v-model="addRecord.high" + v-model="addRecord.workAtHeight" /> </el-form-item> - <el-form-item label="盲板抽堵作业"> + <el-form-item label="临时用电作业" prop="temporaryPowerOper"> <el-input - v-model="addRecord.block" + v-model="addRecord.temporaryPowerOper" /> </el-form-item> - <el-form-item label="临时用电作业"> + <el-form-item label="盲板抽堵作业" prop="blindPlatePluggingOper"> <el-input - v-model="addRecord.tempUse" + v-model="addRecord.blindPlatePluggingOper" /> - </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> + <template #footer> + <span class="dialog-footer"> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </span> + </template> </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> + <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 lang="ts" setup> - import { toRefs, reactive, ref } from 'vue'; +<script lang="ts"> + import {toRefs, reactive, ref, onMounted, defineAsyncComponent} from 'vue'; import { storeToRefs } from 'pinia'; import { initBackEndControlRoutes } from '/@/router/backEnd'; - import {useUserInfo} from "/@/stores/userInfo"; + 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], - }; + import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'; + import { ElTable, ElMessage, ElMessageBox } from 'element-plus' + import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus' + import { workReserveApi } from '/@/api/specialWorkSystem/workPlan/workReservation'; + import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage'; + // 定义接口来定义对象的类型 interface stateType { - homeOne: Array <type> - } - interface type { + tableData: Array<any>; + departmentList: Array<any>; + casProps: {}; + multipleSelection: Array<any>; + deleteArr: Array<any>; + dialogDetails: boolean; + dialogAddRecord: boolean; + deleteDialog: boolean; + deleteSetDialog: boolean; + pageIndex: number; + pageSize: number; + chosenIndex: null | number; + deleteId: null | number; + searchDep: number | null; + searchDate: string; + isDisabled:boolean; + totalSize: number; + addRecord: { + }; + details: { + + }; + workTypeList: Array<any> } - // export default defineComponent({ - // name: 'workCheckinRecord', - // setup() { - const userInfo = useUserInfo() + + export default { + name: 'workReservation', + components: {}, + 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 state = reactive<stateType>({ + pageIndex: 1, + pageSize: 10, + totalSize: 0, + chosenIndex: null, + searchDep: null, + searchDate: '', + isDisabled: false, + tableData: [], + departmentList: [], + casProps: { + expandTrigger: 'hover', + emitPath: false, + value: 'depId', + label: 'depName', + checkStrictly: true + }, + multipleSelection: [], + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + deleteSetDialog: false, + addRecord: {}, + details: {}, + deleteId: null, + deleteArr: [], + workTypeList: [ + { id: 1, name: '动火作业' }, + { id: 2, name: '受限空间作业' }, + { id: 3, name: '吊装作业' }, + { id: 4, name: '动土作业' }, + { id: 5, name: '断路作业' }, + { id: 6, name: '高处作业' }, + { id: 7, name: '临时用电作业' }, + { id: 8, name: '盲板抽堵作业' } ] - ) - 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 addRef = ref<FormInstance>(); + const addRules = reactive<FormRules>({ + applyDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + appointmentTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + hotWork: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + groundBreakingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + blindPlatePluggingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + temporaryPowerOper : [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + workAtHeight: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + openCircuitOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + liftingOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + confinedSpaceOper: [{ required: true, message: '该内容不能为空', trigger: 'blur' }] + }); + + // 页面载入时执行方法 + onMounted(() => { + getListByPage() + getAllDepartment() + }); + + // 获取部门列表 + const getAllDepartment = async () => { + let res = await teamManageApi().getAllDepartment(); + if (res.data.code === '200') { + state.departmentList = JSON.parse(JSON.stringify(res.data.data)) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 分页获取气体检测列表 + const getListByPage = async () => { + const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { applyDepId: state.searchDep, appointmentTime: state.searchDate } }; + let res = await workReserveApi().getReserveListPage(data); + if (res.data.code === '200') { + state.tableData = JSON.parse(JSON.stringify(res.data.data)) + state.totalSize = res.data.total; + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 关键词查询记录 + const searchRecord = async () => { + if (state.searchDep == null && state.searchDate == '') { + ElMessage({ + type: 'warning', + message: '请输入查询关键词' + }); + } else { + getListByPage(); + } + }; + + const clearSearch = async () => { + state.searchDep = null; + state.searchDate = ''; + getListByPage(); + }; + + // 添加记录方法 + const addRecord = async (data: any) => { + let res = await workReserveApi().addRecord(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 修改记录方法 + const editRecord = async (data: any) => { + let res = await workReserveApi().editRecord(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 点击修改 + const editRecordBtn = (index, row) => { + state.dialogAddRecord = true; + state.chosenIndex = index; + state.addRecord = JSON.parse(JSON.stringify(row)); + state.isDisabled = true + }; + + // 新增修改记录 + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate(async (valid, fields) => { + if (valid) { + const data = { + applyDepId: state.addRecord.applyDepId, + appointmentTime: state.addRecord.appointmentTime, + hotWork: Number(state.addRecord.hotWork), + groundBreakingOper: Number(state.addRecord.groundBreakingOper), + blindPlatePluggingOper: Number(state.addRecord.blindPlatePluggingOper), + temporaryPowerOper: Number(state.addRecord.temporaryPowerOper), + workAtHeight: Number(state.addRecord.workAtHeight), + openCircuitOper: Number(state.addRecord.openCircuitOper), + liftingOper: Number(state.addRecord.liftingOper), + confinedSpaceOper: Number(state.addRecord.confinedSpaceOper), + }; + if (state.chosenIndex == null) { + await addRecord(data); + } else { + data.id = state.addRecord.id + await editRecord(data); + } + state.dialogAddRecord = false; + getListByPage(); + } else { + console.log('error submit!', fields); + } + }); + }; + + const handleSizeChange = (val: number) => { + state.pageSize = val; + getListByPage(); + }; + const handleCurrentChange = (val: number) => { + state.pageIndex = val; + getListByPage(); + }; + + // 查看记录 + const viewRecord = (row) => { + state.details = JSON.parse(JSON.stringify(row)); + state.dialogDetails = true; + }; + + // 刷新 + const reLoadData = async () => { + getListByPage(); + }; + + + // 删除方法 + const deleteRecord = async (data: any) => { + let res = await workReserveApi().deleteRecord(data); + if (res.data.code === '200') { + ElMessage({ + type: 'success', + message: res.data.msg + }); + getListByPage(); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + const deleteRecordBtn = (row) => { + state.deleteId = row.id; + state.deleteDialog = true; + }; + + const conFirmDelete = () => { + deleteRecord({ id: state.deleteId }); + state.deleteDialog = false; + }; + + + const closeAdd = () => { + state.addRecord = {}; + state.chosenIndex = null; + state.isDisabled = false + }; + + const indexClear = () => { + state.deleteId = null; + }; + // 折线图 const renderMenu = async (value: string) => { - Session.set('projectId',value) - userInfos.value.projectId = value + Session.set('projectId', value); + userInfos.value.projectId = value; await initBackEndControlRoutes(); }; + return { + addRef, + addRules, + View, + Edit, + Delete, + Refresh, + Plus, + Search, + searchRecord, + clearSearch, + viewRecord, + editRecordBtn, + deleteRecordBtn, + conFirmDelete, + getListByPage, + reLoadData, + handleSizeChange, + handleCurrentChange, + confirmAddRecord, + closeAdd, + indexClear, + ...toRefs(state) + }; + } + }; </script> <style scoped lang="scss"> $homeNavLengh: 8; + .red{ + color: red; + } .home-container { - height: 100%; + height: calc(100vh - 144px); + box-sizing: border-box; overflow: hidden; - padding: 20px; - .homeCard{ + .homeCard { width: 100%; padding: 20px; + box-sizing: border-box; background: #fff; border-radius: 4px; + + .main-card { + width: 100%; + height: 100%; + .cardTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn { + margin: 0; + } + } + .pageBtn { + height: 60px; + display: flex; + align-items: center; + justify-content: right; + + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } + } + &:last-of-type { + height: calc(100% - 100px); + } } - .el-row{ + .el-row { display: flex; align-items: center; margin-bottom: 20px; &:last-child { margin-bottom: 0; } - .grid-content{ + .grid-content { align-items: center; min-height: 36px; } .topInfo { + width: 100%; display: flex; align-items: center; font-size: 16px; font-weight: bold; - &>div{ + & > 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{ + ::v-deep(.el-date-editor){ width: 100%; } .el-select{ width: 100%; } + :deep(.el-cascader){ + width: 100% !important; + } </style> -- Gitblit v1.9.2