starfish-form-custom 1.0.18 → 1.0.20

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

@@ -30,7 +30,7 @@
     >
       <el-input
         v-model="item.data.default"
-        width="240px"
+        width="200px"
         :placeholder="item.data.placeholder"
         v-if="drag"
         :size="size"
@@ -39,17 +39,20 @@
         :readonly="item.data.state === 'readonly'"
         :maxlength="item.data.maxLength"
         :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="240px"
+        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'"
         :maxlength="item.data.maxLength"
         :minlength="item.data.minLength"
+        :class="'input-' + item.data.align"
         clearable
         @focus="execFunc('onFocus')"
         @blur="execFunc('onBlur')"
@@ -76,6 +79,8 @@ export default defineComponent({
     { fieldName: "maxLength", component: "InputNumber" },
     { fieldName: "minLength", component: "InputNumber" },
     { fieldName: "state", component: "Radio" },
+    { fieldName: "align", component: "Radio" },
+    { fieldName: "rule", component: "Rule" },
   ]),
   actionType: ["onChange", "onFocus", "onBlur"],
   props: {

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/styles/formedit.scss

@@ -42,14 +42,29 @@
           flex-direction: column;
           align-items: flex-start;
         }
+        .input-left {
+          .el-input__inner {
+            text-align: left;
+          }
+        }
+        .input-right {
+          .el-input__inner {
+            text-align: right;
+          }
+        }
+        .input-center {
+          .el-input__inner {
+            text-align: center;
+          }
+        }
         .el-input.el-input--default.el-input--suffix,
         .el-select.el-select--default,
         .el-input-number.el-input-number--default,
         .el-input.el-input--default.el-date-editor.el-date-editor--date {
-          width: 240px;
+          width: 200px;
         }
         .el-input__wrapper {
-          width: 220px;
+          width: 200px;
         }
       }
     }

package/src/utils/fieldConfig.ts

@@ -27,7 +27,7 @@ export interface fields {
   /**
    * 校验规则
    */
-  // rule: string;
+  rule?: string;
   /**
    * 默认内容
    */
@@ -171,6 +171,7 @@ const fieldsMap: any = {
     maxLength: 100,
     minLength: 0,
     state: "normal", // 状态：normal, disabled, readonly
+    align: 'left'
   },
   Info: {
     fieldName: "",
@@ -529,7 +530,9 @@ type fieldMap =
   | "autoHeight"
   | "format"
   | "precision"
-  | "arrangeMent";
+  | "arrangeMent"
+  | "align"
+  | "rule";
 
 type morenFields = Partial<Record<fieldMap, FormConfig>>;
 
@@ -548,7 +551,7 @@ function getMoren(
         placeholder: "",
         showRule: "{}",
         required: false,
-        rule: "[]",
+        rule: "[]"
       },
     },
     placeholder: {
@@ -563,6 +566,18 @@ function getMoren(
         rule: "[]",
       },
     },
+    rule: {
+      ControlType: "Rule",
+      data: {
+        fieldName: "rule",
+        tip: "",
+        label: "校验规则",
+        showRule: "{}",
+        required: false,
+        rule: "[]",
+        default: "[]",
+      },
+    },
     precision: {
       ControlType: "InputNumber",
       data: {
@@ -622,6 +637,26 @@ function getMoren(
         },
       },
     },
+    align: {
+      ControlType: "Radio",
+      data: {
+        fieldName: "align",
+        tip: "",
+        label: "对齐方式",
+        placeholder: "",
+        showRule: "{}",
+        required: false,
+        rule: "[]",
+        itemConfig: {
+          value: "left",
+          items: [
+            { label: "左", value: "left" },
+            { label: "中", value: "center" },
+            { label: "右", value: "right" },
+          ],
+        },
+      },
+    },
     arrangeMent: {
       ControlType: "Radio",
       data: {
@@ -933,6 +968,7 @@ interface Config {
   fieldName: string;
   component: string;
   label?: string;
+  format?: string;
 }
 
 interface FormConfigReturn {