<template>
|
<div class="home-container">
|
<div style="height: 100%">
|
<el-form :model="form" label-width="150px" :rules="applyRules" ref="ruleFormRef2">
|
<!-- <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>
|
<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="操作" align="center" width="180">
|
<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="作业地点" prop="workLocation">
|
<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="作业期限" prop="workTimeLine">
|
<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="作业内容" prop="workContent">
|
<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="作业单位" prop="workUnit">
|
<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="8">
|
<el-form-item label="作业负责人" prop="responsor">
|
<el-input
|
v-model="form.responsor"
|
placeholder="请输入"
|
class="input-with-select"
|
>
|
<template #append>
|
<el-button :icon="Search" />
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="监护人" prop="monitor">
|
<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="8">
|
<el-form-item label="监护人岗位" prop="monitorStation">
|
<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="生产车间负责人" prop="workhouseLeader">
|
<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="申请日期" prop="applyDate">
|
<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>
|
</div>
|
<div class="homeCard">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="涉及的其他特殊作业" prop="otherSpecialWorks">
|
<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="防护用品" prop="protections">
|
<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 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="实施安全教育人" prop="safetyMan">
|
<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="被教育人" prop="educated">
|
<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>
|
</div>
|
</div>
|
</el-form>
|
<div class="applyBtn">
|
<el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button>
|
</div>
|
<el-dialog v-model="dialogAddWorker" title="添加作业人">
|
<el-form :model="addWorkerForm" label-width="120px" :rules="addWorkerRules" ref='ruleFormRef3'>
|
<el-form-item label="作业人" prop="worker">
|
<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="作业人角色" prop="role">
|
<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="作业人角色" prop="unit">
|
<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="证书名称" prop="certificate">
|
<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="证书号" prop="certificateId">
|
<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(ruleFormRef3)" 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>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref, defineAsyncComponent } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
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,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined],
|
};
|
|
interface stateType {
|
homeOne: Array <type>
|
}
|
interface type {
|
|
}
|
export default defineComponent({
|
name: 'workApplyForm',
|
components: {
|
fireWorkForm: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/fireWorkForm.vue')),
|
limitedSpaceForm: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/limitedSpaceForm.vue')),
|
hangLoadForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/hangLoadForm.vue')),
|
dirtWorkForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/dirtWorkForm.vue')),
|
cutLineForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/cutLineForm.vue')),
|
highWorkForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/highWorkForm.vue')),
|
tempElectForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/tempElectForm.vue')),
|
blindPanelForm: defineAsyncComponent(()=> import('/@/views/specialWorkSystem/workApplyManage/workApplyForm/components/blindPanelForm.vue'))
|
},
|
setup() {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({
|
homeOne:[{id:1,name:'安全基础信息系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
|
});
|
const form = reactive({
|
addForm: {},
|
workerList: [],
|
workLocation: '',
|
workTimeLine: '',
|
workContent: '',
|
workUnit: '',
|
responsor: '',
|
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 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: '此处不能为空'}],
|
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: [{type: 'array', 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: '该选项不能为空'}],
|
protection: [{required: true,message: '该选项不能为空'} ],
|
emergency: [{required: true,message: '该选项不能为空'} ]
|
})
|
const protectionsChange = (value) => {
|
console.log(value)
|
}
|
|
const onSubmitAddForm = async (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
form.workerList.unshift(addWorkerForm.value)
|
addWorkerForm.value = {
|
worker: '',
|
role: '',
|
unit: '',
|
certificate: '',
|
certificateId: ''
|
}
|
dialogAddWorker.value = false
|
} else {
|
console.log('error submit!', fields)
|
}
|
})
|
}
|
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 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) => {
|
console.log(valid,'and',isValid.value)
|
if (valid && isValid.value) {
|
console.log('submit',form,fields)
|
ElMessage({
|
message: '提交成功！',
|
type: 'success',
|
})
|
} else {
|
// console.log('error submit!',form,fields)
|
ElMessage({
|
message: '表单未填写完整',
|
type: 'error',
|
})
|
}
|
})
|
|
}
|
// 折线图
|
const renderMenu = async (value: string) => {
|
Session.set('projectId',value)
|
userInfos.value.projectId = value
|
await initBackEndControlRoutes();
|
};
|
return {
|
renderMenu,
|
form,
|
Search,
|
shortcuts,
|
protectOption,
|
dialogAddWorker,
|
dialogAddFile,
|
addWorkerForm,
|
saftyFileForm,
|
ruleFormRef,
|
ruleFormRef2,
|
ruleFormRef3,
|
additionalForm,
|
addWorkerRules,
|
saftyFileRules,
|
applyRules,
|
isValid,
|
handleApply,
|
cancleAddFile,
|
deleteRow,
|
cancleAdd,
|
onSubmitAddForm,
|
onSubmitAddFile,
|
protectionsChange,
|
...toRefs(state),
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
.homeCard{
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #fff;
|
border-radius: 4px;
|
margin-bottom: 20px;
|
}
|
.applyBtn{
|
width: 100%;
|
background: #fff;
|
height: 80px;
|
z-index: 5;
|
box-shadow: 0 -3px 8px rgba(150,150,150,.1);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep{
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
.el-cascader{
|
width: 100% !important;
|
}
|
}
|
</style>
|
