qa-prevention-xgf-app/pages/eight_assignments/hoisting/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="CORP_NAME" borderBottom required>
          <u-input v-model="form.CORP_NAME" border="none" readonly />
        </u-form-item>
        <u-form-item label="吊装地点" prop="WORK_PLACE" borderBottom required>
          <u-input v-model="form.WORK_PLACE" border="none" />
        </u-form-item>
        <u-form-item label="吊具名称" prop="TOOL_NAME" borderBottom required>
          <u-input v-model="form.TOOL_NAME" border="none" />
        </u-form-item>
        <u-form-item label="吊装作业人" prop="WORK_USER" borderBottom required>
          <u-input v-model="form.WORK_USER" border="none" />
        </u-form-item>
        <u-form-item label="司索人" prop="SISUO_USER" borderBottom required>
          <u-input v-model="form.SISUO_USER" border="none" />
        </u-form-item>
        <u-form-item label="指挥人员" prop="PROJECT_MANAGER" borderBottom required>
          <u-input v-model="form.PROJECT_MANAGER" border="none" />
        </u-form-item>
        <u-form-item label="吊物质量（吨）" prop="PART_WEIGHT" borderBottom required>
          <u-input v-model="form.PART_WEIGHT" border="none" type="number" />
        </u-form-item>
        <u-form-item label="作业级别" prop="WORK_LEVEL_NAME" borderBottom required
          @click="fnSingleChoiceClick('WORK_LEVEL_NAME')">
          <u-input v-model="form.WORK_LEVEL_NAME" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="吊物内容" prop="WORK_CONTENT" borderBottom required labelPosition="top" labelWidth="auto">
          <u-textarea v-model="form.WORK_CONTENT" border="none" autoHeight maxlength="-1" />
        </u-form-item>
        <u-form-item label="作业开始时间" prop="WORK_START_DATE" borderBottom required
          @click="fnDateTimePickerClick('WORK_START_DATE')">
          <u-input v-model="form.WORK_START_DATE" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="作业结束时间" prop="WORK_END_DATE" borderBottom required
          @click="fnDateTimePickerClick('WORK_END_DATE')">
          <u-input v-model="form.WORK_END_DATE" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="地点坐标" borderBottom required>
          <u-button type="primary" size="small" text="定位" :customStyle="{ width: '100upx', margin: 0 }"
            @click="fnLocation" />
        </u-form-item>
        <u-form-item label="经度" prop="WORK_LONGITUDE" borderBottom required>
          <u-input v-model="form.WORK_LONGITUDE" border="none" readonly />
        </u-form-item>
        <u-form-item label="纬度" prop="WORK_LATITUDE" borderBottom required>
          <u-input v-model="form.WORK_LATITUDE" border="none" readonly />
        </u-form-item>
        <u-form-item label="关联的其他特殊作业及安全作业票编号" prop="SPECIAL_WORK" borderBottom required labelPosition="top"
          labelWidth="auto">
          <u-button type="primary" size="mini" text="选择其它"
            :customStyle="{ position: 'absolute', top: '-46upx', right: '20upx', width: '150upx' }"
            @click="otherAssignmentsShow = true" />
          <u-textarea v-model="form.SPECIAL_WORK" border="none" autoHeight maxlength="-1" />
        </u-form-item>
        <u-form-item label="风险辨识结果" prop="RISK_IDENTIFICATION" borderBottom required labelPosition="top"
          labelWidth="auto">
          <u-button type="primary" size="mini" text="选择其它"
            :customStyle="{ position: 'absolute', top: '-46upx', right: '20upx', width: '150upx' }"
            @click="otherIdentificationShow = true" />
          <u-textarea v-model="form.RISK_IDENTIFICATION" border="none" autoHeight maxlength="-1" />
        </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="otherAssignmentsShow" v-model="form.SPECIAL_WORK" type="assignments" />
    <other-select :visible.sync="otherIdentificationShow" v-model="form.RISK_IDENTIFICATION" type="identification" />
  </view>
</template>

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

export default {
  components: {
    OtherSelect,
    Sign
  },
  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: 'CORP_NAME', key_id: 'CORP_ID', type: 0 },
        { name: '吊装地点', key_name: 'WORK_PLACE', type: 0 },
        { name: '吊具名称', key_name: 'TOOL_NAME', type: 0 },
        { name: '吊装作业人', key_name: 'WORK_USER', type: 0 },
        { name: '司索人', key_name: 'SISUO_USER', type: 0 },
        { name: '指挥人员', key_name: 'PROJECT_MANAGER', type: 0 },
        { name: '吊物质量（吨）', key_name: 'PART_WEIGHT', type: 0 },
        { name: '作业级别', key_name: 'WORK_LEVEL_NAME', key_id: 'WORK_LEVEL_ID', type: 0 },
        { name: '吊物内容', key_name: 'WORK_CONTENT', type: 0 },
        { name: '作业开始时间', key_name: 'WORK_START_DATE', type: 0 },
        { name: '作业结束时间', key_name: 'WORK_END_DATE', type: 0 },
        { name: '经度', key_name: 'WORK_LONGITUDE', type: 0 },
        { name: '纬度', key_name: 'WORK_LATITUDE', type: 0 },
        { name: '关联的其他特殊作业及安全作业票编号', key_name: 'SPECIAL_WORK', type: 0 },
        { name: '风险辨识结果', key_name: 'RISK_IDENTIFICATION', type: 0 },
      ],
      form: {
        APPLY_DEPARTMENT_ID: this.$store.getters.getUserInfo.DEPARTMENT_ID,
        APPLY_DEPARTMENT_NAME: this.$store.getters.getUserInfo.DEPARTMENT_NAME,
        APPLY_USER_ID: this.$store.getters.getUserInfo.USER_ID,
        APPLY_USER_NAME: this.$store.getters.getUserInfo.NAME,
        CORP_ID: '',
        CORP_NAME: '',
        WORK_PLACE: '',
        TOOL_NAME: '',
        WORK_USER: '',
        SISUO_USER: '',
        PROJECT_MANAGER: '',
        PART_WEIGHT: '',
        WORK_LEVEL_ID: '',
        WORK_LEVEL_NAME: '',
        WORK_CONTENT: '',
        WORK_START_DATE: '',
        WORK_END_DATE: '',
        WORK_LONGITUDE: '1',
        WORK_LATITUDE: '2',
        SPECIAL_WORK: '',
        RISK_IDENTIFICATION: '',
      },
      rules: {
        APPLY_DEPARTMENT_ID: [{ type: 'string', required: true, message: '请选择申请单位', trigger: ['blur', 'change'] }],
        APPLY_USER_NAME: [{ type: 'string', required: true, message: '请选择申请人', trigger: ['blur', 'change'] }],
        CORP_NAME: [{ type: 'string', required: true, message: '请选择作业分公司', trigger: ['blur', 'change'] }],
        WORK_PLACE: [{ type: 'string', required: true, message: '请输入吊装地点', trigger: ['blur', 'change'] }],
        TOOL_NAME: [{ type: 'string', required: true, message: '请输入吊具名称', trigger: ['blur', 'change'] }],
        WORK_USER: [{ type: 'string', required: true, message: '请输入吊装作业人', trigger: ['blur', 'change'] }],
        SISUO_USER: [{ type: 'string', required: true, message: '请输入司索人', trigger: ['blur', 'change'] }],
        PROJECT_MANAGER: [{ type: 'string', required: true, message: '请输入指挥人员', trigger: ['blur', 'change'] }],
        PART_WEIGHT: [{ type: 'string', required: true, message: '请输入吊物质量（吨）', trigger: ['blur', 'change'] }],
        WORK_LEVEL_NAME: [{ type: 'string', required: true, message: '请选择作业级别', trigger: ['blur', 'change'] }],
        WORK_CONTENT: [{ type: 'string', required: true, message: '请输入吊物内容', trigger: ['blur', 'change'] }],
        WORK_START_DATE: [{ type: 'string', required: true, message: '请选择作业开始时间', trigger: ['blur', 'change'] }],
        WORK_END_DATE: [{ type: 'string', required: true, message: '请选择作业结束时间', trigger: ['blur', 'change'] }],
        WORK_LONGITUDE: [{ type: 'string', required: true, message: '请输入经度', trigger: ['blur', 'change'] }],
        WORK_LATITUDE: [{ type: 'string', required: true, message: '请输入纬度', trigger: ['blur', 'change'] }],
        SPECIAL_WORK: [{
          type: 'string',
          required: true,
          message: '请输入关联的其他特殊作业及安全作业票编号',
          trigger: ['blur', 'change']
        }],
        RISK_IDENTIFICATION: [{
          type: 'string',
          required: true,
          message: '请输入风险辨识结果',
          trigger: ['blur', 'change']
        }],
      },
      picker: {
        show: false,
        columns: [],
        key: 'NAME',
        type: 'picker',
        defaultIndex: [] // 这里存储默认选中的项,是一个数组,默认情况下为空数组,当 picker 选择器选择后,该状态会发生变化,以及调用 fnGetData 方法获取数据进行回显时,该状态会发生变化
      },
      dateTimePicker: {
        show: false,
        value: Number(new Date()),
        min: new Date().getTime(),
        mode: 'datetime',
        type: 'datetime-picker'
      },
      otherAssignmentsShow: false,
      otherIdentificationShow: false,
      /** 存储作业级别选中态 */
      workLevelNameArr: [],
    }
  },
  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;
            // 这里去单独判断 FK_NAME 字段是否为 [作业级别], 若为 [作业级别] 的话, 则设置 u-picker 组件的 defaultIndex属性,
            // 实现点击修改后, 再次点击作业级别的选择器后,选择去会默认选中指定下拉项
            // 具体的 u-picker 组件的 defaultIndex 属性的使用可见以下链接查看:
            // https://uviewui.com/components/picker.html#%E9%BB%98%E8%AE%A4%E5%80%BC
            if (sos.FK_NAME === 'WORK_LEVEL_ID') {
              this.workLevelNameArr = [Number(sos.FK_VALUE)];
            }
          }
        })
      }
    },
    fnSingleChoiceClick(event) {
      this.picker.type = event
      if (event === 'WORK_LEVEL_NAME') {
        this.picker.columns = [[
          { NAME: 'I级高处作业', ID: '0' },
          { NAME: 'II级高处作业', ID: '1' },
          { NAME: 'III级高处作业', ID: '2' },
          { NAME: 'IV级高处作业', ID: '3' },
        ]];
        if (this.workLevelNameArr.length > 0) this.picker.defaultIndex = this.workLevelNameArr;
      }
      this.picker.show = true
    },
    fnSingleChoiceConfirm(event) {
      if (this.picker.type === 'WORK_LEVEL_NAME') {
        this.form.WORK_LEVEL_ID = event.value[0].ID
        this.form.WORK_LEVEL_NAME = event.value[0].NAME
        this.picker.defaultIndex = event.indexs; // 当 picker 选择器选择后,改变 this.picker.defaultIndex 的状态信息
      }
      this.fnSingleChoiceCancel()
    },
    fnSingleChoiceCancel() {
      this.picker.show = false
    },
    fnDateTimePickerClick(event) {
      this.dateTimePicker.type = event
      this.dateTimePicker.value = Number(new Date(this.form[event])) || Number(new Date())
      this.dateTimePicker.show = true
    },
    fnDateTimePickerConfirm(event) {
      this.form[this.dateTimePicker.type] = uni.$u.timeFormat(event.value, 'yyyy-mm-dd hh:MM')
      this.fnDateTimePickerCancel()
    },
    fnDateTimePickerCancel() {
      this.dateTimePicker.show = false
    },
    fnLocation() {
      uni.navigateTo({
        url: '/pages/map/index',
        events: {
          acceptLocationData: (event) => {
            this.form.WORK_LONGITUDE = event.data.longitue;
            this.form.WORK_LATITUDE = event.data.latitude;
          }
        },
      })
    },
    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>