menduner/src/views/enterprise/components/register.vue

<!-- 企业注册表单 -->
<template>
  <div>
    <!-- （输入提示框-> 如果是选择了某个公司，带出公司信息，展开预览信息，点击加入） -->
    <!-- 多个招聘专员注册多个boss账号，但这些账号只能认证一个公司主体。新建的需要门墩后台审核，加入的由公司主体账户审核 -->
      <v-tabs v-model="tab" align-tabs="center" color="primary">
        <v-tab :value="1">加入公司</v-tab>
        <v-tab :value="2">新建公司</v-tab>
      </v-tabs>
      <v-window v-model="tab" class="mt-9">
        <v-window-item :value="1">
          <!-- 加入公司 -->
          <!-- <div>头像</div> -->
          <v-form v-model="valid">
            <v-text-field
              v-model="addInForm.username"
              label="姓名"
              placeholder="请输入姓名" 
              color="primary" 
              variant="outlined" 
              density="compact" 
              :rules="[v=> !!v || '请输入姓名']"
            ></v-text-field>
            <v-autocomplete
              v-model="addInForm.company"
              label="公司名称"
              placeholder="请输入公司名称" 
              color="primary" 
              variant="outlined" 
              density="compact" 
              return-object
              :items="[{value: 'Alibaba', title: '阿里巴巴', shortName: '阿里' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }, {value: 'Tencent', title: '腾讯', shortName: '腾讯' }]"
              :rules="[v=> !!v || '请输入公司名称']"
              @update:search-input="companySearch"
            ></v-autocomplete>
            <v-text-field
              v-model="addInForm.duties"
              label="职务"
              placeholder="请输入职务" 
              variant="outlined" 
              density="compact"
              color="primary"
              :rules="[v=> !!v || '请输入职务']"
            ></v-text-field>
          </v-form>
        </v-window-item>
        <v-window-item :value="2">
          <!-- 新建公司 -->
          <div>公司全称（需要与营业执照完全一致）</div>
          <div>公司简称（选填）</div>
          <div>营业执照</div>
          <div>公司行业</div>
          <div>人员规模</div>
          <div>法人招聘授权书</div>
          <div>法人身份证照片</div>
        </v-window-item>
      </v-window>
    <!-- 新建 -->
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
defineOptions({ name:'register-form'})

const tab = ref(1)
const valid = ref(false)
const addInForm = reactive({ username: '', company: '', duties: '' })
const companySearch = (val) => {
  console.log('companySearch', val)
}

</script>
<style lang="scss" scoped>

</style>