更新

Your Name

2022-07-27 1c141330187ca025f6861f1d931fa235992cf852

更新

 src/main.ts

@@ -12,7 +12,7 @@
import '/@/theme/index.scss';
import mitt from 'mitt';
import VueGridLayout from 'vue-grid-layout';
import locale from 'element-plus/lib/locale/lang/zh-cn';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -21,6 +21,6 @@
directive(app);
other.elSvg(app);

app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale }).use(i18n).use(VueGridLayout).mount('#app');
app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale: zhCn}).use(i18n).use(VueGridLayout).mount('#app');

app.config.globalProperties.mittBus = mitt();

 src/router/backEnd.ts

@@ -75,7 +75,7 @@
/**
 * 重新请求后端路由菜单接口
 * @description 用于菜单管理界面刷新菜单（未进行测试）
 * @description 路径：/src/views/system/menu/component/menuDialog.vue
 * @description 路径：/src/views/system/homeMenu/component/menuDialog.vue
 */
export function setBackEndControlRefreshRoutes() {
    getBackEndControlRoutes(Session.get('projectId'));

 src/theme/dark.scss

@@ -104,7 +104,7 @@
        background-color: var(--next-color-disabled) !important;
    }

    // menu
    // homeMenu
    .layout-aside {
        border-right: 1px solid var(--next-border-color-light) !important;
    }

 src/theme/element.scss

@@ -9,7 +9,7 @@
.el-button--default i.iconfont,
.el-button--default i.fa {
    font-size: 14px !important;
    margin-right: 5px;
    //margin-right: 5px;
}
.el-button--small i.iconfont,
.el-button--small i.fa {
@@ -100,7 +100,7 @@
    background-color: unset !important;
}
// 子级菜单背景颜色
// .el-menu--inline {
// .el-homeMenu--inline {
//     background: var(--next-bg-menuBar-light-1);
// }
// 水平菜单、横向菜单折叠 a 标签

 src/views/IntelligentXjSys/basicDataManagement/facilityArea/index.vue

对比新文件
@@ -0,0 +1,375 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="12">
                <div class="grid-content topInfo">
                    <el-input v-model="searchName" placeholder="设施区域名称"></el-input>
                    <el-select v-model="searchPlace" placeholder="设施区域类型">
                        <el-option label="设备" value="设备" />
                        <el-option label="区域" value="区域" />
                    </el-select>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" width="80" label="序号"/>
                    <el-table-column property="name" label="设施区域名称"/>
                    <el-table-column property="type" label="设施区域类型"/>
                    <el-table-column property="rfid" label="关联RFID"/>
                    <el-table-column property="creater" label="创建人"/>
                    <el-table-column property="createTime" label="创建时间" sortable/>
                    <el-table-column property="updater" label="更新人"/>
                    <el-table-column property="updateTime" label="更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="设施区域">
            <el-form :model="details" label-width="120px">
                <el-form-item label="设施区域名称">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="设施区域类型">
                    <el-input v-model="details.type" readonly/>
                </el-form-item>
                <el-form-item label="关联RFID">
                    <el-input v-model="details.rfid" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="details.creater" readonly/>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="details.createTime" readonly/>
                </el-form-item>
                <el-form-item label="更新人">
                    <el-input v-model="details.updater" readonly/>
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default" v-throttle>确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="设施区域编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="设施区域名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <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-form-item label="关联RFID" prop="rfid">
                    <el-select v-model="addRecord.rfid" multiple>
                        <el-option label="风机系统1标签" value="风机系统1标签" />
                        <el-option label="风机系统2标签" value="风机系统2标签"/>
                        <el-option label="风机系统3标签" value="风机系统3标签"/>
                        <el-option label="A场所1标签" value="A场所1标签"/>
                    </el-select>
                </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" v-throttle>确认</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>
    </div>
</template>

<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const searchName = ref('')
            const searchPlace = ref('')
            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 timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const tableData = reactive(
                    [
                    {
                        name: '风机系统',
                        type: '设备',
                        rfid: ['风机系统1标签','风机系统2标签'],
                        creater: '张三',
                        createTime: '2022-07-14 12:23:03',
                        updater: '李四',
                        updateTime: '2022-07-16 14:23:03'
                    },
                    {
                        name: 'A场所',
                        type: '区域',
                        rfid: ['A场所1标签'],
                        creater: '李四',
                        createTime: '2022-07-16 12:23:03',
                        updater: '张三',
                        updateTime: '2022-07-18 14:23:03'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                rfid:[{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.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData.unshift(addRecord.value)
                        }else{
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/IntelligentXjSys/basicDataManagement/indicator/index.vue

对比新文件
@@ -0,0 +1,382 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <el-input v-model="searchName" 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" width="80" label="序号"/>
                    <el-table-column property="name" label="指标名称"/>
                    <el-table-column property="type" label="指标类型"/>
                    <el-table-column property="unit" label="指标单位"/>
                    <el-table-column property="creater" label="创建人"/>
                    <el-table-column property="createTime" label="创建时间" sortable/>
                    <el-table-column property="updater" label="更新人"/>
                    <el-table-column property="updateTime" label="更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="巡检指标">
            <el-form :model="details" label-width="120px">
                <el-form-item label="指标名称">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="指标类型">
                    <el-input v-model="details.type" readonly/>
                </el-form-item>
                <el-form-item label="指标单位">
                    <el-input v-model="details.unit" readonly/>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="details.creater" readonly/>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="details.createTime" readonly/>
                </el-form-item>
                <el-form-item label="更新人">
                    <el-input v-model="details.updater" readonly/>
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="巡检指标编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="指标名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="指标类型" prop="type">
                    <el-select v-model="addRecord.type">
                        <el-option label="温度" value="温度" />
                        <el-option label="压力" value="压力" />
                        <el-option label="震动" value="震动" />
                        <el-option label="声音" value="声音" />
                    </el-select>
                </el-form-item>
                <el-form-item label="指标单位" prop="unit">
                    <el-select v-model="addRecord.unit">
                        <el-option label="℃" value="℃" />
                        <el-option label="Pa" value="Pa"/>
                        <el-option label="mms" value="mms"/>
                        <el-option label="dB" value="dB"/>
                    </el-select>
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const searchName = ref('')
            const searchPlace = ref('')
            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 timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const tableData = reactive(
                    [
                    {
                        name: '设备温度',
                        type: '温度',
                        unit: '℃',
                        creater: '张三',
                        createTime: '2022-07-14 12:23:03',
                        updater: '李四',
                        updateTime: '2022-07-16 14:23:03'
                    },
                    {
                        name: '车间温度',
                        type: '温度',
                        unit: '℃',
                        creater: '李四',
                        createTime: '2022-07-16 12:23:03',
                        updater: '张三',
                        updateTime: '2022-07-18 14:23:03'
                    },
                    {
                        name: '车间压力',
                        type: '压力',
                        unit: 'Pa',
                        creater: '李四',
                        createTime: '2022-07-16 12:23:03',
                        updater: '张三',
                        updateTime: '2022-07-18 14:23:03'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                unit:[{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.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData.unshift(addRecord.value)
                        }else{
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/IntelligentXjSys/basicDataManagement/inspection/index.vue

对比新文件
@@ -0,0 +1,375 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="12">
                <div class="grid-content topInfo">
                    <el-input v-model="searchName" placeholder="巡检点名称"></el-input>
                    <el-select v-model="searchPlace" placeholder="所属区域设施">
                        <el-option label="风机系统" value="风机系统" />
                        <el-option label="A车间" value="A车间" />
                        <el-option label="B车间" value="B车间" />
                        <el-option label="C车间" value="C车间" />
                    </el-select>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" width="80" label="序号"/>
                    <el-table-column property="name" label="巡检点名称"/>
                    <el-table-column property="area" label="所属设备区域"/>
                    <el-table-column property="rfid" label="关联RFID"/>
                    <el-table-column property="creater" label="创建人"/>
                    <el-table-column property="createTime" label="创建时间" sortable/>
                    <el-table-column property="updater" label="更新人"/>
                    <el-table-column property="updateTime" label="更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="巡检点信息">
            <el-form :model="details" label-width="120px">
                <el-form-item label="巡检点名称">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="所属设备区域">
                    <el-input v-model="details.area" readonly/>
                </el-form-item>
                <el-form-item label="RFID">
                    <el-input v-model="details.rfid" readonly/>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="details.creater" readonly/>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="details.createTime" readonly/>
                </el-form-item>
                <el-form-item label="更新人">
                    <el-input v-model="details.updater" readonly/>
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="巡检点编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="巡检点名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="所属设施区域" prop="area">
                    <el-select v-model="addRecord.area">
                        <el-option label="风机系统" value="风机系统" />
                        <el-option label="A车间" value="A车间" />
                    </el-select>
                </el-form-item>
                <el-form-item label="关联RFID" prop="rfid">
                    <el-select v-model="addRecord.rfid">
                        <el-option label="风机系统A标签" value="风机系统A标签" />
                        <el-option label="A车间A标签" value="A车间A标签" />
                    </el-select>
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const searchName = ref('')
            const searchPlace = ref('')
            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 timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const tableData = reactive(
                    [
                    {
                        name: '73011',
                        area: '风机系统',
                        rfid: '风机系统A标签',
                        creater: '张三',
                        createTime: '2022-07-14 12:23:03',
                        updater: '李四',
                        updateTime: '2022-07-16 14:23:03'
                    },
                    {
                        name: '73012',
                        area: 'A车间',
                        rfid: 'A车间A标签',
                        creater: '李四',
                        createTime: '2022-07-16 12:23:03',
                        updater: '张三',
                        updateTime: '2022-07-18 14:23:03'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                area:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                rfid:[{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.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData.unshift(addRecord.value)
                        }else{
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/IntelligentXjSys/basicDataManagement/rfId/index.vue

对比新文件
@@ -0,0 +1,367 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="12">
                <div class="grid-content topInfo">
                    <el-input v-model="searchName" placeholder="RFID名称"></el-input>
                    <el-input v-model="searchPlace" placeholder="RFID编码"></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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" width="80" label="序号"/>
                    <el-table-column property="name" label="RFID名称"/>
                    <el-table-column property="rfid" label="RFID编码" sortable/>
                    <el-table-column property="creater" label="创建人"/>
                    <el-table-column property="createTime" label="创建时间" sortable/>
                    <el-table-column property="updater" label="更新人"/>
                    <el-table-column property="updateTime" label="更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="RFID">
            <el-form :model="details" label-width="120px">
                <el-form-item label="RFID名称">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="RFID">
                    <el-input v-model="details.rfid" readonly/>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="details.creater" readonly/>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="details.createTime" readonly/>
                </el-form-item>
                <el-form-item label="更新人">
                    <el-input v-model="details.updater" readonly/>
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-input v-model="details.updateTime" 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="RFID编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="RFID名称" prop="name">
                    <el-input v-model="addRecord.name"></el-input>
                </el-form-item>
                <el-form-item label="RFID编码" prop="rfid">
                    <el-input v-model="addRecord.rfid"></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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const searchName = ref('')
            const searchPlace = ref('')
            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 timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const tableData = reactive(
                    [
                    {
                        name: '风机系统1标签',
                        rfid: '123456789ABC01',
                        creater: '张三',
                        createTime: '2022-07-14 12:23:03',
                        updater: '李四',
                        updateTime: '2022-07-16 14:23:03'
                    },
                    {
                        name: '风机系统2标签',
                        rfid: '123456789ABC02',
                        creater: '张三',
                        createTime: '2022-07-14 12:23:03',
                        updater: '李四',
                        updateTime: '2022-07-16 14:23:03'
                    },
                    {
                        name: '风机系统3标签',
                        rfid: '123456789ABC03',
                        creater: '张三',
                        createTime: '2022-07-14 12:23:03',
                        updater: '李四',
                        updateTime: '2022-07-16 14:23:03'
                    },
                    {
                        name: 'A车间1标签',
                        rfid: '123456789ABC04',
                        creater: '李四',
                        createTime: '2022-07-16 12:23:03',
                        updater: '张三',
                        updateTime: '2022-07-18 14:23:03'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                rfid:[{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.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData.push(addRecord.value)
                        }else{
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/IntelligentXjSys/inspectionRecordManagement/index.vue

对比新文件
@@ -0,0 +1,514 @@
<template>
    <div class="home-container">
        <el-scrollbar 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%"
                        :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>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="巡检任务">
            <el-form :model="details" label-width="120px">
                <el-form-item label="任务名称">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="任务类型">
                    <el-input
                            v-model="details.type"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="执行巡检人员">
                    <el-input
                            v-model="details.inspector"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="检查频次">
                    <el-input
                            v-model="details.inspector"
                            readonly
                    />
                </el-form-item>
                <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-form-item label="周期开始时间">
                    <el-input
                            v-model="details.startTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="周期有效时间">
                    <el-input
                            v-model="details.validTime"
                            readonly
                    />
                </el-form-item>
                <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" shadow="hover">
                                    <template #header>
                                        <div class="card-header">
                                            <div>{{item.name}}</div>
                                        </div>
                                    </template>
                                    <div>
                                        <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" sortable 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-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable, 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 {

    }
            const userInfo = useUserInfo()
            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(
                    [
                    {
                        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: '开启'
                    }
                ]
            )

            const dialogDetails = ref(false)

            const details = ref({})
            const viewRecord = (row) =>{
                details.value = JSON.parse(JSON.stringify(row))
                dialogDetails.value = true
            }

            // 折线图
            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%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .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/IntelligentXjSys/inspectionTaskManagement/index.vue

对比新文件
@@ -0,0 +1,966 @@
<template>
    <div class="home-container">
        <el-scrollbar 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%"
                        :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>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="巡检任务">
            <el-form :model="details" label-width="120px">
                <el-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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable, 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 {

    }
            const userInfo = useUserInfo()
            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(
                    [
                    {
                        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: '开启'
                    }
                ]
            )
            const handleChange = (value) => {
                addRecord.value.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 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 deleteRecord = (index) =>{
                chosenIndex.value = index
                deleteDialog.value = true
            }
            const conFirmDelete = ()=> {
                tableData.splice(chosenIndex.value,1)
                deleteDialog.value = false
            }

            // 修改添加记录
            const editRecord =(index, row)=>{
                chosenIndex.value = index
                dialogAddRecord.value = true
                addRecord.value = JSON.parse(JSON.stringify(row))
            }
            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){
                                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){
                                        ElMessage({
                                            message: '请为'+ addRecord.value.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{
                            if(addRecord.value.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){
                                        ElMessage({
                                            message: '请为'+ addRecord.value.shiftSteps[i].name +'设置巡检点',
                                            type: 'warning',
                                        })
                                    }
                                }
                                return
                            }else{
                                tableData[chosenIndex.value] = addRecord.value
                            }
                        }
                        dialogAddRecord.value =false
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }

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

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

            // 排序
            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
            }

            // 删除巡检区域
            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 addSysInspection =(index)=>{
                dialogAddInspection.value = true
                chosenShiftIndex.value = 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'))
                            }
                        }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'))
                        }
                        dialogAddInspection.value = false
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }
            const deleteInspection = (i,index) =>{
                chosenShiftIndex.value = i
                chosenInspectionIndex.value = index
                deleteInspectionDialog.value = true
            }
            const editInspection =(i,index, row)=>{
                chosenShiftIndex.value = i
                chosenInspectionIndex.value = index
                dialogAddInspection.value = true
                addInspection.value = JSON.parse(JSON.stringify(row))
            }
            const conFirmInspectionDelete=()=>{
                addRecord.value.shiftSteps[chosenShiftIndex.value].inspectorData.splice( chosenInspectionIndex.value,1)
                deleteInspectionDialog.value = false
            }

            const closeAddShift =()=>{
                addShift.value={}
                chosenShiftIndex.value = -1
            }
            const closeAddInspection =()=>{
                addInspection.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%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .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/basicRightsManagement/personnelShiftManagement/holidayManagement/index.vue

对比新文件
@@ -0,0 +1,379 @@
<template>
    <div class="home-container">
        <el-scrollbar 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="name" label="休息日名称"/>
                    <el-table-column property="type" label="休息类型"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="休息日详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="名称">
                    <el-input
                            v-model="details.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>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="休息日编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="名称" prop="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>
                    <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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 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 casProps = {
                expandTrigger: 'hover',
            }
            const tableData = reactive(
                    [
                    {
                        name: '周末休息',
                        type: '每周公休假日',
                        content: ''
                    },
                    {
                        name: '节假日休息',
                        type: '每年法定节假日',
                        content: ''
                    },
                    {
                        name: '每周一、周四休息',
                        type: '自定义休息日,每周',
                        content: ['周一','周四']
                    },
                    {
                        name: '每月休息日休息',
                        type: '自定义休息日,每月',
                        content: ['5','15','25']
                    }
                ]
            )
            const holidayList =reactive([
                {
                    value: '每周公休假日',
                    label: '每周公休假日'
                },
                {
                    value: '每年法定节假日',
                    label: '每年法定节假日'
                },
                {
                    value: '自定义休息日',
                    label: '自定义休息日',
                    children: [
                        {
                            value: '每周',
                            label: '每周',
                        },
                        {
                            value: '每月',
                            label: '每月',
                        }
                    ]
                }
            ])
            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 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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

对比新文件
@@ -0,0 +1,375 @@
<template>
    <div class="home-container">
        <el-scrollbar 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="schedName" label="排班名称"/>
                    <el-table-column property="schedPlan" label="排班方案"/>
                    <el-table-column property="restType" label="休息类型"/>
                    <el-table-column property="team" label="班组"/>
                    <el-table-column property="startTime" label="排班开始时间"/>
                    <el-table-column property="endTime" label="排班结束时间"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="人员排班">
            <el-form :model="details" label-width="120px">
                <el-form-item label="排班名称">
                    <el-input
                            v-model="details.schedName"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="排班方案">
                    <el-input v-model="details.schedPlan" readonly/>
                </el-form-item>
                <el-form-item label="休息类型">
                    <el-input v-model="details.restType" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="班组选择">
                    <el-input v-model="details.team" readonly/>
                </el-form-item>
                <el-form-item label="排班开始时间">
                    <el-input 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>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="人员排班编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="排班名称" prop="schedName">
                    <el-input
                            v-model="addRecord.schedName"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="排班方案" prop="schedPlan">
                    <el-select v-model="addRecord.schedPlan">
                        <el-option label="三班三倒" value="三班三倒" />
                        <el-option label="常白班" value="常白班" />
                    </el-select>
                </el-form-item>
                <el-form-item label="休息类型" prop="restType">
                    <el-select v-model="addRecord.restType" multiple>
                        <el-option label="每周公休假日" value="每周公休假日" />
                        <el-option label="自定义/每月" value="自定义/每月" />
                    </el-select>
                </el-form-item>
                <el-form-item label="班组选择" prop="team">
                    <el-select v-model="addRecord.team">
                        <el-option label="A车间班组" value="A车间班组" />
                        <el-option label="B车间班组" value="B车间班组" />
                    </el-select>
                </el-form-item>
                <el-form-item label="排班时间段" prop="timeRange">
                    <el-date-picker
                        v-model="addRecord.timeRange"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        size="large"
                    />
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 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 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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

对比新文件
@@ -0,0 +1,576 @@
<template>
    <div class="home-container">
        <el-scrollbar 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="name" label="排班方案名称"/>
                    <el-table-column property="type" label="排班类型"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="排班方案">
            <el-form :model="details" label-width="120px">
                <el-form-item label="名称">
                    <el-input
                            v-model="details.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="JSON.parse(JSON.stringify(details.type)) == '循环班'">
                    <div>
                        <div v-for="(item,index) in details.shiftSteps" class="stepItem">
                            <div class="stepNum">{{index+1}}</div>
                            <div class="stepCard">
                                <el-card class="box-card" shadow="hover">
                                    <template #header>
                                        <div class="card-header">
                                            <div>第<span>{{index+1}}</span>班</div>
                                        </div>
                                    </template>
                                    <div class="text item">排班名称：<span>{{item.name}}</span></div>
                                    <div class="text item">工作天数：<span>{{item.days}}</span></div>
                                    <div class="text item">休息天数：<span>{{item.rest}}</span></div>
                                    <div class="text item">工作时段：<span>{{item.timeRange}}</span></div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="工作时段" prop="timeRange" v-if="JSON.parse(JSON.stringify(details.type)) == '固定班'">
                    <el-input
                            v-model="details.timeRange"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default" v-throttle>确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="排班方案编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="排班方案名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <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-form-item label="自定义循环班" v-if="addRecord.type && JSON.parse(JSON.stringify(addRecord.type)) == '循环班'">
                    <div style="width: 100%;margin-bottom: 20px">
                        <el-button type="primary" size="default" :icon="Plus" @click="dialogAddShift = true">新增排班</el-button>
                    </div>
                    <div>
                        <div v-for="(item,index) in addRecord.shiftSteps" class="stepItem">
                            <div class="stepNum">{{index+1}}</div>
                            <div class="stepCard">
                                <el-card class="box-card" shadow="hover">
                                    <template #header>
                                        <div class="card-header">
                                            <div>第<span>{{index+1}}</span>班</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="text item">排班名称：<span>{{item.name}}</span></div>
                                    <div class="text item">工作天数：<span>{{item.days}}</span></div>
                                    <div class="text item">休息天数：<span>{{item.rest}}</span></div>
                                    <div class="text item">工作时段：<span>{{item.timeRange}}</span></div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="工作时段" prop="timeRange" v-if="addRecord.type && JSON.parse(JSON.stringify(addRecord.type)) == '固定班'">
                    <el-select v-model="addRecord.timeRange">
                        <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="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default" v-throttle>确认</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="name">
                    <el-input
                            v-model="addShift.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="工作天数" prop="days">
                    <el-input
                            v-model="addShift.days"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="休息天数" prop="rest">
                    <el-input
                            v-model="addShift.rest"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="工作时段" prop="timeRange">
                    <el-select v-model="addShift.timeRange">
                        <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="dialogAddShift = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddShift(addShiftRef)" size="default" v-throttle>确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable, 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 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(
                    [
                    {
                        name: '三班三倒',
                        type: '循环班',
                        shiftSteps:[
                            {
                                name: '第一班',
                                days: '5',
                                rest: '1',
                                timeRange: '三班三倒早班'
                            },
                            {
                                name: '第二班',
                                days: '5',
                                rest: '2',
                                timeRange: '三班三倒中班'
                            },
                            {
                                name: '第三班',
                                days: '5',
                                rest: '3',
                                timeRange: '三班三倒夜班'
                            }
                        ]
                    },
                    {
                        name: '常白班',
                        type: '固定班'
                    }
                ]
            )
            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)
                            }
                        }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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .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: 20px;
            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;
                    }
                    span{
                        font-weight: bold;
                        margin: 0 10px;
                    }
                }
            }
        }
        &: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/basicRightsManagement/personnelShiftManagement/teamManagement/index.vue

对比新文件
@@ -0,0 +1,384 @@
<template>
    <div class="home-container">
        <el-scrollbar 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="teamName" label="班组名称"/>
                    <el-table-column property="teamMember" label="班组人员"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="班组信息">
            <el-form :model="details" label-width="120px">
                <el-form-item label="班组名称">
                    <el-input
                            v-model="details.teamName"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="班组人员">
                    <el-input v-model="details.teamMember" 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">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="班组名称" prop="teamName">
                    <el-input
                            v-model="addRecord.teamName"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="班组人员" prop="teamMember">
                    <el-cascader
                            v-model="addRecord.teamMember"
                            :options="workerList"
                            :props="casProps"
                            :show-all-levels="false"
                            @change="handleChange"
                    />
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 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([
                {
                    value: 'A部门车间',
                    label: 'A部门车间',
                    children: [
                        {
                            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: '马超',
                        }
                    ]
                }
            ])
            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 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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

对比新文件
@@ -0,0 +1,349 @@
<template>
    <div class="home-container">
        <el-scrollbar 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="100" />
                    <el-table-column property="name" label="工作时段名称"/>
                    <el-table-column property="range" label="排班时段"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="工作时段">
            <el-form :model="details" label-width="120px">
                <el-form-item label="工作时段名称">
                    <el-input
                            v-model="details.name"
                            class="input-with-select"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="排班时段">
                    <el-input
                            v-model="details.range"
                            class="input-with-select"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="工作时段编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="工作时段名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="上班开始时间" prop="startTime">
                    <el-time-select
                            v-model="addRecord.startTime"
                            start="00:00"
                            step="00:15"
                            end="24:00"
                            placeholder="Select time"
                    />
                </el-form-item>
                <el-form-item label="上班结束时间" prop="endTime">
                    <el-time-select
                            v-model="addRecord.endTime"
                            start="00:00"
                            step="00:15"
                            end="24:00"
                            placeholder="Select time"
                    />
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 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)
                    }
                })

            }
            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.startTime = addRecord.value.range.substring(0,5)
                addRecord.value.endTime = addRecord.value.range.substring(8)
            }
            // 折线图
            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/generalShiftManagement/index.vue

对比新文件
@@ -0,0 +1,395 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建排班方案</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" width="80" />
                    <el-table-column property="name" label="名称" width="200" sortable/>
                    <el-table-column property="shiftType" label="排班类型" width="200" sortable/>
                    <el-table-column property="createTime" label="创建时间" width="180" />
<!--                    <el-table-column property="checkType" label="检查类型"/>-->
<!--                    <el-table-column property="checkContent" label="检查内容" sortable/>-->
<!--                    <el-table-column property="judgement" label="参考判断"/>-->
<!--                    <el-table-column property="sort" label="排序" sortable/>-->
<!--                    <el-table-column property="remark" label="备注"/>-->
<!--                    <el-table-column property="updater" label="更新人"/>-->
                    <el-table-column property="updateTime" label="更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="排班方案">
            <el-form :model="details" label-width="120px">
                <el-form-item label="方案名称">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="双休节假日">
                    <el-input
                            v-model="details.holiday"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="排班类型">
                    <el-input
                            v-model="details.shiftType"
                            readonly
                    />
                </el-form-item>
                <el-form-item v-for="(item,index) in details.timeList" :key="index" :label="index == 0?'上班时间段':item.day + '天后倒'">
                    <el-input
                        v-model="item.timeRange"
                        readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="排班方案编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="方案名称" prop="name">
                    <el-input
                            v-model="addRecord.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="双休节假日" prop="holiday">
                    <el-select v-model="addRecord.holiday">
                        <el-option label="休假" value="休假" />
                        <el-option label="不休假" value="不休假" />
                    </el-select>
                </el-form-item>
                <el-form-item label="排班类型" prop="checkType">
                    <el-select v-model="addRecord.shiftType">
                        <el-option label="循环班" value="循环班" />
                        <el-option label="常白班" value="常白班" />
                    </el-select>
                </el-form-item>
                <el-form-item label="检查内容" prop="checkContent">
                    <el-input
                            v-model="addRecord.checkContent"
                            type="textarea"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="参考判断" prop="judgement">
                    <el-radio-group v-model="addRecord.judgement">
                        <el-radio label="Y" size="large">Y</el-radio>
                        <el-radio label="N" size="large">N</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序值" prop="sort">
                    <el-input-number v-model="addRecord.sort" :min="1" :max="100" @change="handleChange" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addRecord.remark" type="textarea"/>
                </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" v-throttle>确认</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>
    </div>
</template>

<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Upload } 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],
    };

    interface stateType {
        homeOne: Array <type>
    }
    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: '三班两倒',
                        holiday: '不休假',
                        shiftType: '循环班',
                        timeList:[
                            {
                                timeRange: '15:20 - 18:00'
                            },
                            {
                                day: 1,
                                timeRange: '15:20 - 18:00'
                            },
                            {
                                day: 1,
                                timeRange: '20:20 - 06:00'
                            }
                        ]
                    },
                    {
                        name: '四班三倒',
                        holiday: '不休假',
                        shiftType: '循环班',
                        timeList:[
                            {
                                timeRange: '15:20 - 18:00'
                            },
                            {
                                day: 2,
                                timeRange: '15:20 - 18:00'
                            },
                            {
                                day: 1,
                                timeRange: '20:20 - 06:00'
                            },
                            {
                                day: 1,
                                timeRange: '08:30 - 18:00'
                            }
                        ]
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const addRules = reactive<FormRules>({
                jobType:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                checkType:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                checkContent:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                judgement:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                sort:[{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.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData.push(addRecord.value)
                        }else{
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/riskWarningSys/accidentLevel/index.vue

对比新文件
@@ -0,0 +1,407 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="编号" width="80"/>
                    <el-table-column property="month" label="所属月份"/>
                    <el-table-column property="level" label="事故类型"/>
                    <el-table-column property="amount" label="事故起数(起)"/>
                    <el-table-column property="death" label="死亡人数(人)"/>
                    <el-table-column property="injury" label="重伤人数(人)"/>
                    <el-table-column property="wound" label="轻伤人数(人)"/>
                    <el-table-column property="cost" label="直接经济损失(万)"/>
                    <el-table-column property="updateTime" label="提交时间"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
                    <el-input
                            v-model="details.month"
                            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.amount"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="死亡人数(人)">
                    <el-input
                            v-model="details.death"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="重伤人数(人)">
                    <el-input
                            v-model="details.injury"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="轻伤人数(人)">
                    <el-input
                            v-model="details.wound"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="直接经济损失(万)">
                    <el-input
                            v-model="details.cost"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="提交时间">
                    <el-input
                            v-model="details.updateTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="事故等级编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="所属时间" prop="month">
                    <el-date-picker
                            v-model="addRecord.month"
                            type="month"
                            placeholder="请选择日期"
                            format="YYYY-MM" value-format="YYYY-MM"
                    />
                </el-form-item>
                <el-form-item label="事故类型" prop="level">
                    <el-select v-model="addRecord.level" placeholder="请选择">
                        <el-option label="特别重大事故" value="特别重大事故" />
                        <el-option label="重大事故" value="重大事故" />
                        <el-option label="较大事故" value="较大事故" />
                        <el-option label="一般事故" value="一般事故" />
                        <el-option label="未遂事故" value="未遂事故" />
                    </el-select>
                </el-form-item>
                <el-form-item label="事故起数" prop="amount">
                    <el-input
                            v-model="addRecord.amount"
                            placeholder="请填写事故次数"
                            type="number"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="死亡人数" prop="death">
                    <el-input
                            v-model="addRecord.death"
                            placeholder="请填写死亡人数"
                            type="number"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="重伤人数" prop="injury">
                    <el-input
                            v-model="addRecord.injury"
                            placeholder="请填写重伤人数"
                            type="number"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="轻伤人数" prop="wound">
                    <el-input
                            v-model="addRecord.wound"
                            placeholder="请填写轻伤人数"
                            type="number"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="直接经济损失" prop="cost">
                    <el-input
                            v-model="addRecord.cost"
                            placeholder="请填写直接经济损失"
                            type="number"
                    >
                    </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 {

    }
    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 timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
    const tableData = reactive(
            [
            {
                month: '2022-07',
                level: '未遂事故',
                amount: 1,
                death: 0,
                injury: 0,
                wound: 0,
                cost: 1,
                updateTime: '2022-07-26 15:55:00'
            },
            {
                month: '2022-06',
                level: '未遂事故',
                amount: 2,
                death: 0,
                injury: 0,
                wound: 0,
                cost: 15,
                updateTime: '2022-07-26 15:55:00'
            },
            {
                month: '2022-05',
                level: '一般事故',
                amount: 1,
                death: 0,
                injury: 0,
                wound: 1,
                cost: 100,
                updateTime: '2022-07-26 15:55:00'
            }
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        death:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        injury:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        wound:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        cost:[{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.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData[chosenIndex.value] = addRecord.value
                }
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
        })

    }
    const closeAdd =()=>{
        addRecord.value={}
        chosenIndex.value = -1
    }
    const indexClear = ()=>{
        chosenIndex.value = -1
    }
    const editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/riskWarningSys/educationAndTraining/index.vue

对比新文件
@@ -0,0 +1,343 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="编号" width="80"/>
                    <el-table-column property="month" label="所属月份"/>
                    <el-table-column property="level" label="级别"/>
                    <el-table-column property="amount" label="培训次数(次)"/>
                    <el-table-column property="eduTime" label="教育时间比" />
                    <el-table-column property="updateTime" label="提交时间"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
                    <el-input
                            v-model="details.month"
                            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.amount"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="教育时间比">
                    <el-input
                            v-model="details.eduTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="提交时间">
                    <el-input
                            v-model="details.updateTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="教育培训记录编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="所属时间" prop="month">
                    <el-date-picker
                            v-model="addRecord.month"
                            type="month"
                            placeholder="请选择日期"
                            format="YYYY-MM" value-format="YYYY-MM"
                    />
                </el-form-item>
                <el-form-item label="选择级别" prop="level">
                    <el-select v-model="addRecord.level" placeholder="请选择">
                        <el-option label="公司级" value="公司级" />
                        <el-option label="事业部级" value="事业部级" />
                        <el-option label="车间级" value="车间级" />
                        <el-option label="班组级" value="班组级" />
                    </el-select>
                </el-form-item>
                <el-form-item label="培训次数" prop="amount">
                    <el-input
                            v-model="addRecord.amount"
                            placeholder="请填写培训次数"
                            type="number"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="教育时间比" prop="eduTime">
                    <el-select v-model="addRecord.eduTime" placeholder="请选择">
                        <el-option label="大于或等于100%" value="大于或等于100%" />
                        <el-option label="大于或等于80%，小于100%" value="大于或等于80%，小于100%" />
                        <el-option label="大于或等于50%，小于80%" value="大于或等于50%，小于80%" />
                        <el-option label="大于或等于30%，小于50%" value="大于或等于30%，小于50%" />
                        <el-option label="小于30%" value="小于30%" />
                    </el-select>
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 {

    }
    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 timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
    const tableData = reactive(
            [
            {
                month: '2022-07',
                level: '公司级',
                amount: 10,
                eduTime: '大于或等于100%',
                updateTime: '2022-07-26 15:55:00'
            },
            {
                month: '2022-06',
                level: '班组级',
                amount: 10,
                eduTime: '大于或等于100%',
                updateTime: '2022-06-26 15:55:00'
            }
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        eduTime:[{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.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData[chosenIndex.value] = addRecord.value
                }
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
        })

    }
    const closeAdd =()=>{
        addRecord.value={}
        chosenIndex.value = -1
    }
    const indexClear = ()=>{
        chosenIndex.value = -1
    }
    const editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/riskWarningSys/emergencyDrills/index.vue

对比新文件
@@ -0,0 +1,342 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="编号" width="80"/>
                    <el-table-column property="month" label="所属月份"/>
                    <el-table-column property="level" label="级别"/>
                    <el-table-column property="amount" label="演练次数(次)"/>
                    <el-table-column property="aftTime" label="应急演练后时间" />
                    <el-table-column property="updateTime" label="提交时间"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
                    <el-input
                            v-model="details.month"
                            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.amount"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="应急演练后时间">
                    <el-input
                            v-model="details.aftTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="提交时间">
                    <el-input
                            v-model="details.updateTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="应急演练编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="所属时间" prop="month">
                    <el-date-picker
                            v-model="addRecord.month"
                            type="month"
                            placeholder="请选择日期"
                            format="YYYY-MM" value-format="YYYY-MM"
                    />
                </el-form-item>
                <el-form-item label="选择级别" prop="level">
                    <el-select v-model="addRecord.level" placeholder="请选择">
                        <el-option label="公司级" value="公司级" />
                        <el-option label="事业部级" value="事业部级" />
                        <el-option label="车间级" value="车间级" />
                        <el-option label="班组级" value="班组级" />
                    </el-select>
                </el-form-item>
                <el-form-item label="培训次数" prop="amount">
                    <el-input
                            v-model="addRecord.amount"
                            placeholder="请填写培训次数"
                            type="number"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="应急演练后时间" prop="aftTime">
                    <el-select v-model="addRecord.aftTime" placeholder="请选择">
                        <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="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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 {

    }
    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 timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
    const tableData = reactive(
            [
            {
                month: '2022-07',
                level: '公司级',
                amount: 10,
                aftTime: '小于或等于一周',
                updateTime: '2022-07-26 15:55:00'
            },
            {
                month: '2022-06',
                level: '班组级',
                amount: 10,
                aftTime: '大于一周，小于或等于二周',
                updateTime: '2022-06-26 15:55:00'
            }
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        aftTime:[{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.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData[chosenIndex.value] = addRecord.value
                }
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
        })

    }
    const closeAdd =()=>{
        addRecord.value={}
        chosenIndex.value = -1
    }
    const indexClear = ()=>{
        chosenIndex.value = -1
    }
    const editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/riskWarningSys/riskLevel/index.vue

对比新文件
@@ -0,0 +1,322 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="编号" width="80"/>
                    <el-table-column property="month" label="所属月份"/>
                    <el-table-column property="level" label="风险类型"/>
                    <el-table-column property="amount" label="风险个数(个)"/>
                    <el-table-column property="updateTime" label="提交时间"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="查看详情">
            <el-form :model="details" label-width="120px">
                <el-form-item label="所属月份">
                    <el-input
                            v-model="details.month"
                            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.amount"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="提交时间">
                    <el-input
                            v-model="details.updateTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="风险等级编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="所属时间" prop="month">
                    <el-date-picker
                            v-model="addRecord.month"
                            type="month"
                            placeholder="请选择日期"
                            format="YYYY-MM" value-format="YYYY-MM"
                    />
                </el-form-item>
                <el-form-item label="风险类型" prop="level">
                    <el-select v-model="addRecord.level" placeholder="请选择">
                        <el-option label="高风险" value="高风险" />
                        <el-option label="低风险" value="低风险" />
                    </el-select>
                </el-form-item>
                <el-form-item label="风险个数" prop="amount">
                    <el-input
                            v-model="addRecord.amount"
                            placeholder="请填写风险个数"
                            type="number"
                    >
                    </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 {

    }
    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 timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
    const tableData = reactive(
            [
            {
                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'
            }
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        month:[{required: true, message: '该内容不能为空'}],
        level:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        amount:[{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.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData[chosenIndex.value] = addRecord.value
                }
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
        })

    }
    const closeAdd =()=>{
        addRecord.value={}
        chosenIndex.value = -1
    }
    const indexClear = ()=>{
        chosenIndex.value = -1
    }
    const editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

@@ -31,14 +31,15 @@
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="id" label="作业证编号" width="200" sortable/>
                    <el-table-column property="cardName" label="作业证名称" width="180" />
                    <el-table-column property="checkinTime" label="抽检日期" sortable/>
                    <el-table-column property="name" label="抽检人"/>
                    <el-table-column property="worker" label="抽检人"/>
                    <el-table-column property="checkTime" label="抽检时间" sortable/>
                    <el-table-column property="result" label="抽检结果"/>
                    <el-table-column property="remark" label="抽检意见"/>
                    <el-table-column fixed="right" label="操作" width="180">
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="danger" size="small" @click="deleteRecord(scope.row)">删除</el-button>
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
@@ -58,7 +59,7 @@
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业票抽检" @close="dialogColse">
        <el-dialog v-model="dialogDetails" title="作业票抽检">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业证编号">
                    <el-input
@@ -69,7 +70,7 @@
                </el-form-item>
                <el-form-item label="抽检人">
                    <el-input
                            v-model="details.name"
                            v-model="details.worker"
                            class="input-with-select"
                            readonly
                    />
@@ -83,7 +84,7 @@
                </el-form-item>
                <el-form-item label="抽检时间">
                    <el-input
                            v-model="details.checkinTime"
                            v-model="details.checkTime"
                            class="input-with-select"
                            readonly
                    />
@@ -96,11 +97,11 @@
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="新建作业票抽检" @close="dialogColse">
            <el-form :model="AddRecord" label-width="120px">
                <el-form-item label="作业证编号">
        <el-dialog v-model="dialogAddRecord" title="作业票抽检编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="作业证编号" prop="id">
                    <el-input
                            v-model="AddRecord.id"
                            v-model="addRecord.id"
                            class="input-with-select"
                    >
                        <template #append>
@@ -108,9 +109,9 @@
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="作业证名称">
                <el-form-item label="作业证名称" prop="cardName">
                    <el-input
                            v-model="AddRecord.cardName"
                            v-model="addRecord.cardName"
                            class="input-with-select"
                    >
                        <template #append>
@@ -118,9 +119,9 @@
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="抽检人">
                <el-form-item label="抽检人" prop="worker">
                    <el-input
                            v-model="AddRecord.name"
                            v-model="addRecord.worker"
                            class="input-with-select"
                    >
                        <template #append>
@@ -128,34 +129,30 @@
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="抽检结果">
                    <el-select v-model="AddRecord.result">
                <el-form-item label="抽检时间" prop="checkTime">
                    <el-date-picker v-model="addRecord.checkTime" type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="Select date and time"/>
                </el-form-item>
                <el-form-item label="抽检结果" prop="result">
                    <el-select v-model="addRecord.result">
                        <el-option label="合格" value="合格" />
                        <el-option label="不合格" value="不合格" />
                    </el-select>
                </el-form-item>
                <el-form-item label="抽检时间">
                    <el-date-picker
                            v-model="AddRecord.checkinTime"
                            type="datetime"
                            placeholder="请选择"
                    />
                </el-form-item>
                <el-form-item label="抽检意见">
                    <el-input v-model="AddRecord.remark" type="textarea"/>
                    <el-input v-model="addRecord.remark" type="textarea"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogDetails = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="addRecord" size="default">确认</el-button>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default" v-throttle>确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
            <span>您确定要删除该条记录吗？</span>
            <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
            <el-button @click="deleteDialog = false" size="default">取消</el-button>
              <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>
@@ -168,8 +165,9 @@
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    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,
@@ -183,89 +181,113 @@
    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 handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);

    // 分页
    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(
            [
            {
                id: '11011',
                cardName: '动火作业证',
                checkTime: '2021-04-22 15:21:31',
                worker: '吴海涛',
                result: '合格',
                remark: '没意见'
            },
            {
                id: '11012',
                cardName: '动火作业证',
                checkTime: '2021-04-22 15:21:31',
                worker: '吴沈峰',
                result: '合格',
                remark: '有点意见'
            },
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        id:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        cardName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        worker:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        result:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        checkTime:[{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 handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const tableData = ref(
                    [
                    {
                        id: '11011',
                        cardName: '动火作业证',
                        checkinTime: '2021-04-22 15:21:31',
                        name: '吴海涛',
                        result: '合格',
                        remark: '没意见'
                    },
                    {
                        id: '11012',
                        cardName: '动火作业证',
                        checkinTime: '2021-04-22 15:21:31',
                        name: '吴沈峰',
                        result: '合格',
                        remark: '有点意见'
                    },
                ]
            )
            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 = (row) =>{
                deleteDialog.value = true
            }
            const conFirmDelete = (row)=> {
                console.log(row,'row')
                details.value = JSON.parse(JSON.stringify(row))
                console.log(details,'details')
                dialogDetails.value = true
            }
            // 折线图
            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">
@@ -336,4 +358,13 @@
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

@@ -4,22 +4,26 @@
        <el-row class="homeCard">
            <el-col :span="12">
                <div class="grid-content topInfo">
                    <el-select v-model="searchType" placeholder="请选择" style="width: 100%">
                    <el-select v-model="searchType">
                        <el-option label="动火作业" value="动火作业" />
                        <el-option label="动土作业" value="动土作业" />
                    </el-select>
                    <el-input v-model="searchWord" placeholder="作业证编号"></el-input>
                    <el-input v-model="searchWord" placeholder="申请单位"></el-input>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                    <el-button-group style="display: flex;margin-left: 12px">
                        <el-button plain :icon="Download"></el-button>
                        <el-button plain :icon="Refresh"></el-button>
                    </el-button-group>
                </div>
            </el-col>
        </el-row>
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
@@ -28,11 +32,17 @@
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="id" label="作业证编号" width="300" sortable />
                    <el-table-column property="cardName" label="作业证名称" width="300" />
                    <el-table-column property="name" label="申请人" width="300" />
                    <el-table-column property="department" label="申请部门" />
                    <el-table-column property="date" label="归档日期" sortable />
                    <el-table-column property="id" label="作业证编号" width="200" sortable/>
                    <el-table-column property="cardName" label="作业证名称" width="180" />
                    <el-table-column property="name" label="申请人"/>
                    <el-table-column property="department" label="申请部门"/>
                    <el-table-column property="date" label="归档日期" sortable/>
                    <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="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
@@ -49,51 +59,67 @@
                />
            </div>
        </div>
        <el-dialog v-model="dialogDetails" title="签到记录" @close="dialogColse">
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业票查看">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业证编号">
                    <el-input v-model="details.id" readonly/>
                </el-form-item>
                <el-form-item label="签到人">
                    <el-input
                        v-model="details.worker"
                        class="input-with-select"
                        readonly
                    >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                            v-model="details.id"
                            readonly
                    />
                </el-form-item>
<!--                <el-form-item label="签到状态">-->
<!--                    <el-select v-model="details.status" readonly>-->
<!--                        <el-option label="已签到" value="已签到" />-->
<!--                        <el-option label="未签到" value="未签到" />-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
                <el-form-item label="签到时间">
                    <el-input v-model="details.checkinTime" readonly/>
                <el-form-item label="作业证名称">
                    <el-input
                            v-model="details.cardName"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="details.remark" type="textarea" readonly/>
                <el-form-item label="申请人">
                    <el-input
                            v-model="details.name"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="申请部门">
                    <el-input
                            v-model="details.department"
                            class="input-with-select"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="归档日期">
                    <el-input
                            v-model="details.date"
                            class="input-with-select"
                            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-scrollbar>
        <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>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, defineComponent, ref } from 'vue';
<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Plus, Edit, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    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,
@@ -107,75 +133,109 @@
    interface type {

    }
    interface User {
        date: string
        name: string
        address: string
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);

    // 分页
    const currentPage = ref(1)
    const pageSize = ref(10)

    // 顶部查询
    const searchType = ref('')
    const searchWord = ref('')

    // 判断编辑和新增
    const chosenIndex = ref(-1)

    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
    }
    export default defineComponent({
        name: 'gasCheckAnalyze',
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const multipleTableRef = ref<InstanceType<typeof ElTable>>()
            const multipleSelection = ref<User[]>([])
            const handleSelectionChange = (val: User[]) => {
                multipleSelection.value = val
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
    }
    const tableData = reactive(
            [
            {
                id: '11011',
                cardName: '动火作业证',
                name: '吴海涛',
                department: '动火部门',
                date: '2021-04-22 15:21:31'
            },
            {
                id: '11011',
                cardName: '动火作业证',
                name: '吴海涛',
                department: '动火部门',
                date: '2021-04-22 15:21:31'
            }
            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 tableData: User[] = [
                {
                    id: '11011',
                    cardName: '动火作业证',
                    name: '吴沈峰',
                    department: '土木部',
                    date: '2021-04-22 15:21:31'
        ]
    )
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        id:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        cardName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        department:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        date:[{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
                }
            ]
            const dialogDetails = ref(false)
            const details = ref({})
            const viewDetails = (row)=> {
                console.log(row,'row')
                details.value = JSON.parse(JSON.stringify(row))
                console.log(details,'details')
                dialogDetails.value = true
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                multipleTableRef,
                tableData,
                currentPage,
                pageSize,
                dialogDetails,
                details,
                viewDetails,
                handleSizeChange,
                handleCurrentChange,
                Plus,
                Edit,
                Delete,
                Search,
                Download,
                handleSelectionChange,
                Refresh,
                ...toRefs(state),
            };
        },
    });
        })

    }
    // 新增弹窗关闭时的数据初始化处理
    const closeAdd =()=>{
        addRecord.value={}
        chosenIndex.value = -1
    }
    const indexClear = ()=>{
        chosenIndex.value = -1
    }

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

<style scoped lang="scss">
@@ -246,4 +306,13 @@
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

文件已删除

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

对比新文件
@@ -0,0 +1,341 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <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%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" width="80" label="序号"/>
                    <el-table-column property="processName" label="环节名称" width="200" sortable/>
                    <el-table-column property="approveType" label="审核类型" width="200" sortable/>
                    <el-table-column property="creater" label="创建人" width="180" />
                    <el-table-column property="createTime" label="创建时间" sortable/>
                    <el-table-column property="updater" label="最后更新人"/>
                    <el-table-column property="updateTime" label="最后更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="审批环节">
            <el-form :model="details" label-width="120px">
                <el-form-item label="环节名称">
                    <el-input
                            v-model="details.processName"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="审批类型">
                    <el-input
                            v-model="details.approveType"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input
                            v-model="details.creater"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input
                            v-model="details.createTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="最后更新人">
                    <el-input
                            v-model="details.updater"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="最后更新时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="审批环节编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="环节名称">
                    <el-input v-model="addRecord.processName"/>
                </el-form-item>
                <el-form-item label="审批类型" prop="approveType">
                    <el-select v-model="addRecord.approveType">
                        <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="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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 {

    }
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);

    // 分页
    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 chosenIndex = ref(-1)

    const tableData = reactive(
            [
            {
                processName: '作业负责人审批',
                approveType: '上报审批意见',
                creater: '李四',
                createTime: '2021-04-22 15:21:31',
                updater: '吴海涛',
                updateTime: '2022-04-22 15:21:31',
            },
            {
                processName: '作业负责人审批',
                approveType: '上报气体检测数据',
                creater: '李四',
                createTime: '2021-04-22 15:21:31',
                updater: '吴海涛',
                updateTime: '2022-04-22 15:21:31',
            },
        ]
    )

    // 时间格式化
    const timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }

    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        processName:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        approveType:[{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.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData[chosenIndex.value] = addRecord.value
                }
                dialogAddRecord.value =false
            } else {
                console.log('error submit!', fields)
            }
        })

    }

    // 编辑弹窗关闭时数据初始化处理
    const closeAdd =()=>{
        addRecord.value={}
        chosenIndex.value = -1
    }
    const indexClear = ()=>{
        chosenIndex.value = -1
    }

    // 修改记录
    const editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }
    // 折线图
    const renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

对比新文件
@@ -0,0 +1,335 @@
<template>
    <div class="home-container">
        <el-scrollbar 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" width="80" label="序号"/>
                    <el-table-column property="approveType" label="审批类型名称" width="200" sortable/>
                    <el-table-column property="creater" label="创建人" width="180" />
                    <el-table-column property="createTime" label="创建时间" sortable/>
                    <el-table-column property="updater" label="最后更新人"/>
                    <el-table-column property="updateTime" label="最后更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="审批类型">
            <el-form :model="details" label-width="120px">
                <el-form-item label="审批类型名称">
                    <el-input
                            v-model="details.approveType"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input
                            v-model="details.creater"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input
                            v-model="details.createTime"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="最后更新人">
                    <el-input
                            v-model="details.updater"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="最后更新时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="审批类型编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="审批类型名称" prop="approveType">
                    <el-select v-model="addRecord.approveType">
                        <el-option label="单人审批" value="单人审批" />
                        <el-option label="多人同时审批" value="多人同时审批" />
                        <el-option label="多人单个审批" value="多人单个审批" />
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="审批类型标识">-->
<!--                    <el-input v-model="addRecord.remark"/>-->
<!--                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 {

    }
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);

    // 分页
    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(
            [
            {
                approveType: '单人审批',
                creater: '李四',
                createTime: '2021-04-22 15:21:31',
                updater: '吴海涛',
                updateTime: '2022-04-22 15:21:31',
            },
            {
                approveType: '多人同时审批',
                creater: '李四',
                createTime: '2021-04-22 15:21:31',
                updater: '吴海涛',
                updateTime: '2022-04-22 15:21:31',
            },
        ]
    )

    // 时间格式化
    const timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        approveType:[{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 editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }

    // 新增修改记录确认
    const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                if(chosenIndex.value == -1){
                    addRecord.value.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    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 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%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

文件名从 src/views/specialWorkSystem/approveProcessManagement/reportTypeSetting/index.vue 修改
@@ -13,10 +13,10 @@
                <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="操作" width="180">
                <el-table-column fixed="right" label="操作" align="center" width="180">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editeRow(scope.$index,scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">删除</el-button>
                        <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>
@@ -41,7 +41,7 @@
                    <el-input v-model="reportForm.editor" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitAddForm(ruleFormRef)" size="default">确认</el-button>
                    <el-button type="primary" @click="onSubmitAddForm(ruleFormRef)" size="default" v-throttle>确认</el-button>
                    <el-button size="default" @click="dialogAddForm = false">取消</el-button>
                </el-form-item>
            </el-form>
@@ -56,6 +56,7 @@
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, Delete } from '@element-plus/icons-vue'
    import { FormInstance, FormRules } from 'element-plus'
    let global: any = {
        homeChartOne: null,
@@ -105,7 +106,10 @@
                }
            ])
            const dialogAddForm = ref(false);

            // 判断新增修改参数
            const rowIndex = ref(-1)

            const reportForm = ref({
                type: '',
                founder: '',
@@ -113,24 +117,41 @@
                editor: '',
                editeTime: ''
            })

            // 时间格式化
            const timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }

            // 新增记录
            const addReport = ()=>{
                dialogAddForm.value = true
            };

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

            // 新增修改记录确认
            const onSubmitAddForm = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(rowIndex.value == -1){
                            reportForm.value.createTime = new Date().toLocaleString()
                            reportForm.value.editeTime = new Date().toLocaleString()
                            tableData.push(reportForm.value)
                            reportForm.value.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            reportForm.value.editeTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData.unshift(reportForm.value)
                        }else{
                            reportForm.value.editeTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData[rowIndex.value] = reportForm.value
                        }
                        dialogAddForm.value = false
@@ -139,15 +160,20 @@
                    }
                })
            }

            // 修改记录
            const editeRow = (index: number, row: User) =>{
                dialogAddForm.value = true
                rowIndex.value = index
                reportForm.value = JSON.parse(JSON.stringify(row))
                reportForm.value.editeTime = new Date().toLocaleString()
            }

            // 删除记录
            const deleteRow = (index)=>{
                tableData.splice( index,1)
            }

            // 弹窗关闭数据初始化
            const dialogColse = () =>{
                reportForm.value = {
                    type: '',
@@ -171,6 +197,7 @@
                reportForm,
                ruleFormRef,
                addRules,
                timeForm,
                dialogColse,
                editeRow,
                deleteRow,

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

@@ -4,8 +4,7 @@
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <div>流程名称</div>
                    <el-input v-model="searchWord" placeholder="请输入关键词"></el-input>
                    <el-input v-model="searchWord" placeholder="流程名称"></el-input>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                </div>
@@ -15,8 +14,8 @@
            <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="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-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
@@ -43,11 +42,11 @@
                        </template>
                    </el-table-column>
                    <el-table-column property="updateTime" label="更新时间"/>
                    <el-table-column fixed="right" label="操作" width="180">
                        <template #default>
                            <el-button link type="primary" size="small">修改</el-button>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" :icon="Edit" size="small" @click="editRecord(scope.$index ,scope.row)" v-throttle>修改</el-button>
                            <el-button link type="success" size="small">发布</el-button>
                            <el-button link type="danger" size="small">删除</el-button>
                            <el-button link type="danger" :icon="Delete" size="small" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
@@ -67,17 +66,66 @@
            </div>
        </div>
        </el-scrollbar>
        <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">
                    <el-input
                            v-model="addRecord.name"
                            placeholder="流程名称"
                    />
                </el-form-item>
                <el-form-item label="流程key" prop="flowKey">
                    <el-input
                            v-model="addRecord.flowKey"
                            placeholder="流程key"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="分类" prop="sort">
                    <el-select v-model="addRecord.sort" placeholder="请选择">
                        <el-option label="临时用电" value="临时用电" />
                        <el-option label="设备检修" value="设备检修" />
                    </el-select>
                </el-form-item>
                <el-form-item label="版本" prop="version">
                    <el-input
                            v-model="addRecord.version"
                            placeholder="请选择工种"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="addRecord.status" placeholder="请选择">
                        <el-option label="已发布" value="已发布" />
                        <el-option label="未发布" value="未发布" />
                    </el-select>
                </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" v-throttle>确认</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>
    </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';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Plus, Delete, Refresh } from '@element-plus/icons-vue'
    import { ElTable } from 'element-plus'
    import { Plus, Delete, Refresh, Edit } from '@element-plus/icons-vue'
    import { ElTable, FormInstance, FormRules } from 'element-plus'
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
@@ -96,26 +144,25 @@
        name: string
        address: string
    }
    export default defineComponent({
        name: 'reportTypeSetting',
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            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 tableData: User[] = [
    const userInfo = useUserInfo()
    const { userInfos } = storeToRefs(userInfo);
    const state  = reactive<stateType>({});
    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 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: '风险点复评预警',
                    flowKey: 'process111',
@@ -197,28 +244,88 @@
                    updateTime: '2021-04-22 15:21:31'
                }
            ]
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                multipleTableRef,
                tableData,
                currentPage,
                pageSize,
                handleSizeChange,
                handleCurrentChange,
                Plus,
                Delete,
                handleSelectionChange,
                Refresh,
                ...toRefs(state),
            };
        },
    });
    )

    // 时间格式化
    const timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
    const addRef = ref<FormInstance>()
    const addRules = reactive<FormRules>({
        name:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        flowKey:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        sort:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        version:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        status:[{required: true, message: '该内容不能为空',trigger:'blur'}],
        updateTime:[{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 editRecord =(index, row)=>{
        dialogAddRecord.value = true
        chosenIndex.value = index
        addRecord.value = JSON.parse(JSON.stringify(row))
    }

    // 新增修改记录确认
    const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                if(chosenIndex.value == -1){
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    tableData.unshift(addRecord.value)
                }else{
                    addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                    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 renderMenu = async (value: string) => {
        Session.set('projectId',value)
        userInfos.value.projectId = value
        await initBackEndControlRoutes();
    };
</script>

<style scoped lang="scss">

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

@@ -62,8 +62,8 @@
            <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>
                  <el-button @click="deleteDialog = false" size="default">取消</el-button>
              </span>
            </template>
        </el-dialog>
@@ -127,6 +127,8 @@
                department: [{required:true,message: '该选项不能为空',trigger: 'blur'}],
                manager: [{required:true,message: '该选项不能为空',trigger: 'blur'}]
            })

            // 确认新增
            const confirmClick = async (formEl: FormInstance | undefined) => {
                if (!formEl) return
                await formEl.validate((valid, fields) => {
@@ -142,10 +144,14 @@
            const cancelClick=()=>{
                showAdd.value = false
            }

            // 新增
            const addFlow = (index) => {
                showAdd.value = true
                chosenIndex.value = index
            }

            // 删除记录
            const deleteFlow = (index) => {
                if(approveSteps.length>1){
                    deleteDialog.value = true

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

@@ -40,6 +40,12 @@
                                        <el-tag type="success">{{ scope.row.status }}</el-tag>
                                    </template>
                                </el-table-column>
                                <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="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="pageBtn">
@@ -56,13 +62,65 @@
                            />
                        </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>
            </el-tab-pane>
            <el-tab-pane label="已通过" name="passed">
                <el-scrollbar height="100%">
                    <el-row>
                        <div class="homeCard">
                            <el-col :span="12">
                            <el-col :span="8">
                                <div class="grid-content topInfo">
                                    <el-input v-model="searchWord" placeholder="作业证名称"></el-input>
                                    <el-button type="primary">查询</el-button>
@@ -174,8 +232,32 @@
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const applyData: User[] = []
            const applyData = reactive([

            ])
            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)

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

@@ -22,7 +22,7 @@
                        <el-table-column prop="unit" label="所属单位" width="180" />
                        <el-table-column prop="certificate" label="证书名称" width="180" />
                        <el-table-column prop="certificateId" label="证书号" />
                        <el-table-column fixed="right" label="操作">
                        <el-table-column fixed="right" label="操作" align="center" width="180">
                            <template #default="scope">
                                <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">删除</el-button>
                            </template>
@@ -522,7 +522,7 @@
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        form.workerList.push(addWorkerForm.value)
                        form.workerList.unshift(addWorkerForm.value)
                        addWorkerForm.value = {
                            worker: '',
                            role: '',

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

对比新文件
@@ -0,0 +1,333 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <el-select v-model="searchType" placeholder="请选择作业类型" style="width: 100%">
                        <el-option label="临时用电" value="临时用电" />
                        <el-option label="设备检修" value="设备检修" />
                    </el-select>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="certificate" label="证书名称" />
                    <el-table-column property="jobType" label="作业类型" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="证书过滤">
            <el-form :model="details" label-width="120px">
                <el-form-item label="证书名称">
                    <el-input
                            v-model="details.certificate"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="作业类型">
                    <el-input
                            v-model="details.jobType"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="证书过滤编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="证书名称" prop="certificate">
                    <el-input
                            v-model="addRecord.certificate"
                            placeholder="请选择工种"
                    >
                        <template #append>
                            <el-button :icon="Search"/>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="作业类型" prop="jobType">
                    <el-select v-model="addRecord.jobType" placeholder="请选择">
                        <el-option label="临时用电" value="临时用电" />
                        <el-option label="设备检修" value="设备检修" />
                    </el-select>
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 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 handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

对比新文件
@@ -0,0 +1,285 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="8">
                <div class="grid-content topInfo">
                    <el-input v-model="deviceName" 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="device" label="防护用品名称" />
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="防护用品">
            <el-form :model="details" label-width="120px">
                <el-form-item label="防护用品名称">
                    <el-input
                            v-model="details.device"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="防护用品编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="防护用品名称" prop="device">
                    <el-input
                            v-model="addRecord.device"
                            placeholder="请填写防护用品名称"
                    >
                        <template #append>
                            <el-button :icon="Search"/>
                        </template>
                    </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 {

    }
            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 deviceName = ref('')
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const tableData = reactive(
                    [
                    {
                        device: '送风式长管式呼吸器'
                    },
                    {
                        device: '防静电工作鞋'
                    },
                    {
                        device: '隔绝式呼吸器'
                    },
                    {
                        device: '防爆工具'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                device:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            })
            const dialogDetails = ref(false)
            const dialogAddRecord = ref(false)
            const deleteDialog = ref(false)
            const addRecord = ref({})
            const details = ref({})
            const viewRecord = (row) =>{
                details.value = JSON.parse(JSON.stringify(row))
                dialogDetails.value = true
            }
            const deleteRecord = (index) =>{
                chosenIndex.value = index
                deleteDialog.value = true
            }
            const conFirmDelete = ()=> {
                tableData.splice(chosenIndex.value,1)
                deleteDialog.value = false
            }
            const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(chosenIndex.value == -1){
                            tableData.unshift(addRecord.value)
                        }else{
                            tableData[chosenIndex.value] = addRecord.value
                        }
                        dialogAddRecord.value =false
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }
            const closeAdd =()=>{
                addRecord.value={}
                chosenIndex.value = -1
            }
            const indexClear = ()=>{
                chosenIndex.value = -1
            }
            const editRecord =(index, row)=>{
                dialogAddRecord.value = true
                chosenIndex.value = index
                addRecord.value = JSON.parse(JSON.stringify(row))
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

对比新文件
@@ -0,0 +1,409 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="16">
                <div class="grid-content topInfo">
                    <el-select v-model="searchType" placeholder="请选择作业类型" style="width: 100%">
                        <el-option label="临时用电" value="临时用电"/>
                        <el-option label="设备检修" value="设备检修"/>
                    </el-select>
                    <el-select v-model="checkType" placeholder="请选择检查类型" style="width: 100%">
                        <el-option label="临时用电" value="临时用电"/>
                        <el-option label="设备检修" value="设备检修"/>
                    </el-select>
                    <el-input v-model="searchWord" placeholder="输入检查内容"></el-input>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                    <el-button plain :icon="Upload"></el-button>
                </div>
            </el-col>
        </el-row>
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="jobType" label="作业类型" width="200" sortable/>
                    <el-table-column property="type" label="类型" width="180" />
                    <el-table-column property="checkType" label="检查类型"/>
                    <el-table-column property="checkContent" label="检查内容" sortable/>
                    <el-table-column property="judgement" label="参考判断"/>
                    <el-table-column property="sort" label="排序" sortable/>
                    <el-table-column property="remark" label="备注"/>
                    <el-table-column property="updater" label="更新人"/>
                    <el-table-column property="updateTime" label="更新时间" sortable/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="安全措施">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业类型">
                    <el-input
                            v-model="details.jobType"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="类型">
                    <el-input
                            v-model="details.type"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="检查类型">
                    <el-input
                            v-model="details.checkType"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="检查内容">
                    <el-input
                            v-model="details.checkContent"
                            type="textarea"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="参考判断">
                    <el-input v-model="details.judgement" readonly/>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="details.sort" readonly/>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="details.remark" type="textarea" readonly/>
                </el-form-item>
                <el-form-item label="更新人">
                    <el-input v-model="details.updater" readonly/>
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-input v-model="details.updateTime" readonly/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="安全措施编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="作业类型" prop="jobType">
                    <el-select v-model="addRecord.jobType">
                        <el-option label="动火作业" value="动火作业" />
                        <el-option label="动土作业" value="动土作业" />
                    </el-select>
                </el-form-item>
                <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-form-item label="检查类型" prop="checkType">
                    <el-select v-model="addRecord.checkType">
                        <el-option label="判断" value="判断" />
                        <el-option label="填空" value="填空" />
                    </el-select>
                </el-form-item>
                <el-form-item label="检查内容" prop="checkContent">
                    <el-input
                            v-model="addRecord.checkContent"
                            type="textarea"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="参考判断" prop="judgement">
                    <el-radio-group v-model="addRecord.judgement">
                        <el-radio label="Y" size="large">Y</el-radio>
                        <el-radio label="N" size="large">N</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序值" prop="sort">
                    <el-input-number v-model="addRecord.sort" :min="1" :max="100" @change="handleChange" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addRecord.remark" type="textarea"/>
                </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Upload } 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],
    };

    interface stateType {
        homeOne: Array <type>
    }
    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(
                    [
                    {
                        jobType: '动火作业',
                        type: '施工单位负责检查项',
                        checkType: '判断',
                        checkContent: '断开与动火设备相连接的所有管线',
                        judgement: 'Y',
                        sort: '2',
                        remark: '666',
                        updater: 'admin',
                        updateTime: '2021-04-22 15:21:31'
                    },
                    {
                        jobType: '动火作业',
                        type: '施工单位负责检查项',
                        checkType: '填空',
                        checkContent: '动火点周围易燃物已清除',
                        judgement: 'N',
                        sort: '4',
                        remark: '666',
                        updater: 'admin',
                        updateTime: '2021-04-22 15:21:31'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const timeForm = {
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            }
            const addRules = reactive<FormRules>({
                jobType:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                type:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                checkType:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                checkContent:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                judgement:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                sort:[{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.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            tableData.unshift(addRecord.value)
                        }else{
                            addRecord.value.updateTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
                            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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

对比新文件
@@ -0,0 +1,356 @@
<template>
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
            <el-col :span="16">
                <div class="grid-content topInfo">
                    <el-select v-model="searchType" placeholder="请选择作业类型" style="width: 100%">
                        <el-option label="临时用电" value="临时用电" />
                        <el-option label="设备检修" value="设备检修" />
                    </el-select>
                    <el-input v-model="workTypeId" placeholder="工种编号"></el-input>
                    <el-input v-model="workType" 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" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="jobType" label="作业类型" sortable/>
                    <el-table-column property="workId" label="工种编号" />
                    <el-table-column property="workType" label="工种"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业工种">
            <el-form :model="details" label-width="120px">
                <el-form-item label="作业类型">
                    <el-input
                            v-model="details.jobType"
                            class="input-with-select"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="工种编号">
                    <el-input
                            v-model="details.workId"
                            class="input-with-select"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="工种">
                    <el-input
                            v-model="details.workType"
                            class="input-with-select"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="作业工种编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="作业类型" prop="jobType">
                    <el-select v-model="addRecord.jobType" placeholder="请选择">
                        <el-option label="临时用电" value="临时用电" />
                        <el-option label="设备检修" value="设备检修" />
                    </el-select>
                </el-form-item>
                <el-form-item label="工种编号" prop="workId">
                    <el-input
                            v-model="addRecord.workId"
                            placeholder="请填写工种编号"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="工种" prop="workType">
                    <el-input
                            v-model="addRecord.workType"
                            placeholder="请选择工种"
                    >
                        <template #append>
                            <el-button :icon="Search"/>
                        </template>
                    </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" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } 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 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(
                    [
                    {
                        jobType: '临时用电',
                        workId: 'LD',
                        workType: '临时用电作业'
                    },
                    {
                        jobType: '设备检修',
                        workId: 'WX',
                        workType: '检维修作业'
                    },
                    {
                        jobType: '受限空间',
                        workId: 'SX',
                        workType: '受限空间作业'
                    },
                    {
                        jobType: '动火作业',
                        workId: 'DH',
                        workType: '焊接与热切割作业'
                    }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                jobType:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                workId:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                workType:[{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),
            // };
    //     },
    // });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .homeCard{
            width: 100%;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .el-row{
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .topInfo {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .mainPages{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .main-card{
            width: 100%;
            .cardTop{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn{
                    margin: 0;
                }
            }
        }
        .pageBtn{
            display: flex;
            align-items: center;
            justify-content: right;
            margin-top: 20px;

            .demo-pagination-block + .demo-pagination-block {
                margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
                margin-bottom: 16px;
            }
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

@@ -2,91 +2,105 @@
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
<!--            <div class="homeCard">-->
            <el-col :span="6">
            <el-col :span="12">
                <div class="grid-content topInfo">
                    <div>预约时间：</div>
                    <div class="block">
                        <el-date-picker
                                v-model="searchTime"
                                type="date"
                                placeholder=""
                                size="large"
                        />
                    </div>
                    <el-date-picker
                            v-model="searchTime"
                            type="datetime"
                            placeholder="预约时间"
                            size="large"
                            style="width: 100%;white-space: nowrap;margin-right: 20px"
                    />
                    <el-select v-model="typeValue" placeholder="请选择预约类型" style="width: 100%">
                        <el-option label="类型1" value="类型1"/>
                        <el-option label="类型2" value="类型2"/>
                        <el-option label="类型3" value="类型3"/>
                    </el-select>
                    <el-button type="primary">查询历史</el-button>
                    <el-button plain>重置</el-button>
                    <el-button type="primary" @click="dialogChartsVisible = true">查看统计图表</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>预约类型：</div>
                    <div>
                        <el-select v-model="typeValue" class="m-2" placeholder="Select" size="large">
                            <el-option
                                    v-for="item in reserveOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
            </el-col>
            <el-col :span="12" class="topBtns">
                <div class="grid-content topInfo">
                    <div style="margin-right: 20px"><el-button type="primary" plain>查询历史</el-button></div>
                    <div><el-button type="primary" @click="dialogChartsVisible = true">查看统计图表</el-button></div>
                </div>
            </el-col>
<!--            </div>-->
        </el-row>
        <el-row>
            <div class="homeCard">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编号" width="180" />
                <el-table-column prop="time" label="预约时间" width="180" />
                <el-table-column prop="department" label="预约部门" />
                <el-table-column prop="dirtyWork" label="动土作业" width="180" />
                <el-table-column prop="fireWork" label="动火作业" width="180" />
                <el-table-column prop="hangWork" label="吊装作业" />
                <el-table-column prop="spaceWork" label="受限空间作业" width="180" />
                <el-table-column prop="cut" label="断路" width="180" />
                <el-table-column prop="high" label="高处" />
                <el-table-column prop="block" label="盲板抽堵" width="180" />
                <el-table-column prop="tempUse" label="临时用电" width="180" />
                <el-table-column fixed="right" label="操作">
                    <template #default>
                        <el-button link type="primary" size="small">操作</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" width="120" />
                    <el-table-column prop="time" label="预约时间" width="150" />
                    <el-table-column prop="department" label="预约部门" width="180" />
                    <el-table-column prop="dirtyWork" label="动土作业" width="100" />
                    <el-table-column prop="fireWork" label="动火作业" width="100" />
                    <el-table-column prop="hangWork" label="吊装作业" width="100" />
                    <el-table-column prop="spaceWork" label="受限空间作业"/>
                    <el-table-column prop="cut" label="断路作业"/>
                    <el-table-column prop="high" label="高处作业" />
                    <el-table-column prop="block" label="盲板抽堵作业"/>
                    <el-table-column prop="tempUse" label="临时用电作业"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-row>
        <el-dialog v-model="dialogChartsVisible" title="统计图表">
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogChartsVisible" title="统计图表" @opened="openChart">
            <el-row>
                <div class="grid-content">
                    <div>日期查询：</div>
                    <div style="margin-bottom: 10px">日期查询：</div>
                    <div class="block">
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="Start date"
                            end-placeholder="End date"
                            :shortcuts="shortcuts"
                            size="large"
                                v-model="dateRange"
                                type="daterange"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="截止日期"
                                :shortcuts="shortcuts"
                                size="large"
                        />
                    </div>
                </div>
            </el-row>
            <el-row>
                <div class="grid-content">
                    <div>部门查询：</div>
                    <div style="margin-bottom: 10px">部门查询：</div>
                    <div>
                        <el-cascader
                                v-model="departmentName"
                                :options="departmentOptions"
                                :props="props"
                                :props="{expandTrigger: 'hover'}"
                                @change="handleChange"
                        />
                    </div>
@@ -94,16 +108,155 @@
            </el-row>
            <div ref="myChart" style="width: 100%;height:400px;"></div>
        </el-dialog>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业预约">
            <el-form :model="details" label-width="120px">
                <el-form-item label="预约时间">
                    <el-input
                            v-model="details.time"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="预约部门">
                    <el-input
                            v-model="details.department"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动土作业">
                    <el-input
                            v-model="details.dirtyWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="details.fireWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="details.hangWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="details.spaceWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="details.cut"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="details.high"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="details.block"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="details.tempUse"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="预约时间" prop="time">
                    <el-date-picker
                            v-model="addRecord.time"
                            type="datetime"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="预约部门" prop="department">
                    <el-select v-model="addRecord.department" placeholder="请选择">
                        <el-option label="部门一" value="部门一" />
                        <el-option label="部门二" value="部门二" />
                    </el-select>
                </el-form-item>
                <el-form-item label="动土作业">
                    <el-input
                            v-model="addRecord.dirtyWork"
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="addRecord.fireWork"
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="addRecord.hangWork"
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="addRecord.spaceWork"
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="addRecord.cut"
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="addRecord.high"
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="addRecord.block"
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="addRecord.tempUse"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
            <span>您确定要删除该条记录吗？</span>
            <template #footer>
          <span class="dialog-footer">
              <el-button @click="deleteDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
          </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, defineComponent, ref, onMounted } from 'vue';
<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable } from 'element-plus'
    import { FormInstance, FormRules } from 'element-plus'
    import * as echarts from 'echarts/core';
    import { TooltipComponent, TooltipComponentOption, GridComponent, GridComponentOption, LegendComponent, LegendComponentOption } from 'echarts/components';
    import { BarChart, BarSeriesOption } from 'echarts/charts';
@@ -126,114 +279,17 @@
        homeOne: Array <type>
    }
    interface type {
        id:number,
        name: string

    }
    export default defineComponent({
        name: 'home',
        setup() {
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const searchTime = ref('');
            const typeValue = ref('');
            const departmentName = ref('');
            const reserveOptions = [
                {
                    value: 'Option1',
                    label: 'Option1',
                },
                {
                    value: 'Option2',
                    label: 'Option2',
                },
                {
                    value: 'Option3',
                    label: 'Option3',
                },
                {
                    value: 'Option4',
                    label: 'Option4',
                },
                {
                    value: 'Option5',
                    label: 'Option5',
                },
            ];
            const tableData = [
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                }
            ];
            const typeValue = ref('')
            const dialogChartsVisible = ref(false);
            const dateRange = ref('')
            const shortcuts = [
                {
                    text: 'Last week',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    },
                },
                {
                    text: 'Last month',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                    },
                },
                {
                    text: 'Last 3 months',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        return [start, end]
                    },
                },
            ];
            const props = {
                expandTrigger: 'hover',
            };
            const departmentName = ref('')
            const departmentOptions = [
                {
                    value: 'guide',
@@ -291,16 +347,112 @@
                        },
                    ],
                },
            ];
            ]
            const handleChange = (value) => {
                console.log(value)
            };
            const state  = reactive<stateType>({
                homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
            });
            }
            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const tableData = reactive(
                    [
                        {
                            time: '2022-06-29 12:32:52',
                            department: '电工部',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        },
                        {
                            time: '2022-06-29 12:32:52',
                            department: '电工部',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        },
                        {
                            time: '2022-06-29 12:32:52',
                            department: '土木',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                time:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                department:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            })
            const dialogDetails = ref(false)
            const dialogAddRecord = ref(false)
            const deleteDialog = ref(false)
            const addRecord = ref({})
            const details = ref({})
            const viewRecord = (row) =>{
                details.value = JSON.parse(JSON.stringify(row))
                dialogDetails.value = true
            }
            const deleteRecord = (index) =>{
                chosenIndex.value = index
                deleteDialog.value = true
            }
            const conFirmDelete = ()=> {
                tableData.splice(chosenIndex.value,1)
                deleteDialog.value = false
            }
            const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(chosenIndex.value == -1){
                            tableData.unshift(addRecord.value)
                        }else{
                            tableData[chosenIndex.value] = addRecord.value
                        }
                        dialogAddRecord.value =false
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }
            const closeAdd =()=>{
                addRecord.value={}
                chosenIndex.value = -1
            }
            const indexClear = ()=>{
                chosenIndex.value = -1
            }
            const editRecord =(index, row)=>{
                dialogAddRecord.value = true
                chosenIndex.value = index
                addRecord.value = JSON.parse(JSON.stringify(row))
            }
            const myChart = ref<HTMLElement>()
            const myCharts = ref<any>()
            setTimeout(()=>{
            const openChart =()=>{
                type EChartsOption = echarts.ComposeOption<
                        | TooltipComponentOption
                        | GridComponentOption
@@ -328,11 +480,11 @@
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        data: ['部门A', '部门B', '部门C', '部门D', '部门E', '部门F', '部门G']
                    },
                    series: [
                        {
                            name: 'Direct',
                            name: '动火作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -344,7 +496,7 @@
                            data: [320, 302, 301, 334, 390, 330, 320]
                        },
                        {
                            name: 'Mail Ad',
                            name: '受限空间作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -356,7 +508,7 @@
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'Affiliate Ad',
                            name: '吊装作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -368,7 +520,7 @@
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: 'Video Ad',
                            name: '动土作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -380,7 +532,43 @@
                            data: [150, 212, 201, 154, 190, 330, 410]
                        },
                        {
                            name: 'Search Engine',
                            name: '断路作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        },
                        {
                            name: '高处作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        },
                        {
                            name: '临时用电作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 832, 901, 934, 1290, 1330, 1320]
                        },
                        {
                            name: '盲板抽堵作业',
                            type: 'bar',
                            stack: 'total',
                            label: {
@@ -395,39 +583,13 @@
                };

                option && myCharts.value.setOption(option);
            },2000)
            // 分布图
            // onMounted(()=>{
            //     setTimeout(() => {
            //         drawChart()
            //     },1000)
            // });


            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                searchTime,
                typeValue,
                reserveOptions,
                tableData,
                dialogChartsVisible,
                dateRange,
                shortcuts,
                departmentName,
                departmentOptions,
                props,
                myChart,
                handleChange,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
@@ -436,61 +598,75 @@
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-child {
            margin-bottom: 0;
        }
        .homeCard{
            width: 100%;
            display: flex;
            align-items: center;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }

        .grid-content{
        .el-row{
            display: flex;
            align-items: center;
            min-height: 36px;
        }
            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;

            .demo-datetime-picker {
            .topInfo {
                display: flex;
                width: 100%;
                padding: 0;
                flex-wrap: wrap;
            }
            .demo-datetime-picker .block {
                padding: 30px 0;
                text-align: center;
                border-right: solid 1px var(--el-border-color);
                flex: 1;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .topBtns{
        .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-button--text {
            margin-right: 15px;
        }
        .el-select {
            width: 300px;
        }
        .el-input {
            width: 300px;
        }
        .dialog-footer button:first-child {
            margin-right: 10px;
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

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

@@ -2,111 +2,227 @@
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-row class="homeCard">
<!--            <div class="homeCard">-->
            <el-col :span="6">
            <el-col :span="14">
                <div class="grid-content topInfo">
                    <div>当前所属部门：</div>
                    <div>电工部</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>预约时间：</div>
                    <div class="block">
                        <el-date-picker
                                v-model="searchTime"
                                type="date"
                                placeholder=""
                                size="large"
                        />
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content topInfo">
                    <div>预约类型：</div>
                    <div>
                        <el-select v-model="typeValue" class="m-2" placeholder="Select" size="large">
                            <el-option
                                    v-for="item in reserveOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" class="topBtns">
                <div class="grid-content topInfo">
                    <div style="margin-right: 20px"><el-button type="primary" plain>查询历史</el-button></div>
                    <div><el-button type="success" @click="dialogFormVisible = true">新增预约</el-button></div>
                </div>
            </el-col>
<!--        </div>-->
        </el-row>
        <el-row>
            <div class="homeCard">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="编号" width="120" />
                <el-table-column prop="time" label="预约时间" width="150" />
                <el-table-column prop="department" label="预约部门" width="180" />
                <el-table-column prop="dirtyWork" label="动土作业" width="100" />
                <el-table-column prop="fireWork" label="动火作业" width="100" />
                <el-table-column prop="hangWork" label="吊装作业" width="100" />
                <el-table-column prop="spaceWork" label="受限空间作业"/>
                <el-table-column prop="cut" label="断路"/>
                <el-table-column prop="high" label="高处" />
                <el-table-column prop="block" label="盲板抽堵"/>
                <el-table-column prop="tempUse" label="临时用电"/>
                <el-table-column fixed="right" label="操作">
                    <template #default>
                        <el-button link type="primary" size="small">操作</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>
        </el-row>
        <el-dialog v-model="dialogFormVisible" title="新增预约">
            <el-form :model="reservationForm">
                <el-form-item label="我的当前部门" :label-width="formLabelWidth">
                    <el-input v-model="reservationForm.department" placeholder="" />
                </el-form-item>
                <el-form-item label="预约作业时间" :label-width="formLabelWidth">
                    <div>当前所属部门：<span>电工部</span></div>
                    <el-date-picker
                            v-model="reservationForm.time"
                            type="date"
                            placeholder=""
                            v-model="searchTime"
                            type="datetime"
                            placeholder="预约时间"
                            size="large"
                            style="width: 100%;white-space: nowrap;margin-right: 20px"
                    />
                    <el-select v-model="typeValue" placeholder="请选择预约类型" style="width: 100%">
                        <el-option label="类型1" value="类型1"/>
                        <el-option label="类型2" value="类型2"/>
                        <el-option label="类型3" value="类型3"/>
                    </el-select>
                    <el-button type="primary">查询</el-button>
                    <el-button plain>重置</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="homeCard">
            <div class="main-card">
                <el-row class="cardTop">
                    <el-col :span="12" class="mainCardBtn">
                        <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button>
<!--                        <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>-->
                        <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
                    </el-col>
                    <el-button type="primary" :icon="Refresh" size="default"/>
                </el-row>
                <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        :header-cell-style="{background: '#fafafa'}"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" width="120" />
                    <el-table-column prop="time" label="预约时间" width="150" />
                    <el-table-column prop="department" label="预约部门" width="180" />
                    <el-table-column prop="dirtyWork" label="动土作业" width="100" />
                    <el-table-column prop="fireWork" label="动火作业" width="100" />
                    <el-table-column prop="hangWork" label="吊装作业" width="100" />
                    <el-table-column prop="spaceWork" label="受限空间作业"/>
                    <el-table-column prop="cut" label="断路作业"/>
                    <el-table-column prop="high" label="高处作业" />
                    <el-table-column prop="block" label="盲板抽堵作业"/>
                    <el-table-column prop="tempUse" label="临时用电作业"/>
                    <el-table-column fixed="right" label="操作" align="center" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBtn">
                <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 15]"
                        small=false
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
        </el-scrollbar>
        <el-dialog v-model="dialogDetails" title="作业预约">
            <el-form :model="details" label-width="120px">
                <el-form-item label="预约时间">
                    <el-input
                            v-model="details.time"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="预约作业类型" :label-width="formLabelWidth">
                    <el-select v-model="reservationForm.type">
                        <el-option label="类型1" value="type1" />
                        <el-option label="类型2" value="type2" />
                    </el-select>
                <el-form-item label="预约部门">
                    <el-input
                            v-model="details.department"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="对应作业数量" :label-width="formLabelWidth">
                    <el-input v-model="reservationForm.amount" placeholder="" />
                <el-form-item label="动土作业">
                    <el-input
                            v-model="details.dirtyWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="details.fireWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="details.hangWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="details.spaceWork"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="details.cut"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="details.high"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="details.block"
                            readonly
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="details.tempUse"
                            readonly
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="作业预约编辑" @close="closeAdd">
            <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
                <el-form-item label="预约时间" prop="time">
                    <el-date-picker
                            v-model="addRecord.time"
                            type="datetime"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="预约部门" prop="department">
                    <el-select v-model="addRecord.department" placeholder="请选择">
                        <el-option label="部门一" value="部门一" />
                        <el-option label="部门二" value="部门二" />
                    </el-select>
                </el-form-item>
                <el-form-item label="动土作业">
                    <el-input
                            v-model="addRecord.dirtyWork"
                    />
                </el-form-item>
                <el-form-item label="动火作业">
                    <el-input
                            v-model="addRecord.fireWork"
                    />
                </el-form-item>
                <el-form-item label="吊装作业">
                    <el-input
                            v-model="addRecord.hangWork"
                    />
                </el-form-item>
                <el-form-item label="受限空间作业">
                    <el-input
                            v-model="addRecord.spaceWork"
                    />
                </el-form-item>
                <el-form-item label="断路作业">
                    <el-input
                            v-model="addRecord.cut"
                    />
                </el-form-item>
                <el-form-item label="高处作业">
                    <el-input
                            v-model="addRecord.high"
                    />
                </el-form-item>
                <el-form-item label="盲板抽堵作业">
                    <el-input
                            v-model="addRecord.block"
                    />
                </el-form-item>
                <el-form-item label="临时用电作业">
                    <el-input
                            v-model="addRecord.tempUse"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
            <span>您确定要删除该条记录吗？</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="default">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false" size="default">确认</el-button>
              </span>
          <span class="dialog-footer">
              <el-button @click="deleteDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
          </span>
            </template>
        </el-dialog>
        </el-scrollbar>
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, defineComponent, ref } from 'vue';
<script lang="ts" setup>
    import { toRefs, reactive, ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'
    import { ElTable, FormInstance, FormRules } from 'element-plus'
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
@@ -120,106 +236,117 @@
    interface type {

    }
    export default defineComponent({
        name: 'home',
        setup() {
    // export default defineComponent({
    //     name: 'workCheckinRecord',
    //     setup() {
            const userInfo = useUserInfo()
            const searchTime = ref('')
            const typeValue = ref('')
            const reserveOptions = [
                {
                    value: 'Option1',
                    label: 'Option1',
                },
                {
                    value: 'Option2',
                    label: 'Option2',
                },
                {
                    value: 'Option3',
                    label: 'Option3',
                },
                {
                    value: 'Option4',
                    label: 'Option4',
                },
                {
                    value: 'Option5',
                    label: 'Option5',
                },
            ];
            const tableData = [
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '电工部',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                },
                {
                    id: '10801920',
                    time: '2022-06-29',
                    department: '土木',
                    dirtyWork: '',
                    fireWork: '',
                    hangWork: '',
                    spaceWork: '',
                    cut: '',
                    high: '',
                    block: '',
                    tempUse: ''
                }
            ];
            const dialogFormVisible = ref(false);
            const formLabelWidth = '140px';
            const reservationForm = reactive({
                department: '',
                time: '',
                type: '',
                amount: ''
            });
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({
                homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
            });
            const typeValue = ref('')
            const currentPage = ref(1)
            const pageSize = ref(10)
            const chosenIndex = ref(-1)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const tableData = reactive(
                    [
                        {
                            time: '2022-06-29 12:32:52',
                            department: '电工部',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        },
                        {
                            time: '2022-06-29 12:32:52',
                            department: '电工部',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        },
                        {
                            time: '2022-06-29 12:32:52',
                            department: '土木',
                            dirtyWork: '',
                            fireWork: '',
                            hangWork: '',
                            spaceWork: '',
                            cut: '',
                            high: '',
                            block: '',
                            tempUse: ''
                        }
                ]
            )
            const addRef = ref<FormInstance>()
            const addRules = reactive<FormRules>({
                time:[{required: true, message: '该内容不能为空',trigger:'blur'}],
                department:[{required: true, message: '该内容不能为空',trigger:'blur'}]
            })
            const dialogDetails = ref(false)
            const dialogAddRecord = ref(false)
            const deleteDialog = ref(false)
            const addRecord = ref({})
            const details = ref({})
            const viewRecord = (row) =>{
                details.value = JSON.parse(JSON.stringify(row))
                dialogDetails.value = true
            }
            const deleteRecord = (index) =>{
                chosenIndex.value = index
                deleteDialog.value = true
            }
            const conFirmDelete = ()=> {
                tableData.splice(chosenIndex.value,1)
                deleteDialog.value = false
            }
            const confirmAddRecord = async (formEl: FormInstance | undefined) =>{
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        if(chosenIndex.value == -1){
                            tableData.unshift(addRecord.value)
                        }else{
                            tableData[chosenIndex.value] = addRecord.value
                        }
                        dialogAddRecord.value =false
                    } else {
                        console.log('error submit!', fields)
                    }
                })

            }
            const closeAdd =()=>{
                addRecord.value={}
                chosenIndex.value = -1
            }
            const indexClear = ()=>{
                chosenIndex.value = -1
            }
            const editRecord =(index, row)=>{
                dialogAddRecord.value = true
                chosenIndex.value = index
                addRecord.value = JSON.parse(JSON.stringify(row))
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                searchTime,
                typeValue,
                reserveOptions,
                tableData,
                dialogFormVisible,
                formLabelWidth,
                reservationForm,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
@@ -228,59 +355,75 @@
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .el-row{
            margin-bottom: 20px;
        }
        .el-row:last-of-type {
            margin-bottom: 0;
        }
        .homeCard{
            width: 100%;
            display: flex;
            align-items: center;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
        }
        .grid-content{
            align-items: center;
            min-height: 36px;
        }

        .topInfo{
        .el-row{
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                align-items: center;
                min-height: 36px;
            }

            .demo-datetime-picker {
            .topInfo {
                display: flex;
                width: 100%;
                padding: 0;
                flex-wrap: wrap;
            }
            .demo-datetime-picker .block {
                padding: 30px 0;
                text-align: center;
                border-right: solid 1px var(--el-border-color);
                flex: 1;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                &>div{
                    white-space: nowrap;
                    margin-right: 20px;
                }
            }
        }
        .topBtns{
        .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-button--text {
            margin-right: 15px;
        }
        .el-select {
            width: 300px;
        }
        .el-input {
            width: 300px;
        }
        .dialog-footer button:first-child {
            margin-right: 10px;
        }
    }
    .el-input{
        width: 100% !important;
    }
    .el-date-editor::v-deep{
        width: 100%;
    }
    .el-select{
        width: 100%;
    }
</style>

 src/views/specialWorkSystem/workProcessManagement/workCheckinRecord/index.vue

@@ -31,7 +31,7 @@
                    <el-table-column property="worker" label="签到人" width="180" />
                    <el-table-column property="checkinTime" label="签到时间" sortable/>
                    <el-table-column property="remark" label="备注"/>
                    <el-table-column fixed="right" label="操作" width="180">
                    <el-table-column fixed="right" label="操作" align="center" width="180">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="viewDetails(scope.row)">查看</el-button>
                        </template>