增加人像页面

This commit is contained in:
lxj
2025-06-26 22:02:40 +08:00
parent f620debe43
commit 1bc8d02cec
16 changed files with 1600 additions and 246 deletions

View File

@@ -0,0 +1,69 @@
import type {
AccessControlDeviceForm,
AccessControlDeviceQuery,
AccessControlDeviceVO,
} from './model';
import type { ID, IDS, PageResult } from '#/api/common';
import { commonExport } from '#/api/helper';
import { requestClient } from '#/api/request';
/**
* 查询门禁设备列表
* @param params
* @returns 门禁设备列表
*/
export function accessControlDeviceList(params?: AccessControlDeviceQuery) {
return requestClient.get<PageResult<AccessControlDeviceVO>>(
'/sis/accessControlDevice/list',
{ params },
);
}
/**
* 导出门禁设备列表
* @param params
* @returns 门禁设备列表
*/
export function accessControlDeviceExport(params?: AccessControlDeviceQuery) {
return commonExport('/sis/accessControlDevice/export', params ?? {});
}
/**
* 查询门禁设备详情
* @param id id
* @returns 门禁设备详情
*/
export function accessControlDeviceInfo(id: ID) {
return requestClient.get<AccessControlDeviceVO>(
`/sis/accessControlDevice/${id}`,
);
}
/**
* 新增门禁设备
* @param data
* @returns void
*/
export function accessControlDeviceAdd(data: AccessControlDeviceForm) {
return requestClient.postWithMsg<void>('/sis/accessControlDevice', data);
}
/**
* 更新门禁设备
* @param data
* @returns void
*/
export function accessControlDeviceUpdate(data: AccessControlDeviceForm) {
return requestClient.putWithMsg<void>('/sis/accessControlDevice', data);
}
/**
* 删除门禁设备
* @param id id
* @returns void
*/
export function accessControlDeviceRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/sis/accessControlDevice/${id}`);
}

View File

@@ -0,0 +1,202 @@
import type { BaseEntity, PageQuery } from '#/api/common';
export interface AccessControlDeviceVO {
/**
* 主键id
*/
id: number | string;
/**
* 设备编码
*/
eqpNo: string;
/**
* 设备名称
*/
eqpName: string;
/**
* 厂商编码
*/
factoryNo: string;
/**
* 设备类型
*/
eqpType: number;
/**
* 接入类型(1: 平台接入2:设备接入)
*/
accessType: number;
/**
* 设备ip
*/
eqpIp: string;
/**
* 设备端口
*/
eqpPort: number;
/**
* 设备账号
*/
eqpAccount: string;
/**
* 设备密码
*/
eqpPwd: string;
/**
* 创建人id
*/
createById: number | string;
/**
* 更新人id
*/
updateById: number | string;
/**
* 搜索值
*/
searchValue: string;
}
export interface AccessControlDeviceForm extends BaseEntity {
/**
* 主键id
*/
id?: number | string;
/**
* 设备编码
*/
eqpNo?: string;
/**
* 设备名称
*/
eqpName?: string;
/**
* 厂商编码
*/
factoryNo?: string;
/**
* 设备类型
*/
eqpType?: number;
/**
* 接入类型(1: 平台接入2:设备接入)
*/
accessType?: number;
/**
* 设备ip
*/
eqpIp?: string;
/**
* 设备端口
*/
eqpPort?: number;
/**
* 设备账号
*/
eqpAccount?: string;
/**
* 设备密码
*/
eqpPwd?: string;
/**
* 创建人id
*/
createById?: number | string;
/**
* 更新人id
*/
updateById?: number | string;
/**
* 搜索值
*/
searchValue?: string;
}
export interface AccessControlDeviceQuery extends PageQuery {
/**
* 设备编码
*/
eqpNo?: string;
/**
* 设备名称
*/
eqpName?: string;
/**
* 厂商编码
*/
factoryNo?: string;
/**
* 设备类型
*/
eqpType?: number;
/**
* 接入类型(1: 平台接入2:设备接入)
*/
accessType?: number;
/**
* 设备ip
*/
eqpIp?: string;
/**
* 设备端口
*/
eqpPort?: number;
/**
* 设备账号
*/
eqpAccount?: string;
/**
* 设备密码
*/
eqpPwd?: string;
/**
* 创建人id
*/
createById?: number | string;
/**
* 更新人id
*/
updateById?: number | string;
/**
* 搜索值
*/
searchValue?: string;
/**
* 日期范围参数
*/
params?: any;
}

View File

@@ -0,0 +1,62 @@
import type { DevicePointForm, DevicePointQuery, DevicePointVO } from './model';
import type { ID, IDS, PageResult } from '#/api/common';
import { commonExport } from '#/api/helper';
import { requestClient } from '#/api/request';
/**
* 查询宇视设备点位(通道)列表
* @param params
* @returns 宇视设备点位(通道)列表
*/
export function devicePointList(params?: DevicePointQuery) {
return requestClient.get<PageResult<DevicePointVO>>('/sis/devicePoint/list', {
params,
});
}
/**
* 导出宇视设备点位(通道)列表
* @param params
* @returns 宇视设备点位(通道)列表
*/
export function devicePointExport(params?: DevicePointQuery) {
return commonExport('/sis/devicePoint/export', params ?? {});
}
/**
* 查询宇视设备点位(通道)详情
* @param id id
* @returns 宇视设备点位(通道)详情
*/
export function devicePointInfo(id: ID) {
return requestClient.get<DevicePointVO>(`/sis/devicePoint/${id}`);
}
/**
* 新增宇视设备点位(通道)
* @param data
* @returns void
*/
export function devicePointAdd(data: DevicePointForm) {
return requestClient.postWithMsg<void>('/sis/devicePoint', data);
}
/**
* 更新宇视设备点位(通道)
* @param data
* @returns void
*/
export function devicePointUpdate(data: DevicePointForm) {
return requestClient.putWithMsg<void>('/sis/devicePoint', data);
}
/**
* 删除宇视设备点位(通道)
* @param id id
* @returns void
*/
export function devicePointRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/sis/devicePoint/${id}`);
}

View File

@@ -0,0 +1,259 @@
import type { BaseEntity, PageQuery } from '#/api/common';
export interface DevicePointVO {
/**
* 主键id
*/
id: number | string;
/**
* 设备编码
*/
eqpCode: string;
/**
* 视频协议 1onvif 2
rtsp
*/
video: number | string;
/**
* 传输协议(AIBOX 需要,一
体机不需要) 1: tcp 2:
udp
*/
transportType: number;
/**
* 点位名称
*/
channelName: string;
/**
* rtsp 地址(当视频协议为
rtsp 时,该字段必填)
*/
rtspAddr: string;
/**
* 点位名称
*/
ip: string;
/**
* 端口
*/
port: number;
/**
* 通道相机账号
*/
username: string;
/**
* 相机密码
*/
pwd: string;
/**
* onvif 设备码流添加方
1主码流 2自定
义码流
*/
videoType: number | string;
/**
* 码流 id当选择自定义码
流时,该字段必填,值为
获取设备码流信息接口返
回的码流 id
*/
videoId: number | string;
/**
* 创建人id
*/
createById: number | string;
/**
* 更新人id
*/
updateById: number | string;
/**
* 搜索值
*/
searchValue: string;
}
export interface DevicePointForm extends BaseEntity {
/**
* 主键id
*/
id?: number | string;
/**
* 设备编码
*/
eqpCode?: string;
/**
* 视频协议 1onvif 2
rtsp
*/
video?: number | string;
/**
* 传输协议(AIBOX 需要,一
体机不需要) 1: tcp 2:
udp
*/
transportType?: number;
/**
* 点位名称
*/
channelName?: string;
/**
* rtsp 地址(当视频协议为
rtsp 时,该字段必填)
*/
rtspAddr?: string;
/**
* 点位名称
*/
ip?: string;
/**
* 端口
*/
port?: number;
/**
* 通道相机账号
*/
username?: string;
/**
* 相机密码
*/
pwd?: string;
/**
* onvif 设备码流添加方
1主码流 2自定
义码流
*/
videoType?: number | string;
/**
* 码流 id当选择自定义码
流时,该字段必填,值为
获取设备码流信息接口返
回的码流 id
*/
videoId?: number | string;
/**
* 创建人id
*/
createById?: number | string;
/**
* 更新人id
*/
updateById?: number | string;
/**
* 搜索值
*/
searchValue?: string;
}
export interface DevicePointQuery extends PageQuery {
/**
* 设备编码
*/
eqpCode?: string;
/**
* 视频协议 1onvif 2
rtsp
*/
video?: number | string;
/**
* 传输协议(AIBOX 需要,一
体机不需要) 1: tcp 2:
udp
*/
transportType?: number;
/**
* 点位名称
*/
channelName?: string;
/**
* rtsp 地址(当视频协议为
rtsp 时,该字段必填)
*/
rtspAddr?: string;
/**
* 点位名称
*/
ip?: string;
/**
* 端口
*/
port?: number;
/**
* 通道相机账号
*/
username?: string;
/**
* 相机密码
*/
pwd?: string;
/**
* onvif 设备码流添加方
1主码流 2自定
义码流
*/
videoType?: number | string;
/**
* 码流 id当选择自定义码
流时,该字段必填,值为
获取设备码流信息接口返
回的码流 id
*/
videoId?: number | string;
/**
* 创建人id
*/
createById?: number | string;
/**
* 更新人id
*/
updateById?: number | string;
/**
* 搜索值
*/
searchValue?: string;
/**
* 日期范围参数
*/
params?: any;
}

View File

@@ -1,10 +1,10 @@
import type { PageQuery, BaseEntity } from '#/api/common';
import type { BaseEntity, PageQuery } from '#/api/common';
export interface PersonLibImgVO {
/**
* 主键id
*/
id: string | number;
id: number | string;
/**
* 人员库编码
@@ -59,28 +59,17 @@ export interface PersonLibImgVO {
*/
birthDate: string;
/**
* 创建人id
*/
createById: string | number;
/**
* 更新人id
*/
updateById: string | number;
/**
* 搜索值
*/
searchValue: string;
}
export interface PersonLibImgForm extends BaseEntity {
/**
* 主键id
*/
id?: string | number;
id?: number | string;
/**
* 人员库编码
@@ -135,21 +124,10 @@ export interface PersonLibImgForm extends BaseEntity {
*/
birthDate?: string;
/**
* 创建人id
*/
createById?: string | number;
/**
* 更新人id
*/
updateById?: string | number;
/**
* 搜索值
*/
searchValue?: string;
}
export interface PersonLibImgQuery extends PageQuery {
@@ -206,16 +184,6 @@ export interface PersonLibImgQuery extends PageQuery {
*/
birthDate?: string;
/**
* 创建人id
*/
createById?: string | number;
/**
* 更新人id
*/
updateById?: string | number;
/**
* 搜索值
*/

View File

@@ -0,0 +1,106 @@
<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 {
accessControlDeviceAdd,
accessControlDeviceInfo,
accessControlDeviceUpdate,
} from '#/api/sis/accessControlDevice';
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-1',
// 默认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-[60%]',
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 accessControlDeviceInfo(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;
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value
? accessControlDeviceUpdate(data)
: accessControlDeviceAdd(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,108 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { DictEnum } from '@vben/constants';
import { getPopupContainer } from '@vben/utils';
import { getDictOptions } from '#/utils/dict';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'eqpName',
label: '设备名称',
},
{
component: 'Select',
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.SIS_ACCESS_CONTROL_DEVICE_TYPE),
},
fieldName: 'factoryNo',
label: '设备厂商',
},
];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '设备编码',
field: 'eqpNo',
},
{
title: '设备名称',
field: 'eqpName',
},
{
title: '设备厂商',
field: 'factoryName',
},
{
title: '设备ip',
field: 'eqpIp',
},
{
title: '设备端口',
field: 'eqpPort',
},
{
title: '设备账号',
field: 'eqpAccount',
},
{
title: '设备密码',
field: 'eqpPwd',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '设备名称',
fieldName: 'eqpName',
component: 'Input',
rules: 'required',
},
{
label: '设备厂商',
fieldName: 'factoryNo',
component: 'Select',
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.SIS_ACCESS_CONTROL_DEVICE_TYPE),
},
},
{
label: '设备ip',
fieldName: 'eqpIp',
component: 'Input',
rules: 'required',
},
{
label: '设备端口',
fieldName: 'eqpPort',
component: 'Input',
rules: 'required',
},
{
label: '设备账号',
fieldName: 'eqpAccount',
component: 'Input',
rules: 'required',
},
{
label: '设备密码',
fieldName: 'eqpPwd',
component: 'Input',
rules: 'required',
},
];

View File

@@ -0,0 +1,182 @@
<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { AccessControlDeviceForm } from '#/api/sis/accessControlDevice/model';
import { Page, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
import {
accessControlDeviceExport,
accessControlDeviceList,
accessControlDeviceRemove,
} from '#/api/sis/accessControlDevice';
import { commonDownloadExcel } from '#/utils/file/download';
import accessControlDeviceModal from './accessControlDevice-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',
},
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// columns: columns(),
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await accessControlDeviceList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'sis-accessControlDevice-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [AccessControlDeviceModal, modalApi] = useVbenModal({
connectedComponent: accessControlDeviceModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
async function handleEdit(row: Required<AccessControlDeviceForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: Required<AccessControlDeviceForm>) {
await accessControlDeviceRemove(row.id);
await tableApi.query();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<AccessControlDeviceForm>) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗?`,
onOk: async () => {
await accessControlDeviceRemove(ids);
await tableApi.query();
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(
accessControlDeviceExport,
'门禁设备数据',
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:accessControlDevice:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['sis:accessControlDevice:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['sis:accessControlDevice:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['sis:accessControlDevice: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:accessControlDevice:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<AccessControlDeviceModal @reload="tableApi.query()" />
</Page>
</template>

View File

@@ -0,0 +1,236 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'eqpCode',
label: '设备编码',
},
{
component: 'Input',
fieldName: 'video',
label: '视频协议',
},
{
component: 'Select',
componentProps: {},
fieldName: 'transportType',
label: '传输协议',
},
{
component: 'Input',
fieldName: 'channelName',
label: '点位名称',
},
{
component: 'Input',
fieldName: 'rtspAddr',
label: 'rtsp 地址',
},
{
component: 'Input',
fieldName: 'ip',
label: '点位名称',
},
{
component: 'Input',
fieldName: 'port',
label: '端口',
},
{
component: 'Input',
fieldName: 'username',
label: '通道相机账号',
},
{
component: 'Input',
fieldName: 'pwd',
label: '相机密码',
},
{
component: 'Select',
componentProps: {},
fieldName: 'videoType',
label: '码流',
},
{
component: 'Input',
fieldName: 'videoId',
label: '码流id',
},
{
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: 'eqpCode',
},
{
title: '视频协议',
},
{
title: '传输协议',
field: 'transportType',
},
{
title: '点位名称',
field: 'channelName',
},
{
title: 'rtsp 地址',
field: 'rtspAddr',
},
{
title: '点位名称',
field: 'ip',
},
{
title: '端口',
field: 'port',
},
{
title: '通道相机账号',
field: 'username',
},
{
title: '相机密码',
field: 'pwd',
},
{
title: '设备码流',
field: 'videoType',
},
{
title: '码流id',
field: 'videoId',
},
{
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: 'eqpCode',
component: 'Input',
rules: 'required',
},
{
label: '视频协议',
fieldName: 'video',
component: 'Input',
},
{
label: '传输协议',
fieldName: 'transportType',
component: 'Select',
componentProps: {},
},
{
label: '点位名称',
fieldName: 'channelName',
component: 'Input',
},
{
label: 'rtsp 地址',
fieldName: 'rtspAddr',
component: 'Input',
},
{
label: '点位名称',
fieldName: 'ip',
component: 'Input',
},
{
label: '端口',
fieldName: 'port',
component: 'Input',
},
{
label: '通道相机账号',
fieldName: 'username',
component: 'Input',
},
{
label: '相机密码',
fieldName: 'pwd',
component: 'Input',
},
{
label: '设备码流',
fieldName: 'videoType',
component: 'Select',
componentProps: {},
},
{
label: '码流id',
fieldName: 'videoId',
component: 'Input',
},
{
label: '创建人id',
fieldName: 'createById',
component: 'Input',
},
{
label: '更新人id',
fieldName: 'updateById',
component: 'Input',
},
{
label: '搜索值',
fieldName: 'searchValue',
component: 'Input',
},
];

View File

@@ -0,0 +1,104 @@
<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 {
devicePointAdd,
devicePointInfo,
devicePointUpdate,
} from '#/api/sis/devicePoint';
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 devicePointInfo(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;
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? devicePointUpdate(data) : devicePointAdd(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,182 @@
<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { DevicePointForm } from '#/api/sis/devicePoint/model';
import { Page, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
import {
devicePointExport,
devicePointList,
devicePointRemove,
} from '#/api/sis/devicePoint';
import { commonDownloadExcel } from '#/utils/file/download';
import { columns, querySchema } from './data';
import devicePointModal from './devicePoint-modal.vue';
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',
},
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// columns: columns(),
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await devicePointList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'sis-devicePoint-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [DevicePointModal, modalApi] = useVbenModal({
connectedComponent: devicePointModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
async function handleEdit(row: Required<DevicePointForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: Required<DevicePointForm>) {
await devicePointRemove(row.id);
await tableApi.query();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<DevicePointForm>) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗?`,
onOk: async () => {
await devicePointRemove(ids);
await tableApi.query();
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(
devicePointExport,
'宇视设备点位(通道)数据',
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:devicePoint:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['sis:devicePoint:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['sis:devicePoint:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['sis:devicePoint: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:devicePoint:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<DevicePointModal @reload="tableApi.query()" />
</Page>
</template>

View File

@@ -1,44 +1,34 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { DictEnum } from '@vben/constants';
import { getPopupContainer } from '@vben/utils';
import { getDictOptions } from '#/utils/dict';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'libCode',
label: '人员库编码',
},
{
component: 'Input',
fieldName: 'libName',
label: '人员库名称',
},
{
component: 'Input',
fieldName: 'libDesc',
label: '人员库描述',
},
{
component: 'Select',
componentProps: {},
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.SIS_LIB_TYPE),
},
fieldName: 'libType',
label: '库类型',
},
{
component: 'Select',
componentProps: {},
fieldName: 'busiType',
label: '业务类型',
},
];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '主键id',
field: 'id',
},
{
title: '人员库编码',
field: 'libCode',
@@ -52,25 +42,13 @@ export const columns: VxeGridProps['columns'] = [
field: 'libDesc',
},
{
title: '库类型1人员库2工服库',
title: '库类型',
field: 'libType',
},
{
title: '库的业务类型 1: 门禁库2: 黑名单库',
/* {
title: '业务类型',
field: 'busiType',
},
{
title: '创建人id',
field: 'createById',
},
{
title: '更新人id',
field: 'updateById',
},
{
title: '搜索值',
field: 'searchValue',
},
},*/
{
field: 'action',
fixed: 'right',
@@ -81,21 +59,6 @@ export const columns: VxeGridProps['columns'] = [
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键id',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '人员库编码',
fieldName: 'libCode',
component: 'Input',
rules: 'required',
},
{
label: '人员库名称',
fieldName: 'libName',
@@ -111,12 +74,15 @@ export const modalSchema: FormSchemaGetter = () => [
label: '库类型',
fieldName: 'libType',
component: 'Select',
componentProps: {},
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.SIS_LIB_TYPE),
},
{
},
/* {
label: '业务类型',
fieldName: 'busiType',
component: 'Select',
componentProps: {},
},
},*/
];

View File

@@ -1,84 +1,33 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { DictEnum } from '@vben/constants';
import { getPopupContainer } from '@vben/utils';
import { getDictOptions } from '#/utils/dict';
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: {},
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.SYS_USER_SEX),
},
fieldName: 'sex',
label: '性别',
},
{
component: 'Input',
fieldName: 'email',
label: '邮箱',
},
{
component: 'Input',
fieldName: 'tel',
label: '联系方式',
},
{
component: 'Select',
componentProps: {},
fieldName: 'certificateType',
label: '证件类型',
},
{
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',
@@ -87,16 +36,9 @@ export const columns: VxeGridProps['columns'] = [
title: '人像名称',
field: 'imgName',
},
{
title: '图片编码',
field: 'imgCode',
},
{
title: '图片的存储地址',
field: 'imgUrl',
},
{
title: '性别',
field: 'sex',
},
{
title: '邮箱',
@@ -118,45 +60,16 @@ export const columns: VxeGridProps['columns'] = [
title: '出生日期',
field: 'birthDate',
},
{
title: '创建人id',
field: 'createById',
},
{
title: '更新人id',
field: 'updateById',
},
{
title: '搜索值',
field: 'searchValue',
},
{
field: 'action',
fixed: 'right',
slots: {
default: 'action',
},
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',
@@ -164,21 +77,13 @@ export const modalSchema: FormSchemaGetter = () => [
rules: 'required',
},
{
label: '图片编码',
fieldName: 'imgCode',
component: 'Input',
},
{
label: '图片的存储地址',
fieldName: 'imgUrl',
component: 'Input',
rules: 'required',
},
{
label: '性别 1男',
label: '性别',
fieldName: 'sex',
component: 'Select',
componentProps: {},
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.SYS_USER_SEX),
},
},
{
label: '邮箱',
@@ -194,7 +99,10 @@ export const modalSchema: FormSchemaGetter = () => [
label: '证件类型',
fieldName: 'certificateType',
component: 'Select',
componentProps: {},
componentProps: {
getPopupContainer,
options: getDictOptions(DictEnum.SYS_CERTIFICATE_TYPE),
},
},
{
label: '证件号码',
@@ -207,18 +115,13 @@ export const modalSchema: FormSchemaGetter = () => [
component: 'Input',
},
{
label: '创建人id',
fieldName: 'createById',
component: 'Input',
label: '人像图片',
fieldName: 'img',
component: 'ImageUpload',
componentProps: {
// accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
},
{
label: '更新人id',
fieldName: 'updateById',
component: 'Input',
},
{
label: '搜索值',
fieldName: 'searchValue',
component: 'Input',
formItemClass: 'col-span-2',
},
];

View File

@@ -1,30 +1,24 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import type { VbenFormProps } from '@vben/common-ui';
import { ref } from 'vue';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { PersonLibImgForm } from '#/api/sis/personLibImg/model';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { Page, useVbenModal } 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 { useVbenVxeGrid, vxeCheckboxChecked } 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';
import personLibImgModal from './personLibImg-modal.vue';
const formOptions: VbenFormProps = {
commonConfig: {
@@ -76,7 +70,7 @@ const gridOptions: VxeGridProps = {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'sis-personLibImg-index'
id: 'system-personLibImg-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -118,9 +112,14 @@ function handleMultiDelete() {
}
function handleDownloadExcel() {
commonDownloadExcel(personLibImgExport, '人像信息数据', tableApi.formApi.form.values, {
commonDownloadExcel(
personLibImgExport,
'人像信息数据',
tableApi.formApi.form.values,
{
fieldMappingTime: formOptions.fieldMappingTime,
});
},
);
}
</script>
@@ -130,7 +129,7 @@ function handleDownloadExcel() {
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['sis:personLibImg:export']"
v-access:code="['system:personLibImg:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
@@ -139,13 +138,14 @@ function handleDownloadExcel() {
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['sis:personLibImg:remove']"
@click="handleMultiDelete">
v-access:code="['system:personLibImg:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['sis:personLibImg:add']"
v-access:code="['system:personLibImg:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
@@ -155,7 +155,7 @@ function handleDownloadExcel() {
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['sis:personLibImg:edit']"
v-access:code="['system:personLibImg:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
@@ -168,7 +168,7 @@ function handleDownloadExcel() {
>
<ghost-button
danger
v-access:code="['sis:personLibImg:remove']"
v-access:code="['system:personLibImg:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}

View File

@@ -6,7 +6,11 @@ import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { personLibImgAdd, personLibImgInfo, personLibImgUpdate } from '#/api/sis/personLibImg';
import {
personLibImgAdd,
personLibImgInfo,
personLibImgUpdate,
} from '#/api/sis/personLibImg';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
@@ -21,13 +25,13 @@ const title = computed(() => {
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-2',
formItemClass: 'col-span-1',
// 默认label宽度 px
labelWidth: 80,
// 通用配置项 会影响到所有表单项
componentProps: {
class: 'w-full',
}
},
},
schema: modalSchema(),
showDefaultActions: false,
@@ -43,7 +47,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[550px]',
class: 'w-[700px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
@@ -98,4 +102,3 @@ async function handleClosed() {
<BasicForm />
</BasicModal>
</template>

View File

@@ -10,10 +10,14 @@ export const DictEnum = {
SYS_SHOW_HIDE: 'sys_show_hide', // 显示状态
SYS_USER_SEX: 'sys_user_sex', // 性别
SYS_YES_NO: 'sys_yes_no', // 是否
SYS_CERTIFICATE_TYPE: 'sys_certificate_type', // 证件类型
WF_BUSINESS_STATUS: 'wf_business_status', // 业务状态
WF_FORM_TYPE: 'wf_form_type', // 表单类型
WF_TASK_STATUS: 'wf_task_status', // 任务状态
WY_SF: 'wy_sf',
SIS_ACCESS_CONTROL_DEVICE_TYPE: 'sis_access_control_device_type',
SIS_LIB_TYPE: 'sis_lib_type',
} as const;
export type DictEnumKey = keyof typeof DictEnum;