jude-user-recharge/web/src/views/frontend/components/CreateEnterpriseDialog.vue

<template>
  <el-dialog
    title="创建企业"
    v-model:visible="dialogVisible"
    width="420px"
    @close="handleClose"
  >
    <div class="enterprise-form">
      <div class="form-item">
        <div class="label">当前账号</div>
        <el-input
          v-model="form.account"
          disabled
        />
        <p class="hint">注:一个账号只能归属一个企业</p>
      </div>
      <div class="form-item">
        <div class="label required">企业名称</div>
        <el-input
          v-model="form.name"
          placeholder="请输入企业名称"
          @keyup.enter="handleSubmit"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, getCurrentInstance, reactive, ref, watch } from 'vue'

defineOptions({ name: 'CreateEnterpriseDialog' })

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'close'])
const { proxy } = getCurrentInstance()
// mock client user info to decouple from vuex
const mockClientUser = reactive({
  email: 'demo_client@example.com'
})

const form = reactive({
  account: '',
  name: ''
})
const submitting = ref(false)

const dialogVisible = computed({
  get: () => props.visible,
  set: val => emit('update:visible', val)
})

const clientEmail = computed(() => mockClientUser.email || '')

watch(
  () => props.visible,
  newVal => {
    if (newVal) {
      initForm()
      ensureClientEmail()
    } else {
      resetForm()
    }
  }
)

watch(
  clientEmail,
  newVal => {
    if (newVal && !form.account) {
      form.account = newVal
    }
  },
  { immediate: true }
)

const message = proxy?.$message

const initForm = () => {
  form.name = ''
  ensureClientEmail()
}

const resetForm = () => {
  form.name = ''
  submitting.value = false
}

const ensureClientEmail = () => {
  // use mock email as placeholder until real API is wired
  form.account = clientEmail.value || 'client@example.com'
}

const validateForm = () => {
  if (!form.name || !form.name.trim()) {
    message?.error('请输入企业名称')
    return false
  }

  const trimmedName = form.name.trim()
  if (trimmedName.length < 2) {
    message?.error('企业名称至少需要2个字符')
    return false
  }

  if (trimmedName.length > 50) {
    message?.error('企业名称不能超过50个字符')
    return false
  }

  return true
}

const handleSubmit = async () => {
  if (!validateForm()) {
    return
  }
  await createEnterprise()
}

const createEnterprise = async () => {
  // TODO: 接入创建企业接口
}

const handleCancel = () => {
  dialogVisible.value = false
}

const handleClose = () => {
  resetForm()
  emit('close')
}
</script>

<style scoped lang="scss">
.enterprise-form {
  .form-item {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .label {
    margin-bottom: 6px;
    font-size: 13px;
    color: #606266;

    &.required::after {
      content: '*';
      color: #f56c6c;
      margin-left: 4px;
    }
  }

  .hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: #909399;
  }
}
</style>