任务流设计-任务流内设计

src/views/taskScheduling/taskFlowDesign/design.data.ts

 import { FormSchema } from '@/components/Form';
 import { BasicColumn } from '@/components/Table';
+import { TableColumn } from 'ant-design-vue';
 
 export const designFormSchema: FormSchema[] = [
   {
@@ -12,7 +13,7 @@ export const designFormSchema: FormSchema[] = [
   },
   {
     field: 'type',
-    component: 'Input',
+    component: 'Select',
     componentProps: {
       placeholder: '任务类型',
       options: [
@@ -717,3 +718,16 @@ export const dataLoadConfigColumn: BasicColumn[] = [
     width: 120,
   },
 ];
+// upstreamTaskModel
+export const upstreamTaskColumn: BasicColumn[] = [
+  {
+    title: '上游任务',
+    dataIndex: 'task',
+    slots: { customRender: 'task' },
+  },
+  {
+    title: '依赖关系',
+    dataIndex: 'depend',
+    slots: { customRender: 'depend' },
+  },
+];

src/views/taskScheduling/taskFlowDesign/index.vue

@@ -97,11 +97,12 @@
         </template>
         <template #task="{ text, record }">
           <a-button v-if="text">{{ text }}<CheckCircleFilled style="color: #44c498" /></a-button>
-          <a-button><SettingOutlined /></a-button>
+          <a-button @click="handleSetting"><SettingOutlined /></a-button>
         </template>
       </BasicTable>
     </template>
     <TaskModel @register="taskModel" />
+    <UpstreamModel @register="upstreamTaskModel" />
   </PageWrapper>
 </template>
 
@@ -153,8 +154,10 @@
   } from '@/views/taskScheduling/taskFlowDesign/design.data';
   import { designData } from '@/views/taskScheduling/taskFlowDesign/designData';
   import { router } from '@/router';
+  import UpstreamModel from './upstreamTaskModel.vue';
 
   const [taskModel, { openModal: openTaskModel }] = useModal();
+  const [upstreamTaskModel, { openModal: openUpstreamModel }] = useModal();
   const rotate = ref(90);
   const showType = ref('table');
   const searchInfo = reactive<Recordable>({});
@@ -171,6 +174,11 @@
       type: type,
     });
   }
+  function handleSetting() {
+    openUpstreamModel(true, {
+      isUpdate: false,
+    });
+  }
   const [registerTable, {}] = useTable({
     title: '',
     // 数据

src/views/taskScheduling/taskFlowDesign/upstreamTaskModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <div style="flex: 1; display: flex; justify-content: space-between">
+          <a-button type="primary" @click="handleAdd"
+            ><Icon icon="ion:add-outline" />上游任务</a-button
+          >
+          <a-button :disabled="getRowSelection().selectedRowKeys <= 0" @click="handleDeleteMore"
+            ><CloseOutlined />解除依赖</a-button
+          >
+        </div>
+      </template>
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record, index),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+      <template #task="{ text, record }">
+        <Select style="width: 100%" v-model:value="record.task" :options="taskOptions" />
+      </template>
+      <template #depend="{ text, record }">
+        <Select style="width: 100%" v-model:value="record.depend" :options="dependOptions" />
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { useTable, TableAction } from '@/components/Table';
+  import { ref, computed, unref, reactive } from 'vue';
+  import { CloseOutlined } from '@ant-design/icons-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Select } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { ConnectionModelFormSchema } from './model.data';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { connectionData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
+  import {
+    connectionFormSchema,
+    connectionTable,
+  } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/model.data';
+  import { upstreamTaskColumn } from '@/views/taskScheduling/taskFlowDesign/design.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const getTitle = '上游任务';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+  });
+  const taskOptions = [
+    {
+      label: 'new task_1',
+      value: 'new task_1',
+    },
+  ];
+  const dependOptions = [
+    {
+      label: '是依赖',
+      value: '是依赖',
+    },
+    {
+      label: '否依赖',
+      value: '否依赖',
+    },
+    {
+      label: '或依赖',
+      value: '或依赖',
+    },
+    {
+      label: '弱依赖',
+      value: '弱依赖',
+    },
+  ];
+  function handleAdd() {
+    setTableData([...getDataSource().push({ businessId: businessId.value++ })]);
+    dataList = getDataSource();
+  }
+  const { createMessage } = useMessage();
+  function handleDelete(record, index) {
+    const list = getDataSource();
+    list.splice(index, 1);
+    setTableData([...list]);
+    createMessage.success('删除成功');
+    dataList = getDataSource();
+  }
+  function handleDeleteMore() {
+    createMessage.success('批量删除成功');
+  }
+  const searchInfo = reactive<Recordable>({});
+  // 伪自增
+  const businessId = ref(1);
+  let dataList = reactive([]);
+  const [registerTable, { setTableData, getDataSource, getRowSelection }] = useTable({
+    title: '',
+    // 定高
+    scroll: { y: 150 },
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: dataList.length,
+        code: '',
+        message: '',
+        data: dataList,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: upstreamTaskColumn,
+    rowSelection: true,
+    striped: false,
+    // 搜索
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>