addEnterprise.vue 5.21 KB
<template>
  <div>
    <el-dialog :title="props.title" v-model="state.openDialog" width="800px" append-to-body destroy-on-close @close="handleClose(false)">

      <div class="mb20">请您提供所需查询企业的详细信息,我们将在两个工作日内完成信息核实,并主动与您取得联系!</div>
      <el-form ref="orderForm" :model="state.formModel" :rules="formRules" label-position="left" label-width="120px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="所属国家/地区" prop="countryName">
              <el-select v-model="state.formModel.countryName" placeholder="请选择国家" style="width: 100%" filterable clearable>
                <el-option v-for="(item, index) in state.countryList" :key="index" :label="item.gj" :value="item.gj"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input v-model="state.formModel.enterpriseName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="城市" prop="city">
              <el-input v-model="state.formModel.city"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业地址" prop="address">
              <el-input v-model="state.formModel.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮政编码" prop="postCode">
              <el-input v-model="state.formModel.postCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="state.formModel.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="state.formModel.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司注册号码" prop="regNo">
              <el-input v-model="state.formModel.regNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer v-if="props.isShowFooter">
        <span class="dialog-footer">
          <el-button @click="handleClose(false)">取消</el-button>
          <el-button type="primary" :loading="state.isSubmit" @click="handleSubmit">确定</el-button>
        </span>
      </template>

    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import * as api from '../../interface/api.ts'

let orderForm = ref<FormInstance>()
const emit = defineEmits(["handleClose"]);

let props = defineProps({
  title: {
    default: "",
    type: String
  },
  open: {
    default: false,
    type: Boolean
  },
  openName: {
    type: String,
    required: true,
    default: ""
  },
  isShowFooter: {
    default: true,
    type: Boolean
  }
})

let state = reactive({
  openDialog: false,
  formModel: {
    countryCodeWb: "",
    countryCodeRb: "",
    countryName: "",
    city: "",
    enterpriseName: "",
    address: "",
    postCode: "",
    email: "",
    phone: "",
    regNo: ""
  },
  isSubmit: false,
  countryList: []
}) as any;

let formRules = reactive<FormRules>({
  countryName: [
    { required: true, message: "所属国家/地区不能为空", trigger: ["blur","change"] }
  ],
  enterpriseName: [
    { required: true, message: "企业名称不能为空", trigger: ["blur","change"] }
  ],
  city: [
    { required: true, message: "城市不能为空", trigger: ["blur","change"] }
  ],
  address: [
    { required: true, message: "企业地址不能为空", trigger: ["blur","change"] }
  ]
})

let handleClose = (isRefresh: boolean) => {
  emit('handleClose', props.openName, false, isRefresh)
}

let getCountryList = () => {
  api.getInfoList({},'/web/worldBox/getAllCountry').then((res: any)=> {
    state.countryList = res.data
    state.countryList = state.countryList.filter((item: any)=> {
      return item.jcCode !== "CN"
    })
  })
}

let handleSubmit = () => {
  orderForm.value.validate((valid: boolean) => {
    if (valid) {
      state.countryList.forEach((item: any)=> {
        if (item.gj === state.formModel.countryName) {
          state.formModel.countryCodeWb = item.jcCode
          state.formModel.countryCodeRb = item.jc
        }
      })
      state.isSubmit = true
      api.submitData(state.formModel, "/web/worldBox/addOverseaCompanyInfoVerifyInfo").then((res: any)=> {
        ElMessage.success("提交成功");
        handleClose(false);
        state.isSubmit = false
      }).finally(()=> {
        state.isSubmit = false
      })
    }
  })
}

let reset = () => {
  state.formModel = {
    countryCodeWb: "",
    countryCodeRb: "",
    countryName: "",
    city: "",
    enterpriseName: "",
    address: "",
    postCode: "",
    email: "",
    phone: "",
    regNo: ""
  }
}

onMounted(()=> {
  getCountryList()
})

watchEffect(()=> {
  state.openDialog = props.open
  if (state.openDialog) {
    reset()
  }
})
</script>

<style scoped>

</style>