增加人像库

增加人像库图片
This commit is contained in:
15683799673 2025-06-24 23:55:59 +08:00
parent 85975db5ee
commit 9c08cca095
10 changed files with 1454 additions and 0 deletions

View File

@ -0,0 +1,61 @@
import type { PersonLibVO, PersonLibForm, PersonLibQuery } from './model';
import type { ID, IDS } from '#/api/common';
import type { PageResult } from '#/api/common';
import { commonExport } from '#/api/helper';
import { requestClient } from '#/api/request';
/**
*
* @param params
* @returns
*/
export function personLibList(params?: PersonLibQuery) {
return requestClient.get<PageResult<PersonLibVO>>('/sis/personLib/list', { params });
}
/**
*
* @param params
* @returns
*/
export function personLibExport(params?: PersonLibQuery) {
return commonExport('/sis/personLib/export', params ?? {});
}
/**
*
* @param id id
* @returns
*/
export function personLibInfo(id: ID) {
return requestClient.get<PersonLibVO>(`/sis/personLib/${id}`);
}
/**
*
* @param data
* @returns void
*/
export function personLibAdd(data: PersonLibForm) {
return requestClient.postWithMsg<void>('/sis/personLib', data);
}
/**
*
* @param data
* @returns void
*/
export function personLibUpdate(data: PersonLibForm) {
return requestClient.putWithMsg<void>('/sis/personLib', data);
}
/**
*
* @param id id
* @returns void
*/
export function personLibRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/sis/personLib/${id}`);
}

View File

@ -0,0 +1,144 @@
import type { PageQuery, BaseEntity } from '#/api/common';
export interface PersonLibVO {
/**
* id
*/
id: string | number;
/**
*
*/
libCode: string;
/**
*
*/
libName: string;
/**
*
*/
libDesc: string;
/**
* 12
*/
libType: number;
/**
* 1: 门禁库2: 黑名单库
*/
busiType: number;
/**
* id
*/
createById: string | number;
/**
* id
*/
updateById: string | number;
/**
*
*/
searchValue: string;
}
export interface PersonLibForm extends BaseEntity {
/**
* id
*/
id?: string | number;
/**
*
*/
libCode?: string;
/**
*
*/
libName?: string;
/**
*
*/
libDesc?: string;
/**
* 12
*/
libType?: number;
/**
* 1: 门禁库2: 黑名单库
*/
busiType?: number;
/**
* id
*/
createById?: string | number;
/**
* id
*/
updateById?: string | number;
/**
*
*/
searchValue?: string;
}
export interface PersonLibQuery extends PageQuery {
/**
*
*/
libCode?: string;
/**
*
*/
libName?: string;
/**
*
*/
libDesc?: string;
/**
* 12
*/
libType?: number;
/**
* 1: 门禁库2: 黑名单库
*/
busiType?: number;
/**
* id
*/
createById?: string | number;
/**
* id
*/
updateById?: string | number;
/**
*
*/
searchValue?: string;
/**
*
*/
params?: any;
}

View File

@ -0,0 +1,61 @@
import type { PersonLibImgVO, PersonLibImgForm, PersonLibImgQuery } from './model';
import type { ID, IDS } from '#/api/common';
import type { PageResult } from '#/api/common';
import { commonExport } from '#/api/helper';
import { requestClient } from '#/api/request';
/**
*
* @param params
* @returns
*/
export function personLibImgList(params?: PersonLibImgQuery) {
return requestClient.get<PageResult<PersonLibImgVO>>('/sis/personLibImg/list', { params });
}
/**
*
* @param params
* @returns
*/
export function personLibImgExport(params?: PersonLibImgQuery) {
return commonExport('/sis/personLibImg/export', params ?? {});
}
/**
*
* @param id id
* @returns
*/
export function personLibImgInfo(id: ID) {
return requestClient.get<PersonLibImgVO>(`/sis/personLibImg/${id}`);
}
/**
*
* @param data
* @returns void
*/
export function personLibImgAdd(data: PersonLibImgForm) {
return requestClient.postWithMsg<void>('/sis/personLibImg', data);
}
/**
*
* @param data
* @returns void
*/
export function personLibImgUpdate(data: PersonLibImgForm) {
return requestClient.putWithMsg<void>('/sis/personLibImg', data);
}
/**
*
* @param id id
* @returns void
*/
export function personLibImgRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/sis/personLibImg/${id}`);
}

View File

@ -0,0 +1,228 @@
import type { PageQuery, BaseEntity } from '#/api/common';
export interface PersonLibImgVO {
/**
* id
*/
id: string | number;
/**
*
*/
libCode: string;
/**
*
*/
imgName: string;
/**
*
*/
imgCode: string;
/**
*
*/
imgUrl: string;
/**
* 1
2 99
*/
sex: number;
/**
*
*/
email: string;
/**
*
*/
tel: string;
/**
*
1 2
3 99
*/
certificateType: number;
/**
*
*/
certificateNo: string;
/**
*
*/
birthDate: string;
/**
* id
*/
createById: string | number;
/**
* id
*/
updateById: string | number;
/**
*
*/
searchValue: string;
}
export interface PersonLibImgForm extends BaseEntity {
/**
* id
*/
id?: string | number;
/**
*
*/
libCode?: string;
/**
*
*/
imgName?: string;
/**
*
*/
imgCode?: string;
/**
*
*/
imgUrl?: string;
/**
* 1
2 99
*/
sex?: number;
/**
*
*/
email?: string;
/**
*
*/
tel?: string;
/**
*
1 2
3 99
*/
certificateType?: number;
/**
*
*/
certificateNo?: string;
/**
*
*/
birthDate?: string;
/**
* id
*/
createById?: string | number;
/**
* id
*/
updateById?: string | number;
/**
*
*/
searchValue?: string;
}
export interface PersonLibImgQuery extends PageQuery {
/**
*
*/
libCode?: string;
/**
*
*/
imgName?: string;
/**
*
*/
imgCode?: string;
/**
*
*/
imgUrl?: string;
/**
* 1
2 99
*/
sex?: number;
/**
*
*/
email?: string;
/**
*
*/
tel?: string;
/**
*
1 2
3 99
*/
certificateType?: number;
/**
*
*/
certificateNo?: string;
/**
*
*/
birthDate?: string;
/**
* id
*/
createById?: string | number;
/**
* id
*/
updateById?: string | number;
/**
*
*/
searchValue?: string;
/**
*
*/
params?: any;
}

View File

@ -0,0 +1,157 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'libCode',
label: '人员库编码',
},
{
component: 'Input',
fieldName: 'libName',
label: '人员库名称',
},
{
component: 'Input',
fieldName: 'libDesc',
label: '人员库描述',
},
{
component: 'Select',
componentProps: {
},
fieldName: 'libType',
label: '库类型1人员库2工服库',
},
{
component: 'Select',
componentProps: {
},
fieldName: 'busiType',
label: '库的业务类型 1: 门禁库2: 黑名单库',
},
{
component: 'Input',
fieldName: 'createById',
label: '创建人id',
},
{
component: 'Input',
fieldName: 'updateById',
label: '更新人id',
},
{
component: 'Input',
fieldName: 'searchValue',
label: '搜索值',
},
];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '主键id',
field: 'id',
},
{
title: '人员库编码',
field: 'libCode',
},
{
title: '人员库名称',
field: 'libName',
},
{
title: '人员库描述',
field: 'libDesc',
},
{
title: '库类型1人员库2工服库',
field: 'libType',
},
{
title: '库的业务类型 1: 门禁库2: 黑名单库',
field: 'busiType',
},
{
title: '创建人id',
field: 'createById',
},
{
title: '更新人id',
field: 'updateById',
},
{
title: '搜索值',
field: 'searchValue',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键id',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '人员库编码',
fieldName: 'libCode',
component: 'Input',
rules: 'required',
},
{
label: '人员库名称',
fieldName: 'libName',
component: 'Input',
rules: 'required',
},
{
label: '人员库描述',
fieldName: 'libDesc',
component: 'Input',
},
{
label: '库类型1人员库2工服库',
fieldName: 'libType',
component: 'Select',
componentProps: {
},
},
{
label: '库的业务类型 1: 门禁库2: 黑名单库',
fieldName: 'busiType',
component: 'Select',
componentProps: {
},
},
{
label: '创建人id',
fieldName: 'createById',
component: 'Input',
},
{
label: '更新人id',
fieldName: 'updateById',
component: 'Input',
},
{
label: '搜索值',
fieldName: 'searchValue',
component: 'Input',
},
];

View File

@ -0,0 +1,182 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
personLibExport,
personLibList,
personLibRemove,
} from '#/api/sis/personLib';
import type { PersonLibForm } from '#/api/sis/personLib/model';
import { commonDownloadExcel } from '#/utils/file/download';
import personLibModal from './personLib-modal.vue';
import { columns, querySchema } from './data';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// RangePicker /
//
// fieldMappingTime: [
// [
// 'createTime',
// ['params[beginTime]', 'params[endTime]'],
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
};
const gridOptions: VxeGridProps = {
checkboxConfig: {
//
highlight: true,
//
reserve: true,
//
// trigger: 'row',
},
// 使i18ngetter
// columns: columns(),
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await personLibList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
//
id: 'sis-personLib-index'
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [PersonLibModal, modalApi] = useVbenModal({
connectedComponent: personLibModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
async function handleEdit(row: Required<PersonLibForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: Required<PersonLibForm>) {
await personLibRemove(row.id);
await tableApi.query();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<PersonLibForm>) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗?`,
onOk: async () => {
await personLibRemove(ids);
await tableApi.query();
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(personLibExport, '人像库数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable table-title="人像库列表">
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['sis:personLib:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['sis:personLib:remove']"
@click="handleMultiDelete">
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['sis:personLib:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['sis:personLib:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['sis:personLib:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<PersonLibModal @reload="tableApi.query()" />
</Page>
</template>

View File

@ -0,0 +1,101 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { personLibAdd, personLibInfo, personLibUpdate } from '#/api/sis/personLib';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
//
formItemClass: 'col-span-2',
// label px
labelWidth: 80,
//
componentProps: {
class: 'w-full',
}
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
//
class: 'w-[550px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await personLibInfo(id);
await formApi.setValues(record);
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValuesreadonly
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? personLibUpdate(data) : personLibAdd(data));
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
</BasicModal>
</template>

View File

@ -0,0 +1,237 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'libCode',
label: '人员库编码',
},
{
component: 'Input',
fieldName: 'imgName',
label: '人像名称',
},
{
component: 'Input',
fieldName: 'imgCode',
label: '图片编码',
},
{
component: 'Input',
fieldName: 'imgUrl',
label: '图片的存储地址',
},
{
component: 'Select',
componentProps: {
},
fieldName: 'sex',
label: ' 1
2 99',
},
{
component: 'Input',
fieldName: 'email',
label: '邮箱',
},
{
component: 'Input',
fieldName: 'tel',
label: '联系方式',
},
{
component: 'Select',
componentProps: {
},
fieldName: 'certificateType',
label: '
1 2
3 99',
},
{
component: 'Input',
fieldName: 'certificateNo',
label: '证件号码',
},
{
component: 'Input',
fieldName: 'birthDate',
label: '出生日期',
},
{
component: 'Input',
fieldName: 'createById',
label: '创建人id',
},
{
component: 'Input',
fieldName: 'updateById',
label: '更新人id',
},
{
component: 'Input',
fieldName: 'searchValue',
label: '搜索值',
},
];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '主键id',
field: 'id',
},
{
title: '人员库编码',
field: 'libCode',
},
{
title: '人像名称',
field: 'imgName',
},
{
title: '图片编码',
field: 'imgCode',
},
{
title: '图片的存储地址',
field: 'imgUrl',
},
{
title: ' 1
2 99',
field: 'sex',
},
{
title: '邮箱',
field: 'email',
},
{
title: '联系方式',
field: 'tel',
},
{
title: '
1 2
3 99',
field: 'certificateType',
},
{
title: '证件号码',
field: 'certificateNo',
},
{
title: '出生日期',
field: 'birthDate',
},
{
title: '创建人id',
field: 'createById',
},
{
title: '更新人id',
field: 'updateById',
},
{
title: '搜索值',
field: 'searchValue',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键id',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '人员库编码',
fieldName: 'libCode',
component: 'Input',
rules: 'required',
},
{
label: '人像名称',
fieldName: 'imgName',
component: 'Input',
rules: 'required',
},
{
label: '图片编码',
fieldName: 'imgCode',
component: 'Input',
},
{
label: '图片的存储地址',
fieldName: 'imgUrl',
component: 'Input',
rules: 'required',
},
{
label: ' 1
2 99',
fieldName: 'sex',
component: 'Select',
componentProps: {
},
},
{
label: '邮箱',
fieldName: 'email',
component: 'Input',
},
{
label: '联系方式',
fieldName: 'tel',
component: 'Input',
},
{
label: '
1 2
3 99',
fieldName: 'certificateType',
component: 'Select',
componentProps: {
},
},
{
label: '证件号码',
fieldName: 'certificateNo',
component: 'Input',
},
{
label: '出生日期',
fieldName: 'birthDate',
component: 'Input',
},
{
label: '创建人id',
fieldName: 'createById',
component: 'Input',
},
{
label: '更新人id',
fieldName: 'updateById',
component: 'Input',
},
{
label: '搜索值',
fieldName: 'searchValue',
component: 'Input',
},
];

View File

@ -0,0 +1,182 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
personLibImgExport,
personLibImgList,
personLibImgRemove,
} from '#/api/sis/personLibImg';
import type { PersonLibImgForm } from '#/api/sis/personLibImg/model';
import { commonDownloadExcel } from '#/utils/file/download';
import personLibImgModal from './personLibImg-modal.vue';
import { columns, querySchema } from './data';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// RangePicker /
//
// fieldMappingTime: [
// [
// 'createTime',
// ['params[beginTime]', 'params[endTime]'],
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
};
const gridOptions: VxeGridProps = {
checkboxConfig: {
//
highlight: true,
//
reserve: true,
//
// trigger: 'row',
},
// 使i18ngetter
// columns: columns(),
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await personLibImgList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
//
id: 'sis-personLibImg-index'
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [PersonLibImgModal, modalApi] = useVbenModal({
connectedComponent: personLibImgModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
async function handleEdit(row: Required<PersonLibImgForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: Required<PersonLibImgForm>) {
await personLibImgRemove(row.id);
await tableApi.query();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<PersonLibImgForm>) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗?`,
onOk: async () => {
await personLibImgRemove(ids);
await tableApi.query();
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(personLibImgExport, '人像信息数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable table-title="人像信息列表">
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['sis:personLibImg:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['sis:personLibImg:remove']"
@click="handleMultiDelete">
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['sis:personLibImg:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['sis:personLibImg:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['sis:personLibImg:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<PersonLibImgModal @reload="tableApi.query()" />
</Page>
</template>

View File

@ -0,0 +1,101 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { personLibImgAdd, personLibImgInfo, personLibImgUpdate } from '#/api/sis/personLibImg';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
//
formItemClass: 'col-span-2',
// label px
labelWidth: 80,
//
componentProps: {
class: 'w-full',
}
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
//
class: 'w-[550px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await personLibImgInfo(id);
await formApi.setValues(record);
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValuesreadonly
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? personLibImgUpdate(data) : personLibImgAdd(data));
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
</BasicModal>
</template>