From 8ea7581113f0dff0140c23a587a7b6c2469c76e2 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Fri, 14 Feb 2025 17:18:36 +0800
Subject: [PATCH] =?UTF-8?q?crud=E7=BC=96=E8=BE=91=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E5=A2=9E=E5=8A=A0disabled=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E7=B3=BB=E7=BB=9F=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/params.ts                      |  79 ++++++
 src/components/CURD/PageContent.vue           | 266 ++++++++++++++----
 src/components/CURD/PageForm.vue              |   6 +-
 src/components/CURD/PageModal.vue             |  72 ++++-
 src/components/CURD/types.ts                  |   2 +
 src/router/index.ts                           |  10 +
 src/views/admim/system/params/config/add.ts   |  66 +++++
 .../admim/system/params/config/config.ts      |  28 ++
 .../admim/system/params/config/content.ts     |  61 ++++
 .../admim/system/params/config/content2.ts    | 133 +++++++++
 src/views/admim/system/params/config/edit.ts  |  67 +++++
 .../admim/system/params/config/search.ts      |  24 ++
 src/views/admim/system/params/index.vue       | 134 +++++++++
 13 files changed, 872 insertions(+), 76 deletions(-)
 create mode 100644 src/api/system/params.ts
 create mode 100644 src/views/admim/system/params/config/add.ts
 create mode 100644 src/views/admim/system/params/config/config.ts
 create mode 100644 src/views/admim/system/params/config/content.ts
 create mode 100644 src/views/admim/system/params/config/content2.ts
 create mode 100644 src/views/admim/system/params/config/edit.ts
 create mode 100644 src/views/admim/system/params/config/search.ts
 create mode 100644 src/views/admim/system/params/index.vue

diff --git a/src/api/system/params.ts b/src/api/system/params.ts
new file mode 100644
index 0000000..10b4e69
--- /dev/null
+++ b/src/api/system/params.ts
@@ -0,0 +1,79 @@
+import request from "@/utils/request";
+import { System_BaseUrl } from "@/api/config";
+const baseURL = System_BaseUrl + "/admin/sysParams";
+
+const ParamsApi = {
+  getList(data: getListRequest) {
+    return request<any>({
+      url: `${baseURL}/type/0`,
+      method: "get",
+      params: data
+    });
+  },
+  get() {
+
+  },
+  add(data: addRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data,
+    });
+  },
+  edit(data: editRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  delete() {
+
+  },
+};
+
+export default ParamsApi;
+
+export interface getListRequest {
+  type: string;
+  [property: string]: any;
+}
+
+export interface addRequest {
+  /**
+   * 参数编码-系统唯一
+   */
+  paramCode: string;
+  /**
+   * 参数类型：，0：系统参数   1：非系统参数
+   */
+  paramType: number;
+  /**
+   * 参数值
+   */
+  paramValue: string;
+  /**
+   * 备注
+   */
+  remark?: string;
+  [property: string]: any;
+}
+export interface editRequest {
+  /**
+   * 参数编码-系统唯一
+   */
+  paramCode: string;
+  /**
+   * 参数类型，0：系统参数   1：非系统参数
+   */
+  paramType: number;
+  /**
+   * 参数值
+   */
+  paramValue: string;
+  /**
+   * 备注
+   */
+  remark?: string;
+  [property: string]: any;
+}
\ No newline at end of file
diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 4257b4f..1ef7762 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -8,37 +8,58 @@
           <template v-if="typeof item === 'string'">
             <!-- 新增 -->
             <template v-if="item === 'add'">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="success" icon="plus"
-                @click="handleToolbar(item)">
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                type="success"
+                icon="plus"
+                @click="handleToolbar(item)"
+              >
                 新增
               </el-button>
             </template>
             <!-- 删除 -->
             <template v-else-if="item === 'delete'">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="danger" icon="delete"
-                :disabled="removeIds.length === 0" @click="handleToolbar(item)">
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                type="danger"
+                icon="delete"
+                :disabled="removeIds.length === 0"
+                @click="handleToolbar(item)"
+              >
                 删除
               </el-button>
             </template>
             <!-- 导入 -->
             <template v-else-if="item === 'import'">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="upload"
-                @click="handleToolbar(item)">
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                type="default"
+                icon="upload"
+                @click="handleToolbar(item)"
+              >
                 导入
               </el-button>
             </template>
             <!-- 导出 -->
             <template v-else-if="item === 'export'">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="download"
-                @click="handleToolbar(item)">
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                type="default"
+                icon="download"
+                @click="handleToolbar(item)"
+              >
                 导出
               </el-button>
             </template>
           </template>
           <!-- 其他 -->
           <template v-else-if="typeof item === 'object'">
-            <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
-              :type="item.type ?? 'default'" @click="handleToolbar(item.name)">
+            <el-button
+              v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+              :icon="item.icon"
+              :type="item.type ?? 'default'"
+              @click="handleToolbar(item.name)"
+            >
               {{ item.text }}
             </el-button>
           </template>
@@ -67,36 +88,68 @@
             </template>
             <!-- 导出 -->
             <template v-else-if="item === 'exports'">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:export`]" icon="download" circle title="导出"
-                @click="handleToolbar(item)" />
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:export`]"
+                icon="download"
+                circle
+                title="导出"
+                @click="handleToolbar(item)"
+              />
             </template>
             <!-- 导入 -->
             <template v-else-if="item === 'imports'">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:import`]" icon="upload" circle title="导入"
-                @click="handleToolbar(item)" />
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:import`]"
+                icon="upload"
+                circle
+                title="导入"
+                @click="handleToolbar(item)"
+              />
             </template>
             <!-- 搜索 -->
             <template v-else-if="item === 'search'">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:query`]" icon="search" circle title="搜索"
-                @click="handleToolbar(item)" />
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:query`]"
+                icon="search"
+                circle
+                title="搜索"
+                @click="handleToolbar(item)"
+              />
             </template>
           </template>
           <!-- 其他 -->
           <template v-else-if="typeof item === 'object'">
             <template v-if="item.auth">
-              <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon" circle
-                :title="item.title" @click="handleToolbar(item.name)" />
+              <el-button
+                v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+                :icon="item.icon"
+                circle
+                :title="item.title"
+                @click="handleToolbar(item.name)"
+              />
             </template>
             <template v-else>
-              <el-button :icon="item.icon" circle :title="item.title" @click="handleToolbar(item.name)" />
+              <el-button
+                :icon="item.icon"
+                circle
+                :title="item.title"
+                @click="handleToolbar(item.name)"
+              />
             </template>
           </template>
         </template>
       </div>
     </div>
     <!-- 列表 -->
-    <el-table ref="tableRef" v-loading="loading" v-bind="contentConfig.table" :data="pageData" :row-key="pk"
-      @selection-change="handleSelectionChange" @filter-change="handleFilterChange">
+    <el-table
+      ref="tableRef"
+      v-loading="loading"
+      v-bind="contentConfig.table"
+      :data="pageData"
+      :row-key="pk"
+      @selection-change="handleSelectionChange"
+      @filter-change="handleFilterChange"
+    >
       <template v-for="col in cols" :key="col">
         <el-table-column v-if="col.show" v-bind="col">
           <template #default="scope">
@@ -105,15 +158,24 @@
               <template v-if="col.prop">
                 <template v-if="Array.isArray(scope.row[col.prop])">
                   <template v-for="(item, index) in scope.row[col.prop]" :key="item">
-                    <el-image :src="item" :preview-src-list="scope.row[col.prop]" :initial-index="index"
+                    <el-image
+                      :src="item"
+                      :preview-src-list="scope.row[col.prop]"
+                      :initial-index="index"
                       :preview-teleported="true"
-                      :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
+                      :style="`width: ${col.imageWidth ?? 40}px; height: ${
+                        col.imageHeight ?? 40
+                      }px`"
+                    />
                   </template>
                 </template>
                 <template v-else>
-                  <el-image :src="scope.row[col.prop]" :preview-src-list="[scope.row[col.prop]]"
+                  <el-image
+                    :src="scope.row[col.prop]"
+                    :preview-src-list="[scope.row[col.prop]]"
                     :preview-teleported="true"
-                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
+                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                  />
                 </template>
               </template>
             </template>
@@ -135,20 +197,30 @@
             <template v-else-if="col.templet === 'switch'">
               <template v-if="col.prop">
                 <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
-                <el-switch v-model="scope.row[col.prop]" :active-value="col.activeValue ?? 1"
-                  :inactive-value="col.inactiveValue ?? 0" :inline-prompt="true" :active-text="col.activeText ?? ''"
-                  :inactive-text="col.inactiveText ?? ''" :validate-event="false"
-                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)" @change="
+                <el-switch
+                  v-model="scope.row[col.prop]"
+                  :active-value="col.activeValue ?? 1"
+                  :inactive-value="col.inactiveValue ?? 0"
+                  :inline-prompt="true"
+                  :active-text="col.activeText ?? ''"
+                  :inactive-text="col.inactiveText ?? ''"
+                  :validate-event="false"
+                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
+                  @change="
                     pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
-                    " />
+                  "
+                />
               </template>
             </template>
             <!-- 生成输入框组件 -->
             <template v-else-if="col.templet === 'input'">
               <template v-if="col.prop">
-                <el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
+                <el-input
+                  v-model="scope.row[col.prop]"
+                  :type="col.inputType ?? 'text'"
                   :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
-                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
+                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)"
+                />
               </template>
             </template>
             <!-- 格式化为价格 -->
@@ -180,7 +252,7 @@
                 {{
                   scope.row[col.prop]
                     ? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
-                      .value
+                        .value
                     : ""
                 }}
               </template>
@@ -191,30 +263,45 @@
                 <template v-if="typeof item === 'string'">
                   <!-- 编辑/删除 -->
                   <template v-if="item === 'edit' || item === 'delete'">
-                    <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]"
-                      :type="item === 'edit' ? 'primary' : 'danger'" :icon="item" size="small" link @click="
+                    <el-button
+                      v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                      :type="item === 'edit' ? 'primary' : 'danger'"
+                      :icon="item"
+                      size="small"
+                      link
+                      @click="
                         handleOperat({
                           name: item,
                           row: scope.row,
                           column: scope.column,
                           $index: scope.$index,
                         })
-                        ">
+                      "
+                    >
                       {{ item === "edit" ? "编辑" : "删除" }}
                     </el-button>
                   </template>
                 </template>
                 <!-- 其他 -->
                 <template v-else-if="typeof item === 'object'">
-                  <el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
-                    " :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
+                  <el-button
+                    v-if="item.render === undefined || item.render(scope.row)"
+                    v-bind="
+                      item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
+                    "
+                    :icon="item.icon"
+                    :type="item.type ?? 'primary'"
+                    size="small"
+                    link
+                    @click="
                       handleOperat({
                         name: item.name,
                         row: scope.row,
                         column: scope.column,
                         $index: scope.$index,
                       })
-                      ">
+                    "
+                  >
                     {{ item.text }}
                   </el-button>
                 </template>
@@ -232,18 +319,33 @@
     <template v-if="showPagination">
       <el-scrollbar>
         <div class="mt-[12px]">
-          <el-pagination v-bind="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+          <el-pagination
+            v-bind="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
         </div>
       </el-scrollbar>
     </template>
     <!-- 导出弹窗 -->
-    <el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0"
-      @close="handleCloseExportsModal">
+    <el-dialog
+      v-model="exportsModalVisible"
+      :align-center="true"
+      title="导出数据"
+      width="600px"
+      style="padding-right: 0"
+      @close="handleCloseExportsModal"
+    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form ref="exportsFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
-          :model="exportsFormData" :rules="exportsFormRules">
+        <el-form
+          ref="exportsFormRef"
+          label-width="auto"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="exportsFormData"
+          :rules="exportsFormRules"
+        >
           <el-form-item label="文件名" prop="filename">
             <el-input v-model="exportsFormData.filename" clearable />
           </el-form-item>
@@ -253,10 +355,16 @@
           <el-form-item label="数据源" prop="origin">
             <el-select v-model="exportsFormData.origin">
               <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
-              <el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED"
-                :disabled="selectionData.length <= 0" />
-              <el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE"
-                :disabled="contentConfig.exportsAction === undefined" />
+              <el-option
+                label="选中数据 (所有选中的数据)"
+                :value="ExportsOriginEnum.SELECTED"
+                :disabled="selectionData.length <= 0"
+              />
+              <el-option
+                label="全量数据 (所有分页的数据)"
+                :value="ExportsOriginEnum.REMOTE"
+                :disabled="contentConfig.exportsAction === undefined"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="字段" prop="fields">
@@ -277,17 +385,35 @@
       </template>
     </el-dialog>
     <!-- 导入弹窗 -->
-    <el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0"
-      @close="handleCloseImportModal">
+    <el-dialog
+      v-model="importModalVisible"
+      :align-center="true"
+      title="导入数据"
+      width="600px"
+      style="padding-right: 0"
+      @close="handleCloseImportModal"
+    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form ref="importFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
-          :model="importFormData" :rules="importFormRules">
+        <el-form
+          ref="importFormRef"
+          label-width="auto"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="importFormData"
+          :rules="importFormRules"
+        >
           <el-form-item label="文件名" prop="files">
-            <el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
+            <el-upload
+              ref="uploadRef"
+              v-model:file-list="importFormData.files"
+              class="w-full"
               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-              :drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
+              :drag="true"
+              :limit="1"
+              :auto-upload="false"
+              :on-exceed="handleFileExceed"
+            >
               <el-icon class="el-icon--upload"><upload-filled /></el-icon>
               <div class="el-upload__text">
                 <span>将文件拖到此处，或</span>
@@ -296,8 +422,13 @@
               <template #tip>
                 <div class="el-upload__tip">
                   *.xlsx / *.xls
-                  <el-link v-if="contentConfig.importTemplate" type="primary" icon="download" :underline="false"
-                    @click="handleDownloadTemplate">
+                  <el-link
+                    v-if="contentConfig.importTemplate"
+                    type="primary"
+                    icon="download"
+                    :underline="false"
+                    @click="handleDownloadTemplate"
+                  >
                     下载模板
                   </el-link>
                 </div>
@@ -309,7 +440,11 @@
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
-          <el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
+          <el-button
+            type="primary"
+            :disabled="importFormData.files.length === 0"
+            @click="handleImportSubmit"
+          >
             确 定
           </el-button>
           <el-button @click="handleCloseImportModal">取 消</el-button>
@@ -780,10 +915,10 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
     .indexAction(
       showPagination
         ? {
-          [request.pageName]: pagination.currentPage,
-          [request.limitName]: pagination.pageSize,
-          ...formData,
-        }
+            [request.pageName]: pagination.currentPage,
+            [request.limitName]: pagination.pageSize,
+            ...formData,
+          }
         : formData
     )
     .then((data) => {
@@ -791,7 +926,14 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
         if (props.contentConfig.parseData) {
           data = props.contentConfig.parseData(data);
         }
-        pagination.total = props.contentConfig.resultListKey ? data.records.length : data.totalRow * 1;
+        if (Array.isArray(data)) {
+          pageData.value = data;
+          pagination.total = data.length;
+          return;
+        }
+        pagination.total = props.contentConfig.resultListKey
+          ? data.records.length
+          : data.totalRow * 1;
         pageData.value = props.contentConfig.resultListKey
           ? data[props.contentConfig.resultListKey]
           : data.records;
diff --git a/src/components/CURD/PageForm.vue b/src/components/CURD/PageForm.vue
index c1f73c4..6a479f0 100644
--- a/src/components/CURD/PageForm.vue
+++ b/src/components/CURD/PageForm.vue
@@ -24,7 +24,11 @@
             {{ item.type }}
 
             <template v-if="item.type === 'input' || item.type === undefined">
-              <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+              <el-input
+                v-model="formData[item.prop]"
+                v-bind="item.attrs"
+                :disabled="item.disabled"
+              />
             </template>
             <!-- textarea 输入框 -->
 
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index 893a6c7..34f5954 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -1,9 +1,20 @@
 <template>
   <!-- drawer -->
   <template v-if="modalConfig.component === 'drawer'">
-    <el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
+    <el-drawer
+      v-model="modalVisible"
+      :append-to-body="true"
+      v-bind="modalConfig.drawer"
+      @close="handleCloseModal"
+    >
       <!-- 表单 -->
-      <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+      <el-form
+        ref="formRef"
+        label-width="auto"
+        v-bind="modalConfig.form"
+        :model="formData"
+        :rules="formRules"
+      >
         <el-row :gutter="20">
           <template v-for="item in formItems" :key="item.prop">
             <el-col v-show="!item.hidden" v-bind="item.col">
@@ -12,7 +23,12 @@
                 <template v-if="item.tips" #label>
                   <span>
                     {{ item.label }}
-                    <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                    <el-tooltip
+                      placement="bottom"
+                      effect="light"
+                      :content="item.tips"
+                      :raw-content="true"
+                    >
                       <el-icon style="vertical-align: -0.15em" size="16">
                         <QuestionFilled />
                       </el-icon>
@@ -76,7 +92,12 @@
                 </template>
                 <!-- 自定义 -->
                 <template v-else-if="item.type === 'custom'">
-                  <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
+                  <slot
+                    :name="item.slotName ?? item.prop"
+                    :prop="item.prop"
+                    :formData="formData"
+                    :attrs="item.attrs"
+                  />
                 </template>
               </el-form-item>
             </el-col>
@@ -97,13 +118,26 @@
   </template>
   <!-- dialog -->
   <template v-else>
-    <el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
-      v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
+    <el-dialog
+      v-model="modalVisible"
+      :align-center="true"
+      :append-to-body="true"
+      width="70vw"
+      v-bind="modalConfig.dialog"
+      style="padding-right: 0"
+      @close="handleCloseModal"
+    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
-          style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
+        <el-form
+          ref="formRef"
+          label-width="auto"
+          v-bind="modalConfig.form"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="formData"
+          :rules="formRules"
+        >
           <el-row :gutter="20">
             <template v-for="item in formItems" :key="item.prop">
               <el-col v-show="!item.hidden" v-bind="item.col">
@@ -112,7 +146,12 @@
                   <template v-if="item.tips" #label>
                     <span>
                       {{ item.label }}
-                      <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                      <el-tooltip
+                        placement="bottom"
+                        effect="light"
+                        :content="item.tips"
+                        :raw-content="true"
+                      >
                         <el-icon style="vertical-align: -0.15em" size="16">
                           <QuestionFilled />
                         </el-icon>
@@ -121,7 +160,11 @@
                   </template>
                   <!-- Input 输入框 -->
                   <template v-if="item.type === 'input' || item.type === undefined">
-                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+                    <el-input
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                      :disabled="item.disabled"
+                    />
                   </template>
                   <!-- textarea 输入框 -->
                   <template v-if="item.type === 'textarea'">
@@ -179,8 +222,12 @@
                   </template>
                   <!-- 自定义 -->
                   <template v-else-if="item.type === 'custom'">
-                    <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
-                      :attrs="item.attrs" />
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :formData="formData"
+                      :attrs="item.attrs"
+                    />
                   </template>
                 </el-form-item>
               </el-col>
@@ -213,7 +260,6 @@ const props = defineProps<{
 const emit = defineEmits<{
   submitClick: [];
 }>();
-console.log(props.modalConfig, '全部')
 const pk = props.modalConfig.pk ?? "id";
 const modalVisible = ref(false);
 const formRef = ref<FormInstance>();
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index 6b6c047..84c5c6f 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -34,6 +34,7 @@ export interface ISearchConfig {
   formItems: Array<{
     // 组件类型(如input,select等)
     type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag" | "radio-button";
+    disabled?: boolean;
     // 标签文本
     label: string;
     // 标签提示
@@ -234,6 +235,7 @@ export type IFormItems<T = any> = Array<{
   | "UpImage"
   | "custom";
   // 组件属性
+  disabled?: boolean;
   attrs?: IObject;
   // 组件可选项(适用于select,radio,checkbox组件)
   options?: Array<{
diff --git a/src/router/index.ts b/src/router/index.ts
index 86d2f24..bf795f2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -159,6 +159,16 @@ export const constantRoutes: RouteRecordRaw[] = [
       alwaysShow: true,
     },
     children: [
+      {
+        path: "params",
+        component: () => import("@/views/admim/system/params/index.vue"),
+        name: "adminSysParams",
+        meta: {
+          title: "系统参数",
+          affix: false,
+          keepAlive: true,
+        },
+      },
       {
         path: "user",
         component: () => import("@/views/admim/system/user/index.vue"),
diff --git a/src/views/admim/system/params/config/add.ts b/src/views/admim/system/params/config/add.ts
new file mode 100644
index 0000000..5adff0a
--- /dev/null
+++ b/src/views/admim/system/params/config/add.ts
@@ -0,0 +1,66 @@
+import ParamsApi, { type addRequest } from "@/api/system/params";
+import type { IModalConfig } from "@/components/CURD/types";
+import { paramTypeOptions } from './config'
+const modalConfig: IModalConfig<addRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "添加系统参数",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return ParamsApi.add(data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "参数编码",
+      prop: "paramCode",
+      rules: [{ required: true, message: "请输入参数编码", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入参数编码",
+      },
+    },
+    {
+      label: "参数值",
+      prop: "paramValue",
+      rules: [{ required: true, message: "请输入参数值", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入参数值",
+      },
+    },
+    {
+      label: "参数类型",
+      prop: "paramType",
+      rules: [{ required: true, message: "请选择参数类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择参数类型",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: paramTypeOptions,
+    },
+    {
+      type: "textarea",
+      label: "备注",
+      prop: "remark",
+      rules: [{ required: true, message: "请输入备注", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入备注",
+      },
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
diff --git a/src/views/admim/system/params/config/config.ts b/src/views/admim/system/params/config/config.ts
new file mode 100644
index 0000000..a4743e9
--- /dev/null
+++ b/src/views/admim/system/params/config/config.ts
@@ -0,0 +1,28 @@
+
+export const paramTypeOptions: options[] = [
+  { label: "系统参数", value: 0 },
+  { label: "非系统参数", value: 1 },
+];
+
+export type optionsType = "paramType" | "";
+
+export function returnOptions(type: optionsType) {
+  if (type === "paramType") {
+    return paramTypeOptions;
+  }
+}
+
+export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}
+
+export interface options {
+  label: string;
+  value: string | number;
+  [property: string]: any;
+}
diff --git a/src/views/admim/system/params/config/content.ts b/src/views/admim/system/params/config/content.ts
new file mode 100644
index 0000000..842b2fc
--- /dev/null
+++ b/src/views/admim/system/params/config/content.ts
@@ -0,0 +1,61 @@
+import ParamsApi from "@/api/system/params";
+import type { editRequest } from "@/api/system/params";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig<editRequest> = {
+  pageName: "sys:user",
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  indexAction: function (params) {
+    return ParamsApi.getList(params);
+  },
+  // modifyAction: function (data) {
+  //   // return ParamsApi.edit(data);
+  // },
+  pk: "id",
+  toolbar: ["add"],
+  defaultToolbar: ["refresh", "filter", "search"],
+  cols: [
+    { type: "selection", width: 50, align: "center" },
+    {
+      label: "参数编码",
+      align: "center",
+      prop: "paramCode",
+    },
+    {
+      label: "参数值",
+      align: "center",
+      prop: "paramValue",
+    },
+    {
+      label: "参数类型",
+      align: "center",
+      prop: "paramType",
+      templet: "custom",
+      slotName: "options",
+    },
+    {
+      label: "备注",
+      align: "center",
+      prop: "remark",
+    },
+
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      templet: "tool",
+      operat: ["edit"],
+    },
+  ],
+};
+
+export default contentConfig;
diff --git a/src/views/admim/system/params/config/content2.ts b/src/views/admim/system/params/config/content2.ts
new file mode 100644
index 0000000..3da3999
--- /dev/null
+++ b/src/views/admim/system/params/config/content2.ts
@@ -0,0 +1,133 @@
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig = {
+  pageName: "sys:user",
+  table: {
+    showOverflowTooltip: true,
+  },
+  toolbar: [],
+  indexAction: function (params) {
+    // 模拟发起网络请求获取列表数据
+    console.log("indexAction:", params);
+    return Promise.resolve({
+      total: 2,
+      list: [
+        {
+          id: 1,
+          username: "tom",
+          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
+          percent: 99,
+          price: 10,
+          url: "https://www.baidu.com",
+          icon: "el-icon-setting",
+          gender: 1,
+          status: 1,
+          status2: 1,
+          sort: 99,
+          createTime: 1715647982437,
+        },
+        {
+          id: 2,
+          username: "jerry",
+          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
+          percent: 88,
+          price: 999,
+          url: "https://www.google.com",
+          icon: "el-icon-user",
+          gender: 0,
+          status: 0,
+          status2: 0,
+          sort: 0,
+          createTime: 1715648977426,
+        },
+      ],
+    });
+  },
+  modifyAction(data) {
+    // 模拟发起网络请求修改字段
+    // console.log("modifyAction:", data);
+    ElMessage.success(JSON.stringify(data));
+    return Promise.resolve(null);
+  },
+  cols: [
+    { type: "index", width: 50, align: "center" },
+    { label: "ID", align: "center", prop: "id", show: false },
+    { label: "文本", align: "center", prop: "username" },
+    { label: "图片", align: "center", prop: "avatar", templet: "image" },
+    {
+      label: "百分比",
+      align: "center",
+      prop: "percent",
+      templet: "percent",
+    },
+    {
+      label: "货币符",
+      align: "center",
+      prop: "price",
+      templet: "price",
+      priceFormat: "$",
+    },
+    { label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
+    { label: "图标", align: "center", prop: "icon", templet: "icon" },
+    {
+      label: "列表值",
+      align: "center",
+      prop: "gender",
+      templet: "list",
+      selectList: { "0": "女", "1": "男" },
+    },
+    {
+      label: "自定义",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+      slotName: "status",
+    },
+    {
+      label: "Switch",
+      align: "center",
+      prop: "status2",
+      templet: "switch",
+      activeValue: 1,
+      inactiveValue: 0,
+      activeText: "启用",
+      inactiveText: "禁用",
+    },
+    {
+      label: "输入框",
+      align: "center",
+      prop: "sort",
+      templet: "input",
+      inputType: "number",
+    },
+    {
+      label: "日期格式化",
+      align: "center",
+      prop: "createTime",
+      minWidth: 120,
+      templet: "date",
+      dateFormat: "YYYY/MM/DD HH:mm:ss",
+    },
+    {
+      label: "操作栏",
+      align: "center",
+      fixed: "right",
+      width: 220,
+      templet: "tool",
+      operat: [
+        {
+          name: "reset_pwd",
+          auth: "password:reset",
+          icon: "refresh-left",
+          text: "重置密码",
+          type: "primary",
+          render(row) {
+            return row.id === 1;
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default contentConfig;
diff --git a/src/views/admim/system/params/config/edit.ts b/src/views/admim/system/params/config/edit.ts
new file mode 100644
index 0000000..683981e
--- /dev/null
+++ b/src/views/admim/system/params/config/edit.ts
@@ -0,0 +1,67 @@
+import ParamsApi, { type addRequest } from "@/api/system/params";
+import type { IModalConfig } from "@/components/CURD/types";
+import { paramTypeOptions } from './config'
+const modalConfig: IModalConfig<addRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "编辑系统参数",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return ParamsApi.edit(data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "参数编码",
+      prop: "paramCode",
+      rules: [{ required: true, message: "请输入参数编码", trigger: "blur" }],
+      type: "input",
+      disabled: true,
+      attrs: {
+        placeholder: "请输入参数编码",
+      },
+    },
+    {
+      label: "参数值",
+      prop: "paramValue",
+      rules: [{ required: true, message: "请输入参数值", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入参数值",
+      },
+    },
+    {
+      label: "参数类型",
+      prop: "paramType",
+      rules: [{ required: true, message: "请选择参数类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择参数类型",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: paramTypeOptions,
+    },
+    {
+      type: "textarea",
+      label: "备注",
+      prop: "remark",
+      rules: [{ required: true, message: "请输入备注", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入备注",
+      },
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
diff --git a/src/views/admim/system/params/config/search.ts b/src/views/admim/system/params/config/search.ts
new file mode 100644
index 0000000..dc80956
--- /dev/null
+++ b/src/views/admim/system/params/config/search.ts
@@ -0,0 +1,24 @@
+import type { ISearchConfig } from "@/components/CURD/types";
+import { paramTypeOptions } from './config'
+
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "radio-button",
+      label: "参数类型",
+      prop: "type",
+      attrs: {
+        placeholder: "请选择参数类型",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: paramTypeOptions,
+      initialValue: paramTypeOptions[0].value
+    },
+  ],
+};
+
+export default searchConfig;
diff --git a/src/views/admim/system/params/index.vue b/src/views/admim/system/params/index.vue
new file mode 100644
index 0000000..1c4a11a
--- /dev/null
+++ b/src/views/admim/system/params/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <template v-if="isA">
+      <!-- 搜索 -->
+      <page-search
+        ref="searchRef"
+        :search-config="searchConfig"
+        @query-click="handleQueryClick"
+        @reset-click="handleResetClick"
+      />
+      <!-- 列表 -->
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig"
+        @add-click="handleAddClick"
+        @edit-click="handleEditClick"
+        @export-click="handleExportClick"
+        @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick"
+        @operat-click="handleOperatClick"
+        @filter-change="handleFilterChange"
+      >
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+        <template #options="scope">
+          {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+        </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
+        <template #mobile="scope">
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
+          <copy-button
+            v-if="scope.row[scope.prop]"
+            :text="scope.row[scope.prop]"
+            style="margin-left: 2px"
+          />
+        </template>
+      </page-content>
+
+      <!-- 新增 -->
+      <page-modal
+        ref="addModalRef"
+        :modal-config="addModalConfig"
+        @submit-click="handleSubmitClick"
+      >
+        <template #url="scope">
+          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+        </template>
+      </page-modal>
+
+      <!-- 编辑 -->
+      <page-modal
+        ref="editModalRef"
+        :modal-config="editModalConfig"
+        @submit-click="handleSubmitClick"
+      >
+        <template #url="scope">
+          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+        </template>
+      </page-modal>
+    </template>
+    <template v-else>
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig2"
+        @operat-click="handleOperatClick"
+      >
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import contentConfig2 from "./config/content2";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";
+
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  editModalRef.value?.setFormData({ ...row });
+}
+1;
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {}
+
+// 切换示例
+const isA = ref(true);
+</script>