nxdt-uniapp/pages/newProject/newContractor.vue

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

      <!-- 公司地址 -->
      <u-form-item label="单位地址" prop="consAddress" borderBottom required>
        <u-input
          v-model="formData.consAddress"
          placeholder="请输入单位地址"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="200"
        />
      </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="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="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="contractorPrincipal" borderBottom required>
        <u-input
          v-model="formData.contractorPrincipal"
          placeholder="请输入承包商负责人"
          border="none"
          inputAlign="right"
          fontSize="12"
          color="#0F274B"
          maxlength="20"
        />
      </u-form-item>

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

      <!-- 负责人身份证号 -->
      <u-form-item label="承包商负责人身份证" prop="contractorPrincipalIdCard" borderBottom required>
        <u-input
          v-model="formData.contractorPrincipalIdCard"
          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 { addConsUnit, checkIsExistConsName } from '@/api/project'
import { checkIdCardNumber } from '@/utils/regular'

export default {
  data() {
    return {
      formData: {
        // 承包商名称
        consName: '',
        // 法定代表人
        corporateName: '',
        // 社会征信统一代码
        socialUnifiedCreditCode: '',
        // 联系方式
        corporatePhone: '',
        // 公司地址
        consAddress: '',
        // 承包商负责人姓名
        contractorPrincipal: '',
        // 负责人联系方式
        contractorPrincipalPhone: '',
        // 负责人身份证号
        contractorPrincipalIdCard: ''
      },
      rules: {
        consName: [{ 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' }
        ],
        consAddress: [{ required: true, message: '请输入单位地址', trigger: 'blur' }],
        contractorPrincipal: [{ required: true, message: '请输入承包商负责人姓名', trigger: 'blur' }],
        contractorPrincipalPhone: [
          { required: true, message: '请输入负责人联系方式', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        contractorPrincipalIdCard: [
          { required: true, message: '请输入负责人身份证号', trigger: 'blur' },
          {
            validator: checkIdCardNumber,
            message: '请输入正确的身份证号',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    // 承包商名称是否存在
    checkIsExistConsName() {
      checkIsExistConsName({ consName: this.formData.consName }).catch(err => {
        console.log('🚀 ~ checkIsExistConsName ~ err:', err)
        this.formData.consName = ''
      })
    },
    // 提交表单
    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: '加载中'
        })
        addConsUnit(this.formData)
          .then(res => {
            console.log('addConsUnit', res)
            if (res.code === 200) {
              uni.showToast({
                title: '操作成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
                uni.hideLoading()
                this.isLoading = false
              }, 1000)
            }
          })
          .catch(err => {
            console.log('🚀 ~ addConsUnit ~ err:', err)
            uni.hideLoading()
            this.isLoading = false
          })
      })
    }
  }
}
</script>

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