diff --git a/locales/en.yaml b/locales/en.yaml index 8301463..81e6365 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -102,6 +102,7 @@ menus:Abnormal: Abnormal Page menus:FourZeroFour: "404" menus:FourZeroOne: "403" menus:Five: "500" +menus:SystemConfig: System Config status:Load: Loading... status:Message: Message status:Notify: Notify diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 35bb895..5dc004d 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -102,6 +102,7 @@ menus:Abnormal: 异常页面 menus:FourZeroFour: "404" menus:FourZeroOne: "403" menus:Five: "500" +menus:SystemConfig: 系统配置 status:Load: 加载中... status:Message: 消息 status:Notify: 通知 diff --git a/src/api/system.ts b/src/api/system.ts index 64989d8..421be6b 100644 --- a/src/api/system.ts +++ b/src/api/system.ts @@ -1,5 +1,6 @@ import { http } from "@/utils/http"; import type { + ConfigInfo, DepartmentInfo, DepartmentRoleInfo, PermissionInfo, @@ -497,3 +498,99 @@ export const getUserGetDepartmentRolesAPI = (id: string) => { `/api/department/roleList/${id}` ); }; + +// ---------------------------配置相关------------------------------------- + +/** + * 添加配置参数 + */ +interface AddConfigParams { + /**配置名称 */ + name: string; + /**配置键值 */ + key: string; + /**配置值 */ + value: string; + /**系统配置 */ + type: string; + /**备注 */ + remark?: string; +} + +/** + * 添加配置 + * @param data + * @returns + */ +export const postAddConfigAPI = (data: AddConfigParams) => { + return http.request("post", `/api/config/add`, { + data + }); +}; + +/** + * 删除配置 + */ +export const deleteConfigAPI = (id: string) => { + return http.request("post", `/api/config/delete/${id}`); +}; + +/** + * 批量删除配置 + * @param data 配置ID列表 + */ +export const deleteConfigListAPI = (data: { ids: string[] }) => { + return http.request("post", `/api/config/deleteList`, { data }); +}; + +/** + * 更新配置 + */ +export const putUpdateConfigAPI = (data: AddConfigParams, id: string) => { + return http.request("post", `/api/config/update/${id}`, { + data + }); +}; +/** + * 获取配置信息 + * @param id 配置ID + */ +export const getConfigAPI = (id: string) => { + return http.request("get", `/api/config/info/${id}`); +}; + +/** + * 获取配置列表参数 + */ +interface GetConfigListParams { + /** + * 页码 + */ + page: number; + /** + * 每页数量 + */ + pageSize: number; + /** + * 配置名称 + */ + name?: string; + /** + * 配置键值 + */ + key?: string; + /** + * 系统配置 + */ + type?: string; +} + +/** + * 获取配置列表 + * @param params + */ +export const getConfigListAPI = (params: GetConfigListParams) => { + return http.request>("get", `/api/config/list`, { + params: filterEmptyObject(params) + }); +}; diff --git a/src/views/system/config/components/form.vue b/src/views/system/config/components/form.vue new file mode 100644 index 0000000..aa61426 --- /dev/null +++ b/src/views/system/config/components/form.vue @@ -0,0 +1,108 @@ + + diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue new file mode 100644 index 0000000..fc31bb8 --- /dev/null +++ b/src/views/system/config/index.vue @@ -0,0 +1,193 @@ + + + + + diff --git a/src/views/system/config/utils/hook.tsx b/src/views/system/config/utils/hook.tsx new file mode 100644 index 0000000..04ff93c --- /dev/null +++ b/src/views/system/config/utils/hook.tsx @@ -0,0 +1,321 @@ +import dayjs from "dayjs"; +import editForm from "../components/form.vue"; +import { message } from "@/utils/message"; +import { type Ref, ref, reactive, onMounted, h, toRaw } from "vue"; +import type { ConfigInfo } from "types/system"; +import type { PaginationProps } from "@pureadmin/table"; +import { addDialog } from "@/components/ReDialog"; +import { + deleteConfigAPI, + deleteConfigListAPI, + getConfigListAPI, + postAddConfigAPI, + putUpdateConfigAPI +} from "@/api/system"; +import { getKeyList } from "@pureadmin/utils"; + +export const useConfig = (tableRef: Ref) => { + /** + * 查询表单 + */ + const form = reactive({ + name: "", + key: "", + type: "" + }); + /** + * 表单Ref + */ + const formRef = ref(null); + /** + * 数据列表 + */ + const dataList = ref([]); + /** + * 加载状态 + */ + const loading = ref(true); + /** + * 已选数量 + */ + const selectedNum = ref(0); + /** + * 分页参数 + */ + const pagination = reactive({ + total: 0, + pageSize: 10, + currentPage: 1, + background: true + }); + + /** + * 表格列设置 + */ + const columns: TableColumnList = [ + { + label: "勾选列", // 如果需要表格多选，此处label必须设置 + type: "selection", + fixed: "left", + reserveSelection: true // 数据刷新后保留选项 + }, + { + label: "参数名称", + prop: "name" + }, + { + label: "参数键名", + prop: "key" + }, + { + label: "参数键值", + prop: "value" + }, + { + label: "系统内置", + prop: "type", + formatter: ({ type }) => { + return type ? "是" : "否"; + } + }, + { + label: "创建时间", + prop: "create_time", + formatter: ({ create_time }) => + dayjs(create_time).format("YYYY-MM-DD HH:mm:ss") + }, + { + label: "操作", + fixed: "right", + width: 220, + slot: "operation" + } + ]; + /** + * 初次查询 + */ + const onSearch = async () => { + loading.value = true; + const res = await getConfigListAPI({ + page: pagination.currentPage, + pageSize: pagination.pageSize, + ...toRaw(form) + }); + if (res.success) { + dataList.value = res.data.result; + pagination.total = res.data.total; + pagination.currentPage = res.data.page; + pagination.pageSize = res.data.pageSize; + } + message(res.msg, { + type: res.success ? "success" : "error" + }); + loading.value = false; + }; + /** + * 重置表单 + * @param formEl 表单ref + * @returns + */ + const resetForm = async (formEl: any) => { + if (!formEl) return; + formEl.resetFields(); + await onSearch(); + }; + /** + * 处理删除 + * @param row + */ + const handleDelete = async (row: ConfigInfo) => { + const res = await deleteConfigAPI(row.id); + if (res.success) { + onSearch(); + } + message(res.msg, { + type: res.success ? "success" : "error" + }); + }; + /** + * 处理每页数量变化 + */ + const handleSizeChange = async (val: number) => { + loading.value = true; + const res = await getConfigListAPI({ + page: pagination.currentPage, + pageSize: val, + ...toRaw(form) + }); + if (res.success) { + dataList.value = res.data.result; + pagination.total = res.data.total; + pagination.currentPage = res.data.page; + pagination.pageSize = res.data.pageSize; + } + message(res.msg, { + type: res.success ? "success" : "error" + }); + loading.value = false; + }; + + /** + * 处理页码变化 + * @param val + */ + const handleCurrentChange = async (val: number) => { + loading.value = true; + const res = await getConfigListAPI({ + page: val, + pageSize: pagination.pageSize, + ...toRaw(form) + }); + if (res.success) { + dataList.value = res.data.result; + pagination.total = res.data.total; + pagination.currentPage = res.data.page; + pagination.pageSize = res.data.pageSize; + } + message(res.msg, { + type: res.success ? "success" : "error" + }); + loading.value = false; + }; + /** 当CheckBox选择项发生变化时会触发该事件 */ + const handleSelectionChange = async (val: any) => { + selectedNum.value = val.length; + // 重置表格高度 + tableRef.value.setAdaptive(); + }; + + /** 取消选择 */ + const onSelectionCancel = async () => { + selectedNum.value = 0; + // 用于多选表格，清空用户的选择 + tableRef.value.getTableRef().clearSelection(); + }; + /** + * 批量删除 + */ + const onbatchDel = async () => { + // 返回当前选中的行 + const curSelected = tableRef.value.getTableRef().getSelectionRows(); + const res = await deleteConfigListAPI({ + ids: getKeyList(curSelected, "id") + }); + if (res.code === 200) { + message(`已删除项目名称为 ${getKeyList(curSelected, "name")} 的数据`, { + type: "success" + }); + tableRef.value.getTableRef().clearSelection(); + onSearch(); + } else { + message(res.msg, { type: "error", duration: 5000 }); + } + }; + const openDialog = async (title = "新增", row?: ConfigInfo) => { + addDialog({ + title: `${title}配置`, + props: { + formInline: { + /** 主键ID */ + id: row?.id ?? "", + /** 创建人 */ + create_by: row?.create_by ?? "", + /** 创建时间 */ + create_time: row?.create_time ?? "", + /** 更新人 */ + update_by: row?.update_by ?? "", + /** 更新时间 */ + update_time: row?.update_time ?? "", + /**配置名称 */ + name: row?.name ?? "", + /**配置键 */ + key: row?.key ?? "", + /**配置值 */ + value: row?.value ?? "", + /**系统配置 */ + type: row?.type ?? true, + /**备注 */ + remark: row?.remark ?? "" + } + }, + width: "45%", + draggable: true, + fullscreenIcon: true, + closeOnClickModal: false, + contentRenderer: () => + h(editForm, { + formInline: { + /** 主键ID */ + id: row?.id ?? "", + /** 创建人 */ + create_by: row?.create_by ?? "", + /** 创建时间 */ + create_time: row?.create_time ?? "", + /** 更新人 */ + update_by: row?.update_by ?? "", + /** 更新时间 */ + update_time: row?.update_time ?? "", + /**配置名称 */ + name: row?.name ?? "", + /**配置键 */ + key: row?.key ?? "", + /**配置值 */ + value: row?.value ?? "", + /**系统配置 */ + type: row?.type ?? true, + /**备注 */ + remark: row?.remark ?? "" + }, + ref: formRef + }), + beforeSure: async (done, {}) => { + const FormData = formRef.value.newFormInline; + let form = { + key: FormData.key ?? "", + name: FormData.name ?? "", + value: FormData.value ?? "", + type: FormData.type ?? true, + remark: FormData.remark ?? "" + }; + if (title === "新增") { + const res = await postAddConfigAPI(form); + if (res.success) { + done(); + await onSearch(); + } + message(res.msg, { type: res.success ? "success" : "error" }); + } else { + const res = await putUpdateConfigAPI(form, row.id); + if (res.success) { + done(); + await onSearch(); + } + message(res.msg, { type: res.success ? "success" : "error" }); + } + } + }); + }; + /** + * 页面加载执行 + */ + onMounted(async () => { + await onSearch(); + }); + return { + form, + dataList, + loading, + pagination, + columns, + selectedNum, + openDialog, + onSearch, + resetForm, + handleDelete, + handleSizeChange, + handleCurrentChange, + handleSelectionChange, + onSelectionCancel, + onbatchDel + }; +}; diff --git a/types/system.d.ts b/types/system.d.ts index d5f9702..967b5ab 100644 --- a/types/system.d.ts +++ b/types/system.d.ts @@ -222,3 +222,27 @@ export type DepartmentRoleInfo = { /** 更新时间 */ update_time: string; }; + +/**系统配置信息 */ +export interface ConfigInfo { + /** 主键ID */ + id: string; + /** 创建人 */ + create_by: string; + /** 创建时间 */ + create_time: string; + /** 更新人 */ + update_by: string; + /** 更新时间 */ + update_time: string; + /**配置名称 */ + name: string; + /**配置键 */ + key: string; + /**配置值 */ + value: string; + /**系统配置 */ + type: boolean; + /**备注 */ + remark: string; +}