81 lines
5.0 KiB
Vue
81 lines
5.0 KiB
Vue
<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>
|