完善企业编辑页面并修复采购建单重试

2026-10-30 15:42:38 +08:00
parent d6ef770e48
commit 55868177cd
19 changed files with 568 additions and 224 deletions
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { useTenantAdministrationStore, type TenantCompanyProfile } from '../store/tenantAdministration'
+import { useAuthStore } from '@/modules/auth/public'
+
+const store = useTenantAdministrationStore()
+const auth = useAuthStore()
+const router = useRouter()
+const loading = ref(false)
+const loadError = ref('')
+const profileSubmitting = ref(false)
+const profileFormRef = ref<FormInstance>()
+const draft = reactive<TenantCompanyProfile>({ ...store.company })
+const canEdit = computed(() => auth.hasPermission('company:profile:edit') && store.company.auditStatus !== 'ARCHIVED')
+const profileFormRules: FormRules<TenantCompanyProfile> = {
+  companyName: [{ required: true, whitespace: true, message: '请输入公司名称', trigger: 'blur' }],
+  legalRepresentative: [{ required: true, whitespace: true, message: '请输入法人姓名', trigger: 'blur' }],
+  contactName: [{ required: true, whitespace: true, message: '请输入联系人姓名', trigger: 'blur' }],
+  contactPhone: [
+    { required: true, whitespace: true, message: '请输入公司联系电话', trigger: 'blur' },
+    { pattern: /^[0-9-]{4,32}$/, message: '公司联系电话仅支持 4–32 位数字或连字符', trigger: 'blur' },
+  ],
+  contactEmail: [{ type: 'email', message: '请输入正确的联系邮箱', trigger: 'blur' }],
+}
+async function loadCompanyContext() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    await store.loadCompanyContext()
+    Object.assign(draft, store.company)
+    profileFormRef.value?.clearValidate()
+  } catch (error) { loadError.value = error instanceof Error ? error.message : '企业资料加载失败' }
+  finally { loading.value = false }
+}
+onMounted(() => void loadCompanyContext())
+function returnToProfile() { void router.push({ name: 'company-profile' }) }
+async function saveProfile() {
+  if (profileSubmitting.value || loading.value || loadError.value || !canEdit.value) return
+  const valid = await profileFormRef.value?.validate().then(() => true).catch(() => false)
+  if (!valid) return
+  profileSubmitting.value = true
+  try {
+    await store.updateCompany({ ...draft })
+    ElMessage.success('企业资料已保存')
+    await router.push({ name: 'company-profile' })
+  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '企业资料保存失败') }
+  finally { profileSubmitting.value = false }
+}
+</script>
+
+<template>
+  <section v-loading="loading" class="company-editor client-ui" :aria-busy="loading">
+    <header class="company-editor-heading"><h2>编辑企业资料</h2><el-button :disabled="profileSubmitting" @click="returnToProfile">返回企业资料</el-button></header>
+    <el-alert v-if="loadError" type="error" :closable="false" :title="loadError"><el-button @click="loadCompanyContext">重新加载</el-button></el-alert>
+    <el-alert v-else-if="!loading && !canEdit" title="当前企业资料不可编辑" type="warning" :closable="false" />
+    <el-form v-else ref="profileFormRef" :model="draft" :rules="profileFormRules" label-position="top" :disabled="loading || profileSubmitting || !canEdit" scroll-to-error @submit.prevent="saveProfile">
+      <section class="company-editor-section">
+        <h3>企业基本信息</h3>
+        <div class="company-editor-grid">
+          <el-form-item label="公司名称" prop="companyName" required><el-input v-model="draft.companyName" placeholder="请输入公司名称" /></el-form-item>
+          <el-form-item label="统一社会信用代码"><el-input v-model="draft.creditCode" disabled placeholder="未登记" /></el-form-item>
+          <el-form-item label="法人姓名" prop="legalRepresentative" required><el-input v-model="draft.legalRepresentative" placeholder="请输入法定代表人姓名" /></el-form-item>
+        </div>
+      </section>
+      <section class="company-editor-section">
+        <h3>联系信息</h3>
+        <div class="company-editor-grid">
+          <el-form-item label="联系人" prop="contactName" required><el-input v-model="draft.contactName" placeholder="请输入联系人姓名" /></el-form-item>
+          <el-form-item label="公司联系电话" prop="contactPhone" required><el-input v-model="draft.contactPhone" maxlength="32" inputmode="tel" placeholder="请输入公司联系电话" /><small class="company-editor-help">仅用于公司业务联系，不会修改任何成员的登录手机号。</small></el-form-item>
+          <el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="draft.contactEmail" placeholder="请输入联系邮箱（选填）" /></el-form-item>
+        </div>
+      </section>
+      <footer class="company-editor-actions"><el-button :disabled="profileSubmitting" @click="returnToProfile">返回企业资料</el-button><el-button v-if="canEdit" type="primary" native-type="submit" :loading="profileSubmitting">保存修改</el-button></footer>
+    </el-form>
+  </section>
+</template>
+
+<style scoped src="./companyEditor.css"></style>