feat: 添加系统配置
This commit is contained in:
108
src/views/system/config/components/form.vue
Normal file
108
src/views/system/config/components/form.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-form ref="ruleFormRef" :model="newFormInline" label-width="82px">
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="24" :xm="24" :sm="24">
|
||||
<el-form-item label="配置名称" prop="name">
|
||||
<el-input
|
||||
v-model="newFormInline.name"
|
||||
clearable
|
||||
placeholder="请输入配置名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="24" :xm="24" :sm="24">
|
||||
<el-form-item label="配置键名" prop="key">
|
||||
<el-input
|
||||
v-model="newFormInline.key"
|
||||
clearable
|
||||
placeholder="请输入配置键名~"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="24" :xm="24" :sm="24">
|
||||
<el-form-item label="配置键值" prop="value">
|
||||
<el-input
|
||||
v-model="newFormInline.value"
|
||||
clearable
|
||||
placeholder="请输入配置内容~"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="24" :xm="24" :sm="24">
|
||||
<el-form-item label="系统内置" prop="type">
|
||||
<el-radio-group v-model="newFormInline.type">
|
||||
<el-radio :value="true"> 是 </el-radio>
|
||||
<el-radio :value="false"> 否 </el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="24" :xm="24" :sm="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="newFormInline.remark"
|
||||
type="textarea"
|
||||
clearable
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { ConfigInfo } from "types/system";
|
||||
interface FormItemProps {
|
||||
/** 主键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;
|
||||
}
|
||||
interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
/** 主键ID */
|
||||
id: "",
|
||||
/** 创建人 */
|
||||
create_by: "",
|
||||
/** 创建时间 */
|
||||
create_time: "",
|
||||
/** 更新人 */
|
||||
update_by: "",
|
||||
/** 更新时间 */
|
||||
update_time: "",
|
||||
/**配置名称 */
|
||||
name: "",
|
||||
/**配置键 */
|
||||
key: "",
|
||||
/**配置值 */
|
||||
value: "",
|
||||
/**系统配置 */
|
||||
type: true,
|
||||
/**备注 */
|
||||
remark: ""
|
||||
})
|
||||
});
|
||||
const newFormInline = ref<ConfigInfo>(props.formInline);
|
||||
|
||||
defineExpose({ newFormInline });
|
||||
</script>
|
||||
193
src/views/system/config/index.vue
Normal file
193
src/views/system/config/index.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="配置名称" prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入配置名称"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置键名" prop="key">
|
||||
<el-input
|
||||
v-model="form.key"
|
||||
clearable
|
||||
placeholder="请输入配置键名~"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="系统内置" prop="type">
|
||||
<el-select v-model="form.type" 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('ri:search-line')"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
{{ t("buttons:Search") }}
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
{{ t("buttons:Reset") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<PureTableBar title="配置管理" :columns="columns" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog('新增')"
|
||||
>
|
||||
{{ t("buttons:Add") }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<div
|
||||
v-if="selectedNum > 0"
|
||||
v-motion-fade
|
||||
class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
|
||||
>
|
||||
<div class="flex-auto">
|
||||
<span
|
||||
style="font-size: var(--el-font-size-base)"
|
||||
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
|
||||
>
|
||||
已选 {{ selectedNum }} 项
|
||||
</span>
|
||||
<el-button type="primary" text @click="onSelectionCancel">
|
||||
{{ t("buttons:Deselect") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1">
|
||||
{{ t("buttons:DeleteInBatches") }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
adaptive
|
||||
border
|
||||
stripe
|
||||
:adaptiveConfig="{ offsetBottom: 45 }"
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
@page-size-change="handleSizeChange"
|
||||
@page-current-change="handleCurrentChange"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('修改', row)"
|
||||
>
|
||||
{{ t("buttons:Update") }}
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除配置名为 ${row.name} 的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
{{ t("buttons:Delete") }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "ConfigIndex"
|
||||
});
|
||||
import { ref } from "vue";
|
||||
import { useConfig } from "./utils/hook";
|
||||
import { useI18n } from "vue-i18n";
|
||||
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 Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
const { t } = useI18n();
|
||||
/**
|
||||
* 表格Ref
|
||||
*/
|
||||
const tableRef = ref();
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
dataList,
|
||||
loading,
|
||||
pagination,
|
||||
columns,
|
||||
selectedNum,
|
||||
onSearch,
|
||||
openDialog,
|
||||
resetForm,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange,
|
||||
onSelectionCancel,
|
||||
onbatchDel
|
||||
} = useConfig(tableRef);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-button:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px 24px 0 !important;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
321
src/views/system/config/utils/hook.tsx
Normal file
321
src/views/system/config/utils/hook.tsx
Normal file
@@ -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<ConfigInfo[]>([]);
|
||||
/**
|
||||
* 加载状态
|
||||
*/
|
||||
const loading = ref(true);
|
||||
/**
|
||||
* 已选数量
|
||||
*/
|
||||
const selectedNum = ref<number>(0);
|
||||
/**
|
||||
* 分页参数
|
||||
*/
|
||||
const pagination = reactive<PaginationProps>({
|
||||
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
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user