nxdt-uniapp/pages/newProject/newSupervision.vue

<template>
  <view>
    <Navbar title="新建监理" />
    <u-form
      class="form-container"
      labelPosition="left"
      :model="formData"
      :rules="rules"
      ref="uForm"
      labelWidth="120"
      :labelStyle="{ fontWeight: 400, fontSize: '12px', color: 'rgba(15, 39, 75, 0.6)' }"
    >
      <!-- 监理单位名称 -->
      <u-form-item label="监理单位名称" prop="unitName" borderBottom required>
        <u-input
          v-model="formData.unitName"
          placeholder="请输入监理单位名称"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="60"
          @blur="handleBlurUnitName"
        />
      </u-form-item>

      <!-- 法定代表人 -->
      <u-form-item label="法定代表人" prop="corporateName" borderBottom required>
        <u-input
          v-model="formData.corporateName"
          placeholder="请输入法定代表人"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="20"
        />
      </u-form-item>

      <!-- 社会征信统一代码 -->
      <u-form-item label="社会征信统一代码" prop="socialUnifiedCreditCode" borderBottom required>
        <u-input
          v-model="formData.socialUnifiedCreditCode"
          placeholder="请输入社会征信统一代码"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="18"
        />
      </u-form-item>

      <!-- 联系方式 -->
      <u-form-item label="法人联系方式" prop="corporatePhone" borderBottom required>
        <u-input
          v-model="formData.corporatePhone"
          placeholder="请输入法人联系方式"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="11"
        />
      </u-form-item>

      <!-- 公司地址 -->
      <u-form-item label="监理单位地址" prop="unitAddress" borderBottom required>
        <u-input
          v-model="formData.unitAddress"
          placeholder="请输入监理单位地址"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="200"
        />
      </u-form-item>

      <!-- 总监姓名 -->
      <u-form-item label="总监姓名" prop="directorsName" borderBottom required>
        <u-input
          v-model="formData.directorsName"
          placeholder="请输入总监姓名"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="20"
        />
      </u-form-item>

      <!-- 总监联系方式 -->
      <u-form-item label="总监联系方式" prop="directorsPhone" borderBottom required>
        <u-input
          v-model="formData.directorsPhone"
          placeholder="请输入总监联系方式"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="11"
        />
      </u-form-item>

      <!-- 总监身份证号 -->
      <u-form-item label="总监身份证号" prop="directorsIdCard" borderBottom required>
        <u-input
          v-model="formData.directorsIdCard"
          placeholder="请输入总监身份证号"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="18"
        />
      </u-form-item>

      <u-button type="primary" shape="circle" @click="submitForm" style="margin-top: 68px">保存</u-button>
    </u-form>
  </view>
</template>

<script>
import { addSupervisoryUnit, checkIsExistUnitName } from '@/api/project'
import { checkIdCardNumber } from '@/utils/regular'

export default {
  data() {
    return {
      isLoading: false,
      formData: {
        // 监理单位名称
        unitName: '',
        // 法定代表人
        corporateName: '',
        // 社会征信统一代码
        socialUnifiedCreditCode: '',
        // 联系方式
        corporatePhone: '',
        // 公司地址
        unitAddress: '',
        // 总监姓名
        directorsName: '',
        // 总监身份证号
        directorsIdCard: '',
        // 总监联系方式
        directorsPhone: ''
      },
      rules: {
        unitName: [{ required: true, message: '请输入监理单位名称', trigger: 'blur' }],
        corporateName: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
        socialUnifiedCreditCode: [{ required: true, message: '请输入社会征信统一代码', trigger: 'blur' }],
        corporatePhone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的联系方式', trigger: 'blur' }
        ],
        unitAddress: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
        directorsName: [{ required: true, message: '请输入总监姓名', trigger: 'blur' }],
        directorsIdCard: [
          { required: true, message: '请输入总监身份证号', trigger: 'blur' },
          {
            validator: checkIdCardNumber,
            message: '请输入正确的身份证号',
            trigger: ['blur', 'change']
          }
        ],
        directorsPhone: [
          { required: true, message: '请输入总监联系方式', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的联系方式', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    console.log('mounted-新建监理单位')
  },
  methods: {
    // 监理单位名称失焦
    handleBlurUnitName() {
      console.log('handleBlurUnitName')
      checkIsExistUnitName({ unitName: this.formData.unitName }).catch(err => {
        this.formData.unitName = ''
        console.log('🚀 ~ handleBlurUnitName ~ err:', err)
      })
    },
    // 提交表单
    submitForm() {
      console.log('submitForm')
      this.$refs.uForm.validate().then(valid => {
        if (this.isLoading) return
        this.isLoading = true
        console.log('🚀 ~ submitForm ~ valid:', valid)
        console.log('submitForm', this.formData)
        uni.showLoading({
          title: '加载中'
        })
        addSupervisoryUnit(this.formData)
          .then(res => {
            console.log('addSupervisoryUnit', res)
            if (res.code === 200) {
              uni.showToast({
                title: '新建成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
                uni.hideLoading()
                this.isLoading = false
              }, 1000)
            }
          })
          .catch(err => {
            console.log('🚀 ~ addSupervisoryUnit ~ err:', err)
            this.isLoading = false
            uni.hideLoading()
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  margin: 0 25px;
}
</style>