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