添加作业申请页面组件

Admin

2022-07-08 cb3a40b47b5309fcb4d4b0d7e1ab94263bc415a7

添加作业申请页面组件

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

@@ -116,7 +116,7 @@
                    <el-col :span="24">
                        <el-form-item label="盲板位置图" prop="fileList">
                            <el-upload
                                    v-model:file-list="fileList"
                                    v-model:file-list="bpForm.fileList"
                                    class="upload-demo"
                                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                    multiple
@@ -207,44 +207,48 @@
    }
    export default defineComponent({
        name: 'blindPanelForm',
        setup() {
        props: {
            bpForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const bpForm = reactive({
                bpDepartment: '',
                bpApplyName: '',
                bpTubeName: '',
                bpMainMatter: '',
                bpTemperature: '',
                bpPressure: '',
                bpMaterial: '',
                bpFormat: '',
                bpNum: '',
                bpLocation: '',
                fileList: [],
                bpPrincipals: [],
                bpInstallTime: '',
                bpDePrincipals: [],
                bpUninstallTime: ''
            })
            const bpForm1 = reactive(props.bpForm)
            // const bpForm = reactive({
            //     bpDepartment: '',
            //     bpApplyName: '',
            //     bpTubeName: '',
            //     bpMainMatter: '',
            //     bpTemperature: '',
            //     bpPressure: '',
            //     bpMaterial: '',
            //     bpFormat: '',
            //     bpNum: '',
            //     bpLocation: '',
            //     fileList: [],
            //     bpPrincipals: [],
            //     bpInstallTime: '',
            //     bpDePrincipals: [],
            //     bpUninstallTime: ''
            // })
            const ruleFormRef = ref<FormInstance>()
            const bpFormRules = reactive<FormRules>({
                bpDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpTubeName: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpMainMatter: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpTemperature: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpPressure: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpMaterial: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpFormat: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpNum: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpLocation: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                fileList: [{type: 'array',required: true,message: '此处不可为空',trigger: 'change'}],
                bpPrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger: 'change'}],
                bpInstallTime: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                bpDePrincipals: [{type: 'array',required: true,message: '此处不可为空',trigger: 'change'}],
                bpUninstallTime: [{required: true,message: '此处不可为空',trigger: 'blur'}]
                bpDepartment:[{required: true,message: '此处不可为空'}],
                bpApplyName:[{required: true,message: '此处不可为空'}],
                bpTubeName: [{required: true,message: '此处不可为空'}],
                bpMainMatter: [{required: true,message: '此处不可为空'}],
                bpTemperature: [{required: true,message: '此处不可为空'}],
                bpPressure: [{required: true,message: '此处不可为空'}],
                bpMaterial: [{required: true,message: '此处不可为空'}],
                bpFormat: [{required: true,message: '此处不可为空'}],
                bpNum: [{required: true,message: '此处不可为空'}],
                bpLocation: [{required: true,message: '此处不可为空'}],
                fileList: [{type: 'array',required: true,message: '此处不可为空'}],
                bpPrincipals: [{type: 'array',required: true,message: '此处不可为空'}],
                bpInstallTime: [{required: true,message: '此处不可为空'}],
                bpDePrincipals: [{type: 'array',required: true,message: '此处不可为空'}],
                bpUninstallTime: [{required: true,message: '此处不可为空'}]
            })
            const fileList = ref<UploadUserFile[]>([
                {
@@ -286,10 +290,11 @@
            };
            return {
                renderMenu,
                bpForm,
                bpForm1,
                bpFormRules,
                ruleFormRef,
                fileList,
                Search,
                handleRemove,
                handlePreview,
                handleExceed,

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

@@ -100,17 +100,14 @@
    }
    export default defineComponent({
        name: 'cutLineForm',
        setup() {
        props: {
            clForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const clForm = reactive({
                clDepartment: '',
                clApplyName: '',
                clReason: '',
                clUnits: [],
                fileList: []
            })
            const clForm1 = reactive(props.clForm)
            const ruleFormRef = ref<FormInstance>()
            const clFormRules = reactive<FormRules>({
                clDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -159,7 +156,8 @@
            };
            return {
                renderMenu,
                clForm,
                clForm1,
                Search,
                clFormRules,
                ruleFormRef,
                fileList,

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

@@ -102,17 +102,14 @@
    }
    export default defineComponent({
        name: 'dirtWorkForm',
        setup() {
        props:{
            dwForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const dwForm = reactive({
                dwDepartment: '',
                dwApplyName: '',
                dwRange: '',
                dwWay: '',
                fileList: []
            })
            const dwForm1 = reactive(props.dwForm)
            const ruleFormRef = ref<FormInstance>()
            const dwFormRules = reactive<FormRules>({
                dwDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -161,7 +158,7 @@
            };
            return {
                renderMenu,
                dwForm,
                dwForm1,
                dwFormRules,
                ruleFormRef,
                fileList,

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

@@ -81,24 +81,21 @@
    }
    export default defineComponent({
        name: 'fireWorkForm',
        setup() {
        props: {
            fwForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const fwForm = reactive({
                fwDepartment: '',
                fwApplyName: '',
                fwLevel: '',
                fwRiskIdentify: '',
                fwWorkWay: ''
            })
            const fwForm1 = reactive(props.fwForm)
            const ruleFormRef = ref<FormInstance>()
            const fwRules = reactive<FormRules>({
                fwDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                fwApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
                fwLevel: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                fwRiskIdentify: [{required: true,message: '此处不可为空',trigger: 'blur'}],
                fwWorkWay: [{required: true,message: '此处不可为空',trigger: 'blur'}]
                fwDepartment:[{required: true,message: '此处不可为空'}],
                fwApplyName:[{required: true,message: '此处不可为空'}],
                fwLevel: [{required: true,message: '此处不可为空'}],
                fwRiskIdentify: [{required: true,message: '此处不可为空'}],
                fwWorkWay: [{required: true,message: '此处不可为空'}]
            })
            // 折线图
            const renderMenu = async (value: string) => {
@@ -108,7 +105,8 @@
            };
            return {
                renderMenu,
                fwForm,
                Search,
                fwForm1,
                ruleFormRef,
                fwRules,
                ...toRefs(state),

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

@@ -87,17 +87,14 @@
    }
    export default defineComponent({
        name: 'hangLoadForm',
        setup() {
        props: {
            hlForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const hlForm = reactive({
                hlDepartment: '',
                hlApplyName: '',
                hlLevel: '',
                hlWeight: '',
                hlToolsName: ''
            })
            const hlForm1 = reactive(props.hlForm)
            const ruleFormRef = ref<FormInstance>()
            const hlFormRules = reactive<FormRules>({
                hlDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -114,7 +111,7 @@
            };
            return {
                renderMenu,
                hlForm,
                hlForm1,
                hlFormRules,
                ruleFormRef,
                ...toRefs(state),

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

@@ -72,16 +72,14 @@
    }
    export default defineComponent({
        name: 'highWorkForm',
        setup() {
        props:{
            hwForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const hwForm = reactive({
                hwDepartment: '',
                hwApplyName: '',
                hwLevel: '',
                hwHeight: ''
            })
            const hwForm1 = reactive(props.hwForm)
            const ruleFormRef = ref<FormInstance>()
            const hwRules = reactive<FormRules>({
                hwDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -97,7 +95,7 @@
            };
            return {
                renderMenu,
                hwForm,
                hwForm1,
                ruleFormRef,
                hwRules,
                ...toRefs(state),

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

@@ -93,17 +93,14 @@
    }
    export default defineComponent({
        name: 'limitedSpaceForm',
        setup() {
        props: {
            lsForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const lsForm = reactive({
                lsDepartment: '',
                lsApplyName: '',
                lsUnitName: '',
                lsUnit: '',
                lsUnitMatterName: ''
            })
            const lsForm1 = reactive(props.lsForm)
            const ruleFormRef = ref<FormInstance>()
            const lsFormRules = reactive<FormRules>({
                lsDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -120,7 +117,7 @@
            };
            return {
                renderMenu,
                lsForm,
                lsForm1,
                lsFormRules,
                ruleFormRef,
                ...toRefs(state),

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

@@ -72,16 +72,14 @@
    }
    export default defineComponent({
        name: 'tempElectForm',
        setup() {
        props: {
            teForm: Object
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const state  = reactive<stateType>({});
            const teForm = reactive({
                teDepartment: '',
                teApplyName: '',
                teLevel: '',
                teHeight: ''
            })
            const teForm1 = reactive(props.teForm)
            const ruleFormRef = ref<FormInstance>()
            const teRules = reactive<FormRules>({
                teDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
@@ -97,7 +95,7 @@
            };
            return {
                renderMenu,
                teForm,
                teForm1,
                ruleFormRef,
                teRules,
                ...toRefs(state),

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

@@ -2,60 +2,15 @@
    <div class="home-container">
        <el-scrollbar height="100%">
        <el-form :model="form" label-width="150px" :rules="applyRules" ref="ruleFormRef2">
<!--            <blind-panel-form></blind-panel-form>-->
            <div class="homeCard">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="申请部门">
                        <el-select v-model="form.department" placeholder="请选择部门">
                            <el-option label="机修班" value="机修班" />
                            <el-option label="火工班" value="火工班" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="申请人">
                        <el-input
                            v-model="form.applyName"
                            placeholder="请输入"
                            class="input-with-select"
                        >
                            <template #append>
                                <el-button :icon="Search" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业等级">
                        <el-select v-model="form.level" placeholder="请选择">
                            <el-option label="一" value="一" />
                            <el-option label="二" value="二" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="危害辨识">
                        <el-select v-model="form.riskIdentify" placeholder="请选择">
                            <el-option label="辨识一" value="辨识一" />
                            <el-option label="辨识二" value="辨识二" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="动火方式">
                        <el-select v-model="form.workWay" placeholder="请选择">
                            <el-option label="方式一" value="方式一" />
                            <el-option label="方式二" value="方式二" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            </div>
            <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>-->
            <div>
            <div class="homeCard">
            <el-row>
                <el-col :span="3"><el-button type="primary" size="default" @click="dialogAddWorker = true">添加作业人</el-button></el-col>
@@ -261,7 +216,8 @@
                </el-col>
            </el-row>
            </div>
            <div class="homeCard applyBtn">
            </div>
            <div class="applyBtn">
            <el-row>
                <el-col :span="24" class="submitBtn">
                    <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button>
@@ -327,7 +283,7 @@
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmitAddForm" size="default">确认</el-button>
                    <el-button type="primary" @click="onSubmitAddForm(ruleFormRef3)" size="default">确认</el-button>
                    <el-button size="default" @click="cancleAdd">取消</el-button>
                </el-form-item>
            </el-form>
@@ -429,11 +385,7 @@
                homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
            });
            const form = reactive({
                department: '',
                applyName: '',
                level: '',
                riskIdentify: '',
                workWay: '',
                addForm: {},
                workerList: [],
                workLocation: '',
                workTimeLine: '',
@@ -532,6 +484,7 @@
            const ruleFormRef2 = ref<FormInstance>()
            const ruleFormRef3 = ref<FormInstance>()
            const applyRules = reactive<FormRules>({
                extraForm: [{type: 'object', required: true,message: '此处不能为空'}],
                workLocation: [{required: true,message: '此处不能为空'}],
                workTimeLine: [{required: true,message: '此处不能为空'}],
                workContent: [{required: true,message: '此处不能为空'}],
@@ -542,7 +495,7 @@
                monitorStation: [{required: true,message: '此处不能为空'}],
                workhouseLeader: [{required: true,message: '此处不能为空'}],
                applyDate: [{required: true,message: '此处不能为空'}],
                otherSpecialWorks: [{required: true,message: '此处不能为空'}],
                otherSpecialWorks: [{type: 'array', required: true,message: '此处不能为空'}],
                protections: [{required: true,message: '此处不能为空'}],
                safetyMan: [{required: true,message: '此处不能为空'}],
                educated: [{required: true,message: '此处不能为空'}]
@@ -605,7 +558,7 @@
                if (!formEl) return
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        console.log('submit!')
                        console.log('submit',form)
                    } else {
                        console.log('error submit!', fields)
                    }
@@ -658,11 +611,20 @@
            background: #fff;
            border-radius: 4px;
            margin-bottom: 20px;

            &:last-of-type{
                margin-bottom: 100px;
            }
        }
        .applyBtn{
            position: absolute;
            width: 100%;
            padding: 20px;
            background: #fff;
            bottom: 0;
            left: 0;
            height: 80px;
            z-index: 999;
            margin-bottom: 0;
            border-radius: 0;
            box-shadow: 0 -3px 8px rgba(150,150,150,.1);