starfish-form-custom 1.0.19 → 1.0.21

package/src/components/CheckBox/index.vue

@@ -8,7 +8,9 @@
       </el-tooltip>
     </div>
     <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
-      <el-checkbox-group v-model="data[item.data.fieldName]" :class="{'vertical-group': item.data.arrangeMent === 'vertical'}" v-if="!drag && data[item.data.fieldName]" :size="size" :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'">
+      <!-- 只读的时候就只展示文本 -->
+      <span v-if="!drag && data[item.data.fieldName] && item.data.state === 'readonly'">{{ data[item.data.fieldName].join(',') || '--' }}</span>
+      <el-checkbox-group v-model="data[item.data.fieldName]" :class="{'vertical-group': item.data.arrangeMent === 'vertical'}" v-else-if="!drag && data[item.data.fieldName]" :size="size" :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'">
         <el-checkbox v-for="(sitem, sindex) in item.data.itemConfig.items" :key="sindex" :label="sitem.value">{{ sitem.label }}</el-checkbox>
       </el-checkbox-group>
       <el-checkbox-group v-model="item.data.itemConfig.value" :class="{'vertical-group': item.data.arrangeMent === 'vertical'}" v-if="drag" :size="size" :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'">

package/src/components/Date/index.vue

@@ -23,6 +23,8 @@
       ></el-date-picker>
       
       <!-- 实际运行时的组件 -->
+      <!-- 只读的时候就展示文字 -->
+      <span v-if="!drag && item.data.state === 'readonly'">{{ formatReadonlyDate(data[item.data.fieldName], item.data.format) }}</span>
       <el-date-picker 
         v-model="data[item.data.fieldName]" 
         width="240px"
@@ -30,7 +32,7 @@
         :format="item.data.format" 
         :value-format="item.data.format" 
         :placeholder="item.data.placeholder" 
-        v-if="!drag" 
+        v-else-if="!drag" 
         :size="size" 
         :disabled="item.data.state === 'disabled'" 
         :readonly="item.data.state === 'readonly'"
@@ -48,7 +50,7 @@
     nameCn: "日期",
     icon: "icon-24gl-calendar",
     formConfig: getFormConfig("Date", [
-      { fieldName: "default", component: "Date" },
+      { fieldName: "default", component: "DateTime" },
       { fieldName: "placeholder", component: "Text" },
       { fieldName: "format", component: "Selected" },
       { fieldName: "state", component: "Radio" },
@@ -73,9 +75,43 @@
         };
         
         return formatTypeMap[format] || 'date';
+      };
+       // 格式化只读日期显示
+      const formatReadonlyDate = (dateValue: any, format: string) => {
+        if (!dateValue) return '--';
+        
+        // 如果已经是格式化好的字符串，直接返回
+        if (typeof dateValue === 'string') {
+          return dateValue;
+        }
+        
+        // 如果是日期对象，进行格式化
+        if (dateValue instanceof Date) {
+          const year = dateValue.getFullYear();
+          const month = String(dateValue.getMonth() + 1).padStart(2, '0');
+          const day = String(dateValue.getDate()).padStart(2, '0');
+          const hours = String(dateValue.getHours()).padStart(2, '0');
+          const minutes = String(dateValue.getMinutes()).padStart(2, '0');
+          const seconds = String(dateValue.getSeconds()).padStart(2, '0');
+          
+          const formatMap: Record<string, string> = {
+            'YYYY': `${year}`,
+            'YYYY-MM': `${year}-${month}`,
+            'YYYY-MM-DD': `${year}-${month}-${day}`,
+            'YYYY-MM-DD HH': `${year}-${month}-${day} ${hours}`,
+            'YYYY-MM-DD HH:mm': `${year}-${month}-${day} ${hours}:${minutes}`,
+            'YYYY-MM-DD HH:mm:ss': `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+          };
+          
+          return formatMap[format] || `${year}-${month}-${day}`;
+        }
+        
+        // 其他情况返回原始值
+        return String(dateValue);
       };
       return {
-        getPickerType
+        getPickerType,
+        formatReadonlyDate
       };
     },
   });

package/src/components/InputNumber/index.vue

@@ -37,10 +37,12 @@
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
         v-if="drag"
       />
+      <!-- 只读展示文字 -->
+      <span v-if="!drag && item.data.state === 'readonly'">{{ formatReadonlyNumber(data[item.data.fieldName], item.data.precision) }}</span>
       <el-input-number
         v-model="data[item.data.fieldName]"
         width="240px"
-        v-if="!drag"
+        v-else-if="!drag"
         :controls-position="item.data.type == 2 ? 'right' : ''"
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
         :precision="item.data.precision"
@@ -78,7 +80,30 @@ export default defineComponent({
   setup(props) {
     const vm = getCurrentInstance() as ComponentInternalInstance;
     useWatch(props);
+     // 格式化只读数字显示
+    const formatReadonlyNumber = (value: any, precision: number) => {
+      if (value === null || value === undefined || value === '') {
+        return '-';
+      }
+      
+      // 转换为数字
+      const numValue = Number(value);
+      
+      // 检查是否为有效数字
+      if (isNaN(numValue)) {
+        return String(value);
+      }
+      
+      // 如果有精度设置，进行格式化
+      if (precision !== undefined && precision !== null) {
+        return numValue.toFixed(precision);
+      }
+      
+      // 如果没有精度设置，直接返回数字
+      return String(numValue);
+    };
     return {
+      formatReadonlyNumber,
       execFunc(type: string) {
         if (props.item.data.action && props.item.data.action[type]) {
           window.VApp.$Flex.funcExec(props.item.data.action[type], vm.proxy, [

package/src/components/Radio/index.vue

@@ -29,8 +29,9 @@
       class="control"
       :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }"
     >
+      <span v-if="!drag && item.data.state === 'readonly'">{{ data[item.data.fieldName] || '--' }}</span>
       <el-radio-group
-        v-if="!drag"
+        v-else-if="!drag"
         v-model="data[item.data.fieldName]"
         :size="size"
         :class="{'vertical-group': item.data.arrangeMent === 'vertical'}"

package/src/components/Rule/index.vue

@@ -24,11 +24,24 @@
       class="control"
       :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }"
     >
-      <el-collapse
+      <el-dropdown @command="handleDropdown" style="margin-top: 10px">
+        <el-button type="success">
+          新增规则<i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="enum">默认枚举</el-dropdown-item>
+            <el-dropdown-item command="func">自定义函数规则</el-dropdown-item>
+            <el-dropdown-item command="high">高级模式</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+        <el-collapse
         v-if="
           Array.isArray(data[item.data.fieldName]) &&
           data[item.data.fieldName].length > 0
         "
+        style="margin-top: 16px;"
       >
         <el-collapse-item
           :title="itemList.title"
@@ -68,28 +81,9 @@
               >规则表单编辑</el-button
             >
           </div>
-          <el-button
-            type="danger"
-            circle
-            @click="deleteRule(index)"
-            style="margin-left: 10px"
-          >
-            <el-icon><Delete /></el-icon>
-          </el-button>
+          <el-icon @click="deleteRule(index)" style="margin-left: 10px" :size="14"><Delete /></el-icon>
         </el-collapse-item>
       </el-collapse>
-      <el-dropdown @command="handleDropdown" style="margin-top: 10px">
-        <el-button type="success">
-          新增规则<i class="el-icon-arrow-down el-icon--right"></i>
-        </el-button>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item command="enum">默认枚举</el-dropdown-item>
-            <el-dropdown-item command="func">自定义函数规则</el-dropdown-item>
-            <el-dropdown-item command="high">高级模式</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
     </div>
     <CustomDialog ref="codeMyDialog">
       <div

package/src/components/Selected/index.vue

@@ -43,11 +43,12 @@
           :value="items.value"
         />
       </el-select>
+      <span v-if="!drag && item.data.state === 'readonly'">{{ data[item.data.fieldName] || '--' }}</span>
       <el-select
         v-model="data[item.data.fieldName]"
         width="240px"
         :placeholder="item.data.placeholder"
-        v-if="!drag"
+        v-else-if="!drag"
         :size="size"
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
         @focus="execFunc('onFocus')"

package/src/components/Selecteds/index.vue

@@ -44,11 +44,12 @@
           :value="items.value"
         />
       </el-select>
+      <span v-if="!drag && item.data.state === 'readonly'">{{ data[item.data.fieldName].join(',') || '--' }}</span>
       <el-select
         v-model="data[item.data.fieldName]"
         width="240px"
         :placeholder="item.data.placeholder"
-        v-if="!drag"
+        v-else-if="!drag"
         multiple
         :size="size"
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"

package/src/components/Text/index.vue

@@ -41,11 +41,12 @@
         :minlength="item.data.minLength"
         :class="'input-' + item.data.align"
       />
+      <span v-if="!drag && item.data.state === 'readonly'">{{ data[item.data.fieldName] || '--' }}</span>
       <el-input
         v-model="data[item.data.fieldName]"
         width="200px"
         :placeholder="item.data.placeholder"
-        v-if="!drag"
+        v-else-if="!drag"
         :size="size"
         :disabled="item.data.state === 'disabled'"
         :readonly="item.data.state === 'readonly'"

package/src/components/TextArea/index.vue

@@ -40,9 +40,10 @@
         :autosize="item.data.autoHeight"
         :size="size"
       />
+      <span v-if="!drag && item.data.state === 'readonly'">{{ data[item.data.fieldName] || '--' }}</span>
       <el-input
         type="textarea"
-        v-if="!drag"
+        v-else-if="!drag"
         v-model="data[item.data.fieldName]"
         :placeholder="item.data.placeholder"
         :disabled="item.data.state === 'disabled'"

package/src/layout/grid.vue

@@ -6,7 +6,7 @@
           <draggable class="draggable-box" animation="300" ghostClass="itemGhost" v-model="colItem.list" @add="addControl($event, index)" group="starfish-form" @choose="chooseClick($event, index)" item-key="id" @update="changePos($event, index)">
             <template #item="{ element, index }">
               <Shape v-if="element.data" :active="currentId == element.id" :currentId="element.id" :currentIndex="index" :list="colItem.list">
-                <component :is="element.ControlType" :drag="true" :item="element" :data="{}"></component>
+                <component :is="element.ControlType" :drag="true" size="default" :item="element" :data="{}"></component>
               </Shape>
             </template>
           </draggable>
@@ -16,10 +16,10 @@
         <el-col class="grid-col" v-for="(colItem, index) in item.data.columns" :key="index" :span="colItem.span">
           <template v-for="listItem in colItem.list" >
             <el-form-item :prop="listItem.data.fieldName" :key="listItem.id" v-if="!listItem.layout">
-              <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false"></component>
+              <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" size="default" :data="data || '{}'" :drag="false"></component>
             </el-form-item>
             <template v-else>
-              <component ref="controlObj" @change="$emit('change')" :key="listItem.id" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false"></component>
+              <component ref="controlObj" @change="$emit('change')" :key="listItem.id" :is="listItem.ControlType" size="default" :item="listItem" :data="data || '{}'" :drag="false"></component>
             </template>
           </template>
         </el-col>

package/src/layout/table.vue

@@ -6,17 +6,17 @@
           <template v-if="drag">
             <draggable class="draggable-box" animation="300" ghostClass="itemGhost" v-model="tdItem.list" @add="addControl($event, tdItem.list, index, tdIndex)" group="starfish-form" @choose="chooseClick($event, tdItem.list)" item-key="id" @update="changePos($event, tdItem.list)">
               <template #item="{ element, index }">
-                <Shape v-if="element.data" :active="currentId == element.id" :currentIndex="index" :currentId="element.id" :len="tdItem.list.length" :item="element"> <component :is="element.ControlType" :drag="true" :item="element" :data="{}"></component></Shape>
+                <Shape v-if="element.data" :active="currentId == element.id" :currentIndex="index" :currentId="element.id" :len="tdItem.list.length" :item="element"> <component :is="element.ControlType" size="default" :drag="true" :item="element" :data="{}"></component></Shape>
               </template>
             </draggable>
           </template>
           <template v-else-if="!drag && tdItem.list.length > 0">
             <template v-for="listItem in tdItem.list">
               <el-form-item :prop="listItem.data.fieldName"  :key="listItem.id" v-if="!listItem.layout">
-                <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
+                <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" size="default" :drag="false" ></component>
               </el-form-item>
               <template v-else>
-                <component ref="controlObj" @change="$emit('change')"  :key="listItem.id" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
+                <component ref="controlObj" @change="$emit('change')" size="default"  :key="listItem.id" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
               </template>
             </template>
           </template>

package/src/utils/fieldConfig.ts

@@ -551,7 +551,7 @@ function getMoren(
         placeholder: "",
         showRule: "{}",
         required: false,
-        rule: "[]",
+        rule: "[]"
       },
     },
     placeholder: {
@@ -968,6 +968,7 @@ interface Config {
   fieldName: string;
   component: string;
   label?: string;
+  format?: string;
 }
 
 interface FormConfigReturn {