任务流-禁用

src/views/taskScheduling/taskFlow/index.vue

 <template>
   <PageWrapper title="任务流" contentBackground headerSticky>
     <template #extra>
-      <div style="display: flex;">
+      <div style="display: flex">
         <div>
-          <a-button style="border-color:transparent">
-            <Icon icon="ant-design:caret-right-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:caret-right-outlined" style="color: blue" size="24" />
             <p>运行</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:send-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:send-outlined" style="color: blue" size="24" />
             <p>发布</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent "
-                    @click="batchOffline">
-            <Icon icon="ant-design:cloud-download-outlined" style="color: blue" size="24" />
+          <a-button
+            style="border-color: transparent"
+            @click="batchOffline"
+            :disabled="checkDisabled()"
+            type="link"
+          >
+            <Icon icon="ant-design:cloud-download-outlined" size="24" />
             <p>下线</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:tag-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:tag-outlined" style="color: blue" size="24" />
             <p>设置业务标签</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:reconciliation-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:reconciliation-outlined" style="color: blue" size="24" />
             <p>复制到</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:delete-outlined" style="color: red" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:delete-outlined" style="color: red" size="24" />
             <p>删除</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:folder-open-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:folder-open-outlined" style="color: blue" size="24" />
             <p>移动</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:arrow-up-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:arrow-up-outlined" style="color: blue" size="24" />
             <p>导出</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:arrow-down-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:arrow-down-outlined" style="color: blue" size="24" />
             <p>导入</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:folder-add-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:folder-add-outlined" style="color: blue" size="24" />
             <p>新建文件夹</p>
           </a-button>
         </div>
         <div>
-          <a-button style="border-color:transparent ">
-            <Icon icon="ant-design:plus-square-outlined" style="color: blue" size="24"/>
+          <a-button style="border-color: transparent">
+            <Icon icon="ant-design:plus-square-outlined" style="color: blue" size="24" />
             <p>新建文件</p>
           </a-button>
         </div>
@@ -73,14 +77,16 @@
     </template>
     <template #footer>
       <div class="flex">
-        <ModelTree class="w-1/4" @select="handleSelect"/>
+        <ModelTree class="w-1/4" @select="handleSelect" />
         <BasicTable
           class="w-3/4"
           @register="registerTable"
-          :searchInfo="searchInfo">
+          :searchInfo="searchInfo"
+          ref="rightTable"
+        >
           <template #tableTitle>
-            <div style="display: flex;align-items: center">
-              <BasicForm @register="registerForm" style="margin-bottom: -20px"/>
+            <div style="display: flex; align-items: center">
+              <BasicForm @register="registerForm" style="margin-bottom: -20px" />
             </div>
           </template>
           <template #bodyCell="{ column, record }">
@@ -88,40 +94,40 @@
               <TableAction
                 :actions="[
                   {
-                icon:'ant-design:exclamation-circle-outlined',
-                tooltip:'详情',
+                    icon: 'ant-design:exclamation-circle-outlined',
+                    tooltip: '详情',
                     onClick: handleConsanguinity.bind(null, record),
                     ifShow: () => {
                       return record.releaseStatus !== ''; // 这里只是实现树文件夹按钮
                     },
                   },
                   {
-                icon:'ant-design:caret-right-outlined',
-                tooltip:'运行',
+                    icon: 'ant-design:caret-right-outlined',
+                    tooltip: '运行',
                     onClick: RUN.bind(null, record),
                     ifShow: () => {
                       return record.releaseStatus === '已发布';
                     },
                   },
                   {
-                icon:'ant-design:cloud-download-outlined',
-                tooltip:'下线',
+                    icon: 'ant-design:cloud-download-outlined',
+                    tooltip: '下线',
                     onClick: handleOffline.bind(null, record),
                     ifShow: () => {
                       return record.releaseStatus !== ''; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
                     },
                   },
                   {
-                icon:'ant-design:send-outlined',
-                tooltip:'发布',
+                    icon: 'ant-design:send-outlined',
+                    tooltip: '发布',
                     onClick: flowPublish.bind(null, record),
                     ifShow: () => {
                       return record.releaseStatus !== ''; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
                     },
                   },
                   {
-                icon:'ant-design:android-outlined',
-                tooltip:'检查',
+                    icon: 'ant-design:android-outlined',
+                    tooltip: '检查',
                     onClick: check.bind(null, record),
                     ifShow: () => {
                       return record.releaseStatus !== ''; // 这里只是实现树文件夹按钮
@@ -130,17 +136,17 @@
                 ]"
                 :dropDownActions="[
                   {
-                icon:'ant-design:reconciliation-outlined',
+                    icon: 'ant-design:reconciliation-outlined',
                     label: '复制',
                     onClick: handleCopy.bind(null, record),
                   },
                   {
-                icon:'ant-design:delete-outlined',
+                    icon: 'ant-design:delete-outlined',
                     label: '删除',
                     onClick: apiDetail.bind(null, record),
                   },
                   {
-                icon:'ant-design:folder-open-outlined',
+                    icon: 'ant-design:folder-open-outlined',
                     label: '移动',
                     onClick: apiDetail.bind(null, record),
                   },
@@ -150,7 +156,7 @@
           </template>
           <template #name="{ text, record, column }">
             <a v-if="record.releaseStatus === '未发布'" @click="seeApi(record)">
-              <Icon icon="ant-design:node-index-outlined" :size="15" style="color:#0000ff;" />
+              <Icon icon="ant-design:node-index-outlined" :size="15" style="color: #0000ff" />
               {{ text }}
             </a>
             <span v-else>
@@ -165,36 +171,36 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-import {reactive, onMounted, ref} from 'vue';
-import {BasicTable, useTable, TableAction} from '@/components/Table';
-import {PageWrapper} from '@/components/Page';
-import {useMessage} from '@/hooks/web/useMessage';
-import {columns, searchFormSchema} from './taskFlow.data';
-import {tableList} from "./mock";
-import {useRoute, onBeforeRouteLeave} from 'vue-router';
-import {router} from '@/router';
-import Icon from "@/components/Icon/Icon.vue";
-import BasicForm from "@/components/Form/src/BasicForm.vue";
-import ModelTree from "@/views/taskScheduling/taskFlowDesign/ModelTree.vue";
-import {useModal} from "@/components/Modal";
-import CopyModal from "@/views/taskScheduling/taskFlowDesign/copyModal.vue";
-import CheckModal from "@/views/taskScheduling/taskFlow/CheckModal.vue";
+  import { reactive, onMounted, ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { columns, searchFormSchema } from './taskFlow.data';
+  import { tableList } from './mock';
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { router } from '@/router';
+  import Icon from '@/components/Icon/Icon.vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import ModelTree from '@/views/taskScheduling/taskFlowDesign/ModelTree.vue';
+  import { useModal } from '@/components/Modal';
+  import CopyModal from '@/views/taskScheduling/taskFlowDesign/copyModal.vue';
+  import CheckModal from '@/views/taskScheduling/taskFlow/CheckModal.vue';
 
-defineOptions({name: 'safetyLevelManage'});
-const {createMessage, createConfirm} = useMessage();
-const route = useRoute();
-let modelLevel = ref(1);
-const tableData = ref([]);
-const searchInfo = reactive<Recordable>({});
-const [copyModal, { openModal: openCopyModal }] = useModal();
-const [checkModal, { openModal: openCheckModal }] = useModal();
-const [registerTable, {getRowSelection, setTableData}] = useTable({
+  defineOptions({ name: 'SafetyLevelManage' });
+  const { createMessage, createConfirm } = useMessage();
+  const route = useRoute();
+  let modelLevel = ref(1);
+  const tableData = ref([]);
+  const searchInfo = reactive<Recordable>({});
+  const [copyModal, { openModal: openCopyModal }] = useModal();
+  const [checkModal, { openModal: openCheckModal }] = useModal();
+  const [registerTable, { getRowSelection, getSelectRows, setTableData }] = useTable({
     /*  title: '任务流',*/
     api: async (params) => {
       const response = {
-      pageNu: "1",
-      pageSize: "10",
-      pages: "1",
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
         total: tableData.value.length,
         code: '',
         message: '',
@@ -203,7 +209,7 @@ const [registerTable, {getRowSelection, setTableData}] = useTable({
       //按照部门筛选 如果有进行过滤相应部门的  没有就赋值全部
       let data = [];
       data = tableData.value.filter((item) => item.type === 'theme');
-    return {...response, data: data};
+      return { ...response, data: data };
     },
     rowKey: 'businessId',
     rowSelection: true,
@@ -221,9 +227,9 @@ const [registerTable, {getRowSelection, setTableData}] = useTable({
       title: '操作',
       dataIndex: 'action',
     },
-});
-/**右上*/
-const [registerForm] = useTable({
+  });
+  /**右上*/
+  const [registerForm] = useTable({
     schemas: searchFormSchema,
     //在 input 中输入时按回车自动提交
     autoSubmitOnEnter: true,
@@ -232,15 +238,15 @@ const [registerForm] = useTable({
     rowSelection: true,
     pagination: false,
     showIndexColumn: false,
-  scroll: {y: 300},
+    scroll: { y: 300 },
     showSummary: true,
-});
-onMounted(() => {
+  });
+  onMounted(() => {
     tableData.value = tableList;
-});
+  });
 
-/** 部门树的select*/
-function handleSelect(key) {
+  /** 部门树的select*/
+  function handleSelect(key) {
     console.log('asd');
     if (key !== null && key !== undefined) {
       modelLevel.value = key.split('-').length - 1;
@@ -268,85 +274,87 @@ function handleSelect(key) {
       );
       setTableData(data);
     }
-}
+  }
 
-/**查看API*/
-function seeApi(record) {
+  /**查看API*/
+  function seeApi(record) {
     router.push({
       path: '/taskScheduling/taskFlowDesign',
       query: {
-/*      businessId: record.businessId,
+        /*      businessId: record.businessId,
             name: record.name*/
       },
-  })
-}
-
+    });
+  }
 
-/**查看详情*/
-function detailButton(record) {
+  /**查看详情*/
+  function detailButton(record) {
     router.push({
       path: '/dataStandards/publicCode/detailPublicCode',
       query: {
         businessId: record.businessId,
       },
     });
-}
-
-/**血缘按钮跳转路由以及传值*/
-function handleConsanguinity(record: Recordable) {
-}
+  }
 
-/**设置按钮*/
-function Settings() {
+  /**血缘按钮跳转路由以及传值*/
+  function handleConsanguinity(record: Recordable) {}
 
-}
+  /**设置按钮*/
+  function Settings() {}
 
-/**运行按钮*/
-function RUN(record) {
+  /**运行按钮*/
+  function RUN(record) {
     record.releaseStatus = '运行中跳运维';
-}
+  }
 
-/**api详情按钮*/
-function apiDetail() {
+  /**api详情按钮*/
+  function apiDetail() {}
 
-}
-function flowPublish(record) {
+  function flowPublish(record) {
     record.releaseStatus = '已发布';
-}
-/**下线按钮*/
-function handleOffline(record) {
+  }
+
+  /**下线按钮*/
+  function handleOffline(record) {
     record.releaseStatus = '未发布';
-}
-/**批量下线按钮*/
-function batchOffline(record) {
+  }
+
+  /**批量下线按钮*/
+  function batchOffline(record) {
     openCheckModal(true, {
       isUpdate: false,
     });
     record.releaseStatus = '未发布';
-}
-/**检查按钮*/
-function check(record) {
+  }
+
+  /**检查按钮*/
+  function check(record) {
     openCheckModal(true, {
       isUpdate: false,
     });
-}
-/**复制按钮*/
-function handleCopy(record) {
+  }
+
+  /**复制按钮*/
+  function handleCopy(record) {
     openCopyModal(true, {
       isUpdate: false,
     });
-}
-/** 删除按钮*/
-function handleDelete(record: Recordable) {
+  }
+
+  /** 删除按钮*/
+  function handleDelete(record: Recordable) {
     const rowSelection = getRowSelection().selectedRowKeys;
     createMessage.success('删除成功!');
-}
-
-
-onMounted(() => {
-
-});
-
+  }
+  const rightTable = ref();
+  function checkDisabled() {
+    if (rightTable.value) {
+      return getSelectRows().length <= 0;
+    } else {
+      return true;
+    }
+  }
+  onMounted(() => {});
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>