Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2022-08-02 ac7d9e20978e710a54164b2e74ea464027754b7e

Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

 src/api/basicDateManage/personShiftManage/workingHours/index.ts

对比新文件
@@ -0,0 +1,58 @@
import request from '/@/utils/request';

export function workingHoursApi() {
    return {
        // 获取工作时间段列表
        getWorkTimePeriod: () =>{
            return request({
                url: `/workTime/getWorkTimePeriod`,
                method: 'get'
            })
        },

        //工作时间段分页列表
        postPeriodPage: (data: object)=>{
            return request({
                url: `/workTime/getWorkTimePeriodByPage?pageSiz`,
                method: 'post',
                data: data
            })
        },

        // 新增工作时间段
        postWorkTimePeriod: (data: object) => {
            return request({
                url: `/workTime/addWorkTimePeriod`,
                method: 'post',
                data: data
            });
        },

        // 修改工作时间段
        updateWorkTimePeriod: (data: object) =>{
            return request({
                url: `/workTime/updateWorkTimePeriod`,
                method: 'post',
                data: data
            });
        },

        // 删除工作时间段
        deletWorkTimePeriod: (data: object) =>{
            return request({
                url: `/workTime/deletWorkTimePeriod`,
                method: 'post',
                data: data
            });
        },

        // 批量删除
        deleteBatchWorkTimePeriod: (data: any) =>{
            return request({
                url: `/workTime/deleteBatchWorkTimePeriod`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/api/basicDateManage/personShiftManage/workingHoursSet/index.ts

对比新文件
@@ -0,0 +1,14 @@
import request from '/@/utils/request';

export function workingHoursApi() {
    return {
        //工作时间组分页列表
        postWorkTimeGroupPage: (data: object)=>{
            return request({
                url: `/workTime/getWorkTimeGroupByPage`,
                method: 'post',
                data: data
            })
        }
    };
}

 src/assets/loginPage/equipment.JPG

 src/assets/loginPage/map-bg.jpg

 src/assets/loginPage/map-bg.png

 src/assets/loginPage/watersys.JPG

 src/assets/loginPage/wind.JPG

 src/assets/loginPage/xj-bg.png

 src/assets/loginPage/xj-icon.png

 src/assets/menu/bg_home.jpg

Binary files differ

 src/views/IntelligentXjSys/inspectionTaskManage/index.vue

对比新文件
@@ -0,0 +1,1028 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="12">
                <div class="grid-content topInfo">
                    <el-select v-model="searchType" @change="changeSearch" placeholder="任务名称">
                        <el-option label="巡检任务类型" value="巡检任务类型" />
                        <el-option label="创建人" value="创建人" />
                        <el-option label="巡检人" value="巡检人" />
                        <el-option label="检查频次" value="检查频次" />
                        <el-option label="开始时间" value="开始时间" />
                    </el-select>
                    <el-input v-model="searchContent" v-if="searchType == '任务名称'" placeholder="请输入任务名称"></el-input>
                    <el-input
                            v-else-if="searchType == '检查频次'"
                            v-model="searchContent"
                            placeholder="请输入检查频次"
                    >
                        <template #append>
                            <el-select v-model="searchUnit" placeholder="选择单位">
                                <el-option label="分钟" value="分钟" />
                                <el-option label="小时" value="小时" />
                                <el-option label="天" value="天" />
                            </el-select>
                        </template>
                    </el-input>
                    <el-select v-model="searchContent" v-else-if="searchType == '巡检任务类型'" placeholder="请选择任务类型">
                        <el-option v-for="(item,index) in typeOptions" :label="item.name" :value="item.value" :key="index"/>
                    </el-select>
                    <el-select v-model="searchContent" v-else-if="searchType == '创建人'" placeholder="请选择创建人">
                        <el-option v-for="(item,index) in createrOptions" :label="item.name" :value="item.value" :key="index"/>
                    </el-select>
                    <el-select v-model="searchContent" v-else-if="searchType == '巡检人'" placeholder="请选择巡检人">
                        <el-option v-for="(item,index) in inspectorOptions" :label="item.name" :value="item.value" :key="index"/>
                    </el-select>
                    <el-date-picker
                            v-model="searchContent"
                            type="date"
                            v-else
                            :placeholder="'请选择' + searchType"
                            size="large"
                            style="margin-right: 20px"
                    />
                    <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="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%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="name" label="任务名称" width="200"/>
                    <el-table-column property="type" label="任务类型"/>
                    <el-table-column property="creater" label="创建人"/>
                    <el-table-column property="inspector" label="巡检人"/>
                    <el-table-column property="frequency" label="检查频次"/>
                    <el-table-column property="unit" label="频次单位"/>
                    <el-table-column property="startTime" label="任务开始时间" width="180"/>
                    <el-table-column property="validTime" label="任务有效时间" width="180"/>
                    <el-table-column property="createTime" label="创建时间" width="180"/>
                    <el-table-column property="chainLength" label="巡检链长度" width="160"/>
                    <el-table-column property="status" label="状态" width="60"/>
                    <el-table-column fixed="right" label="操作" align="center" width="300">
                        <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-switch
                                    v-model="scope.row.status"
                                    inline-prompt
                                    active-text="开"
                                    inactive-text="关"
                                    active-value="开启"
                                    inactive-value="关闭"
                                    style="margin: 0 10px"
                            />
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</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="100"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
        </div>
        <el-dialog v-model="dialogDetails" title="巡检任务">
            <el-form :model="details" label-width="120px">
                <el-row>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务名称">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务类型">
                    <el-input
                            v-model="details.type"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="执行巡检班组">
                    <el-input
                            v-model="details.inspector"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="检查频次">
                    <el-input
                            v-model="details.inspector"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="检查频次" prop="frequency">
                    <el-input
                            v-model="details.frequency"
                            readonly
                    >
                        <template #append>
                            <el-input
                                    v-model="details.unit"
                                    readonly
                            />
                        </template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="周期开始时间">
                    <el-input
                            v-model="details.startTime"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="周期有效时间">
                    <el-input
                            v-model="details.validTime"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-bottom: 20px">
                <el-form-item label="巡检链">
                    <div style="width: 100%;margin-left: -30px">
                        <div v-for="(item,index) in details.shiftSteps" class="stepItem">
                            <div class="stepNum">{{index+1}}</div>
                            <div class="stepCard">
                                <el-card class="box-card">
                                    <template #header>
                                        <div class="card-header">
                                            <div>{{item.name}}</div>
                                        </div>
                                    </template>
                                    <div class="inspect-chain">
                                        <el-table :data="item.inspectorData" style="width: 100%"
                                                  :default-sort="{ prop: 'sort', order: 'ascending'}"
                                                  :header-cell-style="{background: '#fafafa',padding: '5px'}"
                                        >
                                            <el-table-column property="sort" label="排序"/>
                                            <el-table-column property="name" label="巡检点名称"/>
                                            <el-table-column property="section" label="所属设备区域"/>
                                            <el-table-column property="rfid" label="关联RFID"/>
                                            <el-table-column property="norm" label="巡检指标"/>
                                            <el-table-column property="reference" label="数据参考值"/>
                                        </el-table>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                </el-col>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
                </el-row>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="巡检任务编辑" @close="closeAdd" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-row>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务类型" prop="type">
                    <el-select v-model="addRecord.type">
                        <el-option label="日常检查" value="日常检查" />
                        <el-option label="周期检查" value="周期检查" />
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="执行巡检人员" prop="inspector">
                <el-select v-model="addRecord.inspector">
                    <el-option label="张三" value="张三" />
                    <el-option label="李四" value="李四" />
                </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="检查频次" prop="frequency">
                <el-input
                    v-model="addRecord.frequency"
                    placeholder="请输入检查频次"
                >
                    <template #append>
                        <el-select v-model="addRecord.unit" placeholder="选择单位">
                            <el-option label="分钟" value="分钟" />
                            <el-option label="小时" value="小时" />
                            <el-option label="天" value="天" />
                        </el-select>
                    </template>
                </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="周期开始时间" prop="startTime">
                    <el-date-picker
                            v-model="addRecord.startTime"
                            type="datetime"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="周期有效时间" prop="validTime">
                    <el-select v-model="addRecord.validTime" placeholder="选择时间">
                        <el-option label="15分钟" value="15分钟" />
                        <el-option label="30分钟" value="30分钟" />
                        <el-option label="45分钟" value="45分钟" />
                        <el-option label="60分钟" value="60分钟" />
                        <el-option label="75分钟" value="75分钟" />
                        <el-option label="90分钟" value="90分钟" />
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="24">
                <el-form-item label="创建巡检链">
                    <div style="width: 100%;margin-bottom: 20px">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddShift = true">新增巡检设备区域</el-button>
                    </div>
                    <div style="width: 100%;margin-left: -30px">
                        <div v-for="(item,index) in addRecord.shiftSteps" class="stepItem">
                            <div class="stepNum">{{index+1}}</div>
                            <div class="stepCard">
                                <el-card class="box-card">
                                    <template #header>
                                        <div class="card-header">
                                            <div>{{item.name}}</div>
                                            <div>
                                                <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button>
                                                <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button>
                                            </div>
                                        </div>
                                    </template>
                                    <div class="inspect-chain" style="display: flex;flex-direction: column;align-items: center">
                                        <el-button type="primary" size="default" :icon="Plus" plain @click="addSysInspection(index)" style="margin-bottom: 10px">添加巡检点</el-button>
                                        <el-table
                                                :data="item.inspectorData"
                                                style="width: 100%"
                                                :default-sort="{ prop: 'sort', order: 'ascending' }"
                                                :header-cell-style="{background: '#fafafa',padding: '5px'}"
                                        >
                                            <el-table-column property="sort" label="排序"/>
                                            <el-table-column property="name" label="巡检点名称"/>
                                            <el-table-column property="section" label="所属设备区域"/>
                                            <el-table-column property="rfid" label="关联RFID"/>
                                            <el-table-column property="norm" label="巡检指标"/>
                                            <el-table-column property="reference" label="数据参考值"/>
                                            <el-table-column fixed="right" label="操作" align="center" width="100">
                                                <template #default="scope">
                                                    <el-button link type="primary" size="small" :icon="Edit" @click="editInspection(index,scope.$index ,scope.row)">修改</el-button>
                                                    <el-button link type="danger" size="small" :icon="Delete" @click="deleteInspection(index,scope.$index)">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                </el-col>
                </el-row>
                <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>
        <el-dialog v-model="deleteShiftDialog" title="提示" width="30%" center @close="indexShiftClear">
            <span>您确定要删除该班次吗？</span>
            <template #footer>
              <span class="dialog-footer">
                  <el-button @click="deleteShiftDialog = false" size="default">取消</el-button>
                <el-button type="primary" @click="conFirmShiftDelete" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="deleteInspectionDialog" title="提示" width="30%" center @close="indexInspectionClear">
            <span>您确定要删除该巡检点吗？</span>
            <template #footer>
              <span class="dialog-footer">
                  <el-button @click="deleteInspectionDialog = false" size="default">取消</el-button>
                <el-button type="primary" @click="conFirmInspectionDelete" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogAddShift" title="新增巡检设施区域" @close="closeAddShift">
            <el-form :model="addShift" label-width="120px" ref="addShiftRef" :rules="addShiftRules">
                <el-form-item label="选择巡检设施区域" prop="name">
                    <el-select v-model="addShift.name">
                        <el-option label="风机系统" value="风机系统" />
                        <el-option label="A车间" value="A车间" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddShift = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddShift(addShiftRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddInspection" title="新增巡检点" @close="closeAddInspection">
            <el-form :model="addInspection" label-width="120px" ref="addInspectionRef" :rules="addInspectionRules">
                <el-form-item label="输入巡检点排序" prop="sort">
                    <el-input-number v-model="addInspection.sort" :min="1" :max="999" placeholder="巡检点排序"/>
                </el-form-item>
                <el-form-item label="选择巡检点" prop="name">
                    <el-select v-model="addInspection.name">
                        <el-option label="73011" value="73011" />
                        <el-option label="73012" value="73012" />
                        <el-option label="73013" value="73013" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择巡检指标" prop="norm">
                    <el-select v-model="addInspection.norm">
                        <el-option label="风机声音" value="风机声音" />
                        <el-option label="设备温度" value="设备温度" />
                        <el-option label="压力" value="压力" />
                        <el-option label="震动" value="震动" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddInspection = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddInspection(addInspectionRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    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, ElMessage } from 'element-plus'
    import { 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 {
        name: 'workingHoursSet',
        components: {},
        setup() {
            const userInfo = useUserInfo()
            const {userInfos} = storeToRefs(userInfo);

            const state = reactive({
                searchType: '任务名称',
                typeOptions: [
                    {
                        name: '日常检查',
                        value: '日常检查'
                    },
                    {
                        name: '周期检查',
                        value: '周期检查'
                    }
                ],
                createrOptions: [
                    {
                        name: '张三',
                        value: '张三'
                    },
                    {
                        name: '李四',
                        value: '李四'
                    }
                ],
                inspectorOptions: [
                    {
                        name: '李四',
                        value: '李四'
                    },
                    {
                        name: '张三',
                        value: '张三'
                    }
                ],
                searchUnit: '小时',
                searchContent: '',
                currentPage: 1,
                pageSize: 10,
                chosenIndex: null,
                chosenShiftIndex: null,
                chosenInspectionIndex: null,
                dialogDetails: false,
                dialogAddRecord: false,
                deleteDialog: false,
                deleteShiftDialog: false,
                deleteInspectionDialog: false,
                dialogAddShift: false,
                dialogAddInspection: false,
                tableData: [
                    {
                        name: '甲醛装置（）列现场岗位巡检',
                        type: '周期检查',
                        creater: '管理员A',
                        inspector: '张三',
                        frequency: 2,
                        unit: '小时',
                        startTime: '2022-07-02 13:01:37',
                        validTime: '30分钟',
                        createTime: '2022-07-02 12:03:47',
                        chainLength: 20,
                        status: '开启',
                        shiftSteps: [
                            {
                                name: '风机系统',
                                inspectorData: [
                                    {
                                        sort: 1,
                                        name: '73011',
                                        section: '风机系统',
                                        rfid: '风机系统1标签',
                                        norm: '风机声音',
                                        reference: '10<正常<50'
                                    },
                                    {
                                        sort: 2,
                                        name: '73012',
                                        section: '风机系统',
                                        rfid: '风机系统2标签',
                                        norm: '设备温度',
                                        reference: '20<正常<50'
                                    },
                                    {
                                        sort: 3,
                                        name: '73013',
                                        section: '风机系统',
                                        rfid: '风机系统3标签',
                                        norm: '风机震动',
                                        reference: '30<正常<50'
                                    }
                                ]

                            },
                            {
                                name: 'A场所',
                                inspectorData: [
                                    {
                                        sort: 1,
                                        name: '73021',
                                        section: '风机系统',
                                        rfid: '风机系统1标签',
                                        norm: '风机声音',
                                        reference: '10<正常<50'
                                    },
                                    {
                                        sort: 2,
                                        name: '73022',
                                        section: '风机系统',
                                        rfid: '风机系统2标签',
                                        norm: '设备温度',
                                        reference: '20<正常<50'
                                    },
                                    {
                                        sort: 3,
                                        name: '73023',
                                        section: '风机系统',
                                        rfid: '风机系统3标签',
                                        norm: '风机震动',
                                        reference: '30<正常<50'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'A车间日常巡检',
                        type: '日常检查',
                        creater: '管理员B',
                        inspector: '李四',
                        frequency: 4,
                        unit: '小时',
                        startTime: '2022-07-02 12:45:37',
                        validTime: '30分钟',
                        createTime: '2022-07-02 08:15:41',
                        chainLength: 15,
                        status: '开启'
                    }
                ],
                addRecord: {
                    name: '',
                    type: '',
                    creater: '',
                    inspector: '',
                    frequency: 1,
                    unit: '小时',
                    startTime: '',
                    validTime: '',
                    createTime: '',
                    chainLength: 0,
                    status: '开启',
                    shiftSteps: []
                },
                addShift: {},
                addInspection: {},
                details: {}
            })

            // 顶部筛选搜索
            const changeSearch = () => {
                state.searchContent = ''
            }

            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }

            // 时间格式化
            const timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const handleChange = (value) => {
                state.addRecord.content = []
                console.log(JSON.parse(JSON.stringify(value)))
            }
            const addRef = ref<FormInstance>()
            const addShiftRef = ref<FormInstance>()
            const addInspectionRef = ref<FormInstance>()

            // 表单校验
            const addRules = reactive<FormRules>({
                name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                type: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                inspector: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })
            const addShiftRules = reactive<FormRules>({
                name: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })
            const addInspectionRules = reactive<FormRules>({
                name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                norm: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                sort: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })

            // 查看记录
            const viewRecord = (row) => {
                state.details = JSON.parse(JSON.stringify(row))
                state.dialogDetails = true
            }

            // 删除记录
            const deleteRecord = (index) => {
                state.chosenIndex = index
                state.deleteDialog = true
            }
            const conFirmDelete = () => {
                state.tableData.splice(state.chosenIndex, 1)
                state.deleteDialog = false
            }

            // 修改添加记录
            const editRecord = (index, row) => {
                state.chosenIndex = index
                state.dialogAddRecord = true
                state.addRecord = JSON.parse(JSON.stringify(row))
            }
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if (state.chosenIndex == null) {
                            if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) {
                                ElMessage({
                                    message: '请先设置巡检链后再提交',
                                    type: 'warning',
                                })
                                return
                                // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                            } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) {
                                for (let i = 0; i < state.addRecord.shiftSteps.length; i++) {
                                    if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) {
                                        ElMessage({
                                            message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点',
                                            type: 'warning',
                                        })
                                    }
                                }
                                return
                            } else {
                                state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-')
                                state.addRecord.chainLength = state.addRecord.shiftSteps.length
                                state.addRecord.status = '开启'
                                state.tableData.unshift(state.addRecord)
                            }
                        } else {
                            if (state.addRecord.shiftSteps.length == 0) {
                                ElMessage({
                                    message: '请先设置巡检链后再提交',
                                    type: 'warning',
                                })
                                return
                                // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                            } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) {
                                for (let i = 0; i < state.addRecord.shiftSteps.length; i++) {
                                    if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) {
                                        ElMessage({
                                            message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点',
                                            type: 'warning',
                                        })
                                    }
                                }
                                return
                            } else {
                                state.tableData[state.chosenIndex] = state.addRecord
                            }
                        }
                        state.dialogAddRecord = false
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }

            // 添加弹窗打开前预操作
            const openAdd = () => {
                state.addRecord.unit = '小时'
            }

            // 弹窗关闭后判断数据初始化
            const closeAdd = () => {
                state.addRecord = {}
                state.chosenIndex = null
                state.addShift = {}
                state.chosenShiftIndex = null
            }
            const indexClear = () => {
                state.chosenIndex = null
            }
            const indexShiftClear = () => {
                state.chosenShiftIndex = null
            }
            const indexInspectionClear = () => {
                state.chosenInspectionIndex = null
                state.chosenShiftIndex = null
            }

            // 排序
            function compare(key) {
                return function (value1, value2) {
                    var val1 = value1[key];
                    var val2 = value2[key];
                    return val1 - val2;
                }
            }

            // 添加删除巡检设施区域
            const addFlow = (index) => {
                state.dialogAddShift = true
                state.chosenShiftIndex = index
            }

            // 删除巡检区域
            const deleteFlow = (index) => {
                state.deleteShiftDialog = true
                state.chosenShiftIndex = index
            }
            const conFirmShiftDelete = () => {
                state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1)
                state.deleteShiftDialog = false
            }

            const confirmAddShift = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if (state.addRecord.shiftSteps) {
                            state.addRecord.shiftSteps.splice(state.chosenShiftIndex + 1, 0, state.addShift)
                        } else {
                            state.addRecord.shiftSteps = []
                            state.addRecord.shiftSteps.unshift(state.addShift)
                        }
                        state.dialogAddShift = false
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }


            const addSysInspection = (index) => {
                state.dialogAddInspection = true
                state.chosenShiftIndex = index
            }
            const confirmAddInspection = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if (state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData) {
                            if (state.chosenInspectionIndex == null) {
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection)
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                            } else {
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData[state.chosenInspectionIndex] = state.addInspection
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                            }
                        } else {
                            state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData = []
                            state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection)
                            state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                        }
                        state.dialogAddInspection = false
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }
            const deleteInspection = (i, index) => {
                state.chosenShiftIndex = i
                state.chosenInspectionIndex = index
                state.deleteInspectionDialog = true
            }
            const editInspection = (i, index, row) => {
                state.chosenShiftIndex = i
                state.chosenInspectionIndex = index
                state.dialogAddInspection = true
                state.addInspection = JSON.parse(JSON.stringify(row))
            }
            const conFirmInspectionDelete = () => {
                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.splice(state.chosenInspectionIndex, 1)
                state.deleteInspectionDialog = false
            }

            const closeAddShift = () => {
                state.addShift = {}
                state.chosenShiftIndex = null
            }
            const closeAddInspection = () => {
                state.addInspection = {}
                state.chosenShiftIndex = null
            }

            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId', value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };

            return {
                addRef,
                addShiftRef,
                addInspectionRef,
                addRules,
                addShiftRules,
                addInspectionRules,
                View,
                Edit,
                Delete,
                Refresh,
                Plus,
                changeSearch,
                handleSizeChange,
                handleCurrentChange,
                handleChange,
                viewRecord,
                deleteRecord,
                conFirmDelete,
                openAdd,
                editRecord,
                confirmAddRecord,
                closeAdd,
                addFlow,
                conFirmShiftDelete,
                confirmAddShift,
                closeAddShift,
                deleteInspection,
                addSysInspection,
                confirmAddInspection,
                conFirmInspectionDelete,
                closeAddInspection,
                editInspection,
                deleteFlow,
                indexClear,
                indexShiftClear,
                indexInspectionClear,
                renderMenu,
                ...toRefs(state)
            }
        }
    }
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            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;
                }
            }
        }
    }
    .stepItem{
        width: 100%;
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
        margin-left: 30px;
        padding-bottom: 30px;
        border-left: 2px solid #ccc;
        &:first-of-type{
            margin-top: 30px;
        }
        &:last-of-type{
            margin-bottom: 0;
            border-left: none;
        }
        .stepNum {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            box-sizing: border-box;
            color: #333;
            border: 1px solid #999;
            line-height: 28px;
            text-align: center;
            margin-right: 10px;
            margin-left: -16px;
            margin-top: -30px;
        }
        .stepCard {
            width: 100%;
            margin-top: -30px;

            .box-card {
                width: 100%;
                &:deep(.el-card__header){
                    padding: 10px 15px
                }
                .card-header {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &>div:first-of-type{
                        margin-right: 80px;
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
            }
        }
        &:hover .card-header{
            color: #0098F5;
        }
        &:hover .stepNum{
            border: 2px solid #0098F5;
            color: #0098F5;
        }
    }
    .el-input{
        width: 100% !important;
    }
    :deep(.el-date-editor){
        width: 100%;
    }
    .el-select{
        width: 100%;
    }

    .inspect-chain :deep(.el-table__row){
        background: #fff;

    }

    .inspect-chain :deep(.el-table__cell){
        background: #fff;
    }
</style>

 src/views/IntelligentXjSys/inspectionTaskManagement/index.vue

@@ -399,7 +399,7 @@
    </div>
</template>

<script lang="ts" setup>
<script lang="ts">
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
@@ -421,72 +421,60 @@
    interface type {

    }
    export default {
        name: 'workingHoursSet',
        components: {},
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const {userInfos} = storeToRefs(userInfo);

            // 顶部筛选搜索
            const searchType = ref('任务名称')
            const typeOptions = ref([
                {
                    name: '日常检查',
                    value: '日常检查'
                },
                {
                    name: '周期检查',
                    value: '周期检查'
                }
            ])
            const createrOptions = ref([
                {
                    name: '张三',
                    value: '张三'
                },
                {
                    name: '李四',
                    value: '李四'
                }
            ])
            const inspectorOptions = ref([
                {
                    name: '李四',
                    value: '李四'
                },
                {
                    name: '张三',
                    value: '张三'
                }
            ])
            const searchUnit = ref('小时')
            const changeSearch =()=>{
                searchContent.value=''
            }
            const searchContent = ref()


            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const chosenShiftIndex = ref(-1)
            const chosenInspectionIndex = ref(-1)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }

            // 时间格式化
            const timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const tableData = reactive(
                    [
            const state = reactive({
                searchType: '任务名称',
                typeOptions: [
                    {
                        name: '日常检查',
                        value: '日常检查'
                    },
                    {
                        name: '周期检查',
                        value: '周期检查'
                    }
                ],
                createrOptions: [
                    {
                        name: '张三',
                        value: '张三'
                    },
                    {
                        name: '李四',
                        value: '李四'
                    }
                ],
                inspectorOptions: [
                    {
                        name: '李四',
                        value: '李四'
                    },
                    {
                        name: '张三',
                        value: '张三'
                    }
                ],
                searchUnit: '小时',
                searchContent: '',
                currentPage: 1,
                pageSize: 10,
                chosenIndex: null,
                chosenShiftIndex: null,
                chosenInspectionIndex: null,
                dialogDetails: false,
                dialogAddRecord: false,
                deleteDialog: false,
                deleteShiftDialog: false,
                deleteInspectionDialog: false,
                dialogAddShift: false,
                dialogAddInspection: false,
                tableData: [
                    {
                        name: '甲醛装置（）列现场岗位巡检',
                        type: '周期检查',
@@ -497,12 +485,12 @@
                        startTime: '2022-07-02 13:01:37',
                        validTime: '30分钟',
                        createTime: '2022-07-02 12:03:47',
                        chainLength: '20',
                        chainLength: 20,
                        status: '开启',
                        shiftSteps:[
                        shiftSteps: [
                            {
                                name: '风机系统',
                                inspectorData:[
                                inspectorData: [
                                    {
                                        sort: 1,
                                        name: '73011',
@@ -532,7 +520,7 @@
                            },
                            {
                                name: 'A场所',
                                inspectorData:[
                                inspectorData: [
                                    {
                                        sort: 1,
                                        name: '73021',
@@ -571,122 +559,153 @@
                        startTime: '2022-07-02 12:45:37',
                        validTime: '30分钟',
                        createTime: '2022-07-02 08:15:41',
                        chainLength: '15',
                        chainLength: 15,
                        status: '开启'
                    }
                ]
            )
                ],
                addRecord: {
                    name: '',
                    type: '',
                    creater: '',
                    inspector: '',
                    frequency: 1,
                    unit: '小时',
                    startTime: '',
                    validTime: '',
                    createTime: '',
                    chainLength: 0,
                    status: '开启',
                    shiftSteps: []
                },
                addShift: {},
                addInspection: {},
                details: {}
            })

            // 顶部筛选搜索
            const changeSearch = () => {
                state.searchContent = ''
            }

            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }

            // 时间格式化
            const timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const handleChange = (value) => {
                addRecord.value.content = []
                state.addRecord.content = []
                console.log(JSON.parse(JSON.stringify(value)))
            }
            const addRef = ref<FormInstance>()
            const addShiftRef = ref<FormInstance>()
            const addInspectionRef = ref<FormInstance>()

    // 表单校验
            // 表单校验
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                inspector:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                frequency:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                unit:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                startTime:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                validTime:[{required: true, message: '该内容不能为空',trigger:'blur'}]
                name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                type: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                inspector: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })
            const addShiftRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}]
                name: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })
            const addInspectionRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                norm:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                sort:[{required: true, message: '该内容不能为空',trigger:'blur'}]
                name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                norm: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                sort: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })
            const dialogDetails = ref(false)
            const dialogAddRecord = ref(false)
            const deleteDialog = ref(false)
            const deleteShiftDialog = ref(false)
            const deleteInspectionDialog = ref(false)
            const dialogAddShift = ref(false)
            const dialogAddInspection = ref(false)
            const addRecord = ref({})
            const addShift = ref({})
            const addInspection = ref({})
            const details = ref({})

    // 查看记录
            const viewRecord = (row) =>{
                details.value = JSON.parse(JSON.stringify(row))
                dialogDetails.value = true
            // 查看记录
            const viewRecord = (row) => {
                state.details = JSON.parse(JSON.stringify(row))
                state.dialogDetails = true
            }

            // 删除记录
            const deleteRecord = (index) =>{
                chosenIndex.value = index
                deleteDialog.value = true
            const deleteRecord = (index) => {
                state.chosenIndex = index
                state.deleteDialog = true
            }
            const conFirmDelete = ()=> {
                tableData.splice(chosenIndex.value,1)
                deleteDialog.value = false
            const conFirmDelete = () => {
                state.tableData.splice(state.chosenIndex, 1)
                state.deleteDialog = false
            }

            // 修改添加记录
            const editRecord =(index, row)=>{
                chosenIndex.value = index
                dialogAddRecord.value = true
                addRecord.value = JSON.parse(JSON.stringify(row))
            const editRecord = (index, row) => {
                state.chosenIndex = index
                state.dialogAddRecord = true
                state.addRecord = JSON.parse(JSON.stringify(row))
            }
            const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(chosenIndex.value == -1){
                            if(!addRecord.value.shiftSteps || addRecord.value.shiftSteps.length == 0){
                        if (state.chosenIndex == null) {
                            if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) {
                                ElMessage({
                                    message: '请先设置巡检链后再提交',
                                    type: 'warning',
                                })
                                return
                            // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                            }else if(addRecord.value.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length==0)){
                                for(let i =0;i<addRecord.value.shiftSteps.length;i++){
                                    if(!addRecord.value.shiftSteps[i].inspectorData||addRecord.value.shiftSteps[i].inspectorData.length==0){
                                // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                            } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) {
                                for (let i = 0; i < state.addRecord.shiftSteps.length; i++) {
                                    if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) {
                                        ElMessage({
                                            message: '请为'+ addRecord.value.shiftSteps[i].name +'设置巡检点',
                                            message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点',
                                            type: 'warning',
                                        })
                                    }
                                }
                                return
                            }else{
                                addRecord.value.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                                addRecord.value.chainLength = addRecord.value.shiftSteps.length
                                addRecord.value.status = '开启'
                                tableData.unshift(addRecord.value)
                            } else {
                                state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-')
                                state.addRecord.chainLength = state.addRecord.shiftSteps.length
                                console.log('11111111111111')
                                state.addRecord.status = '开启'
                                console.log('222222222222222')
                                state.tableData.unshift(state.addRecord)
                            }
                        }else{
                            if(addRecord.value.shiftSteps.length == 0){
                        } else {
                            if (state.addRecord.shiftSteps.length == 0) {
                                ElMessage({
                                    message: '请先设置巡检链后再提交',
                                    type: 'warning',
                                })
                                return
                            // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                            }else if(addRecord.value.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length==0)){
                                for(let i =0;i<addRecord.value.shiftSteps.length;i++){
                                    if(!addRecord.value.shiftSteps[i].inspectorData||addRecord.value.shiftSteps[i].inspectorData.length==0){
                                // 判断每个区域是否都设置了至少一个巡检点，没有的话提示设置
                            } else if (state.addRecord.shiftSteps.some(i => !i.inspectorData || i.inspectorData.length == 0)) {
                                for (let i = 0; i < state.addRecord.shiftSteps.length; i++) {
                                    if (!state.addRecord.shiftSteps[i].inspectorData || state.addRecord.shiftSteps[i].inspectorData.length == 0) {
                                        ElMessage({
                                            message: '请为'+ addRecord.value.shiftSteps[i].name +'设置巡检点',
                                            message: '请为' + state.addRecord.shiftSteps[i].name + '设置巡检点',
                                            type: 'warning',
                                        })
                                    }
                                }
                                return
                            }else{
                                tableData[chosenIndex.value] = addRecord.value
                            } else {
                                state.tableData[state.chosenIndex] = state.addRecord
                            }
                        }
                        dialogAddRecord.value =false
                        state.dialogAddRecord = false
                    } else {
                        console.log('error submit!', fields)
                    }
@@ -695,64 +714,64 @@
            }

            // 添加弹窗打开前预操作
            const openAdd =()=>{
                addRecord.value.unit = '小时'
            const openAdd = () => {
                state.addRecord.unit = '小时'
            }

            // 弹窗关闭后判断数据初始化
            const closeAdd =()=>{
                addRecord.value={}
                chosenIndex.value = -1
                addShift.value={}
                chosenShiftIndex.value = -1
            const closeAdd = () => {
                state.addRecord = {}
                state.chosenIndex = null
                state.addShift = {}
                state.chosenShiftIndex = null
            }
            const indexClear = ()=>{
                chosenIndex.value = -1
            const indexClear = () => {
                state.chosenIndex = null
            }
            const indexShiftClear = ()=>{
                chosenShiftIndex.value = -1
            const indexShiftClear = () => {
                state.chosenShiftIndex = null
            }
            const indexInspectionClear = ()=>{
                chosenInspectionIndex.value = -1
                chosenShiftIndex.value = -1
            const indexInspectionClear = () => {
                state.chosenInspectionIndex = null
                state.chosenShiftIndex = null
            }

            // 排序
            function compare(key){
                return function(value1,value2){
                    var val1=value1[key];
                    var val2=value2[key];
                    return val1-val2;
            function compare(key) {
                return function (value1, value2) {
                    var val1 = value1[key];
                    var val2 = value2[key];
                    return val1 - val2;
                }
            }

            // 添加删除巡检设施区域
            const addFlow = (index) => {
                dialogAddShift.value = true
                chosenShiftIndex.value = index
                state.dialogAddShift = true
                state.chosenShiftIndex = index
            }

            // 删除巡检区域
            const deleteFlow = (index) => {
                deleteShiftDialog.value = true
                chosenShiftIndex.value = index
                state.deleteShiftDialog = true
                state.chosenShiftIndex = index
            }
            const conFirmShiftDelete = () => {
                addRecord.value.shiftSteps.splice( chosenShiftIndex.value,1)
                deleteShiftDialog.value = false
                state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1)
                state.deleteShiftDialog = false
            }

            const confirmAddShift = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(addRecord.value.shiftSteps){
                            addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value)
                        }else{
                            addRecord.value.shiftSteps = []
                            addRecord.value.shiftSteps.unshift(addShift.value)
                        if (state.addRecord.shiftSteps) {
                            state.addRecord.shiftSteps.splice(state.chosenShiftIndex + 1, 0, state.addShift)
                        } else {
                            state.addRecord.shiftSteps = []
                            state.addRecord.shiftSteps.unshift(state.addShift)
                        }
                        dialogAddShift.value = false
                        state.dialogAddShift = false
                    } else {
                        console.log('error submit!', fields)
                    }
@@ -760,63 +779,107 @@
            }


            const addSysInspection =(index)=>{
                dialogAddInspection.value = true
                chosenShiftIndex.value = index
            const addSysInspection = (index) => {
                state.dialogAddInspection = true
                state.chosenShiftIndex = index
            }
            const confirmAddInspection = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData){
                            if(chosenInspectionIndex.value == -1){
                                addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.unshift(addInspection.value)
                                addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort'))
                            }else{
                                addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData[chosenInspectionIndex.value] = addInspection.value
                                addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort'))
                        if (state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData) {
                            if (state.chosenInspectionIndex == null) {
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection)
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                            } else {
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData[state.chosenInspectionIndex] = state.addInspection
                                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                            }
                        }else{
                            addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData = []
                            addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.unshift(addInspection.value)
                            addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.sort(compare('sort'))
                        } else {
                            state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData = []
                            state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.unshift(state.addInspection)
                            state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.sort(compare('sort'))
                        }
                        dialogAddInspection.value = false
                        state.dialogAddInspection = false
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }
            const deleteInspection = (i,index) =>{
                chosenShiftIndex.value = i
                chosenInspectionIndex.value = index
                deleteInspectionDialog.value = true
            const deleteInspection = (i, index) => {
                state.chosenShiftIndex = i
                state.chosenInspectionIndex = index
                state.deleteInspectionDialog = true
            }
            const editInspection =(i,index, row)=>{
                chosenShiftIndex.value = i
                chosenInspectionIndex.value = index
                dialogAddInspection.value = true
                addInspection.value = JSON.parse(JSON.stringify(row))
            const editInspection = (i, index, row) => {
                state.chosenShiftIndex = i
                state.chosenInspectionIndex = index
                state.dialogAddInspection = true
                state.addInspection = JSON.parse(JSON.stringify(row))
            }
            const conFirmInspectionDelete=()=>{
                addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.splice( chosenInspectionIndex.value,1)
                deleteInspectionDialog.value = false
            const conFirmInspectionDelete = () => {
                state.addRecord.shiftSteps[state.chosenShiftIndex].inspectorData.splice(state.chosenInspectionIndex, 1)
                state.deleteInspectionDialog = false
            }

            const closeAddShift =()=>{
                addShift.value={}
                chosenShiftIndex.value = -1
            const closeAddShift = () => {
                state.addShift = {}
                state.chosenShiftIndex = null
            }
            const closeAddInspection =()=>{
                addInspection.value={}
                chosenShiftIndex.value = -1
            const closeAddInspection = () => {
                state.addInspection = {}
                state.chosenShiftIndex = null
            }

            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                Session.set('projectId', value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };

            return {
                addRef,
                addShiftRef,
                addInspectionRef,
                addRules,
                addShiftRules,
                addInspectionRules,
                View,
                Edit,
                Delete,
                Refresh,
                Plus,
                changeSearch,
                handleSizeChange,
                handleCurrentChange,
                handleChange,
                viewRecord,
                deleteRecord,
                conFirmDelete,
                openAdd,
                editRecord,
                confirmAddRecord,
                closeAdd,
                addFlow,
                conFirmShiftDelete,
                confirmAddShift,
                closeAddShift,
                deleteInspection,
                addSysInspection,
                confirmAddInspection,
                conFirmInspectionDelete,
                closeAddInspection,
                editInspection,
                deleteFlow,
                indexClear,
                indexShiftClear,
                indexInspectionClear,
                renderMenu,
                ...toRefs(state)
            }
        }
    }
</script>

<style scoped lang="scss">

 src/views/IntelligentXjSys/intelligentMap/index.vue

对比新文件
@@ -0,0 +1,716 @@
<template>
  <div class="container">
    <div class="big-title"><span></span>大型实验室智能巡检系统<span></span></div>
    <div style="font-size: 14px;color: #00ffff">{{present}}</div>
    <div class="blocks">
      <div class="current-data">
        <div class="data-area">
          <img src="../../../assets/loginPage/xj-icon.png">
          <div>当前巡检：<span>实验室装置区</span></div>
        </div>
        <div class="data-spot">
          <div>
            <span>巡检点</span>
            <p>3970A</p>
          </div>
          <div>
            <span>指标</span>
            <p>压力</p>
          </div>
        </div>
      </div>
      <div class="line-map">
        <div class="item item-t item-l">
            <section>
              <div class="dot"></div>
              <div class="pulse"></div>
              <div class="pulse1"></div>
            </section>
            <div>
              <div><span>巡检点：</span><span>73017</span></div>
              <div><span>定位状态：</span><span>已完成</span></div>
              <div><span>压力：</span><span>3.6Bar</span></div>
            </div>
        </div>
        <div class="item item-l">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>73018</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>压力：</span><span>3.6Bar</span></div>
          </div>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="item item-l">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>73016</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>压力：</span><span>3.6Bar</span></div>
          </div>
        </div>
        <div class="item item-l">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>73019</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>温度：</span><span>80℃</span></div>
          </div>
        </div>
        <div></div>
        <div></div>
        <div class="item item-t item-l undone">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>3970C</span></div>
            <div><span>定位状态：</span><span>未完成</span></div>
            <div><span>压力：</span><span>--</span></div>
          </div>
        </div>
        <div class="item item-t undone">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>3970D</span></div>
            <div><span>定位状态：</span><span>未完成</span></div>
            <div><span>压力：</span><span>--</span></div>
          </div>
        </div>
        <div class="item finish">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <span></span>
          <p>
            完成巡检
          </p>
        </div>
        <div class="item start">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <span></span>
          <p>
            开始巡检
          </p>
        </div>
        <div class="item item-l">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>73020</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>压力：</span><span>3.6Bar</span></div>
          </div>
        </div>
        <div></div>
        <div></div>
        <div class="item item-l undone">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>3970B</span></div>
            <div><span>定位状态：</span><span>未完成</span></div>
            <div><span>压力：</span><span>--</span></div>
          </div>
        </div>
        <div class="pic-tit water">
          <img src="../../../assets/loginPage/equipment.JPG">
          <p>实验室装置区</p>
        </div>
        <div></div>
        <div class="pic-tit">
          <img src="../../../assets/loginPage/wind.JPG">
          <p>实验室风机系统</p>
        </div>
        <div class="item item-l warning">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>73021</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>温度：</span><span>130℃</span></div>
          </div>
        </div>
        <div></div>
        <div></div>
        <div class="item item-l undone">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>3970A</span></div>
            <div><span>定位状态：</span><span>未完成</span></div>
            <div><span>压力：</span><span>--</span></div>
          </div>
        </div>
        <div></div>
        <div></div>
        <div class="pic-tit water">
          <img src="../../../assets/loginPage/watersys.JPG">
          <p>实验室循环水系统</p>
        </div>
        <div class="item item-t">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>80210</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>温度：</span><span>80摄氏度</span></div>
          </div>
        </div>
        <div class="item item-t">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>80211</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>温度：</span><span>80摄氏度</span></div>
          </div>
        </div>
        <div class="item item-t">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>80212</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>温度：</span><span>80摄氏度</span></div>
          </div>
        </div>
        <div class="item">
          <section>
            <div class="dot"></div>
            <div class="pulse"></div>
            <div class="pulse1"></div>
          </section>
          <div>
            <div><span>巡检点：</span><span>80213</span></div>
            <div><span>定位状态：</span><span>已完成</span></div>
            <div><span>温度：</span><span>80摄氏度</span></div>
          </div>
        </div>
        <div></div>
        <div></div>
      </div>
      <div class="section-1">

      </div>
      <div class="section-2">

      </div>
      <div class="section-3">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewForm',
  props: {

  },
  data(){
    return{
      present: ''
    }
  },
  created() {
    setInterval(() => {
      this.present = new Date().toLocaleString()
    }, 1000)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @keyframes warn {
    0% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.0;
    }

    25% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.1;
    }

    50% {
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.3;
    }

    75% {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.6;
    }

    100% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 0.0;
    }
  }

  @keyframes warn1 {
    0% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.0;
    }

    25% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.1;
    }

    50% {
      transform: scale(0.3);
      -webkit-transform: scale(0.3);
      opacity: 0.3;
    }

    75% {
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
      opacity: 0.6;
    }

    100% {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
      opacity: 0.0;
    }
  }
  
  @keyframes circle {
    0% {
      transform: rotate(0);
      -webkit-transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
    }
  }
  .container{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../../../assets/loginPage/map-bg.jpg") no-repeat center;
    background-size: 100% 100%;
    .big-title{
      height: 40px;
      line-height: 40px;
      font-size: 28px;
      font-weight: bold;
      margin: 10px 0 20px;
      text-align: center;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;

      span{
        width: 60px;
        height: 1px;
        background: #36FCFC;
        margin: 0 20px;
      }
    }

    .blocks{
      position: relative;
      width: 100%;
      height: 100%;
      padding: 20px 20px 20px 100px;
      box-sizing: border-box;
      .line-map{
        position: absolute;
        width: calc(100% - 120px);
        left: 110px;
        top: 10px;
        flex-direction: column;
        align-items: center;
        z-index: 99;
        display: grid;
        grid-template-columns: repeat(7,1fr);
        grid-gap: 0;

          .item{
            width: calc((100vw - 120px)/ 7);
            height: calc((100vh - 130px)/ 5);
            padding: 20px 40px 20px 20px;
            position: relative;
            box-sizing: border-box;

            section{
              width: 28px;
              height: 28px;
              border-radius: 50%;
              position: absolute;
              border: 1px solid #00ff66;
              top: -14px;
              left: -14px;

              .dot {
                position: absolute;
                width: 18px;
                height: 18px;
                left: 4px;
                top: 4px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border: 1px solid #00ff66;
                border-radius: 50%;
                background-color:#00ff66;
                z-index: 2;
              }
              .pulse {
                position: absolute;
                width: 56px;
                height: 56px;
                left: -15px;
                top: -15px;
                border: 1px solid #00ff66;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                z-index: 1;
                opacity: 0;
                -webkit-animation: warn 2s ease-out;
                -moz-animation: warn 2s ease-out;
                animation: warn 2s ease-out;
                -webkit-animation-iteration-count: infinite;
                -moz-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                box-shadow: 1px 1px 30px #00ff66;
              }
              .pulse1 {
                position: absolute;
                width: 56px;
                height: 56px;
                left: -15px;
                top: -15px;
                border: 1px solid #3399ff;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                z-index: 1;
                opacity: 0;
                -webkit-animation: warn1 2s ease-out;
                -moz-animation: warn1 2s ease-out;
                animation: warn1 2s ease-out;
                -webkit-animation-iteration-count: infinite;
                -moz-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                box-shadow: 1px 1px 30px #3399ff;
              }
            }
            &>div{
              padding: 10px 0;
              border-radius: 8px;
              background-image: linear-gradient(to right,rgba(8,109,209,.4),rgba(11,255,255,.2));
              border: 1px solid rgba(54,252,252,.6);
              display: flex;
              flex-direction: column;
              justify-content: center;

              div{
                &:nth-of-type(2){
                  margin: 5px 0;
                }

                span{
                  display: inline-block;
                  width: 50%;
                  font-size: 14px;
                  color: #fff;
                  text-align: left;

                  &:first-of-type{
                    text-align: right;
                    color: rgba(255,255,255,.8);
                  }
                }
              }
            }

            p{
              width: 140px;
              height: 50px;
              font-size: 18px;
              line-height: 48px;
              text-align: center;
              color: #fff;
              border-radius: 8px;
              background-image: linear-gradient(to right,rgba(11,255,255,.2),rgba(8,109,209,.4));
              border: 1px solid rgba(54,252,252,.6);
            }
          }

          .item-t{
            border-top: 1px solid #36FCFC;
          }
          .item-l{
            border-left: 1px solid #36FCFC;
          }
          .warning{
            &>section{
              border: 1px solid #ff0000;

              .dot{
                border: 1px solid #ff0000;
                background: #ff0000;
              }
              .pulse{
                border: 1px solid #ff0000;
                box-shadow: 1px 1px 30px #ff0000;
              }
              .pulse1{
                border: 1px solid #ff0000;
                box-shadow: 1px 1px 30px #ff0000;
              }
            }

            &>div{
              div:last-of-type{
                span:nth-of-type(2){
                  color: #ff0000;
                }
              }
            }
          }
          .undone{
            &>section{
              border: 1px solid #ccc;

              .dot{
                border: 1px solid #ccc;
                background: #ccc;
              }
              .pulse{
                display: none;
              }
              .pulse1{
                display: none;
              }
            }
          }
          .pic-tit{
            display: flex;
            width: calc((100vw - 120px)/ 7);
            height: 160px;
            padding: 20px;
            transform: translate(-20px,-40%);
            flex-direction: column;
            align-items: flex-start;

            img{
              width: calc((100vw - 120px)/ 7 - 40px);
              height: 90px;
              margin-bottom: 10px;
              border-radius: 4px;
            }
            p{
              font-size: 16px;
              color: #00ffff;
              font-weight: bold;
            }
          }

          .water{
            transform: none;
          }
          .start{
            padding: 40px 0;
            p{
              margin-top: -21px;
              margin-left: 20px;
            }
            span{
              width: 1px;
              height: 50px;
              background: #36FCFC;
              position: absolute;
              top: -10px;
              left: 0;
            }
            section{
              position: absolute;
              top: 30px;
              left: -14px;
            }
          }
          .finish{
            padding: 0 40px;
            p{
              margin-top: -25px;
              margin-left: 4px;
            }
            span{
              width: 100%;
              height: 1px;
              background: #36FCFC;
              position: absolute;
              top: 0;
              left: calc(40px - 100%);
            }
            section{
              position: absolute;
              top: -14px;
              left: 30px;
            }
          }
      }
      .current-data{
        position: absolute;
        z-index: 999999;
        width: 270px;
        height: 142px;
        left: 50%;
        padding: 20px 30px;
        box-sizing: border-box;
        transform: translateX(-65%);
        background: url("../../../assets/loginPage/xj-bg.png") no-repeat center;
        background-size: 100% 100%;

        .data-area{
          display: flex;
          align-items: center;
          border-bottom: 1px solid #00FFFF;
          font-weight: bold;
          padding-bottom: 10px;
          box-sizing: border-box;

          img{
            width: 30px;
            height: 30px;
            margin-right: 10px;
            animation: circle 1s ease-in-out infinite;
          }

          div{
            font-size: 15px;
            color: rgba(255,255,255,.8);

            span{
              color: #00FFFF;
            }
          }
        }

        .data-spot{
          display: flex;
          align-items: flex-start;
          margin-top: 10px;

          &>div{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            font-size: 14px;
            color: rgba(255,255,255,.8);

            p{
              margin-top: 6px;
              color: #00FFFF;
            }

            &:first-of-type{
              border-right: 1px solid #36FCFC;
            }
          }
        }
      }
      .section-1{
        position: absolute;
        left: 70px;
        top: -10px;
        width: calc((200vw - 240px) / 7 + 60px);
        height: 630px;
        background: rgba(0,100,190,.1);
        border: 1px solid rgba(0,100,190,.4);
        border-radius: 8px;
      }
      .section-2{
        position: absolute;
        left: calc((400vw - 480px)/ 7 + 70px);
        top: 150px;
        width: calc((200vw - 240px) / 7 + 60px);
        height: 470px;
        background: rgba(0,100,190,.1);
        border: 1px solid rgba(0,100,190,.4);
        border-radius: 8px;
      }
      .section-3{
        position: absolute;
        left: 100px;
        top: 630px;
        width: calc((500vw - 600px)/ 7 + 30px);
        height: 180px;
        background: rgba(0,100,190,.1);
        border: 1px solid rgba(0,100,190,.4);
        border-radius: 8px;
      }
    }
  }
</style>

 src/views/basicRightsManagement/personnelShiftManagement/holidayManagement/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -24,12 +24,14 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="name" label="休息日名称"/>
                    <el-table-column property="type" label="休息类型"/>
                    <el-table-column property="info" 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>
@@ -38,22 +40,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="休息日详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="名称">
@@ -145,171 +147,175 @@
    interface type {

    }
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);
    const state  = reactive<stateType>({});
    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 casProps = {
        expandTrigger: 'hover',
    }
    const tableData = reactive(
            [
            {
                name: '周末休息',
                type: '每周公休假日',
                content: ''
            },
            {
                name: '节假日休息',
                type: '每年法定节假日',
                content: ''
            },
            {
                name: '每周一、周四休息',
                type: '自定义休息日,每周',
                content: ['周一','周四']
            },
            {
                name: '每月休息日休息',
                type: '自定义休息日,每月',
                content: ['5','15','25']
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const casProps = {
                expandTrigger: 'hover',
            }
            const tableData = reactive(
                    [
                    {
                        name: '周末休息',
                        type: '每周公休假日',
                        content: ''
                    },
                    {
                        name: '节假日休息',
                        type: '每年法定节假日',
                        content: ''
                    },
                    {
                        name: '每周一、周四休息',
                        type: '自定义休息日,每周',
                        content: ['周一','周四']
                    },
                    {
                        name: '每月休息日休息',
                        type: '自定义休息日,每月',
                        content: ['5','15','25']
                    }
                ]
            )
            const holidayList =reactive([
        ]
    )
    const holidayList =reactive([
        {
            value: '每周公休假日',
            label: '每周公休假日'
        },
        {
            value: '每年法定节假日',
            label: '每年法定节假日'
        },
        {
            value: '自定义休息日',
            label: '自定义休息日',
            children: [
                {
                    value: '每周公休假日',
                    label: '每周公休假日'
                    value: '每周',
                    label: '每周',
                },
                {
                    value: '每年法定节假日',
                    label: '每年法定节假日'
                },
                {
                    value: '自定义休息日',
                    label: '自定义休息日',
                    children: [
                        {
                            value: '每周',
                            label: '每周',
                        },
                        {
                            value: '每月',
                            label: '每月',
                        }
                    ]
                    value: '每月',
                    label: '每月',
                }
            ])
            const handleChange = (value) => {
                addRecord.value.content = []
                console.log(JSON.parse(JSON.stringify(value)))
            ]
        }
    ])
    const handleChange = (value) => {
        addRecord.value.content = []
        console.log(JSON.parse(JSON.stringify(value)))
    }
    const weekDays = reactive(['周一','周二','周三','周四','周五','周六','周日'])
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        content:[{required: true, message: '该内容不能为空'}]
    })
    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 weekDays = reactive(['周一','周二','周三','周四','周五','周六','周日'])
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                content:[{required: true, message: '该内容不能为空'}]
            })
            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();
            };
            // return {
            //     renderMenu,
            //     multipleTableRef,
            //     tableData,
            //     currentPage,
            //     pageSize,
            //     dialogDetails,
            //     details,
            //     deleteDialog,
            //     dialogAddRecord,
            //     viewRecord,
            //     deleteRecord,
            //     handleSizeChange,
            //     handleCurrentChange,
            //     Plus,
            //     Edit,
            //     Delete,
            //     Search,
            //     Download,
            //     handleSelectionChange,
            //     Refresh,
            //     ...toRefs(state),
            // };
    //     },
    // });
    }
    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 lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            display: flex;
@@ -333,37 +339,6 @@
                    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;
            }
        }
    }

 src/views/basicRightsManagement/personnelShiftManagement/holidayTime/index.vue

对比新文件
@@ -0,0 +1,625 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <el-input v-model="searchWord" placeholder="休息日名称"></el-input>
                    <el-button type="primary" @click="searchRecord">查询</el-button>
                    <el-button plain @click="clearSearch">重置</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 @click="deleteWorkTimePeriods">删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="100" />
                    <el-table-column property="name" label="休息日名称"/>
                    <el-table-column property="type" label="休息日类型"/>
                    <el-table-column property="info" 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.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageBtn">
                    <el-pagination
                            v-model:currentPage="pageIndex"
                            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>
        </div>
        </div>
        <el-dialog v-model="dialogDetails" title="休息时间">
            <el-form :model="details" label-width="120px">
                <el-form-item label="名称">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="休假类型">
                    <el-input
                            v-model="details.type"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="休假时间" v-if="details.content.length>0">
                    <el-input
                            v-model="details.content"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="描述信息" v-if="details.info">
                    <el-input
                            v-model="details.info"
                            type="textarea"
                            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" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="休息日名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="休假类型" prop="type">
                    <el-cascader
                            v-model="addRecord.type"
                            :options="holidayList"
                            :props="casProps"
                            @change="handleChange"
                    />
                </el-form-item>
                <el-form-item label="选择休假时间" prop="content" v-if="addRecord.type && JSON.parse(JSON.stringify(addRecord.type))[1] == '每周'">
                    <el-checkbox-group v-model="addRecord.content">
                        <el-checkbox v-for="(item,i) in weekDays" :label="item" :key="i"/>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="选择休假时间" prop="content" v-if="addRecord.type && JSON.parse(JSON.stringify(addRecord.type))[1] == '每月'">
                    <el-checkbox-group v-model="addRecord.content">
                        <el-checkbox v-for="index in 31" :label="index" :key="index"/>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="描述信息" prop="info">
                    <el-input
                            v-model="addRecord.info"
                            type="textarea"
                    >
                    </el-input>
                </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 lang="ts">
    import { toRefs, reactive, ref, onMounted } 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 } from 'element-plus'
    import { FormInstance, FormRules, ElMessage } from 'element-plus'
    import { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHours';



    // 定义接口来定义对象的类型
    interface stateType {
        tableData: Array<string>,
        multipleSelection: Array<any>,
        deleteArr: Array<any>,
        dialogDetails: boolean,
        dialogAddRecord: boolean,
        deleteDialog: boolean,
        pageIndex: number,
        pageSize: number,
        searchWord: string,
        totalSize: number,
        addRecord: {
            name: string,
            type: string,
            content: Array<any>,
            info: string
        },
        details: {
            name: string,
            type: string,
            content: Array<any>,
            info: string
        }
    }

    export default {
    name: 'workingHours',
    components:{},
    setup() {
        const userInfo = useUserInfo()
        const {userInfos} = storeToRefs(userInfo);

        const state = reactive<stateType>({
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            chosenIndex: null,
            searchWord: '',
            tableData: [],
            multipleSelection: [],
            dialogDetails: false,
            dialogAddRecord: false,
            deleteDialog: false,
            holidayList:[
                {
                    value: '每周公休假日',
                    label: '每周公休假日'
                },
                {
                    value: '每年法定节假日',
                    label: '每年法定节假日'
                },
                {
                    value: '自定义休息日',
                    label: '自定义休息日',
                    children: [
                        {
                            value: '每周',
                            label: '每周',
                        },
                        {
                            value: '每月',
                            label: '每月',
                        }
                    ]
                }
            ],
            weekDays: ['周一','周二','周三','周四','周五','周六','周日'],
            casProps: {
                expandTrigger: 'hover',
            },
            addRecord: {
                name: '',
                type: '',
                content: [],
                info: ''
            },
            details: {
                name: '',
                type: '',
                content: [],
                info: ''
            },
            deleteId: null,
            deleteArr: []
        })
        interface User {
            name: string,
            type: string,
            content: [],
            info: string
        }

        const handleChange = (value) => {
            state.addRecord.content = []
            console.log(JSON.parse(JSON.stringify(value)))
        }

        const multipleTableRef = ref<InstanceType<typeof ElTable>>()
        const toggleSelection = (rows?: User[]) => {
            if (rows) {
                rows.forEach((row) => {
                    // TODO: improvement typing when refactor table
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    multipleTableRef.value!.toggleRowSelection(row, undefined)
                })
            } else {
                multipleTableRef.value!.clearSelection()
            }
        }

        // 多选
        const handleSelectionChange = (val: User[]) => {
            state.multipleSelection = JSON.parse(JSON.stringify(val))
            state.deleteArr = state.multipleSelection.map((item)=>{
                item = item.id
                return item
            })
        }

        const addRef = ref<FormInstance>()
        const addRules = reactive<FormRules>({
            name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            type: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            content: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
        })

        // 页面载入时执行方法
        onMounted(() => {
            // getWorkTimePeriod()
            getListByPage()
        })

        // 获取工作时段列表
        const getWorkTimePeriod = async () => {
            let res = await workingHoursApi().getWorkTimePeriod({name: state.searchWord});
            if (res.data.code === '200') {
                state.tableData = res.data.data.map((item)=>{
                    item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
                    item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
                    item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
                    item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
                    item.startTime = item.startHour + ':' + item.startMin
                    item.endTime = item.endHour + ':' + item.endMin
                    return item
                })
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        // 分页获取工作时段列表
        const getListByPage = async ()=>{
            const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}}
            let res = await workingHoursApi().postPeriodPage(data);
            if (res.data.code === '200') {
                state.tableData = res.data.data.map((item)=>{
                    item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
                    item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
                    item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
                    item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
                    item.startTime = item.startHour + ':' + item.startMin
                    item.endTime = item.endHour + ':' + item.endMin
                    return item
                })
                state.totalSize = res.data.total
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

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

        const clearSearch = async()=>{
            state.searchWord=''
            getListByPage()
        }

        // 添加工作时段
        const addWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().postWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 修改工作时段
        const editWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().updateWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        // 删除工作时段
        const deleteWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().deletWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        const deleteRecord = (row) => {
            state.deleteId = row.id
            state.deleteDialog = true
        }

        const conFirmDelete = () => {
            deleteWorkTimePeriod({ id: state.deleteId })
            state.deleteDialog = false
        }

        // 批量删除
        const deleteWorkTimePeriods = async () => {
            if(state.deleteArr.length>0){
                console.log(state.deleteArr)
                let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr});
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage()
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }else{
                ElMessage({
                    type: 'warning',
                    message: '请先选择要删除的记录'
                });
            }
        }

        const handleSizeChange = (val: number) => {
            state.pageSize = val
            getListByPage()
        }
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val
            getListByPage()
        }

        // 查看记录
        const viewRecord = (row) => {
            state.details = row
            state.dialogDetails = true
        }

        // 刷新
        const reLoadData = async () =>{
            getListByPage()
        }
        const editRecord = (index, row) => {
            state.dialogAddRecord = true
            state.chosenIndex = index
            state.addRecord = JSON.parse(JSON.stringify(row))
        }

        // 新增修改记录
        const confirmAddRecord = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate(async (valid, fields) => {
                if (valid) {
                    const data = {
                        name: state.addRecord.name,
                        info: state.addRecord.info,
                        startHour: Number(state.addRecord.startTime.substring(0, 2)),
                        startMin: Number(state.addRecord.startTime.substring(3)),
                        endHour: Number(state.addRecord.endTime.substring(0, 2)),
                        endMin: Number(state.addRecord.endTime.substring(3))
                    }
                    if (state.chosenIndex == null) {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData.unshift(data)
                        await addWorkTimePeriod(data)
                    } else {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData[state.chosenIndex] = state.addRecord
                        data.id = state.addRecord.id,
                        await editWorkTimePeriod(data)
                    }
                    state.dialogAddRecord = false
                } else {
                    console.log('error submit!', fields)
                }
            })

        }
        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
            await initBackEndControlRoutes();
        };
        return {
            addRef,
            addRules,
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            toggleSelection,
            handleSelectionChange,
            deleteWorkTimePeriods,
            searchRecord,
            clearSearch,
            viewRecord,
            deleteRecord,
            conFirmDelete,
            getWorkTimePeriod,
            getListByPage,
            reLoadData,
            deleteWorkTimePeriod,
            handleSizeChange,
            handleCurrentChange,
            confirmAddRecord,
            closeAdd,
            openAdd,
            indexClear,
            editRecord,
            ...toRefs(state)
        };
    }
    }
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            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;
                }
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/basicRightsManagement/personnelShiftManagement/holidayTimeSet/index.vue

对比新文件
@@ -0,0 +1,567 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <el-input v-model="searchWord" placeholder="休息时间组名称"></el-input>
                    <el-button type="primary" @click="searchRecord">查询</el-button>
                    <el-button plain @click="clearSearch">重置</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 @click="deleteWorkTimePeriods">删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="100" />
                    <el-table-column property="name" label="休息时间组名称"/>
                    <el-table-column property="content" label="关联休息时间"/>
                    <el-table-column property="info" 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.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageBtn">
                    <el-pagination
                            v-model:currentPage="pageIndex"
                            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>
        </div>
        </div>
        <el-dialog v-model="dialogDetails" title="休息时间组">
            <el-form :model="details" label-width="120px">
                <el-form-item label="时间组名称">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="关联休息时间" v-if="details.content.length>0">
                    <el-input
                            v-model="details.content"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="描述信息" v-if="details.info">
                    <el-input
                            v-model="details.info"
                            type="textarea"
                            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" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="时间组名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="关联休息时间" prop="content">
                    <el-select v-model="addRecord.content">
                        <el-option label="周末休息" value="周末休息" />
                        <el-option label="节假日休息" value="节假日休息" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述信息" prop="info">
                    <el-input
                            v-model="addRecord.info"
                            type="textarea"
                    >
                    </el-input>
                </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 lang="ts">
    import { toRefs, reactive, ref, onMounted } 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 } from 'element-plus'
    import { FormInstance, FormRules, ElMessage } from 'element-plus'
    import { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHours';



    // 定义接口来定义对象的类型
    interface stateType {
        tableData: Array<string>,
        multipleSelection: Array<any>,
        deleteArr: Array<any>,
        dialogDetails: boolean,
        dialogAddRecord: boolean,
        deleteDialog: boolean,
        pageIndex: number,
        pageSize: number,
        searchWord: string,
        totalSize: number,
        addRecord: {
            name: string,
            content: Array<any>,
            info: string
        },
        details: {
            name: string,
            content: Array<any>,
            info: string
        }
    }

    export default {
    name: 'workingHours',
    components:{},
    setup() {
        const userInfo = useUserInfo()
        const {userInfos} = storeToRefs(userInfo);

        const state = reactive<stateType>({
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            chosenIndex: null,
            searchWord: '',
            tableData: [],
            multipleSelection: [],
            dialogDetails: false,
            dialogAddRecord: false,
            deleteDialog: false,
            addRecord: {
                name: '',
                content: [],
                info: ''
            },
            details: {
                name: '',
                content: [],
                info: ''
            },
            deleteId: null,
            deleteArr: []
        })
        interface User {
            name: string,
            content: [],
            info: string
        }
        const multipleTableRef = ref<InstanceType<typeof ElTable>>()
        const toggleSelection = (rows?: User[]) => {
            if (rows) {
                rows.forEach((row) => {
                    // TODO: improvement typing when refactor table
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    multipleTableRef.value!.toggleRowSelection(row, undefined)
                })
            } else {
                multipleTableRef.value!.clearSelection()
            }
        }

        // 多选
        const handleSelectionChange = (val: User[]) => {
            state.multipleSelection = JSON.parse(JSON.stringify(val))
            state.deleteArr = state.multipleSelection.map((item)=>{
                item = item.id
                return item
            })
        }

        const addRef = ref<FormInstance>()
        const addRules = reactive<FormRules>({
            name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            content: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
        })

        // 页面载入时执行方法
        onMounted(() => {
            // getWorkTimePeriod()
            getListByPage()
        })

        // 获取工作时段列表
        const getWorkTimePeriod = async () => {
            let res = await workingHoursApi().getWorkTimePeriod({name: state.searchWord});
            if (res.data.code === '200') {
                state.tableData = res.data.data.map((item)=>{
                    item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
                    item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
                    item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
                    item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
                    item.startTime = item.startHour + ':' + item.startMin
                    item.endTime = item.endHour + ':' + item.endMin
                    return item
                })
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        // 分页获取工作时段列表
        const getListByPage = async ()=>{
            const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}}
            let res = await workingHoursApi().postPeriodPage(data);
            if (res.data.code === '200') {
                state.tableData = res.data.data.map((item)=>{
                    item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
                    item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
                    item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
                    item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
                    item.startTime = item.startHour + ':' + item.startMin
                    item.endTime = item.endHour + ':' + item.endMin
                    return item
                })
                state.totalSize = res.data.total
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

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

        const clearSearch = async()=>{
            state.searchWord=''
            getListByPage()
        }

        // 添加工作时段
        const addWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().postWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 修改工作时段
        const editWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().updateWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        // 删除工作时段
        const deleteWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().deletWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        const deleteRecord = (row) => {
            state.deleteId = row.id
            state.deleteDialog = true
        }

        const conFirmDelete = () => {
            deleteWorkTimePeriod({ id: state.deleteId })
            state.deleteDialog = false
        }

        // 批量删除
        const deleteWorkTimePeriods = async () => {
            if(state.deleteArr.length>0){
                console.log(state.deleteArr)
                let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr});
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage()
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }else{
                ElMessage({
                    type: 'warning',
                    message: '请先选择要删除的记录'
                });
            }
        }

        const handleSizeChange = (val: number) => {
            state.pageSize = val
            getListByPage()
        }
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val
            getListByPage()
        }

        // 查看记录
        const viewRecord = (row) => {
            state.details = row
            state.dialogDetails = true
        }

        // 刷新
        const reLoadData = async () =>{
            getListByPage()
        }
        const editRecord = (index, row) => {
            state.dialogAddRecord = true
            state.chosenIndex = index
            state.addRecord = JSON.parse(JSON.stringify(row))
        }

        // 新增修改记录
        const confirmAddRecord = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate(async (valid, fields) => {
                if (valid) {
                    const data = {
                        name: state.addRecord.name,
                        info: state.addRecord.info,
                        startHour: Number(state.addRecord.startTime.substring(0, 2)),
                        startMin: Number(state.addRecord.startTime.substring(3)),
                        endHour: Number(state.addRecord.endTime.substring(0, 2)),
                        endMin: Number(state.addRecord.endTime.substring(3))
                    }
                    if (state.chosenIndex == null) {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData.unshift(data)
                        await addWorkTimePeriod(data)
                    } else {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData[state.chosenIndex] = state.addRecord
                        data.id = state.addRecord.id,
                        await editWorkTimePeriod(data)
                    }
                    state.dialogAddRecord = false
                } else {
                    console.log('error submit!', fields)
                }
            })

        }
        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
            await initBackEndControlRoutes();
        };
        return {
            addRef,
            addRules,
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            toggleSelection,
            handleSelectionChange,
            deleteWorkTimePeriods,
            searchRecord,
            clearSearch,
            viewRecord,
            deleteRecord,
            conFirmDelete,
            getWorkTimePeriod,
            getListByPage,
            reLoadData,
            deleteWorkTimePeriod,
            handleSizeChange,
            handleCurrentChange,
            confirmAddRecord,
            closeAdd,
            openAdd,
            indexClear,
            editRecord,
            ...toRefs(state)
        };
    }
    }
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            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;
                }
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/basicRightsManagement/personnelShiftManagement/personnelManagement/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -24,6 +24,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -42,22 +43,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="人员排班">
            <el-form :model="details" label-width="120px">
                <el-form-item label="排班名称">
@@ -164,148 +165,152 @@
    interface type {

    }
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const casProps = {
                expandTrigger: 'hover',
                multiple: true,
                emitPath: false,
                checkStrictly: false
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);
    const state  = reactive<stateType>({});
    const currentPage = ref(1)
    const pageSize = ref(10)
    const chosenIndex = ref(-1)
    const casProps = {
        expandTrigger: 'hover',
        multiple: true,
        emitPath: false,
        checkStrictly: false
    }
    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
    }
    const tableData = reactive(
            [
            {
                schedName: 'A车间三班三倒',
                schedPlan: '三班三倒',
                restType: ['每周公休假日'],
                team: 'A车间班组',
                startTime: '2022-07-14',
                endTime: '2022-07-16'
            },
            {
                schedName: 'B车间常白班',
                schedPlan: '常白班',
                restType: ['自定义休息日/每周'],
                team: 'B车间班组',
                startTime: '2022-07-16',
                endTime: '2022-07-20'
            },
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        schedName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        schedPlan:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        restType:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        team:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        timeRange:[{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){
                    addRecord.value.startTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[0]
                    addRecord.value.endTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[1]
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.startTime =  JSON.parse(JSON.stringify(addRecord.value.timeRange))[0]
                    addRecord.value.endTimeTime =  JSON.parse(JSON.stringify(addRecord.value.timeRange))[1]
                    tableData[chosenIndex.value] = addRecord.value
                }
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const tableData = reactive(
                    [
                    {
                        schedName: 'A车间三班三倒',
                        schedPlan: '三班三倒',
                        restType: ['每周公休假日'],
                        team: 'A车间班组',
                        startTime: '2022-07-14',
                        endTime: '2022-07-16'
                    },
                    {
                        schedName: 'B车间常白班',
                        schedPlan: '常白班',
                        restType: ['自定义休息日/每周'],
                        team: 'B车间班组',
                        startTime: '2022-07-16',
                        endTime: '2022-07-20'
                    },
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                schedName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                schedPlan:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                restType:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                team:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                timeRange:[{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){
                            addRecord.value.startTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[0]
                            addRecord.value.endTime = JSON.parse(JSON.stringify(addRecord.value.timeRange))[1]
                            tableData.unshift(addRecord.value)
                        }else{
                            addRecord.value.startTime =  JSON.parse(JSON.stringify(addRecord.value.timeRange))[0]
                            addRecord.value.endTimeTime =  JSON.parse(JSON.stringify(addRecord.value.timeRange))[1]
                            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))
                addRecord.value.timeRange= [addRecord.value.startTime,addRecord.value.endTime]
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            // return {
            //     renderMenu,
            //     multipleTableRef,
            //     tableData,
            //     currentPage,
            //     pageSize,
            //     dialogDetails,
            //     details,
            //     deleteDialog,
            //     dialogAddRecord,
            //     viewRecord,
            //     deleteRecord,
            //     handleSizeChange,
            //     handleCurrentChange,
            //     Plus,
            //     Edit,
            //     Delete,
            //     Search,
            //     Download,
            //     handleSelectionChange,
            //     Refresh,
            //     ...toRefs(state),
            // };
    //     },
    // });
    }
    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))
        addRecord.value.timeRange= [addRecord.value.startTime,addRecord.value.endTime]
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            display: flex;
@@ -329,37 +334,6 @@
                    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;
            }
        }
    }

 src/views/basicRightsManagement/personnelShiftManagement/shiftManagement/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -24,6 +24,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -38,22 +39,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="排班方案">
            <el-form :model="details" label-width="120px">
                <el-form-item label="名称">
@@ -230,223 +231,227 @@
    interface type {

    }
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const chosenShiftIndex = ref(-1)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const casProps = {
                expandTrigger: 'hover',
            }
            const tableData = reactive(
                    [
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);
    const state  = reactive<stateType>({});
    const currentPage = ref(1)
    const pageSize = ref(10)
    const chosenIndex = ref(-1)
    const chosenShiftIndex = ref(-1)
    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
    }
    const casProps = {
        expandTrigger: 'hover',
    }
    const tableData = reactive(
            [
            {
                name: '三班三倒',
                type: '循环班',
                shiftSteps:[
                    {
                        name: '三班三倒',
                        type: '循环班',
                        shiftSteps:[
                            {
                                name: '第一班',
                                days: '5',
                                rest: '1',
                                timeRange: '三班三倒早班'
                            },
                            {
                                name: '第二班',
                                days: '5',
                                rest: '2',
                                timeRange: '三班三倒中班'
                            },
                            {
                                name: '第三班',
                                days: '5',
                                rest: '3',
                                timeRange: '三班三倒夜班'
                            }
                        ]
                        name: '第一班',
                        days: '5',
                        rest: '1',
                        timeRange: '三班三倒早班'
                    },
                    {
                        name: '常白班',
                        type: '固定班'
                        name: '第二班',
                        days: '5',
                        rest: '2',
                        timeRange: '三班三倒中班'
                    },
                    {
                        name: '第三班',
                        days: '5',
                        rest: '3',
                        timeRange: '三班三倒夜班'
                    }
                ]
            )
            const handleChange = (value) => {
                addRecord.value.content = []
                console.log(JSON.parse(JSON.stringify(value)))
            },
            {
                name: '常白班',
                type: '固定班'
            }
            const addRef = ref<FormInstance>()
            const addShiftRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            })
            const addShiftRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                days:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                rest:[{required: true,message: '该内容不能为空',trigger: 'blur'}],
                timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            })
            const dialogDetails = ref(false)
            const dialogAddRecord = ref(false)
            const deleteDialog = ref(false)
            const deleteShiftDialog = ref(false)
            const dialogAddShift = ref(false)
            const addRecord = ref({})
            const addShift = 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){
                            if(addRecord.value.type == '循环班' && (!addRecord.value.shiftSteps || addRecord.value.shiftSteps.length == 0)){
                                ElMessage({
                                    message: '请先设置自定义排班后再提交',
                                    type: 'warning',
                                })
                                return
                            }else{
                                tableData.unshift(addRecord.value)
                            }
                        }else{
                            if(addRecord.value.type == '循环班' && addRecord.value.shiftSteps.length == 0){
                                ElMessage({
                                    message: '请先设置自定义排班后再提交',
                                    type: 'warning',
                                })
                                return
                            }else{
                                if(addRecord.value.type == '固定班'){delete addRecord.value.shiftSteps}
                                console.log(addRecord.value,'addRecord')
                                tableData[chosenIndex.value] = addRecord.value
                            }
                        }
                        dialogAddRecord.value =false
                    } else {
                        console.log('error submit!', fields)
        ]
    )
    const handleChange = (value) => {
        addRecord.value.content = []
        console.log(JSON.parse(JSON.stringify(value)))
    }
    const addRef = ref<FormInstance>()
    const addShiftRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}]
    })
    const addShiftRules = reactive<FormRules>({
        name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        days:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        rest:[{required: true,message: '该内容不能为空',trigger: 'blur'}],
        timeRange:[{required: true, message: '该内容不能为空',trigger:'blur'}]
    })
    const dialogDetails = ref(false)
    const dialogAddRecord = ref(false)
    const deleteDialog = ref(false)
    const deleteShiftDialog = ref(false)
    const dialogAddShift = ref(false)
    const addRecord = ref({})
    const addShift = 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){
                    if(addRecord.value.type == '循环班' && (!addRecord.value.shiftSteps || addRecord.value.shiftSteps.length == 0)){
                        ElMessage({
                            message: '请先设置自定义排班后再提交',
                            type: 'warning',
                        })
                        return
                    }else{
                        tableData.unshift(addRecord.value)
                    }
                })

            }
            const closeAdd =()=>{
                addRecord.value={}
                chosenIndex.value = -1
                addShift.value={}
                chosenShiftIndex.value = -1
            }
            const indexClear = ()=>{
                chosenIndex.value = -1
            }
            const indexShiftClear = ()=>{
                chosenShiftIndex.value = -1
            }
            const editRecord =(index, row)=>{
                dialogAddRecord.value = true
                chosenIndex.value = index
                addRecord.value = JSON.parse(JSON.stringify(row))
            }

            // 添加删除排班步骤
            const addFlow = (index) => {
                dialogAddShift.value = true
                chosenShiftIndex.value = index
            }
            const deleteFlow = (index) => {
                deleteShiftDialog.value = true
                chosenShiftIndex.value = index
            }
            const conFirmShiftDelete = () => {
                addRecord.value.shiftSteps.splice( chosenShiftIndex.value,1)
                deleteShiftDialog.value = false
            }
            const confirmAddShift = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(addRecord.value.shiftSteps){
                            addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value)
                        }else{
                            addRecord.value.shiftSteps = []
                            addRecord.value.shiftSteps.unshift(addShift.value)
                        }
                        dialogAddShift.value = false
                    } else {
                        console.log('error submit!', fields)
                }else{
                    if(addRecord.value.type == '循环班' && addRecord.value.shiftSteps.length == 0){
                        ElMessage({
                            message: '请先设置自定义排班后再提交',
                            type: 'warning',
                        })
                        return
                    }else{
                        if(addRecord.value.type == '固定班'){delete addRecord.value.shiftSteps}
                        console.log(addRecord.value,'addRecord')
                        tableData[chosenIndex.value] = addRecord.value
                    }
                })
                }
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
        })

    }
    const closeAdd =()=>{
        addRecord.value={}
        chosenIndex.value = -1
        addShift.value={}
        chosenShiftIndex.value = -1
    }
    const indexClear = ()=>{
        chosenIndex.value = -1
    }
    const indexShiftClear = ()=>{
        chosenShiftIndex.value = -1
    }
    const editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }

    // 添加删除排班步骤
    const addFlow = (index) => {
        dialogAddShift.value = true
        chosenShiftIndex.value = index
    }
    const deleteFlow = (index) => {
        deleteShiftDialog.value = true
        chosenShiftIndex.value = index
    }
    const conFirmShiftDelete = () => {
        addRecord.value.shiftSteps.splice( chosenShiftIndex.value,1)
        deleteShiftDialog.value = false
    }
    const confirmAddShift = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                if(addRecord.value.shiftSteps){
                    addRecord.value.shiftSteps.splice(chosenShiftIndex.value+1,0,addShift.value)
                }else{
                    addRecord.value.shiftSteps = []
                    addRecord.value.shiftSteps.unshift(addShift.value)
                }
                dialogAddShift.value = false
            } else {
                console.log('error submit!', fields)
            }
            const closeAddShift =()=>{
                addShift.value={}
                chosenShiftIndex.value = -1
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            // return {
            //     renderMenu,
            //     multipleTableRef,
            //     tableData,
            //     currentPage,
            //     pageSize,
            //     dialogDetails,
            //     details,
            //     deleteDialog,
            //     dialogAddRecord,
            //     viewRecord,
            //     deleteRecord,
            //     handleSizeChange,
            //     handleCurrentChange,
            //     Plus,
            //     Edit,
            //     Delete,
            //     Search,
            //     Download,
            //     handleSelectionChange,
            //     Refresh,
            //     ...toRefs(state),
            // };
    //     },
    // });
        })

    }
    const closeAddShift =()=>{
        addShift.value={}
        chosenShiftIndex.value = -1
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            display: flex;
@@ -470,37 +475,6 @@
                    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;
            }
        }
    }

 src/views/basicRightsManagement/personnelShiftManagement/teamManagement/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -24,6 +24,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -38,22 +39,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="班组信息">
            <el-form :model="details" label-width="120px">
                <el-form-item label="班组名称">
@@ -127,194 +128,198 @@
    interface type {

    }
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const casProps = {
                expandTrigger: 'hover',
                multiple: true,
                emitPath: false,
                checkStrictly: false
            }
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const workerList =reactive([
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);
    const state  = reactive<stateType>({});
    const currentPage = ref(1)
    const pageSize = ref(10)
    const chosenIndex = ref(-1)
    const casProps = {
        expandTrigger: 'hover',
        multiple: true,
        emitPath: false,
        checkStrictly: false
    }
    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
    }
    const workerList =reactive([
        {
            value: 'A部门车间',
            label: 'A部门车间',
            children: [
                {
                    value: 'A部门车间',
                    label: 'A部门车间',
                    children: [
                        {
                            value: '刘能',
                            label: '刘能',
                        },
                        {
                            value: '赵四',
                            label: '赵四',
                        },
                        {
                            value: '谢广坤',
                            label: '谢广坤',
                        },
                        {
                            value: '王大拿',
                            label: '王大拿',
                        },
                        {
                            value: '刘能',
                            label: '刘能',
                        },
                        {
                            value: '赵四',
                            label: '赵四',
                        }
                    ]
                    value: '刘能',
                    label: '刘能',
                },
                {
                    value: 'B部门车间',
                    label: 'B部门车间',
                    children: [
                        {
                            value: '刘备',
                            label: '刘备',
                        },
                        {
                            value: '关羽',
                            label: '关羽',
                        },
                        {
                            value: '张飞',
                            label: '张飞',
                        },
                        {
                            value: '赵云',
                            label: '赵云',
                        },
                        {
                            value: '黄忠',
                            label: '黄忠',
                        },
                        {
                            value: '马超',
                            label: '马超',
                        }
                    ]
                    value: '赵四',
                    label: '赵四',
                },
                {
                    value: '谢广坤',
                    label: '谢广坤',
                },
                {
                    value: '王大拿',
                    label: '王大拿',
                },
                {
                    value: '刘能',
                    label: '刘能',
                },
                {
                    value: '赵四',
                    label: '赵四',
                }
            ])
            const tableData = reactive(
                    [
                    {
                        teamName: 'A车间班组',
                        teamMember: ['张三','李四','李羽飞']
                    },
                    {
                        teamName: 'B车间班组',
                        teamMember: ['刘能','赵四','谢广坤']
                    },
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                teamName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                teamMember:[{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
            ]
        },
        {
            value: 'B部门车间',
            label: 'B部门车间',
            children: [
                {
                    value: '刘备',
                    label: '刘备',
                },
                {
                    value: '关羽',
                    label: '关羽',
                },
                {
                    value: '张飞',
                    label: '张飞',
                },
                {
                    value: '赵云',
                    label: '赵云',
                },
                {
                    value: '黄忠',
                    label: '黄忠',
                },
                {
                    value: '马超',
                    label: '马超',
                }
            ]
        }
    ])
    const tableData = reactive(
            [
            {
                teamName: 'A车间班组',
                teamMember: ['张三','李四','李羽飞']
            },
            {
                teamName: 'B车间班组',
                teamMember: ['刘能','赵四','谢广坤']
            },
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        teamName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        teamMember:[{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 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();
            };
            // return {
            //     renderMenu,
            //     multipleTableRef,
            //     tableData,
            //     currentPage,
            //     pageSize,
            //     dialogDetails,
            //     details,
            //     deleteDialog,
            //     dialogAddRecord,
            //     viewRecord,
            //     deleteRecord,
            //     handleSizeChange,
            //     handleCurrentChange,
            //     Plus,
            //     Edit,
            //     Delete,
            //     Search,
            //     Download,
            //     handleSelectionChange,
            //     Refresh,
            //     ...toRefs(state),
            // };
    //     },
    // });
    }
    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 lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            display: flex;
@@ -338,37 +343,6 @@
                    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;
            }
        }
    }

 src/views/basicRightsManagement/personnelShiftManagement/workingHours/index.vue

@@ -1,12 +1,12 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <el-input v-model="searchWord" placeholder="工作时段名称"></el-input>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                    <el-button type="primary" @click="searchRecord">查询</el-button>
                    <el-button plain @click="clearSearch">重置</el-button>
                </div>
            </el-col>
        </el-row>
@@ -16,57 +16,70 @@
                    <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-button type="danger" :icon="Delete" size="default" plain @click="deleteWorkTimePeriods">删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                    <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="100" />
                    <el-table-column property="name" label="工作时段名称"/>
                    <el-table-column property="range" label="排班时段"/>
                    <el-table-column property="startTime" label="开始时间"/>
                    <el-table-column property="endTime" label="结束时间"/>
                    <el-table-column property="info" 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>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.row)">删除</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 class="pageBtn">
                    <el-pagination
                            v-model:currentPage="pageIndex"
                            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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="工作时段">
            <el-form :model="details" label-width="120px">
                <el-form-item label="工作时段名称">
                    <el-input
                            v-model="details.name"
                            class="input-with-select"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="排班时段">
                <el-form-item label="开始时间">
                    <el-input
                            v-model="details.range"
                            class="input-with-select"
                            v-model="details.startTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-input
                            v-model="details.endTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="描述信息">
                    <el-input
                            v-model="details.info"
                            readonly
                    />
                </el-form-item>
@@ -75,7 +88,7 @@
                </el-form-item>
            </el-form>
        </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="name">
                    <el-input
@@ -84,22 +97,27 @@
                    </el-input>
                </el-form-item>
                <el-form-item label="上班开始时间" prop="startTime">
                    <el-time-select
                    <el-time-picker
                            v-model="addRecord.startTime"
                            start="00:00"
                            step="00:15"
                            end="24:00"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="Select time"
                    />
                </el-form-item>
                <el-form-item label="上班结束时间" prop="endTime">
                    <el-time-select
                    <el-time-picker
                            v-model="addRecord.endTime"
                            start="00:00"
                            step="00:15"
                            end="24:00"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="Select time"
                    />
                </el-form-item>
                <el-form-item label="描述信息" prop="info">
                    <el-input
                            v-model="addRecord.info"
                            type="textarea"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
@@ -119,167 +137,420 @@
    </div>
</template>

<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
<script lang="ts">
    import { toRefs, reactive, ref, onMounted } 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 } from 'element-plus'
    import { FormInstance, FormRules } from 'element-plus'
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    };
    import { FormInstance, FormRules, ElMessage } from 'element-plus'
    import { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHours';



    // 定义接口来定义对象的类型
    interface stateType {
        homeOne: Array <type>
        tableData: Array<string>,
        multipleSelection: Array<any>,
        deleteArr: Array<any>,
        dialogDetails: boolean,
        dialogAddRecord: boolean,
        deleteDialog: boolean,
        pageIndex: number,
        pageSize: number,
        searchWord: string,
        totalSize: number,
        addRecord: {
            name: string,
            startTime: string,
            endTime: string,
            info: string
        },
        details: {
            name: string,
            startTime: string,
            endTime: string,
            info: string
        }
    }
    interface type {

    }
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            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(
                    [
                    {
                        name: '四班三倒早班',
                        range: '04:00 - 12:00'
                    },
                    {
                        name: '四班三倒中班',
                        range: '12:00 - 20:00'
                    },
                    {
                        name: '四班三倒中班',
                        range: '20:00 - 次日04:00'
                    },
                    {
                        name: '常白班',
                        range: '08:00 - 18:00'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                startTime:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                endTime:[{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){
                            if(addRecord.value.startTime >=  addRecord.value.endTime){
                                addRecord.value.endTime = '次日' + addRecord.value.endTime
                            }
                            addRecord.value.range = addRecord.value.startTime + '\xa0-\xa0' + addRecord.value.endTime
                            tableData.unshift(addRecord.value)
                        }else{
                            if(addRecord.value.startTime >=  addRecord.value.endTime){
                                addRecord.value.endTime = '次日' + addRecord.value.endTime
                            }
                            addRecord.value.range = addRecord.value.startTime + '\xa0-\xa0' + addRecord.value.endTime
                            tableData[chosenIndex.value] = addRecord.value
                        }
                        dialogAddRecord.value =false
                    } else {
                        console.log('error submit!', fields)
                    }
    export default {
    name: 'workingHours',
    components:{},
    setup() {
        const userInfo = useUserInfo()
        const {userInfos} = storeToRefs(userInfo);

        const state = reactive<stateType>({
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            chosenIndex: null,
            searchWord: '',
            tableData: [],
            multipleSelection: [],
            dialogDetails: false,
            dialogAddRecord: false,
            deleteDialog: false,
            addRecord: {
                name: '',
                startTime: '',
                endTime: '',
                info: ''
            },
            details: {
                name: '',
                startTime: '',
                endTime: '',
                info: ''
            },
            deleteId: null,
            deleteArr: []
        })
        interface User {
            name: string,
            startTime: string,
            endTime: string,
            info: string
        }
        const multipleTableRef = ref<InstanceType<typeof ElTable>>()
        const toggleSelection = (rows?: User[]) => {
            if (rows) {
                rows.forEach((row) => {
                    // TODO: improvement typing when refactor table
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    multipleTableRef.value!.toggleRowSelection(row, undefined)
                })
            } else {
                multipleTableRef.value!.clearSelection()
            }
        }

        // 多选
        const handleSelectionChange = (val: User[]) => {
            state.multipleSelection = JSON.parse(JSON.stringify(val))
            state.deleteArr = state.multipleSelection.map((item)=>{
                item = item.id
                return item
            })
        }

        const addRef = ref<FormInstance>()
        const addRules = reactive<FormRules>({
            name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            endTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
        })

        // 页面载入时执行方法
        onMounted(() => {
            // getWorkTimePeriod()
            getListByPage()
        })

        // 获取工作时段列表
        const getWorkTimePeriod = async () => {
            let res = await workingHoursApi().getWorkTimePeriod({name: state.searchWord});
            if (res.data.code === '200') {
                state.tableData = res.data.data.map((item)=>{
                    item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
                    item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
                    item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
                    item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
                    item.startTime = item.startHour + ':' + item.startMin
                    item.endTime = item.endHour + ':' + item.endMin
                    return item
                })
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
            const closeAdd =()=>{
                addRecord.value={}
                chosenIndex.value = -1
        }

        // 分页获取工作时段列表
        const getListByPage = async ()=>{
            const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}}
            let res = await workingHoursApi().postPeriodPage(data);
            if (res.data.code === '200') {
                state.tableData = res.data.data.map((item)=>{
                    item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
                    item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
                    item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
                    item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
                    item.startTime = item.startHour + ':' + item.startMin
                    item.endTime = item.endHour + ':' + item.endMin
                    return item
                })
                state.totalSize = res.data.total
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
            const indexClear = ()=>{
                chosenIndex.value = -1
        }

        // 关键词查询记录
        const searchRecord = async()=>{
            if(state.searchWord==''){
                ElMessage({
                    type: 'warning',
                    message: '请输入查询关键词'
                });
            }else{
                getListByPage()
            }
            const editRecord =(index, row)=>{
                dialogAddRecord.value = true
                chosenIndex.value = index
                addRecord.value = JSON.parse(JSON.stringify(row))
                addRecord.value.startTime = addRecord.value.range.substring(0,5)
                addRecord.value.endTime = addRecord.value.range.substring(8)
        }

        const clearSearch = async()=>{
            state.searchWord=''
            getListByPage()
        }

        // 添加工作时段
        const addWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().postWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            // return {
            //     renderMenu,
            //     multipleTableRef,
            //     tableData,
            //     currentPage,
            //     pageSize,
            //     dialogDetails,
            //     details,
            //     deleteDialog,
            //     dialogAddRecord,
            //     viewRecord,
            //     deleteRecord,
            //     handleSizeChange,
            //     handleCurrentChange,
            //     Plus,
            //     Edit,
            //     Delete,
            //     Search,
            //     Download,
            //     handleSelectionChange,
            //     Refresh,
            //     ...toRefs(state),
            // };
    //     },
    // });
        };

        // 修改工作时段
        const editWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().updateWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        // 删除工作时段
        const deleteWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().deletWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        const deleteRecord = (row) => {
            state.deleteId = row.id
            state.deleteDialog = true
        }

        const conFirmDelete = () => {
            deleteWorkTimePeriod({ id: state.deleteId })
            state.deleteDialog = false
        }

        // 批量删除
        const deleteWorkTimePeriods = async () => {
            if(state.deleteArr.length>0){
                console.log(state.deleteArr)
                let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr});
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage()
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }else{
                ElMessage({
                    type: 'warning',
                    message: '请先选择要删除的记录'
                });
            }
        }

        const handleSizeChange = (val: number) => {
            state.pageSize = val
            getListByPage()
        }
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val
            getListByPage()
        }

        // 查看记录
        const viewRecord = (row) => {
            state.details = row
            state.dialogDetails = true
        }

        // 刷新
        const reLoadData = async () =>{
            getListByPage()
        }
        const editRecord = (index, row) => {
            state.dialogAddRecord = true
            state.chosenIndex = index
            state.addRecord = JSON.parse(JSON.stringify(row))
        }

        // 新增修改记录
        const confirmAddRecord = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate(async (valid, fields) => {
                if (valid) {
                    const data = {
                        name: state.addRecord.name,
                        info: state.addRecord.info,
                        startHour: Number(state.addRecord.startTime.substring(0, 2)),
                        startMin: Number(state.addRecord.startTime.substring(3)),
                        endHour: Number(state.addRecord.endTime.substring(0, 2)),
                        endMin: Number(state.addRecord.endTime.substring(3))
                    }
                    if (state.chosenIndex == null) {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData.unshift(data)
                        await addWorkTimePeriod(data)
                    } else {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData[state.chosenIndex] = state.addRecord
                        data.id = state.addRecord.id,
                        await editWorkTimePeriod(data)
                    }
                    state.dialogAddRecord = false
                } else {
                    console.log('error submit!', fields)
                }
            })

        }
        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
            await initBackEndControlRoutes();
        };
        return {
            addRef,
            addRules,
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            toggleSelection,
            handleSelectionChange,
            deleteWorkTimePeriods,
            searchRecord,
            clearSearch,
            viewRecord,
            deleteRecord,
            conFirmDelete,
            getWorkTimePeriod,
            getListByPage,
            reLoadData,
            deleteWorkTimePeriod,
            handleSizeChange,
            handleCurrentChange,
            confirmAddRecord,
            closeAdd,
            openAdd,
            indexClear,
            editRecord,
            ...toRefs(state)
        };
    }
    }
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            display: flex;
@@ -303,37 +574,6 @@
                    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;
            }
        }
    }

 src/views/basicRightsManagement/personnelShiftManagement/workingHoursSet/index.vue

对比新文件
@@ -0,0 +1,573 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <el-input v-model="searchWord" placeholder="工作时段名称"></el-input>
                    <el-button type="primary" @click="searchRecord">查询</el-button>
                    <el-button plain @click="clearSearch">重置</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 @click="deleteWorkTimePeriods">删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="100" />
                    <el-table-column property="name" label="工作时间组名称"/>
                    <el-table-column property="timeRange" label="关联工作时段"/>
                    <el-table-column property="info" 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.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageBtn">
                    <el-pagination
                            v-model:currentPage="pageIndex"
                            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>
        </div>
        </div>
        <el-dialog v-model="dialogDetails" title="工作时间组">
            <el-form :model="details" label-width="120px">
                <el-form-item label="工作时间组名称">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="关联工作时段">
                    <el-input
                            v-model="details.timeRange"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="描述信息">
                    <el-input
                            v-model="details.info"
                            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" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="工作时间组名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="关联工作时段" prop="timeRange">
                    <el-select v-model="addRecord.timeRange" multiple placeholder="请选择">
                        <el-option v-for="(item,index) in timeList" :key="index" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述信息" prop="info">
                    <el-input
                            v-model="addRecord.info"
                            type="textarea"
                    >
                    </el-input>
                </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 lang="ts">
    import { toRefs, reactive, ref, onMounted } 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 } from 'element-plus'
    import { FormInstance, FormRules, ElMessage } from 'element-plus'
    import { workingHoursApi } from '/@/api/basicDateManage/personShiftManage/workingHoursSet';



    // 定义接口来定义对象的类型
    interface stateType {
        tableData: Array<string>,
        multipleSelection: Array<any>,
        deleteArr: Array<any>,
        timeList: Array<any>,
        dialogDetails: boolean,
        dialogAddRecord: boolean,
        deleteDialog: boolean,
        pageIndex: number,
        chosenIndex: any,
        deleteId: any,
        pageSize: number,
        searchWord: string,
        totalSize: number,
        addRecord: {
            name: string,
            timeRange: Array<any>,
            info: string,
            startTime: string,
            endTime: string
        },
        details: {
            name: string,
            timeRange: Array<any>,
            info: string
        }
    }

    export default {
    name: 'workingHoursSet',
    components:{},
    setup() {
        const userInfo = useUserInfo()
        const {userInfos} = storeToRefs(userInfo);

        const state = reactive<stateType>({
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            chosenIndex: null,
            searchWord: '',
            tableData: [],
            timeList: [],
            multipleSelection: [],
            dialogDetails: false,
            dialogAddRecord: false,
            deleteDialog: false,
            addRecord: {
                name: '',
                timeRange: [],
                info: '',
                startTime: '',
                endTime: ''
            },
            details: {
                name: '',
                timeRange: [],
                info: ''
            },
            deleteId: null,
            deleteArr: []
        })
        interface User {
            name: string,
            timeRange: [],
            info: string
        }
        const multipleTableRef = ref<InstanceType<typeof ElTable>>()
        const toggleSelection = (rows?: User[]) => {
            if (rows) {
                rows.forEach((row) => {
                    // TODO: improvement typing when refactor table
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    multipleTableRef.value!.toggleRowSelection(row, undefined)
                })
            } else {
                multipleTableRef.value!.clearSelection()
            }
        }

        // 多选
        const handleSelectionChange = (val: User[]) => {
            state.multipleSelection = JSON.parse(JSON.stringify(val))
            state.deleteArr = state.multipleSelection.map((item)=>{
                item = item.id
                return item
            })
        }

        const addRef = ref<FormInstance>()
        const addRules = reactive<FormRules>({
            name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
            endTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
        })

        // 页面载入时执行方法
        onMounted(() => {
            // getWorkTimePeriod()
            getListByPage()
        })

        // 获取工作时段列表
        // const getWorkTimePeriod = async () => {
        //     let res = await workingHoursApi().getWorkTimePeriod({ name: state.searchWord });
        //     if (res.data.code === '200') {
        //         state.tableData = res.data.data.map((item)=>{
        //             item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
        //             item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
        //             item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
        //             item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
        //             item.startTime = item.startHour + ':' + item.startMin
        //             item.endTime = item.endHour + ':' + item.endMin
        //             return item
        //         })
        //     } else {
        //         ElMessage({
        //             type: 'warning',
        //             message: res.data.msg
        //         });
        //     }
        // }

        // 分页获取工作时段列表
        const getListByPage = async ()=>{
            const data = {pageSize: state.pageSize,pageIndex: state.pageIndex,searchParams:{name: state.searchWord}}
            let res = await workingHoursApi().postPeriodPage(data);
            if (res.data.code === '200') {
                state.tableData = res.data.data.map((item)=>{
                    item.startHour = item.startHour==null?'00':(item.startHour.toString()[1]?item.startHour.toString():'0'+item.startHour.toString())
                    item.startMin = item.startMin==null?'00':(item.startMin.toString()[1]?item.startMin.toString():'0'+item.startMin.toString())
                    item.endHour = item.endHour==null?'00':(item.endHour.toString()[1]?item.endHour.toString():'0'+item.endHour.toString())
                    item.endMin = item.endMin==null?'00':(item.endMin.toString()[1]?item.endMin.toString():'0'+item.endMin.toString())
                    item.startTime = item.startHour + ':' + item.startMin
                    item.endTime = item.endHour + ':' + item.endMin
                    return item
                })
                state.totalSize = res.data.total
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

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

        const clearSearch = async()=>{
            state.searchWord=''
            getListByPage()
        }

        // 添加工作时段
        const addWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().postWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 修改工作时段
        const editWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().updateWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        // 删除工作时段
        const deleteWorkTimePeriod = async (data:any) => {
            let res = await workingHoursApi().deletWorkTimePeriod(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: res.data.msg
                });
                getListByPage()
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }

        const deleteRecord = (row) => {
            state.deleteId = row.id
            state.deleteDialog = true
        }

        const conFirmDelete = () => {
            deleteWorkTimePeriod({ id: state.deleteId })
            state.deleteDialog = false
        }

        // 批量删除
        const deleteWorkTimePeriods = async () => {
            if(state.deleteArr.length>0){
                console.log(state.deleteArr)
                let res = await workingHoursApi().deleteBatchWorkTimePeriod({ids: state.deleteArr});
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg
                    });
                    getListByPage()
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }else{
                ElMessage({
                    type: 'warning',
                    message: '请先选择要删除的记录'
                });
            }
        }

        const handleSizeChange = (val: number) => {
            state.pageSize = val
            getListByPage()
        }
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val
            getListByPage()
        }

        // 查看记录
        const viewRecord = (row) => {
            state.details = row
            state.dialogDetails = true
        }

        // 刷新
        const reLoadData = async () =>{
            getListByPage()
        }
        const editRecord = (index, row) => {
            state.dialogAddRecord = true
            state.chosenIndex = index
            state.addRecord = JSON.parse(JSON.stringify(row))
        }

        // 新增修改记录
        const confirmAddRecord = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate(async (valid, fields) => {
                if (valid) {
                    const data = {
                        name: state.addRecord.name,
                        info: state.addRecord.info,
                        startHour: Number(state.addRecord.startTime.substring(0, 2)),
                        startMin: Number(state.addRecord.startTime.substring(3)),
                        endHour: Number(state.addRecord.endTime.substring(0, 2)),
                        endMin: Number(state.addRecord.endTime.substring(3))
                    }
                    if (state.chosenIndex == null) {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData.unshift(data)
                        await addWorkTimePeriod(data)
                    } else {
                        // if (state.addRecord.startTime >= state.addRecord.endTime) {
                        //     state.addRecord.endTime = '次日' + state.addRecord.endTime
                        // }
                        // state.tableData[state.chosenIndex] = state.addRecord
                        data.id = state.addRecord.id,
                        await editWorkTimePeriod(data)
                    }
                    state.dialogAddRecord = false
                } else {
                    console.log('error submit!', fields)
                }
            })

        }
        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
            await initBackEndControlRoutes();
        };
        return {
            addRef,
            addRules,
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            toggleSelection,
            handleSelectionChange,
            deleteWorkTimePeriods,
            searchRecord,
            clearSearch,
            viewRecord,
            deleteRecord,
            conFirmDelete,
            getListByPage,
            reLoadData,
            deleteWorkTimePeriod,
            handleSizeChange,
            handleCurrentChange,
            confirmAddRecord,
            closeAdd,
            openAdd,
            indexClear,
            editRecord,
            ...toRefs(state)
        };
    }
    }
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            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;
                }
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue

@@ -1,11 +1,953 @@
<template>
    <div>1235</div>
    <div class="home-container">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="12">
                <div class="grid-content topInfo">
                    <el-select v-model="searchType" @change="changeSearch" placeholder="任务名称">
                        <el-option label="巡检任务类型" value="巡检任务类型" />
                        <el-option label="创建人" value="创建人" />
                        <el-option label="巡检班组" value="巡检班组" />
                        <el-option label="检查频次" value="检查频次" />
                        <el-option label="开始时间" value="开始时间" />
                    </el-select>
                    <el-input v-model="searchContent" v-if="searchType == '任务名称'" placeholder="请输入任务名称"></el-input>
                    <el-input
                            v-else-if="searchType == '检查频次'"
                            v-model="searchContent"
                            placeholder="请输入检查频次"
                    >
                        <template #append>
                            <el-select v-model="searchUnit" placeholder="选择单位">
                                <el-option label="分钟" value="分钟" />
                                <el-option label="小时" value="小时" />
                                <el-option label="天" value="天" />
                            </el-select>
                        </template>
                    </el-input>
                    <el-select v-model="searchContent" v-else-if="searchType == '巡检任务类型'" placeholder="请选择任务类型">
                        <el-option v-for="(item,index) in typeOptions" :label="item.name" :value="item.value" :key="index"/>
                    </el-select>
                    <el-select v-model="searchContent" v-else-if="searchType == '创建人'" placeholder="请选择创建人">
                        <el-option v-for="(item,index) in createrOptions" :label="item.name" :value="item.value" :key="index"/>
                    </el-select>
                    <el-select v-model="searchContent" v-else-if="searchType == '巡检班组'" placeholder="请选择巡检班组">
                        <el-option v-for="(item,index) in inspectorOptions" :label="item.name" :value="item.value" :key="index"/>
                    </el-select>
                    <el-date-picker
                            v-model="searchContent"
                            type="date"
                            v-else
                            :placeholder="'请选择' + searchType"
                            size="large"
                            style="margin-right: 20px"
                    />
                    <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="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%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="name" label="任务名称" width="200"/>
                    <el-table-column property="type" label="任务类型"/>
                    <el-table-column property="execClassgroup" label="巡检班组"/>
                    <el-table-column property="frequency" label="检查频次"/>
                    <el-table-column property="unit" label="频次单位"/>
                    <el-table-column property="chainLength" label="巡检链长度" width="160"/>
                    <el-table-column property="startTime" label="任务开始时间" width="180"/>
<!--                    <el-table-column property="validTime" label="任务有效时间" width="180"/>-->
                    <el-table-column property="creater" label="创建人"/>
                    <el-table-column property="createTime" label="创建时间" width="180"/>
                    <el-table-column property="status" label="状态" width="60"/>
                    <el-table-column fixed="right" label="操作" align="center" width="300">
                        <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-switch
                                    v-model="scope.row.status"
                                    inline-prompt
                                    active-text="开"
                                    inactive-text="关"
                                    active-value="开启"
                                    inactive-value="关闭"
                                    style="margin: 0 10px"
                            />
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</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="100"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
        </div>

        <el-dialog v-model="dialogDetails" title="巡检任务">
            <el-form :model="details" label-width="120px">
                <el-row>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务名称">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务类型">
                    <el-input
                            v-model="details.type"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                    <el-form-item label="巡检部门">
                        <el-input
                                v-model="details.execDepId"
                                readonly
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                    <el-form-item label="巡检班组">
                        <el-input
                                v-model="details.execClassgroup"
                                readonly
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="检查频次" prop="frequency">
                    <el-input
                            v-model="details.frequency"
                            readonly
                    >
                        <template #append>
                            <el-input
                                    v-model="details.unit"
                                    readonly
                            />
                        </template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                    <el-form-item label="提前通知时间">
                        <el-input
                                v-model="details.noticeTime"
                                readonly
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                    <el-form-item label="任务开始时间">
                        <el-input
                                v-model="details.startTime"
                                readonly
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="周期有效时间">
                    <el-input
                            v-model="details.validTime"
                            readonly
                    />
                </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-bottom: 20px">
                <el-form-item label="巡检链">
                    <div style="width: 100%;margin-left: -30px">
                        <div v-for="(item,index) in details.shiftSteps" class="stepItem">
                            <div class="stepNum">{{index+1}}</div>
                            <div class="stepCard">
                                <el-card class="box-card">
                                    <template #header>
                                        <div class="card-header">
                                            <div>{{item.pointId}}</div>
                                        </div>
                                    </template>
                                    <div class="text item">所属设备区域：<span>{{item.regionUuid}}</span></div>
                                    <div class="text item">关联RFID：<span>{{item.rfidId}}</span></div>
                                    <div class="text item">巡检指标：<span>{{item.quotaId}}</span></div>
                                    <div class="text item">数据填报类型：<span>{{item.dataReportType}}</span></div>
                                    <div class="text item">数据参考值：<span>{{item.firstReferenceValue?item.firstReferenceValue:(item.secondReferenceValue?item.secondReferenceValue:item.thirdReferenceValue)}}</span></div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                </el-col>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
                </el-row>
            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogAddRecord" title="巡检任务编辑" @close="closeAdd" @open="openAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-row>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务类型" prop="type">
                    <el-select v-model="addRecord.type">
                        <el-option label="日常检查" value="日常检查" />
                        <el-option label="周期检查" value="周期检查" />
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                    <el-form-item label="巡检部门" prop="validTime">
                        <el-select v-model="addRecord.execDepId" placeholder="请选择">
                            <el-option label="部门一" value="部门一" />
                            <el-option label="部门二" value="部门二" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                    <el-form-item label="巡检班组" prop="execClassgroupId">
                        <el-select v-model="addRecord.execClassgroup" placeholder="请选择">
                            <el-option label="班组1" value="班组1" />
                            <el-option label="班组2" value="班组2" />
                            <el-option label="班组3" value="班组3" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="检查频次" prop="frequency">
                <el-input
                    v-model="addRecord.frequency"
                    placeholder="请输入检查频次"
                >
                    <template #append>
                        <el-select v-model="addRecord.unit" placeholder="选择单位">
                            <el-option label="分钟" value="分钟" />
                            <el-option label="小时" value="小时" />
                            <el-option label="天" value="天" />
                        </el-select>
                    </template>
                </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                    <el-form-item label="提前通知时间" prop="noticeTime">
                        <el-select v-model="addRecord.noticeTime" placeholder="选择时间">
                            <el-option label="15分钟" value="15分钟" />
                            <el-option label="30分钟" value="30分钟" />
                            <el-option label="45分钟" value="45分钟" />
                            <el-option label="60分钟" value="60分钟" />
                            <el-option label="75分钟" value="75分钟" />
                            <el-option label="90分钟" value="90分钟" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="周期开始时间" prop="startTime">
                    <el-date-picker
                            v-model="addRecord.startTime"
                            type="datetime"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                </el-col>
                <el-col :span="12" style="margin-bottom: 20px">
                <el-form-item label="任务有效时间" prop="validTime">
                    <el-select v-model="addRecord.validTime" placeholder="选择时间">
                        <el-option label="15分钟" value="15分钟" />
                        <el-option label="30分钟" value="30分钟" />
                        <el-option label="45分钟" value="45分钟" />
                        <el-option label="60分钟" value="60分钟" />
                        <el-option label="75分钟" value="75分钟" />
                        <el-option label="90分钟" value="90分钟" />
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="24">
                <el-form-item label="创建巡检链">
                    <div style="width: 100%;margin-bottom: 20px">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddShift = true">新增巡检点</el-button>
                    </div>
                    <div style="width: 100%;margin-left: -30px">
                        <div v-for="(item,index) in addRecord.shiftSteps" class="stepItem">
                            <div class="stepNum">{{index+1}}</div>
                            <div class="stepCard">
                                <el-card class="box-card">
                                    <template #header>
                                        <div class="card-header">
                                            <div>{{item.pointId}}</div>
                                        </div>
                                    </template>
                                    <div class="text item">所属设备区域：<span>{{item.regionUuid}}</span></div>
                                    <div class="text item">关联RFID：<span>{{item.rfidId}}</span></div>
                                    <div class="text item">巡检指标：<span>{{item.quotaId}}</span></div>
                                    <div class="text item">数据填报类型：<span>{{item.dataReportType}}</span></div>
                                    <div class="text item">数据参考值：<span>{{item.firstReferenceValue?item.firstReferenceValue:(item.secondReferenceValue?item.secondReferenceValue:item.thirdReferenceValue)}}</span></div>
                                </el-card>
                            </div>
                            <div>
<!--                                <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button>-->
                                <el-button type="primary" size="default" @click="editFlow(index)">修改</el-button>
                                <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                </el-col>
                </el-row>
                <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>
        <el-dialog v-model="deleteShiftDialog" title="提示" width="30%" center @close="indexShiftClear">
            <span>您确定要删除该巡检点吗？</span>
            <template #footer>
              <span class="dialog-footer">
                  <el-button @click="deleteShiftDialog = false" size="default">取消</el-button>
                <el-button type="primary" @click="conFirmShiftDelete" size="default">确认</el-button>
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogAddShift" title="新增巡检点" @close="closeAddShift">
            <el-form :model="addShift" label-width="120px" ref="addShiftRef" :rules="addShiftRules">
                <el-form-item label="选择巡检点" prop="pointId">
                    <el-select v-model="addShift.pointId">
                        <el-option label="73011" value="73011" />
                        <el-option label="73012" value="73012" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属设备区域">
                    <el-input
                            v-model="addShift.regionId"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="关联RFID">
                    <el-input
                            v-model="addShift.rfidId"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="选择巡检指标" prop="quotaId">
                    <el-input v-model="addShift.quotaId" placeholder="Please input">
                        <template #append>{{addShift.quotaUnit}}</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="数据填报类型" prop="dataReportType">
                    <el-select v-model="addShift.dataReportType">
                        <el-option label="选择" value="选择" />
                        <el-option label="填空" value="填空" />
                        <el-option label="选择并填空" value="选择并填空" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="addShift.dataReportType == '选择' || addShift.dataReportType == '选择并填空'" label="数据参考值" prop="firstReferenceValue">
                    <el-select v-model="addShift.firstReferenceValue">
                        <el-option label="正常" value="正常" />
                        <el-option label="异常" value="异常" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label="数据参考值">
                    <el-input
                            v-model="addShift.secondReferenceValue"
                            type="number"
                            placeholder="请根据需求选择前方符号后再填写参考值，非必填"
                    >
                        <template #prepend>
                            <el-select v-model="addShift.secondReferenceSign" placeholder="Select" style="width: 115px">
                                <el-option label=">" value=">" />
                                <el-option label=">=" value=">=" />
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label="">
                    <el-input
                            v-model="addShift.thirdReferenceValue"
                            type="number"
                            placeholder="请根据需求选择前方符号后再填写参考值，非必填"
                    >
                        <template #prepend>
                            <el-select v-model="addShift.thirdReferenceSign" placeholder="Select" style="width: 115px">
                                <el-option label="<" value="<"/>
                                <el-option label="<=" value="<="/>
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddShift = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddShift(addShiftRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'index'
};
<script lang="ts">
    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, ElMessage } from 'element-plus'
    import { 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 {
        name: 'workingHoursSet',
        components: {},
        setup() {
            const userInfo = useUserInfo()
            const {userInfos} = storeToRefs(userInfo);

            const state = reactive({
                searchType: '任务名称',
                typeOptions: [
                    {
                        name: '日常检查',
                        value: '日常检查'
                    },
                    {
                        name: '周期检查',
                        value: '周期检查'
                    }
                ],
                createrOptions: [
                    {
                        name: '张三',
                        value: '张三'
                    },
                    {
                        name: '李四',
                        value: '李四'
                    }
                ],
                inspectorOptions: [
                    {
                        name: '李四',
                        value: '李四'
                    },
                    {
                        name: '张三',
                        value: '张三'
                    }
                ],
                searchUnit: '小时',
                searchContent: '',
                currentPage: 1,
                pageSize: 10,
                chosenIndex: null,
                chosenShiftIndex: null,
                chosenInspectionIndex: null,
                dialogDetails: false,
                dialogAddRecord: false,
                deleteDialog: false,
                deleteShiftDialog: false,
                deleteInspectionDialog: false,
                dialogAddShift: false,
                tableData: [
                    {
                        name: '甲醛装置（）列现场岗位巡检',
                        type: '周期检查',
                        creater: '管理员A',
                        execClassgroup: '张三',
                        frequency: 2,
                        unit: '小时',
                        noticeTime: '2022-07-02 13:01:37',
                        startTime: '2022-07-02 13:01:37',
                        validTime: '30分钟',
                        createTime: '2022-07-02 12:03:47',
                        chainLength: 20,
                        status: '开启',
                        shiftSteps: [
                            {
                                pointId: 73011,
                                regionUuid: '风机系统',
                                rfidId: 21054,
                                quotaId: '压力',
                                dataReportType: '选择'
                            },
                            {
                                name: 'A场所',
                                inspectorData: [
                                    {
                                        sort: 1,
                                        name: '73021',
                                        section: '风机系统',
                                        rfid: '风机系统1标签',
                                        norm: '风机声音',
                                        reference: '10<正常<50'
                                    },
                                    {
                                        sort: 2,
                                        name: '73022',
                                        section: '风机系统',
                                        rfid: '风机系统2标签',
                                        norm: '设备温度',
                                        reference: '20<正常<50'
                                    },
                                    {
                                        sort: 3,
                                        name: '73023',
                                        section: '风机系统',
                                        rfid: '风机系统3标签',
                                        norm: '风机震动',
                                        reference: '30<正常<50'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: 'A车间日常巡检',
                        type: '日常检查',
                        creater: '管理员B',
                        execClassgroup: '李四',
                        frequency: 4,
                        unit: '小时',
                        noticeTime: '2022-07-02 13:01:37',
                        startTime: '2022-07-02 12:45:37',
                        validTime: '30分钟',
                        createTime: '2022-07-02 08:15:41',
                        chainLength: 15,
                        status: '开启'
                    }
                ],
                addRecord: {
                    name: '',
                    type: '',
                    creater: '',
                    inspector: '',
                    frequency: 1,
                    unit: '小时',
                    startTime: '',
                    validTime: '',
                    createTime: '',
                    chainLength: 0,
                    status: '开启',
                    shiftSteps: []
                },
                addShift: {
                    secondReferenceSign: '>',
                    thirdReferenceSign: '<'
                },
                details: {}
            })

            // 顶部筛选搜索
            const changeSearch = () => {
                state.searchContent = ''
            }

            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }

            // 时间格式化
            const timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const handleChange = (value) => {
                state.addRecord.content = []
                console.log(JSON.parse(JSON.stringify(value)))
            }
            const addRef = ref<FormInstance>()
            const addShiftRef = ref<FormInstance>()
            const addInspectionRef = ref<FormInstance>()

            // 表单校验
            const addRules = reactive<FormRules>({
                name: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                type: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                execClassgroupId: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                noticeTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })
            const addShiftRules = reactive<FormRules>({
                pointId: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                quotaId: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                dataReportType: [{required: true, message: '该内容不能为空', trigger: 'blur'}],
                firstReferenceValue: [{required: true, message: '该内容不能为空', trigger: 'blur'}]
            })

            // 查看记录
            const viewRecord = (row) => {
                state.details = JSON.parse(JSON.stringify(row))
                state.dialogDetails = true
            }

            // 删除记录
            const deleteRecord = (index) => {
                state.chosenIndex = index
                state.deleteDialog = true
            }
            const conFirmDelete = () => {
                state.tableData.splice(state.chosenIndex, 1)
                state.deleteDialog = false
            }

            // 修改添加记录
            const editRecord = (index, row) => {
                state.chosenIndex = index
                state.dialogAddRecord = true
                state.addRecord = JSON.parse(JSON.stringify(row))
            }
            const confirmAddRecord = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if (state.chosenIndex == null) {
                            if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) {
                                ElMessage({
                                    message: '请先设置巡检链后再提交',
                                    type: 'warning',
                                })
                                return
                            } else {
                                state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-')
                                state.addRecord.chainLength = state.addRecord.shiftSteps.length
                                state.addRecord.status = '开启'
                                state.tableData.unshift(state.addRecord)
                            }
                        } else {
                            if (state.addRecord.shiftSteps.length == 0) {
                                ElMessage({
                                    message: '请先设置巡检链后再提交',
                                    type: 'warning',
                                })
                                return
                            } else {
                                state.tableData[state.chosenIndex] = state.addRecord
                            }
                        }
                        state.dialogAddRecord = false
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }

            // 添加弹窗打开前预操作
            const openAdd = () => {
                state.addRecord.unit = '小时'
            }

            // 弹窗关闭后判断数据初始化
            const closeAdd = () => {
                state.addRecord = {}
                state.chosenIndex = null
                state.addShift = {}
                state.chosenShiftIndex = null
            }
            const indexClear = () => {
                state.chosenIndex = null
            }
            const indexShiftClear = () => {
                state.chosenShiftIndex = null
            }

            // 排序
            // function compare(key) {
            //     return function (value1, value2) {
            //         var val1 = value1[key];
            //         var val2 = value2[key];
            //         return val1 - val2;
            //     }
            // }

            // 添加删除巡检设施区域
            // const addFlow = (index) => {
            //     state.dialogAddShift = true
            //     state.chosenShiftIndex = index
            // }

            // 编辑巡检点
            const editFlow = (index) =>{
                state.chosenShiftIndex = index
                state.addShift = JSON.parse(JSON.stringify(state.addRecord.shiftSteps[index]))
                state.dialogAddShift = true
            }

            // 删除巡检点
            const deleteFlow = (index) => {
                state.deleteShiftDialog = true
                state.chosenShiftIndex = index
            }
            const conFirmShiftDelete = () => {
                state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1)
                state.deleteShiftDialog = false
            }
            // 增加修改巡检点
            const confirmAddShift = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(state.chosenShiftIndex == null){
                            if(!state.addRecord.shiftSteps){state.addRecord.shiftSteps = []}
                            state.addRecord.shiftSteps.push(state.addShift)
                        }else{
                            state.addRecord.shiftSteps[state.chosenShiftIndex] = state.addShift
                        }
                        state.dialogAddShift = false
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }

            const closeAddShift = () => {
                state.addShift = {}
                state.chosenShiftIndex = null
            }

            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId', value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };

            return {
                addRef,
                addShiftRef,
                addInspectionRef,
                addRules,
                addShiftRules,
                View,
                Edit,
                Delete,
                Refresh,
                Plus,
                changeSearch,
                handleSizeChange,
                handleCurrentChange,
                handleChange,
                viewRecord,
                deleteRecord,
                conFirmDelete,
                openAdd,
                editRecord,
                confirmAddRecord,
                closeAdd,
                conFirmShiftDelete,
                confirmAddShift,
                closeAddShift,
                editFlow,
                deleteFlow,
                indexClear,
                indexShiftClear,
                renderMenu,
                ...toRefs(state)
            }
        }
    }
</script>

<style scoped></style>
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        .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{
            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;
                }
            }
        }
    }
    .stepItem{
        width: 100%;
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
        margin-left: 30px;
        padding-bottom: 30px;
        border-left: 2px solid #ccc;
        &:first-of-type{
            margin-top: 30px;
        }
        &:last-of-type{
            margin-bottom: 0;
            border-left: none;
        }
        .stepNum {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            box-sizing: border-box;
            color: #333;
            border: 1px solid #999;
            line-height: 28px;
            text-align: center;
            margin-right: 10px;
            margin-left: -16px;
            margin-top: -30px;
        }
        .stepCard {
            width: 100%;
            margin-top: -30px;

            .box-card {
                width: 100%;
                &:deep(.el-card__header){
                    padding: 10px 15px
                }
                .card-header {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &>div:first-of-type{
                        margin-right: 80px;
                        font-size: 18px;
                        font-weight: bold;
                    }
                }
            }
        }
        &:hover .card-header{
            color: #0098F5;
        }
        &:hover .stepNum{
            border: 2px solid #0098F5;
            color: #0098F5;
        }
    }
    .el-input{
        width: 100% !important;
    }
    :deep(.el-date-editor){
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/riskWarningSys/accidentLevel/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
@@ -15,6 +15,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -36,22 +37,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
@@ -264,7 +265,7 @@
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        month:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        death:[{required: true, message: '该内容不能为空',trigger:'blur'}],
@@ -330,14 +331,48 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;

        .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: 100%;
            }

        }
        .el-row{
            display: flex;
@@ -361,37 +396,6 @@
                    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;
            }
        }
    }

 src/views/riskWarningSys/educationAndTraining/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
@@ -15,6 +15,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -33,22 +34,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
@@ -203,7 +204,7 @@
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        month:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        eduTime:[{required: true, message: '该内容不能为空',trigger:'blur'}]
@@ -266,14 +267,48 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;

        .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: 100%;
            }

        }
        .el-row{
            display: flex;
@@ -297,37 +332,6 @@
                    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;
            }
        }
    }

 src/views/riskWarningSys/emergencyDrills/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
@@ -15,6 +15,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -33,22 +34,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
@@ -202,7 +203,7 @@
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        month:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        aftTime:[{required: true, message: '该内容不能为空',trigger:'blur'}]
@@ -265,14 +266,48 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;

        .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: 100%;
            }

        }
        .el-row{
            display: flex;
@@ -296,37 +331,6 @@
                    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;
            }
        }
    }

 src/views/riskWarningSys/riskLevel/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
@@ -15,6 +15,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -32,7 +33,6 @@
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
@@ -46,8 +46,9 @@
                        @current-change="handleCurrentChange"
                />
            </div>
            </div>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
@@ -178,12 +179,30 @@
                level: '高风险',
                amount: 2,
                updateTime: '2022-07-26 15:55:00'
            },
            {
                month: '2022-07',
                level: '低风险',
                amount: 1,
                updateTime: '2022-07-26 15:55:00'
            },
            {
                month: '2022-06',
                level: '高风险',
                amount: 2,
                updateTime: '2022-07-26 15:55:00'
            },
            {
                month: '2022-07',
                level: '低风险',
                amount: 1,
                updateTime: '2022-07-26 15:55:00'
            }
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        month:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{required: true, message: '该内容不能为空',trigger:'blur'}]
    })
@@ -245,14 +264,48 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;

        .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: 100%;
            }

        }
        .el-row{
            display: flex;
@@ -276,37 +329,6 @@
                    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;
            }
        }
    }

 src/views/specialWorkSystem/afterWorkManagement/workTicketCheck/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -25,6 +25,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -43,22 +44,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="作业票抽检">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业证编号">
@@ -293,14 +294,45 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .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{
            display: flex;
@@ -324,37 +356,6 @@
                    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;
            }
        }
    }

 src/views/specialWorkSystem/afterWorkManagement/workTicketRecord/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="12">
                <div class="grid-content topInfo">
@@ -28,6 +28,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -44,22 +45,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="作业票查看">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业证编号">
@@ -241,14 +242,45 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .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{
            display: flex;
@@ -272,37 +304,6 @@
                    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;
            }
        }
    }

 src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveLinkSetting/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
@@ -14,6 +14,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -33,22 +34,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="审批环节">
            <el-form :model="details" label-width="120px">
                <el-form-item label="环节名称">
@@ -264,14 +265,48 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;

        .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: 100%;
            }

        }
        .el-row{
            display: flex;
@@ -297,40 +332,6 @@
                }
            }
        }
        .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%;

 src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/approveTypeSetting/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -24,6 +24,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -42,22 +43,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="审批类型">
            <el-form :model="details" label-width="120px">
                <el-form-item label="审批类型名称">
@@ -258,14 +259,45 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .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{
            display: flex;
@@ -289,37 +321,6 @@
                    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;
            }
        }
    }

 src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/reportTypeSetting/index.vue

@@ -1,26 +1,47 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <div class="homeCard">
        <el-row>
            <el-button type="primary" size="large" @click="addReport">新建上报类型</el-button>
        </el-row>
        <el-row>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="标识" width="100"/>
                <el-table-column prop="type" label="上报数据类型名称" width="180" />
                <el-table-column prop="founder" label="创建人"/>
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column prop="editor" label="最新编辑人" width="180" />
                <el-table-column prop="editeTime" label="最新编辑时间" />
                <el-table-column fixed="right" label="操作" align="center" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" :icon="Edit" @click="editeRow(scope.$index,scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteRow(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" size="default" @click="addReport">新建上报类型</el-button>
                    </el-col>
                </el-row>
                <el-table ref="multipleTableRef"
                          :data="tableData"
                          style="width: 100%"
                          height="calc(100% - 100px)"
                          :header-cell-style="{background: '#fafafa'}"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="index" label="标识" width="100"/>
                    <el-table-column prop="type" label="上报数据类型名称" width="180" />
                    <el-table-column prop="founder" label="创建人"/>
                    <el-table-column prop="createTime" label="创建时间" width="180" />
                    <el-table-column prop="editor" label="最新编辑人" width="180" />
                    <el-table-column prop="editeTime" label="最新编辑时间" />
                    <el-table-column fixed="right" label="操作" align="center" width="180">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="Edit" @click="editeRow(scope.$index,scope.row)">编辑</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRow(scope.$index)">删除</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="100"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>
        </div>
        <el-dialog v-model="dialogAddForm" title="新建上报类型" @close="dialogColse">
            <el-form :model="reportForm" label-width="120px" ref="ruleFormRef" :rules="addRules">
@@ -46,7 +67,6 @@
                </el-form-item>
            </el-form>
        </el-dialog>
        </el-scrollbar>
    </div>
</template>

@@ -212,20 +232,72 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;

        .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: 100%;
            }

        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
            &: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;
                }
            }
        }
    }
</style>

 src/views/specialWorkSystem/approveProcessManagement/approveProcessList/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -16,7 +16,7 @@
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true" v-throttle>新建</el-button>
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                        <el-button type="success" size="default">设置分类</el-button>
                        <el-button type="success" size="default" plain>设置分类</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
@@ -24,6 +24,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -50,22 +51,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogAddRecord" title="审批流程编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="流程名称" prop="name">
@@ -331,14 +332,45 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .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{
            display: flex;
@@ -362,37 +394,6 @@
                    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;
            }
        }
    }

 src/views/specialWorkSystem/workApplyManagement/myApply/index.vue

@@ -2,7 +2,7 @@
    <div class="home-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="申请中" name="Applying">
                <el-scrollbar height="100%">
                <div style="height: 100%">
                    <el-row class="homeCard">
                            <el-col :span="8">
                                <div class="grid-content topInfo">
@@ -26,11 +26,12 @@
                                    ref="multipleTableRef"
                                    :data="applyData"
                                    style="width: 100%"
                                    height="calc(100% - 100px)"
                                    :header-cell-style="{background: '#fafafa'}"
                                    @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" width="55" />
                                <el-table-column property="num" label="作业证编号" width="200"/>
                                <el-table-column type="index" label="作业证编号" width="200"/>
                                <el-table-column property="level" label="作业证等级" width="180" sortable />
                                <el-table-column property="applyDate" label="申请日期" sortable />
                                <el-table-column property="name" label="申请人" width="180"/>
@@ -47,107 +48,100 @@
                                    </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 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>
                    </div>
                    <el-dialog v-model="dialogDetails" title="作业票查看">
                        <el-form :model="details" label-width="120px">
                            <el-form-item label="作业证编号">
                                <el-input
                                        v-model="details.num"
                                        readonly
                                />
                            </el-form-item>
                            <el-form-item label="作业证等级">
                                <el-input
                                        v-model="details.level"
                                        readonly
                                />
                            </el-form-item>
                            <el-form-item label="申请日期">
                                <el-input
                                        v-model="details.applyDate"
                                        readonly
                                />
                            </el-form-item>
                            <el-form-item label="申请人">
                                <el-input
                                        v-model="details.name"
                                        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.status"
                                        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="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" v-throttle>确认</el-button>
          </span>
                        </template>
                    </el-dialog>
                </el-scrollbar>
                </div>
                <el-dialog v-model="dialogDetails" title="作业票查看">
                    <el-form :model="details" label-width="120px">
                        <el-form-item label="作业证等级">
                            <el-input
                                    v-model="details.level"
                                    readonly
                            />
                        </el-form-item>
                        <el-form-item label="申请日期">
                            <el-input
                                    v-model="details.applyDate"
                                    readonly
                            />
                        </el-form-item>
                        <el-form-item label="申请人">
                            <el-input
                                    v-model="details.name"
                                    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.status"
                                    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="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" v-throttle>确认</el-button>
                          </span>
                    </template>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="已通过" name="passed">
                <el-scrollbar height="100%">
                    <el-row>
                        <div class="homeCard">
                            <el-col :span="8">
                                <div class="grid-content topInfo">
                                    <el-input v-model="searchWord" placeholder="作业证名称"></el-input>
                                    <el-button type="primary">查询</el-button>
                                    <el-button plain>重置</el-button>
                                </div>
                            </el-col>
                        </div>
                <div style="height: 100%">
                    <el-row class="homeCard">
                        <el-col :span="8">
                            <div class="grid-content topInfo">
                                <el-input v-model="searchWord" placeholder="作业证名称"></el-input>
                                <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">申请</el-button>-->
                                    <!--<el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
                                    <!--<el-button type="success" size="default">设置分类</el-button>-->
<!--                                    <el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
<!--                                    <el-button type="success" size="default">设置分类</el-button>-->
<!--                                </el-col>-->
<!--                                <el-button type="primary" :icon="Refresh" />-->
<!--                                <el-button type="primary" size="default" :icon="Refresh" />-->
<!--                            </el-row>-->
                            <el-table
                                    ref="multipleTableRef"
                                    :data="passedData"
                                    style="width: 100%"
                                    height="calc(100% - 48px)"
                                    :header-cell-style="{background: '#fafafa'}"
                                    @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" width="55" />
                                <el-table-column property="num" label="作业证编号" width="200"/>
                                <el-table-column type="index" label="编号" width="200"/>
                                <el-table-column property="level" label="作业证等级" width="180" sortable />
                                <el-table-column property="applyDate" label="申请日期" sortable />
                                <el-table-column property="name" label="申请人" width="180"/>
@@ -158,28 +152,28 @@
                                    </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 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>
                    </div>
                </el-scrollbar>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
<script lang="ts" setup>
    import { toRefs, reactive, defineComponent, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
@@ -209,99 +203,136 @@
        department: string
        status: string
    }
    export default defineComponent({
        name: 'myApply',
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const activeName = ref('Applying')
            const handleClick = (tab: TabsPaneContext, event: Event) => {
                console.log(tab, event)
            }
            const multipleTableRef = ref<InstanceType<typeof ElTable>>()
            const multipleSelection = ref<User[]>([])
            const handleSelectionChange = (val: User[]) => {
                multipleSelection.value = val
            }
            const currentPage = ref(1)
            const pageSize = ref(10)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const applyData = reactive([
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);
    const activeName = ref('Applying')
    const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event)
    }
    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    const multipleSelection = ref<User[]>([])
    const handleSelectionChange = (val: User[]) => {
        multipleSelection.value = val
    }
    const currentPage = ref(1)
    const pageSize = ref(10)
    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
    }
    const applyData = reactive([
        {
            level: '等级一',
            applyDate: '2022-07-27 14:19:33',
            name: '张三',
            department: '部门一',
            status: '审核中'

            ])
            const chosenIndex = ref(-1)
            const passedData: User[] = []
            const dialogDetails = ref(false)
            const details = ref({})
            const deleteDialog = ref(false)

            // 查看记录
            const viewRecord = (row) =>{
                details.value = JSON.parse(JSON.stringify(row))
                dialogDetails.value = true
            }

            // 删除记录
            const applyRecord = (index) =>{
                chosenIndex.value = index
                deleteDialog.value = true
            }

            // 弹窗确认删除记录
            const conFirmDelete = ()=> {
                applyData.splice(chosenIndex.value,1)
                deleteDialog.value = false
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                multipleTableRef,
                applyData,
                passedData,
                currentPage,
                pageSize,
                activeName,
                handleClick,
                handleSizeChange,
                handleCurrentChange,
                Plus,
                Delete,
                handleSelectionChange,
                Refresh,
                ...toRefs(state),
            };
        },
    });
        {
            level: '等级一',
            applyDate: '2022-07-27 14:19:33',
            name: '张三',
            department: '部门一',
            status: '审核中'

        },
        {
            level: '等级一',
            applyDate: '2022-07-27 14:19:33',
            name: '张三',
            department: '部门一',
            status: '审核中'

        }
    ])
    const chosenIndex = ref(-1)
    const passedData: User[] = []
    const dialogDetails = ref(false)
    const details = ref({})
    const deleteDialog = ref(false)

    // 查看记录
    const viewRecord = (row) =>{
        details.value = JSON.parse(JSON.stringify(row))
        dialogDetails.value = true
    }

    // 删除记录
    const deleteRecord = (index) =>{
        chosenIndex.value = index
        deleteDialog.value = true
    }

    // 弹窗确认删除记录
    const conFirmDelete = ()=> {
        applyData.splice(chosenIndex.value,1)
        deleteDialog.value = false
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .demo-tabs > .el-tabs__content {
            padding: 32px;
            color: #6b778c;
            font-size: 32px;
            font-weight: 600;
        .demo-tabs{
            width: 100%;
            height: 100%;

            &::v-deep(.el-tabs__content){
                height: calc(100% - 60px);
            }

            .el-tab-pane{
                height: 100%;
            }
        }
        .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{
            display: flex;
@@ -325,37 +356,6 @@
                    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;
            }
        }
    }

 src/views/specialWorkSystem/workBasicManagementSetting/certificateFilterSetting/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -27,6 +27,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -41,22 +42,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="证书过滤">
            <el-form :model="details" label-width="120px">
                <el-form-item label="证书名称">
@@ -134,136 +135,139 @@
    interface type {

    }
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const currentPage = ref(1)
            const pageSize = ref(10)
            const searchType=ref('')
            const chosenIndex = ref(-1)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);
    const state  = reactive<stateType>({});
    const currentPage = ref(1)
    const pageSize = ref(10)
    const searchType=ref('')
    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(
            [
            {
                certificate: '登高作业证',
                jobType: '高处作业'
            },
            {
                certificate: '焊接与热切割作业',
                jobType: '动火作业'
            },
            {
                certificate: '低压电工证',
                jobType: '临时用电'
            },
            {
                certificate: '化工自动化控制仪表作业',
                jobType: '设备检修'
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        certificate:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        jobType:[{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 tableData = reactive(
                    [
                    {
                        certificate: '登高作业证',
                        jobType: '高处作业'
                    },
                    {
                        certificate: '焊接与热切割作业',
                        jobType: '动火作业'
                    },
                    {
                        certificate: '低压电工证',
                        jobType: '临时用电'
                    },
                    {
                        certificate: '化工自动化控制仪表作业',
                        jobType: '设备检修'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                certificate:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                jobType:[{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();
            };
            // return {
            //     renderMenu,
            //     multipleTableRef,
            //     tableData,
            //     currentPage,
            //     pageSize,
            //     dialogDetails,
            //     details,
            //     deleteDialog,
            //     dialogAddRecord,
            //     viewRecord,
            //     deleteRecord,
            //     handleSizeChange,
            //     handleCurrentChange,
            //     Plus,
            //     Edit,
            //     Delete,
            //     Search,
            //     Download,
            //     handleSelectionChange,
            //     Refresh,
            //     ...toRefs(state),
            // };
    //     },
    // });
    }
    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 lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .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{
            display: flex;
@@ -287,37 +291,6 @@
                    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;
            }
        }
    }

 src/views/specialWorkSystem/workBasicManagementSetting/personalProtectDevices/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div style="height: 100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
@@ -24,6 +24,7 @@
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        height="calc(100% - 100px)"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
@@ -37,22 +38,22 @@
                        </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 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>
        </div>
        </el-scrollbar>
        </div>
        <el-dialog v-model="dialogDetails" title="防护用品">
            <el-form :model="details" label-width="120px">
                <el-form-item label="防护用品名称">
@@ -208,14 +209,45 @@
<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        height: calc(100vh - 114px);
        box-sizing: border-box;
        overflow: hidden;
        padding: 20px;
        .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{
            display: flex;
@@ -239,37 +271,6 @@
                    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;
            }
        }
    }