cost-frontend/src/flowableComponents/dbOutput/index.vue

<script lang="tsx">
import {
  computed,
  defineComponent,
  ref,
  onMounted,
  watchEffect,
  watch
} from "vue";
import { useExposeDialogArgs } from "@qomo-platform/core";
import SqlStatement from "@/components/SqlStatement";

export default defineComponent({
  name: "dbOutput",
  props: {
    nodeDetail: {
      type: Object
    }
  },
  setup(props, { attrs, expose, slots = {} }) {
    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 open = () => {
      init(nodeDetail.value);
      baseMonacoEditorRef.value?.restLayout();
    };

    // 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,
      open
    });

    return () => (
      <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>
          )
        }}
      />
    );
  }
});
</script>
<style scoped lang="scss"></style>