qa-prevention-xgf-app/pages/eight_assignments/hot_work/apply.vue

<template>
  <view class="content">
    <view class="card">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
        <u-form-item label="申请单位" prop="APPLY_DEPARTMENT_NAME" borderBottom required>
          <u-input v-model="form.APPLY_DEPARTMENT_NAME" border="none" readonly />
        </u-form-item>
        <u-form-item label="申请办理人" prop="APPLY_USER_NAME" borderBottom required>
          <u-input v-model="form.APPLY_USER_NAME" border="none" readonly />
        </u-form-item>
        <u-form-item label="作业编号" prop="JOB_NUMBER" borderBottom>
          <u-input v-model="form.JOB_NUMBER" border="none" placeholder="请输入作业编号" />
        </u-form-item>
        <u-form-item label="申请日期" prop="APPLICATION_DATE" borderBottom required
          @click="fnDateTimePickerClick('APPLICATION_DATE')">
          <u-input v-model="form.APPLICATION_DATE" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="作业类型" prop="JOB_TYPE_NAME" borderBottom required
          @click="fnSingleChoiceClick('JOB_TYPE_NAME')">
          <u-input v-model="form.JOB_TYPE_NAME" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="动火部位" prop="HOT_WORK_POSITION" borderBottom required>
          <u-input v-model="form.HOT_WORK_POSITION" border="none" placeholder="请输入动火部位" />
        </u-form-item>
        <u-form-item label="动火方法" prop="HOT_WORK_METHOD_ID" borderBottom labelPosition="top" labelWidth="auto">
          <u-button type="primary" size="mini" text="选择其它动火方法"
            :customStyle="{ position: 'absolute', top: '-46upx', right: '20upx', width: '180upx' }"
            @click="otherWorkMethodShow = true" />
          <u-textarea v-model="form.HOT_WORK_METHOD_ID" border="none" autoHeight maxlength="-1" />
        </u-form-item>
        <u-form-item label="动火等级" prop="HOT_WORK_LEVEL_INDEX" borderBottom required
          @click="fnSingleChoiceClick('HOT_WORK_LEVEL_INDEX')">
          <u-input v-model="form.HOT_WORK_LEVEL_INDEX" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="动火开始时间" prop="HOT_WORK_TIME_START" borderBottom required
          @click="fnDateTimePickerClick('HOT_WORK_TIME_START')">
          <u-input v-model="form.HOT_WORK_TIME_START" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="动火结束时间" prop="HOT_WORK_TIME_END" borderBottom required
          @click="fnDateTimePickerClick('HOT_WORK_TIME_END')">
          <u-input v-model="form.HOT_WORK_TIME_END" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="作业内容" prop="JOB_CONTENT" borderBottom required>
          <u-input v-model="form.JOB_CONTENT" border="none" placeholder="请输入作业内容" />
        </u-form-item>
        <u-form-item label="动火操作人" prop="USER_NAME" borderBottom required labelPosition="top" labelWidth="auto">
          <u-button type="primary" size="mini" text="添加"
            :customStyle="{ position: 'absolute', top: '-46upx', right: '20upx', width: '90upx' }"
            @click="otherUserNameSelectShow = true" />
          <u-textarea v-model="form.USER_NAME" border="none" autoHeight maxlength="-1" />
        </u-form-item>
        <u-form-item label="动火监火人" prop="SUPERVISOR_OF_HOT_WORK_UNIT" borderBottom required>
          <u-input v-model="form.SUPERVISOR_OF_HOT_WORK_UNIT" border="none" placeholder="请输入动火监火人" />
        </u-form-item>
        <u-form-item label="是否安全总监审批" prop="IS_SAFETY_DIRECTOR" borderBottom required>
          <u-radio-group v-model="form.IS_SAFETY_DIRECTOR" :customStyle="{ 'justify-content': 'flex-end' }">
            <u-radio label="是" name="1" />
            <u-radio :customStyle="{ marginLeft: '8px' }" label="否" name="0" />
          </u-radio-group>
        </u-form-item>
        <u-form-item label="是否需要气体检测" props="IS_GAS_TESTING" borderBottom required>
          <u-radio-group v-model="form.IS_GAS_TESTING" :customStyle="{ 'justify-content': 'flex-end' }">
            <u-radio label="是" name="1" />
            <u-radio :customStyle="{ marginLeft: '8px' }" label="否" name="0" />
          </u-radio-group>
        </u-form-item>
      </u-form>
      <view class="mt-10">
        <u-button type="primary" text="下一步" @click="$u.debounce(fnSubmit, 1000, true)" />
      </view>
    </view>
    <u-picker :show="picker.show" :columns="picker.columns" :keyName="picker.key" :key="picker.type"
      :defaultIndex="picker.defaultIndex" @confirm="fnSingleChoiceConfirm" @cancel="fnSingleChoiceCancel" />
    <u-datetime-picker :show="dateTimePicker.show" v-model="dateTimePicker.value" :mode="dateTimePicker.mode"
      :minDate="dateTimePicker.min" :key="dateTimePicker.type" @confirm="fnDateTimePickerConfirm"
      @cancel="fnDateTimePickerCancel" />
    <other-select :visible.sync="otherWorkMethodShow" v-model="form.HOT_WORK_METHOD_ID" type="hotWorkMethod" />
    <other-select :visible.sync="otherUserNameSelectShow" v-model="form.USER_NAME" type="userNameSelect" />
  </view>
</template>

<script>
import { getTaskInfo } from "@/api";
import OtherSelect from '@/components/other-select/index.vue';
import { setSubmitForm } from "@/utils/submitHomeworkProcess";

export default {
  components: { OtherSelect },

  data() {
    return {
      type: '',
      formItems: [
        { name: '申请单位', key_name: 'APPLY_DEPARTMENT_NAME', key_id: 'APPLY_DEPARTMENT_ID', type: 0 },
        { name: '申请办理人', key_name: 'APPLY_USER_NAME', key_id: 'APPLY_USER_ID', type: 0 },
        { name: '作业编号', key_name: 'JOB_NUMBER', key_id: 'JOB_NUMBER_ID', type: 0 },
        { name: '申请日期', key_name: 'APPLICATION_DATE', type: 0 },
        { name: '作业类型', key_name: 'JOB_TYPE_NAME', key_id: 'JOB_TYPE_ID', type: 0 },
        { name: '动火部位', key_name: 'HOT_WORK_POSITION', type: 0 },
        { name: '动火方法', key_name: 'HOT_WORK_METHOD_ID', type: 0 },
        { name: '动火等级', key_name: 'HOT_WORK_LEVEL_INDEX', key_id: 'HOT_WORK_LEVEL_ID', type: 0 },
        { name: '动火开始时间', key_name: 'HOT_WORK_TIME_START', type: 0 },
        { name: '动火结束时间', key_name: 'HOT_WORK_TIME_END', type: 0 },
        { name: '作业内容', key_name: 'JOB_CONTENT', type: 0 },
        { name: '动火操作人', key_name: 'USER_NAME', type: 0 },
        { name: '动火操作人', key_name: 'SUPERVISOR_OF_HOT_WORK_UNIT', type: 0 },
        { name: '是否安全总监审批', key_name: 'IS_SAFETY_DIRECTOR', type: 0 },
        { name: '是否需要气体检测', key_name: 'IS_GAS_TESTING', type: 0 },
      ],
      form: {
        // 申请单位
        APPLY_DEPARTMENT_NAME: this.$store.getters.getUserInfo.DEPARTMENT_NAME,
        // 申请办理人
        APPLY_USER_NAME: this.$store.getters.getUserInfo.NAME,
        // 作业编号
        JOB_NUMBER: '',
        // 申请日期
        APPLICATION_DATE: '',
        // 作业类型
        JOB_TYPE_ID: '',
        JOB_TYPE_NAME: '',
        // 动火部位
        HOT_WORK_POSITION: '',
        // 动火方法
        HOT_WORK_METHOD_ID: '',
        // 动火等级
        HOT_WORK_LEVEL_ID: '',
        HOT_WORK_LEVEL_INDEX: '',
        /** 动火开始时间 */
        HOT_WORK_TIME_START: '',
        /** 动火结束时间 */
        HOT_WORK_TIME_END: '',
        /** 作业内容 */
        JOB_CONTENT: '',
        /** 动火操作人 */
        USER_NAME: '',
        /** 动火监火人 */
        SUPERVISOR_OF_HOT_WORK_UNIT: '',
        /** 是否安全总监审批 */
        IS_SAFETY_DIRECTOR: '',
        /** 是否需要气体检测 */
        IS_GAS_TESTING: '',
      },
      rules: {
        APPLY_DEPARTMENT_NAME: [{ type: 'string', required: true, message: '请选择申请单位', trigger: ['blur', 'change'] }],
        APPLY_USER_NAME: [{ type: 'string', required: true, message: '请选择申请办理人', trigger: ['blur', 'change'] }],
        JOB_NUMBER: [{ type: 'string', required: false, message: '请输入作业编号', trigger: ['blur', 'change'] }],
        APPLICATION_DATE: [{ type: 'string', required: true, message: '请选择申请日期', trigger: ['blur', 'change'] }],
        JOB_TYPE_NAME: [{ type: 'string', required: true, message: '请选择作业类型', trigger: ['blur', 'change'] }],
        HOT_WORK_POSITION: [{ type: 'string', required: true, message: '请输入动火部位', trigger: ['blur', 'change'] }],
        HOT_WORK_METHOD_ID: [{ type: 'string', required: false, message: '请选择动火方法', trigger: ['blur', 'change'] }],
        HOT_WORK_LEVEL_INDEX: [{ type: 'string', required: true, message: '请选择动火等级', trigger: ['blue', 'change'] }],
        HOT_WORK_TIME_START: [{ type: 'string', required: true, message: '请选择动火开始时间', trigger: ['blur', 'change'] }],
        HOT_WORK_TIME_END: [{ type: 'string', required: true, message: '请选择动火结束时间', trigger: ['blur', 'change'] }],
        JOB_CONTENT: [{ type: 'string', required: true, message: '请输入作业内容', trigger: ['blur', 'change'] }],
        USER_NAME: [{ type: 'string', required: true, message: '请选择动火操作人', trigger: ['blur', 'change'] }],
        SUPERVISOR_OF_HOT_WORK_UNIT: [{ type: 'string', required: true, message: '请输入动火监火人', trigger: ['blur', 'change'] }],
        IS_SAFETY_DIRECTOR: [{ type: 'string', required: true, message: '请选择是否安全总监审批', trigger: ['blur', 'change'] }],
        IS_GAS_TESTING: [{ type: 'string', required: true, message: '请选择是否需要气体检测', trigger: ['blur', 'change'] }],
      },
      picker: {
        show: false,
        columns: [],
        key: 'NAME',
        type: 'picker',
        defaultIndex: []
      },
      dateTimePicker: {
        show: false,
        value: Number(new Date()),
        min: new Date().getTime(),
        mode: 'datetime',
        type: 'datetime-picker'
      },
      /** 其他动火方法选择器是否显示 */
      otherWorkMethodShow: false,
      /** 其他动火操作人选择器是否展示 */
      otherUserNameSelectShow: false,
      /** 存储作业类型选中态 */
      jobTypeNameArr: [],
      /** 存储动火等级选中态 */
      hotWorkLevelNameArr: []
    }
  },
  onLoad(options) {
    this.form.CORP_ID = options.CORPINFO_ID
    this.form.CORP_NAME = options.CORP_NAME
    this.type = options.type
    if (options.taskId) {
      this.fnGetData(options.taskId)
    }
  },
  methods: {
    async fnGetData(taskId) {
      let resData = await getTaskInfo({ EW_RU_TASK_ID: taskId })
      if (resData.list.form && resData.list.form.length > 0) {
        resData.list.form.forEach((sos, index) => {
          this.form[sos.ITEM_NAME] = sos.ITEM_VALUE;
          if (sos.FK_NAME) {
            this.form[sos.FK_NAME] = sos.FK_VALUE;
            if (sos.FK_NAME === "JOB_TYPE_ID") {
              this.jobTypeNameArr = [Number(sos.FK_VALUE)];
            }
            if (sos.FK_NAME === "HOT_WORK_LEVEL_ID") {
              this.hotWorkLevelNameArr = [Number(sos.FK_VALUE)];
            }
          }
        })
      }
    },
    fnDateTimePickerClick(event) {
      this.dateTimePicker.type = event
      this.dateTimePicker.value = Number(new Date(this.form[event])) || Number(new Date())
      this.dateTimePicker.show = true
    },
    fnSingleChoiceClick(event) {
      this.picker.type = event;
      if (event === 'JOB_TYPE_NAME') {
        this.picker.columns = [[{ ID: '0', NAME: '内部作业' }, { ID: '1', NAME: '相关方作业' }]]
        if (this.jobTypeNameArr.length > 0) this.picker.defaultIndex = this.jobTypeNameArr;
      };
      if (event === 'HOT_WORK_LEVEL_INDEX') {
        this.picker.columns = [[{ ID: '0', NAME: '特级' }, { ID: '1', NAME: '一级' }, { ID: '2', NAME: '二级' }, { ID: '3', NAME: '三级' }]]
        if (this.hotWorkLevelNameArr.length > 0) this.picker.defaultIndex = this.hotWorkLevelNameArr;
      }
      this.picker.show = true;
    },
    fnSingleChoiceConfirm(event) {
      if (this.picker.type === 'JOB_TYPE_NAME') {
        this.form.JOB_TYPE_ID = event.value[0].ID
        this.form.JOB_TYPE_NAME = event.value[0].NAME
        this.picker.defaultIndex = event.indexs
      }
      if (this.picker.type === 'HOT_WORK_LEVEL_INDEX') {
        this.form.HOT_WORK_LEVEL_ID = event.value[0].ID
        this.form.HOT_WORK_LEVEL_INDEX = event.value[0].NAME
        this.picker.defaultIndex = event.indexs
      }
      this.fnSingleChoiceCancel()
    },
    fnSingleChoiceCancel() {
      this.picker.show = false
    },
    fnDateTimePickerConfirm(event) {
      this.form[this.dateTimePicker.type] = uni.$u.timeFormat(event.value, 'yyyy-mm-dd hh:MM')
      this.fnDateTimePickerCancel()
    },
    fnDateTimePickerCancel() {
      this.dateTimePicker.show = false
    },
    fnDateTimePickerClick(event) {
      this.dateTimePicker.type = event
      this.dateTimePicker.value = Number(new Date(this.form[event])) || Number(new Date())
      this.dateTimePicker.show = true
    },
    /** 
     * 下一步所触发的按钮事件
    */
    async fnSubmit() {
      try {
        await this.$refs.formRef.validate()
        try {
          await setSubmitForm({
            form: this.form,
            formItems: this.formItems,
            TYPE: this.type,
            CORP_ID: this.form.CORP_ID
          })
        } catch { }
      } catch (err) {
        uni.$u.toast('请补全必填项')
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>