'风险'

Your Name

2022-07-05 39d90ac360f55f8835920c6e12e5cd1e4246bdcc

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

@@ -1,6 +1,8 @@
<template>
   <div class="home-container">
      <el-form :model="form" label-width="120px">
      <el-scrollbar height="100%">
      <div class="homeCard">
      <el-form :model="form" label-width="150px">
         <el-row>
            <el-col :span="8">
               <el-form-item label="申请部门">
@@ -12,10 +14,15 @@
            </el-col>
            <el-col :span="8">
               <el-form-item label="申请人">
                  <el-select v-model="form.applyName" placeholder="请选择">
                     <el-option label="胡海涛" value="胡海涛" />
                     <el-option label="其他人" value="其他人" />
                  </el-select>
                  <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>
@@ -48,11 +55,332 @@
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="8">
               <el-button type="primary" size="default">添加作业人</el-button>
            <el-col :span="3"><el-button type="primary" size="default" @click="dialogAddWorker = true">添加作业人</el-button></el-col>
            <el-col :span="21">
               <el-table :data="form.workerList" style="width: 100%">
                  <el-table-column type="index" label="序号" width="100"/>
                  <el-table-column prop="worker" label="作业人"/>
                  <el-table-column prop="role" label="作业人角色" width="180" />
                  <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="操作">
                     <template #default="scope">
                        <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">删除</el-button>
                     </template>
                  </el-table-column>
               </el-table>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="作业地点">
                  <el-input
                     v-model="form.workLocation"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>
                        <el-button :icon="Search" />
                     </template>
                  </el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="作业期限">
                  <el-date-picker
                     v-model="form.workTimeLine"
                     type="daterange"
                     unlink-panels
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                     :shortcuts="shortcuts"
                  />
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="12">
               <el-form-item label="作业内容">
                  <el-input
                     v-model="form.workContent"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>
                        <el-button :icon="Search" />
                     </template>
                  </el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="作业单位">
                  <el-input
                     v-model="form.workUnit"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>选择作业单位</template>
                  </el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col :span="6">
               <el-form-item label="作业负责人">
                  <el-input
                     v-model="form.responser"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>
                        <el-button :icon="Search" />
                     </template>
                  </el-input>
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="监护人">
                  <el-input
                     v-model="form.monitor"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>
                        <el-button :icon="Search" />
                     </template>
                  </el-input>
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="监护人岗位">
                  <el-input
                     v-model="form.monitorStation"
                     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="12">
               <el-form-item label="生产车间负责人">
                  <el-input
                     v-model="form.workhouseLeader"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>
                        <el-button :icon="Search" />
                     </template>
                  </el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="申请日期">
                  <el-date-picker
                     size="large"
                     v-model="form.applyDate"
                     type="date"
                     placeholder="请选择"
                     style="width: 100%"
                  ></el-date-picker>
               </el-form-item>
            </el-col>
         </el-row>
         <el-divider />
         <el-row>
            <el-col :span="24">
               <el-form-item label="涉及的其他特殊作业">
                  <el-checkbox-group v-model="form.otherSpecialWorks">
                     <el-checkbox label="动火作业" />
                     <el-checkbox label="受限空间" />
                     <el-checkbox label="高处作业" />
                     <el-checkbox label="吊装作业" />
                     <el-checkbox label="临时用电" />
                     <el-checkbox label="设备检修" />
                     <el-checkbox label="盲板抽堵" />
                     <el-checkbox label="断路作业" />
                     <el-checkbox label="动土作业" />
                  </el-checkbox-group>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row>
            <el-col>
               <el-form-item label="防护用品">
                  <el-cascader
                     v-model="form.protections"
                     :options="protectOption"
                     :props="{expandTrigger: 'hover'}"
                     @change="protectionsChange"
                     placeholder="请选择"
                     style="width: 100%"
                  />
               </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>
         <el-row>
            <el-col :span="12">
               <el-form-item label="实施安全教育人">
                  <el-input
                     v-model="form.safetyMan"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>
                        <el-button :icon="Search" />
                     </template>
                  </el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="被教育人">
                  <el-input
                     v-model="form.educated"
                     placeholder="请输入"
                     class="input-with-select"
                  >
                     <template #append>
                        <el-button :icon="Search" />
                     </template>
                  </el-input>
               </el-form-item>
            </el-col>
         </el-row>
         <el-divider />
         <el-row>
            <el-col :span="24" class="submitBtn">
               <el-button type="primary" size="large" plain>发起申请</el-button>
            </el-col>
         </el-row>
      </el-form>
      </div>
      <el-dialog v-model="dialogAddWorker" title="添加作业人">
         <el-form :model="addWorkerForm" label-width="120px">
            <el-form-item label="作业人">
               <el-input
                     v-model="addWorkerForm.worker"
                     placeholder="请输入"
                     class="input-with-select"
               >
                  <template #append>
                     <el-button :icon="Search" />
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="作业人角色">
               <el-input
                     v-model="addWorkerForm.role"
                     placeholder="请输入"
                     class="input-with-select"
               >
                  <template #append>
                     <el-button :icon="Search" />
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="作业人角色">
               <el-input
                     v-model="addWorkerForm.unit"
                     placeholder="请输入"
                     class="input-with-select"
               >
                  <template #append>
                     <el-button :icon="Search" />
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="证书名称">
               <el-input
                     v-model="addWorkerForm.certificate"
                     placeholder="请输入"
                     class="input-with-select"
               >
                  <template #append>
                     <el-button :icon="Search" />
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item label="证书号">
               <el-input
                     v-model="addWorkerForm.certificateId"
                     placeholder="请输入"
                     class="input-with-select"
               >
                  <template #append>
                     <el-button :icon="Search" />
                  </template>
               </el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="onSubmitAddForm" size="default">确认</el-button>
               <el-button size="default" @click="cancleAdd">取消</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
      <el-dialog v-model="dialogAddFile" title="安全交底和风险告知">
         <el-form :model="saftyFileForm" label-width="0" ref="ruleFormRef" :rules="saftyFileRules">
            <el-form-item label="" prop="surrounding">
               <div>1.作业许可范围及作业环境：</div>
               <el-input
                     v-model="saftyFileForm.surrounding"
                     :rows="2"
                     type="textarea"
                     placeholder="请输入"
               />
            </el-form-item>
            <el-form-item label="" prop="risk">
               <div>2.作业风险：</div>
               <el-input
                     v-model="saftyFileForm.risk"
                     :rows="2"
                     type="textarea"
                     placeholder="请输入"
               />
            </el-form-item>
            <el-form-item label="" prop="protection">
               <div>3.防范措施（工艺、设备、个体防护等）:</div>
               <el-input
                     v-model="saftyFileForm.protection"
                     :rows="2"
                     type="textarea"
                     placeholder="请输入"
               />
            </el-form-item>
            <el-form-item label="" prop="emergency">
               <div>4.应急措施:</div>
               <el-input
                     v-model="saftyFileForm.emergency"
                     :rows="2"
                     type="textarea"
                     placeholder="请输入"
               />
            </el-form-item>
            <el-form-item label="" prop="otherStuff">
               <div>5.其他注意事项:</div>
               <el-input
                     v-model="saftyFileForm.otherStuff"
                     :rows="2"
                     type="textarea"
                     placeholder="请输入"
               />
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="onSubmitAddFile(ruleFormRef)" size="default">确认</el-button>
               <el-button size="default" @click="cancleAddFile">取消</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
   </el-scrollbar>
   </div>
</template>

@@ -62,6 +390,8 @@
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
   import { Session } from '/@/utils/storage';
   import { Search } from '@element-plus/icons-vue'
   import type { FormInstance, FormRules } from 'element-plus'
   let global: any = {
      homeChartOne: null,
      homeChartTwo: null,
@@ -88,11 +418,141 @@
            applyName: '',
            level: '',
            riskIdentify: '',
            workWay: ''
            workWay: '',
            workerList: [],
            workLocation: '',
            workTimeLine: '',
            workContent: '',
            workUnit: '',
            responser: '',
            monitor: '',
            workMonitor: '',
            monitorStation: '',
            workhouseLeader: '',
            applyDate: '',
            otherSpecialWorks: [],
            protections: '',
            saftyFile: {},
            safetyMan: '',
            educated: ''
         })
         const dialogAddWorker = ref(false)
         const dialogAddFile = ref(false)
         const addWorkerForm = ref({
            worker: '',
            role: '',
            unit: '',
            certificate: '',
            certificateId: ''
         })
         const saftyFileForm = reactive({
            surrounding: '',
            risk: '',
            protection: '',
            emergency: '',
            otherStuff: ''
         })
         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 protectOption = [
            {
               value: 'guide',
               label: 'Guide',
               children: [
                  {
                     value: 'disciplines',
                     label: 'Disciplines',
                     children: [
                        {
                           value: 'consistency',
                           label: 'Consistency',
                        },
                        {
                           value: 'feedback',
                           label: 'Feedback',
                        }
                     ],
                  },
                  {
                     value: 'navigation',
                     label: 'Navigation',
                     children: [
                        {
                           value: 'side nav',
                           label: 'Side Navigation',
                        }
                     ],
                  },
               ],
            }
         ]
         const ruleFormRef = ref<FormInstance>()
         const saftyFileRules = reactive<FormRules>({
            surrounding: [{required: true,message: '该选项不能为空'}],
            risk: [{required: true,message: '该选项不能为空'}],
            protection: [{required: true,message: '该选项不能为空'} ],
            emergency: [{required: true,message: '该选项不能为空'} ]
         })
         const protectionsChange = (value) => {
            console.log(value)
         }

         const onSubmit = () => {
            console.log('submit!')
         const onSubmitAddForm = () => {
            form.workerList.push(addWorkerForm.value)
            addWorkerForm.value = {
               worker: '',
               role: '',
               unit: '',
               certificate: '',
               certificateId: ''
            }
            dialogAddWorker.value = false
         }
         const onSubmitAddFile = () =>{

         }
         const cancleAdd = ()=> {
            addWorkerForm.value = {
               worker: '',
               role: '',
               unit: '',
               certificate: '',
               certificateId: ''
            }
            dialogAddWorker.value = false
         }
         const cancleAddFile = ()=>{

         }
         const deleteRow = (index) =>{
            form.workerList.splice( index,1)
         }
         // 折线图
         const renderMenu = async (value: string) => {
@@ -103,7 +563,21 @@
         return {
            renderMenu,
            form,
            onSubmit,
            Search,
            shortcuts,
            protectOption,
            dialogAddWorker,
            dialogAddFile,
            addWorkerForm,
            saftyFileForm,
            ruleFormRef,
            saftyFileRules,
            cancleAddFile,
            deleteRow,
            cancleAdd,
            onSubmitAddForm,
            onSubmitAddFile,
            protectionsChange,
            ...toRefs(state),
         };
      },
@@ -111,10 +585,16 @@
</script>

<style scoped lang="scss">
   $homeNavLengh: 8;
   .home-container {
      height: 100%;
      overflow: hidden;
      padding: 40px;
      padding: 20px;
      .homeCard{
         width: 100%;
         padding: 20px;
         background: #fff;
         border-radius: 4px;
      }
      .el-row{
         margin-bottom: 20px;
      }
@@ -122,9 +602,24 @@
         margin-bottom: 0;
      }
      .el-col{
         display: flex;
         align-items: center;
         margin-bottom: 10px;
      }
      .el-input{
         width: 100% !important;
      }
      .el-date-editor::v-deep{
         width: 100%;
      }
      .el-select{
         width: 100%;
      }
      .el-cascader{
         width: 100% !important;
      }
      .submitBtn{
         display: flex;
         justify-content: center;
      }
   }
</style>