|  | @@ -0,0 +1,185 @@
 | 
	
		
			
				|  |  | +<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 {
 | 
	
		
			
				|  |  | +  name: string;
 | 
	
		
			
				|  |  | +  address: string;
 | 
	
		
			
				|  |  | +  enName: string;
 | 
	
		
			
				|  |  | +  juridicalPerson: string;
 | 
	
		
			
				|  |  | +  vatNumber: string;
 | 
	
		
			
				|  |  | +  vatCompany: string;
 | 
	
		
			
				|  |  | +  contacts: ContactItem[];
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const ruleFormRef = ref<FormInstance>();
 | 
	
		
			
				|  |  | +const form = reactive<RuleForm>({
 | 
	
		
			
				|  |  | +  name: '',
 | 
	
		
			
				|  |  | +  address: '',
 | 
	
		
			
				|  |  | +  enName: '',
 | 
	
		
			
				|  |  | +  juridicalPerson: '',
 | 
	
		
			
				|  |  | +  vatNumber: '',
 | 
	
		
			
				|  |  | +  vatCompany: '',
 | 
	
		
			
				|  |  | +  contacts: [
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +      phone: '',
 | 
	
		
			
				|  |  | +      email: ''
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  ]
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const rules = reactive<FormRules<RuleForm>>({
 | 
	
		
			
				|  |  | +  name: [ { required: true, message: '请输入公司名称', trigger: 'blur' } ],
 | 
	
		
			
				|  |  | +  enName: [ { required: true, message: '请输入公司英文名称', trigger: 'blur' } ],
 | 
	
		
			
				|  |  | +  address: [ { required: true, message: '请输入公司地址', trigger: 'blur' } ],
 | 
	
		
			
				|  |  | +  juridicalPerson: [ { required: true, message: '请输入公司法人', trigger: 'blur' } ],
 | 
	
		
			
				|  |  | +  vatNumber: [ { required: true, message: '请输入VAT税号', trigger: 'blur' } ],
 | 
	
		
			
				|  |  | +  vatCompany: [ { required: true, message: '请输入VAT税号公司', trigger: 'blur' } ],
 | 
	
		
			
				|  |  | +  contacts: {
 | 
	
		
			
				|  |  | +    phone: [ { required: true, message: '请输入电话号码', trigger: 'blur' } ],
 | 
	
		
			
				|  |  | +    email: [
 | 
	
		
			
				|  |  | +      { required: true, 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.name,
 | 
	
		
			
				|  |  | +    companyEnglishName: form.enName,
 | 
	
		
			
				|  |  | +    address: form.address,
 | 
	
		
			
				|  |  | +    juridicalPerson: form.juridicalPerson,
 | 
	
		
			
				|  |  | +    vatNumber: form.vatNumber,
 | 
	
		
			
				|  |  | +    vatCompany: form.vatCompany,
 | 
	
		
			
				|  |  | +    companyPhoneEmail: form.contacts
 | 
	
		
			
				|  |  | +  };
 | 
	
		
			
				|  |  | +  await useResponse(body, api.createCompany, createLoading);
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +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="name">
 | 
	
		
			
				|  |  | +        <el-input v-model="form.name" placeholder="请输入公司名称"></el-input>
 | 
	
		
			
				|  |  | +      </el-form-item>
 | 
	
		
			
				|  |  | +      <el-form-item label="英文名称" prop="enName">
 | 
	
		
			
				|  |  | +        <el-input v-model="form.enName" 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="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
 | 
	
		
			
				|  |  | +          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'"
 | 
	
		
			
				|  |  | +              :rules="rules.contacts.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>
 |