From 7daa2690e7c9d2d63be56a2dfd6c6ae9e1d0b3f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=B0=91=E7=BF=94?= <971366405@qq.com>
Date: Tue, 30 Jul 2024 16:23:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增加系统配置功能，优化form表单的input输入框的问题
---
 src/api/config.ts                 | 104 ++++++++++
 src/styles/index.scss             |   4 +
 src/views/system/config/index.vue | 308 ++++++++++++++++++++++++++++++
 src/views/system/dict/index.vue   |   6 -
 4 files changed, 416 insertions(+), 6 deletions(-)
 create mode 100644 src/api/config.ts
 create mode 100644 src/views/system/config/index.vue

diff --git a/src/api/config.ts b/src/api/config.ts
new file mode 100644
index 00000000..7f706734
--- /dev/null
+++ b/src/api/config.ts
@@ -0,0 +1,104 @@
+import request from "@/utils/request";
+
+const CONFIG_BASE_URL = "/api/v1/config";
+
+class ConfigAPI {
+  /** 获取系统配置分页数据 */
+  static getPage(queryParams?: ConfigPageQuery) {
+    return request<any, PageResult<ConfigPageVO[]>>({
+      url: `${CONFIG_BASE_URL}/page`,
+      method: "get",
+      params: queryParams,
+    });
+  }
+  /**
+   * 获取系统配置表单数据
+   *
+   * @param id ConfigID
+   * @returns Config表单数据
+   */
+  static getFormData(id: number) {
+    return request<any, ConfigForm>({
+      url: `${CONFIG_BASE_URL}/${id}/form`,
+      method: "get",
+    });
+  }
+
+  /** 添加系统配置*/
+  static add(data: ConfigForm) {
+    return request({
+      url: `${CONFIG_BASE_URL}`,
+      method: "post",
+      data: data,
+    });
+  }
+
+  /**
+   * 更新系统配置
+   *
+   * @param id ConfigID
+   * @param data Config表单数据
+   */
+  static update(id: number, data: ConfigForm) {
+    return request({
+      url: `${CONFIG_BASE_URL}/${id}`,
+      method: "put",
+      data: data,
+    });
+  }
+
+  /**
+   * 删除系统配置
+   *
+   * @param ids 系统配置ID
+   */
+  static deleteById(id: number) {
+    return request({
+      url: `${CONFIG_BASE_URL}/${id}`,
+      method: "delete",
+    });
+  }
+
+  static refreshCache() {
+    return request({
+      url: `${CONFIG_BASE_URL}`,
+      method: "patch",
+    });
+  }
+}
+
+export default ConfigAPI;
+
+/** $系统配置分页查询参数 */
+export interface ConfigPageQuery extends PageQuery {
+  /** 搜索关键字 */
+  keywords?: string;
+}
+
+/** 系统配置表单对象 */
+export interface ConfigForm {
+  /** 主键 */
+  id?: number;
+  /** 配置名称 */
+  sysName?: string;
+  /** 配置key */
+  sysKey?: string;
+  /** 配置值 */
+  sysValue?: string;
+  /** 描述、备注 */
+  remark?: string;
+}
+
+/** 系统配置分页对象 */
+export interface ConfigPageVO {
+  /** 主键 */
+  id?: number;
+  /** 配置名称 */
+  sysName?: string;
+  /** 配置key */
+  sysKey?: string;
+  /** 配置值 */
+  sysValue?: string;
+  /** 描述、备注 */
+  remark?: string;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b431308c..64346ed4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -26,3 +26,7 @@
     color: rgb(32 160 255);
   }
 }
+
+.el-form .el-input {
+  width: 16rem !important;
+}
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
new file mode 100644
index 00000000..dced0787
--- /dev/null
+++ b/src/views/system/config/index.vue
@@ -0,0 +1,308 @@
+<!-- 系统配置 -->
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="请输入配置key\配置名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <i-ep-search />
+            搜索
+          </el-button>
+          <el-button @click="handleResetQuery">
+            <i-ep-refresh />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never" class="table-container">
+      <template #header>
+        <el-button
+          type="success"
+          v-hasPerm="['sys:config:add']"
+          @click="handleOpenDialog()"
+        >
+          <i-ep-plus />
+          新增
+        </el-button>
+        <el-button
+          color="#626aef"
+          v-hasPerm="['sys:config:refresh']"
+          @click="handleRefreshCache"
+        >
+          <el-icon><RefreshLeft /></el-icon>
+          刷新缓存
+        </el-button>
+      </template>
+
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="pageData"
+        highlight-current-row
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="index" label="序号" width="60" />
+        <el-table-column
+          key="sysName"
+          label="配置名称"
+          prop="sysName"
+          min-width="100"
+        />
+        <el-table-column
+          key="sysKey"
+          label="配置key"
+          prop="sysKey"
+          min-width="100"
+        />
+        <el-table-column
+          key="sysValue"
+          label="配置值"
+          prop="sysValue"
+          min-width="100"
+        />
+        <el-table-column
+          key="remark"
+          label="描述"
+          prop="remark"
+          min-width="100"
+        />
+        <el-table-column fixed="right" label="操作" width="220">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              v-hasPerm="['sys:config:update']"
+              @click="handleOpenDialog(scope.row.id)"
+            >
+              <i-ep-edit />
+              编辑
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              link
+              v-hasPerm="['sys:config:delete']"
+              @click="handleDelete(scope.row.id)"
+            >
+              <i-ep-delete />
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+
+    <!-- 系统配置表单弹窗 -->
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="500px"
+      @close="handleCloseDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-suffix=":"
+        label-width="100px"
+      >
+        <el-form-item label="配置名称" prop="sysName">
+          <el-input v-model="formData.sysName" placeholder="请输入配置名称" />
+        </el-form-item>
+        <el-form-item label="配置key" prop="sysKey">
+          <el-input v-model="formData.sysKey" placeholder="请输入配置key" />
+        </el-form-item>
+        <el-form-item label="配置值" prop="sysValue">
+          <el-input v-model="formData.sysValue" placeholder="请输入配置值" />
+        </el-form-item>
+        <el-form-item label="描述" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            :rows="4"
+            :maxlength="100"
+            show-word-limit
+            type="textarea"
+            placeholder="请输入描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+          <el-button @click="handleCloseDialog">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Config",
+  inheritAttrs: false,
+});
+
+import ConfigAPI, {
+  ConfigPageVO,
+  ConfigForm,
+  ConfigPageQuery,
+} from "@/api/config";
+
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<ConfigPageQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  keywords: "",
+});
+
+// 系统配置表格数据
+const pageData = ref<ConfigPageVO[]>([]);
+
+// 弹窗
+const dialog = reactive({
+  title: "",
+  visible: false,
+});
+// 系统配置表单
+const formData = reactive<ConfigForm>({
+  id: undefined,
+  sysName: "",
+  sysKey: "",
+  sysValue: "",
+  remark: "",
+});
+
+const rules = reactive({
+  sysName: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
+  sysKey: [{ required: true, message: "请输入系统配置编码", trigger: "blur" }],
+  sysValue: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
+});
+
+/** 查询系统配置 */
+function handleQuery() {
+  loading.value = true;
+  ConfigAPI.getPage(queryParams)
+    .then((data) => {
+      pageData.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+/** 重置系统配置查询 */
+function handleResetQuery() {
+  queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+/** 行复选框选中记录选中ID集合 */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+/** 打开系统配置弹窗 */
+function handleOpenDialog(id?: number) {
+  dialog.visible = true;
+  if (id) {
+    dialog.title = "修改系统配置";
+    ConfigAPI.getFormData(id).then((data) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    dialog.title = "新增系统配置";
+  }
+}
+
+/** 刷新缓存 **/
+function handleRefreshCache() {
+  ConfigAPI.refreshCache().then(() => {
+    ElMessage.success("刷新成功");
+  });
+}
+
+/** 提交系统配置表单 */
+function handleSubmit() {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      loading.value = true;
+      const id = formData.id;
+      if (id) {
+        ConfigAPI.update(id, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            handleCloseDialog();
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        ConfigAPI.add(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            handleCloseDialog();
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/** 关闭系统配置弹窗 */
+function handleCloseDialog() {
+  dialog.visible = false;
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+  formData.id != undefined;
+}
+
+/** 删除系统配置 */
+function handleDelete(id: number) {
+  ElMessageBox.confirm("确认删除该项配置?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    () => {
+      loading.value = true;
+      ConfigAPI.deleteById(id)
+        .then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        })
+        .finally(() => (loading.value = false));
+    },
+    () => {}
+  );
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 68160b70..60d32252 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -386,9 +386,3 @@ onMounted(() => {
   handleQuery();
 });
 </script>
-
-<style scoped lang="scss">
-.el-form--inline .el-form-item {
-  margin-top: 18px;
-}
-</style>