任务流设置

src/views/taskScheduling/taskFlow/addNewFolder.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { computed, defineEmits } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {addNewFolderFormSchema} from "@/views/taskScheduling/taskFlow/taskFlow.data";
+
+  // 初始化
+  const emit = defineEmits(['success']);
+  const getTitle = computed(() => '新建文件夹');
+  // 数据
+  /**
+   * 方法
+   */
+  // 确定按钮
+  async function handleSubmit() {
+    await validate();
+    emit('success');
+    closeModal();
+  }
+  /**
+   * 表单
+   */
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 24 },
+    schemas: addNewFolderFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  /**
+   * 弹窗
+   */
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    const formData = {
+      taskId: '100',
+    };
+    // 塞值
+    await setFieldsValue({
+      ...formData,
+    });
+  });
+</script>

src/views/taskScheduling/taskFlow/checkModal.vue

@@ -6,33 +6,36 @@
     :title="getTitle"
     @ok="handleSubmit"
   >
-    <BasicTable @register="registerTable" ref="selectTable">
-    </BasicTable>
+    <BasicTable @register="registerTable" ref="selectTable" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { BasicModal, useModalInner } from '@/components/Modal';
-import {BasicTable, useTable} from "@/components/Table";
-import {checkColumn} from "@/views/taskScheduling/taskFlow/taskFlow.data";
-import {TableData} from "./mock";
-const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
-  setModalProps({
-    confirmLoading: false,
-    okText: '忽略并继续执行',
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { checkColumn } from '@/views/taskScheduling/taskFlow/taskFlow.data';
+  import { TableData } from './mock';
+  import {defineEmits} from "vue";
+
+  const emit = defineEmits(['success']);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({
+      confirmLoading: false,
+      okText: '忽略并继续执行',
+    });
+  });
+  const [registerTable] = useTable({
+    dataSource: TableData,
+    columns: checkColumn,
+    pagination: false,
+    showIndexColumn: false,
+    scroll: { y: 300 },
+    showSummary: true,
   });
-});
-const [registerTable] = useTable({
-  dataSource: TableData,
-  columns: checkColumn,
-  pagination: false,
-  showIndexColumn: false,
-  scroll: {y: 300},
-  showSummary: true,
-});
 
-const getTitle = '检查';
-/**确定按钮*/
-async function handleSubmit() {
-  closeModal();
-}
+  const getTitle = '检查';
+  /**确定按钮*/
+  async function handleSubmit() {
+    emit('success');
+    closeModal();
+  }
 </script>

src/views/taskScheduling/taskFlow/index.vue

@@ -9,7 +9,7 @@
           </a-button>
         </div>
         <div>
-          <a-button type="link" :disabled="checkDisabled()">
+          <a-button type="link" :disabled="checkDisabled()" @click="handleUpload">
             <Icon icon="ant-design:send-outlined" size="24" />
             <p style="color: black">发布</p>
           </a-button>
@@ -27,13 +27,13 @@
           </a-button>
         </div>
         <div>
-          <a-button type="link" :disabled="checkDisabled()">
+          <a-button type="link" :disabled="checkDisabled()" @click="handleCopy">
             <Icon icon="ant-design:reconciliation-outlined" size="24" />
             <p style="color: black">复制到</p>
           </a-button>
         </div>
         <div>
-          <a-button type="link" :disabled="checkDisabled()">
+          <a-button type="link" :disabled="checkDisabled()" @click="handleDelete">
             <Icon
               icon="ant-design:delete-outlined"
               :style="{ color: checkDisabled() ? null : 'red' }"
@@ -43,7 +43,7 @@
           </a-button>
         </div>
         <div>
-          <a-button type="link" :disabled="checkDisabled()">
+          <a-button type="link" :disabled="checkDisabled()" @click="handleMove">
             <Icon icon="ant-design:folder-open-outlined" size="24" />
             <p style="color: black">移动</p>
           </a-button>
@@ -61,7 +61,7 @@
           </a-button>
         </div>
         <div>
-          <a-button type="link">
+          <a-button type="link" @click="handleNewFolder">
             <Icon icon="ant-design:folder-add-outlined" size="24" />
             <p style="color: black">新建文件夹</p>
           </a-button>
@@ -142,12 +142,12 @@
                   {
                     icon: 'ant-design:delete-outlined',
                     label: '删除',
-                    onClick: apiDetail.bind(null, record),
+                    onClick: handleDelete.bind(null, record),
                   },
                   {
                     icon: 'ant-design:folder-open-outlined',
                     label: '移动',
-                    onClick: apiDetail.bind(null, record),
+                    onClick: handleMove.bind(null, record),
                   },
                 ]"
               />
@@ -166,7 +166,10 @@
       </div>
     </template>
     <CopyModal @register="copyModal" />
-    <CheckModal @register="checkModal" />
+    <MoveModal @register="moveModal" @success="moveSuccess" />
+    <CheckModal @register="checkModal" @success="checkSuccess" />
+    <AddNewFolder @register="addNewFolder" @success="AddNewFolderSuccess" />
+    <UploadModel @register="uploadModel" @success="uploadSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -183,7 +186,10 @@
   import ModelTree from '@/views/taskScheduling/taskFlowDesign/ModelTree.vue';
   import { useModal } from '@/components/Modal';
   import CopyModal from '@/views/taskScheduling/taskFlowDesign/copyModal.vue';
+  import MoveModal from '@/views/taskScheduling/taskFlow/moveModal.vue';
   import CheckModal from '@/views/taskScheduling/taskFlow/CheckModal.vue';
+  import AddNewFolder from './addNewFolder.vue';
+  import UploadModel from '@/views/taskScheduling/taskFlowDesign/uploadModel.vue';
 
   defineOptions({ name: 'SafetyLevelManage' });
   const { createMessage, createConfirm } = useMessage();
@@ -192,7 +198,10 @@
   const tableData = ref([]);
   const searchInfo = reactive<Recordable>({});
   const [copyModal, { openModal: openCopyModal }] = useModal();
+  const [moveModal, { openModal: openMoveModal }] = useModal();
   const [checkModal, { openModal: openCheckModal }] = useModal();
+  const [addNewFolder, { openModal: openAddNewFolder }] = useModal();
+  const [uploadModel, { openModal: openUploadModel }] = useModal();
   const [registerTable, { getRowSelection, getSelectRows, setTableData, setSelectedRows }] =
     useTable({
       /*  title: '任务流',*/
@@ -309,15 +318,14 @@
     record.releaseStatus = '运行中跳运维';
   }
 
-  /**api详情按钮*/
-  function apiDetail() {}
-
   function flowPublish(record) {
+    handleUpload();
     record.releaseStatus = '已发布';
   }
 
   /**下线按钮*/
   function handleOffline(record) {
+    batchOffline(record);
     record.releaseStatus = '未发布';
   }
 
@@ -345,8 +353,17 @@
 
   /** 删除按钮*/
   function handleDelete(record: Recordable) {
-    const rowSelection = getRowSelection().selectedRowKeys;
-    createMessage.success('删除成功!');
+    createConfirm({
+      iconType: 'warning',
+      title: '确认删除',
+      content: '确认批量删除选中的数据吗？',
+      onOk() {
+        createMessage.success('删除成功!');
+      },
+    });
+  }
+  function handleNewFolder() {
+    openAddNewFolder(true, {});
   }
   const rightTable = ref();
   function checkDisabled() {
@@ -356,6 +373,26 @@
       return true;
     }
   }
+  function AddNewFolderSuccess() {
+    createMessage.success('创建成功！');
+  }
+  function handleUpload() {
+    openUploadModel(true, {
+      isUpdate: false,
+    });
+  }
+  function uploadSuccess() {
+    createMessage.success('版本发布成功！');
+  }
+  function checkSuccess() {
+    createMessage.success('下线成功！');
+  }
+  function handleMove() {
+    openMoveModal(true, {});
+  }
+  function moveSuccess() {
+    createMessage.success('移动成功！');
+  }
   onMounted(() => {});
 </script>
 <style lang="scss" scoped></style>

src/views/taskScheduling/taskFlow/moveModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #path="{ field, model }">
+        <InputSearch v-model:value="model[field]" enter-button="选择" @search="handleSearch" />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {defineEmits, ref, unref} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { copyFormSchema } from '@/views/taskScheduling/taskFlowDesign/design.data';
+  import { BaseFormatProps } from 'vue-i18n';
+  import { InputSearch } from 'ant-design-vue';
+
+  const emit = defineEmits(['success']);
+  const isUpdate = ref(false);
+  const isMove = ref(false);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+
+    schemas: copyFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  } as BaseFormatProps);
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isMove.value = !!data?.isMove;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  const getTitle = '移动';
+
+  function handleSearch() {}
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+    emit('success');
+  }
+</script>

src/views/taskScheduling/taskFlow/taskFlow.data.ts

-import {BasicColumn, FormSchema} from "@/components/Table";
-import {TreeItem} from "@/components/Tree";
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { TreeItem } from '@/components/Tree';
+import { TreeProps } from 'ant-design-vue/es/tree/Tree';
 
 /** 列表展示字段*/
 export const columns: BasicColumn[] = [
@@ -60,7 +61,7 @@ export const searchFormSchema: FormSchema[] = [
     field: 'name',
     label: '',
     component: 'InputSearch',
-    colProps: { span: 20},
+    colProps: { span: 20 },
     componentProps: {
       placeholder: '输入关键字搜索',
       onChange: (e: any) => {
@@ -102,3 +103,22 @@ export const taskTreeData: TreeItem[] = [
     ],
   },
 ];
+export const addNewFolderFormSchema: FormSchema[] = [
+  {
+    label: '文件夹路径',
+    field: 'path',
+    component: 'TreeSelect',
+    componentProps: {
+      fieldNames: {
+        value: 'key',
+      },
+      treeData: taskTreeData,
+    } as TreeProps,
+  },
+  {
+    label: '文件夹名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+  },
+];

src/views/taskScheduling/taskFlowDesign/copyModal.vue

@@ -6,11 +6,7 @@
     :title="getTitle"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm">
-      <template #path="{ field, model }">
-        <InputSearch v-model:value="model[field]" enter-button="选择" @search="handleSearch" />
-      </template>
-    </BasicForm>
+    <BasicForm @register="registerForm" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -19,7 +15,6 @@
   import { BasicForm, useForm } from '@/components/Form';
   import { copyFormSchema } from '@/views/taskScheduling/taskFlowDesign/design.data';
   import { BaseFormatProps } from 'vue-i18n';
-  import { InputSearch } from 'ant-design-vue';
 
   const isUpdate = ref(false);
   const isMove = ref(false);
@@ -54,7 +49,6 @@
 
   const getTitle = '复制到';
 
-  function handleSearch() {}
   /**确定按钮*/
   async function handleSubmit() {
     await validate();

src/views/taskScheduling/taskFlowDesign/index.vue

@@ -173,7 +173,7 @@
     <UpstreamModel @register="upstreamTaskModel" />
     <DependModel @register="dependModel" />
     <TaskConfigModel @register="taskConfigModel" />
-    <UploadModel @register="uploadModel" @set-upload-flag="setUploadFlag" />
+    <UploadModel @register="uploadModel" @success="uploadSuccess" />
     <VersionModel @register="versionModel" @set-version="setVersion" @show-dag="showDag" />
     <DeleteModel @register="deleteModel" @success="handleDelelte" />
     <OfflineModel @register="offlineModel" @set-upload-flag="setUploadFlag" />
@@ -435,7 +435,10 @@
   function setUploadFlag(flag) {
     uploadFlag.value = flag;
   }
-
+  function uploadSuccess() {
+    createMessage.success('版本发布成功！');
+    uploadFlag.value = true;
+  }
   function handleOffline() {
     openOfflineModel(true, {
       isUpdate: false,

src/views/taskScheduling/taskFlowDesign/uploadModel.vue

@@ -31,7 +31,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
 
   const getTitle = '发布新版本';
-  const emit = defineEmits(['setUploadFlag']);
+  const emit = defineEmits(['success']);
   //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false });
@@ -49,8 +49,7 @@
   /**确定按钮*/
   const { createMessage } = useMessage();
   async function handleSubmit() {
-    createMessage.success('版本发布成功！');
     closeModal();
-    emit('setUploadFlag', true);
+    emit('success');
   }
 </script>