ams_web/src/views/company-information/components/CompanyCreate.vue

<script lang="ts" setup>
/**
 * @Name: CompanyCreate.vue
 * @Description: 新增公司
 * @Author: Cheney
 */

import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useResponse } from '/@/utils/useResponse';
import * as api from '../api';
import { Delete, Finished, Plus, RefreshLeft } from '@element-plus/icons-vue';


const isOpen = defineModel({ default: false });
const emit = defineEmits([ 'refresh' ]);

const createLoading = ref(false);

interface ContactItem {
  phone: string;
  email: string;
}

interface RuleForm {
  company: string;
  address: string;
  companyEnglishName: string;
  juridicalPerson: string;
  vatNumber: string;
  vatCompany: string;
  ipaddress: string;
  juridicalPersonCreditCard: string;
  juridicalPersonCreditCardAddress: string;
  shopPhone: string;
  shopEmail: string;
  receivablesAccount:string;
  contacts: ContactItem[];
}

const ruleFormRef = ref<FormInstance>();
const form = reactive<RuleForm>({
  company: '',
  address: '',
  companyEnglishName: '',
  juridicalPerson: '',
  vatNumber: '',
  vatCompany: '',
  ipaddress:'',
  juridicalPersonCreditCard:'',
  juridicalPersonCreditCardAddress:'',
  shopPhone:'',
  shopEmail:'',
  receivablesAccount:'',
  contacts: [
    {
      phone: '',
      email: ''
    }
  ]
});

const rules = reactive<FormRules<RuleForm>>({
  company: [ { required: true, message: '请输入公司名称', trigger: 'blur' } ],
  companyEnglishName: [ { required: true, message: '请输入公司英文名称', trigger: 'blur' } ],
  address: [ { required: true, message: '请输入公司地址', trigger: 'blur' } ],
  juridicalPerson: [ { required: true, message: '请输入公司法人', trigger: 'blur' } ],

  juridicalPersonCreditCard: [ { required: true, message: '请输入法人信用卡号', trigger: 'blur' } ],
  juridicalPersonCreditCardAddress: [ { required: true, message: '请输入法人信用卡地址', trigger: 'blur' } ],
  ipaddress: [ { required: true, message: '请输入IP地址', trigger: 'blur' } ],

  receivablesAccount: [ { required: false, message: '请输入收款账户', trigger: 'blur' } ],

  shopEmail:[
    { required: true, message: '请输入主账号邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  shopPhone: [ { required: true, message: '请输入主账号电话', trigger: 'blur' } ],
  vatNumber: [ { required: false, message: '请输入VAT税号', trigger: 'blur' } ],
  vatCompany: [ { required: false, message: '请输入VAT税号公司', trigger: 'blur' } ],
  contacts: {
    phone: [ { required: false, message: '请输入电话号码', trigger: 'blur' } ],
    email: [
      { required: false, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
    ]
  }
});

const addContact = () => {
  form.contacts.push({
    phone: '',
    email: ''
  });
};

const removeContact = (item: ContactItem) => {
  const index = form.contacts.indexOf(item);
  if (index !== -1) {
    form.contacts.splice(index, 1);
  }
};

async function create() {
  const body = {
    company: form.company,
    companyEnglishName: form.companyEnglishName,
    address: form.address,
    juridicalPerson: form.juridicalPerson,
    vatNumber: form.vatNumber,
    vatCompany: form.vatCompany,
    companyPhoneEmail: form.contacts,
    juridicalPersonCreditCard: form.juridicalPersonCreditCard,
    juridicalPersonCreditCardAddress: form.juridicalPersonCreditCardAddress,
    ipaddress: form.ipaddress,
    shopEmail: form.shopEmail,
    receivablesAccount: form.receivablesAccount,
    shopPhone: form.shopPhone
  };
  const res =await useResponse(body, api.createCompany, createLoading);
  if (res.code === 2000) {
    ElMessage.success('创建成功');
  }
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await create();
      isOpen.value = false;
      emit('refresh');
    } else {
      console.log('error submit!', fields);
      ElMessage.error('请检查表单');
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<template>
  <el-dialog v-model="isOpen" :close-on-click-modal="false" title="新增公司" width="35%">
    <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        status-icon
    >
      <el-form-item label="公司名称" prop="company">
        <el-input v-model="form.company" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="公司英文名称" prop="companyEnglishName">
        <el-input v-model="form.companyEnglishName" placeholder="请输入公司英文名称"></el-input>
      </el-form-item>
      <el-form-item label="公司注册地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入公司地址"></el-input>
      </el-form-item>
      <el-form-item label="公司法人" prop="juridicalPerson">
        <el-input v-model="form.juridicalPerson" placeholder="请输入公司法人"></el-input>
      </el-form-item>

      <el-form-item label="法人信用卡号" prop="juridicalPersonCreditCard">
        <el-input v-model="form.juridicalPersonCreditCard" placeholder="请输入法人信用卡号"></el-input>
      </el-form-item>
      <el-form-item label="法人信用卡地址" prop="juridicalPersonCreditCardAddress">
        <el-input v-model="form.juridicalPersonCreditCardAddress" placeholder="请输入法人信用卡地址"></el-input>
      </el-form-item>
      <el-form-item label="IP地址" prop="ipaddress" style="margin-bottom: 14px;">
        <el-input v-model="form.ipaddress" placeholder="请输入IP地址"></el-input>
        <div style="font-size: 12px; color: #999; margin: 2px 0 -4px 0;">如果有多个IP地址，请用","相隔</div>
      </el-form-item>

      <el-form-item label="VAT税号" prop="vatNumber">
        <el-input v-model="form.vatNumber" placeholder="请输入VAT税号"></el-input>
      </el-form-item>
      <el-form-item label="VAT税号公司" prop="vatCompany">
        <el-input v-model="form.vatCompany" placeholder="请输入VAT税号公司"></el-input>
      </el-form-item>

      <el-form-item label="收款账户" prop="receivablesAccount">
        <el-input v-model="form.receivablesAccount" placeholder="请输入收款账户"></el-input>
      </el-form-item>

      <el-form-item label="主账号邮箱" prop="shopEmail">
        <el-input v-model="form.shopEmail" placeholder="请输入主账号邮箱"></el-input>
      </el-form-item>
      <el-form-item label="主账号电话" prop="shopPhone">
        <el-input v-model="form.shopPhone" placeholder="请输入主账号电话"></el-input>
      </el-form-item>

      <el-form-item
          v-for="(contact, index) in form.contacts"
          :key="index"
          :label="'子账号联系方式' + (index + 1)"
      >
        <div class="flex gap-2.5 items-start">
          <el-form-item
              :prop="'contacts.' + index + '.phone'"
          >
            <el-input
                v-model="contact.phone"
                placeholder="请输入电话"
            />
          </el-form-item>
          <el-form-item
              :prop="'contacts.' + index + '.email'"
              :rules="rules.contacts.email"
          >
            <el-input
                v-model="contact.email"
                placeholder="请输入邮箱"
            />
          </el-form-item>
          <el-button :icon="Delete" type="danger" @click.prevent="removeContact(contact)">
            删 除
          </el-button>
        </div>
      </el-form-item>

      <el-form-item>
        <div class="flex flex-1 justify-end">
          <el-button :icon="Plus" type="warning" @click="addContact">新增联系方式</el-button>
          <el-button :icon="Finished" :loading="createLoading" type="primary" @click="submitForm(ruleFormRef)">创 建
          </el-button>
          <el-button :icon="RefreshLeft" @click="resetForm(ruleFormRef)">重 置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

</style>