fix: 自定义组件增加ref

src/views/flow/stDataModel/index.vue

@@ -1,57 +1,51 @@
 <template>
   <div class="page">
-    <div>
-      <a-row style="margin: 2px; padding: 10px 0px 0px 0px" type="flex">
-        <a-col :flex="1">
-          <a-button style="margin-left: 30px" type="dashed" @click="addField"> 添加数据</a-button>
-        </a-col>
-        <a-col style="display: flex; align-items: center; gap: 10px; margin-right: 10px">
-          <a-button type="dashed" @click="smartAdd">智能添加</a-button>
-          <a-button type="dashed" @click="saveField">保存</a-button>
-          <a-button @click="publishField" type="primary"> 发布</a-button>
-        </a-col>
-      </a-row>
-      <a-row style="margin: 2px; padding: 10px">
-        <a-table size="middle" :pagination="false" :columns="columns" :data-source="data" :defaultExpandAllRows="true"
-                 :scroll="{ y: 530 }" :loading="loading">
-          <template #bodyCell="{ column, text, record, index }">
-            <span v-if="column.key === 'seq'">{{ index + 1 }}</span>
-            <span v-if="['name','code'].includes(column.key)" style="font-size: 16px">{{ text }}</span>
-            <a style="font-size: 16px" v-if="column.key === 'type'">
-              <span v-if="text == 'STRING'">短文本</span>
-              <span v-else-if="text == 'TEXT'">长文本</span>
-              <span v-else-if="text == 'SINGLE'">人员组织(单选)</span>
-              <span v-else-if="text == 'MULTI'">多选(包括 人员组织)</span>
-              <span v-else-if="text == 'INTEGER'">整数</span>
-              <span v-else-if="text == 'DECIMAL'">小数</span>
-              <span v-else-if="text == 'DATETIME'">时间</span>
-              <span v-else-if="text == 'ATTACH'">附件</span>
-              <span v-else-if="text == 'IMAGE'">图片</span>
-              <span v-else-if="text == 'CHILDREN'">子表</span>
-              <span v-else>
+    <div class="header-data">
+      <a-button type="dashed" @click="addField"> 添加数据</a-button>
+      <a-button type="dashed" @click="smartAdd">智能添加</a-button>
+      <a-button type="dashed" @click="saveField">保存</a-button>
+      <a-button style="margin-right: 30px" @click="publishField" type="primary"> 发布</a-button>
+    </div>
+    <div class="table-data">
+      <a-table size="middle" :pagination="false" :columns="columns" :data-source="data" :defaultExpandAllRows="true"
+               :scroll="{ y: tableHeight  }" :loading="loading">
+        <template #bodyCell="{ column, text, record, index }">
+          <span v-if="column.key === 'seq'">{{ index + 1 }}</span>
+          <span v-if="['name','code'].includes(column.key)" style="font-size: 16px">{{ text }}</span>
+          <a style="font-size: 16px" v-if="column.key === 'type'">
+            <span v-if="text == 'STRING'">短文本</span>
+            <span v-else-if="text == 'TEXT'">长文本</span>
+            <span v-else-if="text == 'SINGLE'">人员组织(单选)</span>
+            <span v-else-if="text == 'MULTI'">多选(包括 人员组织)</span>
+            <span v-else-if="text == 'INTEGER'">整数</span>
+            <span v-else-if="text == 'DECIMAL'">小数</span>
+            <span v-else-if="text == 'DATETIME'">时间</span>
+            <span v-else-if="text == 'ATTACH'">附件</span>
+            <span v-else-if="text == 'IMAGE'">图片</span>
+            <span v-else-if="text == 'CHILDREN'">子表</span>
+            <span v-else>
                 {{ text }}
               </span>
-            </a>
-            <a-switch v-if="column.key === 'publish'" :checked="checked(text)"/>
-            <a-switch v-if="chargeCanTrance(column,record)"
-                      v-model:checked="record.trace"/>
-            <template v-if="column.key === 'operation'">
-              <div style="display: flex; gap: 10px">
-                <a-button type="dashed" @click="handleRem(record, 'up')" :disabled="!record.isMoveUp">
-                  <UpOutlined/>
-                </a-button>
-                <a-button type="dashed" @click="handleRem(record, 'down')" :disabled="!record.isMoveDown">
-                  <DownOutlined/>
-                </a-button>
-                <a-button type="dashed" @click="handleEdit(record)">编辑</a-button>
-                <a-button v-show="record.publish!='1'" danger @click="handleDel(record)">删除</a-button>
-                <a-button type="primary" v-if="record.type == 'CHILDREN'" @click="handleAddChild(record)">新增子数据
-                </a-button>
-              </div>
-            </template>
+          </a>
+          <a-switch v-if="column.key === 'publish'" :checked="checked(text)"/>
+          <a-switch v-if="chargeCanTrance(column,record)"
+                    v-model:checked="record.trace"/>
+          <template v-if="column.key === 'operation'">
+            <div style="display: flex; gap: 10px">
+              <a-button type="dashed" @click="handleRem(record, 'up')" :disabled="!record.isMoveUp">
+                <UpOutlined/>
+              </a-button>
+              <a-button type="dashed" @click="handleRem(record, 'down')" :disabled="!record.isMoveDown">
+                <DownOutlined/>
+              </a-button>
+              <a-button type="dashed" @click="handleEdit(record)">编辑</a-button>
+              <a-button v-show="record.publish!='1'" danger @click="handleDel(record)">删除</a-button>
+              <a-button type="primary" v-if="record.type == 'CHILDREN'" @click="handleAddChild(record)">新增子数据
+              </a-button>
+            </div>
           </template>
-        </a-table>
-      </a-row>
+        </template>
+      </a-table>
     </div>
 
     <SmartFieldDialog ref="smartFielDialog" :tableData="data" @ok="okSmartFieldDialog"></SmartFieldDialog>
@@ -133,6 +127,7 @@ export default defineComponent({
       data: [],
       loading: false,
       smartFields: '',
+      tableHeight: 500,
     };
   },
 
@@ -143,6 +138,7 @@ export default defineComponent({
   },
   mounted() {
     this.initForm();
+    this.tableHeight = window.innerHeight - 246;
   },
   methods: {
     handleRem(row, dr) {
@@ -464,9 +460,23 @@ export default defineComponent({
 });
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 .page {
   width: 100%;
   height: 100%;
 }
+
+.header-data {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px; /* 子元素之间的间距 */
+  align-items: center;
+  justify-content: right;
+  padding-top: 10px;
+}
+
+.table-data {
+  height: 100%;
+  padding: 10px;
+}
 </style>

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

@@ -9,7 +9,6 @@
         <p class="hint-text" v-show="data.list.length === 0">
           <a-empty description="从左侧选择控件添加"/>
         </p>
-
         <a-form
             class="a-form-box k-form-build"
             :model="form"

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

@@ -310,7 +310,6 @@ export default {
     },
 
     async getCode(objectId, type) {
-
       this.loading = true;
       const {success, data} = await getJsStr({objectid: objectId});
       this.loading = false;
@@ -331,7 +330,25 @@ export default {
 })()
 `;
             } else if (type == '1') {
-              this.editorJsCode = `/**
+              if (this.activeKey.indexOf('button_') >= 0) {
+                //按钮
+                this.editorJsCode = `/**
+ * 按钮点击事件
+ */
+((bizObj) => {
+    // record   字段的属性
+    const { record } = bizObj;
+    console.log("this", this)
+
+
+
+
+
+
+})(bizObj)`;
+              } else {
+                //值改变事件
+                this.editorJsCode = `/**
  * 值改变事件
  */
 ((bizObj) => {
@@ -342,7 +359,7 @@ export default {
     // tableInfo.rowIndex           修改的行的索引
     // tableInfo.column.dataIndex   修改的列的编码
     const { value, key, record, tableInfo } = bizObj;
-
+    console.log("this", this)
 
 
 
@@ -350,6 +367,8 @@ export default {
 
 
 })(bizObj)`;
+              }
+
             } else if (type == '2') {
               this.editorJsCode = `// 自定义校验
 // rule.message 设置校验提示信息
@@ -728,12 +747,14 @@ const commonMethods = [
     "field": "表单自定义组件",
     "fieldCode": "    //1、系统共预制10个自定义组件（custom_0到custom_9）\n" +
         "    //2、使用时需要首先在表单中拖拽html组件，并设置内容为：<div id=\"custom_0\"></div>\n" +
-        "   //3、在表单保存前事件中this.getValues()[\"custome_child\"]=this.customComponent[0].values\n" +
-        "      this.customComponent[0].values =this.getValues()[\"custome_child\"]//页面传值，非必填\n" +
-        "      this.customComponent[0].callbackMethod =()=>{//唯一一个回调方法，非必填\n" +
+        "    //3、在表单保存前事件中this.getValues()[\"custome_child\"]=this.customComponent[0].values\n" +
+        "    this.customComponent[0].values = this.getValues()[\"custome_child\"]//页面传值，非必填\n" +
+        "    this.customComponent[0].callbackMethod = () => {//唯一一个回调方法，非必填\n" +
         "        console.log('回调内容')\n" +
         "    }\n" +
-        "    this.customComponent[0].loadedComponent ='test'//必填（flowCustomComponents中的js文件下增加模块）",
+        "    //4、获取自定义组件ref\n" +
+        "    const customComponent0Ref=this.customComponent[0].ref()\n" +
+        "    this.customComponent[0].loadedComponent = 'test'//必填（flowCustomComponents中的js文件下增加模块）",
     "children": null
   },
   {

src/views/flow/stFormWork/formWork.vue

@@ -122,6 +122,7 @@
         </div>
         <div v-for="(component, index) in customComponent" :id="component.id">
           <component
+              :ref="component.id"
               v-if="component.visible"
               :is="ComponentArray[component.loadedComponent]"
               :values="component.values"
@@ -216,7 +217,16 @@ const route = useRoute();
 const router = useRouter();
 const selectUserRef = ref(null);
 const selectUserRefAddParticipant = ref(null);
-
+const custom_component_0 = ref(null);
+const custom_component_1 = ref(null);
+const custom_component_2 = ref(null);
+const custom_component_3 = ref(null);
+const custom_component_4 = ref(null);
+const custom_component_5 = ref(null);
+const custom_component_6 = ref(null);
+const custom_component_7 = ref(null);
+const custom_component_8 = ref(null);
+const custom_component_9 = ref(null);
 const stbRef = ref(null);
 
 const customDialog = ref({
@@ -427,6 +437,30 @@ onMounted(async () => {
       values: {},
       callbackMethod: () => {
       },
+      ref: () => {
+        if (i == 0) {
+          return custom_component_0.value[0]
+        } else if (i == 1) {
+          return custom_component_1.value[0]
+        } else if (i == 2) {
+          return custom_component_2.value[0]
+        } else if (i == 3) {
+          return custom_component_3.value[0]
+        } else if (i == 4) {
+          return custom_component_4.value[0]
+        } else if (i == 5) {
+          return custom_component_5.value[0]
+        } else if (i == 6) {
+          return custom_component_6.value[0]
+        } else if (i == 7) {
+          return custom_component_7.value[0]
+        } else if (i == 8) {
+          return custom_component_8.value[0]
+        } else if (i == 9) {
+          return custom_component_9.value[0]
+        }
+
+      }
     };
     customComponent.push(params);
   }