qa-prevention-xgf-app/pages/eight_assignments/hot_work/gas/add.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="ANALYZE_TIME" borderBottom required @click="fnDateTimePickerClick('ANALYZE_TIME')">
          <u-input v-model="form.ANALYZE_TIME" border="none" readonly />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="分析点名称" prop="ANALYZE_PLACE" borderBottom required>
          <u-input v-model="form.ANALYZE_PLACE" border="none" />
        </u-form-item>
        <u-form-item label="分析数据(%LEL)" prop="ANALYZE_RESULT" borderBottom required>
          <u-input v-model="form.ANALYZE_RESULT" border="none" type="number" placeholder="0" />
          <view class="title">(%LEL)</view>
        </u-form-item>
        <u-form-item label="分析人" prop="ANALYZE_USER_NAME" borderBottom required>
          <u-input v-model="form.ANALYZE_USER_NAME" border="none" />
        </u-form-item>
      </u-form>
      <view class="mt-10">
        <u-button type="primary" text="保存" @click="$u.debounce(fnSubmit, 1000, true)" />
      </view>
    </view>

    <u-datetime-picker :show="dateTimePicker.show" v-model="dateTimePicker.value" :mode="dateTimePicker.mode"
      :maxDate="dateTimePicker.max" :key="dateTimePicker.type" @confirm="fnDateTimePickerConfirm"
      @cancel="fnDateTimePickerCancel" />
  </view>
</template>

<script>
import { getHotWorkGasInfoSave } from "@/api";

export default {
  data() {
    return {
      form: {
        /** 动火分析时间 */
        ANALYZE_TIME: '',
        /** 分析点名称 */
        ANALYZE_PLACE: '',
        /** 分析数据(%LEL) */
        ANALYZE_RESULT: '',
        /** 分析人 */
        ANALYZE_USER_NAME: this.$store.getters.getUserInfo.NAME,
        ANALYZE_USER_ID: this.$store.getters.getUserInfo.USER_ID,
        EW_RU_TASK_ID:'',
        EW_RU_JOB_ID:'',
        TYPE: ''
      },
      rules: {
        ANALYZE_TIME: [{ type: 'string', required: true, message: '请选择动火分析时间', trigger: ['blur', 'change'] }],
        ANALYZE_PLACE: [{ type: 'string', required: true, message: '请输入分析点名称', trigger: ['blur', 'change'] }],
        ANALYZE_RESULT: [{ type: 'string', required: true, message: '请输入分析数据', trigger: ['blur', 'change'] }],
        ANALYZE_USER_NAME: [{ type: 'string', required: true, message: '请输入分析人', trigger: ['blur', 'change'] }],
      },
      dateTimePicker: {
        show: false,
        value: Number(new Date()),
        max: new Date().getTime(),
        mode: 'datetime',
        type: 'datetime-picker'
      },
    }
  },
  onLoad(query) {
    this.form.EW_RU_TASK_ID = query.EW_RU_TASK_ID
    this.TYPE = query.TYPE
    this.form.EW_RU_JOB_ID = query.EW_RU_JOB_ID
  },
  methods: {
    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
    },
    async fnSubmit() {
      try {
        await this.$refs.formRef.validate()
        try {
          await getHotWorkGasInfoSave({
             ...this.form
          })
          uni.$u.toast('保存成功')
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 2000)
        } catch {
        }
      } catch (e) {
        uni.$u.toast('请补全必填项')
      }
    }
  }
}
</script>

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