feat: improve gas station management workflow
This commit is contained in:
@@ -3,8 +3,14 @@
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<a-button v-if="managedOwnerIdentity" @click="router.back()">返回机构列表</a-button>
|
||||
<a-button @click="load">刷新</a-button>
|
||||
<a-button v-if="canCreate" type="primary" @click="openCreate">新建</a-button>
|
||||
<a-button @click="load">
|
||||
<template #icon><icon-refresh /></template>
|
||||
刷新
|
||||
</a-button>
|
||||
<a-button v-if="canCreate" type="primary" @click="openCreate">
|
||||
<template #icon><icon-plus /></template>
|
||||
新建
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-form :model="filters" layout="inline" class="filters" @submit.prevent="search">
|
||||
@@ -16,7 +22,7 @@
|
||||
</a-form>
|
||||
<a-table :data="list" :loading="loading" :pagination="false" row-key="identity">
|
||||
<template #columns>
|
||||
<a-table-column title="业务标识" data-index="identity" :width="220" ellipsis tooltip />
|
||||
<a-table-column title="ID" data-index="id" :width="100" />
|
||||
<a-table-column v-for="field in displayFields" :key="field.key" :title="field.label" ellipsis tooltip>
|
||||
<template #cell="{ record }">
|
||||
{{ displayFieldValue(field, record) }}
|
||||
@@ -25,6 +31,9 @@
|
||||
<a-table-column v-if="definition.accountManagement" title="账户数" :width="90">
|
||||
<template #cell="{ record }">{{ accountCounts[String(record.identity)] ?? 0 }}</template>
|
||||
</a-table-column>
|
||||
<a-table-column v-if="definition.name === 'gas_basic'" title="配送点数" :width="100">
|
||||
<template #cell="{ record }">{{ deliveryPointCounts[String(record.identity)] ?? 0 }}</template>
|
||||
</a-table-column>
|
||||
<a-table-column v-if="definition.name === 'staff_account'" title="审批状态" :width="100">
|
||||
<template #cell="{ record }">
|
||||
<a-tag :color="Number(record.status) === 1 ? 'green' : Number(record.status) === 2 ? 'red' : 'orange'">
|
||||
@@ -40,6 +49,13 @@
|
||||
<span v-else class="muted-text">未开通</span>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column v-if="definition.name === 'gas_basic'" title="状态" :width="90">
|
||||
<template #cell="{ record }">
|
||||
<a-tag :color="recordStatusColor(Number(record.status))">
|
||||
{{ recordStatusLabel(Number(record.status)) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="操作" :width="definition.accountManagement ? 350 : 280" fixed="right">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
@@ -47,7 +63,7 @@
|
||||
<a-button v-if="definition.name === 'staff_account'" size="mini" @click="viewCredentials(record)">查看资质</a-button>
|
||||
<a-button size="mini" @click="openDetail(record)">详情</a-button>
|
||||
<a-button v-if="canEdit" size="mini" :disabled="isProtectedRecord(record)" @click="openEdit(record)">编辑</a-button>
|
||||
<a-button v-if="canChangeStatus" size="mini" :disabled="isProtectedRecord(record)" @click="openStatus(record)">审核</a-button>
|
||||
<a-button v-if="canChangeStatus && definition.name !== 'gas_basic'" size="mini" :disabled="isProtectedRecord(record)" @click="openStatus(record)">审核</a-button>
|
||||
<a-button v-if="canArchive" size="mini" status="danger" :disabled="isProtectedRecord(record)" @click="confirmArchive(record)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
@@ -57,6 +73,76 @@
|
||||
<div class="pagination"><a-pagination :total="total" :current="page" :page-size="pageSize" show-total show-jumper @change="changePage" /></div>
|
||||
</a-card>
|
||||
|
||||
<a-modal
|
||||
:visible="accountModalVisible"
|
||||
:title="`${definition.accountManagement?.title ?? '账户管理'} · ${String(accountOwner.name ?? accountOwner.code ?? accountOwner.delivery_code ?? '')}`"
|
||||
:width="920"
|
||||
:footer="false"
|
||||
@cancel="accountModalVisible = false"
|
||||
>
|
||||
<div class="account-toolbar">
|
||||
<a-button @click="loadManagedAccounts">刷新</a-button>
|
||||
<a-button type="primary" @click="openAccountCreate">新建账户</a-button>
|
||||
</div>
|
||||
<a-table :data="accountList" :loading="accountLoading" :pagination="false" row-key="identity">
|
||||
<template #columns>
|
||||
<a-table-column title="用户名" data-index="username" />
|
||||
<a-table-column title="显示名称" data-index="display_name" />
|
||||
<a-table-column title="角色编码" data-index="role_code" />
|
||||
<a-table-column title="状态" :width="90">
|
||||
<template #cell="{ record }">
|
||||
<a-tag :color="Number(record.status) === 1 ? 'green' : 'red'">
|
||||
{{ Number(record.status) === 1 ? '启用' : '停用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="操作" :width="240">
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button size="mini" @click="openAccountEdit(record)">编辑</a-button>
|
||||
<a-button size="mini" @click="toggleAccountStatus(record)">
|
||||
{{ Number(record.status) === 1 ? '禁用' : '启用' }}
|
||||
</a-button>
|
||||
<a-button size="mini" status="danger" @click="archiveAccount(record)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="pagination">
|
||||
<a-pagination
|
||||
:total="accountTotal"
|
||||
:current="accountPage"
|
||||
:page-size="accountPageSize"
|
||||
show-total
|
||||
@change="changeAccountPage"
|
||||
/>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
:visible="accountFormVisible"
|
||||
:title="accountEditingIdentity ? '编辑账户' : '新建账户'"
|
||||
:ok-loading="accountSaving"
|
||||
@cancel="accountFormVisible = false"
|
||||
@ok="saveAccount"
|
||||
>
|
||||
<a-form :model="accountForm" layout="vertical">
|
||||
<a-form-item label="用户名" required>
|
||||
<a-input v-model="accountForm.username" :disabled="Boolean(accountEditingIdentity)" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!accountEditingIdentity" label="密码" required>
|
||||
<a-input-password v-model="accountForm.password" />
|
||||
</a-form-item>
|
||||
<a-form-item label="显示名称">
|
||||
<a-input v-model="accountForm.display_name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="角色编码">
|
||||
<a-input v-model="accountForm.role_code" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-drawer :visible="formVisible" :title="editingIdentity ? `编辑${definition.title}` : `新建${definition.title}`" :width="520" :ok-loading="saving" @cancel="formVisible = false" @ok="save">
|
||||
<a-form :model="form" layout="vertical">
|
||||
<a-form-item v-for="field in formFields" :key="field.key" :label="field.label" :required="isResourceFieldRequired(field, formMode)">
|
||||
@@ -89,6 +175,37 @@
|
||||
<template v-else>{{ displayValue(key, value) }}</template>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<div v-if="definition.name === 'gas_basic'" class="status-editor">
|
||||
<span class="status-editor-label">当前状态</span>
|
||||
<a-tag :color="recordStatusColor(Number(detail.status))">
|
||||
{{ recordStatusLabel(Number(detail.status)) }}
|
||||
</a-tag>
|
||||
<template v-if="canChangeStatus">
|
||||
<span class="status-switch-label">修改状态</span>
|
||||
<a-switch
|
||||
:model-value="Number(detail.status) === 1"
|
||||
:loading="gasStatusSaving"
|
||||
:disabled="![1, 2].includes(Number(detail.status))"
|
||||
checked-text="启用"
|
||||
unchecked-text="停用"
|
||||
@change="updateGasStatus"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="definition.name === 'gas_basic' && canChangeStatus && Number(detail.status) === 0" class="review-panel">
|
||||
<div class="review-title">气站审核</div>
|
||||
<a-space direction="vertical" fill>
|
||||
<a-button type="primary" :loading="gasReviewSaving" @click="reviewGasStation(true)">审核通过</a-button>
|
||||
<a-textarea
|
||||
v-model="gasRejectReason"
|
||||
:max-length="2000"
|
||||
show-word-limit
|
||||
placeholder="审核不通过时,请填写理由"
|
||||
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||
/>
|
||||
<a-button status="danger" :loading="gasReviewSaving" @click="reviewGasStation(false)">审核不通过</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-tabs v-if="detailCollections.length" class="detail-collections">
|
||||
<a-tab-pane v-for="collection in detailCollections" :key="collection.key" :title="collection.title">
|
||||
<a-table :data="collection.rows" :pagination="false" size="small">
|
||||
@@ -126,6 +243,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Message, Modal } from '@arco-design/web-vue';
|
||||
import { IconPlus, IconRefresh } from '@arco-design/web-vue/es/icon';
|
||||
import dayjs from 'dayjs';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@@ -156,6 +274,21 @@ const pageSize = 20;
|
||||
const total = ref(0);
|
||||
const list = ref<Row[]>([]);
|
||||
const accountCounts = ref<Record<string, number>>({});
|
||||
const deliveryPointCounts = ref<Record<string, number>>({});
|
||||
const accountModalVisible = ref(false);
|
||||
const accountLoading = ref(false);
|
||||
const accountList = ref<Row[]>([]);
|
||||
const accountOwner = ref<Row>({});
|
||||
const accountPage = ref(1);
|
||||
const accountPageSize = 10;
|
||||
const accountTotal = ref(0);
|
||||
const accountFormVisible = ref(false);
|
||||
const accountSaving = ref(false);
|
||||
const accountEditingIdentity = ref('');
|
||||
const accountForm = reactive<Record<string, any>>({});
|
||||
const gasStatusSaving = ref(false);
|
||||
const gasReviewSaving = ref(false);
|
||||
const gasRejectReason = ref('');
|
||||
const walletByOwner = ref<Record<string, Row>>({});
|
||||
const filters = reactive({
|
||||
keyword: typeof route.query.keyword === 'string' ? route.query.keyword : '',
|
||||
@@ -228,13 +361,21 @@ const formFields = computed(() =>
|
||||
);
|
||||
const displayFields = computed(() =>
|
||||
props.definition.fields
|
||||
.filter((field) => field.key !== 'password')
|
||||
.filter(
|
||||
(field) =>
|
||||
field.key !== 'password' &&
|
||||
!(
|
||||
props.definition.name === 'gas_basic' &&
|
||||
(field.key === 'longitude' || field.key === 'latitude')
|
||||
),
|
||||
)
|
||||
.slice(0, 6),
|
||||
);
|
||||
const detailEntries = computed(() => {
|
||||
const entries = Object.entries(detail.value).filter(
|
||||
([key, value]) =>
|
||||
key !== 'id' &&
|
||||
!(props.definition.name === 'gas_basic' && key === 'status') &&
|
||||
!key.endsWith('_id') &&
|
||||
!Array.isArray(value) &&
|
||||
!(value && typeof value === 'object' && key !== 'order' && key !== 'contract'),
|
||||
@@ -341,6 +482,7 @@ async function load() {
|
||||
total.value = result.total;
|
||||
}
|
||||
await loadAccountCounts();
|
||||
await loadDeliveryPointCounts();
|
||||
await loadWallets();
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
@@ -408,21 +550,169 @@ async function loadAccountCounts() {
|
||||
}, {});
|
||||
}
|
||||
|
||||
function manageAccounts(row: Row) {
|
||||
async function loadDeliveryPointCounts() {
|
||||
if (props.definition.name !== 'gas_basic') {
|
||||
deliveryPointCounts.value = {};
|
||||
return;
|
||||
}
|
||||
const gasIdentities = list.value
|
||||
.map((row) => String(row.identity ?? ''))
|
||||
.filter(Boolean);
|
||||
if (!gasIdentities.length) {
|
||||
deliveryPointCounts.value = {};
|
||||
return;
|
||||
}
|
||||
const deliveryPoints = await loadAllRows('/delivery_basic', {
|
||||
gas_basic_identities: gasIdentities.join(','),
|
||||
});
|
||||
deliveryPointCounts.value = deliveryPoints.reduce<Record<string, number>>(
|
||||
(counts, deliveryPoint) => {
|
||||
const identity = String(deliveryPoint.gas_basic_identity ?? '');
|
||||
if (identity) counts[identity] = (counts[identity] ?? 0) + 1;
|
||||
return counts;
|
||||
},
|
||||
{},
|
||||
);
|
||||
}
|
||||
|
||||
function recordStatusLabel(status: number) {
|
||||
return { 0: '待审核', 1: '启用', 2: '停用', 3: '已归档', 4: '已冻结' }[status] ?? '未知';
|
||||
}
|
||||
|
||||
function recordStatusColor(status: number) {
|
||||
return { 0: 'orange', 1: 'green', 2: 'red', 3: 'gray', 4: 'purple' }[status] ?? 'gray';
|
||||
}
|
||||
|
||||
async function manageAccounts(row: Row) {
|
||||
const management = props.definition.accountManagement;
|
||||
if (!management) return;
|
||||
const routeName = management.resource === '/gas_account'
|
||||
? 'organization-gas-account'
|
||||
: 'organization-delivery-account';
|
||||
router.push({
|
||||
name: routeName,
|
||||
query: {
|
||||
owner_identity: String(row.identity ?? ''),
|
||||
relation_key: management.relationKey,
|
||||
accountOwner.value = row;
|
||||
accountPage.value = 1;
|
||||
accountModalVisible.value = true;
|
||||
await loadManagedAccounts();
|
||||
}
|
||||
|
||||
async function loadManagedAccounts() {
|
||||
const management = props.definition.accountManagement;
|
||||
const ownerIdentity = String(accountOwner.value.identity ?? '');
|
||||
if (!management || !ownerIdentity) return;
|
||||
const filterKey = management.relationKey === 'gas_basic_identity'
|
||||
? 'gas_basic_identities'
|
||||
: 'delivery_basic_identities';
|
||||
accountLoading.value = true;
|
||||
try {
|
||||
const result = await resourceApi.list<Row>(
|
||||
management.resource,
|
||||
accountPage.value,
|
||||
accountPageSize,
|
||||
{ [filterKey]: ownerIdentity },
|
||||
);
|
||||
accountList.value = result.list;
|
||||
accountTotal.value = result.total;
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
} finally {
|
||||
accountLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetAccountForm(row?: Row) {
|
||||
accountForm.username = row?.username ?? '';
|
||||
accountForm.password = '';
|
||||
accountForm.display_name = row?.display_name ?? '';
|
||||
accountForm.role_code = row?.role_code ?? '';
|
||||
}
|
||||
|
||||
function openAccountCreate() {
|
||||
accountEditingIdentity.value = '';
|
||||
resetAccountForm();
|
||||
accountFormVisible.value = true;
|
||||
}
|
||||
|
||||
function openAccountEdit(row: Row) {
|
||||
accountEditingIdentity.value = String(row.identity ?? '');
|
||||
resetAccountForm(row);
|
||||
accountFormVisible.value = true;
|
||||
}
|
||||
|
||||
async function saveAccount() {
|
||||
const management = props.definition.accountManagement;
|
||||
const ownerIdentity = String(accountOwner.value.identity ?? '');
|
||||
if (!management || !ownerIdentity) return;
|
||||
if (!String(accountForm.username ?? '').trim() ||
|
||||
(!accountEditingIdentity.value && !String(accountForm.password ?? '').trim())) {
|
||||
Message.warning('请填写用户名和密码');
|
||||
return;
|
||||
}
|
||||
accountSaving.value = true;
|
||||
try {
|
||||
const payload: Record<string, unknown> = {
|
||||
display_name: String(accountForm.display_name ?? '').trim(),
|
||||
role_code: String(accountForm.role_code ?? '').trim(),
|
||||
[management.relationKey]: ownerIdentity,
|
||||
};
|
||||
if (!accountEditingIdentity.value) {
|
||||
payload.username = String(accountForm.username).trim();
|
||||
payload.password = accountForm.password;
|
||||
}
|
||||
if (accountEditingIdentity.value) {
|
||||
await resourceApi.update(management.resource, accountEditingIdentity.value, payload);
|
||||
} else {
|
||||
await resourceApi.create(management.resource, payload);
|
||||
}
|
||||
Message.success('账户保存成功');
|
||||
accountFormVisible.value = false;
|
||||
await Promise.all([loadManagedAccounts(), loadAccountCounts()]);
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
} finally {
|
||||
accountSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAccountStatus(row: Row) {
|
||||
const management = props.definition.accountManagement;
|
||||
if (!management) return;
|
||||
const targetStatus = Number(row.status) === 1 ? 2 : 1;
|
||||
Modal.warning({
|
||||
title: targetStatus === 1 ? '确认启用账户' : '确认禁用账户',
|
||||
content: targetStatus === 1 ? '启用后该账户可以正常使用。' : '禁用后该账户将无法继续使用。',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await resourceApi.updateStatus(management.resource, String(row.identity), targetStatus);
|
||||
Message.success('账户状态已更新');
|
||||
await loadManagedAccounts();
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function archiveAccount(row: Row) {
|
||||
const management = props.definition.accountManagement;
|
||||
if (!management) return;
|
||||
Modal.warning({
|
||||
title: '确认删除账户',
|
||||
content: '删除后该账户将被归档,无法继续登录。',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await resourceApi.archive(management.resource, String(row.identity));
|
||||
Message.success('账户已删除');
|
||||
if (accountList.value.length === 1 && accountPage.value > 1) accountPage.value -= 1;
|
||||
await Promise.all([loadManagedAccounts(), loadAccountCounts()]);
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function changeAccountPage(next: number) {
|
||||
accountPage.value = next;
|
||||
await loadManagedAccounts();
|
||||
}
|
||||
|
||||
function viewCredentials(row: Row) {
|
||||
router.push({
|
||||
name: 'staff-credential',
|
||||
@@ -479,12 +769,57 @@ async function openDetail(row: Row) {
|
||||
props.definition.resource,
|
||||
String(row.identity),
|
||||
);
|
||||
if (props.definition.name === 'gas_basic') gasRejectReason.value = '';
|
||||
detailVisible.value = true;
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
}
|
||||
}
|
||||
|
||||
async function updateGasStatus(enabled: string | number | boolean) {
|
||||
const identity = String(detail.value.identity ?? '');
|
||||
if (!identity) return;
|
||||
const targetStatus = Boolean(enabled) ? 1 : 2;
|
||||
gasStatusSaving.value = true;
|
||||
try {
|
||||
await resourceApi.updateStatus(
|
||||
props.definition.resource,
|
||||
identity,
|
||||
targetStatus,
|
||||
);
|
||||
Message.success('状态修改成功');
|
||||
await Promise.all([openDetail({ identity }), load()]);
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
} finally {
|
||||
gasStatusSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function reviewGasStation(approved: boolean) {
|
||||
const identity = String(detail.value.identity ?? '');
|
||||
const reason = gasRejectReason.value.trim();
|
||||
if (!identity) return;
|
||||
if (!approved && !reason) {
|
||||
Message.warning('请填写审核不通过理由');
|
||||
return;
|
||||
}
|
||||
gasReviewSaving.value = true;
|
||||
try {
|
||||
await resourceApi.action(
|
||||
`${props.definition.resource}/${identity}/review`,
|
||||
'POST',
|
||||
{ approved, reason },
|
||||
);
|
||||
Message.success(approved ? '审核已通过' : '审核已拒绝');
|
||||
await Promise.all([openDetail({ identity }), load()]);
|
||||
} catch (error) {
|
||||
Message.error((error as Error).message);
|
||||
} finally {
|
||||
gasReviewSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetailAction(action: DetailAction) {
|
||||
activeAction.value = action;
|
||||
for (const field of action.fields ?? []) actionForm[field.key] = undefined;
|
||||
@@ -644,7 +979,7 @@ function formatValue(value: unknown) {
|
||||
|
||||
function fieldLabel(key: string) {
|
||||
const aliases: Record<string, string> = {
|
||||
identity: '业务标识',
|
||||
identity: '标识',
|
||||
created_at: '创建时间',
|
||||
updated_at: '更新时间',
|
||||
version: '版本',
|
||||
@@ -795,6 +1130,39 @@ function optionLabel(option: Row) {
|
||||
.detail-actions {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.account-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.status-editor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: var(--color-fill-1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.status-editor-label {
|
||||
color: var(--color-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-switch-label {
|
||||
margin-left: auto;
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
.review-panel {
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
background: var(--color-fill-1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.review-title {
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.muted-text {
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user