组件流程开发

src/flowableComponents/dbOutput/index.vue

@@ -7,39 +7,94 @@ import {
   watchEffect,
   watch
 } from "vue";
+import { useExposeDialogArgs } from "@qomo-platform/core";
+import SqlStatement from "@/components/SqlStatement";
 
 export default defineComponent({
   name: "dbOutput",
-  props:{
-    nodeDetail:{
-      type:Object
+  props: {
+    nodeDetail: {
+      type: Object
     }
   },
   setup(props, { attrs, expose, slots = {} }) {
-    const formInline = reactive({});
+    const nodeDetail = computed(() => props?.nodeDetail);
+    const baseFormRef = ref({});
+    const baseMonacoEditorRef = ref();
+    const { findNodesPrev, findNodesNext, getNodeData } = attrs;
+    const submit = () => {
+      let params = baseFormRef.value.formData;
+      return {
+        params
+      };
+    };
 
-    const submit = ()=>{
-      let param = formInline;
-     
+    const open = () => {
+      init(nodeDetail.value);
+      baseMonacoEditorRef.value?.restLayout();
+    };
 
-      return param
-    }
+    // onMounted(()=>{
+    //   init(nodeDetail.value)
+    // })
+
+    // watch(nodeDetail,(v)=>{
+    //   init(v)
+    // },{
+    //   deep:true
+    // })
+    watch(
+      () => baseFormRef.value.formData,
+      val => {},
+      {
+        deep: true
+      }
+    );
+
+    const init = v => {
+      const data = findNodesNext(props?.nodeDetail.id);
+      baseFormRef.value.setFormData(
+        JSON.parse(v?.taskParams || "{}")?.params || {}
+      );
+    };
+
+    const handleOK = value => {};
 
     expose({
-      submit
-    })
+      submit,
+      open
+    });
+
     return () => (
-      <el-form label-width="auto" v-model={formInline}>
-        <el-form-item label="Name">
-          <el-input v-model={formInline.name} />
-        </el-form-item>
-        <el-form-item label="Activity zone">
-          <el-input v-model={formInline.region} />
-        </el-form-item>
-        <el-form-item label="Activity form">
-          <el-input v-model={formInline.type} />
-        </el-form-item>
-      </el-form>
+      <base-form
+        ref={baseFormRef}
+        v-slots={{
+          default: ({ model }) => (
+            <div class={"flex gap-[10px] w-full"}>
+              <div class={"w-[300px] overflow-auto flex flex-col"}>
+                <SqlStatement
+                  baseFormRef={baseFormRef}
+                  model={model}
+                ></SqlStatement>
+              </div>
+              <div class={"flex flex-1 flex-col"}>
+                <base-form-item label="SQL语句：" prop="test" span={8}>
+                  <div class={"w-full h-[200px]"}>
+                    <BaseMonacoEditor
+                      ref={baseMonacoEditorRef}
+                      v-model={model.code}
+                      language="sql"
+                      customReminders={{
+                        test: ["liaoqiuyu"]
+                      }}
+                    ></BaseMonacoEditor>
+                  </div>
+                </base-form-item>
+              </div>
+            </div>
+          )
+        }}
+      />
     );
   }
 });