bug

Your Name

2022-08-19 61aa46c5c464eb3c2b6674173cd854e1c9afd7ae

 src/views/specialWorkSystem/workApplyManage/workTicket/index.vue

@@ -1,317 +1,279 @@
<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>
    <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 } 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';
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>({
            operatorUid: [{ 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();
        };

   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>({
            operatorUid: [{ 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),
         };
      },
   });
        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,.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;
      }
   }
.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>