<template>
|
<div class="home-container">
|
<div style="height: 100%">
|
<el-form :model="form" label-width="120px" :rules="applyRules" ref="ruleFormRef">
|
<div class="homeCard">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="作业人" prop="operatorUids">
|
<el-select v-model="form.operatorUids" multiple>
|
<el-option v-for="item in workerList" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="作业等级" prop="workLevel">
|
<el-select v-model="form.workLevel">
|
<el-option v-for="item in workLevelList" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="作业时间" prop="workTimeLine">
|
<el-date-picker v-model="form.workTimeLine" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm:00" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
|
</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" autosize type="textarea" placeholder="请输入作业内容" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="作业地址" prop="workLocation">
|
<el-input v-model="form.workLocation" autosize type="textarea" placeholder="请输入作业地址" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="动火方式" prop="workDetail.hotMethod">
|
<el-input v-model="form.workDetail.hotMethod" autosize type="textarea" placeholder="请输入动火方式" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="关联作业" prop="workDetail.otherSpecialWork">
|
<el-select v-model="form.workDetail.otherSpecialWork" multiple>
|
<el-option v-for="item in otherWorkList" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
<div class="applyBtn">
|
<el-button type="primary" size="large" plain @click="submitForm(ruleFormRef)">发起申请</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted } 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';
|
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
|
|
interface stateType {
|
form: Object;
|
workerList: Array<any>;
|
workTypeList: Array<any>;
|
workLevelList: Array<any>;
|
otherWorkList: Array<any>;
|
}
|
export default defineComponent({
|
name: 'workTicket',
|
components: {},
|
setup() {
|
const userInfo = useUserInfo();
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({
|
form: {
|
operatorUids: [],
|
workType: 1,
|
workLevel: null,
|
workContent: '',
|
workLocation: '',
|
workDetail: {
|
hotMethod: '',
|
otherSpecialWork: []
|
},
|
workTimeLine: [],
|
expStartTime: '',
|
expEndTime: ''
|
},
|
workerList: [
|
{
|
label: '张三',
|
value: 53
|
},
|
{
|
label: '李四',
|
value: 54
|
},
|
{
|
label: '测试一',
|
value: 55
|
},
|
{
|
label: '测试二',
|
value: 56
|
}
|
],
|
workTypeList: [
|
{
|
label: '类型一',
|
value: 1
|
},
|
{
|
label: '类型二',
|
value: 2
|
}
|
],
|
workLevelList: [
|
{
|
label: '一级动火作业',
|
value: 1
|
},
|
{
|
label: '二级动火作业',
|
value: 2
|
},
|
{
|
label: '特级动火作业',
|
value: 3
|
}
|
],
|
otherWorkList: [
|
{
|
label: '动火作业',
|
value: 1
|
},
|
{
|
label: '受限空间作业',
|
value: 2
|
},
|
{
|
label: '吊装作业',
|
value: 3
|
},
|
{
|
label: '动土作业',
|
value: 4
|
},
|
{
|
label: '断路作业',
|
value: 5
|
},
|
{
|
label: '高处作业',
|
value: 6
|
},
|
{
|
label: '临时用电作业',
|
value: 7
|
},
|
{
|
label: '盲板抽堵作业',
|
value: 8
|
}
|
]
|
});
|
const ruleFormRef = ref<FormInstance>();
|
const applyRules = reactive<FormRules>({
|
operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
'workDetail.hotMethod': [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
|
'workDetail.otherSpecialWork': [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
|
});
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
await formEl.validate(async (valid, fields) => {
|
if (valid) {
|
state.form.expStartTime = JSON.parse(JSON.stringify(state.form.workTimeLine))[0];
|
state.form.expEndTime = JSON.parse(JSON.stringify(state.form.workTimeLine))[1];
|
let { workTimeLine, ...data } = JSON.parse(JSON.stringify(state.form));
|
data.workDetail.otherSpecialWork = data.workDetail.otherSpecialWork.join(',');
|
console.log(data, 'data');
|
const res = await workApplyApi().postFireApply(data);
|
if (res.data.code === '200') {
|
ElMessage({
|
type: 'success',
|
message: '提交成功！'
|
});
|
formEl.resetFields();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
} else {
|
console.log('error submit!', fields);
|
}
|
});
|
};
|
// 折线图
|
const renderMenu = async (value: string) => {
|
Session.set('projectId', value);
|
userInfos.value.projectId = value;
|
await initBackEndControlRoutes();
|
};
|
|
return {
|
renderMenu,
|
Search,
|
ruleFormRef,
|
applyRules,
|
submitForm,
|
...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, 0.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>
|
