Default Changelist

Admin

2022-09-09 bcf73ce4a874faf98629f2e1c6c4aaa84fe6296f

Default Changelist

 src/router/route.ts

@@ -127,5 +127,13 @@
        meta: {
            title: 'spi报告详情'
        }
    },
    {
        path: '/workReservation',
        name: 'workReservation',
        component: () => import('/@/views/specialWorkSystem/workPlan/workReservation/index.vue'),
        meta: {
            title: '作业预约'
        }
    }
];

 src/views/specialWorkSystem/workPlan/workAppoint/index.vue

 src/views/specialWorkSystem/workPlan/workReservation/index.vue

@@ -1,97 +1,90 @@
<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-input v-model="workPermitNo" placeholder="请输入部门名称"></el-input>
                    </div>
                </el-col>
                <el-col :span="6" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">预约日期：</span>
                    <div class="grid-content topInfo">
                        <el-select v-model="workType" placeholder="请选择作业类型">
                            <el-option
                                    v-for="item in workTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-button 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="department" label="申请部门"/>
                        <el-table-column prop="time" label="预约时间"/>
                        <el-table-column prop="fireWork" label="动火作业"/>
                        <el-table-column prop="spaceWork" label="受限空间作业"/>
                        <el-table-column prop="hangWork" label="吊装作业"/>
                        <el-table-column prop="dirtyWork" label="动土作业"/>
                        <el-table-column prop="cut" label="断路作业"/>
                        <el-table-column prop="high" label="高处作业" />
                        <el-table-column prop="tempUse" label="临时用电作业"/>
                        <el-table-column prop="block" 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.time"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="预约部门">
                <el-form-item label="申请部门">
                    <el-input
                            v-model="details.department"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动土作业">
                <el-form-item label="预约时间">
                    <el-input
                            v-model="details.dirtyWork"
                            v-model="details.time"
                            readonly
                    />
                </el-form-item>
@@ -101,15 +94,21 @@
                            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.hangWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                <el-form-item label="动土作业">
                    <el-input
                            v-model="details.spaceWork"
                            v-model="details.dirtyWork"
                            readonly
                    />
                </el-form-item>
@@ -125,25 +124,30 @@
                            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 label="盲板抽堵作业">
                    <el-input
                            v-model="details.block"
                            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-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="申请部门" prop="department">
                    <el-cascader v-model="addRecord.department" :options="departmentList" :props="casProps" :show-all-levels="false" @change="handleChange" />
                </el-form-item>
                <el-form-item label="预约时间" prop="time">
                    <el-date-picker
                            v-model="addRecord.time"
@@ -151,20 +155,14 @@
                            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.spaceWork"
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
@@ -172,9 +170,9 @@
                            v-model="addRecord.hangWork"
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                <el-form-item label="动土作业">
                    <el-input
                            v-model="addRecord.spaceWork"
                            v-model="addRecord.dirtyWork"
                    />
                </el-form-item>
                <el-form-item label="断路作业">
@@ -187,243 +185,415 @@
                            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 label="盲板抽堵作业">
                    <el-input
                            v-model="addRecord.block"
                    />
                </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>
              <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>
    </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 { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';

    // 定义接口来定义对象的类型
    interface stateType {
        homeOne: Array <type>
    }
    interface type {
        tableData: Array<any>;
        departmentList: Array<any>;
        department:string;
        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;
        workPermitNo: string;
        workType: number | null;
        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,
                workPermitNo: '',
                workType: null,
                tableData: [],
                departmentList: [],
                department: '',
                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>({
                workPermitNo: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                combustible: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                oxygen: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                carbonMonoxide: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                hydrogenSulfide: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                info: [{ 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 () => {
                getAll()
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { workType: state.workType, workPermitNo: state.workPermitNo } };
                let res = await workProcessApi().getDetectionListPage(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 getAll = async ()=>{
                const res = await workApplyApi().getAllUsers()
                if (res.data.code === '200') {
                    state.workerList = JSON.parse(JSON.stringify(res.data.data))
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 关键词查询记录
            const searchRecord = async () => {
                if (state.workPermitNo == ''&& state.workType == null) {
                    ElMessage({
                        type: 'warning',
                        message: '请输入查询关键词'
                    });
                } else {
                    getListByPage();
                }
            };

            const clearSearch = async () => {
                state.workPermitNo = '';
                state.workType = null;
                getListByPage();
            };

            // 添加气体检测方法
            const addRecord = async (data: any) => {
                let res = await workProcessApi().postDetectionReport(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));
                console.log(state.addRecord, 'state.addRecord');
            };

            // 新增修改记录
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return;
                await formEl.validate(async (valid, fields) => {
                    if (valid) {
                        const data = {
                            workPermitNo: state.addRecord.workPermitNo,
                            info: state.addRecord.info,
                            combustible: Number(state.addRecord.combustible),
                            oxygen: Number(state.addRecord.oxygen),
                            carbonMonoxide: Number(state.addRecord.carbonMonoxide),
                            hydrogenSulfide: Number(state.addRecord.hydrogenSulfide),
                            source: 2,
                        };
                        await addRecord(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 teamStrategyApi().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.groupStrategyId;
                state.deleteDialog = true;
            };

            const conFirmDelete = () => {
                deleteRecord({ groupStrategyId: state.deleteId });
                state.deleteDialog = false;
            };


            const closeAdd = () => {
                state.addRecord = {};
                state.chosenIndex = null;
            };

            const openAdd = () => {
                if (state.chosenIndex == null) {
                    state.addRecord.info = '';
                }
            };
            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,
                openAdd,
                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>

 src/views/specialWorkSystem/workProcess/gasCheck/index.vue

@@ -174,9 +174,7 @@
    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 { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
    import { workProcessApi } from '/@/api/specialWorkSystem/workProcess';
    import {workApplyApi} from "/@/api/specialWorkSystem/workApply";

    // 定义接口来定义对象的类型
    interface stateType {
@@ -278,7 +276,6 @@

            // 分页获取气体检测列表
            const getListByPage = async () => {
                getAll()
                const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { workType: state.workType, workPermitNo: state.workPermitNo } };
                let res = await workProcessApi().getDetectionListPage(data);
                if (res.data.code === '200') {
@@ -303,19 +300,6 @@
                    state.dialogPermitNo = false
                }
            }

            // 获取用户列表
            const getAll = async ()=>{
                const res = await workApplyApi().getAllUsers()
                if (res.data.code === '200') {
                    state.workerList = JSON.parse(JSON.stringify(res.data.data))
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            };

            // 关键词查询记录
            const searchRecord = async () => {