牧安云哨-前端
This commit is contained in:
BBIT-Kai
@@ -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