|
|
|
@@ -1,10 +1,16 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
|
|
|
|
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
|
|
|
|
import { Building2, Eye, MapPin, Pencil, Plus, Power, Upload } from '@lucide/vue'
|
|
|
|
|
import { Building2, Eye, FileUp, MapPin, Pencil, Plus, Power, Save } from '@lucide/vue'
|
|
|
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
|
|
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|
|
|
|
import AppDrawer from '@/shared/components/AppDrawer.vue'
|
|
|
|
|
import BatchImportDialog from '@/shared/components/BatchImportDialog.vue'
|
|
|
|
|
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
|
|
|
|
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
|
|
|
|
|
import FormSection from '@/shared/components/FormSection.vue'
|
|
|
|
|
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
|
|
|
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|
|
|
|
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
|
|
|
|
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
|
|
|
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|
|
|
@@ -352,20 +358,24 @@ onMounted(() => {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="business-page partners-page">
|
|
|
|
|
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="往来单位筛选" :fields="queryFields" preference-key="partners-query" @search="searchPartners" />
|
|
|
|
|
<AdminPage as="div" class="partners-page" spacing="normal">
|
|
|
|
|
<ListPageLayout aria-label="往来单位管理">
|
|
|
|
|
<template #toolbar>
|
|
|
|
|
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="往来单位筛选" :fields="queryFields" preference-key="partners-query" @search="searchPartners" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-if="loadError" #state>
|
|
|
|
|
<LoadErrorState
|
|
|
|
|
title="往来单位列表暂时无法加载"
|
|
|
|
|
:message="loadError.message"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
@retry="loadPartners()"
|
|
|
|
|
>
|
|
|
|
|
<template #details><ApiErrorMeta :details="loadError" /></template>
|
|
|
|
|
</LoadErrorState>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<section v-if="loadError" class="surface-panel partners-error" role="alert">
|
|
|
|
|
<div>
|
|
|
|
|
<strong>往来单位列表暂时无法加载</strong>
|
|
|
|
|
<p>{{ loadError.message }}</p>
|
|
|
|
|
<ApiErrorMeta :details="loadError" />
|
|
|
|
|
</div>
|
|
|
|
|
<el-button type="primary" :loading="loading" @click="loadPartners()">重新加载</el-button>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section v-else class="surface-panel table-panel" :aria-busy="loading">
|
|
|
|
|
<section v-if="!loadError" class="surface-panel table-panel" :aria-busy="loading">
|
|
|
|
|
<DataTable
|
|
|
|
|
v-model:page="page"
|
|
|
|
|
v-model:page-size="pageSize"
|
|
|
|
@@ -379,8 +389,7 @@ onMounted(() => {
|
|
|
|
|
row-key="id"
|
|
|
|
|
empty-text="暂无符合条件的往来单位"
|
|
|
|
|
>
|
|
|
|
|
<template #toolbar-start><div class="partners-table-heading"><h2>往来单位列表</h2><span>平台公共数据 · 共 {{ total }} 个往来单位</span></div></template>
|
|
|
|
|
<template #toolbar-actions><div class="partners-primary-actions"><el-button v-if="access.can('platform:counterparty:import')" :disabled="loading" @click="openImport"><Upload :size="16" />批量导入</el-button><el-button v-if="access.can('platform:counterparty:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增往来单位</el-button></div></template>
|
|
|
|
|
<template #toolbar-actions><div class="partners-primary-actions"><el-button v-if="access.can('platform:counterparty:import')" :disabled="loading" @click="openImport"><FileUp :size="16" />批量导入</el-button><el-button v-if="access.can('platform:counterparty:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增往来单位</el-button></div></template>
|
|
|
|
|
<template #actions="{ row }">
|
|
|
|
|
<div class="table-actions">
|
|
|
|
|
<el-button link type="primary" @click="openDetail(row as PlatformPartnerResource)"><Eye :size="15" />详情</el-button>
|
|
|
|
@@ -393,56 +402,68 @@ onMounted(() => {
|
|
|
|
|
<template #contact="{ row }"><strong>{{ (row as PlatformPartnerResource).contactName }}</strong><span class="partner-subline">{{ (row as PlatformPartnerResource).contactPhone }}</span><span v-if="(row as PlatformPartnerResource).contactEmail" class="partner-subline">{{ (row as PlatformPartnerResource).contactEmail }}</span></template>
|
|
|
|
|
<template #address="{ row }"><div class="partner-address"><MapPin :size="15" /><span>{{ [(row as PlatformPartnerResource).province, (row as PlatformPartnerResource).city, (row as PlatformPartnerResource).district, (row as PlatformPartnerResource).addressLine].filter(Boolean).join(' ') }}</span></div></template>
|
|
|
|
|
<template #status="{ row }"><el-tag :type="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
|
|
|
|
|
<template #pagination-left />
|
|
|
|
|
<template #pagination-left>平台公共数据 · 共 {{ total }} 个往来单位</template>
|
|
|
|
|
</DataTable>
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
</ListPageLayout>
|
|
|
|
|
|
|
|
|
|
<el-drawer v-model="editorOpen" :title="editorLabel" size="680px" class="business-drawer editor-drawer" :close-on-click-modal="false">
|
|
|
|
|
<AppDrawer
|
|
|
|
|
v-model="editorOpen"
|
|
|
|
|
:title="editorLabel"
|
|
|
|
|
size="min(680px, 94vw)"
|
|
|
|
|
class="business-drawer editor-drawer"
|
|
|
|
|
:confirm-loading="saving"
|
|
|
|
|
>
|
|
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
|
|
|
|
|
<div class="form-section"><h3>单位信息</h3><div class="form-grid two-cols">
|
|
|
|
|
<FormSection title="单位信息"><div class="form-grid two-cols">
|
|
|
|
|
<el-form-item label="单位编码" prop="partnerCode" required><el-input v-model="form.partnerCode" placeholder="如：CUS-001" maxlength="50" /></el-form-item>
|
|
|
|
|
<el-form-item label="单位名称" prop="partnerName" required><el-input v-model="form.partnerName" placeholder="请输入工商登记或常用单位名称" maxlength="128" /></el-form-item>
|
|
|
|
|
<el-form-item label="单位类型" prop="types" required><el-select v-model="form.types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择一个或多个单位类型"><el-option v-for="option in typeOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
|
|
|
|
|
<el-form-item label="状态" prop="status" required><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item>
|
|
|
|
|
</div></div>
|
|
|
|
|
<div class="form-section"><h3>联系信息</h3><div class="form-grid two-cols">
|
|
|
|
|
</div></FormSection>
|
|
|
|
|
<FormSection title="联系信息"><div class="form-grid two-cols">
|
|
|
|
|
<el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item>
|
|
|
|
|
<el-form-item label="联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入手机号或固定电话" maxlength="32" /></el-form-item>
|
|
|
|
|
<el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item>
|
|
|
|
|
</div></div>
|
|
|
|
|
<div class="form-section"><h3>地址信息</h3><div class="form-grid two-cols">
|
|
|
|
|
</div></FormSection>
|
|
|
|
|
<FormSection title="地址信息"><div class="form-grid two-cols">
|
|
|
|
|
<el-form-item label="国家二字码" prop="countryCode" required><el-input v-model="form.countryCode" placeholder="如：CN" maxlength="2" @input="form.countryCode = String($event).toUpperCase()" /></el-form-item>
|
|
|
|
|
<el-form-item label="省 / 州" prop="province"><el-input v-model="form.province" placeholder="如：广东省" maxlength="64" /></el-form-item>
|
|
|
|
|
<el-form-item label="城市" prop="city" required><el-input v-model="form.city" placeholder="如：深圳市" maxlength="64" /></el-form-item>
|
|
|
|
|
<el-form-item label="区 / 县" prop="district"><el-input v-model="form.district" placeholder="如：宝安区" maxlength="64" /></el-form-item>
|
|
|
|
|
<el-form-item label="邮政编码" prop="postalCode"><el-input v-model="form.postalCode" placeholder="如：518000" maxlength="20" /></el-form-item>
|
|
|
|
|
</div><el-form-item label="详细地址" prop="addressLine" required><el-input v-model="form.addressLine" type="textarea" :rows="3" placeholder="请输入街道、园区、楼栋及门牌信息" maxlength="255" show-word-limit /></el-form-item></div>
|
|
|
|
|
<div class="form-section"><h3>其他信息</h3><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内部说明（选填）" maxlength="500" show-word-limit /></el-form-item></div>
|
|
|
|
|
</div><el-form-item label="详细地址" prop="addressLine" required><el-input v-model="form.addressLine" type="textarea" :rows="3" placeholder="请输入街道、园区、楼栋及门牌信息" maxlength="255" show-word-limit /></el-form-item></FormSection>
|
|
|
|
|
<FormSection title="其他信息" :bordered="false"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内部说明（选填）" maxlength="500" show-word-limit /></el-form-item></FormSection>
|
|
|
|
|
</el-form>
|
|
|
|
|
<template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="savePartner">保存往来单位</el-button></div></template>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="drawer-footer">
|
|
|
|
|
<el-button :disabled="saving" @click="editorOpen = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" :loading="saving" @click="savePartner"><Save :size="16" />保存往来单位</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</AppDrawer>
|
|
|
|
|
|
|
|
|
|
<el-drawer v-model="detailOpen" title="往来单位详情" size="680px" class="business-drawer detail-drawer">
|
|
|
|
|
<div v-loading="detailLoading" class="partner-detail">
|
|
|
|
|
<template v-if="detail">
|
|
|
|
|
<section><h3>单位信息</h3><dl class="detail-grid">
|
|
|
|
|
<AppDrawer v-model="detailOpen" title="往来单位详情" size="min(680px, 94vw)" class="business-drawer detail-drawer" :loading="detailLoading" :show-footer="false">
|
|
|
|
|
<div class="partner-detail">
|
|
|
|
|
<DetailPageLayout v-if="detail" aria-label="往来单位详情">
|
|
|
|
|
<FormSection title="单位信息"><dl class="detail-grid">
|
|
|
|
|
<div><dt>单位编码</dt><dd>{{ detail.partnerCode }}</dd></div>
|
|
|
|
|
<div><dt>单位名称</dt><dd>{{ detail.partnerName }}</dd></div>
|
|
|
|
|
<div><dt>状态</dt><dd><el-tag :type="detail.status === 'ACTIVE' ? 'success' : 'info'">{{ detail.status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></dd></div>
|
|
|
|
|
<div><dt>单位类型</dt><dd class="partner-types"><el-tag v-for="type in detail.types" :key="type" effect="plain">{{ partnerTypeLabel(type) }}</el-tag></dd></div>
|
|
|
|
|
</dl></section>
|
|
|
|
|
<section><h3>联系与地址</h3><dl class="detail-grid">
|
|
|
|
|
</dl></FormSection>
|
|
|
|
|
<FormSection title="联系与地址"><dl class="detail-grid">
|
|
|
|
|
<div><dt>联系人</dt><dd>{{ detail.contactName }}</dd></div><div><dt>联系电话</dt><dd>{{ detail.contactPhone }}</dd></div>
|
|
|
|
|
<div><dt>联系邮箱</dt><dd>{{ detail.contactEmail || '-' }}</dd></div><div><dt>邮政编码</dt><dd>{{ detail.postalCode || '-' }}</dd></div>
|
|
|
|
|
<div class="detail-span"><dt>详细地址</dt><dd>{{ [detail.countryCode, detail.province, detail.city, detail.district, detail.addressLine].filter(Boolean).join(' ') }}</dd></div>
|
|
|
|
|
</dl></section>
|
|
|
|
|
<section><h3>其他信息</h3><dl class="detail-grid">
|
|
|
|
|
</dl></FormSection>
|
|
|
|
|
<FormSection title="其他信息" :bordered="false"><dl class="detail-grid">
|
|
|
|
|
<div class="detail-span"><dt>更新时间</dt><dd>{{ formatUpdatedAt(detail.updatedAt) }}</dd></div>
|
|
|
|
|
<div class="detail-span"><dt>备注</dt><dd>{{ detail.remark || '-' }}</dd></div>
|
|
|
|
|
</dl></section>
|
|
|
|
|
</template>
|
|
|
|
|
</dl></FormSection>
|
|
|
|
|
</DetailPageLayout>
|
|
|
|
|
</div>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
</AppDrawer>
|
|
|
|
|
|
|
|
|
|
<BatchImportDialog
|
|
|
|
|
v-model="importOpen"
|
|
|
|
@@ -453,16 +474,11 @@ onMounted(() => {
|
|
|
|
|
:import-file="importPlatformPartners"
|
|
|
|
|
@success="loadPartners"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</AdminPage>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.partners-error { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-color: #fecdca; background: #fffafa; }
|
|
|
|
|
.partners-error strong { color: #7a271a; font-size: 13px; }
|
|
|
|
|
.partners-error p { margin: 4px 0 0; color: #b54708; font-size: 12px; overflow-wrap: anywhere; }
|
|
|
|
|
.partners-table-heading { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
|
|
|
|
|
.partners-table-heading h2 { margin: 0; color: var(--cc-text); font-size: 16px; line-height: 1.4; }
|
|
|
|
|
.partners-table-heading span { color: var(--cc-muted); font-size: 12px; white-space: nowrap; }
|
|
|
|
|
.partners-page { min-width: 0; }
|
|
|
|
|
.partners-primary-actions, .partner-types { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
|
|
|
.partner-cell { display: flex; align-items: center; gap: 10px; }
|
|
|
|
|
.partner-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
|
|
|
|
@@ -472,16 +488,12 @@ onMounted(() => {
|
|
|
|
|
.partner-address { display: flex; align-items: flex-start; gap: 7px; line-height: 1.55; overflow-wrap: anywhere; }
|
|
|
|
|
.partner-address svg { flex: 0 0 15px; margin-top: 3px; color: var(--cc-muted); }
|
|
|
|
|
.partner-detail { min-height: 180px; padding: 20px 24px 28px; box-sizing: border-box; }
|
|
|
|
|
.partner-detail section + section { margin-top: 28px; }
|
|
|
|
|
.partner-detail h3 { margin: 0 0 12px; color: var(--cc-text); font-size: 15px; }
|
|
|
|
|
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-border); }
|
|
|
|
|
.detail-grid > div { min-width: 0; padding: 12px 14px; background: #fff; }
|
|
|
|
|
.detail-grid .detail-span { grid-column: 1 / -1; }
|
|
|
|
|
.detail-grid dt { margin-bottom: 5px; color: var(--cc-muted); font-size: 12px; }
|
|
|
|
|
.detail-grid dd { margin: 0; color: var(--cc-text); line-height: 1.55; overflow-wrap: anywhere; }
|
|
|
|
|
@media (max-width: 720px) {
|
|
|
|
|
.partners-error { align-items: stretch; flex-direction: column; }
|
|
|
|
|
.partners-error .el-button { min-height: 44px; }
|
|
|
|
|
.partners-primary-actions :deep(.el-button) { width: 100%; min-height: 40px; }
|
|
|
|
|
.partners-primary-actions { flex-direction: column; }
|
|
|
|
|
.partner-detail { padding: 16px; }
|
|
|
|
|
