eoss-ui 0.8.24 → 0.8.26

package/packages/form/src/1.json

@@ -0,0 +1,17 @@
+
+  {
+    "type": "tabs",
+    "tabType": "line",
+    "contents": [
+      {
+        "title": "境外国有资产-境外机构主题表",
+        "name": "block_3a3",
+        "contents": []
+      },
+      {
+        "title": "境外国有资产-境外机构经营信息主题表",
+        "name": "block_a96",
+        "contents": []
+      }
+    ]
+  }

package/packages/form/src/form-tab-item-render.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-tabs v-model="activeName" class="es-form-tabs" v-bind="$attrs">
+    <el-tab-pane
+      v-for="(tab, index) in items"
+      :key="tab.name || index"
+      :label="tab.title"
+      :name="tab.name"
+    >
+      <!-- 核心：在每个 tab-pane 内部，遍历并渲染该 tab 的 contents -->
+      <template v-for="(item, subIndex) in tab.contents">
+        <div
+          v-if="item.type === 'caption' && !item.hide"
+          :key="'caption-' + subIndex"
+          class="es-form-item-caption"
+        >
+          {{ item.text }}
+        </div>
+        <el-form-item
+          v-else-if="!item.hide"
+          :key="item.name || subIndex"
+          :label-width="getItemLabelWidth(item)"
+          :prop="item.name"
+          :rules="getRules ? getRules(item) : []"
+          :style="getStyle ? getStyle(item) : {}"
+        >
+          <es-label
+            slot="label"
+            v-if="shouldShowLabel(item)"
+            v-bind="getLabel ? getLabel(item.label) : {}"
+          ></es-label>
+          <es-data-table
+            v-if="item.type == 'table'"
+            :data="models[item.name]"
+            :full="item.height != undefined || item.height != null"
+            v-bind="
+              handleExclAttribute({
+                data: item,
+                attrs: ['value', 'events']
+              })
+            "
+            v-on="item.events"
+            :readonly="item.readonly !== undefined ? item.readonly : readonly"
+            @blur="
+              (val, data) => {
+                handleBlur(item, val, data);
+              }
+            "
+            @focus="
+              (val, data) => {
+                handleFocus(item, val, data);
+              }
+            "
+            @edit="
+              (val, data) => {
+                handleChange(item, val, data);
+              }
+            "
+            @btnClick="handleClick"
+            @dataChange="handleDataChange"
+          >
+          </es-data-table>
+          <!-- 动态渲染具体组件 -->
+          <component
+            v-else
+            :is="getComponentName(item.type)"
+            v-bind="
+              handleExclAttribute
+                ? handleExclAttribute({
+                    data: item,
+                    attrs: ['value', 'events']
+                  })
+                : {}
+            "
+            v-on="item.events"
+            v-model="models[item.name]"
+            :readonly="item.readonly !== undefined ? item.readonly : readonly"
+            @change="(val) => $emit('change', item, val)"
+          />
+        </el-form-item>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  name: 'FormTabItemRender',
+  inheritAttrs: false, // 允许将 el-tabs 的属性透传
+  props: {
+    // 这里的 items 对应 JSON 中的 contents 数组，即 Tab Pane 列表
+    items: { type: Array, default: () => [] },
+    models: { type: Object, default: () => ({}) },
+    readonly: Boolean,
+    showLabel: Boolean,
+    labelWidth: String,
+    hides: { type: Array, default: () => [] },
+    // 工具方法
+    handleExclAttribute: Function,
+    getLabel: Function,
+    getRules: Function,
+    handleBlur: Function,
+    handleFocus: Function,
+    handleChange: Function,
+    handleClick: Function,
+    handleDataChange: Function,    
+    getStyle: Function
+  },
+  data() {
+    return {
+      activeName: ''
+    };
+  },
+  mounted() {
+    console.log('this.items', this.items);
+    this.activeName = this.items[0].name;
+    console.log('active', this.activeName);
+  },
+  methods: {
+    getComponentName(type) {
+      const map = {
+        input: 'es-input',
+        select: 'es-select',
+        number: 'es-input-number',
+        radio: 'es-radio-group',
+        checkbox: 'es-checkbox-group',
+        date: 'es-date-picker',
+        table: 'es-data-table',
+        textarea: 'es-input' // 假设 textarea 也是 es-input 带 type="textarea"
+      };
+      return map[type] || 'es-input';
+    },
+    shouldShowLabel(item) {
+      return (
+        item.showLabel !== false &&
+        item.label &&
+        !item.labelHide &&
+        this.showLabel
+      );
+    },
+    getItemLabelWidth(item) {
+      return this.shouldShowLabel(item) ? this.labelWidth : '0';
+    }
+  }
+};
+</script>

package/packages/form/src/main.vue

@@ -744,6 +744,27 @@
                           "
                           v-on="item.events"
                         ></component>
+                        <form-item-renderer
+                          v-else-if="item.type === 'tabs'"
+                          :items="item"
+                          :models="models"
+                          :readonly="readonly"
+                          :show-label="showLabel"
+                          :label-width="labelWidth"
+                          :hides="hides"
+                          :handle-excl-attribute="handleExclAttribute"
+                          :get-label="getLabel"
+                          :get-rules="getRules"
+                          :get-style="getStyle"
+                          :handle-blur="handleBlur"
+                          :handle-focus="handleFocus"
+                          :handle-change="handleChange"
+                          :handle-click="handleClick"
+                          :handle-data-change="handleDataChange"
+                          @change="handleChange"
+                          @blur="handleBlur"
+                          @focus="handleFocus"
+                        />
                         <es-input
                           v-else
                           v-bind="
@@ -1050,6 +1071,7 @@
                                       "
                                       v-on="inline.events"
                                     ></component>
+
                                     <es-input
                                       v-else
                                       v-bind="
@@ -1335,6 +1357,7 @@
                                 "
                                 v-on="inline.events"
                               ></component>
+
                               <es-input
                                 v-else
                                 v-bind="
@@ -1841,6 +1864,27 @@
                     "
                     v-on="item.events"
                   ></component>
+                  <form-item-renderer
+                    v-else-if="item.type === 'tabs'"
+                    :items="item.contents"
+                    :models="models"
+                    :readonly="readonly"
+                    :show-label="showLabel"
+                    :label-width="labelWidth"
+                    :hides="hides"
+                    :handle-excl-attribute="handleExclAttribute"
+                    :get-label="getLabel"
+                    :get-rules="getRules"
+                    :get-style="getStyle"
+                    :handle-blur="handleBlur"
+                    :handle-focus="handleFocus"
+                    :handle-change="handleChange"
+                    :handle-click="handleClick"
+                    :handle-data-change="handleDataChange"
+                    @change="handleChange"
+                    @blur="handleBlur"
+                    @focus="handleFocus"
+                  />
                   <es-input
                     v-else
                     v-bind="
@@ -2466,6 +2510,7 @@ import { debounce } from 'throttle-debounce';
 import util from 'eoss-ui/src/utils/util';
 import rules from 'eoss-ui/src/utils/rules.js';
 const pageView = util.getParams('pageView');
+import FormItemRenderer from './form-tab-item-render.vue';
 export default {
   name: 'EsForm',
   inheritAttrs: false,
@@ -2488,6 +2533,7 @@ export default {
       default: ''
     }
   },
+  components: { FormItemRenderer },
   props: {
     viewCode: {
       type: String,