gin/simple-todo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: app功能基本实现

Browse Source
This commit is contained in:
gin
2026-05-26 11:54:24 +08:00
parent 2757a4fb49
commit 2a702fa6a9
218 changed files with 6766 additions and 5961 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/web/.env
-2
View File
@@ -1,4 +1,2 @@
# Web default environment
VITE_PORT = 8848
VITE_HIDE_HOME = false
frontend/web/Dockerfile
+11 -8
View File
@@ -1,20 +1,23 @@
FROM node:16-alpine as build-stage
FROM node:22-alpine AS build-stage
WORKDIR /app
RUN corepack enable
RUN corepack prepare pnpm@7.32.1 --activate
RUN corepack prepare pnpm@11.1.3 --activate
RUN npm config set registry https://registry.npmmirror.com
COPY .npmrc package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
COPY .npmrc package.json pnpm-lock.yaml pnpm-workspace.yaml tsconfig.base.json ./
COPY web/package.json web/package.json
RUN pnpm install --frozen-lockfile --filter @simple-template/web...
COPY . .
COPY web web
WORKDIR /app/web
RUN pnpm build
FROM nginx:stable-alpine as production-stage
FROM nginx:stable-alpine AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/web/dist /usr/share/nginx/html
COPY web/nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
CMD ["nginx", "-g", "daemon off;"]
frontend/web/build/index.ts
-1
View File
@@ -6,7 +6,6 @@ const wrapperEnv = (envConfigs: Recordable): ViteEnv => {
VITE_PUBLIC_PATH: "",
VITE_ROUTER_HISTORY: "",
VITE_CDN: false,
VITE_HIDE_HOME: "false",
VITE_COMPRESSION: "none",
VITE_APP_BASE_API: ""
};
frontend/web/nginx/default.conf
+20
View File
@@ -0,0 +1,20 @@
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
location /prod-api/ {
proxy_pass http://app:8080/;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location / {
try_files $uri $uri/ /index.html;
}
}
frontend/web/package.json
+1
View File
@@ -50,6 +50,7 @@
"qs": "^6.11.2",
"responsive-storage": "^2.2.0",
"sortablejs": "^1.15.0",
"tippy.js": "^6.3.7",
"typeit": "^8.7.1",
"vue": "^3.3.4",
"vue-router": "^4.2.2",
frontend/web/src/api/common/login.ts
+26 -4
View File
@@ -11,6 +11,8 @@ export type CaptchaDTO = {
export type ConfigDTO = {
/** 验证码开关 */
isCaptchaOn: boolean;
/** 注册开关 */
isRegisterUserOn?: boolean;
/** 系统字典配置（下拉选项之类的） */
dictionary: Record<string, Array<DictionaryData>>;
};
@@ -26,6 +28,25 @@ export type LoginByPasswordDTO = {
captchaCodeKey: string;
};
export type RegisterUserCommand = {
/** 用户名 */
username: string;
/** 昵称 */
nickname?: string;
/** 密码 */
password: string;
/** 确认密码 */
confirmPassword: string;
/** 邮箱 */
email?: string;
/** 手机号 */
phoneNumber?: string;
/** 验证码 */
captchaCode: string;
/** 验证码对应的缓存key */
captchaCodeKey: string;
};
/**
* 后端token实现
*/
@@ -50,15 +71,11 @@ export interface CurrentUserInfoDTO {
createTime?: Date;
creatorId?: number;
creatorName?: string;
deptId?: number;
deptName?: string;
email?: string;
loginDate?: Date;
loginIp?: string;
nickName?: string;
phoneNumber?: string;
postId?: number;
postName?: string;
remark?: string;
roleId?: number;
roleName?: string;
@@ -93,6 +110,11 @@ export const loginByPassword = (data: LoginByPasswordDTO) => {
return http.request<ResponseData<TokenDTO>>("post", "/login", { data });
};
/** 注册接口 */
export const registerUser = (data: RegisterUserCommand) => {
return http.request<ResponseData<TokenDTO>>("post", "/register", { data });
};
/** 获取当前登录用户接口 */
export const getLoginUserInfo = () => {
return http.request<ResponseData<TokenDTO>>("get", "/getLoginUserInfo");
frontend/web/src/api/system/dept.ts
-83
View File
@@ -1,83 +0,0 @@
import { http } from "@/utils/http";
export interface DeptQuery extends BaseQuery {
// TODO 目前不需要这个参数
deptId?: number;
parentId?: number;
}
/**
* DeptDTO
*/
export interface DeptDTO {
createTime?: Date;
id?: number;
deptName?: string;
email?: string;
leaderName?: string;
orderNum?: number;
parentId?: number;
phone?: string;
status?: number;
statusStr?: string;
}
/**
* AddDeptCommand
*/
export interface DeptRequest {
deptName: string;
email?: string;
leaderName?: string;
orderNum: number;
parentId: number;
phone?: string;
status: number;
}
export interface DeptTreeDTO {
id: number;
parentId: number;
label: string;
children: [DeptTreeDTO];
}
/** 获取部门列表 */
export const getDeptListApi = (params?: DeptQuery) => {
return http.request<ResponseData<Array<DeptDTO>>>("get", "/system/depts", {
params
});
};
/** 新增部门 */
export const addDeptApi = (data: DeptRequest) => {
console.log(data);
return http.request<ResponseData<void>>("post", "/system/dept", {
data
});
};
/** 部门详情 */
export const getDeptInfoApi = (deptId: string) => {
return http.request<ResponseData<DeptDTO>>("get", `/system/dept/${deptId}`);
};
/** 修改部门 */
export const updateDeptApi = (deptId: string, data: DeptRequest) => {
return http.request<ResponseData<void>>("put", `/system/dept/${deptId}`, {
data
});
};
/** 删除部门 */
export const deleteDeptApi = (deptId: string) => {
return http.request<ResponseData<void>>("delete", `/system/dept/${deptId}`);
};
/** 获取部门树级结构 */
export const getDeptTree = () => {
return http.request<ResponseData<DeptTreeDTO>>(
"get",
"/system/depts/dropdown"
);
};
frontend/web/src/api/system/log.ts
-2
View File
@@ -11,8 +11,6 @@ export interface OperationLogDTO {
businessType?: number;
businessTypeStr?: string;
calledMethod?: string;
deptId?: number;
deptName?: string;
errorStack?: string;
operationId?: number;
operationParam?: string;
frontend/web/src/api/system/monitor.ts
-1
View File
@@ -7,7 +7,6 @@ export interface OnlineUserQuery {
export interface OnlineUserInfo {
browser?: string;
deptName?: string;
ipAddress?: string;
loginLocation?: string;
loginTime?: number;
frontend/web/src/api/system/post.ts
-70
View File
@@ -1,70 +0,0 @@
import { http } from "@/utils/http";
export interface PostListCommand extends BasePageQuery {
postCode?: string;
postName?: string;
status?: number;
}
export interface PostPageResponse {
createTime: string;
postCode: string;
postId: number;
postName: string;
postSort: number;
remark: string;
status: number;
statusStr: string;
}
export function getPostListApi(params: PostListCommand) {
return http.request<ResponseData<PageDTO<PostPageResponse>>>(
"get",
"/system/post/list",
{
params
}
);
}
export const exportPostExcelApi = (
params: PostListCommand,
fileName: string
) => {
return http.download("/system/post/excel", fileName, {
params
});
};
export const deletePostApi = (data: Array<number>) => {
return http.request<ResponseData<void>>("delete", "/system/post", {
params: {
// 需要将数组转换为字符串 否则Axios会将参数变成 noticeIds[0]:1 noticeIds[1]:2 这种格式，后端接收参数不成功
ids: data.toString()
}
});
};
export interface AddPostCommand {
postCode: string;
postName: string;
postSort: number;
remark?: string;
status?: string;
}
export const addPostApi = (data: AddPostCommand) => {
return http.request<ResponseData<void>>("post", "/system/post", {
data
});
};
export interface UpdatePostCommand extends AddPostCommand {
postId: number;
}
export const updatePostApi = (data: UpdatePostCommand) => {
return http.request<ResponseData<void>>("put", "/system/post", {
data
});
};
frontend/web/src/api/system/role.ts
-1
View File
@@ -15,7 +15,6 @@ export interface RoleDTO {
roleKey: string;
roleName: string;
roleSort: number;
selectedDeptList: number[];
selectedMenuList: number[];
status: number;
}
frontend/web/src/api/system/user.ts
+1 -7
View File
@@ -1,7 +1,6 @@
import { http } from "@/utils/http";
export interface UserQuery extends BasePageQuery {
deptId?: number;
phoneNumber?: string;
status?: number;
userId?: number;
@@ -16,14 +15,11 @@ export interface UserDTO {
createTime?: Date;
creatorId?: number;
creatorName?: string;
deptId?: number;
deptName?: string;
email?: string;
loginDate?: Date;
loginIp?: string;
nickname?: string;
phoneNumber?: string;
postId?: number;
remark?: string;
roleId?: number;
roleName?: string;
@@ -43,12 +39,10 @@ export interface UserDTO {
export interface UserRequest {
userId: number;
avatar?: string;
deptId?: number;
email?: string;
nickname?: string;
phoneNumber?: string;
password: string;
postId?: number;
remark?: string;
roleId?: number;
sex?: number;
@@ -71,8 +65,8 @@ export interface UserProfileRequest {
* ResetPasswordCommand
*/
export interface ResetPasswordRequest {
confirmPassword?: string;
newPassword?: string;
oldPassword?: string;
userId?: number;
}
frontend/web/src/components/ReIcon/src/offlineIcon.ts
-2
View File
@@ -21,7 +21,6 @@ import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
import FlUser from "@iconify-icons/ri/admin-line";
import Role from "@iconify-icons/ri/admin-fill";
import Setting from "@iconify-icons/ri/settings-3-line";
import Dept from "@iconify-icons/ri/git-branch-line";
import Lollipop from "@iconify-icons/ep/lollipop";
import Monitor from "@iconify-icons/ep/monitor";
addIcon("ubuntuFill", UbuntuFill);
@@ -40,6 +39,5 @@ addIcon("checkboxCircleLine", CheckboxCircleLine);
addIcon("flUser", FlUser);
addIcon("role", Role);
addIcon("setting", Setting);
addIcon("dept", Dept);
addIcon("lollipop", Lollipop);
addIcon("monitor", Monitor);
frontend/web/src/layout/components/tag/index.vue
+6 -5
View File
@@ -49,7 +49,6 @@ const containerDom = ref();
const scrollbarDom = ref();
const isShowArrow = ref(false);
const topPath = getTopMenu()?.path;
const { VITE_HIDE_HOME } = import.meta.env;
const { isFullscreen, toggle } = useFullscreen();
const dynamicTagView = async () => {
@@ -188,10 +187,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
other?: boolean
): void => {
if (other) {
useMultiTagsStoreHook().handleTags("equal", [
VITE_HIDE_HOME === "false" ? routerArrays[0] : toRaw(getTopMenu()),
obj
]);
useMultiTagsStoreHook().handleTags("equal", getPinnedTags(obj));
} else {
useMultiTagsStoreHook().handleTags("splice", "", {
startIndex,
@@ -235,6 +231,11 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
}
}
function getPinnedTags(obj: RouteConfigs) {
const pinnedTag = routerArrays[0] ?? toRaw(getTopMenu());
return pinnedTag ? [pinnedTag, obj] : [obj];
}
function deleteMenu(item, tag?: string) {
deleteDynamicTag(item, item.path, tag);
handleAliveRoute(route as ToRouteType);
frontend/web/src/layout/types.ts
+1 -13
View File
@@ -1,18 +1,6 @@
import type { IconifyIcon } from "@iconify/vue";
const { VITE_HIDE_HOME } = import.meta.env;
export const routerArrays: Array<RouteConfigs> =
VITE_HIDE_HOME === "false"
? [
{
path: "/welcome",
meta: {
title: "首页",
icon: "homeFilled"
}
}
]
: [];
export const routerArrays: Array<RouteConfigs> = [];
export type routeMetaType = {
title?: string;
frontend/web/src/router/defaultEntry.ts
+1
View File
@@ -0,0 +1 @@
export const DEFAULT_ENTRY_PATH = "/collaboration/record/index";
frontend/web/src/router/index.ts
-6
View File
@@ -99,8 +99,6 @@ export function resetRouter() {
/** 路由白名单 */
const whiteList = ["/login"];
const { VITE_HIDE_HOME } = import.meta.env;
router.beforeEach((to: ToRouteType, _from, next) => {
if (to.meta?.keepAlive) {
handleAliveRoute(to, "add");
@@ -130,10 +128,6 @@ router.beforeEach((to: ToRouteType, _from, next) => {
if (to.meta?.roles && !isOneOfArray(to.meta?.roles, [userInfo.roleKey])) {
next({ path: "/error/403" });
}
// 开启隐藏首页后在浏览器地址栏手动输入首页welcome路由则跳转到404页面
if (VITE_HIDE_HOME === "true" && to.fullPath === "/welcome") {
next({ path: "/error/404" });
}
if (_from?.name) {
// name为超链接
if (externalLink) {
frontend/web/src/router/modules/home.ts
+5 -14
View File
@@ -1,25 +1,16 @@
const { VITE_HIDE_HOME } = import.meta.env;
import { DEFAULT_ENTRY_PATH } from "@/router/defaultEntry";
const Layout = () => import("@/layout/index.vue");
export default {
path: "/",
name: "Home",
component: Layout,
redirect: "/welcome",
redirect: DEFAULT_ENTRY_PATH,
meta: {
icon: "homeFilled",
title: "首页",
showLink: false,
rank: 0
},
children: [
{
path: "/welcome",
name: "Welcome",
component: () => import("@/views/welcome/index.vue"),
meta: {
title: "首页",
showLink: VITE_HIDE_HOME === "true" ? false : true
}
}
]
}
} as RouteConfigsTable;
frontend/web/src/router/utils.ts
+19 -4
View File
@@ -20,6 +20,7 @@ import { getConfig } from "@/config";
import { menuType } from "@/layout/types";
import { buildHierarchyTree } from "@/utils/tree";
import { sessionKey } from "@/utils/auth";
import { DEFAULT_ENTRY_PATH } from "@/router/defaultEntry";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { usePermissionStoreHook } from "@/store/modules/permission";
const IFrame = () => import("@/layout/frameView.vue");
@@ -364,10 +365,24 @@ function hasAuth(value: string | Array<string>): boolean {
return isAuths ? true : false;
}
/** 获取所有菜单中的第一个菜单（顶级菜单）*/
function getTopMenu(tag = false): menuType {
const topMenu = usePermissionStoreHook().wholeMenus[0]?.children[0];
tag && useMultiTagsStoreHook().handleTags("push", topMenu);
function findMenuByPath(menus: menuType[], path: string): menuType | undefined {
for (const menu of menus) {
if (menu.path === path) return menu;
const matched = findMenuByPath(menu.children ?? [], path);
if (matched) return matched;
}
}
/** 获取默认入口菜单 */
function getTopMenu(tag = false): menuType | undefined {
const wholeMenus = usePermissionStoreHook().wholeMenus;
const topMenu =
findMenuByPath(wholeMenus, DEFAULT_ENTRY_PATH) ??
wholeMenus[0]?.children?.[0] ??
wholeMenus[0];
if (tag && topMenu) {
useMultiTagsStoreHook().handleTags("push", topMenu);
}
return topMenu;
}
frontend/web/src/utils/http/index.ts
+1
View File
@@ -84,6 +84,7 @@ class PureHttp {
const whiteList = [
"/refreshToken",
"/login",
"/register",
"/captchaImage",
"/getConfig"
];
frontend/web/src/utils/tree.ts
+1 -1
View File
@@ -141,7 +141,7 @@ export const appendFieldByUniqueId = (
};
/**
* 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示
* 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构。
*（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
* 这个是pure作者留下的例子， 也可以通过设置disabled 对应的字段来实现 比如disabled: 'status' (需要后端的字段为true/false)
* @param treeList
frontend/web/src/views/collaboration/record/record-form-modal.vue
+346 -254
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import type { CSSProperties, Ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import type {
UploadFile,
@@ -26,6 +27,9 @@ interface Props {
}
const props = defineProps<Props>();
type TabName = "basic" | "tasks" | "expenditures" | "settlements";
const tabNames: TabName[] = ["basic", "tasks", "expenditures", "settlements"];
const defaultFormData = (): AddCollaborationRecordCommand &
Partial<UpdateCollaborationRecordCommand> => ({
@@ -53,6 +57,13 @@ const defaultFormData = (): AddCollaborationRecordCommand &
const formData = reactive(defaultFormData());
const formRef = ref<FormInstance>();
const activeTab = ref<TabName>("basic");
const basicPaneRef = ref<HTMLElement>();
const tasksPaneRef = ref<HTMLElement>();
const expendituresPaneRef = ref<HTMLElement>();
const settlementsPaneRef = ref<HTMLElement>();
const isMeasuringTabHeight = ref(false);
const tabContentHeight = ref(0);
const previewImageUrl = ref("");
const isImagePreviewVisible = ref(false);
@@ -82,12 +93,19 @@ const attachmentUploadFiles = computed<UploadUserFile[]>(() =>
url: getFileUrl(file)
}))
);
const recordTabsStyle = computed<CSSProperties>(() => {
if (!tabContentHeight.value) return {};
return {
"--record-tab-content-height": `${tabContentHeight.value}px`
} as CSSProperties;
});
async function handleOpened() {
resetFormData();
if (props.type === "update" && props.row?.recordId) {
await loadDetail(props.row.recordId);
}
await setFixedTabContentHeight();
}
function resetFormData() {
@@ -206,6 +224,33 @@ function getFileUrl(file: CollaborationFileCommand) {
return `${import.meta.env.VITE_APP_BASE_API}${file.fileName}`;
}
async function setFixedTabContentHeight() {
isMeasuringTabHeight.value = true;
await waitForTabRender();
const heights = tabNames.map(getTabContentHeight);
tabContentHeight.value = Math.max(...heights, 0);
isMeasuringTabHeight.value = false;
}
async function waitForTabRender() {
await nextTick();
await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
}
function getTabContentHeight(tabName: TabName) {
return getTabPaneRef(tabName).value?.scrollHeight ?? 0;
}
function getTabPaneRef(tabName: TabName): Ref<HTMLElement | undefined> {
const paneRefMap = {
basic: basicPaneRef,
tasks: tasksPaneRef,
expenditures: expendituresPaneRef,
settlements: settlementsPaneRef
};
return paneRefMap[tabName];
}
async function handleConfirm() {
const isValid = await formRef.value?.validate().catch(() => false);
if (!isValid) return false;
@@ -242,266 +287,283 @@ defineExpose({ handleConfirm });
:rules="rules"
label-width="112px"
>
<el-tabs>
<el-tab-pane label="基本信息">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item prop="brand" label="品牌" required>
<el-input v-model="formData.brand" placeholder="请输入品牌" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="goods" label="物品" required>
<el-input v-model="formData.goods" placeholder="请输入物品" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="cooperationPlatform" label="合作平台" required>
<el-select v-model="formData.cooperationPlatform" clearable>
<el-option
v-for="item in optionMap.cooperationPlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="imageReturnNum" label="返图数量" required>
<el-input-number
:min="1"
controls-position="right"
v-model="formData.imageReturnNum"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="留存方式">
<el-select v-model="formData.retainedMethod">
<el-option
v-for="item in optionMap.retainedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合作方式">
<el-select v-model="formData.cooperatedMethod">
<el-option
v-for="item in optionMap.cooperatedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入方式">
<el-select v-model="formData.purchaseMethod">
<el-option
v-for="item in optionMap.purchaseMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入金额">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.purchasePrice"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入平台">
<el-select v-model="formData.purchasePlatform" clearable>
<el-option
v-for="item in optionMap.purchasePlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入日期">
<el-date-picker
v-model="formData.purchaseDate"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="deadline" label="预完成日期" required>
<el-date-picker
v-model="formData.deadline"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="稿费">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.remuneration"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="物品图片">
<el-upload
multiple
accept="image/*"
class="goods-image-upload"
list-type="picture-card"
:file-list="goodsImageUploadFiles"
:http-request="option => handleUpload(option, 'GOODS_IMAGE')"
:on-preview="handlePreviewImage"
:on-remove="handleRemoveGoodsImage"
<el-tabs
v-model="activeTab"
class="record-tabs"
:class="{ 'is-measuring': isMeasuringTabHeight }"
:style="recordTabsStyle"
>
<el-tab-pane label="基本信息" name="basic">
<div ref="basicPaneRef" class="tab-pane-content">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item prop="brand" label="品牌" required>
<el-input v-model="formData.brand" placeholder="请输入品牌" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="goods" label="物品" required>
<el-input v-model="formData.goods" placeholder="请输入物品" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
prop="cooperationPlatform"
label="合作平台"
required
>
<IconifyIconOffline class="upload-plus" :icon="Plus" />
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="附件">
<el-upload
multiple
class="attachment-upload"
:file-list="attachmentUploadFiles"
:http-request="option => handleUpload(option, 'ATTACHMENT')"
:on-preview="handlePreviewAttachment"
:on-remove="handleRemoveAttachment"
>
<el-button>上传附件</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="拍摄要求">
<el-input
type="textarea"
:rows="3"
v-model="formData.requirements"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input type="textarea" :rows="3" v-model="formData.remark" />
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="笔记任务">
<el-button type="primary" plain @click="addTask">添加笔记</el-button>
<div
v-for="(item, index) in formData.tasks"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.releaseDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="发布日期"
/>
<el-button type="danger" link @click="removeTask(index)"
>删除</el-button
>
<el-select v-model="formData.cooperationPlatform" clearable>
<el-option
v-for="item in optionMap.cooperationPlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="imageReturnNum" label="返图数量" required>
<el-input-number
:min="1"
controls-position="right"
v-model="formData.imageReturnNum"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="留存方式">
<el-select v-model="formData.retainedMethod">
<el-option
v-for="item in optionMap.retainedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合作方式">
<el-select v-model="formData.cooperatedMethod">
<el-option
v-for="item in optionMap.cooperatedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入方式">
<el-select v-model="formData.purchaseMethod">
<el-option
v-for="item in optionMap.purchaseMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入金额">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.purchasePrice"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入平台">
<el-select v-model="formData.purchasePlatform" clearable>
<el-option
v-for="item in optionMap.purchasePlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入日期">
<el-date-picker
v-model="formData.purchaseDate"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="deadline" label="预完成日期" required>
<el-date-picker
v-model="formData.deadline"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="稿费">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.remuneration"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="物品图片">
<el-upload
multiple
accept="image/*"
class="goods-image-upload"
list-type="picture-card"
:file-list="goodsImageUploadFiles"
:http-request="option => handleUpload(option, 'GOODS_IMAGE')"
:on-preview="handlePreviewImage"
:on-remove="handleRemoveGoodsImage"
>
<IconifyIconOffline class="upload-plus" :icon="Plus" />
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="附件">
<el-upload
multiple
class="attachment-upload"
:file-list="attachmentUploadFiles"
:http-request="option => handleUpload(option, 'ATTACHMENT')"
:on-preview="handlePreviewAttachment"
:on-remove="handleRemoveAttachment"
>
<el-button>上传附件</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="拍摄要求">
<el-input
type="textarea"
:rows="3"
v-model="formData.requirements"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input type="textarea" :rows="3" v-model="formData.remark" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="支出信息">
<el-button type="primary" plain @click="addExpenditure"
>添加支出</el-button
>
<div
v-for="(item, index) in formData.expenditures"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.spendDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="支出日期"
/>
<el-input-number
:min="0"
controls-position="right"
v-model="item.amount"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.expenditurePurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeExpenditure(index)"
>删除</el-button
<el-tab-pane label="笔记任务" name="tasks">
<div ref="tasksPaneRef" class="tab-pane-content">
<el-button type="primary" plain @click="addTask">添加笔记</el-button>
<div
v-for="(item, index) in formData.tasks"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.releaseDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="发布日期"
/>
<el-button type="danger" link @click="removeTask(index)"
>删除</el-button
>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="结款信息">
<el-button type="primary" plain @click="addSettlement"
>添加结款</el-button
>
<div
v-for="(item, index) in formData.settlements"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.settleDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="结款日期"
/>
<el-select v-model="item.method" placeholder="方式" clearable>
<el-option
v-for="option in optionMap.settlementMethod"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-input-number
:min="0"
controls-position="right"
v-model="item.income"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.settlementPurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeSettlement(index)"
>删除</el-button
<el-tab-pane label="支出信息" name="expenditures">
<div ref="expendituresPaneRef" class="tab-pane-content">
<el-button type="primary" plain @click="addExpenditure"
>添加支出</el-button
>
<div
v-for="(item, index) in formData.expenditures"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.spendDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="支出日期"
/>
<el-input-number
:min="0"
controls-position="right"
v-model="item.amount"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.expenditurePurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeExpenditure(index)"
>删除</el-button
>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="结款信息" name="settlements">
<div ref="settlementsPaneRef" class="tab-pane-content">
<el-button type="primary" plain @click="addSettlement"
>添加结款</el-button
>
<div
v-for="(item, index) in formData.settlements"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.settleDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="结款日期"
/>
<el-select v-model="item.method" placeholder="方式" clearable>
<el-option
v-for="option in optionMap.settlementMethod"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-input-number
:min="0"
controls-position="right"
v-model="item.income"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.settlementPurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeSettlement(index)"
>删除</el-button
>
</div>
</div>
</el-tab-pane>
</el-tabs>
@@ -531,6 +593,36 @@ defineExpose({ handleConfirm });
}
}
.record-tabs {
:deep(.el-tabs__content) {
height: var(--record-tab-content-height, auto);
max-height: calc(88vh - 190px);
overflow-y: auto;
}
&.is-measuring {
:deep(.el-tabs__content) {
position: relative;
visibility: hidden;
}
:deep(.el-tab-pane) {
position: absolute;
display: block !important;
width: 100%;
visibility: hidden;
}
:deep(.el-tab-pane.is-active) {
position: static;
}
}
}
.tab-pane-content {
padding-right: 4px;
}
.goods-image-upload {
:deep(.el-upload--picture-card),
:deep(.el-upload-list--picture-card .el-upload-list__item) {
frontend/web/src/views/collaboration/record/utils/hook.tsx
+23 -3
View File
@@ -1,7 +1,7 @@
import dayjs from "dayjs";
import { message } from "@/utils/message";
import { ElMessageBox, Sort } from "element-plus";
import { computed, onMounted, reactive, ref, toRaw } from "vue";
import { computed, onMounted, reactive, ref, toRaw, unref } from "vue";
import { CommonUtils } from "@/utils/common";
import { PaginationProps } from "@pureadmin/table";
import {
@@ -140,7 +140,27 @@ export function useCollaborationRecordHook() {
}
async function onSearch(tableRef) {
tableRef.getTableRef().sort("deadline", "descending");
pagination.currentPage = 1;
const shouldResetSort = !isDefaultSort(sortState.value);
sortState.value = defaultSort;
if (shouldResetSort && sortByDefault(tableRef)) return;
await getRecordList();
}
function isDefaultSort(sort: Sort) {
return sort.prop === defaultSort.prop && sort.order === defaultSort.order;
}
function sortByDefault(tableRef) {
const tableInstance = getTableInstance(tableRef);
if (!tableInstance?.sort) return false;
tableInstance.sort(defaultSort.prop, defaultSort.order);
return true;
}
function getTableInstance(tableRef) {
return unref(tableRef)?.getTableRef?.();
}
function resetForm(formEl, tableRef) {
@@ -203,7 +223,7 @@ export function useCollaborationRecordHook() {
.then(deleteSelectedRecords)
.catch(() => {
message("取消删除", { type: "info" });
tableRef.getTableRef().clearSelection();
getTableInstance(tableRef)?.clearSelection?.();
});
}
frontend/web/src/views/login/components/phone.vue
-106
View File
@@ -1,106 +0,0 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { phoneRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Iphone from "@iconify-icons/ep/iphone";
defineProps({
currentPage: {
type: Number,
default: 1
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
const loading = ref(false);
const ruleForm = reactive({
phone: "",
verifyCode: ""
});
const ruleFormRef = ref<FormInstance>();
const { isDisabled, text } = useVerifyCode();
const onLogin = async (formEl: FormInstance | undefined) => {
loading.value = true;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
// 模拟登录请求，需根据实际开发进行修改
setTimeout(() => {
message("登录成功", { type: "success" });
loading.value = false;
}, 2000);
} else {
loading.value = false;
return fields;
}
});
};
function onBack() {
useVerifyCode().end();
$pageEmit("update:currentPage", 0);
}
</script>
<template>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
<Motion>
<el-form-item prop="phone">
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
</Motion>
<Motion :delay="100">
<el-form-item prop="verifyCode">
<div class="flex justify-between w-full">
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
:disabled="isDisabled"
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
</el-button>
</div>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item>
<el-button
class="w-full"
size="default"
type="primary"
:loading="loading"
@click="onLogin(ruleFormRef)"
>
登录
</el-button>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
</el-button>
</el-form-item>
</Motion>
</el-form>
</template>
frontend/web/src/views/login/components/qrCode.vue
-27
View File
@@ -1,27 +0,0 @@
<script setup lang="ts">
import Motion from "../utils/motion";
import ReQrcode from "@/components/ReQrcode";
defineProps({
currentPage: {
type: Number,
default: 2
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
</script>
<template>
<Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion>
<Motion :delay="100">
<el-divider>
<p class="text-xs text-gray-500">{{ '扫码后点击"确认",即可完成登录' }}</p>
</el-divider>
</Motion>
<Motion :delay="150">
<el-button class="w-full mt-4" @click="$pageEmit('update:currentPage', 0)">
返回
</el-button>
</Motion>
</template>
frontend/web/src/views/login/components/register.vue
-189
View File
@@ -1,189 +0,0 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { updateRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Lock from "@iconify-icons/ri/lock-fill";
import Iphone from "@iconify-icons/ep/iphone";
import User from "@iconify-icons/ri/user-3-fill";
defineProps({
currentPage: {
type: Number,
default: 3
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
const checked = ref(false);
const loading = ref(false);
const ruleForm = reactive({
username: "",
phone: "",
verifyCode: "",
password: "",
repeatPassword: ""
});
const ruleFormRef = ref<FormInstance>();
const { isDisabled, text } = useVerifyCode();
const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
} else if (ruleForm.password !== value) {
callback(new Error("两次密码不一致"));
} else {
callback();
}
},
trigger: "blur"
}
];
const onUpdate = async (formEl: FormInstance | undefined) => {
loading.value = true;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
if (checked.value) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message("注册成功", {
type: "success"
});
loading.value = false;
}, 2000);
} else {
loading.value = false;
message("请勾选隐私政策", { type: "warning" });
}
} else {
loading.value = false;
return fields;
}
});
};
function onBack() {
useVerifyCode().end();
$pageEmit("update:currentPage", 0);
}
</script>
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="updateRules"
size="large"
>
<Motion>
<el-form-item
:rules="[
{
required: true,
message: '请输入账号',
trigger: 'blur'
}
]"
prop="username"
>
<el-input
clearable
v-model="ruleForm.username"
placeholder="账号"
:prefix-icon="useRenderIcon(User)"
/>
</el-form-item>
</Motion>
<Motion :delay="100">
<el-form-item prop="phone">
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item prop="verifyCode">
<div class="flex justify-between w-full">
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
:disabled="isDisabled"
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
</el-button>
</div>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item prop="password">
<el-input
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="250">
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
<el-input
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item>
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
<el-button link type="primary"> 隐私政策 </el-button>
</el-form-item>
</Motion>
<Motion :delay="350">
<el-form-item>
<el-button
class="w-full"
size="default"
type="primary"
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
</el-button>
</el-form-item>
</Motion>
<Motion :delay="400">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
</el-button>
</el-form-item>
</Motion>
</el-form>
</template>
frontend/web/src/views/login/components/resetPassword.vue
-154
View File
@@ -1,154 +0,0 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { updateRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Lock from "@iconify-icons/ri/lock-fill";
import Iphone from "@iconify-icons/ep/iphone";
defineProps({
currentPage: {
type: Number,
default: 4
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
const loading = ref(false);
const ruleForm = reactive({
phone: "",
verifyCode: "",
password: "",
repeatPassword: ""
});
const ruleFormRef = ref<FormInstance>();
const { isDisabled, text } = useVerifyCode();
const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
} else if (ruleForm.password !== value) {
callback(new Error("两次密码不一致"));
} else {
callback();
}
},
trigger: "blur"
}
];
const onUpdate = async (formEl: FormInstance | undefined) => {
loading.value = true;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message("修改密码成功", {
type: "success"
});
loading.value = false;
}, 2000);
} else {
loading.value = false;
return fields;
}
});
};
function onBack() {
useVerifyCode().end();
$pageEmit("update:currentPage", 0);
}
</script>
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="updateRules"
size="large"
>
<Motion>
<el-form-item prop="phone">
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
</Motion>
<Motion :delay="100">
<el-form-item prop="verifyCode">
<div class="flex justify-between w-full">
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
:disabled="isDisabled"
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
</el-button>
</div>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item prop="password">
<el-input
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
<el-input
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="250">
<el-form-item>
<el-button
class="w-full"
size="default"
type="primary"
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
</el-button>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
</el-button>
</el-form-item>
</Motion>
</el-form>
</template>
frontend/web/src/views/login/index.vue
+294 -89
View File
@@ -11,21 +11,19 @@ import {
import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import { loginRules } from "./utils/rule";
import phone from "./components/phone.vue";
import { buildRegisterRules, loginRules } from "./utils/rule";
import TypeIt from "@/components/ReTypeit";
import qrCode from "./components/qrCode.vue";
import register from "./components/register.vue";
import resetPassword from "./components/resetPassword.vue";
import { useNav } from "@/layout/hooks/useNav";
import type { FormInstance } from "element-plus";
import { operates, thirdParty } from "./utils/enums";
import { ElMessage } from "element-plus";
import { useLayout } from "@/layout/hooks/useLayout";
import { rsaEncrypt } from "@/utils/crypt";
import { getTopMenu, initRouter } from "@/router/utils";
import { findRouteByPath, initRouter } from "@/router/utils";
import { avatar, bg, illustration } from "./utils/static";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { DEFAULT_ENTRY_PATH } from "@/router/defaultEntry";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import {
getIsRememberMe,
getPassword,
@@ -50,13 +48,14 @@ defineOptions({
const captchaCodeBase64 = ref("");
const isCaptchaOn = ref(false);
const isRegisterUserOn = ref(true);
const isRegisterMode = ref(false);
const router = useRouter();
const loading = ref(false);
const isRememberMe = ref(false);
const ruleFormRef = ref<FormInstance>();
// 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
const currentPage = ref(0);
const registerFormRef = ref<FormInstance>();
const { initStorage } = useLayout();
initStorage();
@@ -72,45 +71,135 @@ const ruleForm = reactive({
captchaCodeKey: ""
});
const onLogin = async (formEl: FormInstance | undefined) => {
loading.value = true;
const registerForm = reactive({
username: "",
nickname: "",
password: "",
confirmPassword: "",
email: "",
phoneNumber: "",
captchaCode: "",
captchaCodeKey: ""
});
const registerRules = buildRegisterRules(() => registerForm.password);
const onLogin = async () => {
const formEl = ruleFormRef.value;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
CommonAPI.loginByPassword({
username: ruleForm.username,
password: rsaEncrypt(ruleForm.password),
captchaCode: ruleForm.captchaCode,
captchaCodeKey: ruleForm.captchaCodeKey
})
.then(({ data }) => {
// 登录成功后 将token存储到sessionStorage中
setTokenFromBackend(data);
// 获取后端路由
initRouter().then(() => {
router.push(getTopMenu(true).path);
message("登录成功", { type: "success" });
});
if (isRememberMe.value) {
savePassword(ruleForm.password);
}
})
.catch(() => {
loading.value = false;
//如果登陆失败则重新获取验证码
getCaptchaCode();
});
} else {
loading.value = false;
return fields;
}
});
loading.value = true;
const isValid = await formEl.validate().catch(() => false);
if (!isValid) {
loading.value = false;
return;
}
await submitLogin();
};
async function submitLogin() {
try {
const { data } = await CommonAPI.loginByPassword({
username: ruleForm.username,
password: rsaEncrypt(ruleForm.password),
captchaCode: ruleForm.captchaCode,
captchaCodeKey: ruleForm.captchaCodeKey
});
await handleLoginSuccess(data, "", "登录成功");
saveRememberedPassword();
} catch {
loading.value = false;
await getCaptchaCode();
}
}
const onRegister = async () => {
const formEl = registerFormRef.value;
if (!formEl) {
ElMessage.error("注册表单未初始化，请刷新页面后重试");
return;
}
loading.value = true;
const isValid = await formEl.validate().catch(() => false);
if (!isValid) {
loading.value = false;
ElMessage.error("请检查注册表单信息");
return;
}
await submitRegister();
};
async function submitRegister() {
try {
const command = toRegisterCommand();
const { data } = await CommonAPI.registerUser(command);
await handleLoginSuccess(data, DEFAULT_ENTRY_PATH, "注册成功");
} catch (error) {
loading.value = false;
await getCaptchaCode();
if (error instanceof Error) {
ElMessage.error(error.message);
}
}
}
function toRegisterCommand() {
assertRegisterFormReady();
return {
username: registerForm.username,
nickname: registerForm.nickname,
password: rsaEncrypt(registerForm.password),
confirmPassword: rsaEncrypt(registerForm.confirmPassword),
email: registerForm.email,
phoneNumber: registerForm.phoneNumber,
captchaCode: registerForm.captchaCode,
captchaCodeKey: registerForm.captchaCodeKey
};
}
function assertRegisterFormReady() {
if (!registerForm.username || !registerForm.password) {
throw new Error("请输入账号和密码");
}
if (registerForm.password !== registerForm.confirmPassword) {
throw new Error("两次输入的密码不一致");
}
}
async function handleLoginSuccess(
data: CommonAPI.TokenDTO,
path: string,
successMessage: string
) {
setTokenFromBackend(data);
await initRouter();
const entryPath = path || DEFAULT_ENTRY_PATH;
pushEntryTag(entryPath);
router.push(entryPath);
message(successMessage, { type: "success" });
}
function pushEntryTag(entryPath: string) {
const children = router.options.routes[0]?.children ?? [];
const route = findRouteByPath(entryPath, children);
if (!route?.meta?.title) return;
const { path, name, meta } = route;
useMultiTagsStoreHook().handleTags("push", { path, name, meta });
}
function saveRememberedPassword() {
if (isRememberMe.value) {
savePassword(ruleForm.password);
}
}
/** 使用公共函数，避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {
if (code === "Enter") {
onLogin(ruleFormRef.value);
if (isRegisterMode.value) {
onRegister();
return;
}
onLogin();
}
}
@@ -118,11 +207,32 @@ async function getCaptchaCode() {
if (isCaptchaOn.value) {
await CommonAPI.getCaptchaCode().then(res => {
captchaCodeBase64.value = `data:image/gif;base64,${res.data.captchaCodeImg}`;
ruleForm.captchaCodeKey = res.data.captchaCodeKey;
setCaptchaCodeKey(res.data.captchaCodeKey);
});
}
}
function setCaptchaCodeKey(captchaCodeKey: string) {
if (isRegisterMode.value) {
registerForm.captchaCodeKey = captchaCodeKey;
return;
}
ruleForm.captchaCodeKey = captchaCodeKey;
}
function switchMode(isRegister: boolean) {
isRegisterMode.value = isRegister;
clearCaptchaCode();
getCaptchaCode();
}
function clearCaptchaCode() {
ruleForm.captchaCode = "";
ruleForm.captchaCodeKey = "";
registerForm.captchaCode = "";
registerForm.captchaCodeKey = "";
}
watch(isRememberMe, newVal => {
saveIsRememberMe(newVal);
if (newVal === false) {
@@ -133,6 +243,7 @@ watch(isRememberMe, newVal => {
onBeforeMount(async () => {
await CommonAPI.getConfig().then(res => {
isCaptchaOn.value = res.data.isCaptchaOn;
isRegisterUserOn.value = res.data.isRegisterUserOn !== false;
useUserStoreHook().SET_DICTIONARY(res.data.dictionary);
});
@@ -182,7 +293,7 @@ onBeforeUnmount(() => {
</Motion>
<el-form
v-if="currentPage === 0"
v-if="!isRegisterMode"
ref="ruleFormRef"
:model="ruleForm"
:rules="loginRules"
@@ -251,73 +362,167 @@ onBeforeUnmount(() => {
<el-form-item>
<div class="w-full h-[20px] flex justify-between items-center">
<el-checkbox v-model="isRememberMe"> 记住密码</el-checkbox>
<el-button link type="primary" @click="currentPage = 4">
忘记密码
<el-button
v-if="isRegisterUserOn"
link
native-type="button"
type="primary"
@click.prevent="switchMode(true)"
>
注册账号
</el-button>
</div>
<el-button
:loading="loading"
class="w-full mt-4"
native-type="button"
size="default"
type="primary"
@click="onLogin(ruleFormRef)"
@click.prevent="onLogin"
>
登录
</el-button>
</el-form-item>
</Motion>
</el-form>
<el-form
v-else
ref="registerFormRef"
:model="registerForm"
:rules="registerRules"
size="large"
>
<Motion :delay="100">
<el-form-item prop="username">
<el-input
v-model="registerForm.username"
:prefix-icon="useRenderIcon(User)"
clearable
placeholder="账号"
/>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item prop="nickname">
<el-input
v-model="registerForm.nickname"
:prefix-icon="useRenderIcon('ri:user-smile-line')"
clearable
placeholder="昵称"
/>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item prop="password">
<el-input
v-model="registerForm.password"
:prefix-icon="useRenderIcon(Lock)"
clearable
placeholder="密码"
show-password
/>
</el-form-item>
</Motion>
<Motion :delay="250">
<el-form-item prop="confirmPassword">
<el-input
v-model="registerForm.confirmPassword"
:prefix-icon="useRenderIcon(Lock)"
clearable
placeholder="确认密码"
show-password
/>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item prop="email">
<el-input
v-model="registerForm.email"
:prefix-icon="useRenderIcon('ri:mail-line')"
clearable
placeholder="邮箱"
/>
</el-form-item>
</Motion>
<Motion :delay="350">
<el-form-item prop="phoneNumber">
<el-input
v-model="registerForm.phoneNumber"
:prefix-icon="useRenderIcon('ri:phone-line')"
clearable
placeholder="手机号"
/>
</el-form-item>
</Motion>
<Motion :delay="400">
<el-form-item
v-if="isCaptchaOn"
:rules="[
{
required: true,
message: '请输入验证码',
trigger: 'blur'
}
]"
prop="captchaCode"
>
<el-input
v-model="registerForm.captchaCode"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
clearable
placeholder="验证码"
>
<template v-slot:append>
<el-image
:src="captchaCodeBase64"
style="
justify-content: center;
width: 120px;
height: 40px;
"
@click="getCaptchaCode"
>
<template #error>
<span>Loading</span>
</template>
</el-image>
</template>
</el-input>
</el-form-item>
</Motion>
<Motion :delay="450">
<el-form-item>
<div class="w-full h-[20px] flex justify-between items-center">
<div class="w-full h-[20px] flex justify-end items-center">
<el-button
v-for="(item, index) in operates"
:key="index"
class="w-full mt-4"
size="default"
@click="currentPage = item.page"
link
native-type="button"
type="primary"
@click.prevent="switchMode(false)"
>
{{ item.title }}
返回登录
</el-button>
</div>
<el-button
:loading="loading"
class="w-full mt-4"
native-type="button"
size="default"
type="primary"
@click.prevent="onRegister"
>
注册
</el-button>
</el-form-item>
</Motion>
</el-form>
<Motion v-if="currentPage === 0" :delay="350">
<el-form-item>
<el-divider>
<p class="text-xs text-gray-500">{{ "第三方登录" }}</p>
</el-divider>
<div class="flex w-full justify-evenly">
<span
v-for="(item, index) in thirdParty"
:key="index"
:title="item.title"
>
<IconifyIconOnline
:icon="`ri:${item.icon}-fill`"
class="text-gray-500 cursor-pointer hover:text-blue-400"
width="20"
/>
</span>
</div>
</el-form-item>
</Motion>
<!-- 手机号登录 -->
<phone v-if="currentPage === 1" v-model:current-page="currentPage" />
<!-- 二维码登录 -->
<qrCode v-if="currentPage === 2" v-model:current-page="currentPage" />
<!-- 注册 -->
<register
v-if="currentPage === 3"
v-model:current-page="currentPage"
/>
<!-- 忘记密码 -->
<resetPassword
v-if="currentPage === 4"
v-model:current-page="currentPage"
/>
</div>
</div>
</div>
frontend/web/src/views/login/utils/enums.ts
-35
View File
@@ -1,35 +0,0 @@
const operates = [
{
title: "手机登录",
page: 1
},
{
title: "二维码登录",
page: 2
},
{
title: "注册",
page: 3
}
];
const thirdParty = [
{
title: "微信登录",
icon: "wechat"
},
{
title: "支付宝登录",
icon: "alipay"
},
{
title: "QQ登录",
icon: "qq"
},
{
title: "微博登录",
icon: "weibo"
}
];
export { operates, thirdParty };
frontend/web/src/views/login/utils/rule.ts
+63 -114
View File
@@ -1,10 +1,5 @@
import { reactive } from "vue";
import { isPhone } from "@pureadmin/utils";
import type { FormRules } from "element-plus";
import { useUserStoreHook } from "@/store/modules/user";
/** 6位数字验证码正则 */
export const REGEXP_SIX = /^\d{6}$/;
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
export const REGEXP_PWD =
@@ -12,116 +7,70 @@ export const REGEXP_PWD =
/** 登录校验 */
const loginRules = reactive<FormRules>({
password: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else if (!REGEXP_PWD.test(value)) {
callback(
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
);
} else {
callback();
}
},
trigger: "blur"
}
],
verifyCode: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
} else if (useUserStoreHook().verifyCode !== value) {
callback(new Error("请输入正确的验证码"));
} else {
callback();
}
},
trigger: "blur"
}
]
password: [getLoginPasswordRule()]
});
/** 手机登录校验 */
const phoneRules = reactive<FormRules>({
phone: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
} else {
callback();
}
},
trigger: "blur"
}
],
verifyCode: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error("请输入6位数字验证码"));
} else {
callback();
}
},
trigger: "blur"
}
]
});
function getLoginPasswordRule() {
return {
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
return;
}
if (!REGEXP_PWD.test(value)) {
callback(new Error("密码格式应为8-18位数字、字母、符号的任意两种组合"));
return;
}
callback();
},
trigger: "blur"
};
}
/** 忘记密码校验 */
const updateRules = reactive<FormRules>({
phone: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
} else {
callback();
}
},
trigger: "blur"
}
],
verifyCode: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error("请输入6位数字验证码"));
} else {
callback();
}
},
trigger: "blur"
}
],
password: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else if (!REGEXP_PWD.test(value)) {
callback(
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
);
} else {
callback();
}
},
trigger: "blur"
}
]
});
function getRegisterPasswordRule() {
return {
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
return;
}
callback();
},
trigger: "blur"
};
}
export { loginRules, phoneRules, updateRules };
function buildRegisterRules(getPassword: () => string) {
return reactive<FormRules>({
username: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ max: 64, message: "账号长度不能超过64个字符", trigger: "blur" }
],
nickname: [
{ max: 32, message: "昵称长度不能超过32个字符", trigger: "blur" }
],
email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
phoneNumber: [
{ max: 18, message: "手机号长度不能超过18个字符", trigger: "blur" }
],
password: [getRegisterPasswordRule()],
confirmPassword: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
return;
}
if (value !== getPassword()) {
callback(new Error("两次输入的密码不一致"));
return;
}
callback();
},
trigger: "blur"
}
]
});
}
export { buildRegisterRules, loginRules };
frontend/web/src/views/login/utils/verifyCode.ts
-50
View File
@@ -1,50 +0,0 @@
import type { FormInstance, FormItemProp } from "element-plus";
import { clone } from "@pureadmin/utils";
import { ref } from "vue";
const isDisabled = ref(false);
const timer = ref(null);
const text = ref("");
export const useVerifyCode = () => {
const start = async (
formEl: FormInstance | undefined,
props: FormItemProp,
time = 60
) => {
if (!formEl) return;
const initTime = clone(time, true);
await formEl.validateField(props, isValid => {
if (isValid) {
clearInterval(timer.value);
isDisabled.value = true;
text.value = `${time}`;
timer.value = setInterval(() => {
if (time > 0) {
time -= 1;
text.value = `${time}`;
} else {
text.value = "";
isDisabled.value = false;
clearInterval(timer.value);
time = initTime;
}
}, 1000);
}
});
};
const end = () => {
text.value = "";
isDisabled.value = false;
clearInterval(timer.value);
};
return {
isDisabled,
timer,
text,
start,
end
};
};
frontend/web/src/views/system/dept/form.vue
-134
View File
@@ -1,134 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { usePublicHooks } from "../hooks";
import { DeptRequest } from "@/api/system/dept";
interface FormProps {
formInline: DeptRequest;
higherDeptOptions: any[];
}
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
id: 0,
parentId: 0,
deptName: "",
leaderName: "",
phone: "",
email: "",
orderNum: 0,
status: 1
}),
higherDeptOptions: () => []
});
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const deptOptions = ref(props.higherDeptOptions);
function getRef() {
return ruleFormRef.value;
}
defineExpose({ getRef });
</script>
<template>
<el-form
ref="ruleFormRef"
:model="newFormInline"
:rules="formRules"
label-width="82px"
>
<el-row :gutter="30">
<re-col>
<el-form-item label="上级部门">
<el-cascader
class="w-full"
v-model="newFormInline.parentId"
:options="deptOptions"
:props="{
value: 'id',
label: 'deptName',
emitPath: false,
checkStrictly: true
}"
clearable
placeholder="请选择上级部门"
/>
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
<!-- <template #default="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template> -->
<!-- </el-cascader> -->
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="部门名称" prop="deptName">
<el-input
v-model="newFormInline.deptName"
clearable
placeholder="请输入部门名称"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="部门负责人">
<el-input
v-model="newFormInline.leaderName"
clearable
placeholder="请输入部门负责人"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="手机号" prop="phone">
<el-input
v-model="newFormInline.phone"
clearable
placeholder="请输入手机号"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="newFormInline.email"
clearable
placeholder="请输入邮箱"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="排序">
<el-input-number
v-model="newFormInline.orderNum"
:min="0"
:max="9999"
controls-position="right"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="部门状态">
<el-switch
v-model="newFormInline.status"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="停用"
:style="switchStyle"
/>
</el-form-item>
</re-col>
</el-row>
</el-form>
</template>
frontend/web/src/views/system/dept/index.vue
-149
View File
@@ -1,149 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import { useHook } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
defineOptions({
name: "SystemDept"
});
const formRef = ref();
const tableRef = ref();
const {
searchFormParams,
loading,
columns,
dataList,
onSearch,
resetForm,
openDialog,
handleDelete
} = useHook();
</script>
<template>
<div class="main">
<el-form
ref="formRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
>
<el-form-item label="部门名称：" prop="name">
<el-input
v-model="searchFormParams.deptName"
placeholder="请输入部门名称"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select
v-model="searchFormParams.status"
placeholder="请选择状态"
clearable
class="!w-[180px]"
>
<el-option label="启用" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon(Search)"
:loading="loading"
@click="onSearch"
>
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar
title="部门列表（仅演示，操作后不生效）"
:columns="columns"
:tableRef="tableRef?.getTableRef()"
@refresh="onSearch"
>
<template #buttons>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
@click="openDialog()"
>
新增部门
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
border
adaptive
:adaptiveConfig="{ offsetBottom: 32 }"
align-whole="center"
row-key="id"
showOverflowTooltip
table-layout="auto"
default-expand-all
:loading="loading"
:size="size"
:data="dataList"
:columns="dynamicColumns"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('编辑', row)"
>
编辑
</el-button>
<el-popconfirm
:title="`是否确认删除部门名称为${row.deptName}的这条数据`"
@confirm="handleDelete(row)"
>
<template #reference>
<el-button
class="reset-margin"
link
type="danger"
:size="size"
:icon="useRenderIcon(Delete)"
>
删除
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
</div>
</template>
<style lang="scss" scoped>
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>
frontend/web/src/views/system/dept/utils/hook.tsx
-206
View File
@@ -1,206 +0,0 @@
import dayjs from "dayjs";
import editForm from "../form.vue";
import { setDisabledForTreeOptions, handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import {
DeptDTO,
DeptRequest,
addDeptApi,
deleteDeptApi,
getDeptInfoApi,
getDeptListApi,
updateDeptApi
} from "@/api/system/dept";
import { usePublicHooks } from "../../hooks";
import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h, computed } from "vue";
import { isAllEmpty } from "@pureadmin/utils";
export function useHook() {
const searchFormParams = reactive({
deptName: "",
status: null
});
const formRef = ref();
const originalDataList = ref([]);
const dataList = computed(() => {
let filterDataList = [...originalDataList.value];
if (!isAllEmpty(searchFormParams.deptName)) {
// 前端搜索部门名称
filterDataList = filterDataList.filter((item: DeptDTO) =>
item.deptName.includes(searchFormParams.deptName)
);
}
if (!isAllEmpty(searchFormParams.status)) {
// 前端搜索状态
filterDataList = filterDataList.filter(
(item: DeptDTO) => item.status === searchFormParams.status
);
}
// 处理成树结构
return [...handleTree(filterDataList)];
});
const loading = ref(true);
const { tagStyle } = usePublicHooks();
const columns: TableColumnList = [
{
label: "部门名称",
prop: "deptName",
width: 240,
align: "left"
},
{
label: "部门编号",
prop: "id",
width: 100,
align: "center"
},
{
label: "部门负责人",
prop: "leaderName",
minWidth: 70
},
{
label: "状态",
prop: "status",
minWidth: 100,
cellRenderer: ({ row, props }) => (
<el-tag size={props.size} style={tagStyle.value(row.status)}>
{row.status === 1 ? "启用" : "停用"}
</el-tag>
)
},
{
label: "排序",
prop: "orderNum",
minWidth: 70
},
{
label: "创建时间",
minWidth: 200,
prop: "createTime",
formatter: ({ createTime }) =>
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
},
{
label: "操作",
fixed: "right",
width: 240,
slot: "operation"
}
];
function resetForm(formEl) {
if (!formEl) return;
formEl.resetFields();
onSearch();
}
async function onSearch() {
loading.value = true;
// 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
const { data } = await getDeptListApi().finally(() => {
loading.value = false;
});
originalDataList.value = data;
}
async function handleAdd(row, done) {
await addDeptApi(row).then(() => {
message(`您新增了部门:${row.deptName}`, {
type: "success"
});
// 关闭弹框
done();
// 刷新列表
onSearch();
});
}
async function handleUpdate(row, done) {
await updateDeptApi(row.id, row).then(() => {
message(`您更新了部门${row.deptName}`, {
type: "success"
});
// 关闭弹框
done();
// 刷新列表
onSearch();
});
}
async function openDialog(title = "新增", row?: DeptDTO) {
const { data } = await getDeptListApi();
const treeList = setDisabledForTreeOptions(handleTree(data), "status");
if (title === "编辑") {
row = (await getDeptInfoApi(row.id + "")).data;
}
// TODO 为什么声明一个formInline变量,把变量填充进去， 再给props.formInline 结果就不生效
addDialog({
title: `${title}部门`,
props: {
formInline: {
id: row?.id ?? 0,
parentId: row?.parentId ?? 0,
deptName: row?.deptName ?? "",
leaderName: row?.leaderName ?? "",
phone: row?.phone ?? "",
email: row?.email ?? "",
orderNum: row?.orderNum ?? 0,
status: row?.status ?? 1
},
higherDeptOptions: [...treeList]
},
width: "40%",
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(editForm, { ref: formRef }),
beforeSure: (done, { options }) => {
const FormRef = formRef.value.getRef();
const curData = options.props.formInline as DeptRequest;
FormRef.validate(valid => {
if (valid) {
// 表单规则校验通过
if (title === "新增") {
handleAdd(curData, done);
} else {
// 实际开发先调用编辑接口，再进行下面操作
handleUpdate(curData, done);
}
}
});
}
});
}
async function handleDelete(row) {
await deleteDeptApi(row.id).then(() => {
message(`您删除了部门${row.deptName}`, { type: "success" });
// 刷新列表
onSearch();
});
}
onMounted(() => {
onSearch();
});
return {
searchFormParams,
loading,
columns,
dataList,
onSearch,
resetForm,
openDialog,
handleDelete
};
}
frontend/web/src/views/system/dept/utils/rule.ts
-37
View File
@@ -1,37 +0,0 @@
import { reactive } from "vue";
import type { FormRules } from "element-plus";
import { isPhone, isEmail } from "@pureadmin/utils";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
phone: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback();
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
} else {
callback();
}
},
trigger: "blur"
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
}
],
email: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback();
} else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱格式"));
} else {
callback();
}
},
trigger: "blur"
}
]
});
frontend/web/src/views/system/log/operationLog/description.vue
-3
View File
@@ -36,9 +36,6 @@ const operationLogStatusMap =
<el-descriptions-item label="操作人类型:">{{
props.operatorTypeStr
}}</el-descriptions-item>
<el-descriptions-item label="操作人部门:">{{
props.deptName
}}</el-descriptions-item>
<el-descriptions-item label="操作人IP:">{{
props.operatorIp
}}</el-descriptions-item>
frontend/web/src/views/system/menu/form.vue
+2 -8
View File
@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<FormProps>(), {
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const deptOptions = ref(props.higherMenuOptions);
const menuOptions = ref(props.higherMenuOptions);
const typeName = computed(() => {
return newFormInline.value.isButton ? "按钮" : "菜单";
@@ -57,7 +57,7 @@ defineExpose({ getRef });
<el-cascader
class="w-full"
v-model="newFormInline.parentId"
:options="deptOptions"
:options="menuOptions"
:props="{
value: 'id',
label: 'menuName',
@@ -67,12 +67,6 @@ defineExpose({ getRef });
clearable
placeholder="请选择父菜单（不选则为根目录菜单）"
/>
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
<!-- <template #default="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template> -->
<!-- </el-cascader> -->
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
frontend/web/src/views/system/menu/utils/rule.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { isPhone, isEmail } from "@pureadmin/utils";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
name: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
phone: [
{
validator: (rule, value, callback) => {
frontend/web/src/views/system/monitor/onlineUser/utils/hook.tsx
-5
View File
@@ -40,11 +40,6 @@ export function useHook() {
prop: "username",
minWidth: 120
},
{
label: "所属部门",
prop: "deptName",
minWidth: 120
},
{
label: "IP地址",
prop: "ipAddress",
frontend/web/src/views/system/post/index.vue
-271
View File
@@ -1,271 +0,0 @@
<script setup lang="ts">
import { h, ref } from "vue";
import { usePostHook } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { addDialog } from "@/components/ReDialog";
import Delete from "@iconify-icons/ep/delete";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { useUserStoreHook } from "@/store/modules/user";
// TODO 这个导入声明好长 看看如何优化
import { CommonUtils } from "@/utils/common";
import PostFormModal from "@/views/system/post/post-form-modal.vue";
import EditPen from "@iconify-icons/ep/edit-pen";
import {
AddPostCommand,
PostPageResponse,
UpdatePostCommand,
addPostApi,
updatePostApi
} from "@/api/system/post";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { ElMessage } from "element-plus";
/** 组件name最好和菜单表中的router_name一致 */
defineOptions({
name: "Post"
});
const loginLogStatusList = useUserStoreHook().dictionaryList["common.status"];
const tableRef = ref();
const searchFormRef = ref();
const {
searchFormParams,
pageLoading,
columns,
dataList,
pagination,
timeRange,
defaultSort,
multipleSelection,
onSearch,
resetForm,
onSortChanged,
exportAllExcel,
getPostList,
handleDelete,
handleBulkDelete
} = usePostHook();
const postFormRef = ref();
function getPostFormData(row?: PostPageResponse) {
return {
postId: row?.postId ?? 0,
postCode: row?.postCode ?? "",
postName: row?.postName ?? "",
postSort: row?.postSort ?? 1,
remark: row?.remark ?? "",
status: row?.status?.toString() ?? ""
};
}
async function submitPostForm(
type: "add" | "update",
formData: AddPostCommand & Partial<UpdatePostCommand>,
done: () => void
) {
if (type === "add") {
await addPostApi(formData);
} else {
await updatePostApi(formData as UpdatePostCommand);
}
ElMessage.success("提交成功");
done();
onSearch(tableRef);
}
function openDialog(type: "add" | "update", row?: PostPageResponse) {
const formInline = getPostFormData(row);
addDialog({
title: type === "add" ? "新增岗位" : "更新岗位",
props: { formInline },
width: "40%",
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(PostFormModal, { ref: postFormRef }),
beforeSure: (done, { options }) => {
const formRuleRef = postFormRef.value.getFormRuleRef();
const formData = options.props.formInline as AddPostCommand &
Partial<UpdatePostCommand>;
formRuleRef.validate(valid => {
if (valid) {
submitPostForm(type, formData, () => done());
}
});
}
});
}
</script>
<template>
<div class="main">
<!-- 搜索栏 -->
<el-form
ref="searchFormRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
>
<el-form-item label="岗位编码" prop="postCode">
<el-input
v-model="searchFormParams.postCode"
placeholder="请输入岗位编码"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="岗位名称" prop="postName">
<el-input
v-model="searchFormParams.postName"
placeholder="请选择岗位名称"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select
v-model="searchFormParams.status"
placeholder="请选择状态"
clearable
class="!w-[180px]"
>
<el-option
v-for="dict in loginLogStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
class="!w-[240px]"
v-model="timeRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon(Search)"
:loading="pageLoading"
@click="onSearch(tableRef)"
>
搜索
</el-button>
<el-button
:icon="useRenderIcon(Refresh)"
@click="resetForm(searchFormRef, tableRef)"
>
重置
</el-button>
</el-form-item>
</el-form>
<!-- table bar 包裹 table -->
<PureTableBar title="岗位列表" :columns="columns" @refresh="onSearch">
<!-- 表格操作栏 -->
<template #buttons>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
@click="openDialog('add')"
>
新增岗位
</el-button>
<el-button
type="danger"
:icon="useRenderIcon(Delete)"
@click="handleBulkDelete(tableRef)"
>
批量删除
</el-button>
<el-button
type="primary"
@click="CommonUtils.exportExcel(columns, dataList, '岗位列表')"
>单页导出</el-button
>
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
border
ref="tableRef"
align-whole="center"
showOverflowTooltip
table-layout="auto"
:loading="pageLoading"
:size="size"
adaptive
:data="dataList"
:columns="dynamicColumns"
:default-sort="defaultSort"
:pagination="pagination"
:paginationSmall="size === 'small' ? true : false"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
@page-size-change="getPostList"
@page-current-change="getPostList"
@sort-change="onSortChanged"
@selection-change="
rows => (multipleSelection = rows.map(item => item.postId))
"
>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('update', row)"
>
编辑
</el-button>
<el-popconfirm
:title="`是否确认删除编号为${row.postId}的这个岗位`"
@confirm="handleDelete(row)"
>
<template #reference>
<el-button
class="reset-margin"
link
type="danger"
:size="size"
:icon="useRenderIcon(Delete)"
>
删除
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
</div>
</template>
<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>
frontend/web/src/views/system/post/post-form-modal.vue
-79
View File
@@ -1,79 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import { AddPostCommand, UpdatePostCommand } from "@/api/system/post";
import { useUserStoreHook } from "@/store/modules/user";
import { FormInstance, FormRules } from "element-plus";
interface Props {
formInline: AddPostCommand & Partial<UpdatePostCommand>;
}
const props = withDefaults(defineProps<Props>(), {
formInline: () => ({
postId: 0,
postCode: "",
postName: "",
postSort: 1,
remark: "",
status: ""
})
});
const formData = ref(props.formInline);
const statusList = useUserStoreHook().dictionaryMap["common.status"];
const rules: FormRules = {
postName: [
{
required: true,
message: "岗位名称不能为空"
}
],
postCode: [
{
required: true,
message: "岗位编码不能为空"
}
],
postSort: [
{
required: true,
message: "岗位序号不能为空"
}
]
};
const formRef = ref<FormInstance>();
function getFormRuleRef() {
return formRef.value;
}
defineExpose({ getFormRuleRef });
</script>
<template>
<el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
<el-form-item prop="postName" label="岗位名称" required inline-message>
<el-input v-model="formData.postName" />
</el-form-item>
<el-form-item prop="postCode" label="岗位编码" required>
<el-input v-model="formData.postCode" />
</el-form-item>
<el-form-item prop="postSort" label="岗位顺序" required>
<el-input-number :min="1" v-model="formData.postSort" />
</el-form-item>
<el-form-item prop="status" label="岗位状态">
<el-radio-group v-model="formData.status">
<el-radio
v-for="item in Object.keys(statusList)"
:key="item"
:label="statusList[item].value"
>{{ statusList[item].label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item prop="remark" label="备注" style="margin-bottom: 0">
<el-input type="textarea" v-model="formData.remark" />
</el-form-item>
</el-form>
</template>
frontend/web/src/views/system/post/utils/hook.tsx
-229
View File
@@ -1,229 +0,0 @@
import dayjs from "dayjs";
import { message } from "@/utils/message";
import { ElMessageBox, Sort } from "element-plus";
import { reactive, ref, onMounted, toRaw, computed } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { CommonUtils } from "@/utils/common";
import { PaginationProps } from "@pureadmin/table";
import {
PostListCommand,
getPostListApi,
exportPostExcelApi,
deletePostApi
} from "@/api/system/post";
const statusMap = useUserStoreHook().dictionaryMap["common.status"];
export function usePostHook() {
const defaultSort: Sort = {
prop: "postSort",
order: "ascending"
};
const pagination: PaginationProps = {
total: 0,
pageSize: 10,
currentPage: 1,
background: true
};
const timeRange = computed<[string, string] | null>({
get() {
if (searchFormParams.beginTime && searchFormParams.endTime) {
return [searchFormParams.beginTime, searchFormParams.endTime];
} else {
return null;
}
},
set(v) {
if (v?.length === 2) {
searchFormParams.beginTime = v[0];
searchFormParams.endTime = v[1];
} else {
searchFormParams.beginTime = undefined;
searchFormParams.endTime = undefined;
}
}
});
const searchFormParams = reactive<PostListCommand>({
postCode: "",
postName: "",
status: undefined
});
const dataList = ref([]);
const pageLoading = ref(true);
const multipleSelection = ref([]);
const sortState = ref<Sort>(defaultSort);
const columns: TableColumnList = [
{
type: "selection",
align: "left"
},
{
label: "岗位编号",
prop: "postId",
minWidth: 100
},
{
label: "岗位编码",
prop: "postCode",
minWidth: 120
},
{
label: "岗位名称",
prop: "postName",
minWidth: 120
},
{
label: "岗位排序",
prop: "postSort",
sortable: "custom",
minWidth: 120
},
{
label: "状态",
prop: "status",
minWidth: 120,
cellRenderer: ({ row, props }) => (
<el-tag
size={props.size}
type={statusMap[row.status].cssTag}
effect="plain"
>
{statusMap[row.status].label}
</el-tag>
)
},
{
label: "创建时间",
minWidth: 160,
prop: "createTime",
sortable: "custom",
formatter: ({ createTime }) =>
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
},
{
label: "操作",
fixed: "right",
width: 140,
slot: "operation"
}
];
function onSortChanged(sort: Sort) {
sortState.value = sort;
// 表格列的排序变化的时候，需要重置分页
pagination.currentPage = 1;
getPostList();
}
async function onSearch(tableRef) {
// 点击搜索的时候，需要重置排序，重新排序的时候会重置分页并发起查询请求
tableRef.getTableRef().sort("postSort", "ascending");
}
function resetForm(formEl, tableRef) {
if (!formEl) return;
// 清空查询参数
formEl.resetFields();
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
// Form组件的resetFields方法无法清除datepicker里面的数据。
searchFormParams.beginTime = undefined;
searchFormParams.endTime = undefined;
// 重置分页并查询
onSearch(tableRef);
}
async function getPostList() {
pageLoading.value = true;
CommonUtils.fillSortParams(searchFormParams, sortState.value);
CommonUtils.fillPaginationParams(searchFormParams, pagination);
const { data } = await getPostListApi(toRaw(searchFormParams)).finally(
() => {
pageLoading.value = false;
}
);
dataList.value = data.rows;
pagination.total = data.total;
}
async function exportAllExcel() {
if (sortState.value != null) {
CommonUtils.fillSortParams(searchFormParams, sortState.value);
}
CommonUtils.fillPaginationParams(searchFormParams, pagination);
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
exportPostExcelApi(toRaw(searchFormParams), "岗位数据.xlsx");
}
async function handleDelete(row) {
await deletePostApi([row.postId]).then(() => {
message(`您删除了编号为${row.postId}的这条岗位数据`, {
type: "success"
});
// 刷新列表
getPostList();
});
}
async function handleBulkDelete(tableRef) {
if (multipleSelection.value.length === 0) {
message("请选择需要删除的数据", { type: "warning" });
return;
}
ElMessageBox.confirm(
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的岗位数据吗?`,
"系统提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
draggable: true
}
)
.then(async () => {
await deletePostApi(multipleSelection.value).then(() => {
message(`您删除了编号为[ ${multipleSelection.value} ]的岗位数据`, {
type: "success"
});
// 刷新列表
getPostList();
});
})
.catch(() => {
message("取消删除", {
type: "info"
});
// 清空checkbox选择的数据
tableRef.getTableRef().clearSelection();
});
}
onMounted(getPostList);
return {
searchFormParams,
pageLoading,
columns,
dataList,
pagination,
defaultSort,
timeRange,
multipleSelection,
onSearch,
onSortChanged,
exportAllExcel,
// exportExcel,
getPostList,
resetForm,
handleDelete,
handleBulkDelete
};
}
frontend/web/src/views/system/role/index.vue
+1 -2
View File
@@ -44,7 +44,7 @@ const roleFormRef = ref();
function getRoleFormData(row?: RoleDTO) {
return {
roleId: row?.roleId ?? 0,
dataScope: row?.dataScope?.toString() ?? "",
dataScope: row?.dataScope?.toString() ?? "5",
menuIds: row?.selectedMenuList ?? [],
remark: row?.remark ?? "",
roleKey: row?.roleKey ?? "",
@@ -75,7 +75,6 @@ async function openDialog(type: "add" | "update", row?: RoleDTO) {
if (row) {
const { data } = await getRoleInfoApi(row.roleId);
row.selectedMenuList = data.selectedMenuList;
row.selectedDeptList = data.selectedDeptList;
}
} catch (e) {
console.error(e);
frontend/web/src/views/system/role/role-form-modal.vue
+1 -1
View File
@@ -13,7 +13,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
formInline: () => ({
roleId: 0,
dataScope: "",
dataScope: "5",
menuIds: [],
remark: "",
roleKey: "",
frontend/web/src/views/system/user/form.vue
-48
View File
@@ -3,14 +3,11 @@ import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./rule";
import { UserRequest } from "@/api/system/user";
import { PostPageResponse } from "@/api/system/post";
import { RoleDTO } from "@/api/system/role";
import { useUserStoreHook } from "@/store/modules/user";
interface FormProps {
formInline: UserRequest;
deptOptions: any[];
postOptions: PostPageResponse[];
roleOptions: RoleDTO[];
}
@@ -19,25 +16,19 @@ const props = withDefaults(defineProps<FormProps>(), {
userId: 0,
username: "",
nickname: "",
deptId: 0,
phone: "",
email: "",
password: "",
sex: 0,
status: 1,
postId: 0,
roleId: 0,
remark: ""
}),
deptOptions: () => [],
postOptions: () => [],
roleOptions: () => []
});
const newFormInline = ref(props.formInline);
const deptOptions = ref(props.deptOptions);
const roleOptions = ref(props.roleOptions);
const postOptions = ref(props.postOptions);
const formRuleRef = ref();
@@ -65,26 +56,6 @@ defineExpose({ getFormRuleRef });
/>
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="部门">
<el-tree-select
class="w-full"
v-model="newFormInline.deptId"
:data="deptOptions"
:show-all-levels="false"
value-key="id"
:props="{
value: 'id',
label: 'deptName',
emitPath: false,
checkStrictly: true
}"
clearable
placeholder="请选择部门"
/>
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="手机号码" prop="phoneNumber">
<el-input
@@ -133,25 +104,6 @@ defineExpose({ getFormRuleRef });
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="岗位" prop="postId">
<el-select
class="w-full"
v-model="newFormInline.postId"
placeholder="请选择岗位"
clearable
>
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 0"
/>
</el-select>
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="角色" prop="roleId">
<el-select
frontend/web/src/views/system/user/hook.tsx
-30
View File
@@ -20,14 +20,10 @@ import { type PaginationProps } from "@pureadmin/table";
import { reactive, ref, computed, onMounted, toRaw, h } from "vue";
import { CommonUtils } from "@/utils/common";
import { addDialog } from "@/components/ReDialog";
import { handleTree, setDisabledForTreeOptions } from "@/utils/tree";
import { getDeptListApi } from "@/api/system/dept";
import { getPostListApi } from "@/api/system/post";
import { getRoleListApi } from "@/api/system/role";
export function useHook() {
const searchFormParams = reactive<UserQuery>({
deptId: null,
phoneNumber: undefined,
status: undefined,
username: undefined,
@@ -47,8 +43,6 @@ export function useHook() {
background: true
});
const deptTreeList = ref([]);
const postOptions = ref([]);
const roleOptions = ref([]);
const columns: TableColumnList = [
@@ -82,17 +76,6 @@ export function useHook() {
</el-tag>
)
},
{
label: "部门ID",
prop: "deptId",
minWidth: 130,
hide: true
},
{
label: "部门",
prop: "deptName",
minWidth: 130
},
{
label: "手机号码",
prop: "phoneNumber",
@@ -252,18 +235,14 @@ export function useHook() {
userId: row?.userId ?? 0,
username: row?.username ?? "",
nickname: row?.nickname ?? "",
deptId: row?.deptId ?? undefined,
phoneNumber: row?.phoneNumber ?? "",
email: row?.email ?? "",
password: title == "新增" ? "" : undefined,
sex: row?.sex ?? undefined,
status: row?.status ?? undefined,
postId: row?.postId ?? undefined,
roleId: row?.roleId ?? undefined,
remark: row?.remark ?? ""
},
deptOptions: deptTreeList,
postOptions: postOptions,
roleOptions: roleOptions
},
@@ -356,15 +335,6 @@ export function useHook() {
onMounted(async () => {
onSearch();
const deptResponse = await getDeptListApi();
deptTreeList.value = await setDisabledForTreeOptions(
handleTree(deptResponse.data),
"status"
);
const postResponse = await getPostListApi({});
postOptions.value = postResponse.data.rows;
const roleResponse = await getRoleListApi({});
roleOptions.value = roleResponse.data.rows;
});
frontend/web/src/views/system/user/index.vue
+3 -12
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import tree from "./tree.vue";
import { ref } from "vue";
import { useHook } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -37,24 +36,16 @@ const {
getList,
openUploadDialog
} = useHook();
watch(
() => searchFormParams.deptId,
() => {
onSearch();
}
);
</script>
<template>
<div class="main">
<tree class="w-[17%] float-left" v-model="searchFormParams.deptId" />
<div class="float-right w-[82%]">
<div>
<el-form
ref="formRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
class="search-form bg-bg_color w-full pl-8 pt-[12px]"
>
<el-form-item label="用户编号：" prop="userId">
<el-input
frontend/web/src/views/system/user/profile/index.vue
+1 -7
View File
@@ -12,8 +12,7 @@ import { useUserStoreHook } from "@/store/modules/user";
const activeTab = ref("userinfo");
const state = reactive({
user: {},
roleName: {},
postName: {}
roleName: {}
});
/** 用户名 */
@@ -26,7 +25,6 @@ function getUser() {
// userApi.getUserProfile().then(response => {
// state.user = response.user;
// state.roleName = response.roleName;
// state.postName = response.postName;
// });
}
@@ -58,10 +56,6 @@ getUser();
<el-descriptions-item label="用户邮箱">{{
currentUserInfo.email
}}</el-descriptions-item>
<el-descriptions-item label="部门 / 职位">
{{ currentUserInfo.deptName }} /
{{ currentUserInfo.postName }}
</el-descriptions-item>
<el-descriptions-item label="角色">
{{ currentUserInfo.roleName }}
</el-descriptions-item>
frontend/web/src/views/system/user/profile/resetPwd.vue
+2 -13
View File
@@ -4,13 +4,12 @@ import {
updateCurrentUserPasswordApi,
ResetPasswordRequest
} from "@/api/system/user";
import { FormInstance } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { message } from "@/utils/message";
// const { proxy } = getCurrentInstance();
const user = reactive<ResetPasswordRequest>({
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
});
@@ -24,8 +23,7 @@ const equalToPassword = (rule, value, callback) => {
callback();
}
};
const rules = ref({
oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
const rules = reactive<FormRules>({
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{
@@ -43,7 +41,6 @@ const rules = ref({
/** 提交按钮 */
function submit() {
console.log(user);
pwdRef.value.validate(valid => {
if (valid) {
updateCurrentUserPasswordApi(toRaw(user)).then(() => {
@@ -58,14 +55,6 @@ function submit() {
<template>
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input
v-model="user.oldPassword"
placeholder="请输入旧密码"
type="password"
show-password
/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input
v-model="user.newPassword"
frontend/web/src/views/system/user/rule.ts
-1
View File
@@ -4,7 +4,6 @@ import { isPhone, isEmail } from "@pureadmin/utils";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
phone: [
{
validator: (rule, value, callback) => {
frontend/web/src/views/system/user/svg/expand.svg
-1
View File
@@ -1 +0,0 @@
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 163 B

frontend/web/src/views/system/user/svg/unexpand.svg
-1
View File
@@ -1 +0,0 @@
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5l1.41 1.42L22 12l-7.92-7.92l-1.41 1.42l5.5 5.5H4V2Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 166 B

frontend/web/src/views/system/user/tree.vue
-212
View File
@@ -1,212 +0,0 @@
<script setup lang="ts">
import { handleTree } from "@/utils/tree";
import { getDeptListApi } from "@/api/system/dept";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
import Dept from "@iconify-icons/ri/git-branch-line";
import Reset from "@iconify-icons/ri/restart-line";
import Search from "@iconify-icons/ep/search";
import More2Fill from "@iconify-icons/ri/more-2-fill";
import OfficeBuilding from "@iconify-icons/ep/office-building";
import LocationCompany from "@iconify-icons/ep/add-location";
import ExpandIcon from "./svg/expand.svg?component";
import UnExpandIcon from "./svg/unexpand.svg?component";
// TODO 这个类可以抽取作为SideBar TreeSelect组件
interface Tree {
id: number;
deptName: string;
highlight?: boolean;
children?: Tree[];
}
defineProps({
modelValue: {
type: Number,
required: true
}
});
const treeRef = ref();
const treeData = ref([]);
const isExpand = ref(true);
const searchValue = ref("");
const highlightMap = ref({});
const { proxy } = getCurrentInstance();
const defaultProps = {
children: "children",
label: "deptName"
};
const buttonClass = computed(() => {
return [
"!h-[20px]",
"reset-margin",
"!text-gray-500",
"dark:!text-white",
"dark:hover:!text-primary"
];
});
const filterNode = (value: string, data: Tree) => {
if (!value) return true;
return data.deptName.includes(value);
};
function nodeClick(value) {
console.log(value);
const nodeId = value.$treeNodeId;
console.log(nodeId);
highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
highlight: false
})
: Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
highlight: true
});
Object.values(highlightMap.value).forEach((v: Tree) => {
if (v.id !== nodeId) {
v.highlight = false;
}
});
proxy.$emit("update:modelValue", value.id);
}
function toggleRowExpansionAll(status) {
isExpand.value = status;
const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
for (let i = 0; i < nodes.length; i++) {
nodes[i].expanded = status;
}
}
/** 重置状态（选中状态、搜索框值、树初始化） */
function onReset() {
highlightMap.value = {};
searchValue.value = "";
toggleRowExpansionAll(true);
}
watch(searchValue, val => {
treeRef.value!.filter(val);
});
onMounted(async () => {
const { data } = await getDeptListApi();
treeData.value = handleTree(data);
});
</script>
<template>
<div
class="h-full bg-bg_color overflow-auto"
:style="{ minHeight: `calc(100vh - 133px)` }"
>
<div class="flex items-center h-[56px]">
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
部门列表
</p>
<el-input
style="flex: 2"
size="default"
v-model="searchValue"
placeholder="请输入部门名称"
clearable
>
<template #suffix>
<el-icon class="el-input__icon">
<IconifyIconOffline
v-show="searchValue.length === 0"
:icon="Search"
/>
</el-icon>
</template>
</el-input>
<el-dropdown :hide-on-click="false">
<IconifyIconOffline
class="w-[38px] cursor-pointer"
width="20px"
:icon="More2Fill"
/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-button
:class="buttonClass"
link
type="primary"
:icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
@click="toggleRowExpansionAll(isExpand ? false : true)"
>
{{ isExpand ? "折叠全部" : "展开全部" }}
</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
:class="buttonClass"
link
type="primary"
:icon="useRenderIcon(Reset)"
@click="onReset"
>
重置状态
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-divider />
<el-tree
ref="treeRef"
:data="treeData"
node-key="id"
size="default"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="nodeClick"
>
<template #default="{ node, data }">
<span
:class="[
'text-base',
'flex',
'items-center',
'tracking-wider',
'gap-2',
'select-none',
searchValue.trim().length > 0 &&
node.label.includes(searchValue) &&
'text-red-500',
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
]"
:style="{
background: highlightMap[node.id]?.highlight
? 'var(--el-color-primary-light-7)'
: 'transparent'
}"
>
<IconifyIconOffline
:icon="
data.parentId === 0
? OfficeBuilding
: data.type === 2
? LocationCompany
: Dept
"
/>
{{ node.label }}
</span>
</template>
</el-tree>
</div>
</template>
<style lang="scss" scoped>
:deep(.el-divider) {
margin: 0;
}
</style>
frontend/web/src/views/welcome/index.vue
-9
View File
@@ -1,9 +0,0 @@
<script setup lang="ts">
defineOptions({
name: "Welcome"
});
</script>
<template>
<h1>Agileboot前端预览</h1>
</template>
frontend/web/types/global.d.ts
Vendored
-1
View File
@@ -62,7 +62,6 @@ declare global {
VITE_PUBLIC_PATH: string;
VITE_ROUTER_HISTORY: string;
VITE_CDN: boolean;
VITE_HIDE_HOME: string;
VITE_COMPRESSION: ViteCompression;
VITE_APP_BASE_API: string;
}