qa-prevention-xgf-app/pages/door_access_control/vehicle_info/add.vue

<template>
  <view class="content">
    <view class="card" style="padding-left: 20px;">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="140px">
        <u-form-item label="车牌类型" prop="LICENCE_TYPE" borderBottom required
                     @click="fnSingleChoiceClick('LICENCE_TYPE')">
          <u-input v-model="form.LICENCE_TYPE_NAME" border="none" readonly input-align="right"/>
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="车牌号" prop="LICENCE_NO" borderBottom required>
          <u-input v-model="form.LICENCE_NO" border="none" :readonly="!!VEHICLE_ID" input-align="right"/>
        </u-form-item>
        <u-form-item label="车辆类型" prop="VEHICLE_TYPE" borderBottom required
                     @click="fnSingleChoiceClick('VEHICLE_TYPE')">
          <u-input v-model="form.VEHICLE_TYPE_NAME" border="none" readonly input-align="right"/>
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <app-department label="车辆所属部门" :id.sync="form.DEPARTMENT_ID" :name.sync="form.DEPARTMENT_NAME"
                        :form.sync="form" prop="DEPARTMENT_ID" clear-key="USER_NAME,USER_ID"/>
        <app-personnel :id.sync="form.USER_ID" :name.sync="form.USER_NAME" :department-id="form.DEPARTMENT_ID"
                       prop="USER_ID" label="负责人"/>
        <app-time v-model="form.VISIT_START_TIME" prop="VISIT_START_TIME" label="有效期开始"/>
        <app-time v-model="form.VISIT_END_TIME" prop="VISIT_END_TIME" label="有效期结束"/>
        <app-department label="审核部门" :id.sync="form.AUDITOR_DEPARTMENT_ID" :name.sync="form.AUDITOR_DEPARTMENT_NAME"
                        prop="AUDITOR_DEPARTMENT_ID"/>
      </u-form>
      <view class="mt-10">
        <u-button type="primary" text="提交" @click="$u.debounce(fnSubmit, 1000, true)"/>
      </view>
    </view>
  </view>
</template>

<script>
import AppTime from "@/components/time/index.vue";
import AppDepartment from "@/components/department/index.vue";
import AppPersonnel from "@/components/personnel/index.vue";

export default {
  components: {
    AppTime,
    AppDepartment,
    AppPersonnel,
  },
  data() {
    return {
      VEHICLE_ID: '',
      VEHICLE_LICENSE_PLATE_TYPE_LIST: [
        {id: '0', name: "白牌"},
        {id: '1', name: "蓝牌"},
        {id: '2', name: "黄牌"},
        {id: '3', name: "绿牌"},
        {id: '4', name: "黑牌"},
      ],
      VEHICLE_TYPE_LIST: [{id: '1', name: "轿车"}],
      form: {
        LICENCE_TYPE: '',
        LICENCE_TYPE_NAME: '',
        LICENCE_NO: '',
        VEHICLE_TYPE: '',
        VEHICLE_TYPE_NAME: '',
        DEPARTMENT_ID: '',
        DEPARTMENT_NAME: '',
        USER_ID: '',
        USER_NAME: '',
        VISIT_START_TIME: '',
        VISIT_END_TIME: '',
        AUDITOR_DEPARTMENT_ID: '',
        AUDITOR_DEPARTMENT_NAME: '',
      },
      rules: {
        LICENCE_TYPE: [{type: 'string', required: true, message: '请选择车牌类型', trigger: ['blur', 'change']}],
        LICENCE_NO: [{type: 'string', required: true, message: '请输入车牌号', trigger: ['blur', 'change']}],
        VEHICLE_TYPE: [{type: 'string', required: true, message: '请选择车辆类型', trigger: ['blur', 'change']}],
        DEPARTMENT_ID: [{type: 'string', required: true, message: '请选择车辆所属部门', trigger: ['blur', 'change']}],
        USER_ID: [{type: 'string', required: true, message: '请选择负责人', trigger: ['blur', 'change']}],
        VISIT_START_TIME: [{type: 'string', required: true, message: '请选择有效期开始', trigger: ['blur', 'change']}],
        VISIT_END_TIME: [{type: 'string', required: true, message: '请选择有效期结束', trigger: ['blur', 'change']}],
        AUDITOR_DEPARTMENT_ID: [{type: 'string', required: true, message: '请选择审核部门', trigger: ['blur', 'change']}],
      },
      picker: {
        show: false,
        columns: [],
        key: 'name',
        type: 'picker',
        defaultIndex: []
      },
    }
  },
  onLoad(event) {
    this.VEHICLE_ID = event.VEHICLE_ID
    if (event.VEHICLE_ID) {
      uni.setNavigationBarTitle({
        title: "重新申请",
      });
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  methods: {
    fnSingleChoiceClick(event) {
      this.picker.type = event
      if (event === 'LICENCE_TYPE') {
        this.picker.columns = [this.VEHICLE_LICENSE_PLATE_TYPE_LIST]
      }
      if (event === 'VEHICLE_TYPE') {
        this.picker.columns = [this.VEHICLE_TYPE_LIST]
      }
      this.picker.show = true
    },
    fnSingleChoiceConfirm(event) {
      if (this.picker.type === 'LICENCE_TYPE') {
        this.form.LICENCE_TYPE = event.value[0].id
        this.form.LICENCE_TYPE_NAME = event.value[0].name
      }
      if (this.picker.type === 'VEHICLE_TYPE') {
        this.form.VEHICLE_TYPE = event.value[0].id
        this.form.VEHICLE_TYPE_NAME = event.value[0].name
      }
      this.fnSingleChoiceCancel()
    },
    fnSingleChoiceCancel() {
      this.picker.show = false
    },
    async fnSubmit() {
      try {
        await this.$refs.formRef.validate()
        const params = {
          ...this.form,
          DEPARTMENT_ID: this.userInfo.DEPARTMENT_ID,
          USER_ID: this.userInfo.USER_ID,
        }
        console.log(params)
      } catch {
        uni.$u.toast('请补全必填项')
      }
    }
  },
}
</script>

<style scoped lang="scss">

</style>