任务流设计-任务操作

src/views/schedulingExecution/taskFlow/index.vue

+<template>
+
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/taskScheduling/taskFlowDesign/deleteModel.vue

@@ -126,7 +126,6 @@
     pagination: false,
   } as BasicTableProps);
   async function handleSubmit() {
-    createMessage.success('版本发布成功。');
     closeModal();
   }
 </script>

src/views/taskScheduling/taskFlowDesign/index.vue

@@ -18,7 +18,12 @@
       <a-button v-if="!versionFlag" type="primary">运行当前及下游</a-button>
       <a-button v-if="!versionFlag" type="primary">调试</a-button>
       <a-button v-if="!versionFlag" type="primary" @click="handleSave">保存</a-button>
-      <a-button v-if="!versionFlag" type="primary" @click="handleUpload">发布</a-button>
+      <a-button v-if="!versionFlag && !uploadFlag" type="primary" @click="handleUpload"
+        >发布</a-button
+      >
+      <a-button v-if="!versionFlag && uploadFlag" type="primary" @click="handleOffline"
+        >下线</a-button
+      >
       <div style="display: flex; flex-direction: column; text-align: center">
         <RadioGroup v-model:value="showType" button-style="solid" size="small">
           <RadioButton value="table"><UnorderedListOutlined /></RadioButton>
@@ -39,7 +44,9 @@
             ><SwapRightOutlined :rotate="rotate" />按执行计划排序</a-button
           >
           <a-button :disabled="getRowSelection().selectedRowKeys <= 0">复制</a-button>
-          <a-button :disabled="getRowSelection().selectedRowKeys <= 0">删除</a-button>
+          <a-button :disabled="getRowSelection().selectedRowKeys <= 0" @click="handleDeleteMore"
+            >删除</a-button
+          >
           <Dropdown :trigger="['click']">
             <a-button type="primary" @click.prevent><PlusOutlined />新建任务</a-button>
             <template #overlay>
@@ -116,9 +123,10 @@
     <UpstreamModel @register="upstreamTaskModel" />
     <DependModel @register="dependModel" />
     <TaskConfigModel @register="taskConfigModel" />
-    <UploadModel @register="uploadModel" />
+    <UploadModel @register="uploadModel" @set-upload-flag="setUploadFlag" />
     <VersionModel @register="versionModel" @set-version="setVersion" @show-dag="showDag" />
     <DeleteModel @register="deleteModel" />
+    <OfflineModel @register="offlineModel" @set-upload-flag="setUploadFlag" />
   </PageWrapper>
 </template>
 
@@ -178,6 +186,7 @@
   import UploadModel from './uploadModel.vue';
   import VersionModel from './versionModel.vue';
   import DeleteModel from './deleteModel.vue';
+  import OfflineModel from './offlineModel.vue';
 
   const [taskModel, { openModal: openTaskModel }] = useModal();
   const [upstreamTaskModel, { openModal: openUpstreamModel }] = useModal();
@@ -186,6 +195,7 @@
   const [uploadModel, { openModal: openUploadModel }] = useModal();
   const [versionModel, { openModal: openVersionModel }] = useModal();
   const [deleteModel, { openModal: openDeleteModel }] = useModal();
+  const [offlineModel, { openModal: openOfflineModel }] = useModal();
   const rotate = ref(90);
   const showType = ref('table');
   const searchInfo = reactive<Recordable>({});
@@ -252,6 +262,11 @@
       });
     }
   }
+  function handleDeleteMore() {
+    openDeleteModel(true, {
+      isUpdate: false,
+    });
+  }
   function handleOrderType() {
     rotate.value = rotate.value === 90 ? -90 : 90;
   }
@@ -293,6 +308,15 @@
       isUpdate: false,
     });
   }
+  const uploadFlag = ref(false);
+  function setUploadFlag(flag) {
+    uploadFlag.value = flag;
+  }
+  function handleOffline() {
+    openOfflineModel(true, {
+      isUpdate: false,
+    });
+  }
   function handleExit() {
     versionFlag.value = false;
   }

src/views/taskScheduling/taskFlowDesign/offlineModel.vue

+<template>
+  <BasicModal
+    width="70%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <Alert type="warning" show-icon message="任务流存在依赖或引用，请确认是否继续该操作？" />
+    <Row :gutter="16">
+      <Col :span="8">
+        <List>
+          <template v-for="item in delList1" :key="item.id">
+            <List.Item
+              style="cursor: pointer"
+              @click="handleChange(item)"
+              :style="{ backgroundColor: selectId === item.id ? '#DCEFFF' : null }"
+            >
+              <List.Item.Meta>
+                <template #avatar>
+                  <BranchesOutlined />
+                </template>
+                <template #title>
+                  <span>{{ item.title }}</span>
+                </template>
+              </List.Item.Meta>
+            </List.Item>
+          </template>
+        </List>
+      </Col>
+      <Col :span="8">
+        <BasicTable @register="registerTable" :searchInfo="searchInfo">
+          <template #headerCell="{ column }">
+            <template v-if="column.key === 'task'">
+              <span>下游依赖（{{ getDataSource().length }}）</span>
+            </template>
+          </template>
+        </BasicTable>
+      </Col>
+      <Col :span="8">
+        <BasicTable @register="rightTable" :searchInfo="searchInfo">
+          <template #headerCell="{ column }">
+            <template v-if="column.key === 'task'">
+              <span>被引入（{{ getRightList().length }}）</span>
+            </template>
+          </template>
+        </BasicTable>
+      </Col>
+    </Row>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { useTable, TableAction, BasicTableProps } from '@/components/Table';
+  import {ref, computed, unref, reactive, defineEmits} from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Select, Alert, List, Row, Col } from 'ant-design-vue';
+  import { BranchesOutlined } from '@ant-design/icons-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  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 {
+    delTableColumn1,
+    infoFormSchema,
+    uploadModelSchema,
+    upstreamTaskColumn,
+  } from '@/views/taskScheduling/taskFlowDesign/design.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { delList1, delList2, delList3 } from './designData.ts';
+
+  const emit = defineEmits(['setUploadFlag']);
+  const getTitle = '任务流依赖/引用提醒';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+  });
+  const searchInfo = reactive<Recordable>({});
+  const selectId = ref(1);
+  function handleChange(data) {
+    selectId.value = data.id;
+    let list = [...delList2];
+    setTableData([...list.filter((item) => item.fid === data.id)]);
+  }
+  const { createMessage } = useMessage();
+  const [registerTable, { getDataSource, setTableData }] = useTable({
+    title: '',
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        code: '',
+        message: '',
+        data: delList2,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: delTableColumn1,
+    striped: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    pagination: false,
+  } as BasicTableProps);
+  const [rightTable, { getDataSource: getRightList, setTableData: setRightList }] = useTable({
+    title: '',
+    // 数据
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        code: '',
+        message: '',
+        data: delList3,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    // 列
+    columns: delTableColumn1,
+    striped: false,
+    showTableSetting: false,
+    showIndexColumn: false,
+    pagination: false,
+  } as BasicTableProps);
+  async function handleSubmit() {
+    closeModal();
+    emit('setUploadFlag', false);
+    createMessage.success('下线成功');
+  }
+</script>

src/views/taskScheduling/taskFlowDesign/uploadModel.vue

@@ -31,10 +31,12 @@
   import { useMessage } from '@/hooks/web/useMessage';
 
   const getTitle = '发布新版本';
+  const emit = defineEmits(['setUploadFlag']);
   //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false });
   });
+
   const [register] = useForm({
     labelWidth: 100,
     baseColProps: { lg: 12, md: 24 },
@@ -49,5 +51,6 @@
   async function handleSubmit() {
     createMessage.success('版本发布成功。');
     closeModal();
+    emit('setUploadFlag', true);
   }
 </script>