feat(frontend): add inspection template management page
Create CRUD page for inspection templates with: - List page with search by name/bizType/status - Modal form with basic info + inline editable items table - Support add/delete inspection items with category, name, code, input type, sort, required fields Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kkfluous
138
apps/web-antd/src/views/asset/inspection-template/data.ts
Normal file
138
apps/web-antd/src/views/asset/inspection-template/data.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
|
||||
export const BIZ_TYPE_OPTIONS = [
|
||||
{ label: '备车', value: 1 },
|
||||
{ label: '交车', value: 2 },
|
||||
{ label: '还车', value: 3 },
|
||||
];
|
||||
|
||||
export const STATUS_OPTIONS = [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 0 },
|
||||
];
|
||||
|
||||
export const INPUT_TYPE_OPTIONS = [
|
||||
{ label: '勾选(合格/不合格)', value: 'checkbox' },
|
||||
{ label: '数值', value: 'number' },
|
||||
{ label: '文本', value: 'text' },
|
||||
];
|
||||
|
||||
/** 搜索表单 */
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '模板名称',
|
||||
component: 'Input',
|
||||
componentProps: { placeholder: '请输入模板名称' },
|
||||
},
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '适用业务',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
placeholder: '请选择',
|
||||
options: BIZ_TYPE_OPTIONS,
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
placeholder: '请选择',
|
||||
options: STATUS_OPTIONS,
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/** 表格列 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{ type: 'checkbox', width: 60, fixed: 'left' },
|
||||
{ field: 'code', title: '模板编码', minWidth: 140, fixed: 'left' },
|
||||
{ field: 'name', title: '模板名称', minWidth: 180 },
|
||||
{
|
||||
field: 'bizType',
|
||||
title: '适用业务',
|
||||
minWidth: 100,
|
||||
formatter({ cellValue }: any) {
|
||||
return BIZ_TYPE_OPTIONS.find((o) => o.value === cellValue)?.label ?? cellValue;
|
||||
},
|
||||
},
|
||||
{ field: 'vehicleType', title: '适用车型', minWidth: 120 },
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
minWidth: 80,
|
||||
formatter({ cellValue }: any) {
|
||||
return cellValue === 1 ? '启用' : '禁用';
|
||||
},
|
||||
},
|
||||
{ field: 'remark', title: '备注', minWidth: 150 },
|
||||
{ field: 'createTime', title: '创建时间', minWidth: 180, formatter: 'formatDateTime' },
|
||||
{ title: '操作', width: 160, fixed: 'right', slots: { default: 'actions' } },
|
||||
];
|
||||
}
|
||||
|
||||
/** 模板基本信息表单 */
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
dependencies: { triggerFields: [''], show: () => false },
|
||||
},
|
||||
{
|
||||
fieldName: 'code',
|
||||
label: '模板编码',
|
||||
component: 'Input',
|
||||
componentProps: { placeholder: '请输入模板编码' },
|
||||
rules: z.string().min(1, { message: '请输入模板编码' }),
|
||||
},
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: '模板名称',
|
||||
component: 'Input',
|
||||
componentProps: { placeholder: '请输入模板名称' },
|
||||
rules: z.string().min(1, { message: '请输入模板名称' }),
|
||||
},
|
||||
{
|
||||
fieldName: 'bizType',
|
||||
label: '适用业务',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
placeholder: '请选择适用业务',
|
||||
options: BIZ_TYPE_OPTIONS,
|
||||
},
|
||||
rules: z.number({ message: '请选择适用业务' }),
|
||||
},
|
||||
{
|
||||
fieldName: 'vehicleType',
|
||||
label: '适用车型',
|
||||
component: 'Input',
|
||||
componentProps: { placeholder: '留空表示通用模板' },
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: STATUS_OPTIONS,
|
||||
},
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
component: 'Textarea',
|
||||
componentProps: { placeholder: '请输入备注', rows: 2 },
|
||||
},
|
||||
];
|
||||
}
|
||||
124
apps/web-antd/src/views/asset/inspection-template/index.vue
Normal file
124
apps/web-antd/src/views/asset/inspection-template/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { InspectionApi } from '#/api/asset/inspection';
|
||||
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import {
|
||||
deleteInspectionTemplate,
|
||||
getInspectionTemplatePage,
|
||||
} from '#/api/asset/inspection';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
import Form from './modules/form.vue';
|
||||
|
||||
const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
function handleEdit(row: InspectionApi.Template) {
|
||||
formModalApi.setData(row).open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: InspectionApi.Template) {
|
||||
const hideLoading = message.loading({
|
||||
content: $t('ui.actionMessage.deleting', [row.name]),
|
||||
duration: 0,
|
||||
});
|
||||
try {
|
||||
await deleteInspectionTemplate(row.id!);
|
||||
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
|
||||
handleRefresh();
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
schema: useGridFormSchema(),
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
return await getInspectionTemplatePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
search: true,
|
||||
},
|
||||
} as VxeTableGridOptions<InspectionApi.Template>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormModal @success="handleRefresh" />
|
||||
<Grid table-title="验车模板">
|
||||
<template #toolbar-tools>
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('ui.actionTitle.create', ['模板']),
|
||||
type: 'primary',
|
||||
icon: ACTION_ICON.ADD,
|
||||
auth: ['asset:inspection-template:create'],
|
||||
onClick: handleCreate,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'link',
|
||||
icon: ACTION_ICON.EDIT,
|
||||
auth: ['asset:inspection-template:update'],
|
||||
onClick: handleEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.delete'),
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
auth: ['asset:inspection-template:delete'],
|
||||
popConfirm: {
|
||||
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
|
||||
confirm: handleDelete.bind(null, row),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,221 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InspectionApi } from '#/api/asset/inspection';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Input,
|
||||
InputNumber,
|
||||
message,
|
||||
Select,
|
||||
Table,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
createInspectionTemplate,
|
||||
getInspectionTemplate,
|
||||
updateInspectionTemplate,
|
||||
} from '#/api/asset/inspection';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { INPUT_TYPE_OPTIONS, useFormSchema } from '../data';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<InspectionApi.Template>();
|
||||
const items = ref<InspectionApi.TemplateItem[]>([]);
|
||||
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['验车模板'])
|
||||
: $t('ui.actionTitle.create', ['验车模板']);
|
||||
});
|
||||
|
||||
const [BasicForm, basicFormApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: { class: 'w-full' },
|
||||
formItemClass: 'col-span-2',
|
||||
labelWidth: 120,
|
||||
},
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-4',
|
||||
});
|
||||
|
||||
// 检查项列定义
|
||||
const itemColumns = [
|
||||
{ title: '序号', key: 'index', width: 60 },
|
||||
{ title: '分类', key: 'category', width: 140 },
|
||||
{ title: '检查项名称', key: 'itemName', width: 180 },
|
||||
{ title: '检查项编码', key: 'itemCode', width: 140 },
|
||||
{ title: '输入类型', key: 'inputType', width: 160 },
|
||||
{ title: '排序', key: 'sort', width: 80 },
|
||||
{ title: '必填', key: 'required', width: 80 },
|
||||
{ title: '操作', key: 'action', width: 80, fixed: 'right' as const },
|
||||
];
|
||||
|
||||
function handleAddItem() {
|
||||
items.value.push({
|
||||
category: '',
|
||||
itemName: '',
|
||||
itemCode: '',
|
||||
inputType: 'checkbox',
|
||||
sort: items.value.length,
|
||||
required: 1,
|
||||
});
|
||||
}
|
||||
|
||||
function handleDeleteItem(index: number) {
|
||||
items.value.splice(index, 1);
|
||||
}
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await basicFormApi.validate();
|
||||
if (!valid) return;
|
||||
|
||||
if (items.value.length === 0) {
|
||||
message.warning('请至少添加一个检查项');
|
||||
return;
|
||||
}
|
||||
|
||||
// 校验检查项必填字段
|
||||
for (let i = 0; i < items.value.length; i++) {
|
||||
const item = items.value[i]!;
|
||||
if (!item.category || !item.itemName || !item.itemCode) {
|
||||
message.warning(`第 ${i + 1} 项的分类、名称、编码不能为空`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
modalApi.lock();
|
||||
const data = (await basicFormApi.getValues()) as InspectionApi.Template;
|
||||
data.items = items.value;
|
||||
|
||||
try {
|
||||
await (formData.value?.id
|
||||
? updateInspectionTemplate(data)
|
||||
: createInspectionTemplate(data));
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
message.success($t('ui.actionMessage.operationSuccess'));
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
items.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
const data = modalApi.getData<InspectionApi.Template>();
|
||||
if (!data || !data.id) return;
|
||||
|
||||
modalApi.lock();
|
||||
try {
|
||||
formData.value = await getInspectionTemplate(data.id);
|
||||
await basicFormApi.setValues(formData.value);
|
||||
items.value = formData.value.items || [];
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-4/5" style="max-width: 1200px">
|
||||
<div class="space-y-4" style="max-height: 75vh; overflow-y: auto">
|
||||
<!-- 基本信息 -->
|
||||
<Card title="基本信息" size="small">
|
||||
<BasicForm />
|
||||
</Card>
|
||||
|
||||
<!-- 检查项列表 -->
|
||||
<Card title="检查项" size="small">
|
||||
<Table
|
||||
:columns="itemColumns"
|
||||
:data-source="items"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 900 }"
|
||||
size="small"
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'index'">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'category'">
|
||||
<Input
|
||||
v-model:value="record.category"
|
||||
placeholder="分类"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'itemName'">
|
||||
<Input
|
||||
v-model:value="record.itemName"
|
||||
placeholder="检查项名称"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'itemCode'">
|
||||
<Input
|
||||
v-model:value="record.itemCode"
|
||||
placeholder="编码"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'inputType'">
|
||||
<Select
|
||||
v-model:value="record.inputType"
|
||||
:options="INPUT_TYPE_OPTIONS"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'sort'">
|
||||
<InputNumber
|
||||
v-model:value="record.sort"
|
||||
:min="0"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'required'">
|
||||
<Select
|
||||
v-model:value="record.required"
|
||||
:options="[
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 },
|
||||
]"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
size="small"
|
||||
@click="handleDeleteItem(index)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
<Button type="dashed" block class="mt-3" @click="handleAddItem">
|
||||
+ 添加检查项
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user