fadd
This commit is contained in:
@@ -1,3 +1,3 @@
|
||||
export * from './feature';
|
||||
export * from './product';
|
||||
export * from './whitelist';
|
||||
export * from './query-whitelist';
|
||||
|
||||
89
apps/web-antd/src/api/product-manage/query-whitelist.ts
Normal file
89
apps/web-antd/src/api/product-manage/query-whitelist.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace QueryWhitelistApi {
|
||||
export interface Entry {
|
||||
id: string;
|
||||
name: string;
|
||||
id_card_masked: string;
|
||||
api_codes: string[];
|
||||
status: string;
|
||||
remark: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface OperationResponse {
|
||||
code: number;
|
||||
message: string;
|
||||
transaction_id: string;
|
||||
entry?: Entry;
|
||||
}
|
||||
|
||||
export interface CreateRequest {
|
||||
name?: string;
|
||||
id_card: string;
|
||||
api_codes: string[];
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
export interface AppendRequest {
|
||||
name?: string;
|
||||
id_card: string;
|
||||
api_codes: string[];
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
export interface OpLogItem {
|
||||
id: string;
|
||||
admin_user_id: string;
|
||||
admin_username: string;
|
||||
action: string;
|
||||
action_text: string;
|
||||
name: string;
|
||||
id_card: string;
|
||||
id_card_masked: string;
|
||||
api_codes: string[];
|
||||
remark: string;
|
||||
tianyuan_code: number;
|
||||
tianyuan_message: string;
|
||||
transaction_id: string;
|
||||
entry_id: string;
|
||||
entry_status: string;
|
||||
entry_api_codes: string[];
|
||||
create_time: string;
|
||||
}
|
||||
|
||||
export interface OpLogList {
|
||||
total: number;
|
||||
items: OpLogItem[];
|
||||
}
|
||||
}
|
||||
|
||||
async function createQueryWhitelist(data: QueryWhitelistApi.CreateRequest) {
|
||||
return requestClient.post<QueryWhitelistApi.OperationResponse>(
|
||||
'/query-whitelist/create',
|
||||
data,
|
||||
);
|
||||
}
|
||||
|
||||
async function appendQueryWhitelist(data: QueryWhitelistApi.AppendRequest) {
|
||||
return requestClient.post<QueryWhitelistApi.OperationResponse>(
|
||||
'/query-whitelist/append',
|
||||
data,
|
||||
);
|
||||
}
|
||||
|
||||
async function getQueryWhitelistOpLogList(params: Recordable<any>) {
|
||||
return requestClient.get<QueryWhitelistApi.OpLogList>(
|
||||
'/query-whitelist/op-log/list',
|
||||
{ params },
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
appendQueryWhitelist,
|
||||
createQueryWhitelist,
|
||||
getQueryWhitelistOpLogList,
|
||||
};
|
||||
@@ -1,101 +0,0 @@
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace WhitelistApi {
|
||||
export interface WhitelistItem {
|
||||
id: string;
|
||||
id_card: string;
|
||||
feature_id: string;
|
||||
feature_api_id: string;
|
||||
feature_name: string;
|
||||
user_id: string;
|
||||
amount: number;
|
||||
status: number;
|
||||
status_text: string;
|
||||
create_time: string;
|
||||
update_time: string;
|
||||
}
|
||||
|
||||
export interface WhitelistList {
|
||||
total: number;
|
||||
items: WhitelistItem[];
|
||||
}
|
||||
|
||||
export interface CreateWhitelistRequest {
|
||||
id_card: string;
|
||||
feature_id: string;
|
||||
amount?: number;
|
||||
status?: number;
|
||||
}
|
||||
|
||||
export interface BatchCreateWhitelistRequest {
|
||||
id_card: string;
|
||||
feature_ids: string[];
|
||||
amount?: number;
|
||||
status?: number;
|
||||
}
|
||||
|
||||
export interface BatchCreateWhitelistResultItem {
|
||||
feature_id: string;
|
||||
feature_api_id: string;
|
||||
feature_name: string;
|
||||
action: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export interface BatchCreateWhitelistResponse {
|
||||
success_count: number;
|
||||
skip_count: number;
|
||||
fail_count: number;
|
||||
items: BatchCreateWhitelistResultItem[];
|
||||
}
|
||||
|
||||
export interface UpdateWhitelistRequest {
|
||||
status?: number;
|
||||
amount?: number;
|
||||
}
|
||||
}
|
||||
|
||||
async function getWhitelistList(params: Recordable<any>) {
|
||||
return requestClient.get<WhitelistApi.WhitelistList>('/whitelist/list', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
async function createWhitelist(data: WhitelistApi.CreateWhitelistRequest) {
|
||||
return requestClient.post<{ id: string }>('/whitelist/create', data);
|
||||
}
|
||||
|
||||
async function batchCreateWhitelist(
|
||||
data: WhitelistApi.BatchCreateWhitelistRequest,
|
||||
) {
|
||||
return requestClient.post<WhitelistApi.BatchCreateWhitelistResponse>(
|
||||
'/whitelist/batch-create',
|
||||
data,
|
||||
);
|
||||
}
|
||||
|
||||
async function updateWhitelist(
|
||||
id: string,
|
||||
data: WhitelistApi.UpdateWhitelistRequest,
|
||||
) {
|
||||
return requestClient.put<{ success: boolean }>(
|
||||
`/whitelist/update/${id}`,
|
||||
data,
|
||||
);
|
||||
}
|
||||
|
||||
async function deleteWhitelist(id: string) {
|
||||
return requestClient.delete<{ success: boolean }>(
|
||||
`/whitelist/delete/${id}`,
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
batchCreateWhitelist,
|
||||
createWhitelist,
|
||||
deleteWhitelist,
|
||||
getWhitelistList,
|
||||
updateWhitelist,
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
|
||||
/** 快捷勾选预设：按模块编号 api_id 匹配 */
|
||||
export const QUERY_WHITELIST_QUICK_PRESETS = [
|
||||
{
|
||||
label: '司法涉诉 + 违约失信',
|
||||
apiIds: ['FLXG7E8F', 'JRZQ8A2D'],
|
||||
},
|
||||
{
|
||||
label: '司法涉诉',
|
||||
apiIds: ['FLXG7E8F'],
|
||||
},
|
||||
{
|
||||
label: '违约失信',
|
||||
apiIds: ['JRZQ8A2D'],
|
||||
},
|
||||
] as const;
|
||||
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id_card',
|
||||
label: '身份证号',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入18位中国大陆身份证号',
|
||||
maxlength: 18,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '姓名',
|
||||
defaultValue: '*',
|
||||
help: '填 * 表示只按身份证匹配，不校验姓名',
|
||||
componentProps: {
|
||||
placeholder: '默认 *，仅按身份证匹配',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'api_codes',
|
||||
label: '产品编码',
|
||||
rules: 'required',
|
||||
formItemClass: 'items-start',
|
||||
componentProps: {
|
||||
mode: 'multiple',
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
allowClear: true,
|
||||
placeholder: '请选择要屏蔽的产品编码，支持多选',
|
||||
options: [],
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
componentProps: {
|
||||
placeholder: '可选，最长500字符',
|
||||
maxlength: 500,
|
||||
showCount: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
296
apps/web-antd/src/views/product-manage/query-whitelist/list.vue
Normal file
296
apps/web-antd/src/views/product-manage/query-whitelist/list.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { FeatureApi, QueryWhitelistApi } from '#/api/product-manage';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Alert, Button, Card, Descriptions, message, Space, Tag } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
appendQueryWhitelist,
|
||||
createQueryWhitelist,
|
||||
getFeatureList,
|
||||
getQueryWhitelistOpLogList,
|
||||
} from '#/api/product-manage';
|
||||
|
||||
import { QUERY_WHITELIST_QUICK_PRESETS, useFormSchema } from './data';
|
||||
import {
|
||||
formatApiCodes,
|
||||
isTianyuanSuccess,
|
||||
useOpLogColumns,
|
||||
useOpLogGridFormSchema,
|
||||
} from './op-log-data';
|
||||
|
||||
const featureList = ref<FeatureApi.FeatureItem[]>([]);
|
||||
const lastResult = ref<QueryWhitelistApi.OperationResponse | null>(null);
|
||||
const submitting = ref(false);
|
||||
const submitAction = ref<'create' | 'append' | null>(null);
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
commonConfig: {
|
||||
labelWidth: 100,
|
||||
},
|
||||
});
|
||||
|
||||
const [OpLogGrid, opLogGridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useOpLogGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useOpLogColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getQueryWhitelistOpLogList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<QueryWhitelistApi.OpLogItem>,
|
||||
});
|
||||
|
||||
async function loadFeatureOptions() {
|
||||
const result = await getFeatureList({ page: 1, pageSize: 500 });
|
||||
featureList.value = result.items || [];
|
||||
const options = featureList.value.map((item) => ({
|
||||
label: `${item.api_id} - ${item.name}`,
|
||||
value: item.api_id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
fieldName: 'api_codes',
|
||||
componentProps: {
|
||||
options,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
function resolveApiCodesByIds(apiIds: string[]) {
|
||||
const availableIds = new Set(featureList.value.map((item) => item.api_id));
|
||||
return apiIds.filter((apiId) => availableIds.has(apiId));
|
||||
}
|
||||
|
||||
async function applyPreset(apiIds: readonly string[]) {
|
||||
if (featureList.value.length === 0) {
|
||||
await loadFeatureOptions();
|
||||
}
|
||||
const selectedCodes = resolveApiCodesByIds([...apiIds]);
|
||||
if (selectedCodes.length === 0) {
|
||||
message.warning('未找到对应产品编码，请确认模块是否存在于系统中');
|
||||
return;
|
||||
}
|
||||
const currentValues = await formApi.getValues();
|
||||
const mergedCodes = Array.from(
|
||||
new Set([...(currentValues.api_codes || []), ...selectedCodes]),
|
||||
);
|
||||
formApi.setValues({
|
||||
...currentValues,
|
||||
api_codes: mergedCodes,
|
||||
});
|
||||
}
|
||||
|
||||
async function applyAllFeatures() {
|
||||
if (featureList.value.length === 0) {
|
||||
await loadFeatureOptions();
|
||||
}
|
||||
const allCodes = featureList.value.map((item) => item.api_id);
|
||||
const currentValues = await formApi.getValues();
|
||||
formApi.setValues({
|
||||
...currentValues,
|
||||
api_codes: allCodes,
|
||||
});
|
||||
}
|
||||
|
||||
function refreshOpLog() {
|
||||
opLogGridApi.query();
|
||||
}
|
||||
|
||||
async function submit(action: 'create' | 'append') {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
|
||||
const values = await formApi.getValues();
|
||||
const apiCodes = values.api_codes || [];
|
||||
if (apiCodes.length === 0) {
|
||||
message.warning('请至少选择一个产品编码');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
id_card: values.id_card,
|
||||
name: values.name || '*',
|
||||
api_codes: apiCodes,
|
||||
remark: values.remark || '',
|
||||
};
|
||||
|
||||
submitting.value = true;
|
||||
submitAction.value = action;
|
||||
try {
|
||||
const result =
|
||||
action === 'create'
|
||||
? await createQueryWhitelist(payload)
|
||||
: await appendQueryWhitelist(payload);
|
||||
lastResult.value = result;
|
||||
refreshOpLog();
|
||||
|
||||
if (result.code === 0) {
|
||||
message.success(result.message || '操作成功');
|
||||
} else if (result.code === 1013) {
|
||||
message.warning('规则已存在，请改用「追加接口」');
|
||||
} else if (result.code === 1014) {
|
||||
message.warning('规则不存在，请先调用「创建规则」');
|
||||
} else {
|
||||
message.error(result.message || '操作失败');
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
submitAction.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
loadFeatureOptions();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-4 lg:flex-row">
|
||||
<Card class="flex-1" title="查询白名单配置">
|
||||
<Alert
|
||||
class="mb-4"
|
||||
message="配置「查询为空」屏蔽规则：命中后，指定人员在指定产品接口上的查询将返回 1000 查询为空。首次配置请使用「创建规则」，后续增补产品请使用「追加接口」。"
|
||||
show-icon
|
||||
type="info"
|
||||
/>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="mb-2 text-sm text-gray-500">快捷勾选：</div>
|
||||
<Space wrap>
|
||||
<Button
|
||||
v-for="preset in QUERY_WHITELIST_QUICK_PRESETS"
|
||||
:key="preset.label"
|
||||
size="small"
|
||||
@click="applyPreset(preset.apiIds)"
|
||||
>
|
||||
{{ preset.label }}
|
||||
</Button>
|
||||
<Button size="small" type="dashed" @click="applyAllFeatures">
|
||||
全选产品
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Form />
|
||||
|
||||
<div class="mt-6 flex gap-3">
|
||||
<Button
|
||||
:loading="submitting && submitAction === 'create'"
|
||||
type="primary"
|
||||
@click="submit('create')"
|
||||
>
|
||||
创建规则
|
||||
</Button>
|
||||
<Button
|
||||
:loading="submitting && submitAction === 'append'"
|
||||
@click="submit('append')"
|
||||
>
|
||||
追加接口
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="w-full lg:w-[420px]" title="最近操作结果">
|
||||
<template v-if="lastResult">
|
||||
<Descriptions bordered size="small" :column="1">
|
||||
<Descriptions.Item label="业务码">
|
||||
<Tag :color="lastResult.code === 0 ? 'success' : 'error'">
|
||||
{{ lastResult.code }}
|
||||
</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="描述">
|
||||
{{ lastResult.message }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="流水号">
|
||||
{{ lastResult.transaction_id }}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
<template v-if="lastResult.entry">
|
||||
<div class="mt-4 text-sm font-medium text-gray-700">规则详情</div>
|
||||
<Descriptions bordered class="mt-2" size="small" :column="1">
|
||||
<Descriptions.Item label="规则ID">
|
||||
{{ lastResult.entry.id }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="姓名规则">
|
||||
{{ lastResult.entry.name }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="身份证号">
|
||||
{{ lastResult.entry.id_card_masked }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">
|
||||
{{ lastResult.entry.status }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="备注">
|
||||
{{ lastResult.entry.remark || '-' }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="产品编码">
|
||||
<Space wrap>
|
||||
<Tag v-for="code in lastResult.entry.api_codes" :key="code">
|
||||
{{ code }}
|
||||
</Tag>
|
||||
</Space>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">
|
||||
{{ lastResult.entry.created_at }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="更新时间">
|
||||
{{ lastResult.entry.updated_at }}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</template>
|
||||
</template>
|
||||
<div v-else class="py-8 text-center text-gray-400">
|
||||
提交后将在此展示天远 API 返回结果
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<OpLogGrid table-title="操作记录">
|
||||
<template #api_codes="{ row }">
|
||||
<span class="text-sm">{{ formatApiCodes(row.api_codes) }}</span>
|
||||
</template>
|
||||
<template #entry_api_codes="{ row }">
|
||||
<span class="text-sm">{{ formatApiCodes(row.entry_api_codes) }}</span>
|
||||
</template>
|
||||
<template #tianyuan_code="{ row }">
|
||||
<Tag :color="isTianyuanSuccess(row) ? 'success' : 'error'">
|
||||
{{ row.tianyuan_code }}
|
||||
</Tag>
|
||||
</template>
|
||||
</OpLogGrid>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,109 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { QueryWhitelistApi } from '#/api/product-manage';
|
||||
|
||||
export function useOpLogGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id_card',
|
||||
label: '身份证号',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'action',
|
||||
label: '操作类型',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '创建规则', value: 'create' },
|
||||
{ label: '追加接口', value: 'append' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'tianyuan_code',
|
||||
label: '业务结果',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '成功 (0)', value: 0 },
|
||||
{ label: '规则已存在 (1013)', value: 1013 },
|
||||
{ label: '规则不存在 (1014)', value: 1014 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useOpLogColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'create_time',
|
||||
title: '操作时间',
|
||||
minWidth: 170,
|
||||
},
|
||||
{
|
||||
field: 'admin_username',
|
||||
title: '操作人',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'action_text',
|
||||
title: '操作类型',
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
field: 'id_card',
|
||||
title: '身份证号',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '姓名规则',
|
||||
minWidth: 90,
|
||||
},
|
||||
{
|
||||
field: 'api_codes',
|
||||
title: '提交编码',
|
||||
minWidth: 200,
|
||||
slots: { default: 'api_codes' },
|
||||
},
|
||||
{
|
||||
field: 'tianyuan_code',
|
||||
title: '业务码',
|
||||
minWidth: 90,
|
||||
slots: { default: 'tianyuan_code' },
|
||||
},
|
||||
{
|
||||
field: 'tianyuan_message',
|
||||
title: '返回描述',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'entry_api_codes',
|
||||
title: '当前生效编码',
|
||||
minWidth: 200,
|
||||
slots: { default: 'entry_api_codes' },
|
||||
},
|
||||
{
|
||||
field: 'transaction_id',
|
||||
title: '流水号',
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
title: '备注',
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function formatApiCodes(codes?: string[]) {
|
||||
return codes?.length ? codes.join(', ') : '-';
|
||||
}
|
||||
|
||||
export function isTianyuanSuccess(row: QueryWhitelistApi.OpLogItem) {
|
||||
return row.tianyuan_code === 0;
|
||||
}
|
||||
@@ -1,207 +0,0 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { WhitelistApi } from '#/api/product-manage';
|
||||
|
||||
/** 快捷勾选预设：按模块编号 api_id 匹配 */
|
||||
export const WHITELIST_QUICK_PRESETS = [
|
||||
{
|
||||
label: '司法涉诉 + 违约失信',
|
||||
apiIds: ['FLXG7E8F', 'JRZQ8A2D'],
|
||||
},
|
||||
{
|
||||
label: '司法涉诉',
|
||||
apiIds: ['FLXG7E8F'],
|
||||
},
|
||||
{
|
||||
label: '违约失信',
|
||||
apiIds: ['JRZQ8A2D'],
|
||||
},
|
||||
] as const;
|
||||
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id_card',
|
||||
label: '身份证号',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
placeholder: '请输入被屏蔽对象的身份证号',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'feature_ids',
|
||||
label: '屏蔽模块',
|
||||
rules: 'required',
|
||||
formItemClass: 'items-start',
|
||||
componentProps: {
|
||||
mode: 'multiple',
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
allowClear: true,
|
||||
placeholder: '请选择要屏蔽的模块，支持多选',
|
||||
options: [],
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
fieldName: 'amount',
|
||||
label: '费用（元）',
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '生效', value: 1 },
|
||||
{ label: '已失效', value: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useEditFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id_card',
|
||||
label: '身份证号',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'feature_name',
|
||||
label: '屏蔽模块',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
fieldName: 'amount',
|
||||
label: '费用（元）',
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '生效', value: 1 },
|
||||
{ label: '已失效', value: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id_card',
|
||||
label: '身份证号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'feature_api_id',
|
||||
label: '模块编号',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '生效', value: 1 },
|
||||
{ label: '已失效', value: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useColumns<T = WhitelistApi.WhitelistItem>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id_card',
|
||||
title: '身份证号',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
field: 'feature_api_id',
|
||||
title: '模块编号',
|
||||
minWidth: 140,
|
||||
},
|
||||
{
|
||||
field: 'feature_name',
|
||||
title: '模块名称',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
field: 'amount',
|
||||
formatter: ({ cellValue }) => `¥${(cellValue || 0).toFixed(2)}`,
|
||||
title: '费用（元）',
|
||||
minWidth: 110,
|
||||
},
|
||||
{
|
||||
field: 'status_text',
|
||||
title: '状态',
|
||||
minWidth: 90,
|
||||
},
|
||||
{
|
||||
field: 'create_time',
|
||||
title: '创建时间',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
field: 'update_time',
|
||||
title: '更新时间',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'id_card',
|
||||
nameTitle: '白名单',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
options: [
|
||||
{
|
||||
code: 'edit',
|
||||
text: '编辑',
|
||||
},
|
||||
{
|
||||
code: 'delete',
|
||||
text: '删除',
|
||||
},
|
||||
],
|
||||
name: 'CellOperation',
|
||||
},
|
||||
field: 'operation',
|
||||
fixed: 'right',
|
||||
title: '操作',
|
||||
width: 140,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { WhitelistApi } from '#/api/product-manage';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { deleteWhitelist, getWhitelistList } from '#/api/product-manage';
|
||||
|
||||
import { useColumns, useGridFormSchema } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useColumns(onActionClick),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getWhitelistList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: { code: 'query' },
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<WhitelistApi.WhitelistItem>,
|
||||
});
|
||||
|
||||
function onActionClick(e: OnActionClickParams<WhitelistApi.WhitelistItem>) {
|
||||
switch (e.code) {
|
||||
case 'delete': {
|
||||
onDelete(e.row);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
onEdit(e.row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onEdit(row: WhitelistApi.WhitelistItem) {
|
||||
formDrawerApi.setData(row).open();
|
||||
}
|
||||
|
||||
function onDelete(row: WhitelistApi.WhitelistItem) {
|
||||
const hideLoading = message.loading({
|
||||
content: `正在删除 ${row.id_card} 的白名单记录`,
|
||||
duration: 0,
|
||||
key: 'whitelist_delete_msg',
|
||||
});
|
||||
deleteWhitelist(row.id)
|
||||
.then(() => {
|
||||
message.success({
|
||||
content: '删除成功',
|
||||
key: 'whitelist_delete_msg',
|
||||
});
|
||||
onRefresh();
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading();
|
||||
});
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
function onCreate() {
|
||||
formDrawerApi.setData({}).open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormDrawer @success="onRefresh" />
|
||||
<Grid table-title="模块白名单">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
<Plus class="size-5" />
|
||||
手动添加
|
||||
</Button>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -1,186 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { FeatureApi, WhitelistApi } from '#/api/product-manage';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Button, message, Space } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
batchCreateWhitelist,
|
||||
getFeatureList,
|
||||
updateWhitelist,
|
||||
} from '#/api/product-manage';
|
||||
|
||||
import { useEditFormSchema, useFormSchema, WHITELIST_QUICK_PRESETS } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const formData = ref<WhitelistApi.WhitelistItem>();
|
||||
const isEdit = ref(false);
|
||||
const featureList = ref<FeatureApi.FeatureItem[]>([]);
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const id = ref<string>();
|
||||
|
||||
async function loadFeatureOptions() {
|
||||
const result = await getFeatureList({ page: 1, pageSize: 500 });
|
||||
featureList.value = result.items || [];
|
||||
const options = featureList.value.map((item) => ({
|
||||
label: `${item.api_id} - ${item.name}`,
|
||||
value: item.id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
fieldName: 'feature_ids',
|
||||
componentProps: {
|
||||
options,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
function resolveFeatureIdsByApiIds(apiIds: string[]) {
|
||||
const idMap = new Map(
|
||||
featureList.value.map((item) => [item.api_id, item.id]),
|
||||
);
|
||||
return apiIds
|
||||
.map((apiId) => idMap.get(apiId))
|
||||
.filter((featureId): featureId is string => !!featureId);
|
||||
}
|
||||
|
||||
async function applyPreset(apiIds: readonly string[]) {
|
||||
if (featureList.value.length === 0) {
|
||||
await loadFeatureOptions();
|
||||
}
|
||||
const selectedIds = resolveFeatureIdsByApiIds([...apiIds]);
|
||||
if (selectedIds.length === 0) {
|
||||
message.warning('未找到对应模块，请确认模块编号是否存在于系统中');
|
||||
return;
|
||||
}
|
||||
const currentValues = await formApi.getValues();
|
||||
const mergedIds = Array.from(
|
||||
new Set([...(currentValues.feature_ids || []), ...selectedIds]),
|
||||
);
|
||||
formApi.setValues({
|
||||
...currentValues,
|
||||
feature_ids: mergedIds,
|
||||
});
|
||||
}
|
||||
|
||||
async function applyAllFeatures() {
|
||||
if (featureList.value.length === 0) {
|
||||
await loadFeatureOptions();
|
||||
}
|
||||
const allIds = featureList.value.map((item) => item.id);
|
||||
const currentValues = await formApi.getValues();
|
||||
formApi.setValues({
|
||||
...currentValues,
|
||||
feature_ids: allIds,
|
||||
});
|
||||
}
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
|
||||
const values = await formApi.getValues();
|
||||
drawerApi.lock();
|
||||
try {
|
||||
if (isEdit.value && id.value) {
|
||||
await updateWhitelist(id.value, {
|
||||
amount: values.amount,
|
||||
status: values.status,
|
||||
});
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
const featureIds = values.feature_ids || [];
|
||||
if (featureIds.length === 0) {
|
||||
message.warning('请至少选择一个屏蔽模块');
|
||||
drawerApi.unlock();
|
||||
return;
|
||||
}
|
||||
const result = await batchCreateWhitelist({
|
||||
id_card: values.id_card,
|
||||
feature_ids: featureIds,
|
||||
amount: values.amount,
|
||||
status: values.status,
|
||||
});
|
||||
const { success_count, skip_count, fail_count } = result;
|
||||
if (fail_count > 0) {
|
||||
message.warning(
|
||||
`完成：成功 ${success_count} 条，跳过 ${skip_count} 条，失败 ${fail_count} 条`,
|
||||
);
|
||||
} else if (skip_count > 0) {
|
||||
message.success(
|
||||
`完成：成功 ${success_count} 条，跳过 ${skip_count} 条（已存在）`,
|
||||
);
|
||||
} else {
|
||||
message.success(`已成功屏蔽 ${success_count} 个模块`);
|
||||
}
|
||||
}
|
||||
emit('success');
|
||||
drawerApi.close();
|
||||
} catch {
|
||||
drawerApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(open) {
|
||||
if (!open) return;
|
||||
|
||||
const data = drawerApi.getData<WhitelistApi.WhitelistItem>();
|
||||
formApi.resetForm();
|
||||
isEdit.value = !!data?.id;
|
||||
id.value = data?.id;
|
||||
|
||||
if (isEdit.value && data) {
|
||||
formData.value = data;
|
||||
formApi.setState({ schema: useEditFormSchema() });
|
||||
formApi.setValues({
|
||||
id_card: data.id_card,
|
||||
feature_name: `${data.feature_api_id} - ${data.feature_name || ''}`,
|
||||
amount: data.amount,
|
||||
status: data.status,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
formData.value = undefined;
|
||||
formApi.setState({ schema: useFormSchema() });
|
||||
await loadFeatureOptions();
|
||||
},
|
||||
});
|
||||
|
||||
const getDrawerTitle = computed(() =>
|
||||
isEdit.value ? '编辑白名单' : '手动添加白名单',
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer :title="getDrawerTitle">
|
||||
<div v-if="!isEdit" class="mb-4">
|
||||
<div class="mb-2 text-sm text-gray-500">快捷勾选：</div>
|
||||
<Space wrap>
|
||||
<Button
|
||||
v-for="preset in WHITELIST_QUICK_PRESETS"
|
||||
:key="preset.label"
|
||||
size="small"
|
||||
@click="applyPreset(preset.apiIds)"
|
||||
>
|
||||
{{ preset.label }}
|
||||
</Button>
|
||||
<Button size="small" type="dashed" @click="applyAllFeatures">
|
||||
全选模块
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<Form />
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -10,8 +10,8 @@ export default defineConfig(async () => {
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
// mock代理目标地址
|
||||
// target: 'http://localhost:8888/api',
|
||||
target: 'https://www.onecha.cn/api',
|
||||
target: 'http://localhost:8888/api',
|
||||
// target: 'https://www.onecha.cn/api',
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user