添加页面组件

Admin

2022-07-07 eb706c505406a6a38ca396ad73262f364badea7e

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

文件名从 src/views/specialWorkSystem/workApplyManagement/workApply/index.vue 修改
@@ -1,8 +1,9 @@
<template>
   <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-form :model="form" label-width="150px">
         <el-row>
            <el-col :span="8">
               <el-form-item label="申请部门">
@@ -54,6 +55,8 @@
               </el-form-item>
            </el-col>
         </el-row>
         </div>
         <div class="homeCard">
         <el-row>
            <el-col :span="3"><el-button type="primary" size="default" @click="dialogAddWorker = true">添加作业人</el-button></el-col>
            <el-col :span="21">
@@ -74,7 +77,7 @@
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="作业地点">
               <el-form-item label="作业地点" prop="workLocation">
                  <el-input
                     v-model="form.workLocation"
                     placeholder="请输入"
@@ -87,7 +90,7 @@
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="作业期限">
               <el-form-item label="作业期限" prop="workTimeLine">
                  <el-date-picker
                     v-model="form.workTimeLine"
                     type="daterange"
@@ -102,7 +105,7 @@
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="作业内容">
               <el-form-item label="作业内容" prop="workContent">
                  <el-input
                     v-model="form.workContent"
                     placeholder="请输入"
@@ -115,7 +118,7 @@
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="作业单位">
               <el-form-item label="作业单位" prop="workUnit">
                  <el-input
                     v-model="form.workUnit"
                     placeholder="请输入"
@@ -128,9 +131,9 @@
         </el-row>
         <el-row>
            <el-col :span="6">
               <el-form-item label="作业负责人">
               <el-form-item label="作业负责人" prop="responsor">
                  <el-input
                     v-model="form.responser"
                     v-model="form.responsor"
                     placeholder="请输入"
                     class="input-with-select"
                  >
@@ -141,7 +144,7 @@
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="监护人">
               <el-form-item label="监护人" prop="monitor">
                  <el-input
                     v-model="form.monitor"
                     placeholder="请输入"
@@ -154,7 +157,7 @@
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="监护人岗位">
               <el-form-item label="监护人岗位" prop="monitorStation">
                  <el-input
                     v-model="form.monitorStation"
                     placeholder="请输入"
@@ -169,7 +172,7 @@
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="生产车间负责人">
               <el-form-item label="生产车间负责人" prop="workhouseLeader">
                  <el-input
                     v-model="form.workhouseLeader"
                     placeholder="请输入"
@@ -182,7 +185,7 @@
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="申请日期">
               <el-form-item label="申请日期" prop="applyDate">
                  <el-date-picker
                     size="large"
                     v-model="form.applyDate"
@@ -193,10 +196,11 @@
               </el-form-item>
            </el-col>
         </el-row>
         <el-divider />
         </div>
         <div class="homeCard">
         <el-row>
            <el-col :span="24">
               <el-form-item label="涉及的其他特殊作业">
               <el-form-item label="涉及的其他特殊作业" prop="otherSpecialWorks">
                  <el-checkbox-group v-model="form.otherSpecialWorks">
                     <el-checkbox label="动火作业" />
                     <el-checkbox label="受限空间" />
@@ -213,7 +217,7 @@
         </el-row>
         <el-row>
            <el-col>
               <el-form-item label="防护用品">
               <el-form-item label="防护用品" prop="protections">
                  <el-cascader
                     v-model="form.protections"
                     :options="protectOption"
@@ -225,12 +229,12 @@
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="6"><el-button type="primary" size="default" @click="dialogAddFile = true">点击添加安全交底和风险告知书</el-button></el-col>
         <el-row style="justify-content: center">
            <el-button type="primary" size="default" @click="dialogAddFile = true">点击添加安全交底和风险告知书</el-button>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="实施安全教育人">
               <el-form-item label="实施安全教育人" prop="safetyMan">
                  <el-input
                     v-model="form.safetyMan"
                     placeholder="请输入"
@@ -243,7 +247,7 @@
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="被教育人">
               <el-form-item label="被教育人" prop="educated">
                  <el-input
                     v-model="form.educated"
                     placeholder="请输入"
@@ -256,17 +260,18 @@
               </el-form-item>
            </el-col>
         </el-row>
         <el-divider />
         </div>
         <div class="homeCard applyBtn">
         <el-row>
            <el-col :span="24" class="submitBtn">
               <el-button type="primary" size="large" plain>发起申请</el-button>
               <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button>
            </el-col>
         </el-row>
      </el-form>
      </div>
      </el-form>
      <el-dialog v-model="dialogAddWorker" title="添加作业人">
         <el-form :model="addWorkerForm" label-width="120px">
            <el-form-item label="作业人">
         <el-form :model="addWorkerForm" label-width="120px" :rules="addWorkerRules" ref='ruleFormRef3'>
            <el-form-item label="作业人" prop="worker">
               <el-input
                     v-model="addWorkerForm.worker"
                     placeholder="请输入"
@@ -277,7 +282,7 @@
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="作业人角色">
            <el-form-item label="作业人角色" prop="role">
               <el-input
                     v-model="addWorkerForm.role"
                     placeholder="请输入"
@@ -288,7 +293,7 @@
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="作业人角色">
            <el-form-item label="作业人角色" prop="unit">
               <el-input
                     v-model="addWorkerForm.unit"
                     placeholder="请输入"
@@ -299,7 +304,7 @@
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="证书名称">
            <el-form-item label="证书名称" prop="certificate">
               <el-input
                     v-model="addWorkerForm.certificate"
                     placeholder="请输入"
@@ -310,7 +315,7 @@
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="证书号">
            <el-form-item label="证书号" prop="certificateId">
               <el-input
                     v-model="addWorkerForm.certificateId"
                     placeholder="请输入"
@@ -385,7 +390,7 @@
</template>

<script lang="ts">
   import { toRefs, reactive, defineComponent, ref } from 'vue';
   import { toRefs, reactive, defineComponent, ref, defineAsyncComponent } from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
@@ -406,7 +411,17 @@

   }
   export default defineComponent({
      name: 'workApply',
      name: 'workApplyForm',
      components: {
         fireWorkForm: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/fireWorkForm.vue')),
         limitedSpaceForm: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/limitedSpaceForm.vue')),
         hangLoadForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/hangLoadForm.vue')),
         dirtWorkForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/dirtWorkForm.vue')),
         cutLineForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/cutLineForm.vue')),
         highWorkForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/highWorkForm.vue')),
         tempElectForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/tempElectForm.vue')),
         blindPanelForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManagement/workApplyForm/components/blindPanelForm.vue'))
      },
      setup() {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
@@ -424,7 +439,7 @@
            workTimeLine: '',
            workContent: '',
            workUnit: '',
            responser: '',
            responsor: '',
            monitor: '',
            workMonitor: '',
            monitorStation: '',
@@ -514,6 +529,31 @@
            }
         ]
         const ruleFormRef = ref<FormInstance>()
         const ruleFormRef2 = ref<FormInstance>()
         const ruleFormRef3 = ref<FormInstance>()
         const applyRules = reactive<FormRules>({
            workLocation: [{required: true,message: '此处不能为空'}],
            workTimeLine: [{required: true,message: '此处不能为空'}],
            workContent: [{required: true,message: '此处不能为空'}],
            workUnit: [{required: true,message: '此处不能为空'}],
            responsor: [{required: true,message: '此处不能为空'}],
            monitor: [{required: true,message: '此处不能为空'}],
            workMonitor: [{required: true,message: '此处不能为空'}],
            monitorStation: [{required: true,message: '此处不能为空'}],
            workhouseLeader: [{required: true,message: '此处不能为空'}],
            applyDate: [{required: true,message: '此处不能为空'}],
            otherSpecialWorks: [{required: true,message: '此处不能为空'}],
            protections: [{required: true,message: '此处不能为空'}],
            safetyMan: [{required: true,message: '此处不能为空'}],
            educated: [{required: true,message: '此处不能为空'}]
         })
         const addWorkerRules = reactive<FormRules>({
            worker: [{required: true,message: '此处不能为空'}],
            role: [{required: true,message: '此处不能为空'}],
            unit: [{required: true,message: '此处不能为空'}],
            certificate: [{required: true,message: '此处不能为空'}],
            certificateId: [{required: true,message: '此处不能为空'}]
         })
         const saftyFileRules = reactive<FormRules>({
            surrounding: [{required: true,message: '该选项不能为空'}],
            risk: [{required: true,message: '该选项不能为空'}],
@@ -524,7 +564,10 @@
            console.log(value)
         }

         const onSubmitAddForm = () => {
         const onSubmitAddForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
               if (valid) {
            form.workerList.push(addWorkerForm.value)
            addWorkerForm.value = {
               worker: '',
@@ -534,6 +577,10 @@
               certificateId: ''
            }
            dialogAddWorker.value = false
               } else {
                  console.log('error submit!', fields)
               }
            })
         }
         const onSubmitAddFile = () =>{

@@ -554,6 +601,16 @@
         const deleteRow = (index) =>{
            form.workerList.splice( index,1)
         }
         const handleApply = async (formEl: FormInstance | undefined) =>{
            if (!formEl) return
            await formEl.validate((valid, fields) => {
               if (valid) {
                  console.log('submit!')
               } else {
                  console.log('error submit!', fields)
               }
            })
         }
         // 折线图
         const renderMenu = async (value: string) => {
            Session.set('projectId',value)
@@ -571,7 +628,12 @@
            addWorkerForm,
            saftyFileForm,
            ruleFormRef,
            ruleFormRef2,
            ruleFormRef3,
            addWorkerRules,
            saftyFileRules,
            applyRules,
            handleApply,
            cancleAddFile,
            deleteRow,
            cancleAdd,
@@ -589,21 +651,27 @@
      height: 100%;
      overflow: hidden;
      padding: 20px;
      position: relative;
      .homeCard{
         width: 100%;
         padding: 20px;
         background: #fff;
         border-radius: 4px;
         margin-bottom: 20px;
      }
      .applyBtn{
         position: absolute;
         bottom: 0;
         left: 0;
         margin-bottom: 0;
         border-radius: 0;
         box-shadow: 0 -3px 8px rgba(150,150,150,.1);
      }
      .el-row{
         margin-bottom: 20px;
      }
      .el-row:last-child {
         margin-bottom: 0;
      }
      .el-col{
         align-items: center;
         margin-bottom: 10px;
      }
      .el-input{
         width: 100% !important;