fix: 流程子表，卡片样式不触发十件

src/views/flow/stFormDesign/packages/StBatch/batch.vue

@@ -16,15 +16,30 @@
       >
         <template #headerCell="{ column }">
           <div>
-          <span
-              v-if="
+            <a-tooltip  placement="topLeft">
+              <div>
+                       <span
+                           v-if="
               record.list.find((item) => item.model == column.dataIndex) &&
               record.list.find((item) => item.model == column.dataIndex).rules[0].required
             "
-              style="color: #ff4d4f; margin-right: 4px"
-          >*</span
-          >
-            <span>{{ column.title }}</span>
+                           style="color: #ff4d4f; margin-right: 4px"
+                       >*</span
+                       >
+                <span>{{ column.title }}</span>
+                <span v-if='
+              record.list.find((item) => item.model == column.dataIndex) &&
+              record.list.find((item) => item.model == column.dataIndex).help' style="margin-left: 4px">
+              <QuestionCircleOutlined/>
+            </span>
+              </div>
+              <template #title v-if=" record.list.find((item) => item.model == column.dataIndex) &&
+              record.list.find((item) => item.model == column.dataIndex).help">
+                {{ record.list.find((item) => item.model == column.dataIndex).help }}
+              </template>
+            </a-tooltip>
+
+
           </div>
         </template>
         <template #bodyCell="scope">
@@ -96,7 +111,7 @@
           :pagination="pagination"
           :current-table-data="currentTableData"
           @removeDomain="removeDomain"
-          @handleInput="handleInput"
+          @input="handleInput"
           ref="stTableCardRef"
       />
 

src/views/flow/stFormDesign/packages/StBatch/module/StFormModelItem.vue

@@ -2,8 +2,8 @@
  * @Description: 传入record数据，通过判断record.type，来渲染对应的组件
  -->
 <template>
-  <a-form-item  :class="{ 'red-label': record?.options?.requiredFirst ||record?.rules?.find(f=>f.required)}"
-    v-if="
+  <a-form-item :class="{ 'red-label': record?.options?.requiredFirst ||record?.rules?.find(f=>f.required)}"
+               v-if="
       [
         'input',
         'textarea',
@@ -24,115 +24,115 @@
         'deptAndPersonSelect',
       ].includes(record.type)
     "
-    :name="['domains', rowIndex, record.model]"
-    :rules='record.rules'
+               :name="['domains', rowIndex, record.model]"
+               :rules='record.rules'
   >
     <!-- 多行文本 -->
     <a-textarea
-      :style='`width:${record.options.width}`'
-      v-if="record.type === 'textarea'"
-      :autoSize='{
+        :style='`width:${record.options.width}`'
+        v-if="record.type === 'textarea'"
+        :autoSize='{
         minRows: record.options.minRows,
         maxRows: record.options.maxRows
       }'
-      :disabled='record.options.disabled || parentDisabled'
-      :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
-      :allowClear='record.options.clearable'
-      :maxLength='record.options.maxLength'
-      :rows='4'
-      @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
-      v-model:value='domains[rowIndex][record.model]'
+        :disabled='record.options.disabled || parentDisabled'
+        :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
+        :allowClear='record.options.clearable'
+        :maxLength='record.options.maxLength'
+        :rows='4'
+        @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
+        v-model:value='domains[rowIndex][record.model]'
     />
     <!-- 弹出框 -->
     <PopUpQueryChild
-      v-else-if="record.type === 'popUpSelect'"
-      :options='computedOptions'
-      :disabled='parentDisabled ||record.options.disabled'
-      :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
-      @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
-      :formConfig='formConfig'
-      :rowData='domains[rowIndex]'
-      :childTableFieldRecord='childTableFieldRecord'
-      :record='record'
-      :formData='formData'
-      :content='value'
+        v-else-if="record.type === 'popUpSelect'"
+        :options='computedOptions'
+        :disabled='parentDisabled ||record.options.disabled'
+        :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
+        @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
+        :formConfig='formConfig'
+        :rowData='domains[rowIndex]'
+        :childTableFieldRecord='childTableFieldRecord'
+        :record='record'
+        :formData='formData'
+        :content='value'
     />
     <!-- 单选框 -->
     <a-radio-group
-      v-else-if="record.type === 'radio'"
-      :options='computedOptions'
-      :disabled='record.options.disabled || parentDisabled'
-      :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
-      v-model:value='domains[rowIndex][record.model]'
-      v-model:checked='domains[rowIndex][record.model]'
-      @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
+        v-else-if="record.type === 'radio'"
+        :options='computedOptions'
+        :disabled='record.options.disabled || parentDisabled'
+        :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
+        v-model:value='domains[rowIndex][record.model]'
+        v-model:checked='domains[rowIndex][record.model]'
+        @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
     />
 
     <!-- 多选框 -->
     <a-checkbox-group
-      v-else-if="record.type === 'checkbox'"
-      :options='computedOptions'
-      :disabled='record.options.disabled || parentDisabled'
-      :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
-      v-model:value='domains[rowIndex][record.model]'
-      @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
+        v-else-if="record.type === 'checkbox'"
+        :options='computedOptions'
+        :disabled='record.options.disabled || parentDisabled'
+        :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
+        v-model:value='domains[rowIndex][record.model]'
+        @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
     />
 
     <!-- 滑块 -->
     <div
-      v-else-if="record.type === 'slider'"
-      :style='`width:${record.options.width}`'
-      class='slider-box'
+        v-else-if="record.type === 'slider'"
+        :style='`width:${record.options.width}`'
+        class='slider-box'
     >
       <div class='slider'>
         <a-slider
-          :disabled='record.options.disabled || parentDisabled'
-          :min='record.options.min'
-          :max='record.options.max'
-          :step='record.options.step'
-          v-model:value='domains[rowIndex][record.model]'
-          @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
+            :disabled='record.options.disabled || parentDisabled'
+            :min='record.options.min'
+            :max='record.options.max'
+            :step='record.options.step'
+            v-model:value='domains[rowIndex][record.model]'
+            @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
         />
       </div>
       <div class='number' v-if='record.options.showInput'>
         <a-input-number
-          style='width:100%'
-          :disabled='record.options.disabled || parentDisabled'
-          :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
-          :min='record.options.min'
-          :max='record.options.max'
-          :step='record.options.step'
-          v-model:value='domains[rowIndex][record.model]'
-          @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
+            style='width:100%'
+            :disabled='record.options.disabled || parentDisabled'
+            :placeholder="(record.options.disabled || parentDisabled)? '' : record.options.placeholder"
+            :min='record.options.min'
+            :max='record.options.max'
+            :step='record.options.step'
+            v-model:value='domains[rowIndex][record.model]'
+            @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: domains[rowIndex], rows: domains, colIndex: tableScope.index || colIndex })'
         />
       </div>
     </div>
 
     <component
-      v-else
-      :style='`width:${record.options.width}`'
-      v-bind='componentOption'
-      :min='
+        v-else
+        :style='`width:${record.options.width}`'
+        v-bind='componentOption'
+        :min='
         record.options.min || record.options.min === 0
           ? record.options.min
           : -Infinity
       '
-      :max='
+        :max='
         record.options.max || record.options.max === 0
           ? record.options.max
           : Infinity
       '
-      :count='record.options.max'
-      :precision='record.options.precision || 0'
-      :formatter="value =>record.options.thousandth==true&&value!=''?
+        :count='record.options.max'
+        :precision='record.options.precision || 0'
+        :formatter="value =>record.options.thousandth==true&&value!=''?
                  `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','):value"
-      :record='record'
-      :config='config'
-      :disabled='record.options.disabled || parentDisabled'
-      :parentDisabled='record.options.disabled || parentDisabled'
-      :allowClear='record.options.clearable'
-      :dynamicData='dynamicData'
-      :filterOption='
+        :record='record'
+        :config='config'
+        :disabled='record.options.disabled || parentDisabled'
+        :parentDisabled='record.options.disabled || parentDisabled'
+        :allowClear='record.options.clearable'
+        :dynamicData='dynamicData'
+        :filterOption='
         record.options.showSearch
           ? (inputValue, option) => {
             return (
@@ -141,35 +141,35 @@
           }
         : false
       '
-      :treeData='computedOptions'
-      :options='computedOptions'
-      :mode="record.options.multiple ? 'multiple' : ''"
-      v-model:checked='currentVal'
-      v-model:value='currentVal'
-      @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: currentTableData[rowIndex], rows: domains, columns, pagination })'
-      :is='componentItem'
-      :placeholder="(record.options.disabled || parentDisabled) ? '' : record.options.placeholder"
+        :treeData='computedOptions'
+        :options='computedOptions'
+        :mode="record.options.multiple ? 'multiple' : ''"
+        v-model:checked='currentVal'
+        v-model:value='currentVal'
+        @change='handleChange($event, record.model, record, {...tableScope, rowIndex, row: currentTableData[rowIndex], rows: domains, columns, pagination })'
+        :is='componentItem'
+        :placeholder="(record.options.disabled || parentDisabled) ? '' : record.options.placeholder"
     ></component>
   </a-form-item>
   <!-- 文本 -->
   <a-form-item v-else-if="record.type === 'text'">
     <div :style='{ textAlign: record.options.textAlign }'>
       <label
-        :class="{ 'ant-form-item-required': record.options.showRequiredMark }"
-        :style='{
+          :class="{ 'ant-form-item-required': record.options.showRequiredMark }"
+          :style='{
           fontFamily: record.options.fontFamily,
           fontSize: record.options.fontSize,
           color: record.options.color
         }'
-        v-text='record.label'
+          v-text='record.label'
       ></label>
     </div>
   </a-form-item>
 
   <!-- html -->
   <div
-    v-else-if="record.type === 'html'"
-    v-html='record.options.defaultValue'
+      v-else-if="record.type === 'html'"
+      v-html='record.options.defaultValue'
   ></div>
 
   <div v-else>
@@ -187,7 +187,7 @@ import UploadImg from '../../UploadImg/uploadImg.vue'
 import StDatePicker from '../../StDatePicker/datePicker.vue'
 import StTimePicker from '../../StTimePicker/timePicker.vue'
 import ComponentArray from '../../core/components_use'
-import { PROVINCE_CITY_DISTRICT } from '/@/views/flow/stFormDesign/province-city-district.js';
+import {PROVINCE_CITY_DISTRICT} from '/@/views/flow/stFormDesign/province-city-district.js';
 import _ from "lodash/object"
 
 export default {
@@ -268,6 +268,7 @@ export default {
     width: 70px;
   }
 }
+
 ::v-deep(.red-label .ant-form-item-label > label) {
   color: red;
 }

src/views/flow/stFormDesign/packages/StBatch/module/StTableCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-card">
     <div class="mobile-table-content">
-      <div class="mobile-table"  v-if="list.length === 0 && firstData.length === 0">
+      <div class="mobile-table" v-if="list.length === 0 && firstData.length === 0">
         <a-empty></a-empty>
       </div>
 
@@ -13,7 +13,7 @@
           <template #extra>
             <a-button v-if="!disabled" type="dashed" @click="removeDomain(item)" danger>
               <template #icon>
-                <DeleteOutlined />
+                <DeleteOutlined/>
               </template>
             </a-button>
           </template>
@@ -89,9 +89,9 @@
 
 <script setup>
 import StFormModelItem from '/@/views/flow/stFormDesign/packages/StBatch/module/StFormModelItem.vue';
-import { DeleteOutlined } from '@ant-design/icons-vue';
-import { isEmpty } from 'lodash';
-import { computed, nextTick, ref, watch } from 'vue';
+import {DeleteOutlined} from '@ant-design/icons-vue';
+import {isEmpty} from 'lodash';
+import {computed, nextTick, ref, watch} from 'vue';
 
 const props = defineProps([
   'formData',
@@ -112,14 +112,17 @@ const list = ref([]);
 const pageNum = ref(1);
 const pageSize = ref(10);
 
-const emits = defineEmits(['removeDomain', 'handleInput']);
+const emits = defineEmits(['removeDomain', 'input']);
 
 const removeDomain = (item) => {
   emits('removeDomain', item);
 };
 
-const handleInput = (event) => {
-  emits('handleInput', event);
+const handleInput = (value, model, record, tableInfo) => {
+  if (model == undefined) {
+    return
+  }
+  emits('input', value, model, record, tableInfo)//用来给父传值，不可删除
 };
 const handleLoadMore = () => {
   refreshTableCard();
@@ -152,6 +155,7 @@ defineExpose({
   flex-direction: column;
   gap: 10px;
   background: #fff;
+
   .mobile-table-content {
     display: flex;
     flex-direction: column;
@@ -166,6 +170,7 @@ defineExpose({
     }
   }
 }
+
 .mobile-table {
   border: 1px solid rgba(#000, 0.1);
   border-radius: 10px;

src/views/flow/stFormDesign/packages/StEditor/StEditor.vue

@@ -44,7 +44,6 @@ const editorOption = ref({
 });
 let flag = ref(0)
 const handleCreated = (editor) => {
-  console.log('handleCreated')
   editorRef.value = editor;
   flag.value = 1
 };
@@ -61,7 +60,6 @@ watch(() => props.value, (newVal) => {
   if (flag.value === 1 && newVal) {
     flag.value = 2
     const editor = editorRef.value;
-    console.log(editor.getHtml(), editor, 'editor.getHtml()')
     if (newVal.startsWith('<ul>')) {
       newVal = newVal.replace(/^<ul>/, "").replace(/<\/ul>$/, "")
       editor.setHtml(newVal)

src/views/flow/stFormWork/formWork.vue

@@ -129,6 +129,18 @@
           ></component>
         </div>
       </div>
+      <div class="form-skeleton" v-show="!loadBeforeOver">
+        <a-skeleton />
+        <br />
+        <a-skeleton />
+        <br />
+        <a-skeleton />
+        <br />
+        <a-skeleton />
+        <br />
+        <a-skeleton />
+        <br />
+      </div>
     </a-spin>
     <print-preview ref="preView"/>
   </a-watermark>
@@ -505,6 +517,7 @@ watch([
   }
 }, {deep: true});
 const initPageData = async () => {
+
   const flowCode = route.query.flowCode;
   let taskid = route.query.taskID;
   const bizObjectID = route.query.bizObjectID;
@@ -525,7 +538,7 @@ const initPageData = async () => {
     storedIds: storedIds,
     dicStoredFlag: localStorage.getItem("dicStoredFlag"),
   });
-
+  loadBeforeOver.value = true;
   const resDynamicData = resFormLoadTemplateData.value.data.dynamicData
   localStorage.setItem('dicStoredFlag', resDynamicData["dicStoredFlag"])
   delete resDynamicData["dicStoredFlag"];
@@ -589,7 +602,7 @@ const initPageData = async () => {
   commentDataInit();
   // 表单加载后
   dynamicMethods.loadAfter && dynamicMethods.loadAfter();
-  loadBeforeOver.value = true;
+
 };
 const initBtn = () => {
   const actionList = getActionList.call({

src/views/flow/stFormWork/style/formWork.less

@@ -238,4 +238,12 @@
 
 :deep(.comment) {}
 
+.form-skeleton{
+  width: 1200px; /* 设置宽度为1200px */
+  margin: 0 auto; /* 上下外边距为0，左右外边距自动，实现水平居中 */
+  height: 30px; /* 设置高度以便观察效果 */
+  text-align: center; /* 文本居中对齐 */
+  line-height: 30px; /* 等于高度，使文字垂直居中 */
+}
+