任务流设计-删除

src/views/taskScheduling/taskFlowDesign/deleteModel.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 } 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 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() {
+    createMessage.success('版本发布成功。');
+    closeModal();
+  }
+</script>

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

@@ -1009,3 +1009,9 @@ export const uploadModelSchema: FormSchema[] = [
     colProps: { lg: 24, md: 24 },
   },
 ];
+export const delTableColumn1: BasicColumn[] = [
+  {
+    dataIndex: 'task',
+    width: 150,
+  },
+];

src/views/taskScheduling/taskFlowDesign/designData.ts

@@ -305,3 +305,28 @@ export const versionStreamData = [
     remark: null,
   },
 ];
+export const delList1 = [
+  {
+    id: 1,
+    title: 'slark_test/test',
+  },
+  {
+    id: 2,
+    title: 'slark_test/act',
+  },
+];
+export const delList2 = [
+  {
+    fid: 1,
+    task: 'slark_test/test2',
+  },
+  {
+    fid: 1,
+    task: 'slark_test/test23',
+  },
+  {
+    fid: 2,
+    task: 'slark_test/act3',
+  },
+];
+export const delList3 = [];

src/views/taskScheduling/taskFlowDesign/index.vue

@@ -17,7 +17,7 @@
       <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">调试</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>
       <div style="display: flex; flex-direction: column; text-align: center">
         <RadioGroup v-model:value="showType" button-style="solid" size="small">
@@ -96,11 +96,7 @@
                 {
                   // 删除
                   icon: 'ant-design:delete-outlined',
-                  popConfirm: {
-                    title: '是否确认删除',
-                    placement: 'left',
-                    confirm: handleRemove.bind(null, record),
-                  },
+                  onClick: handleRemove.bind(null, record),
                   color: 'error',
                 },
               ]"
@@ -121,13 +117,14 @@
     <DependModel @register="dependModel" />
     <TaskConfigModel @register="taskConfigModel" />
     <UploadModel @register="uploadModel" />
-    <VersionModel @register="versionModle" @set-version="setVersion" @show-dag="showDag" />
+    <VersionModel @register="versionModel" @set-version="setVersion" @show-dag="showDag" />
+    <DeleteModel @register="deleteModel" />
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
   import TaskModel from './taskModel.vue';
-  import { reactive, onMounted, ref, nextTick } from 'vue';
+  import { reactive, onMounted, ref, nextTick, computed } from 'vue';
   import {
     SettingOutlined,
     UnorderedListOutlined,
@@ -179,18 +176,20 @@
   import DependModel from './dependModel.vue';
   import TaskConfigModel from './taskConfigModel.vue';
   import UploadModel from './uploadModel.vue';
-  import VersionModel from './versionModle.vue';
+  import VersionModel from './versionModel.vue';
+  import DeleteModel from './deleteModel.vue';
 
   const [taskModel, { openModal: openTaskModel }] = useModal();
   const [upstreamTaskModel, { openModal: openUpstreamModel }] = useModal();
   const [dependModel, { openModal: openDependModel }] = useModal();
   const [taskConfigModel, { openModal: openTaskConfigModel }] = useModal();
   const [uploadModel, { openModal: openUploadModel }] = useModal();
-  const [versionModle, { openModal: openVersionModel }] = useModal();
+  const [versionModel, { openModal: openVersionModel }] = useModal();
+  const [deleteModel, { openModal: openDeleteModel }] = useModal();
   const rotate = ref(90);
   const showType = ref('table');
   const searchInfo = reactive<Recordable>({});
-  const { createMessage } = useMessage();
+  const { createMessage, createConfirm } = useMessage();
   const versionFlag = ref(false);
   const version = ref();
   const versionOptions = [
@@ -238,7 +237,20 @@
     showType.value = 'chart';
   }
   function handleRemove(record) {
-    createMessage.success('删除成功!');
+    if (record.task) {
+      openDeleteModel(true, {
+        isUpdate: false,
+      });
+    } else {
+      createConfirm({
+        iconType: 'warning',
+        title: '确认删除',
+        content: '确认删除这条数据吗？',
+        onOk() {
+          createMessage.success('删除成功!');
+        },
+      });
+    }
   }
   function handleOrderType() {
     rotate.value = rotate.value === 90 ? -90 : 90;
@@ -270,6 +282,12 @@
       isUpdate: false,
     });
   }
+  function handleDelete() {}
+  function handleSave() {
+    // createMessage.warning('当前任务流出现多个名为***的同名任务，请检查');
+    // createMessage.warning('当前任务流中名称为***的任务的独立周期配置不是当前任务流调度周期的子集，请检查');
+    // createMessage.warning('任务流【uuid***，名称：***】和任务流[uuid***,名称：**]存在环形依赖关系，请处理');
+  }
   function handleUpload() {
     openUploadModel(true, {
       isUpdate: false,
@@ -315,6 +333,7 @@
       dataIndex: 'action',
     },
   });
+  onMounted(() => {});
 </script>
 
 <style scoped></style>