feat: ✨ 增加系统配置功能

增加系统配置功能，优化form表单的input输入框的问题

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>