From bd0a4503452ef2eafadc5dbe41f3a0efc9c57fef Mon Sep 17 00:00:00 2001
From: u2nyakim <u2nyakim@gmail.com>
Date: Mon, 25 Aug 2025 11:23:05 +0800
Subject: [PATCH] up.

---
 z_ele/src/utils/sys-config.ts                 |  32 ++++-
 .../components/config-form-item.vue           |  48 +++++--
 .../components/config-form-list.vue           |  31 ++++
 z_ele/src/views/system/config-set/index.vue   | 133 ++++++++++++++++--
 .../system/config/components/config-edit.vue  |   7 +
 5 files changed, 218 insertions(+), 33 deletions(-)
 create mode 100644 z_ele/src/views/system/config-set/components/config-form-list.vue

diff --git a/z_ele/src/utils/sys-config.ts b/z_ele/src/utils/sys-config.ts
index 82f04ac..177c495 100644
--- a/z_ele/src/utils/sys-config.ts
+++ b/z_ele/src/utils/sys-config.ts
@@ -12,7 +12,8 @@ export function strToValue(type: string, value: string): any {
     case 'json':
       return JSON.parse(value);
     case 'int':
-      return parseInt(value)
+    case 'number':
+      return value ? parseInt(value) : 0;
     case 'switch':
       return value == '1'
     case 'checkbox':
@@ -21,7 +22,18 @@ export function strToValue(type: string, value: string): any {
     case 'textarea':
     case 'date':
     case 'datetime':
+    case 'time':
       return null;
+    case 'date_range':
+    case 'time_range':
+    case 'datetime_range':
+      return [null, null];
+    case 'alert':
+      // 提示
+      return '-';
+    case '-':
+      // 分割线
+      return '-';
     default:
       return value
   }
@@ -48,7 +60,13 @@ export function strToOption(type: string, option: string): any {
   return {};
 }
 
-export function strToBind(type: string, option: string): any {
+export function strToBind(type: string, bindStr: string): any {
+  let bind: any;
+  try {
+    bind = bindStr ? JSON.parse(bindStr) : {};
+  } catch (e) {
+    bind = {}
+  }
   try {
     switch (type) {
       case 'json':
@@ -58,13 +76,13 @@ export function strToBind(type: string, option: string): any {
       case 'textarea':
       case 'checkbox':
       case 'date':
-        return {format: 'YYYY-MM-DD'}
+        return {format: 'YYYY-MM-DD', ...bind}
       case 'datetime':
-        return {format: 'YYYY-MM-DD HH:mm:ss'}
+        return {format: 'YYYY-MM-DD HH:mm:ss', ...bind}
+      case 'alert':
+        return {type: "success", ...bind};
       default:
-        if (option) {
-          return JSON.parse(option);
-        }
+        return bind;
     }
   } catch (e) {
     console.error(e);
diff --git a/z_ele/src/views/system/config-set/components/config-form-item.vue b/z_ele/src/views/system/config-set/components/config-form-item.vue
index babaee9..8e57d3f 100644
--- a/z_ele/src/views/system/config-set/components/config-form-item.vue
+++ b/z_ele/src/views/system/config-set/components/config-form-item.vue
@@ -1,13 +1,13 @@
 <template>
   <el-form-item :label="props.title" :prop="props.name">
     <template v-if="props.type === 'text'">
-      <el-input v-model="dataValue" :placeholder="'请输入' + props.title" v-bind="dataBind"/>
+      <el-input v-model="dataValue" :placeholder="'请输入' + props.title" v-bind="itemBind"/>
     </template>
     <template v-else-if="props.type === 'textarea'">
       <el-input type="textarea"
                 v-model="dataValue"
                 :placeholder="'请输入' + props.title"
-                v-bind="dataBind"
+                v-bind="itemBind"
       />
     </template>
     <template v-else-if="props.type === 'password'">
@@ -16,7 +16,7 @@
         type="password"
         v-model="dataValue"
         :placeholder="'请输入' + props.title"
-        v-bind="dataBind"
+        v-bind="itemBind"
       />
     </template>
     <template v-else-if="props.type === 'switch'">
@@ -24,27 +24,51 @@
         size="small"
         :model-value="dataValue"
         @update:modelValue="(val) => updatedataValue(val)"
-        v-bind="dataBind"
+        v-bind="itemBind"
       />
     </template>
     <template v-else-if="props.type === 'number'">
-      <el-input-number v-model="dataValue" :placeholder="'请输入' + props.title" v-bind="dataBind"/>
+      <el-input-number v-model="dataValue" :placeholder="'请输入' + props.title" v-bind="itemBind"/>
     </template>
     <template v-else-if="props.type === 'checkbox'">
-      <el-checkbox-group v-model="dataValue" v-bind="dataBind">
+      <el-checkbox-group v-model="dataValue" v-bind="itemBind">
         <el-checkbox v-for="item in (dataOptions || [])" :label="item.label" :value="item.value"  />
       </el-checkbox-group>
     </template>
     <template v-else-if="props.type === 'radio'">
-      <el-radio-group v-model="dataValue" v-bind="dataBind">
+      <el-radio-group v-model="dataValue" v-bind="itemBind">
         <el-radio v-for="item in (dataOptions || [])" :label="item.label" :value="item.value"  />
       </el-radio-group>
     </template>
     <template v-else-if="props.type === 'date'">
-      <el-date-picker v-model="dataValue" type="date" :placeholder="'请选择' + props.title" v-bind="dataBind"/>
+      <el-date-picker v-model="dataValue" type="date" :placeholder="'请选择' + props.title" v-bind="itemBind"/>
     </template>
     <template v-else-if="props.type === 'datetime'">
-      <el-date-picker v-model="dataValue" type="datetime" :placeholder="'请选择' + props.title" v-bind="dataBind"/>
+      <el-date-picker v-model="dataValue" type="datetime" :placeholder="'请选择' + props.title" v-bind="itemBind"/>
+    </template>
+    <template v-else-if="props.type === 'time'">
+      <el-time-picker v-model="dataValue"  :placeholder="'请选择' + props.title" v-bind="itemBind" />
+    </template>
+    <template v-else-if="props.type === 'date_range'">
+      <el-date-picker
+        v-model="dataValue"
+        type="daterange"
+        v-bind="itemBind"
+      />
+    </template>
+    <template v-else-if="props.type === 'datetime_range'">
+      <el-date-picker
+        v-model="dataValue"
+        type="datetimerange"
+        v-bind="itemBind"
+      />
+    </template>
+    <template v-else-if="props.type === 'time_range'">
+      <el-time-picker
+        v-model="dataValue"
+        is-range
+        v-bind="itemBind"
+      />
     </template>
   </el-form-item>
 </template>
@@ -59,17 +83,15 @@ const props = defineProps<{
   type: string;
   value: string;
   options: string;
+  itemBind: any
 }>();
 
 const dataValue = ref<any>();
 const dataOptions = ref<any>()
-const dataBind = ref<any>({})
 onMounted(() => {
-  dataBind.value = props.vBind ? strToBind(props.type, props.vBind) : {};
   dataValue.value = strToValue(props.type, props.value);
   dataOptions.value = strToOption(props.type, props.options);
-
-  console.log("渲染完成", props, dataValue.value, dataOptions.value);
+  // console.log("渲染完成", props, dataValue.value, dataOptions.value);
 });
 const updatedataValue = (val) => {
   console.log("更新val", val);
diff --git a/z_ele/src/views/system/config-set/components/config-form-list.vue b/z_ele/src/views/system/config-set/components/config-form-list.vue
new file mode 100644
index 0000000..0d58370
--- /dev/null
+++ b/z_ele/src/views/system/config-set/components/config-form-list.vue
@@ -0,0 +1,31 @@
+<template>
+  <template v-for="config in configList">
+    <template v-if="config.type === '-'">
+      <el-divider v-bind="config.bind">{{config.title}}</el-divider>
+    </template>
+    <template v-else-if="config.type === 'alert'">
+      <el-alert :title="config.title" v-bind="config.bind" />
+    </template>
+    <template v-else-if="config.type === 'card'">
+      <ele-card shadow="always" :header="config.title" v-bind="config.bind">
+        <config-form-list :config-list="config.children" v-if="config.children && config.children.length > 0" />
+      </ele-card>
+    </template>
+    <template v-else>
+      <config-form-item :name="config.name" :title="config.title" :type="config.type" :value="config.value"
+                        :options="config.options" :item-bind="config.bind"/>
+      <el-form-item v-if="config.tips">
+        <ele-text type="placeholder" style="line-height: 1.6">
+          {{ config.tips }}
+        </ele-text>
+      </el-form-item>
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+import ConfigFormItem from "../components/config-form-item.vue";
+const props = defineProps<{
+  configList: any;
+}>();
+</script>
diff --git a/z_ele/src/views/system/config-set/index.vue b/z_ele/src/views/system/config-set/index.vue
index 2cdd125..0bfc5ce 100644
--- a/z_ele/src/views/system/config-set/index.vue
+++ b/z_ele/src/views/system/config-set/index.vue
@@ -29,18 +29,10 @@
       <el-form
         ref="formRef"
         :model="form"
-        label-width="80px"
+        label-position="top"
         @submit.prevent=""
       >
-        <template v-for="config in configList">
-          <config-form-item :name="config.name" :title="config.title" :type="config.type" :value="config.value"
-                            :options="config.options"/>
-          <el-form-item v-if="config.tips">
-            <ele-text type="placeholder" style="line-height: 1.6">
-              {{ config.tips }}
-            </ele-text>
-          </el-form-item>
-        </template>
+        <config-form-list :config-list="configList" v-if="configList.length > 0" />
       </el-form>
     </ele-card>
   </ele-page>
@@ -50,10 +42,10 @@
 import {onMounted, ref} from 'vue';
 import {Refresh} from "@element-plus/icons-vue"
 import {listConfig} from "@/api/system/config";
-import {getSysConfig} from "@/utils/sys-config";
+import {getSysConfig, strToBind} from "@/utils/sys-config";
 import {useFormData} from "@/utils/use-form-data";
 import type {Config} from "@/api/system/config/model";
-import ConfigFormItem from "./components/config-form-item.vue";
+import ConfigFormList from "./components/config-form-list.vue";
 
 defineOptions({name: 'SystemConfigSet'});
 
@@ -65,7 +57,122 @@ const configLoading = ref(false);
 const reload = () => {
   configLoading.value = true;
   listConfig({group: configGroup.value, limit: 999}).then((data) => {
-    configList.value = data.filter(d=>d.type !== 'hidden');
+    const configs = data.filter(d => d.type !== 'hidden');
+
+    configList.value = configs.map(d=>{
+      // 解析vBind属性到item
+      d.bind = strToBind(d.type, d.vBind);
+      if(d.type =='card'){
+        d.children = [
+          {
+            "id": 18,
+            "pid": 0,
+            "name": "-",
+            "title": "卧槽，不能这样的哇",
+            "group": "base",
+            "type": "alert",
+            "value": "",
+            "options": "",
+            "tips": "",
+            "sort": 100,
+            "status": 1,
+            "vBind": null,
+            "createTime": "2025-08-25 10:26:29",
+            "updateTime": "2025-08-25 10:26:29",
+            "deleteTime": null
+          },
+          {
+            "id": 17,
+            "pid": 0,
+            "name": "-",
+            "title": "这是一个分割线",
+            "group": "base",
+            "type": "-",
+            "value": "",
+            "options": "",
+            "tips": "",
+            "sort": 100,
+            "status": 1,
+            "vBind": null,
+            "createTime": "2025-08-25 10:14:13",
+            "updateTime": "2025-08-25 10:14:34",
+            "deleteTime": null
+          },
+          {
+            "id": 6,
+            "pid": 0,
+            "name": "test_password",
+            "title": "系统密码",
+            "group": "base",
+            "type": "password",
+            "value": "123456",
+            "options": "",
+            "tips": "",
+            "sort": 100,
+            "status": 1,
+            "vBind": null,
+            "createTime": "2025-08-22 16:50:23",
+            "updateTime": "2025-08-22 16:50:23",
+            "deleteTime": null
+          },
+          {
+            "id": 5,
+            "pid": 0,
+            "name": "debug",
+            "title": "调试模式",
+            "group": "base",
+            "type": "switch",
+            "value": "1",
+            "options": "",
+            "tips": "",
+            "sort": 100,
+            "status": 1,
+            "vBind": null,
+            "createTime": "2025-08-22 16:40:07",
+            "updateTime": "2025-08-22 16:40:07",
+            "deleteTime": null
+          },
+          {
+            "id": 4,
+            "pid": 0,
+            "name": "test_textarea",
+            "title": "测试配置",
+            "group": "base",
+            "type": "textarea",
+            "value": "测试配置",
+            "options": "",
+            "tips": "",
+            "sort": 100,
+            "status": 1,
+            "vBind": null,
+            "createTime": "2025-08-22 15:40:19",
+            "updateTime": "2025-08-22 16:40:31",
+            "deleteTime": null
+          },
+          {
+            "id": 3,
+            "pid": 0,
+            "name": "test_text",
+            "title": "站点名称",
+            "group": "base",
+            "type": "text",
+            "value": "Ele Admin Plus",
+            "options": "",
+            "tips": "站点名称显示在<header>的title上",
+            "sort": 100,
+            "status": 1,
+            "vBind": null,
+            "createTime": "2025-08-22 14:11:22",
+            "updateTime": "2025-08-22 16:50:32",
+            "deleteTime": null
+          }
+        ];
+        for(let a in d.children){
+          d.children[a].bind = strToBind(d.type, d.vBind);
+        }
+      }
+      return d;
+    });
     configLoading.value = false;
   });
 };
diff --git a/z_ele/src/views/system/config/components/config-edit.vue b/z_ele/src/views/system/config/components/config-edit.vue
index ed3ba66..9321e3b 100644
--- a/z_ele/src/views/system/config/components/config-edit.vue
+++ b/z_ele/src/views/system/config/components/config-edit.vue
@@ -40,6 +40,9 @@
           placeholder="请选择配置类型"
           v-model="form.type"
         >
+          <el-option value="-" label="分割线" />
+          <el-option value="alert" label="提示" />
+          <el-option value="card" label="卡片" />
           <el-option value="text" label="单行文本" />
           <el-option value="textarea" label="多行文本" />
           <el-option value="password" label="密码" />
@@ -47,10 +50,14 @@
           <el-option value="radio" label="单选按钮" />
           <el-option value="date" label="日期" />
           <el-option value="datetime" label="日期+时间" />
+          <el-option value="time" label="时间" />
           <el-option value="switch" label="开关" />
           <el-option value="hidden" label="隐藏" />
           <el-option value="time" label="时间" />
           <el-option value="range" label="范围" />
+          <el-option value="date_range" label="日期范围" />
+          <el-option value="datetime_range" label="日期时间范围" />
+          <el-option value="time_range" label="时间范围" />
           <el-option value="number" label="数字" />
         </el-select>
       </el-form-item>