starfish-form-custom 1.0.46 → 1.0.48

package/src/components/RichText/index.vue

@@ -1,26 +1,49 @@
 <template>
-  <div class="starfish-formitem" 
-    :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}" 
+  <div
+    class="starfish-formitem"
+    :class="{
+      formCover: drag,
+      'starfish-vertical': labelalign != 'top',
+      [item.data.csslist?.join(' ')]: !!item.data.csslist,
+    }"
     :data-control-type="item.ControlType"
     :data-id="item.id"
+  >
+    <div
+      class="label"
+      :class="'label_' + labelalign"
+      :style="{ width: labelWidth + 'px' }"
     >
-    <div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
-      <span v-if="item.data.required && !readonly && item.data.state !== 'readonly'" class="item_require">*</span>
-      <label>{{ item.data.label }}{{suffix}}</label>
-      <el-tooltip v-if="item.data.tip && !readonly" class="item" effect="dark" :content="item.data.tip" placement="top">
+      <span
+        v-if="item.data.required && !readonly && item.data.state !== 'readonly'"
+        class="item_require"
+        >*</span
+      >
+      <label>{{ item.data.label }}{{ suffix }}</label>
+      <el-tooltip
+        v-if="item.data.tip && !readonly"
+        class="item"
+        effect="dark"
+        :content="item.data.tip"
+        placement="top"
+      >
         <span class="tip iconfontui icon-tishi"></span>
       </el-tooltip>
     </div>
-    <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
+    <div
+      class="control"
+      :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }"
+    >
       <div class="rich-text-editor" @click.stop>
-        <QuillEditor 
+        <QuillEditor
           ref="quillEditorRef"
-          theme="snow" 
-          :content="content" 
+          theme="snow"
+          v-model:content="internalContent"
           @update:content="handleContentChange"
-          toolbar="full" 
-          :read-only="isReadonly" 
-          class="editor-content" 
+          @ready="onEditorReady"
+          :toolbar="toolbarOptions"
+          :read-only="isReadonly || drag"
+          class="editor-content"
         />
       </div>
     </div>
@@ -28,53 +51,185 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from "vue";
-import { QuillEditor } from '@vueup/vue-quill'
-import '@vueup/vue-quill/dist/vue-quill.snow.css';
+import { defineComponent, ref, computed, watch, nextTick } from "vue";
+import { QuillEditor } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { getFormConfig } from "../../utils/fieldConfig";
 import fieldProps from "../../utils/fieldProps";
 import { useWatch } from "../../utils/customHooks";
+import type { Delta } from "@vueup/vue-quill";
 
 export default defineComponent({
   ControlType: "RichText",
   nameCn: "富文本",
   icon: "icon-textEdit",
-  formConfig: getFormConfig("RichText", [{ fieldName: "state", component: "Radio" }]),
+  formConfig: getFormConfig("RichText", [
+    { fieldName: "state", component: "Radio" },
+  ]),
   props: {
     ...fieldProps,
   },
   components: {
-    QuillEditor
+    QuillEditor,
   },
   setup(props) {
     useWatch(props);
-    const quillEditorRef = ref();
-    const content = ref(props.data[props.item.data.fieldName] || props.item.data.default || '');
-    
-    // 计算只读状态
-    const isReadonly = computed(() => 
-      props.readonly || props.item.data.state === 'readonly'
+    const quillEditorRef = ref<InstanceType<typeof QuillEditor>>();
+    const internalContent = ref<string | Delta | null>(null);
+    const isEditorReady = ref(false);
+
+    const toolbarOptions = [
+      ["bold", "italic", "underline", "strike"],
+      ["blockquote", "code-block"],
+      ["link", "image", "formula"],
+      [{ header: 1 }, { header: 2 }],
+      [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+      [{ script: "sub" }, { script: "super" }],
+      [{ indent: "-1" }, { indent: "+1" }],
+      [{ direction: "rtl" }],
+      [{ size: ["small", false, "large", "huge"] }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ color: [] }, { background: [] }],
+      [{ font: [] }],
+      [{ align: [] }],
+      ["clean"],
+    ];
+
+    const isReadonly = computed(
+      () => props.readonly || props.item.data.state === "readonly"
     );
-    
+
+    // 编辑器就绪回调
+    const onEditorReady = () => {
+      isEditorReady.value = true;
+      initContentFromProps();
+    };
+
+    // 从 props 初始化内容（支持字符串和 Delta 对象）
+    const initContentFromProps = () => {
+      if (!isEditorReady.value) return;
+
+      const fieldName = props.item.data.fieldName;
+      const rawValue = props.data[fieldName];
+      const defaultValue = props.item.data.default || "";
+
+      // 处理空值
+      if (rawValue === undefined || rawValue === null || rawValue === "") {
+        internalContent.value = defaultValue;
+        return;
+      }
+
+      // 情况1：如果是 Delta 对象（{ ops: [...] }）
+      if (
+        rawValue &&
+        typeof rawValue === "object" &&
+        Array.isArray(rawValue.ops)
+      ) {
+        internalContent.value = rawValue;
+        return;
+      }
+
+      // 情况2：如果是字符串
+      if (typeof rawValue === "string") {
+        // 尝试解析是否为 JSON 字符串的 Delta
+        if (rawValue.trim().startsWith("{") || rawValue.trim().startsWith("[")) {
+          try {
+            const parsed = JSON.parse(rawValue);
+            if (parsed && Array.isArray(parsed.ops)) {
+              internalContent.value = parsed;
+            } else {
+              // 不是 Delta JSON，当作普通 HTML 字符串
+              internalContent.value = rawValue;
+            }
+          } catch {
+            // 解析失败，当作普通 HTML 字符串
+            internalContent.value = rawValue;
+          }
+        } else {
+          // 普通字符串
+          internalContent.value = rawValue;
+        }
+        return;
+      }
+
+      // 情况3：其他类型，使用默认值
+      internalContent.value = defaultValue;
+    };
+
     // 处理内容变化
-    const handleContentChange = (value: string) => {
-      content.value = value;
-      // 更新父组件数据
-      props.data[props.item.data.fieldName] = value;
+    const handleContentChange = (value: string | Delta) => {
+      internalContent.value = value;
+
+      if (!quillEditorRef.value) return;
+
+      const quill = quillEditorRef.value.getQuill();
+      if (!quill) return;
+
+      const fieldName = props.item.data.fieldName;
+      const htmlContent = quill.root.innerHTML;
+      props.data[fieldName] = htmlContent;
     };
-    
-    // 监听外部数据变化
-    watch(() => props.data[props.item.data.fieldName], (newValue) => {
-      if (newValue !== content.value) {
-        content.value = newValue || '';
+
+    // 监听外部数据变化（父组件更新时）
+    watch(
+      () => props.data[props.item.data.fieldName],
+      (newValue) => {
+        // 避免循环更新
+        if (!isEditorReady.value) return;
+
+        // 转换为内部表示
+        let newInternalValue: string | Delta | null = null;
+
+        if (newValue === undefined || newValue === null || newValue === "") {
+          newInternalValue = props.item.data.default || "";
+        } else if (
+          newValue &&
+          typeof newValue === "object" &&
+          Array.isArray(newValue.ops)
+        ) {
+          // Delta 对象
+          newInternalValue = newValue;
+        } else if (typeof newValue === "string") {
+          // 字符串（可能是 HTML 或 JSON 字符串）
+          if (newValue.trim().startsWith("{") || newValue.trim().startsWith("[")) {
+            try {
+              const parsed = JSON.parse(newValue);
+              if (parsed && Array.isArray(parsed.ops)) {
+                newInternalValue = parsed;
+              } else {
+                newInternalValue = newValue;
+              }
+            } catch {
+              newInternalValue = newValue;
+            }
+          } else {
+            newInternalValue = newValue;
+          }
+        }
+        // 只有值真正变化时才更新
+        if (JSON.stringify(newInternalValue) !== JSON.stringify(internalContent.value)) {
+          internalContent.value = newInternalValue;
+        }
+      },
+      { immediate: true }
+    );
+
+    // 监听编辑器就绪状态
+    watch(isEditorReady, (ready) => {
+      if (ready) {
+        nextTick(() => {
+          initContentFromProps();
+        });
       }
     });
-    
+
     return {
-      content,
+      content: internalContent,
       quillEditorRef,
       handleContentChange,
-      isReadonly
+      onEditorReady,
+      toolbarOptions,
+      isReadonly,
     };
   },
 });
@@ -87,11 +242,9 @@ export default defineComponent({
   z-index: 1;
 }
 
-// 确保编辑器层级
 :deep(.editor-content) {
   min-height: 200px;
-  
-  // 确保工具栏正常显示
+
   .ql-toolbar {
     z-index: 100;
     background: white;
@@ -100,7 +253,7 @@ export default defineComponent({
     border-top-right-radius: 4px;
     position: relative;
   }
-  
+
   .ql-container {
     border: 1px solid #ccc;
     border-top: none;
@@ -111,7 +264,6 @@ export default defineComponent({
   }
 }
 
-// 防止拖拽区域覆盖编辑器
 :deep(.shape) {
   .rich-text-editor {
     pointer-events: auto !important;

package/src/components/Rule/rules.js

@@ -23,9 +23,14 @@ const validateNumberD2 = `(rule, value, callback) => {
 // 电话号码校验规则
 const validatePhone = `(rule, value, callback) => {
     if (value === "" || value == null) {
-      callback(new Error("请输入"));
-    } else if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)) {
-      callback(new Error("请输入正确的电话号码"));
+      callback(new Error("请输入电话号码"));
+      return;
+    }
+    var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
+    
+    if (!re.test(value)) {
+      callback(new Error("请输入正确的11位手机号码"));
+      return;
     }
     callback();
   }`;
@@ -34,7 +39,7 @@ const validatePhone = `(rule, value, callback) => {
 const validateIdCard = `(rule, value, callback) => {
     if (value === "" || value == null) {
       callback(new Error("请输入"));
-    } else if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
+    } else if (!/^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$/.test(value)) {
       callback(new Error("请输入正确的身份证号"));
     }
     callback();

package/src/components/Selected/index.vue

@@ -33,6 +33,7 @@
         style="width: 320px;"
         :placeholder="item.data.placeholder"
         v-if="drag"
+        clearable
         :size="size"
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
       >
@@ -43,13 +44,17 @@
           :value="items.value"
         />
       </el-select>
-      <span v-if="!drag && (item.data.state === 'readonly' || readonly)">{{ data[item.data.fieldName] || '--' }}</span>
+      <!-- 只读状态显示对应的 label -->
+      <span v-if="!drag && (item.data.state === 'readonly' || readonly)">
+        {{ getDisplayText() }}
+      </span>
       <el-select
         v-model="data[item.data.fieldName]"
         style="width: 320px;"
         :placeholder="item.data.placeholder"
         v-else-if="!drag"
         :size="size"
+        clearable
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
         @focus="execFunc('onFocus')"
         @blur="execFunc('onBlur')"
@@ -64,6 +69,7 @@
     </div>
   </div>
 </template>
+
 <script lang="ts">
 import {
   defineComponent,
@@ -73,6 +79,7 @@ import {
 import { getFormConfig } from "../../utils/fieldConfig";
 import fieldProps from "../../utils/fieldProps";
 import { useWatch } from "../../utils/customHooks";
+
 export default defineComponent({
   ControlType: "Selected", // 必须与文件名匹配
   nameCn: "选择器",
@@ -99,5 +106,22 @@ export default defineComponent({
       },
     };
   },
+  methods: {
+    getDisplayText() {
+      const fieldValue = this.data[this.item.data.fieldName];
+      const items = this.item.data.itemConfig?.items || [];
+      
+      // 如果没有值，显示默认的 "--"
+      if (fieldValue === undefined || fieldValue === null || fieldValue === '') {
+        return this.item.data.placeholder || '--';
+      }
+      
+      // 查找对应的 label
+      const selectedItem = items.find(item => item.value === fieldValue);
+      
+      // 如果找到对应的 label，显示 label，否则显示原始值
+      return selectedItem ? selectedItem.label : fieldValue;
+    }
+  }
 });
-</script>
+</script>

package/src/components/Selecteds/index.vue

@@ -44,8 +44,9 @@
           :value="items.value"
         />
       </el-select>
+      <!-- 只读状态显示对应的 label -->
       <span v-else-if="!drag && (item.data.state === 'readonly' || readonly)">
-        {{ getReadonlyDisplayValue() }}
+        {{ getDisplayText() }}
       </span>
       <el-select
         v-else
@@ -78,6 +79,7 @@ import {
 import { getFormConfig } from "../../utils/fieldConfig";
 import fieldProps from "../../utils/fieldProps";
 import { useWatch } from "../../utils/customHooks";
+
 export default defineComponent({
   ControlType: "Selecteds", // 必须与文件名匹配
   nameCn: "多选择器",
@@ -95,27 +97,6 @@ export default defineComponent({
     const vm = getCurrentInstance() as ComponentInternalInstance;
     useWatch(props);
     
-    const getReadonlyDisplayValue = () => {
-      try {
-        // 优先使用 data 中的值
-        const fieldValue = props.data[props.item.data.fieldName];
-        if (Array.isArray(fieldValue)) {
-          return fieldValue.length > 0 ? fieldValue.join(',') : '--';
-        }
-        
-        // 如果 data 中没有值，使用 itemConfig 中的默认值
-        const configValue = props.item.data.itemConfig?.value;
-        if (Array.isArray(configValue)) {
-          return configValue.length > 0 ? configValue.join(',') : '--';
-        }
-        
-        return '--';
-      } catch (error) {
-        console.error('Error getting readonly display value:', error);
-        return '--';
-      }
-    };
-
     return {
       execFunc(type: string) {
         if (props.item.data.action && props.item.data.action[type]) {
@@ -124,8 +105,27 @@ export default defineComponent({
           ]);
         }
       },
-      getReadonlyDisplayValue
     };
   },
+  methods: {
+    getDisplayText() {
+      const fieldValue = this.data[this.item.data.fieldName];
+      const items = this.item.data.itemConfig?.items || [];
+      
+      // 如果没有值，显示默认的 "--"
+      if (!fieldValue || !Array.isArray(fieldValue) || fieldValue.length === 0) {
+        return this.item.data.placeholder || '--';
+      }
+      
+      // 根据选中的 value 数组查找对应的 label
+      const selectedLabels = fieldValue.map(value => {
+        const item = items.find(item => item.value === value);
+        return item ? item.label : value;
+      });
+      
+      // 返回用逗号分隔的 label 字符串
+      return selectedLabels.join(', ');
+    }
+  }
 });
 </script>

package/src/components/Switch/index.vue

@@ -28,26 +28,32 @@
       class="control"
       :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }"
     >
+      <!-- 只读状态显示是或否 -->
+      <span v-if="!drag && (item.data.state === 'readonly' || readonly)">
+        {{ getDisplayText() }}
+      </span>
       <el-switch
+        v-else-if="drag"
         v-model="item.data.default"
-        v-if="drag"
         :size="size"
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
       />
       <el-switch
+        v-else
         v-model="data[item.data.fieldName]"
-        v-if="!drag"
         :size="size"
         :disabled="item.data.state === 'disabled' || item.data.state === 'readonly'"
       />
     </div>
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent } from "vue";
 import { getFormConfig } from "../../utils/fieldConfig";
 import fieldProps from "../../utils/fieldProps";
 import { useWatch } from "../../utils/customHooks";
+
 export default defineComponent({
   ControlType: "Switch", // 必须与文件名匹配
   nameCn: "开关",
@@ -63,5 +69,18 @@ export default defineComponent({
   setup(props) {
     useWatch(props);
   },
+  methods: {
+    getDisplayText() {
+      const fieldValue = this.data[this.item.data.fieldName];
+      
+      // 如果没有值，显示默认的 "--"
+      if (fieldValue === undefined || fieldValue === null) {
+        return '--';
+      }
+      
+      // 根据布尔值返回是或否
+      return fieldValue ? '是' : '否';
+    }
+  }
 });
-</script>
+</script>