up.

z_ele/src/utils/sys-config.ts

@@ -49,6 +49,7 @@ export function strToOption(type: string, option: string): any {
       case 'textarea':
       case 'checkbox':
       case 'radio':
+      case 'tabs':
       default:
         if (option) {
           return JSON.parse(option);

z_ele/src/views/system/config-set/components/config-form-item.vue

@@ -82,15 +82,16 @@ const props = defineProps<{
   title: string;
   type: string;
   value: string;
-  options: string;
+  options: any;
   itemBind: any
 }>();
 
 const dataValue = ref<any>();
 const dataOptions = ref<any>()
 onMounted(() => {
+  dataOptions.value = props.options;
   dataValue.value = strToValue(props.type, props.value);
-  dataOptions.value = strToOption(props.type, props.options);
+  // dataOptions.value = strToOption(props.type, props.options);
   // console.log("渲染完成", props, dataValue.value, dataOptions.value);
 });
 const updatedataValue = (val) => {

z_ele/src/views/system/config-set/components/config-form-list.vue

@@ -18,6 +18,15 @@
         </el-collapse-item>
       </el-collapse>
     </template>
+    <template v-else-if="config.type === 'tabs'">
+      {{ defaultTabs(config) }}
+      <el-tabs
+        type="card"
+        :model-value="defaultTabs(config)"
+      >
+        <el-tab-pane v-for="(name,label) in config.options" :label="label" :name="name">{{label}}</el-tab-pane>
+      </el-tabs>
+    </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"/>
@@ -35,4 +44,11 @@ import ConfigFormItem from "../components/config-form-item.vue";
 const props = defineProps<{
   configList: any;
 }>();
+const defaultTabs = (cfg: any)=>{
+  let keys = Object.keys(cfg.options)
+  if(keys.length > 0) {
+    return keys[0];
+  }
+  return null;
+}
 </script>

z_ele/src/views/system/config-set/index.vue

@@ -42,7 +42,7 @@
 import {onMounted, ref} from 'vue';
 import {Refresh} from "@element-plus/icons-vue"
 import {listConfig} from "@/api/system/config";
-import {getSysConfig, strToBind} from "@/utils/sys-config";
+import {getSysConfig, strToBind, strToOption} from "@/utils/sys-config";
 import {useFormData} from "@/utils/use-form-data";
 import type {Config} from "@/api/system/config/model";
 import ConfigFormList from "./components/config-form-list.vue";
@@ -62,6 +62,8 @@ const reload = () => {
     configList.value = configs.map(d=>{
       // 解析vBind属性到item
       d.bind = strToBind(d.type, d.vBind);
+      d.options = strToOption(d.type, d.options);
+
       if(d.type =='card' || d.type == 'collapse'){
         d.children = [
           {
@@ -117,7 +119,8 @@ const reload = () => {
           }
         ];
         for(let a in d.children){
-          d.children[a].bind = strToBind(d.type, d.vBind);
+          d.children[a].bind = strToBind(d.children[a].type, d.children[a].vBind);
+          d.children[a].options = strToOption(d.children[a].type, d.children[a].options);
         }
       }
       return d;

z_ele/src/views/system/config/components/config-edit.vue

@@ -44,6 +44,7 @@
           <el-option value="alert" label="提示" />
           <el-option value="card" label="卡片" />
           <el-option value="collapse" label="折叠面板" />
+          <el-option value="tabs" label="Tabs" />
           <el-option value="text" label="单行文本" />
           <el-option value="textarea" label="多行文本" />
           <el-option value="password" label="密码" />