任务流-参数配置

src/views/taskScheduling/taskFlowDesign/index.vue

@@ -32,7 +32,7 @@
         <div>展示切换</div>
       </div>
       <a-button type="primary" @click="handleConfig">任务流配置</a-button>
-      <a-button type="primary">参数设置</a-button>
+      <a-button type="primary" @click="handleSetConfig">参数设置</a-button>
       <a-button type="primary">任务列表</a-button>
       <a-button type="primary" @click="handleDepend">任务流依赖</a-button>
       <a-button type="primary" @click="handleVersion">版本管理</a-button>
@@ -127,6 +127,7 @@
     <VersionModel @register="versionModel" @set-version="setVersion" @show-dag="showDag" />
     <DeleteModel @register="deleteModel" />
     <OfflineModel @register="offlineModel" @set-upload-flag="setUploadFlag" />
+    <TaskFlowConfig @register="taskFlowConfig" />
   </PageWrapper>
 </template>
 
@@ -187,6 +188,7 @@
   import VersionModel from './versionModel.vue';
   import DeleteModel from './deleteModel.vue';
   import OfflineModel from './offlineModel.vue';
+  import TaskFlowConfig from './taskFlowConfig.vue';
 
   const [taskModel, { openModal: openTaskModel }] = useModal();
   const [upstreamTaskModel, { openModal: openUpstreamModel }] = useModal();
@@ -196,6 +198,7 @@
   const [versionModel, { openModal: openVersionModel }] = useModal();
   const [deleteModel, { openModal: openDeleteModel }] = useModal();
   const [offlineModel, { openModal: openOfflineModel }] = useModal();
+  const [taskFlowConfig, { openModal: openTaskFlowConfig }] = useModal();
   const rotate = ref(90);
   const showType = ref('table');
   const searchInfo = reactive<Recordable>({});
@@ -292,6 +295,11 @@
       isUpdate: false,
     });
   }
+  function handleSetConfig() {
+    openTaskFlowConfig(true, {
+      isUpdate: false,
+    });
+  }
   function handleVersion() {
     openVersionModel(true, {
       isUpdate: false,

src/views/taskScheduling/taskFlowDesign/taskFlowConfig.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicTable @register="configTable" :searchInfo="searchInfo">
+      <template #name="{ text, record }">
+        <span v-if="record.flag === '1'">{{ text }}</span>
+        <Input v-else v-model:value="record.name" style="width: 100%" />
+      </template>
+      <template #type="{ text, record }">
+        <span v-if="record.flag === '1'">{{ text }}</span>
+        <Select v-else v-model:value="record.type" style="width: 100%" :options="typeOptions" />
+      </template>
+      <template #formula="{ text, record }">
+        <div style="display: flex">
+          <div style="flex: 1">
+            <span v-if="record.flag === '1'">{{ text }}</span>
+            <Input v-else v-model:value="record.formula" />
+          </div>
+          <CheckOutlined v-if="record.flag === '0'" @click="configRowSuccess(record)" />
+          <CloseOutlined v-else @click="configRowDelete(record)" />
+        </div>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, reactive } from 'vue';
+  import { Select, Input } from 'ant-design-vue';
+  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { taskConfigColumn } from '@/views/taskScheduling/taskFlowDesign/design.data';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  const getTitle = '任务流参数配置';
+  const activeKey = ref('1');
+  let type = ref('1');
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    // resetConfigTable();
+    activeKey.value = '1';
+    setModalProps({ confirmLoading: false });
+    type.value = data?.type;
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      rowId.value = data.record.businessId;
+    }
+  });
+  //初始化列表
+  // 下拉
+  const typeOptions = [
+    {
+      label: '普通参数',
+      value: '普通参数',
+    },
+    {
+      label: '加密参数',
+      value: '加密参数',
+    },
+  ];
+  // 默认值
+  const configData = reactive([
+    {
+      name: '',
+      type: '',
+      formula: '',
+      flag: '0',
+    },
+  ]);
+  // 添加方法
+  function configDataAddInfo(data) {
+    const info = {
+      name: '',
+      type: '',
+      formula: '',
+      flag: '0',
+    };
+    data.push({ ...info });
+  }
+  // √方法，确认后添加
+  function configRowSuccess(record) {
+    record.flag = '1';
+    const data = getDataSource();
+    configDataAddInfo(data);
+    setTableData([...data]);
+  }
+  // 删除方法
+  function configRowDelete(record) {
+    const data = getDataSource();
+    const index = data.findIndex((item) => item === record);
+    if (index !== -1) {
+      data.splice(index, 1);
+      setTableData([...data]);
+    }
+  }
+  const searchInfo = reactive<Recordable>({});
+  const [configTable, { setTableData, getDataSource }] = useTable({
+    title: '',
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: configData.length,
+        code: '',
+        message: '',
+        data: configData,
+      };
+      return { ...response };
+    },
+    columns: taskConfigColumn,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: false,
+    showIndexColumn: false,
+    striped: false,
+    pagination: false,
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>