maxkb/ui/src/workflow/nodes/form-node/index.vue

<template>
  <NodeContainer :nodeModel="nodeModel">
    <el-form
      @submit.prevent
      :model="form_data"
      label-position="top"
      require-asterisk-position="right"
      label-width="auto"
      ref="formNodeFormRef"
      hide-required-asterisk
    >
      <el-form-item
        label="表单输出内容"
        prop="form_content_format"
        :rules="{
          required: true,
          message: '请表单输出内容',
          trigger: 'blur'
        }"
      >
        <template #label>
          <div class="flex align-center">
            <div class="mr-4">
              <span>表单输出内容<span class="danger">*</span></span>
            </div>
            <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
              <template #content>
                `设置执行该节点输出的内容，{{ '{ from }' }}为表单的占位符。`
              </template>
              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
            </el-tooltip>
          </div>
        </template>
        <MdEditorMagnify
          title="表单输出内容"
          v-model="form_data.form_content_format"
          style="height: 150px"
          @submitDialog="submitDialog"
        />
      </el-form-item>
      <el-form-item label="表单配置" @click.prevent>
        <template #label>
          <div class="flex-between mb-16">
            <h5 class="lighter">{{ '表单配置' }}</h5>
            <el-button link type="primary" @click="openAddFormCollect()">
              <el-icon class="mr-4">
                <Plus />
              </el-icon>
              添加
            </el-button>
          </div></template
        >

        <el-table
          v-if="form_data.form_field_list.length > 0"
          :data="form_data.form_field_list"
          class="mb-16"
        >
          <el-table-column prop="field" label="参数" />
          <el-table-column prop="label" label="显示名称">
            <template #default="{ row }">
              <span v-if="row.label && row.label.input_type === 'TooltipLabel'">{{
                row.label.label
              }}</span>
              <span v-else>{{ row.label }}</span>
            </template>
          </el-table-column>
          <el-table-column label="组件类型" width="110px">
            <template #default="{ row }">
              <el-tag type="info" class="info-tag">{{
                input_type_list.find((item) => item.value === row.input_type)?.label
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="default_value" label="默认值" />
          <el-table-column label="必填">
            <template #default="{ row }">
              <div @click.stop>
                <el-switch disabled size="small" v-model="row.is_required" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="80">
            <template #default="{ row, $index }">
              <span class="mr-4">
                <el-tooltip effect="dark" content="修改" placement="top">
                  <el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
                    <el-icon><EditPen /></el-icon>
                  </el-button>
                </el-tooltip>
              </span>
              <el-tooltip effect="dark" content="删除" placement="top">
                <el-button type="primary" text @click="deleteField(row)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <AddFormCollect ref="addFormCollectRef" :addFormField="addFormField"></AddFormCollect>
    <EditFormCollect ref="editFormCollectRef" :editFormField="editFormField"></EditFormCollect>
  </NodeContainer>
</template>
<script setup lang="ts">
import NodeContainer from '@/workflow/common/NodeContainer.vue'
import AddFormCollect from '@/workflow/common/AddFormCollect.vue'
import EditFormCollect from '@/workflow/common/EditFormCollect.vue'
import { type FormInstance } from 'element-plus'
import { ref, onMounted, computed } from 'vue'
import { input_type_list } from '@/components/dynamics-form/constructor/data'
import { MsgError } from '@/utils/message'
import { set } from 'lodash'
const props = defineProps<{ nodeModel: any }>()
const formNodeFormRef = ref<FormInstance>()
const editFormField = (form_field_data: any, field_index: number) => {
  form_data.value.form_field_list = form_data.value.form_field_list.map(
    (item: any, index: number) => {
      if (field_index === index) {
        return form_field_data
      }
      return item
    }
  )
  sync_form_field_list()
}
const addFormField = (form_field_data: any) => {
  if (form_data.value.form_field_list.some((field: any) => field.field === form_field_data.field)) {
    MsgError('参数已存在:' + form_field_data.field)
    return
  }
  form_data.value.form_field_list = [...form_data.value.form_field_list, form_field_data]
  sync_form_field_list()
}
const sync_form_field_list = () => {
  const fields = [
    {
      label: '表单全部内容',
      value: 'form_data'
    },
    ...form_data.value.form_field_list.map((item: any) => ({
      value: item.field,
      label: typeof item.label == 'string' ? item.label : item.label.label
    }))
  ]
  set(props.nodeModel.properties.config, 'fields', fields)
}
const addFormCollectRef = ref<InstanceType<typeof AddFormCollect>>()
const editFormCollectRef = ref<InstanceType<typeof EditFormCollect>>()
const openAddFormCollect = () => {
  addFormCollectRef.value?.open()
}
const openEditFormCollect = (form_field_data: any, index: number) => {
  editFormCollectRef.value?.open(form_field_data, index)
}
const deleteField = (form_field_data: any) => {
  form_data.value.form_field_list = form_data.value.form_field_list.filter(
    (field: any) => field.field !== form_field_data.field
  )
}
const form = ref<any>({
  is_result: true,
  form_content_format: `你好，请先填写下面表单内容：
{{form}}
填写后请点击【提交】按钮进行提交。`,
  form_field_list: []
})
const form_data = computed({
  get: () => {
    if (props.nodeModel.properties.node_data) {
      return props.nodeModel.properties.node_data
    } else {
      set(props.nodeModel.properties, 'node_data', form.value)
    }
    return props.nodeModel.properties.node_data
  },
  set: (value) => {
    set(props.nodeModel.properties, 'node_data', value)
  }
})
const validate = () => {
  return formNodeFormRef.value?.validate()
}
function submitDialog(val: string) {
  set(props.nodeModel.properties.node_data, 'form_content_format', val)
}
onMounted(() => {
  set(props.nodeModel, 'validate', validate)
  sync_form_field_list()
})
</script>
<style lang="scss" scoped></style>