feat: post form

This commit is contained in:
dap 2024-09-13 15:27:29 +08:00
parent d27a131877
commit c56dc7c366
13 changed files with 1002 additions and 8 deletions

View File

@ -0,0 +1,46 @@
import type { Post } from './model';
import type { ID, IDS, PageQuery } from '#/api/common';
import { commonExport } from '#/api/helper';
import { requestClient } from '#/api/request';
enum Api {
postExport = '/system/post/export',
postList = '/system/post/list',
postSelect = '/system/post/optionselect',
root = '/system/post',
}
/**
*
* @param params
* @returns Post[]
*/
export function postList(params?: PageQuery) {
return requestClient.get<Post[]>(Api.postList, { params });
}
export function postExport(data: any) {
return commonExport(Api.postExport, data);
}
export function postInfo(postId: ID) {
return requestClient.get<Post>(`${Api.root}/${postId}`);
}
export function postAdd(data: any) {
return requestClient.postWithMsg<void>(Api.root, data);
}
export function postUpdate(data: any) {
return requestClient.putWithMsg<void>(Api.root, data);
}
export function postRemove(postIds: IDS) {
return requestClient.deleteWithMsg<void>(`${Api.root}/${postIds}`);
}
export function postOptionSelect(deptId: ID) {
return requestClient.get(Api.postSelect, { params: { deptId } });
}

View File

@ -0,0 +1,12 @@
/**
* @description: Post interface
*/
export interface Post {
postId: number;
postCode: string;
postName: string;
postSort: number;
status: string;
remark: string;
createTime: string;
}

View File

@ -1,7 +1,8 @@
import type { FileCallBack, UpdatePasswordParam, UserProfile } from './model';
import { buildUUID } from '@vben/utils';
import { requestClient } from '#/api/request';
import { buildUUID } from '#/utils/uuid';
enum Api {
root = '/system/user/profile',

View File

@ -0,0 +1,164 @@
import type {
DeptTree,
ResetPwdParam,
User,
UserImportParam,
UserInfoResponse,
} from './model';
import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
import { commonExport, ContentTypeEnum } from '#/api/helper';
import { requestClient } from '#/api/request';
enum Api {
deptTree = '/system/user/deptTree',
listDeptUsers = '/system/user/list/dept',
root = '/system/user',
userAuthRole = '/system/user/authRole',
userExport = '/system/user/export',
userImport = '/system/user/importData',
userImportTemplate = '/system/user/importTemplate',
userList = '/system/user/list',
userResetPassword = '/system/user/resetPwd',
userStatusChange = '/system/user/changeStatus',
}
/**
*
* @param params
* @returns User
*/
export function userList(params?: PageQuery) {
return requestClient.get<PageResult<User>>(Api.userList, { params });
}
/**
* excel
* @param data data
* @returns blob
*/
export function userExport(data: any) {
return commonExport(Api.userExport, data);
}
/**
* excel导入用户
* @param data
* @returns void
*/
export function userImportData(data: UserImportParam) {
return requestClient.post<void>(Api.userImport, data, {
// 返回的msg包含<br> 用modal显示
errorMessageMode: 'modal',
headers: {
'Content-Type': ContentTypeEnum.FORM_DATA,
},
successMessageMode: 'modal',
});
}
/**
*
* @returns blob
*/
export function downloadImportTemplate() {
return requestClient.post<Blob>(
Api.userImportTemplate,
{},
{
isTransformResponse: false,
responseType: 'blob',
},
);
}
/**
* ID options
* @param userId ID
* @returns
*/
export function findUserInfo(userId?: ID) {
const url = userId ? `${Api.root}/${userId}` : `${Api.root}`;
return requestClient.get<UserInfoResponse>(url);
}
/**
*
* @param data data
* @returns void
*/
export function userAdd(data: any) {
return requestClient.postWithMsg<void>(Api.root, data);
}
/**
*
* @param data data
* @returns void
*/
export function userUpdate(data: any) {
return requestClient.putWithMsg<void>(Api.root, data);
}
/**
*
* @param data data
* @returns void
*/
export function userStatusChange(data: any) {
return requestClient.putWithMsg<void>(Api.userStatusChange, data);
}
/**
*
* @param userIds ID数组
* @returns void
*/
export function userRemove(userIds: IDS) {
return requestClient.deleteWithMsg<void>(`${Api.root}/${userIds}`);
}
/**
*
* @param data
* @returns void
*/
export function userResetPassword(data: ResetPwdParam) {
return requestClient.putWithMsg<void>(Api.userResetPassword, data, {
encrypt: true,
});
}
/**
*
* @param userId
* @returns void
*/
export function getUserAuthRole(userId: ID) {
return requestClient.get(`${Api.userAuthRole}/${userId}`);
}
/**
*
* @param userId
* @returns void
*/
export function userAuthRoleUpdate(userId: ID, roleIds: number[]) {
return requestClient.putWithMsg(Api.userAuthRole, { roleIds, userId });
}
/**
*
* @returns
*/
export function getDeptTree() {
return requestClient.get<DeptTree[]>(Api.deptTree);
}
/**
*
*/
export function listUserByDeptId(deptId: ID) {
return requestClient.get<User[]>(`${Api.listDeptUsers}/${deptId}`);
}

View File

@ -0,0 +1,116 @@
/**
* @description:
* @param updateSupport
* @param file excel文件
*/
export interface UserImportParam {
updateSupport: boolean;
file: Blob | File;
}
/**
* @description:
*/
export interface ResetPwdParam {
userId: string;
password: string;
}
export interface Dept {
deptId: number;
parentId: number;
parentName?: string;
ancestors: string;
deptName: string;
orderNum: number;
leader: string;
phone?: string;
email?: string;
status: string;
createTime?: string;
}
export interface Role {
roleId: string;
roleName: string;
roleKey: string;
roleSort: number;
dataScope: string;
menuCheckStrictly?: boolean;
deptCheckStrictly?: boolean;
status: string;
remark: string;
createTime?: string;
flag: boolean;
superAdmin: boolean;
}
export interface User {
userId: string;
tenantId: string;
deptId: number;
userName: string;
nickName: string;
userType: string;
email: string;
phonenumber: string;
sex: string;
avatar?: string;
status: string;
loginIp: string;
loginDate: string;
remark: string;
createTime: string;
dept: Dept;
roles: Role[];
roleIds?: string[];
postIds?: number[];
roleId: string;
}
export interface Post {
postId: number;
postCode: string;
postName: string;
postSort: number;
status: string;
remark: string;
createTime: string;
}
/**
* @description
* @param user
* @param roleIds IDS id为空
* @param roles
* @param postIds IDS id为空
* @param posts
*/
export interface UserInfoResponse {
user?: User;
roleIds?: string[];
roles: Role[];
postIds?: number[];
posts: Post[];
}
/**
* @description:
*/
export interface DeptTree {
id: number;
/**
* antd组件必须要这个属性
*/
key: string;
parentId: number;
label: string;
weight: number;
children?: DeptTree[];
}
export interface DeptTreeData {
id: number;
label: string;
children?: DeptTreeData[];
}

View File

@ -17,12 +17,12 @@ import {
} from 'vue';
import { preferences, usePreferences } from '@vben/preferences';
import { buildShortUUID } from '@vben/utils';
import Editor from '@tinymce/tinymce-vue';
import { isNumber } from 'lodash-es';
import { uploadApi, type UploadResult } from '#/api/core/upload';
import { buildShortUUID } from '#/utils/uuid';
import { bindHandlers } from './helper';
import ImgUpload from './img-upload.vue';

View File

@ -1,10 +1,9 @@
<script setup lang="ts">
import { Icon } from '@vben/icons';
import { buildUUID } from '@vben/utils';
import { Input } from 'ant-design-vue';
import { buildUUID } from '#/utils/uuid';
defineOptions({ name: 'SecretInput' });
defineProps({

View File

@ -0,0 +1,85 @@
import { DictEnum } from '@vben/constants';
import { getPopupContainer } from '@vben/utils';
import { type FormSchemaGetter } from '#/adapter';
import { getDictOptions } from '#/utils/dict';
export const drawerSchema: FormSchemaGetter = () => [
{
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
fieldName: 'id',
label: 'id',
},
{
component: 'TreeSelect',
componentProps: {
class: 'w-full',
getPopupContainer,
placeholder: '请选择',
},
fieldName: 'deptId',
label: '所属部门',
rules: 'required',
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'postName',
label: '岗位名称',
rules: 'required',
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'postCode',
label: '岗位编码',
rules: 'required',
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'postCategory',
label: '类别编码',
},
{
component: 'InputNumber',
componentProps: {
class: 'w-full',
placeholder: '请输入',
},
fieldName: 'postSort',
label: '岗位排序',
rules: 'required',
},
{
component: 'RadioGroup',
componentProps: {
buttonStyle: 'solid',
options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
optionType: 'button',
},
defaultValue: '0',
fieldName: 'postStatus',
label: '岗位状态',
rules: 'required',
},
{
component: 'Textarea',
componentProps: {
placeholder: '请输入',
},
fieldName: 'remark',
formItemClass: 'items-baseline',
label: '备注',
},
];

View File

@ -1,9 +1,21 @@
<script setup lang="ts">
import CommonSkeleton from '#/views/common';
import { Page, useVbenDrawer } from '@vben/common-ui';
import postDrawer from './post-drawer.vue';
const [PostDrawer, drawerApi] = useVbenDrawer({
connectedComponent: postDrawer,
});
function handleAdd() {
drawerApi.setData({ update: false });
drawerApi.open();
}
</script>
<template>
<div>
<CommonSkeleton />
</div>
<Page>
<a-button type="primary" @click="handleAdd">add</a-button>
<PostDrawer />
</Page>
</template>

View File

@ -0,0 +1,115 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { addFullName } from '@vben/utils';
import { useVbenForm } from '#/adapter';
import { postAdd, postUpdate } from '#/api/system/post';
import { getDeptTree } from '#/api/system/user';
import { drawerSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
interface DrawerProps {
update: boolean;
record?: any;
}
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
},
schema: drawerSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
async function initDeptSelect() {
const deptTree = await getDeptTree();
// /
addFullName(deptTree, 'label', ' / ');
formApi.setState((prev) => {
return {
...prev,
schema: prev.schema?.map((item) => {
//
if (item.fieldName === 'deptId') {
return {
...item,
componentProps: {
...item.componentProps,
fieldNames: { label: 'label', value: 'id' },
treeData: deptTree,
treeDefaultExpandAll: true,
treeLine: { showLeafIcon: false },
//
treeNodeLabelProp: 'fullName',
},
};
}
return item;
}),
};
});
}
const [BasicDrawer, drawerApi] = useVbenDrawer({
onCancel: handleCancel,
onConfirm: handleConfirm,
async onOpenChange(isOpen) {
if (!isOpen) {
return null;
}
drawerApi.drawerLoading(true);
const { record, update } = drawerApi.getData() as DrawerProps;
isUpdate.value = update;
//
await initDeptSelect();
// &&
if (update && record) {
for (const key in record) {
await formApi.setFieldValue(key, record[key]);
}
}
drawerApi.drawerLoading(false);
},
});
async function handleConfirm() {
try {
drawerApi.drawerLoading(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
const data = await formApi.getValues();
console.log(data);
await (isUpdate.value ? postUpdate(data) : postAdd(data));
emit('reload');
await handleCancel();
} catch (error) {
console.error(error);
} finally {
drawerApi.drawerLoading(false);
}
}
async function handleCancel() {
drawerApi.close();
await formApi.resetForm();
}
</script>
<template>
<BasicDrawer :title="title" class="w-[600px]">
<BasicForm />
</BasicDrawer>
</template>

View File

@ -5,4 +5,6 @@ export * from './generate-routes-frontend';
export * from './get-popup-container';
export * from './merge-route-modules';
export * from './reset-routes';
export * from './tree';
export * from './unmount-global-loading';
export * from './uuid';

View File

@ -0,0 +1,400 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
interface TreeHelperConfig {
children: string;
id: string;
pid: string;
}
type Fn = (node: any, parentNode?: any) => any;
// 默认配置
const DEFAULT_CONFIG: TreeHelperConfig = {
id: 'id',
pid: 'parentId',
children: 'children',
};
// 获取配置。 Object.assign 从一个或多个源对象复制到目标对象
const getConfig = (config: Partial<TreeHelperConfig>) =>
Object.assign({}, DEFAULT_CONFIG, config);
// tree from list
// 列表中的树
export function listToTree<T = any>(
list: any[],
config: Partial<TreeHelperConfig> = {},
): T[] {
const conf = getConfig(config) as TreeHelperConfig;
const nodeMap = new Map();
const result: T[] = [];
const { id, pid, children } = conf;
for (const node of list) {
node[children] = node[children] || [];
nodeMap.set(node[id], node);
}
for (const node of list) {
const parent = nodeMap.get(node[pid]);
(parent ? parent[children] : result).push(node);
}
return result;
}
export function treeToList<T = any>(
tree: any,
config: Partial<TreeHelperConfig> = {},
): T {
config = getConfig(config);
const { children } = config;
const result: any = [...tree];
for (let i = 0; i < result.length; i++) {
if (!result[i][children!]) continue;
result.splice(i + 1, 0, ...result[i][children!]);
}
return result;
}
export function findNode<T = any>(
tree: any,
func: Fn,
config: Partial<TreeHelperConfig> = {},
): null | T {
config = getConfig(config);
const { children } = config;
const list = [...tree];
for (const node of list) {
if (func(node)) return node;
node[children!] && list.push(...node[children!]);
}
return null;
}
export function findNodeAll<T = any>(
tree: any,
func: Fn,
config: Partial<TreeHelperConfig> = {},
): T[] {
config = getConfig(config);
const { children } = config;
const list = [...tree];
const result: T[] = [];
for (const node of list) {
func(node) && result.push(node);
node[children!] && list.push(...node[children!]);
}
return result;
}
export function findPath<T = any>(
tree: any,
func: Fn,
config: Partial<TreeHelperConfig> = {},
): null | T | T[] {
config = getConfig(config);
const path: T[] = [];
const list = [...tree];
const visitedSet = new Set();
const { children } = config;
while (list.length > 0) {
const node = list[0];
if (visitedSet.has(node)) {
path.pop();
list.shift();
} else {
visitedSet.add(node);
node[children!] && list.unshift(...node[children!]);
path.push(node);
if (func(node)) {
return path;
}
}
}
return null;
}
export function findPathAll(
tree: any,
func: Fn,
config: Partial<TreeHelperConfig> = {},
) {
config = getConfig(config);
const path: any[] = [];
const list = [...tree];
const result: any[] = [];
const { children } = config;
const visitedSet = new Set();
while (list.length > 0) {
const node = list[0];
if (visitedSet.has(node)) {
path.pop();
list.shift();
} else {
visitedSet.add(node);
node[children!] && list.unshift(...node[children!]);
path.push(node);
func(node) && result.push([...path]);
}
}
return result;
}
export function filter<T = any>(
tree: T[],
func: (n: T) => boolean,
// Partial 将 T 中的所有属性设为可选
config: Partial<TreeHelperConfig> = {},
): T[] {
// 获取配置
config = getConfig(config);
const children = config.children as string;
function listFilter(list: T[]) {
return list
.map((node: any) => ({ ...node }))
.filter((node) => {
// 递归调用 对含有children项 进行再次调用自身函数 listFilter
node[children] = node[children] && listFilter(node[children]);
// 执行传入的回调 func 进行过滤
return func(node) || (node[children] && node[children].length > 0);
});
}
return listFilter(tree);
}
export function forEach<T = any>(
tree: T[],
func: (n: T) => any,
config: Partial<TreeHelperConfig> = {},
): void {
config = getConfig(config);
const list: any[] = [...tree];
const { children } = config;
for (let i = 0; i < list.length; i++) {
// func 返回true就终止遍历避免大量节点场景下无意义循环引起浏览器卡顿
if (func(list[i])) {
return;
}
children &&
list[i][children] &&
list.splice(i + 1, 0, ...list[i][children]);
}
}
/**
* @description: Extract tree specified structure
* @description:
*/
export function treeMap<T = any>(
treeData: T[],
opt: { children?: string; conversion: Fn },
): T[] {
return treeData.map((item) => treeMapEach(item, opt));
}
/**
* @description: Extract tree specified structure
* @description:
*/
export function treeMapEach(
data: any,
{ conversion, children = 'children' }: { children?: string; conversion: Fn },
) {
const haveChildren =
Array.isArray(data[children]) && data[children].length > 0;
const conversionData = conversion(data) || {};
return haveChildren
? {
...conversionData,
[children]: data[children].map((i: number) =>
treeMapEach(i, {
children,
conversion,
}),
),
}
: {
...conversionData,
};
}
/**
*
* @param treeDatas
* @param callBack
* @param parentNode
*/
export function eachTree(treeDatas: any[], callBack: Fn, parentNode = {}) {
treeDatas.forEach((element) => {
const newNode = callBack(element, parentNode) || element;
if (element.children) {
eachTree(element.children, callBack, newNode);
}
});
}
// 如果节点的children为空, 则删除children属性
export function removeEmptyChildren(data: any[], childrenField = 'children') {
data.forEach((item) => {
if (!item[childrenField]) {
return;
}
if (item[childrenField].length > 0) {
removeEmptyChildren(item[childrenField]);
} else {
Reflect.deleteProperty(item, childrenField);
}
});
}
// eslint-disable-next-line jsdoc/require-returns-check
/**
*
* --
* @param treeData tree数据
* @param labelName
* @param splitStr
* @returns void
*/
export function addFullName(
treeData: any[],
labelName = 'label',
splitStr = '-',
) {
function addFullNameProperty(node: any, parentNames: any[] = []) {
const fullNameParts = [...parentNames, node[labelName]];
node.fullName = fullNameParts.join(splitStr);
if (node.children && node.children.length > 0) {
node.children.forEach((childNode: any) => {
addFullNameProperty(childNode, fullNameParts);
});
}
}
treeData.forEach((item: any) => {
addFullNameProperty(item);
});
}
/**
* https://blog.csdn.net/Web_J/article/details/129281329
* nodeId ID
* @param treeList list
* @param nodeId ID
* @param config config
* @returns ID数组
*/
export function findParentsIds(
treeList: any[],
nodeId: number,
config: Partial<TreeHelperConfig> = {},
) {
const conf = getConfig(config) as TreeHelperConfig;
const { id, children } = conf;
// 用于存储所有父节点ID的数组
const parentIds: number[] = [];
function traverse(node: any, nodeId: number) {
if (node[id] === nodeId) {
return true;
}
if (node[children]) {
// 如果当前节点有子节点,则继续遍历子节点
for (const childNode of node[children]) {
if (traverse(childNode, nodeId)) {
// 如果在子节点中找到了子节点的父节点则将当前节点的ID添加到父节点ID数组中并返回true表示已经找到了子节点
parentIds.push(node[id]);
return true;
}
}
}
return false;
}
for (const node of treeList) {
if (traverse(node, nodeId)) {
// 如果在当前节点的子树中找到了子节点的父节点,则直接退出循环
break;
}
}
return parentIds.sort();
}
/**
* ID
* @param treeList list
* @param nodeIds ID list
* @param config config
* @returns ID数组
*/
export function findGroupParentIds(
treeList: any[],
nodeIds: number[],
config: Partial<TreeHelperConfig> = {},
) {
// 用于存储所有父节点ID的Set 主要为了去重
const parentIds = new Set<number>();
nodeIds.forEach((nodeId) => {
findParentsIds(treeList, nodeId, config).forEach((parentId) => {
parentIds.add(parentId);
});
});
return [...parentIds].sort();
}
/**
* ID
* @param treeList list
* @param config
* @returns ID数组
*/
export function findAllIds(
treeList: any[],
config: Partial<TreeHelperConfig> = DEFAULT_CONFIG,
) {
const conf = getConfig(config) as TreeHelperConfig;
const { id, children } = conf;
const ids: number[] = [];
treeList.forEach((item) => {
if (item[children]) {
const tempIds = findAllIds(item[children], config);
ids.push(...tempIds);
}
ids.push(item[id]);
});
return [...ids].sort();
}
/**
* @description filterByLevel函数
* @description
*/
export function findIdsByLevel(
level = 1,
list?: any[],
config: Partial<TreeHelperConfig> = DEFAULT_CONFIG,
currentLevel = 1,
) {
if (!level) {
return [];
}
const res: (number | string)[] = [];
const data = list || [];
for (const item of data) {
const { id: keyField, children: childrenField } = config;
const key = keyField ? item[keyField] : '';
const children = childrenField ? item[childrenField] : [];
res.push(key);
if (children && children.length > 0 && currentLevel < level) {
currentLevel += 1;
res.push(...findIdsByLevel(level, children, config, currentLevel));
}
}
return res as number[] | string[];
}

View File

@ -0,0 +1,42 @@
const hexList: string[] = [];
for (let i = 0; i <= 15; i++) {
hexList[i] = i.toString(16);
}
export function buildUUID(): string {
let uuid = '';
for (let i = 1; i <= 36; i++) {
switch (i) {
case 9:
case 14:
case 19:
case 24: {
uuid += '-';
break;
}
case 15: {
uuid += 4;
break;
}
case 20: {
uuid += hexList[(Math.random() * 4) | 8];
break;
}
default: {
uuid += hexList[Math.trunc(Math.random() * 16)];
}
}
}
return uuid.replaceAll('-', '');
}
let unique = 0;
export function buildShortUUID(prefix = ''): string {
const time = Date.now();
const random = Math.floor(Math.random() * 1_000_000_000);
unique++;
return `${prefix}_${random}${unique}${String(time)}`;
}