fix: 流程样式优化

src/views/flow/stFormDesign/packages/StFormDesign/module/formItemProperties.vue

@@ -80,24 +80,24 @@
               placeholder='最大高度'
           />
         </a-form-item>
-        <a-form-item v-if="typeof options.width !== 'undefined'&&!isInBatchTable" label='宽度'>
-          <a-input placeholder='请输入' v-model:value='options.width'/>
-        </a-form-item>
-        <a-tooltip placement="topLeft">
-          <template #title>
-            <div>示例：300px</div>
-            <div>※子表卡片样式：通过设置300px的整数倍来设置宽度（300px为默认每行三列，600px占两列，900px将占一整行）</div>
-          </template>
-          <a-form-item v-if="isInBatchTable">
-            <template #label>
-              <span style="display: inline-flex; align-items: center;">
+<!--        <a-form-item v-if="typeof options.width !== 'undefined'&&!isInBatchTable" label='宽度'>-->
+<!--          <a-input placeholder='请输入' v-model:value='options.width'/>-->
+<!--        </a-form-item>-->
+        <a-form-item v-if="isInBatchTable">
+          <template #label>
+            <span style="display: inline-flex; align-items: center;">
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>※子表列表样式示例：300px</div>
+                  <div>※子表卡片样式：通过设置300px的整数倍来设置宽度（300px为默认值，即每行三列，600px占两列，900px占一整行）</div>
+                </template>
                 <QuestionCircleOutlined style="margin-right: 4px;"/>
-                宽度
-              </span>
-            </template>
-            <a-input placeholder="请输入" v-model:value="options.childWidth"/>
-          </a-form-item>
-        </a-tooltip>
+              </a-tooltip>
+              宽度
+            </span>
+          </template>
+          <a-input placeholder="请输入" v-model:value="options.childWidth"/>
+        </a-form-item>
 
         <a-form-item v-if="typeof options.height !== 'undefined'" label='高度'>
           <a-input-number v-model:value='options.height'/>
@@ -351,13 +351,26 @@
             "
           />
         </a-form-item>
-        <!-- 修改html -->
-        <a-form-item v-if="selectItem.type === 'html'" label='默认值'>
+        <a-form-item v-if="selectItem.type === 'html'">
+          <template #label>
+            <span style="display: inline-flex; align-items: center;">
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  <div>自定义组件示例：</div>
+                  <div >&lt;div id=&quot;custom_0&quot;&gt;&lt;/div&gt;</div>
+                  <div >共有：custom_0到custom_9</div>
+                </template>
+                <QuestionCircleOutlined style="margin-right: 4px;"/>
+              </a-tooltip>
+              自定义组件/html值
+            </span>
+          </template>
           <a-textarea
-              v-model:value='options.defaultValue'
-              :autoSize='{ minRows: 4, maxRows: 8 }'
+              v-model:value="options.defaultValue"
+              :autoSize="{ minRows: 4, maxRows: 8 }"
           />
         </a-form-item>
+
         <a-form-item
             v-if="typeof options.format !== 'undefined'"
             label='时间格式'
@@ -699,6 +712,9 @@ import JsModal from './jsModal.vue'
 import cloneDeep from 'lodash.clonedeep';
 
 function hasBatchParent(code, jsonData) {
+  if (code.indexOf('html_')>=0){
+    return false
+  }
   // 遍历jsonData中的每个元素
   for (const item of jsonData) {
     // 检查当前元素是否为batch类型

src/views/flow/stFormDesign/packages/StFormDesign/module/formNode.vue

@@ -8,7 +8,7 @@
       :class="{ active: record.key === selectItem.key }"
   >
     <div class="form-item-box">
-      <StFormItem :formConfig="config" :formData='{}' :record="record" :childTableFieldRecord='childTableFieldRecord'/>
+      <StFormItem :formConfig="config" :formData='{}' :record="record" :childTableFieldRecord='childTableFieldRecord' :isDesign="true"/>
     </div>
     <div
         v-if="!hideModel"

src/views/flow/stFormDesign/packages/StFormItem/index.vue

@@ -161,7 +161,8 @@
       </div>
     </a-form-item> -->
     <!-- html -->
-    <div :id="record.key" v-else-if="record.type === 'html'" v-html="record.options.defaultValue"></div>
+    <div :id="record.key" v-else-if="record.type === 'html'"
+         v-html="getHtml(record.options.defaultValue)"></div>
     <!-- 弹出框 -->
     <PopUpQuery v-else-if="record.type === 'popUpSelect'" :options="computedOptions" :dynamicData="dynamicData"
                 :disabled="disabled || record.options.disabled" :readonly="record.options.readonly"
@@ -237,6 +238,11 @@ export default {
     instanceID: {
       type: String,
       default: false,
+    },
+    //表单设计界面
+    isDesign: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
@@ -403,6 +409,17 @@ export default {
       // 传递change事件
       this.$emit("change", value, key, record, tableInfo);
     },
+    getHtml(value) {
+      if (this.isDesign == true && value.indexOf('custom_') >= 0) {
+        for (let i = 0; i < 100; i++) {
+          if (value.indexOf('custom_' + i) >= 0) {
+            return '<div style="font-size: 16px;font-weight: 800;color: #1677ff;border: 1px dashed #cccccc;display: flex;justify-content: center; border-radius: 5px;">自定义组件_' + i + '</div>'
+          }
+        }
+      } else {
+        return value
+      }
+    },
   },
 };
 </script>