任务流设计-跨任务流依赖设计

src/views/taskScheduling/taskFlowDesign/addTaskFlushModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicTree checkable :search="true" :treeData="taskFlushTreeData" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { taskFlushTreeData } from './designData';
+  import { BasicTree } from '@/components/Tree';
+
+  const getTitle = '选择上游任务流';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+
+    closeModal();
+  }
+</script>

src/views/taskScheduling/taskFlowDesign/addTaskModel.vue

+<template>
+  <BasicModal
+    width="60%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <div style="display: flex">
+      <BasicTree
+        class="w-1/2"
+        defaultExpandLevel="1"
+        @select="handleSelect"
+        :search="true"
+        :treeData="taskLeftTreeData"
+      />
+      <BasicTree class="w-1/2" checkable :search="true" :treeData="detailData" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { taskLeftTreeData, taskRightTreeData } from './designData';
+  import { BasicTree } from '@/components/Tree';
+  import { ref } from 'vue';
+
+  const getTitle = '选择上游任务流';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+  });
+  let detailData = ref([...taskRightTreeData]);
+  function handleSelect(keys) {
+    console.log('被调用');
+    detailData.value = taskRightTreeData.filter((item) => item.fk === keys[0]);
+    console.log('detailData', detailData);
+  }
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>

src/views/taskScheduling/taskFlowDesign/dependModel.vue

+<template>
+  <BasicModal
+    width="75%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <div style="display: flex">
+      <div style="flex: 2">
+        <BasicTable @register="taskFlushTable" :searchInfo="searchInfo">
+          <template #toolbar>
+            <div style="flex: 1">
+              <a-button type="primary" @click="handleTaskFlushModel"
+                ><Icon icon="ion:add-outline" />添加上游任务流</a-button
+              >
+              <a-button style="margin-left: 20px" type="primary" @click="handleTaskModel"
+                ><Icon icon="ion:add-outline" />添加上游任务</a-button
+              >
+              <a-button
+                style="margin-left: 20px"
+                v-if="taskFlushData.length + taskData.length <= 100"
+                >生成依赖图</a-button
+              >
+              <Alert
+                v-if="taskFlushData.length + taskData.length > 100"
+                type="warning"
+                message="列表模式仅展示当前任务流依赖的最近一层依赖关系"
+              />
+              <div>
+                <Input
+                  style="margin-top: 10px"
+                  v-model:value="searchName"
+                  placeholder="任务流名称"
+                />
+              </div>
+            </div>
+          </template>
+          <template #name="{ text, record }">
+            <div>{{ text }}</div>
+            <div style="color: #9ba2b2">{{ record.path }}</div>
+          </template>
+          <template #config="{ text, record }">
+            <div style="display: flex; justify-content: space-between">
+              <div></div>
+              <Checkbox v-model:checked="record.config" />
+              <a-button type="link" @click="handleDelete"><DeleteOutlined /></a-button>
+            </div>
+          </template>
+        </BasicTable>
+        <BasicTable @register="taskTable" :searchInfo="searchInfo">
+          <template #name="{ text, record }">
+            <div>{{ text }}</div>
+            <div style="color: #9ba2b2">{{ record.path }}</div>
+          </template>
+          <template #config="{ text, record }">
+            <div style="display: flex; justify-content: space-between">
+              <div></div>
+              <Checkbox v-model:checked="record.config" />
+              <a-button type="link" @click="handleDelete"><DeleteOutlined /></a-button>
+            </div>
+          </template>
+        </BasicTable>
+      </div>
+      <div style="flex: 3" v-if="taskFlushData.length + taskData.length <= 100">
+        <img src="/src/assets/images/taskFlush.jpg" style="width: 100%" alt="" />
+      </div>
+    </div>
+    <AddTaskFlushModel @register="addTaskFlushModel" />
+    <AddTaskModel @register="addTaskModel" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { useTable } from '@/components/Table';
+  import { ref, reactive } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Input, Checkbox, Alert } from 'ant-design-vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { taskColumn, taskFlushColumn } from '@/views/taskScheduling/taskFlowDesign/design.data';
+  import AddTaskFlushModel from '@/views/taskScheduling/taskFlowDesign/addTaskFlushModel.vue';
+  import AddTaskModel from './addTaskModel.vue';
+  import { taskData, taskFlushData } from '@/views/taskScheduling/taskFlowDesign/designData';
+  import { DeleteOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const getTitle = '任务流依赖关系';
+  const [addTaskFlushModel, { openModal: openAddTaskFlushModel }] = useModal();
+  const [addTaskModel, { openModal: openAddTaskModel }] = useModal();
+  function handleTaskFlushModel() {
+    console.log('被调用');
+    openAddTaskFlushModel(true, {
+      isUpdate: false,
+    });
+  }
+  function handleTaskModel() {
+    openAddTaskModel(true, {
+      isUpdate: false,
+    });
+  }
+  /** 删除*/
+  const { createConfirm, createMessage } = useMessage();
+  function handleDelete() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认删除',
+      content: '确认删除这条数据吗？',
+      onOk() {
+        createMessage.success('删除成功!');
+      },
+    });
+  }
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({
+      confirmLoading: false,
+      showOkBtn: false,
+      showCancelBtn: false,
+    });
+  });
+  const searchName = ref('');
+  const searchInfo = reactive<Recordable>({});
+  const [taskFlushTable] = useTable({
+    title: '',
+    // 定高
+    scroll: { y: 150 },
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: taskFlushData.length,
+        code: '',
+        message: '',
+        data: taskFlushData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: taskFlushColumn,
+    rowSelection: true,
+    striped: false,
+    // 搜索
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+  const [taskTable] = useTable({
+    title: '',
+    // 定高
+    scroll: { y: 150 },
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: taskData.length,
+        code: '',
+        message: '',
+        data: taskData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: taskColumn,
+    rowSelection: true,
+    striped: false,
+    // 搜索
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>
+<style lang="scss" scoped>
+  .vben-basic-table {
+    height: auto;
+  }
+  .ant-modal-footer {
+    visibility: hidden;
+  }
+</style>

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

 import { FormSchema } from '@/components/Form';
 import { BasicColumn } from '@/components/Table';
 import { TableColumn } from 'ant-design-vue';
+import { TreeItem } from '@/components/Tree';
 
 export const designFormSchema: FormSchema[] = [
   {
@@ -731,3 +732,27 @@ export const upstreamTaskColumn: BasicColumn[] = [
     slots: { customRender: 'depend' },
   },
 ];
+export const taskFlushColumn: BasicColumn[] = [
+  {
+    title: '任务流名称',
+    dataIndex: 'name',
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '引用上游参数',
+    dataIndex: 'config',
+    slots: { customRender: 'config' },
+  },
+];
+export const taskColumn: BasicColumn[] = [
+  {
+    title: '任务名称',
+    dataIndex: 'name',
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '引用上游参数',
+    dataIndex: 'config',
+    slots: { customRender: 'config' },
+  },
+];

src/views/taskScheduling/taskFlowDesign/designData.ts

+import {TreeItem} from "@/components/Tree";
+
 export const designData = [
   {
+    businessId: 1,
     name: 'new task',
     task: 'new task1',
   },
   {
+    businessId: 2,
     name: 'new task1',
     task: null,
   },
@@ -22,3 +26,190 @@ export const dataLoadConfigData = [
     config: '',
   },
 ];
+export const taskFlushTreeData: TreeItem[] = [
+  {
+    title: '所有任务流',
+    key: '0-0',
+    children: [
+      {
+        title: 'admin-个人工作区',
+        key: '0-0-0',
+        icon: 'ion:desktop-outline',
+        children: [
+          { title: '超时', key: '0-0-0-0', icon: 'ion:git-branch-outline' },
+          { title: 'test', key: '0-0-0-1', icon: 'ion:git-branch-outline' },
+          { title: 'sql', key: '0-0-0-2', icon: 'ion:git-branch-outline' },
+        ],
+      },
+      {
+        title: 'SLA场景验证',
+        key: '0-1-0',
+        icon: 'ion:desktop-outline',
+        children: [
+          { title: 'test', key: '0-1-0-0', icon: 'ion:git-branch-outline' },
+          { title: 'SLA-沟通流水', key: '0-1-0-1', icon: 'ion:git-branch-outline' },
+          { title: 'SLA-实时指标计算', key: '0-1-0-2', icon: 'ion:git-branch-outline' },
+          { title: 'sla分组件指标日批统计历史', key: '0-1-0-2', icon: 'ion:git-branch-outline' },
+          { title: 'SLA', key: '0-1-0-2', icon: 'ion:git-branch-outline' },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'admin-个人工作区',
+    key: '1-1',
+    icon: 'ion:desktop-outline',
+    children: [
+      { title: '超时', key: '1-1-0', icon: 'ion:git-branch-outline' },
+      { title: 'test', key: '1-1-1', icon: 'ion:git-branch-outline' },
+      { title: 'sql', key: '1-1-2', icon: 'ion:git-branch-outline' },
+    ],
+  },
+];
+export const taskLeftTreeData: TreeItem[] = [
+  {
+    title: '所有任务流',
+    key: '0-0',
+    children: [
+      {
+        title: 'admin-个人工作区',
+        key: '0-0-0',
+        icon: 'ion:desktop-outline',
+        children: [
+          { title: '超时', key: '0-0-0-0', icon: 'ion:git-branch-outline' },
+          { title: 'test', key: '0-0-0-1', icon: 'ion:git-branch-outline' },
+          { title: 'sql', key: '0-0-0-2', icon: 'ion:git-branch-outline' },
+        ],
+      },
+      {
+        title: 'SLA场景验证',
+        key: '0-1-0',
+        icon: 'ion:desktop-outline',
+        children: [
+          { title: 'test', key: '0-1-0-0', icon: 'ion:git-branch-outline' },
+          { title: 'SLA-沟通流水', key: '0-1-0-1', icon: 'ion:git-branch-outline' },
+          { title: 'SLA-实时指标计算', key: '0-1-0-2', icon: 'ion:git-branch-outline' },
+          { title: 'sla分组件指标日批统计历史', key: '0-1-0-3', icon: 'ion:git-branch-outline' },
+          { title: 'SLA', key: '0-1-0-4', icon: 'ion:git-branch-outline' },
+        ],
+      },
+    ],
+  },
+];
+export const taskRightTreeData: TreeItem[] = [
+  {
+    title: '超时统计',
+    key: '0-0-0-0-0',
+    fk: '0-0-0-0',
+  },
+  {
+    title: '超时分组指标统计',
+    key: '0-0-0-0-1',
+    fk: '0-0-0-0',
+  },
+  {
+    title: 'task统计任务',
+    key: '0-0-0-1-1',
+    fk: '0-0-0-1',
+  },
+  {
+    title: 'task明细',
+    key: '0-0-0-1-1',
+    fk: '0-0-0-1',
+  },
+  {
+    title: 'sql统计',
+    key: '0-0-0-2-1',
+    fk: '0-0-0-2',
+  },
+  {
+    title: 'sql分组日统计',
+    key: '0-0-0-2-1',
+    fk: '0-0-0-2',
+  },
+  {
+    title: 'test明细',
+    key: '0-1-0-0-0',
+    fk: '0-1-0-0',
+  },
+  {
+    title: 'test指标-视图',
+    key: '0-1-0-0-1',
+    fk: '0-1-0-0',
+  },
+  {
+    title: 'test实时统计-临时视图',
+    key: '0-1-0-0-2',
+    fk: '0-1-0-0',
+  },
+  {
+    title: 'test频次统计',
+    key: '0-1-0-0-3',
+    fk: '0-1-0-0',
+  },
+  {
+    title: 'test分组统计',
+    key: '0-1-0-0-4',
+    fk: '0-1-0-0',
+  },
+  {
+    title: 'SLA明细信息',
+    key: '0-1-0-4-0',
+    fk: '0-1-0-4',
+  },
+  {
+    title: 'SLA分组指标日批次统计',
+    key: '0-1-0-4-0',
+    fk: '0-1-0-4',
+  },
+  {
+    title: 'sla沟通指标实时统计-视图',
+    key: '0-1-0-1-1',
+    fk: '0-1-0-1',
+  },
+  {
+    title: '全量加载',
+    key: '0-1-0-3-2',
+    fk: '0-1-0-3',
+  },
+  {
+    title: 'sla升级频次指标实时统计-临时视图',
+    key: '0-1-0-2-3',
+    fk: '0-1-0-2',
+  },
+  {
+    title: 'sla分组件指标日批统计',
+    key: '0-1-0-3-4',
+    fk: '0-1-0-3',
+  },
+  {
+    title: 'sla分组件指标实时统计-临时视图',
+    key: '0-1-0-3-5',
+    fk: '0-1-0-3',
+  },
+  {
+    title: 'sla升级频次指标实时统计',
+    key: '0-1-0-2-6',
+    fk: '0-1-0-2',
+  },
+];
+
+export const taskFlushData = [
+  {
+    name: 'SLA',
+    path: '/SLA场景验证',
+    config: false,
+  },
+];
+export const taskData = [
+  {
+    name: '全量加载',
+    path: '/SLA场景验证/SLA-实时指标计算',
+    config: false,
+  },
+  {
+    name: 'sla升级频次指标实时统计-临时视图',
+    path: '/SLA场景验证/SLA-实时指标计算',
+    config: false,
+  },
+];

src/views/taskScheduling/taskFlowDesign/index.vue

@@ -17,7 +17,7 @@
       <a-button type="primary">任务流配置</a-button>
       <a-button type="primary">参数设置</a-button>
       <a-button type="primary">任务列表</a-button>
-      <a-button type="primary">任务流依赖</a-button>
+      <a-button type="primary" @click="handleDepend">任务流依赖</a-button>
       <a-button type="primary">版本管理</a-button>
     </template>
     <template #footer>
@@ -26,8 +26,8 @@
           <a-button @click="handleOrderType"
             ><SwapRightOutlined :rotate="rotate" />按执行计划排序</a-button
           >
-          <a-button>复制</a-button>
-          <a-button>删除</a-button>
+          <a-button :disabled="getRowSelection().selectedRowKeys <= 0">复制</a-button>
+          <a-button :disabled="getRowSelection().selectedRowKeys <= 0">删除</a-button>
           <Dropdown :trigger="['click']">
             <a-button type="primary" @click.prevent><PlusOutlined />新建任务</a-button>
             <template #overlay>
@@ -103,6 +103,7 @@
     </template>
     <TaskModel @register="taskModel" />
     <UpstreamModel @register="upstreamTaskModel" />
+    <DependModel @register="dependModel" />
   </PageWrapper>
 </template>
 
@@ -155,12 +156,15 @@
   import { designData } from '@/views/taskScheduling/taskFlowDesign/designData';
   import { router } from '@/router';
   import UpstreamModel from './upstreamTaskModel.vue';
+  import DependModel from './dependModel.vue';
 
   const [taskModel, { openModal: openTaskModel }] = useModal();
   const [upstreamTaskModel, { openModal: openUpstreamModel }] = useModal();
+  const [dependModel, { openModal: openDependModel }] = useModal();
   const rotate = ref(90);
   const showType = ref('table');
   const searchInfo = reactive<Recordable>({});
+  const { createMessage } = useMessage();
   function handleRemove(record) {
     createMessage.success('删除成功!');
   }
@@ -179,7 +183,12 @@
       isUpdate: false,
     });
   }
-  const [registerTable, {}] = useTable({
+  function handleDepend() {
+    openDependModel(true, {
+      isUpdate: false,
+    });
+  }
+  const [registerTable, { getRowSelection }] = useTable({
     title: '',
     // 数据
     api: async (params) => {