geg-gas-web/src/views/workflow/design/bpmn/components/arguments/ScriptInputParams.vue

<template>
  <a-tabs>
    <a-tab-pane :key="item.key" :tab="item.title" v-for="item in apiParams">
      <a-table
        :dataSource="item.tableInfo"
        :columns="apiConfigColumns"
        :pagination="false"
        :scroll="{ y: '400px' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'assignmentType'">
            <a-select
              v-model:value="record.assignmentType"
              style="width: 100%"
              :placeholder="t('请选择赋值类型')"
              @change="
                () => {
                  record.config = null;
                }
              "
              allowClear
            >
              <a-select-option :value="bind.value" v-for="bind in bindType" :key="bind.value">
                {{ bind.label }}
              </a-select-option>
            </a-select>
          </template>
          <template v-else-if="column.key === 'value'">
            <!-- 流程参数 -->
            <a-select
              v-if="record.assignmentType === 'processParameter'"
              v-model:value="record.config"
              style="width: 100%"
              :placeholder="t('请选择流程参数')"
              allowClear
            >
              <a-select-option :value="it.id" v-for="it in data.processParameterTree" :key="it.id">
                {{ it.name }}
              </a-select-option>
            </a-select>

            <!-- 发起人信息 -->
            <a-tree-select
              v-else-if="record.assignmentType === 'originator'"
              v-model:value="record.config"
              show-search
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :placeholder="t('请选择发起人信息')"
              allow-clear
              tree-default-expand-all
              :tree-data="data.originatorTree"
              :field-names="{
                children: 'children',
                label: 'title',
                value: 'key',
              }"
            />
            <!-- 表单数据 -->
            <a-tree-select
              v-else-if="record.assignmentType === 'formData'"
              v-model:value="record.config"
              show-search
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :placeholder="t('请选择表单数据')"
              allow-clear
              tree-default-expand-all
              :tree-data="data.formDataTree"
              :field-names="{
                children: 'children',
                label: 'title',
                value: 'key',
              }"
            />
            <a-input
              v-else
              v-model:value="record.value"
              :placeholder="record.type ? t('请填写值') : t('请先选择赋值类型后再配置值')"
            />
          </template>
        </template>
      </a-table>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
  import { TreeProps } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { ApiParams } from '/@/components/ApiConfig/src/interface';
  import { reactive } from 'vue';
  import { getProcessParamConfigs, getVariablesTree } from '../../config/info';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      paramTree: TreeProps['treeData'];
      apiParams: Array<ApiParams>;
      needHideComponents?: Boolean;
    }>(),
    {
      paramTree: () => {
        return [];
      },
      apiParams: () => {
        return [];
      },
      needHideComponents: () => {
        return false;
      },
    },
  );
  let data: {
    processParameterTree: Array<{ id: string; name: string }>;
    originatorTree: TreeProps['treeData'];
    formDataTree: TreeProps['treeData'];
  } = reactive({
    processParameterTree: getProcessParamConfigs(),
    originatorTree: [
      {
        title: t('发起人ID'),
        key: '#{initiator_id}#',
      },
      {
        title: t('发起人所属组织架构名称'),
        key: '#{initiator_dept_name}#',
      },
    ],
    formDataTree: getVariablesTree({ needHideComponents: props.needHideComponents as boolean }),
  });
  let bindType = [
    {
      label: t('值'),
      value: 'value',
    },
    {
      label: t('流程参数'),
      value: 'processParameter',
    },
    {
      label: t('发起人信息'),
      value: 'originator',
    },
    {
      label: t('表单数据'),
      value: 'formData',
    },
  ];
  let apiConfigColumns = [
    {
      title: t('API入参名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('API入参类型'),
      dataIndex: 'dataType',
      key: 'dataType',
      align: 'center',
    },
    {
      title: t('赋值类型'),
      dataIndex: 'assignmentType',
      key: 'assignmentType',
      align: 'center',
    },
    {
      title: t('赋值配置'),
      dataIndex: 'value',
      key: 'value',
      align: 'center',
    },
  ];
</script>

<style scoped></style>