添加我的申请tab切换页面，优化组件表单的校验

Admin

2022-07-11 647ef6974a149e21bc88e4b559ba9badaafe367e

添加我的申请tab切换页面，优化组件表单的校验

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

对比新文件
@@ -0,0 +1,282 @@
<template>
    <div class="home-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="申请中" name="Applying">
                <el-scrollbar height="100%">
                    <el-row>
                        <div class="homeCard">
                            <el-col :span="12">
                                <div class="grid-content topInfo">
                                    <el-input v-model="searchWord" placeholder="作业证名称"></el-input>
                                    <el-button type="primary">查询</el-button>
                                    <el-button plain>重置</el-button>
                                </div>
                            </el-col>
                        </div>
                    </el-row>
                    <div class="homeCard">
                        <div class="main-card">
                            <el-row class="cardTop">
                                <el-col :span="12" class="mainCardBtn">
                                    <el-button type="primary" :icon="Plus" size="default">申请</el-button>
<!--                                    <el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
<!--                                    <el-button type="success" size="default">设置分类</el-button>-->
                                </el-col>
                                <el-button type="primary" :icon="Refresh" />
                            </el-row>
                            <el-table
                                    ref="multipleTableRef"
                                    :data="applyData"
                                    style="width: 100%"
                                    :header-cell-style="{background: '#fafafa'}"
                                    @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" width="55" />
                                <el-table-column property="num" label="作业证编号" width="200"/>
                                <el-table-column property="level" label="作业证等级" width="180" sortable />
                                <el-table-column property="applyDate" label="申请日期" sortable />
                                <el-table-column property="name" label="申请人" width="180"/>
                                <el-table-column property="department" label="申请部门" width="180" />
                                <el-table-column label="申请状态" width="180">
                                    <template #default="scope">
                                        <el-tag type="success">{{ scope.row.status }}</el-tag>
                                    </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-tab-pane>
            <el-tab-pane label="已通过" name="passed">
                <el-scrollbar height="100%">
                    <el-row>
                        <div class="homeCard">
                            <el-col :span="12">
                                <div class="grid-content topInfo">
                                    <el-input v-model="searchWord" placeholder="作业证名称"></el-input>
                                    <el-button type="primary">查询</el-button>
                                    <el-button plain>重置</el-button>
                                </div>
                            </el-col>
                        </div>
                    </el-row>
                    <div class="homeCard">
                        <div class="main-card">
<!--                            <el-row class="cardTop">-->
<!--                                <el-col :span="12" class="mainCardBtn">-->
<!--                                    <el-button type="primary" :icon="Plus" size="default">申请</el-button>-->
                                    <!--<el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
                                    <!--<el-button type="success" size="default">设置分类</el-button>-->
<!--                                </el-col>-->
<!--                                <el-button type="primary" :icon="Refresh" />-->
<!--                            </el-row>-->
                            <el-table
                                    ref="multipleTableRef"
                                    :data="passedData"
                                    style="width: 100%"
                                    :header-cell-style="{background: '#fafafa'}"
                                    @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" width="55" />
                                <el-table-column property="num" label="作业证编号" width="200"/>
                                <el-table-column property="level" label="作业证等级" width="180" sortable />
                                <el-table-column property="applyDate" label="申请日期" sortable />
                                <el-table-column property="name" label="申请人" width="180"/>
                                <el-table-column property="department" label="申请部门" width="180" />
                                <el-table-column label="申请状态" width="180">
                                    <template #default="scope">
                                        <el-tag type="success">{{ scope.row.status }}</el-tag>
                                    </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-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
    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 type { TabsPaneContext } from 'element-plus'
    let global: any = {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    };

    interface stateType {
        homeOne: Array <type>
    }
    interface type {

    }
    interface User {
        num: string
        level: string
        applyDate: string
        name: string
        department: string
        status: string
    }
    export default defineComponent({
        name: 'myApply',
        setup() {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const activeName = ref('Applying')
            const handleClick = (tab: TabsPaneContext, event: Event) => {
                console.log(tab, event)
            }
            const multipleTableRef = ref<InstanceType<typeof ElTable>>()
            const multipleSelection = ref<User[]>([])
            const handleSelectionChange = (val: User[]) => {
                multipleSelection.value = val
            }
            const currentPage = ref(1)
            const pageSize = ref(10)
            const handleSizeChange = (val: number) => {
                console.log(`${val} items per page`)
            }
            const handleCurrentChange = (val: number) => {
                console.log(`current page: ${val}`)
            }
            const applyData: User[] = []
            const passedData: User[] = []
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
                userInfos.value.projectId = value
                await initBackEndControlRoutes();
            };
            return {
                renderMenu,
                multipleTableRef,
                applyData,
                passedData,
                currentPage,
                pageSize,
                activeName,
                handleClick,
                handleSizeChange,
                handleCurrentChange,
                Plus,
                Delete,
                handleSelectionChange,
                Refresh,
                ...toRefs(state),
            };
        },
    });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;
    .home-container {
        height: 100%;
        overflow: hidden;
        padding: 20px;
        .demo-tabs > .el-tabs__content {
            padding: 32px;
            color: #6b778c;
            font-size: 32px;
            font-weight: 600;
        }
        .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;
            }
        }
    }
</style>

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/blindPanelForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="bpForm" label-width="180px" :rules="bpFormRules" ref="ruleFormRef">
        <el-form :model="bpForm" label-width="180px" :rules="bpFormRules" ref="bpRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -14,9 +14,9 @@
                    <el-col :span="8">
                        <el-form-item label="申请人" prop="bpApplyName">
                            <el-input
                                    v-model="bpForm.bpApplyName"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpApplyName"
                                placeholder="请输入"
                                class="input-with-select"
                            >
                                <template #append>
                                    <el-button :icon="Search" />
@@ -29,9 +29,9 @@
                    <el-col :span="24">
                        <el-form-item label="设备管道名称" prop="bpTubeName">
                            <el-input
                                    v-model="bpForm.bpTubeName"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpTubeName"
                                placeholder="请输入"
                                class="input-with-select"
                            />
                        </el-form-item>
                    </el-col>
@@ -40,9 +40,9 @@
                    <el-col :span="24">
                        <el-form-item label="主要介质" prop="bpMainMatter">
                            <el-input
                                    v-model="bpForm.bpMainMatter"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpMainMatter"
                                placeholder="请输入"
                                class="input-with-select"
                            />
                        </el-form-item>
                    </el-col>
@@ -51,18 +51,18 @@
                    <el-col :span="8">
                        <el-form-item label="温度" prop="bpTemperature">
                            <el-input
                                    v-model="bpForm.bpTemperature"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpTemperature"
                                placeholder="请输入"
                                class="input-with-select"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="压力" prop="bpPressure">
                            <el-input
                                    v-model="bpForm.bpPressure"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpPressure"
                                placeholder="请输入"
                                class="input-with-select"
                            />
                        </el-form-item>
                    </el-col>
@@ -71,9 +71,9 @@
                    <el-col :span="24">
                        <el-form-item label="盲板材质" prop="bpMaterial">
                            <el-input
                                    v-model="bpForm.bpMaterial"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpMaterial"
                                placeholder="请输入"
                                class="input-with-select"
                            />
                        </el-form-item>
                    </el-col>
@@ -82,9 +82,9 @@
                    <el-col :span="24">
                        <el-form-item label="盲板规格" prop="bpFormat">
                            <el-input
                                    v-model="bpForm.bpFormat"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpFormat"
                                placeholder="请输入"
                                class="input-with-select"
                            />
                        </el-form-item>
                    </el-col>
@@ -93,9 +93,9 @@
                    <el-col :span="24">
                        <el-form-item label="盲板编号" prop="bpNum">
                            <el-input
                                    v-model="bpForm.bpNum"
                                    placeholder="请输入"
                                    class="input-with-select"
                                v-model="bpForm.bpNum"
                                placeholder="请输入"
                                class="input-with-select"
                            />
                        </el-form-item>
                    </el-col>
@@ -104,27 +104,27 @@
                    <el-col :span="24">
                        <el-form-item label="盲板位置" prop="bpLocation">
                            <el-input
                                    v-model="bpForm.bpLocation"
                                    placeholder="请输入"
                                    class="input-with-select"
                                    type="textarea"
                                v-model="bpForm.bpLocation"
                                placeholder="请输入"
                                class="input-with-select"
                                type="textarea"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="盲板位置图" prop="fileList">
                        <el-form-item label="盲板位置图">
                            <el-upload
                                    v-model:file-list="bpForm.fileList"
                                    class="upload-demo"
                                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                    multiple
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :before-remove="beforeRemove"
                                    :limit="3"
                                    :on-exceed="handleExceed"
                                v-model:file-list="bpForm.picList"
                                class="upload-demo"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                multiple
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                :limit="3"
                                :on-exceed="handleExceed"
                            >
                                <el-button type="primary">上传附件</el-button>
                                <template #tip>
@@ -150,9 +150,9 @@
                    <el-col :span="24">
                        <el-form-item label="装盲板时间" prop="bpInstallTime">
                        <el-date-picker
                                v-model="bpForm.bpInstallTime"
                                type="datetime"
                                placeholder="请选择"
                            v-model="bpForm.bpInstallTime"
                            type="datetime"
                            placeholder="请选择"
                        />
                        </el-form-item>
                    </el-col>
@@ -208,7 +208,7 @@
    export default defineComponent({
        name: 'blindPanelForm',
        props: {
            bpForm: Object
            bpForm: Object,
        },
        setup(props) {
            const userInfo = useUserInfo()
@@ -232,7 +232,7 @@
            //     bpDePrincipals: [],
            //     bpUninstallTime: ''
            // })
            const ruleFormRef = ref<FormInstance>()
            const bpRef = ref<FormInstance>()
            const bpFormRules = reactive<FormRules>({
                bpDepartment:[{required: true,message: '此处不可为空'}],
                bpApplyName:[{required: true,message: '此处不可为空'}],
@@ -244,10 +244,9 @@
                bpFormat: [{required: true,message: '此处不可为空'}],
                bpNum: [{required: true,message: '此处不可为空'}],
                bpLocation: [{required: true,message: '此处不可为空'}],
                fileList: [{type: 'array',required: true,message: '此处不可为空'}],
                bpPrincipals: [{type: 'array',required: true,message: '此处不可为空'}],
                bpPrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger:'blur'}],
                bpInstallTime: [{required: true,message: '此处不可为空'}],
                bpDePrincipals: [{type: 'array',required: true,message: '此处不可为空'}],
                bpDePrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger:'blur'}],
                bpUninstallTime: [{required: true,message: '此处不可为空'}]
            })
            const fileList = ref<UploadUserFile[]>([
@@ -282,6 +281,18 @@
                        () => false
                )
            }

            const validateForm = async () => {
                let flag = null
                await bpRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -292,9 +303,10 @@
                renderMenu,
                bpForm1,
                bpFormRules,
                ruleFormRef,
                bpRef,
                fileList,
                Search,
                validateForm,
                handleRemove,
                handlePreview,
                handleExceed,

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/cutLineForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="clForm" label-width="180px" :rules="clFormRules" ref="ruleFormRef">
        <el-form :model="clForm" label-width="180px" :rules="clFormRules" ref="clRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -108,7 +108,7 @@
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const clForm1 = reactive(props.clForm)
            const ruleFormRef = ref<FormInstance>()
            const clRef = ref<FormInstance>()
            const clFormRules = reactive<FormRules>({
                clDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                clApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -148,6 +148,17 @@
                        () => false
                )
            }
            const validateForm = async () => {
                let flag = null
                await clRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -159,8 +170,9 @@
                clForm1,
                Search,
                clFormRules,
                ruleFormRef,
                clRef,
                fileList,
                validateForm,
                handleRemove,
                handlePreview,
                handleExceed,

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/dirtWorkForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="dwForm" label-width="180px" :rules="dwFormRules" ref="ruleFormRef">
        <el-form :model="dwForm" label-width="180px" :rules="dwFormRules" ref="dwRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -110,7 +110,7 @@
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const dwForm1 = reactive(props.dwForm)
            const ruleFormRef = ref<FormInstance>()
            const dwRef = ref<FormInstance>()
            const dwFormRules = reactive<FormRules>({
                dwDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                dwApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -150,6 +150,17 @@
                        () => false
                )
            }
            const validateForm = async () => {
                let flag = null
                await dwRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -160,8 +171,9 @@
                renderMenu,
                dwForm1,
                dwFormRules,
                ruleFormRef,
                dwRef,
                fileList,
                validateForm,
                handleRemove,
                handlePreview,
                handleExceed,

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/fireWorkForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="fwForm" label-width="150px" :rules="fwRules" ref="ruleFormRef">
        <el-form :model="fwForm" label-width="150px" :rules="fwRules" ref="fwRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -89,7 +89,7 @@
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const fwForm1 = reactive(props.fwForm)
            const ruleFormRef = ref<FormInstance>()
            const fwRef = ref<FormInstance>()
            const fwRules = reactive<FormRules>({
                fwDepartment:[{required: true,message: '此处不可为空'}],
                fwApplyName:[{required: true,message: '此处不可为空'}],
@@ -97,6 +97,17 @@
                fwRiskIdentify: [{required: true,message: '此处不可为空'}],
                fwWorkWay: [{required: true,message: '此处不可为空'}]
            })
            const validateForm = async () => {
                let flag = null
                await fwRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -107,8 +118,9 @@
                renderMenu,
                Search,
                fwForm1,
                ruleFormRef,
                fwRules,
                fwRef,
                validateForm,
                ...toRefs(state),
            };
        },

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/hangLoadForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="hlForm" label-width="180px" :rules="hlFormRules" ref="ruleFormRef">
        <el-form :model="hlForm" label-width="180px" :rules="hlFormRules" ref="hlRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -95,7 +95,7 @@
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const hlForm1 = reactive(props.hlForm)
            const ruleFormRef = ref<FormInstance>()
            const hlRef = ref<FormInstance>()
            const hlFormRules = reactive<FormRules>({
                hlDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                hlApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -103,6 +103,17 @@
                hlWeight: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                hlToolsName: [{required: true,message: '此处不可为空',trigger: 'blur'}]
            })
            const validateForm = async () => {
                let flag = null
                await hlRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -113,7 +124,8 @@
                renderMenu,
                hlForm1,
                hlFormRules,
                ruleFormRef,
                hlRef,
                validateForm,
                ...toRefs(state),
            };
        },

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/highWorkForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="hwForm" label-width="150px" :rules="hwRules" ref="ruleFormRef">
        <el-form :model="hwForm" label-width="150px" :rules="hwRules" ref="hwRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -80,13 +80,24 @@
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const hwForm1 = reactive(props.hwForm)
            const ruleFormRef = ref<FormInstance>()
            const hwRef = ref<FormInstance>()
            const hwRules = reactive<FormRules>({
                hwDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                hwApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                hwLevel: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                hwHeight: [{required: true,message: '此处不可为空',trigger: 'blur'}]
            })
            const validateForm = async () => {
                let flag = null
                await hwRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -96,8 +107,9 @@
            return {
                renderMenu,
                hwForm1,
                ruleFormRef,
                hwRef,
                hwRules,
                validateForm,
                ...toRefs(state),
            };
        },

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/limitedSpaceForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="lsForm" label-width="180px" :rules="lsFormRules" ref="ruleFormRef">
        <el-form :model="lsForm" label-width="180px" :rules="lsFormRules" ref="lsRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -101,7 +101,7 @@
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const lsForm1 = reactive(props.lsForm)
            const ruleFormRef = ref<FormInstance>()
            const lsRef = ref<FormInstance>()
            const lsFormRules = reactive<FormRules>({
                lsDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                lsApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -109,6 +109,17 @@
                lsUnit: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                lsUnitMatterName: [{required: true,message: '此处不可为空',trigger: 'blur'}]
            })
            const validateForm = async () => {
                let flag = null
                await lsRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -119,7 +130,8 @@
                renderMenu,
                lsForm1,
                lsFormRules,
                ruleFormRef,
                lsRef,
                validateForm,
                ...toRefs(state),
            };
        },

 src/views/specialWorkSystem/workApplyManagement/workApplyForm/components/tempElectForm.vue

@@ -1,6 +1,6 @@
<template>
    <div class="comp-container">
        <el-form :model="teForm" label-width="150px" :rules="teRules" ref="ruleFormRef">
        <el-form :model="teForm" label-width="150px" :rules="teRules" ref="teRef">
            <div class="homeCard">
                <el-row>
                    <el-col :span="8">
@@ -80,13 +80,24 @@
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const teForm1 = reactive(props.teForm)
            const ruleFormRef = ref<FormInstance>()
            const teRef = ref<FormInstance>()
            const teRules = reactive<FormRules>({
                teDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                teApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                teLevel: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                teHeight: [{required: true,message: '此处不可为空',trigger: 'blur'}]
            })
            const validateForm = async () => {
                let flag = null
                await teRef.value.validate(valid=>{
                    if(valid){
                        flag = true
                    }else{
                        flag = false
                    }
                })
                return flag
            }
            // 折线图
            const renderMenu = async (value: string) => {
                Session.set('projectId',value)
@@ -96,8 +107,9 @@
            return {
                renderMenu,
                teForm1,
                ruleFormRef,
                teRef,
                teRules,
                validateForm,
                ...toRefs(state),
            };
        },

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

@@ -2,14 +2,14 @@
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-form :model="form" label-width="150px" :rules="applyRules" ref="ruleFormRef2">
            <blind-panel-form :bpForm="form.addForm"></blind-panel-form>
<!--            <cut-line-form :clForm="form.addForm"></cut-line-form>-->
<!--            <dirt-work-form :dwForm="form.addForm"></dirt-work-form>-->
<!--            <fire-work-form :fwForm="form.addForm"></fire-work-form>-->
<!--            <hang-load-form :hlForm="form.addForm"></hang-load-form>-->
<!--            <high-work-form :hwForm="form.addForm"></high-work-form>-->
<!--            <limited-space-form :lsForm="form.addForm"></limited-space-form>-->
<!--            <temp-elect-form :teForm="form.addForm"></temp-elect-form>-->
<!--            <blind-panel-form :bpForm="form.addForm" ref="additionalForm"></blind-panel-form>-->
<!--            <cut-line-form :clForm="form.addForm" ref="additionalForm"></cut-line-form>-->
<!--            <dirt-work-form :dwForm="form.addForm" ref="additionalForm"></dirt-work-form>-->
            <fire-work-form :fwForm="form.addForm" ref="additionalForm"></fire-work-form>
<!--            <hang-load-form :hlForm="form.addForm" ref="additionalForm"></hang-load-form>-->
<!--            <high-work-form :hwForm="form.addForm" ref="additionalForm"></high-work-form>-->
<!--            <limited-space-form :lsForm="form.addForm" ref="additionalForm"></limited-space-form>-->
<!--            <temp-elect-form :teForm="form.addForm" ref="additionalForm"></temp-elect-form>-->
            <div>
            <div class="homeCard">
            <el-row>
@@ -352,6 +352,7 @@
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    let global: any = {
        homeChartOne: null,
@@ -554,15 +555,31 @@
            const deleteRow = (index) =>{
                form.workerList.splice( index,1)
            }
            const isValid = ref(false)
            const additionalForm = ref(null)
            const handleApply = async (formEl: FormInstance | undefined) =>{
                if (!formEl) return
                const flag = additionalForm.value.validateForm()
                await flag.then((res)=>{
                    isValid.value = res
                })
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        console.log('submit',form)
                    console.log(valid,'and',isValid.value)
                    if (valid && isValid.value) {
                        console.log('submit',form,fields)
                        ElMessage({
                            message: '提交成功！',
                            type: 'success',
                        })
                    } else {
                        console.log('error submit!', fields)
                        // console.log('error submit!',form,fields)
                        ElMessage({
                            message: '表单未填写完整',
                            type: 'error',
                        })
                    }
                })

            }
            // 折线图
            const renderMenu = async (value: string) => {
@@ -583,9 +600,11 @@
                ruleFormRef,
                ruleFormRef2,
                ruleFormRef3,
                additionalForm,
                addWorkerRules,
                saftyFileRules,
                applyRules,
                isValid,
                handleApply,
                cancleAddFile,
                deleteRow,