牧安云哨-前端
This commit is contained in:
BBIT-Kai
@@ -372,6 +372,20 @@ async function initComponentAdapter() {
|
||||
modelPropName: 'value',
|
||||
},
|
||||
),
|
||||
ApiCombobox: withDefaultPlaceholder(
|
||||
{
|
||||
...ApiComponent,
|
||||
name: 'ApiCombobox',
|
||||
},
|
||||
'select',
|
||||
{
|
||||
component: Select,
|
||||
loadingSlot: 'suffixIcon',
|
||||
visibleEvent: 'onDropdownVisibleChange',
|
||||
modelPropName: 'value',
|
||||
props: ['mode', 'allowClear', 'filterOption'],
|
||||
},
|
||||
),
|
||||
ApiTreeSelect: withDefaultPlaceholder(
|
||||
{
|
||||
...ApiComponent,
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
export * from './core';
|
||||
export * from './cv';
|
||||
export * from './iot';
|
||||
export * from './llm';
|
||||
export * from './manager';
|
||||
export * from './sentinel';
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { sha256 } from 'js-sha256';
|
||||
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
|
||||
export namespace SystemDeviceApi {
|
||||
export interface SystemDevice {
|
||||
[key: string]: any;
|
||||
id: string;
|
||||
remark?: string;
|
||||
name: string;
|
||||
roles: string[];
|
||||
status: 0 | 1;
|
||||
is_superuser: 0 | 1;
|
||||
dept_id?: string;
|
||||
dept_name?: string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取设备列表数据
|
||||
*/
|
||||
async function getDeviceList(params: Recordable<any>) {
|
||||
return pyRequestClient.get<Array<SystemDeviceApi.SystemDevice>>(
|
||||
'/iot/common/device/list',
|
||||
{ params },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建设备
|
||||
* @param data 设备数据
|
||||
*/
|
||||
async function createDevice(data: Omit<SystemDeviceApi.SystemDevice, 'id'>) {
|
||||
data.password_hash = sha256(data.password?.toString() || '');
|
||||
delete data.password;
|
||||
return pyRequestClient.post('/iot/common/device', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新设备
|
||||
*
|
||||
* @param id 设备 ID
|
||||
* @param data 设备数据
|
||||
*/
|
||||
async function updateDevice(
|
||||
id: string,
|
||||
data: Omit<SystemDeviceApi.SystemDevice, 'id'>,
|
||||
) {
|
||||
return pyRequestClient.put(`/iot/common/device/${id}`, data);
|
||||
}
|
||||
/**
|
||||
* 更新设备（部分更新）
|
||||
*
|
||||
* @param id 设备 ID
|
||||
* @param data 需要更新的字段（部分字段即可）
|
||||
*/
|
||||
async function updateDevicePatch(
|
||||
id: string,
|
||||
data: Partial<Omit<SystemDeviceApi.SystemDevice, 'id'>>,
|
||||
) {
|
||||
return pyRequestClient.patch(`/iot/common/device/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除设备
|
||||
* @param id 设备 ID
|
||||
*/
|
||||
async function deleteDevice(id: string) {
|
||||
return pyRequestClient.delete(`/iot/common/device/${id}`);
|
||||
}
|
||||
|
||||
export {
|
||||
createDevice,
|
||||
deleteDevice,
|
||||
getDeviceList,
|
||||
updateDevice,
|
||||
updateDevicePatch,
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './device';
|
||||
@@ -10,6 +10,16 @@ export namespace SystemDeptApi {
|
||||
}
|
||||
}
|
||||
|
||||
export namespace SystemDeptDetailApi {
|
||||
export interface SystemDept {
|
||||
[key: string]: any;
|
||||
children?: SystemDept[];
|
||||
id: string;
|
||||
name: string;
|
||||
comment?: string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取部门列表数据
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
|
||||
export namespace SystemDictApi {
|
||||
export interface SystemDict {
|
||||
[key: string]: any;
|
||||
id: string;
|
||||
name: string;
|
||||
key: string;
|
||||
remark?: string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取字典列表数据
|
||||
*/
|
||||
async function getDictList(name = '', page = 1, pageSize = 9) {
|
||||
return pyRequestClient.get<Array<SystemDictApi.SystemDict>>(
|
||||
'/system/dict/list',
|
||||
{ params: { name, page, page_size: pageSize } },
|
||||
);
|
||||
}
|
||||
/**
|
||||
* 创建字典
|
||||
* @param data 字典数据
|
||||
*/
|
||||
async function createDict(data: Omit<SystemDictApi.SystemDict, 'id'>) {
|
||||
return pyRequestClient.post('/system/dict', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新字典
|
||||
*
|
||||
* @param id 字典 ID
|
||||
* @param data 字典数据
|
||||
*/
|
||||
async function updateDict(
|
||||
id: string,
|
||||
data: Omit<SystemDictApi.SystemDict, 'id'>,
|
||||
) {
|
||||
return pyRequestClient.put(`/system/dict/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除字典
|
||||
* @param id 字典 ID
|
||||
*/
|
||||
async function deleteDict(id: string) {
|
||||
return pyRequestClient.delete(`/system/dict/${id}`);
|
||||
}
|
||||
export namespace SystemDictDetailApi {
|
||||
export interface DictDetail {
|
||||
id: string;
|
||||
value: string;
|
||||
sort?: number;
|
||||
pid?: null | string;
|
||||
dict_id: string;
|
||||
remark?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取字典详情列表（不分页）
|
||||
*/
|
||||
export async function getDictDetail(dictId: string) {
|
||||
return pyRequestClient.get<Array<SystemDictDetailApi.DictDetail>>(
|
||||
'/system/dict/detail/list',
|
||||
{ params: { dictId } },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增字典详情
|
||||
*/
|
||||
export async function createDictDetail(
|
||||
data: Omit<
|
||||
SystemDictDetailApi.DictDetail,
|
||||
'created_at' | 'id' | 'updated_at'
|
||||
>,
|
||||
) {
|
||||
return pyRequestClient.post('/system/dict/detail', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新字典详情
|
||||
*/
|
||||
export async function updateDictDetail(
|
||||
id: string,
|
||||
data: Partial<
|
||||
Omit<SystemDictDetailApi.DictDetail, 'created_at' | 'id' | 'updated_at'>
|
||||
>,
|
||||
) {
|
||||
return pyRequestClient.put(`/system/dict/detail/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除字典详情
|
||||
*/
|
||||
export async function deleteDictDetail(id: string) {
|
||||
return pyRequestClient.delete(`/system/dict/detail/${id}`);
|
||||
}
|
||||
|
||||
|
||||
export { createDict, deleteDict, getDictList, updateDict };
|
||||
@@ -1,4 +1,6 @@
|
||||
export * from './dept';
|
||||
export * from './dict';
|
||||
export * from './menu';
|
||||
export * from './role';
|
||||
export * from './user';
|
||||
export * from './sys';
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
// system/dict.ts 或 system/dictDetail.ts
|
||||
|
||||
export namespace SystemDictApi {
|
||||
export interface DictDetail {
|
||||
id: string;
|
||||
value: string;
|
||||
label: string;
|
||||
sort: number;
|
||||
pid?: string | null;
|
||||
remark?: string;
|
||||
created_at?: string;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 根据字典 key 获取字典详情列表
|
||||
*/
|
||||
export async function getDictDetailList(key: string) {
|
||||
return pyRequestClient.get<Array<SystemDictApi.DictDetail>>(
|
||||
'/system/dict/getValue',
|
||||
{
|
||||
params: { key },
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,14 @@
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { sha256 } from 'js-sha256';
|
||||
|
||||
import { SystemMenuApi } from '#/api';
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
import { sha256 } from "js-sha256";
|
||||
|
||||
export namespace SystemUserApi {
|
||||
export interface SystemUser {
|
||||
[key: string]: any;
|
||||
|
||||
id: string;
|
||||
email?: string;
|
||||
name: string;
|
||||
@@ -37,18 +40,15 @@ async function createUser(data: Omit<SystemUserApi.SystemUser, 'id'>) {
|
||||
return pyRequestClient.post('/system/user', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新用户
|
||||
*
|
||||
* @param id 用户 ID
|
||||
* @param data 用户数据
|
||||
*/
|
||||
async function updateUser(
|
||||
id: string,
|
||||
data: Omit<SystemUserApi.SystemUser, 'id'>,
|
||||
async function isUserNameExists(
|
||||
username: string,
|
||||
id?: SystemMenuApi.SystemMenu['id'],
|
||||
) {
|
||||
return pyRequestClient.put(`/system/user/${id}`, data);
|
||||
return pyRequestClient.get<boolean>('/system/user/name-exists', {
|
||||
params: { id, username },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新用户（部分更新）
|
||||
*
|
||||
@@ -59,6 +59,14 @@ async function updateUserPatch(
|
||||
id: string,
|
||||
data: Partial<Omit<SystemUserApi.SystemUser, 'id'>>,
|
||||
) {
|
||||
if (
|
||||
data.password !== null &&
|
||||
data.password !== undefined &&
|
||||
data.password.trim() !== ''
|
||||
) {
|
||||
data.password_hash = sha256(data.password?.toString() || '');
|
||||
}
|
||||
delete data.password;
|
||||
return pyRequestClient.patch(`/system/user/${id}`, data);
|
||||
}
|
||||
|
||||
@@ -70,4 +78,10 @@ async function deleteUser(id: string) {
|
||||
return pyRequestClient.delete(`/system/user/${id}`);
|
||||
}
|
||||
|
||||
export { createUser, deleteUser, getUserList, updateUser,updateUserPatch };
|
||||
export {
|
||||
createUser,
|
||||
deleteUser,
|
||||
getUserList,
|
||||
isUserNameExists,
|
||||
updateUserPatch,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { pyRequestClient } from '#/api/request';
|
||||
|
||||
export namespace SentinelApi {
|
||||
export interface Record {
|
||||
id: string;
|
||||
name: string;
|
||||
is_inspected: 0 | 1;
|
||||
license_plate?: string;
|
||||
vehicle_type?: string;
|
||||
license_plate_image?: string;
|
||||
vehicle_image?: string;
|
||||
livestock_type?: string;
|
||||
livestock_source?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
remark?: string;
|
||||
dept_id?: string;
|
||||
dept_name?: string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取记录列表数据
|
||||
*/
|
||||
async function getSentinelRecordList(params: Recordable<any>) {
|
||||
return pyRequestClient.get<Array<SentinelApi.Record>>(
|
||||
'/iot/sentinel/record/list',
|
||||
{ params },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建记录
|
||||
* @param data 记录数据
|
||||
*/
|
||||
async function createSentinelRecord(data: Omit<SentinelApi.Record, 'id'>) {
|
||||
return pyRequestClient.post('/iot/sentinel/record', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新记录
|
||||
*
|
||||
* @param id 记录 ID
|
||||
* @param data 记录数据
|
||||
*/
|
||||
async function updateSentinelRecord(
|
||||
id: string,
|
||||
data: Omit<SentinelApi.Record, 'id'>,
|
||||
) {
|
||||
return pyRequestClient.put(`/iot/sentinel/record/${id}`, data);
|
||||
}
|
||||
/**
|
||||
* 更新记录（部分更新）
|
||||
*
|
||||
* @param id 记录 ID
|
||||
* @param data 需要更新的字段（部分字段即可）
|
||||
*/
|
||||
async function updateSentinelRecordPatch(
|
||||
id: string,
|
||||
data: Partial<Omit<SentinelApi.Record, 'id'>>,
|
||||
) {
|
||||
return pyRequestClient.patch(`/iot/sentinel/record/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除记录
|
||||
* @param id 记录 ID
|
||||
*/
|
||||
async function deleteSentinelRecord(id: string) {
|
||||
return pyRequestClient.delete(`/iot/sentinel/record/${id}`);
|
||||
}
|
||||
|
||||
export {
|
||||
createSentinelRecord,
|
||||
deleteSentinelRecord,
|
||||
getSentinelRecordList,
|
||||
updateSentinelRecord,
|
||||
updateSentinelRecordPatch,
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from './device';
|
||||
@@ -20,22 +20,11 @@ const routes: RouteRecordRaw[] = [
|
||||
meta: {
|
||||
authority: ['manager'],
|
||||
icon: 'mdi:office-building-cog-outline',
|
||||
title: '部门管理',
|
||||
title: '组织管理',
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/manager/department/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'M-user',
|
||||
path: '/manager/user',
|
||||
meta: {
|
||||
authority: ['manager'],
|
||||
icon: 'mdi:account-cog-outline',
|
||||
title: '用户管理',
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/manager/user/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'M-role',
|
||||
path: '/manager/role',
|
||||
@@ -47,13 +36,35 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
component: () => import('#/views/manager/role/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'M-user',
|
||||
path: '/manager/user',
|
||||
meta: {
|
||||
authority: ['manager'],
|
||||
icon: 'mdi:account-cog-outline',
|
||||
title: '用户管理',
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/manager/user/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'M-dict',
|
||||
path: '/manager/dict',
|
||||
meta: {
|
||||
authority: ['manager'],
|
||||
icon: 'mdi:book-open-outline',
|
||||
title: '字典管理',
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/manager/dict/index.vue'),
|
||||
},
|
||||
{
|
||||
name: 'M-perm',
|
||||
path: '/manager/perm',
|
||||
meta: {
|
||||
authority: ['manager'],
|
||||
icon: 'mdi:menu',
|
||||
title: '菜单-AI实验室',
|
||||
title: '菜单-实验室',
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/manager/menu/index.vue'),
|
||||
@@ -64,7 +75,7 @@ const routes: RouteRecordRaw[] = [
|
||||
meta: {
|
||||
authority: ['manager'],
|
||||
icon: 'mdi:menu',
|
||||
title: '菜单-大数据可视化平台',
|
||||
title: '菜单-大数据',
|
||||
keepAlive: true,
|
||||
},
|
||||
component: () => import('#/views/manager/menu/index2.vue'),
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
import { type VbenFormSchema, z } from "#/adapter/form";
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import * as api from '#/api';
|
||||
import { $t } from "@vben/locales";
|
||||
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '设备账号',
|
||||
rules: z
|
||||
.string({
|
||||
required_error: $t('ui.formRules.required', ['设备账号']),
|
||||
invalid_type_error: $t('ui.formRules.required', ['设备账号']),
|
||||
})
|
||||
.min(4, $t('ui.formRules.minLength', ['设备账号', 4]))
|
||||
.max(20, $t('ui.formRules.maxLength', ['设备账号', 20])),
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'InputPassword',
|
||||
fieldName: 'password',
|
||||
label: '密码',
|
||||
description: '123456',
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: api.getDeptList,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'dept_id',
|
||||
label: '所属组织',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '可用', value: 1 },
|
||||
{ label: '不可用', value: 0 },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 1,
|
||||
fieldName: 'status',
|
||||
label: '可用性',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 0,
|
||||
fieldName: 'is_superuser',
|
||||
label: '管理员',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
label: '设备编号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '设备名称',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
// componentProps: {
|
||||
// readonly: true, // 如果组件支持 readonly
|
||||
// },
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '启用中', value: 1 },
|
||||
{ label: '已禁用', value: 0 },
|
||||
],
|
||||
},
|
||||
fieldName: 'status',
|
||||
label: '可用性',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 },
|
||||
],
|
||||
},
|
||||
fieldName: 'is_superuser',
|
||||
label: '管理员',
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: api.getDeptList,
|
||||
class: 'w-full',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'dept_id',
|
||||
label: '所属组织',
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '创建时间',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useColumns<T = SystemUserApi.SystemUser>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
|
||||
onIsSuperUserChange?: (
|
||||
newStatus: any,
|
||||
row: T,
|
||||
) => PromiseLike<boolean | undefined>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '设备编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'online',
|
||||
slots: { default: 'status' },
|
||||
title: '当前状态',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '设备账号',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
cellRender: {
|
||||
attrs: { beforeChange: onStatusChange },
|
||||
name: onStatusChange ? 'CellSwitch' : 'CellTag',
|
||||
},
|
||||
field: 'status',
|
||||
title: '可用性',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
cellRender: {
|
||||
attrs: { beforeChange: onIsSuperUserChange },
|
||||
name: onIsSuperUserChange ? 'CellSwitch' : 'CellTag',
|
||||
},
|
||||
field: 'is_superuser',
|
||||
title: '管理员',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'dept_name',
|
||||
minWidth: 120,
|
||||
title: '所属组织',
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
title: '创建时间',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
title: '备注',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '设备名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
},
|
||||
field: 'operation',
|
||||
fixed: 'right',
|
||||
title: '操作',
|
||||
width: 130,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { Tree, useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createDevice, updateDevice } from '#/api';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from './data';
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
const formData = ref<SystemUserApi.SystemUser>();
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const roles = ref<DataNode[]>([]);
|
||||
const loadingRoles = ref(false);
|
||||
|
||||
const id = ref();
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
const values = await formApi.getValues();
|
||||
drawerApi.lock();
|
||||
(id.value ? updateDevice(id.value, values) : createDevice(values))
|
||||
.then(() => {
|
||||
emits('success');
|
||||
drawerApi.close();
|
||||
})
|
||||
.catch(() => {
|
||||
drawerApi.unlock();
|
||||
});
|
||||
},
|
||||
|
||||
async onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
const data = drawerApi.getData<SystemUserApi.SystemUser>();
|
||||
formApi.resetForm();
|
||||
|
||||
if (data) {
|
||||
formData.value = data;
|
||||
id.value = data.id;
|
||||
} else {
|
||||
id.value = undefined;
|
||||
}
|
||||
|
||||
// Wait for Vue to flush DOM updates (form fields mounted)
|
||||
await nextTick();
|
||||
if (data) {
|
||||
formApi.setValues(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const getDrawerTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('common.edit', $t('system.role.name'))
|
||||
: $t('common.create', $t('system.role.name'));
|
||||
});
|
||||
|
||||
function getNodeClass(node: Recordable<any>) {
|
||||
const classes: string[] = [];
|
||||
if (node.value?.type === 'button') {
|
||||
classes.push('inline-flex');
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Drawer :title="getDrawerTitle">
|
||||
<Form>
|
||||
<template #roles="slotProps">
|
||||
<Spin :spinning="loadingRoles" wrapper-class-name="w-full">
|
||||
<Tree
|
||||
:tree-data="roles"
|
||||
multiple
|
||||
bordered
|
||||
:default-expanded-level="2"
|
||||
:get-node-class="getNodeClass"
|
||||
v-bind="slotProps"
|
||||
value-field="id"
|
||||
label-field="title"
|
||||
>
|
||||
<template #node="{ value }">
|
||||
{{ $t(value.title) }}
|
||||
</template>
|
||||
</Tree>
|
||||
</Spin>
|
||||
</template>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
:deep(.ant-tree-title) {
|
||||
.tree-actions {
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-title:hover) {
|
||||
.tree-actions {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
justify-content: flex-end;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import type { SystemDeviceApi } from '#/api';
|
||||
|
||||
import { onBeforeUnmount, onMounted, reactive } from 'vue';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
|
||||
import { Button, message, Modal, Tag } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { deleteDevice, getDeviceList, updateDevicePatch } from '#/api';
|
||||
|
||||
import { useColumns, useGridFormSchema } from './data';
|
||||
import Form from './form.vue';
|
||||
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* 状态开关即将改变
|
||||
* @param newStatus 期望改变的状态值
|
||||
* @param row 行数据
|
||||
* @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
|
||||
*/
|
||||
async function onStatusChange(
|
||||
newStatus: number,
|
||||
row: SystemDeviceApi.SystemDevice,
|
||||
) {
|
||||
const status: Recordable<string> = {
|
||||
0: '禁用',
|
||||
1: '启用',
|
||||
};
|
||||
try {
|
||||
await confirm(
|
||||
`你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
|
||||
`切换状态`,
|
||||
);
|
||||
await updateDevicePatch(row.id, { status: newStatus });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
async function onIsSuperUserChange(
|
||||
newStatus: number,
|
||||
row: SystemDeviceApi.SystemDevice,
|
||||
) {
|
||||
const status: Recordable<string> = {
|
||||
0: '普通用户',
|
||||
1: '超级用户',
|
||||
};
|
||||
try {
|
||||
await confirm(
|
||||
`你要将${row.name}切换为 【${status[newStatus.toString()]}】 吗？`,
|
||||
`切换状态`,
|
||||
);
|
||||
await updateDevicePatch(row.id, { is_superuser: newStatus });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useColumns(onActionClick, onStatusChange, onIsSuperUserChange),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const res = await getDeviceList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
return {
|
||||
items: res.list,
|
||||
total: res.total,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: true,
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<SystemDeviceApi.SystemDevice>,
|
||||
});
|
||||
|
||||
function onActionClick(e: OnActionClickParams<SystemDeviceApi.SystemDevice>) {
|
||||
switch (e.code) {
|
||||
case 'delete': {
|
||||
onDelete(e.row);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
onEdit(e.row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
|
||||
* @param content 提示内容
|
||||
* @param title 提示标题
|
||||
*/
|
||||
function confirm(content: string, title: string) {
|
||||
return new Promise((reslove, reject) => {
|
||||
Modal.confirm({
|
||||
content,
|
||||
onCancel() {
|
||||
reject(new Error('已取消'));
|
||||
},
|
||||
onOk() {
|
||||
reslove(true);
|
||||
},
|
||||
title,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onEdit(row: SystemDeviceApi.SystemDevice) {
|
||||
formDrawerApi.setData(row).open();
|
||||
}
|
||||
|
||||
function onDelete(row: SystemDeviceApi.SystemDevice) {
|
||||
const hideLoading = message.loading({
|
||||
content: `正在删除设备：${[row.name]}`,
|
||||
duration: 0,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
deleteDevice(row.id)
|
||||
.then(() => {
|
||||
message.success({
|
||||
content: `已删除设备：${[row.name]}`,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
onRefresh();
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading();
|
||||
});
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
function onCreate() {
|
||||
formDrawerApi.setData({}).open();
|
||||
}
|
||||
|
||||
const wsState = reactive({
|
||||
ws: null as null | WebSocket,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const ws = new WebSocket('wss://ai.ronsunny.cn:8090/ai/iot/ws/device-status');
|
||||
wsState.ws = ws;
|
||||
|
||||
ws.onmessage = async (e) => {
|
||||
const msg = JSON.parse(e.data);
|
||||
console.log('WS 事件', msg);
|
||||
|
||||
// 简单策略：任何设备上下线都刷新列表 后续改进针对单行
|
||||
await gridApi.query();
|
||||
};
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (wsState.ws) wsState.ws.close();
|
||||
});
|
||||
</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>
|
||||
<template #status="{ row }">
|
||||
<Tag v-if="row.online" style="color: green">在线</Tag>
|
||||
<Tag v-else style="color: gray">离线</Tag>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -17,11 +17,11 @@ export function useSchema(): VbenFormSchema[] {
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '部门名',
|
||||
label: '组织名',
|
||||
rules: z
|
||||
.string()
|
||||
.min(2, $t('ui.formRules.minLength', ['部门名', 2]))
|
||||
.max(20, $t('ui.formRules.maxLength', ['部门名', 20])),
|
||||
.min(2, $t('ui.formRules.minLength', ['组织名', 2]))
|
||||
.max(20, $t('ui.formRules.maxLength', ['组织名', 20])),
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
@@ -34,7 +34,7 @@ export function useSchema(): VbenFormSchema[] {
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'pid',
|
||||
label: '父部门',
|
||||
label: '父组织',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
@@ -66,9 +66,9 @@ export function useColumns(
|
||||
align: 'left',
|
||||
field: 'name',
|
||||
fixed: 'left',
|
||||
title: '部门名',
|
||||
title: '组织名',
|
||||
treeNode: true,
|
||||
width: 150,
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
@@ -90,7 +90,7 @@ export function useColumns(
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '部门名',
|
||||
nameTitle: '组织名',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
|
||||
@@ -17,8 +17,8 @@ const emit = defineEmits(['success']);
|
||||
const formData = ref<SystemDeptApi.SystemDept>();
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('ui.actionTitle.edit', ['部门'])
|
||||
: $t('ui.actionTitle.create', ['部门']);
|
||||
? $t('ui.actionTitle.edit', ['组织'])
|
||||
: $t('ui.actionTitle.create', ['组织']);
|
||||
});
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
|
||||
@@ -31,7 +31,7 @@ function onEdit(row: SystemDeptApi.SystemDept) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加下级部门
|
||||
* 添加下级组织
|
||||
* @param row
|
||||
*/
|
||||
function onAppend(row: SystemDeptApi.SystemDept) {
|
||||
@@ -39,14 +39,14 @@ function onAppend(row: SystemDeptApi.SystemDept) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新部门
|
||||
* 创建新组织
|
||||
*/
|
||||
function onCreate() {
|
||||
formModalApi.setData(null).open();
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除部门
|
||||
* 删除组织
|
||||
* @param row
|
||||
*/
|
||||
function onDelete(row: SystemDeptApi.SystemDept) {
|
||||
@@ -132,11 +132,11 @@ function refreshGrid() {
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<FormModal @success="refreshGrid" />
|
||||
<Grid table-title="部门列表">
|
||||
<Grid table-title="组织列表">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
<Plus class="size-5" />
|
||||
新增部门
|
||||
新增组织
|
||||
</Button>
|
||||
</template>
|
||||
</Grid>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemDictApi } from '#/api';
|
||||
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'value',
|
||||
label: '值',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function useColumns<T = SystemDictApi.SystemDict>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'value',
|
||||
title: '值',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
minWidth: 100,
|
||||
title: '备注',
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
title: '创建时间',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'updated_at',
|
||||
title: '最后更新时间',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '项名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
},
|
||||
field: 'operation',
|
||||
fixed: 'right',
|
||||
title: '操作',
|
||||
width: 130,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SystemDictApi } from '#/api/manager/dict';
|
||||
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { Tree, useVbenDrawer } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { getMenuListForAll } from '#/api';
|
||||
import { createDictDetail, updateDictDetail } from '#/api/manager/dict';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from './data';
|
||||
|
||||
// 🔹 在最上面声明 props
|
||||
const props = defineProps<{ dictId: string }>();
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
const formData = ref<SystemDictApi.SystemDict>();
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const permissions = ref<DataNode[]>([]);
|
||||
const loadingPermissions = ref(false);
|
||||
const id = ref();
|
||||
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
|
||||
const values = await formApi.getValues();
|
||||
drawerApi.lock();
|
||||
|
||||
// 在这里使用 props.dictId
|
||||
(id.value
|
||||
? updateDictDetail(id.value, values)
|
||||
: createDictDetail({ ...values, dict_id: props.dictId })
|
||||
)
|
||||
.then(() => {
|
||||
emits('success');
|
||||
drawerApi.close();
|
||||
})
|
||||
.catch(() => {
|
||||
drawerApi.unlock();
|
||||
});
|
||||
},
|
||||
|
||||
async onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
const data = drawerApi.getData<SystemDictApi.SystemDict>();
|
||||
formApi.resetForm();
|
||||
|
||||
if (data) {
|
||||
formData.value = data;
|
||||
id.value = data.id;
|
||||
} else {
|
||||
id.value = undefined;
|
||||
}
|
||||
|
||||
if (permissions.value.length === 0) {
|
||||
await loadPermissions();
|
||||
}
|
||||
await nextTick();
|
||||
if (data) {
|
||||
formApi.setValues(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
async function loadPermissions() {
|
||||
loadingPermissions.value = true;
|
||||
try {
|
||||
const res = await getMenuListForAll(-1);
|
||||
permissions.value = res as unknown as DataNode[];
|
||||
} finally {
|
||||
loadingPermissions.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const getDrawerTitle = computed(() => {
|
||||
return formData.value?.id ? '修改字典项' : '新增菜单项';
|
||||
});
|
||||
|
||||
function getNodeClass(node: Recordable<any>) {
|
||||
const classes: string[] = [];
|
||||
if (node.value?.type === 'button') {
|
||||
classes.push('inline-flex');
|
||||
}
|
||||
return classes.join(' ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer :title="getDrawerTitle">
|
||||
<Form>
|
||||
<template #permissions="slotProps">
|
||||
<Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
|
||||
<Tree
|
||||
:tree-data="permissions"
|
||||
multiple
|
||||
bordered
|
||||
:default-expanded-level="2"
|
||||
:get-node-class="getNodeClass"
|
||||
v-bind="slotProps"
|
||||
value-field="id"
|
||||
label-field="meta.title"
|
||||
icon-field="meta.icon"
|
||||
>
|
||||
<template #node="{ value }">
|
||||
<IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
|
||||
{{ $t(value.meta.title) }}
|
||||
</template>
|
||||
</Tree>
|
||||
</Spin>
|
||||
</template>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,407 @@
|
||||
<script lang="ts" setup>
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import { getDictDetail, type SystemDictApi } from "#/api";
|
||||
|
||||
import {
|
||||
computed,
|
||||
onActivated,
|
||||
onDeactivated,
|
||||
onMounted,
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue';
|
||||
|
||||
import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
|
||||
import { Plus } from '@vben/icons';
|
||||
|
||||
import { Button,Form, Input, message, Modal } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import * as api from '#/api';
|
||||
|
||||
import { useColumns } from './data';
|
||||
import ItemForm from './form.vue';
|
||||
|
||||
const list = ref<any[]>([]);
|
||||
const error = ref<null | string>(null);
|
||||
const filterKeyword = ref('');
|
||||
const selectedItem = ref<any>(null);
|
||||
|
||||
async function loadList() {
|
||||
error.value = null;
|
||||
const res = await api.getDictList(
|
||||
filterKeyword.value,
|
||||
page.value,
|
||||
pageSize.value,
|
||||
);
|
||||
list.value = res.items || [];
|
||||
total.value = res.total;
|
||||
}
|
||||
function refreshList() {
|
||||
filterKeyword.value = '';
|
||||
loadList();
|
||||
message.success('列表加载完成');
|
||||
}
|
||||
|
||||
async function selectItem(item: any) {
|
||||
selectedItem.value = item;
|
||||
gridApi.query();
|
||||
}
|
||||
// 监听关键词变化，调用防抖接口
|
||||
watch(filterKeyword, () => {
|
||||
loadList();
|
||||
});
|
||||
watch(selectedItem, () => {});
|
||||
onMounted(() => {
|
||||
loadList();
|
||||
});
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: ItemForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useColumns(onActionClick),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async (formValues) => {
|
||||
const res = await getDictDetail(selectedItem.value.id);
|
||||
return {
|
||||
items: res.list,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<SystemDictApi.SystemDict>,
|
||||
});
|
||||
|
||||
function onActionClick(e: OnActionClickParams<SystemDictApi.SystemDict>) {
|
||||
switch (e.code) {
|
||||
case 'delete': {
|
||||
onDelete(e.row);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
onEdit(e.row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onEdit(row: SystemDictApi.SystemDict) {
|
||||
formDrawerApi.setData(row).open();
|
||||
}
|
||||
|
||||
function onDelete(row: SystemDictApi.SystemDict) {
|
||||
const hideLoading = message.loading({
|
||||
content: `正在删除字典项：${[row.name]}`,
|
||||
duration: 0,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
api
|
||||
.deleteDictDetail(row.id)
|
||||
.then(() => {
|
||||
message.success({
|
||||
content: `已删除字典项：${[row.name]}`,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
onRefresh();
|
||||
})
|
||||
.catch(() => {
|
||||
hideLoading();
|
||||
});
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
function onCreate() {
|
||||
formDrawerApi.setData({}).open();
|
||||
}
|
||||
|
||||
onDeactivated(() => {
|
||||
// 离开路由时清理状态
|
||||
selectedItem.value = null;
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
// 回来的时候重新刷新一次列表
|
||||
loadList();
|
||||
});
|
||||
const mode = ref<'create' | 'edit'>('create');
|
||||
const currentDictId = ref<string | null>(null);
|
||||
const dict_name = ref('');
|
||||
const dict_key = ref('');
|
||||
const dict_desc = ref('');
|
||||
function resetForm() {
|
||||
currentDictId.value = '';
|
||||
dict_name.value = '';
|
||||
dict_key.value = '';
|
||||
dict_desc.value = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
|
||||
* @param content 提示内容
|
||||
* @param title 提示标题
|
||||
*/
|
||||
function confirm(content: string, title: string) {
|
||||
return new Promise((reslove, reject) => {
|
||||
Modal.confirm({
|
||||
content,
|
||||
onCancel() {
|
||||
reject(new Error('已取消'));
|
||||
},
|
||||
onOk() {
|
||||
reslove(true);
|
||||
},
|
||||
title,
|
||||
});
|
||||
});
|
||||
}
|
||||
const [Modal2, modalApi] = useVbenModal({
|
||||
onCancel() {
|
||||
modalApi.close();
|
||||
},
|
||||
onConfirm() {
|
||||
if (!dict_name.value || !dict_key.value) {
|
||||
message.warning('请输入字典名与字典代码');
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode.value === 'create') {
|
||||
addDict();
|
||||
} else {
|
||||
editDict();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function createTask() {
|
||||
mode.value = 'create';
|
||||
resetForm();
|
||||
|
||||
modalApi.setState({
|
||||
title: '新建字典',
|
||||
});
|
||||
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function deleteItem(item) {
|
||||
const ok = await confirm(
|
||||
`确定要删除「${item.name}」字典吗？此操作不可恢复。`,
|
||||
'删除确认',
|
||||
);
|
||||
|
||||
if (!ok) return;
|
||||
|
||||
await api.deleteDict(item.id);
|
||||
message.success('删除成功');
|
||||
|
||||
// 可选：刷新列表 / 清理选中态
|
||||
refreshList();
|
||||
}
|
||||
function buildPayload(): Omit<SystemDictApi.SystemDict, 'id'> {
|
||||
return {
|
||||
name: dict_name.value,
|
||||
key: dict_key.value,
|
||||
remark: dict_desc.value,
|
||||
};
|
||||
}
|
||||
async function addDict() {
|
||||
try {
|
||||
const data = buildPayload();
|
||||
|
||||
await api.createDict(data);
|
||||
|
||||
message.success('创建成功');
|
||||
modalApi.close();
|
||||
|
||||
refreshList();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
message.error('创建失败');
|
||||
}
|
||||
}
|
||||
async function editDict() {
|
||||
if (!currentDictId.value) {
|
||||
message.error('缺少字典 ID');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = buildPayload();
|
||||
|
||||
await api.updateDict(currentDictId.value, data);
|
||||
|
||||
message.success('更新成功');
|
||||
modalApi.close();
|
||||
|
||||
refreshList?.();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
message.error('更新失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function editItem(item) {
|
||||
mode.value = 'edit';
|
||||
|
||||
// 回填数据
|
||||
currentDictId.value = item.id;
|
||||
dict_name.value = item.name;
|
||||
dict_key.value = item.key;
|
||||
dict_desc.value = item.remark;
|
||||
|
||||
modalApi.setState({
|
||||
title: '编辑字典',
|
||||
});
|
||||
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
// 分页参数
|
||||
const page = ref(1);
|
||||
const pageSize = ref(9);
|
||||
const total = ref(0); // 总条数
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
|
||||
|
||||
function changePage(newPage) {
|
||||
page.value = newPage;
|
||||
loadList();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<div class="flex h-[90dvh] w-full flex-col">
|
||||
<Modal2>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="字典名称" required>
|
||||
<Input v-model:value="dict_name" />
|
||||
</Form.Item>
|
||||
<Form.Item label="字典Key" required>
|
||||
<Input v-model:value="dict_key" />
|
||||
</Form.Item>
|
||||
<Form.Item label="描述">
|
||||
<Input v-model:value="dict_desc" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal2>
|
||||
<div class="flex h-full w-full bg-gray-50">
|
||||
<!-- 左侧：筛选 + 列表 -->
|
||||
<div class="flex w-64 flex-col border-r bg-white p-4">
|
||||
<!-- 按钮组 -->
|
||||
<div class="mb-4 flex justify-between space-x-2">
|
||||
<Button type="primary" @click="createTask" class="flex-1">
|
||||
新建字典
|
||||
</Button>
|
||||
<Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
|
||||
</div>
|
||||
<!-- 筛选框 -->
|
||||
<input
|
||||
v-model="filterKeyword"
|
||||
placeholder="筛选字典"
|
||||
class="mb-4 rounded-md border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
<div class="flex-1 space-y-2 overflow-auto">
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
@click="selectItem(item)"
|
||||
class="group cursor-pointer rounded border p-3 transition hover:bg-gray-100"
|
||||
:class="{ 'bg-gray-100': item.id === selectedItem?.id }"
|
||||
>
|
||||
<!-- 第一行：标题 + 操作 -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="text-base font-medium">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex gap-2 opacity-0 transition group-hover:opacity-100"
|
||||
@click.stop
|
||||
>
|
||||
<Button size="small" type="text" @click="editItem(item)">
|
||||
✏️
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
danger
|
||||
@click="deleteItem(item)"
|
||||
>
|
||||
🗑️
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：描述 -->
|
||||
<div class="mt-1 text-sm text-gray-500">
|
||||
{{ item.remark || '—' }}
|
||||
</div>
|
||||
|
||||
<!-- 第三行：时间 -->
|
||||
<div class="mt-1 text-xs text-gray-400">
|
||||
{{ item.created_at }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="mt-2 flex justify-center space-x-2">
|
||||
<button
|
||||
:disabled="page === 1"
|
||||
@click="changePage(page - 1)"
|
||||
class="rounded border px-1"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
|
||||
<span>第 {{ page }} 页 / 共 {{ totalPages }} 页</span>
|
||||
|
||||
<button
|
||||
:disabled="page === totalPages"
|
||||
@click="changePage(page + 1)"
|
||||
class="rounded border px-1"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：Tab 内容区 -->
|
||||
<div class="flex flex-1 flex-col overflow-hidden p-6">
|
||||
<FormDrawer :dict-id="selectedItem?.id" @success="onRefresh" />
|
||||
<Grid :table-title="字典项">
|
||||
<template #toolbar-tools>
|
||||
<Button type="primary" @click="onCreate">
|
||||
<Plus class="size-5" />
|
||||
新增项
|
||||
</Button>
|
||||
</template>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -66,7 +66,7 @@ export function useColumns<T = SystemRoleApi.SystemRole>(
|
||||
title: '备注',
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
field: 'created_at',
|
||||
title: '创建时间',
|
||||
width: 200,
|
||||
},
|
||||
|
||||
@@ -1,35 +1,66 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { z } from '#/adapter/form';
|
||||
import { isUserNameExists } from '#/api';
|
||||
import * as api from '#/api';
|
||||
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
export function useFormSchema(
|
||||
formData: Ref<SystemUserApi.SystemUser | undefined>,
|
||||
): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '昵称',
|
||||
componentProps: { allowClear: true },
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'email',
|
||||
label: '登录账号',
|
||||
rules: 'required',
|
||||
componentProps: { allowClear: true },
|
||||
rules: computed(() => {
|
||||
if (formData.value?.id) {
|
||||
// 编辑时只做长度校验
|
||||
return z
|
||||
.string()
|
||||
.min(1, '登录账号至少1个字符')
|
||||
.max(30, '登录账号最多30个字符');
|
||||
} else {
|
||||
// 新增时校验唯一性
|
||||
return z
|
||||
.string()
|
||||
.min(1, '登录账号至少1个字符')
|
||||
.max(30, '登录账号最多30个字符')
|
||||
.refine(
|
||||
async (value: string) => !(await isUserNameExists(value)),
|
||||
(value) => ({ message: `登录账号${value}已存在` }),
|
||||
);
|
||||
}
|
||||
}),
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'phone',
|
||||
label: '手机号',
|
||||
componentProps: { allowClear: true },
|
||||
},
|
||||
{
|
||||
component: 'InputPassword',
|
||||
fieldName: 'password',
|
||||
rules: 'required',
|
||||
label: '密码',
|
||||
rules: computed(() => (formData.value?.id ? undefined : 'required')), // 编辑时密码可不填
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
fieldName: 'dept_id',
|
||||
label: '所属组织',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
api: api.getDeptList,
|
||||
@@ -38,11 +69,12 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
valueField: 'id',
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'dept_id',
|
||||
label: '所属部门',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
@@ -51,9 +83,6 @@ export function useFormSchema(): VbenFormSchema[] {
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 1,
|
||||
fieldName: 'status',
|
||||
label: '状态',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
@@ -71,8 +100,18 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '用户名称',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
label: '用户编号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{ component: 'Input', fieldName: 'id', label: '用户编号' },
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
@@ -96,7 +135,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
|
||||
childrenField: 'children',
|
||||
},
|
||||
fieldName: 'dept_id',
|
||||
label: '所属部门',
|
||||
label: '所属组织',
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
@@ -133,7 +172,7 @@ export function useColumns<T = SystemUserApi.SystemUser>(
|
||||
{
|
||||
field: 'dept_name',
|
||||
minWidth: 120,
|
||||
title: '所属部门',
|
||||
title: '所属组织',
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SystemUserApi } from '#/api';
|
||||
import { type SystemUserApi, updateUserPatch } from "#/api";
|
||||
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
@@ -12,7 +12,7 @@ import { Tree, useVbenDrawer } from '@vben/common-ui';
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createUser, getAllRoleList, updateUser } from '#/api';
|
||||
import { createUser, getAllRoleList } from '#/api';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from './data';
|
||||
@@ -20,9 +20,8 @@ import { useFormSchema } from './data';
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
const formData = ref<SystemUserApi.SystemUser>();
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
schema: useFormSchema(formData),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
@@ -36,7 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
||||
if (!valid) return;
|
||||
const values = await formApi.getValues();
|
||||
drawerApi.lock();
|
||||
(id.value ? updateUser(id.value, values) : createUser(values))
|
||||
(id.value ? updateUserPatch(id.value, values) : createUser(values))
|
||||
.then(() => {
|
||||
emits('success');
|
||||
drawerApi.close();
|
||||
|
||||
@@ -0,0 +1,237 @@
|
||||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { SystemUserApi } from '#/api';
|
||||
|
||||
import * as api from '#/api';
|
||||
|
||||
/**
|
||||
* 新增/修改
|
||||
*/
|
||||
export function useFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'license_plate',
|
||||
label: '车牌',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'vehicle_type',
|
||||
label: '车型',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'livestock_type',
|
||||
label: '牲畜种类',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'livestock_source',
|
||||
label: '牲畜来源',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '已检疫', value: 1 },
|
||||
{ label: '未检疫', value: 0 },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: 0,
|
||||
fieldName: 'is_inspected',
|
||||
label: '检疫状态',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'remark',
|
||||
label: '备注',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 筛选
|
||||
*/
|
||||
export function useGridFormSchema(): VbenFormSchema[] {
|
||||
return [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'id',
|
||||
label: '编号',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'license_plate',
|
||||
label: '车牌',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'vehicle_type',
|
||||
label: '车型',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'ApiCombobox',
|
||||
fieldName: 'livestock_type',
|
||||
label: '牲畜种类',
|
||||
componentProps: {
|
||||
api: () => api.getDictDetailList('livestock_type'),
|
||||
labelField: 'value',
|
||||
valueField: 'value',
|
||||
showSearch: true,
|
||||
mode: 'combobox', // 可选 combobox / tags
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'livestock_source',
|
||||
label: '牲畜来源',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
options: [
|
||||
{ label: '已检疫', value: 1 },
|
||||
{ label: '未检疫', value: 0 },
|
||||
],
|
||||
},
|
||||
fieldName: 'is_inspected',
|
||||
label: '检疫状态',
|
||||
},
|
||||
{
|
||||
component: 'RangePicker',
|
||||
fieldName: 'createTime',
|
||||
label: '录入时间',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表展示
|
||||
* @param onActionClick
|
||||
* @param onStatusChange
|
||||
*/
|
||||
export function useColumns<T = SystemUserApi.SystemUser>(
|
||||
onActionClick: OnActionClickFn<T>,
|
||||
onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
|
||||
): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '编号',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'license_plate',
|
||||
title: '车牌',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
cellRender: { name: 'CellImage' },
|
||||
field: 'license_plate_image',
|
||||
title: '车牌照',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'vehicle_type',
|
||||
title: '车型',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
cellRender: { name: 'CellImage' },
|
||||
field: 'vehicle_image',
|
||||
title: '车身照',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'livestock_type',
|
||||
title: '牲畜种类',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: 'livestock_source',
|
||||
title: '牲畜来源',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
field: 'is_inspected',
|
||||
title: '检疫状态',
|
||||
width: 100,
|
||||
cellRender: {
|
||||
name: 'CellSwitch',
|
||||
props: {
|
||||
checkedChildren: '已检疫',
|
||||
unCheckedChildren: '未检疫',
|
||||
},
|
||||
attrs: {
|
||||
beforeChange: onStatusChange,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
title: '录入时间',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'updated_at',
|
||||
title: '最后更新时间',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'dept_name',
|
||||
title: '所属组织',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
title: '备注',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
cellRender: {
|
||||
attrs: {
|
||||
nameField: 'name',
|
||||
nameTitle: '设备名称',
|
||||
onClick: onActionClick,
|
||||
},
|
||||
name: 'CellOperation',
|
||||
},
|
||||
field: 'operation',
|
||||
fixed: 'right',
|
||||
title: '操作',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import type { SentinelApi } from '#/api';
|
||||
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { Tree, useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { createSentinelRecord, updateSentinelRecord } from '#/api';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import { useFormSchema } from './data';
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
|
||||
const formData = ref<SentinelApi.Record>();
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const roles = ref<DataNode[]>([]);
|
||||
const loadingRoles = ref(false);
|
||||
|
||||
const id = ref();
|
||||
const [Drawer, drawerApi] = useVbenDrawer({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) return;
|
||||
const values = await formApi.getValues();
|
||||
drawerApi.lock();
|
||||
(id.value
|
||||
? updateSentinelRecord(id.value, values)
|
||||
: createSentinelRecord(values)
|
||||
)
|
||||
.then(() => {
|
||||
emits('success');
|
||||
drawerApi.close();
|
||||
})
|
||||
.catch(() => {
|
||||
drawerApi.unlock();
|
||||
});
|
||||
},
|
||||
|
||||
async onOpenChange(isOpen) {
|
||||
if (isOpen) {
|
||||
const data = drawerApi.getData<SentinelApi.Record>();
|
||||
formApi.resetForm();
|
||||
|
||||
if (data) {
|
||||
formData.value = data;
|
||||
id.value = data.id;
|
||||
} else {
|
||||
id.value = undefined;
|
||||
}
|
||||
|
||||
// Wait for Vue to flush DOM updates (form fields mounted)
|
||||
await nextTick();
|
||||
if (data) {
|
||||
formApi.setValues(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const getDrawerTitle = computed(() => {
|
||||
return formData.value?.id
|
||||
? $t('common.edit', $t('system.role.name'))
|
||||
: $t('common.create', $t('system.role.name'));
|
||||
});
|
||||
|
||||
function getNodeClass(node: Recordable<any>) {
|
||||
const classes: string[] = [];
|
||||
if (node.value?.type === 'button') {
|
||||
classes.push('inline-flex');
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Drawer :title="getDrawerTitle">
|
||||
<Form>
|
||||
<template #roles="slotProps">
|
||||
<Spin :spinning="loadingRoles" wrapper-class-name="w-full">
|
||||
<Tree
|
||||
:tree-data="roles"
|
||||
multiple
|
||||
bordered
|
||||
:default-expanded-level="2"
|
||||
:get-node-class="getNodeClass"
|
||||
v-bind="slotProps"
|
||||
value-field="id"
|
||||
label-field="title"
|
||||
>
|
||||
<template #node="{ value }">
|
||||
{{ $t(value.id) }}
|
||||
</template>
|
||||
</Tree>
|
||||
</Spin>
|
||||
</template>
|
||||
</Form>
|
||||
</Drawer>
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
:deep(.ant-tree-title) {
|
||||
.tree-actions {
|
||||
display: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-title:hover) {
|
||||
.tree-actions {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
justify-content: flex-end;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Recordable } from '@vben-core/typings';
|
||||
|
||||
import type {
|
||||
OnActionClickParams,
|
||||
VxeTableGridOptions,
|
||||
} from '#/adapter/vxe-table';
|
||||
import { deleteDevice, deleteSentinelRecord, type SentinelApi, type SystemDeviceApi } from "#/api";
|
||||
|
||||
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 { getSentinelRecordList, updateSentinelRecordPatch } from '#/api';
|
||||
|
||||
import { useColumns, useGridFormSchema } from './data';
|
||||
import Form from './form.vue';
|
||||
|
||||
const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
connectedComponent: Form,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* 状态开关即将改变
|
||||
* @param newStatus 期望改变的状态值
|
||||
* @param row 行数据
|
||||
* @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
|
||||
*/
|
||||
async function onStatusChange(newStatus: number, row: SentinelApi.Record) {
|
||||
const status: Recordable<string> = {
|
||||
0: '不通过',
|
||||
1: '通过',
|
||||
};
|
||||
try {
|
||||
await confirm(
|
||||
`你要将记录编号为${row.id}的检查状态切换为【${status[newStatus.toString()]}】 吗？`,
|
||||
`切换检查状态`,
|
||||
);
|
||||
await updateSentinelRecordPatch(row.id, { is_inspected: newStatus });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
formOptions: {
|
||||
fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
|
||||
schema: useGridFormSchema(),
|
||||
submitOnChange: true,
|
||||
},
|
||||
gridOptions: {
|
||||
columns: useColumns(onActionClick, onStatusChange),
|
||||
height: 'auto',
|
||||
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const res = await getSentinelRecordList({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
return {
|
||||
items: res.list,
|
||||
total: res.total,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: false,
|
||||
refresh: true,
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
} as VxeTableGridOptions<SentinelApi.Record>,
|
||||
});
|
||||
|
||||
function onActionClick(e: OnActionClickParams<SentinelApi.Record>) {
|
||||
switch (e.code) {
|
||||
case 'delete': {
|
||||
onDelete(e.row);
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
onEdit(e.row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onEdit(row: SentinelApi.Record) {
|
||||
formDrawerApi.setData(row).open();
|
||||
}
|
||||
|
||||
function onDelete(row: SentinelApi.Record) {
|
||||
const hideLoading = message.loading({
|
||||
content: `正在删除记录：${[row.id]}`,
|
||||
duration: 0,
|
||||
key: 'action_process_msg',
|
||||
});
|
||||
deleteSentinelRecord(row.id)
|
||||
.then(() => {
|
||||
message.success({
|
||||
content: `已删除记录：${[row.id]}`,
|
||||
key: 'action_process_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>
|
||||
Reference in New Issue
Block a user