修改质量任务表格顶部操作栏按钮

src/views/dataQuality/dataSheet/task/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect"/>
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
       <template #toolbar>
         <a-scrollbar>
           <a-button
-            :disabled="getRowSelection().selectedRowKeys <= 0"
             type="primary"
-            @click="handleDeleteIds"
-            style="margin-right: 10px"
-            >删除</a-button
-          >
+            @click="handleQualityTaskOnline"
+            v-if="isOnline"
+            :disabled="getRowSelection().selectedRowKeys <= 0"
+            style="margin-right: 10px">批量上线
+          </a-button>
+          <a-button
+            type="error"
+            @click="handleQualityTaskOffline"
+            v-if="isOffline"
+            style="margin-right: 10px">批量下线
+          </a-button>
+          <a-button type="primary" @click="handleBusinessLabel" style="margin-right: 10px">设置业务标签
+          </a-button>
+          <a-button type="primary" @click="handleCopyTo" style="margin-right: 10px">复制到
+          </a-button>
           <a-button
             :disabled="getRowSelection().selectedRowKeys <= 0"
             type="primary"
-            style="margin-right: 10px"
-            >导出</a-button
-          >
+            @click="handleDeleteIds"
+            style="margin-right: 10px">删除
+          </a-button>
           <a-button type="primary" @click="handleImport" style="margin-right: 10px">导入</a-button>
-          <a-button type="primary" @click="handleAdd" style="margin-right: 10px"
-            >新增文件夹</a-button
-          >
-          <a-button type="primary" @click="handleAddMainBody" style="margin-right: 10px"
-            >新增质量任务文件</a-button
-          >
-
           <a-button
-            type="primary"
-            @click="handleQualityTaskSetting"
             :disabled="getRowSelection().selectedRowKeys <= 0"
-            style="margin-right: 10px"
-            >配置质量任务文件</a-button
-          >
-          <a-button type="primary" @click="handleAddQualityRule" style="margin-right: 10px"
-            >新增质量规则</a-button
-          >
-          <a-button
             type="primary"
-            @click="handleAlarmSetting"
-            :disabled="getRowSelection().selectedRowKeys <= 0"
-            style="margin-right: 10px"
-            >配置通知告警</a-button
-          >
+            style="margin-right: 10px">导出
+          </a-button>
+          <a-button type="primary" @click="handleAdd" style="margin-right: 10px">新增文件夹
+          </a-button>
+          <a-button type="primary" @click="handleAddMainBody" style="margin-right: 10px">新增质量任务
+          </a-button>
+          <!--          <a-button-->
+          <!--            type="primary"-->
+          <!--            @click="handleQualityTaskSetting"-->
+          <!--            :disabled="getRowSelection().selectedRowKeys <= 0"-->
+          <!--            style="margin-right: 10px">配置质量任务文件-->
+          <!--          </a-button>-->
+          <!--          <a-button type="primary" @click="handleAddQualityRule" style="margin-right: 10px">新增质量规则-->
+          <!--          </a-button>-->
+          <!--          <a-button-->
+          <!--            type="primary"-->
+          <!--            @click="handleAlarmSetting"-->
+          <!--            :disabled="getRowSelection().selectedRowKeys <= 0"-->
+          <!--            style="margin-right: 10px">配置通知告警-->
+          <!--          </a-button>-->
           <!--          <a-button-->
           <!--            type="primary"-->
           <!--            @click="handleQualityTaskRunSetting"-->
@@ -60,9 +69,9 @@
           <!--            :disabled="getRowSelection().selectedRowKeys <= 0"-->
           <!--            >查看报告</a-button-->
           <!--          >-->
-          <a-button type="primary" @click="handleAddCheckRangePlus" style="margin-right: 10px"
-            >添加检查范围-增量添加</a-button
-          >
+<!--          <a-button type="primary" @click="handleAddCheckRangePlus" style="margin-right: 10px">-->
+<!--            添加检查范围-增量添加-->
+<!--          </a-button>-->
           <!-- <a-button type="primary" @click="handleAddCheckRangeAll">添加检查范围-全量添加</a-button> -->
           <!--          <a-button-->
           <!--            type="primary"-->
@@ -71,28 +80,13 @@
           <!--            :disabled="getRowSelection().selectedRowKeys <= 0"-->
           <!--            >上线</a-button-->
           <!--          >-->
-          <a-button
-            type="primary"
-            @click="handleQualityTaskOnline"
-            v-if="isOnline"
-            :disabled="getRowSelection().selectedRowKeys <= 0"
-            style="margin-right: 10px"
-            >批量上线</a-button
-          >
-<!--          <a-button-->
-<!--            type="warning"-->
-<!--            @click="handleQualityTaskOffline"-->
-<!--            v-if="isOffline"-->
-<!--            style="margin-right: 10px"-->
-<!--            >下线</a-button-->
-<!--          >-->
-          <a-button
-            type="error"
-            @click="handleQualityTaskOffline"
-            v-if="isOffline"
-            style="margin-right: 10px"
-            >批量下线</a-button
-          >
+          <!--          <a-button-->
+          <!--            type="warning"-->
+          <!--            @click="handleQualityTaskOffline"-->
+          <!--            v-if="isOffline"-->
+          <!--            style="margin-right: 10px"-->
+          <!--            >下线</a-button-->
+          <!--          >-->
           <!--          <a-button-->
           <!--            type="primary"-->
           <!--            @click="handleQualityTaskService"-->
@@ -130,64 +124,61 @@
         </template>
       </template>
     </BasicTable>
-    <importModal @register="registerImport" @success="handleImportSuccess" />
-    <AddFolder @register="register" />
-    <remove-modal @register="registerRemove" />
-    <main-body-modal @register="registerMain" />
-    <quality-Run-setting-modal @register="registerRunSetting" />
-    <quality-setting-modal @register="registerSettingModal" />
-    <new-rule-modal @register="registerNewRule" />
-    <alarm-setting-modal @register="registerAlarmSettingModal" />
-    <quality-check-range-plus-modal @register="registerCheckRangePlusModal" />
+    <importModal @register="registerImport" @success="handleImportSuccess"/>
+    <AddFolder @register="register"/>
+    <remove-modal @register="registerRemove"/>
+    <main-body-modal @register="registerMain"/>
+    <quality-Run-setting-modal @register="registerRunSetting"/>
+    <quality-setting-modal @register="registerSettingModal"/>
+    <new-rule-modal @register="registerNewRule"/>
+    <alarm-setting-modal @register="registerAlarmSettingModal"/>
+    <quality-check-range-plus-modal @register="registerCheckRangePlusModal"/>
   </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 DeptTree from './DeptTree.vue';
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { useModal } from '@/components/Modal';
-  import importModal from './importModal.vue';
-  import { tableList } from './mock';
-  import { columns, searchFormSchema } from './mainBody.data';
-  import { useGo } from '@/hooks/web/usePage';
-  import { useRoute, onBeforeRouteLeave } from 'vue-router';
-  import { useFilterStore } from '@/store/modules/filterData';
-  import { router } from '@/router';
-  import AddFolder from '@/views/dataQuality/dataSheet/task/addFolder.vue';
-  import RemoveModal from '@/views/dataQuality/dataSheet/task/removeModal.vue';
-  import MainBodyModal from '@/views/dataQuality/dataSheet/task/mainBodyModal.vue';
-  import QualityRunSettingModal from './QualityTaskRunSetting.vue';
-  import QualitySettingModal from './QualityTaskSetting.vue';
-  import NewRuleModal from './QualityTaskNewRule.vue';
-  import AlarmSettingModal from './QualityTaskAlarmSetting.vue';
-  import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue';
-  import { Modal } from 'ant-design-vue';
+import {reactive, onMounted, ref} from 'vue';
+import {BasicTable, useTable, TableAction} from '@/components/Table';
+import {PageWrapper} from '@/components/Page';
+import DeptTree from './DeptTree.vue';
+import {useMessage} from '@/hooks/web/useMessage';
+import {useModal} from '@/components/Modal';
+import {tableList} from './mock';
+import {columns, searchFormSchema} from './mainBody.data';
+import {useGo} from '@/hooks/web/usePage';
+import {useRoute, onBeforeRouteLeave} from 'vue-router';
+import {useFilterStore} from '@/store/modules/filterData';
+import {router} from '@/router';
+import AddFolder from '@/views/dataQuality/dataSheet/task/addFolder.vue';
+import RemoveModal from '@/views/dataQuality/dataSheet/task/removeModal.vue';
+import MainBodyModal from '@/views/dataQuality/dataSheet/task/mainBodyModal.vue';
+import QualitySettingModal from './QualityTaskSetting.vue';
+import NewRuleModal from './QualityTaskNewRule.vue';
+import AlarmSettingModal from './QualityTaskAlarmSetting.vue';
+import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue';
+import {Modal} from 'ant-design-vue';
 
-  defineOptions({ name: 'AccountManagement' });
-  const { createMessage, createConfirm } = useMessage();
-  const filterStore = useFilterStore();
-  const route = useRoute();
-  const go = useGo();
-  const isWhite = ref(false);
-  const isOnline = ref(true);
-  const isOffline = ref(false);
-  // const isRunning = ref(false);
-  const [register, { openModal }] = useModal();
-  const [registerImport, { openModal: openImportModal }] = useModal();
-  const [registerRemove, { openModal: openRemoveModal }] = useModal();
-  const [registerMain, { openModal: openMainModal }] = useModal();
-  const [registerNewRule, { openModal: openNewRuleModal }] = useModal();
-  const [registerRunSetting, { openModal: openRunSettingModal }] = useModal();
-  const [registerSettingModal, { openModal: openSettingModal }] = useModal();
-  const [registerAlarmSettingModal, { openModal: openAlarmSettingModal }] = useModal();
-  const [registerCheckRangePlusModal, { openModal: openCheckRangePlusModal }] = useModal();
-  const searchInfo = reactive<Recordable>({});
-  const [
+defineOptions({name: 'AccountManagement'});
+const {createMessage, createConfirm} = useMessage();
+const filterStore = useFilterStore();
+const route = useRoute();
+const go = useGo();
+const isWhite = ref(false);
+const isOnline = ref(true);
+const isOffline = ref(false);
+const [register, {openModal}] = useModal();
+const [registerImport, {openModal: openImportModal}] = useModal();
+const [registerRemove, {openModal: openRemoveModal}] = useModal();
+const [registerMain, {openModal: openMainModal}] = useModal();
+const [registerNewRule, {openModal: openNewRuleModal}] = useModal();
+const [registerRunSetting, {openModal: openRunSettingModal}] = useModal();
+const [registerSettingModal, {openModal: openSettingModal}] = useModal();
+const [registerAlarmSettingModal, {openModal: openAlarmSettingModal}] = useModal();
+const [registerCheckRangePlusModal, {openModal: openCheckRangePlusModal}] = useModal();
+const searchInfo = reactive<Recordable>({});
+const [
   registerTable,
-    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
-  ] = useTable({
+  {reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection},
+] = useTable({
   title: '质量任务列表',
   api: async (params) => {
     console.log('tableList', tableList);
@@ -200,8 +191,7 @@
       message: '',
       data: tableList,
     };
-
-      return { ...response };
+    return {...response};
   },
   rowKey: 'businessId',
   rowSelection: true,
@@ -227,52 +217,61 @@
     dataIndex: 'action',
     // slots: { customRender: 'action' },
   },
-  });
+});
 
-  function showDetails(record) {
+function showDetails(record) {
   router.push({
     path: '/mainBody/details',
   });
-  }
-  /** 导入按钮*/
-  function handleImport() {
+}
+
+/** 导入按钮*/
+function handleImport() {
   openImportModal(true, {});
-  }
-  /** 新建文件夹*/
-  function handleAdd() {
+}
+
+/** 新建文件夹*/
+function handleAdd() {
   openModal(true, {});
-  }
-  function handleRemove() {
+}
+
+function handleRemove() {
   openRemoveModal(true, {});
-  }
-  /** 新建质量任务文件*/
-  function handleAddMainBody() {
+}
+
+/** 新建质量任务文件*/
+function handleAddMainBody() {
   openMainModal(true, {
     isUpdate: false,
   });
-  }
-  /** 新增质量规则*/
-  function handleAddQualityRule() {
+}
+
+/** 新增质量规则*/
+function handleAddQualityRule() {
   go('/dataQuality/dataSheet/rule');
-  }
-  /** 配置通知告警*/
-  function handleAlarmSetting() {
+}
+
+/** 配置通知告警*/
+function handleAlarmSetting() {
   openAlarmSettingModal(true, {
     isUpdate: false,
   });
-  }
-  /**   配置质量任务 未完成 应为弹窗 */
-  function handleQualityTaskSetting() {
+}
+
+/**   配置质量任务 未完成 应为弹窗 */
+function handleQualityTaskSetting() {
   openSettingModal(true, {});
-  }
-  /** 配置运行 正在做 应为弹窗*/
-  function handleQualityTaskRunSetting() {
+}
+
+/** 配置运行 正在做 应为弹窗*/
+function handleQualityTaskRunSetting() {
   openRunSettingModal(true, {
     isRunning: false,
   });
-  }
-  /** 任务运行*/
-  function handleQualityTaskRun() {
+}
+
+/** 任务运行*/
+function handleQualityTaskRun() {
   Modal.confirm({
     title: '确认运行',
     content: '是否运行选中的任务?',
@@ -280,40 +279,56 @@
       createMessage.success('运行成功!');
     },
   });
-  }
-  /** 查看报告 正在做 应为跳转到报告页面*/
-  function handleQualityTaskRunLog() {
+}
+
+/** 查看报告 正在做 应为跳转到报告页面*/
+function handleQualityTaskRunLog() {
   go('/dataQuality/dataSheet/task/viewTaskOperation', false);
-  }
-  /** 添加检查范围*/
-  function handleAddCheckRangePlus() {
+}
+
+/** 添加检查范围*/
+function handleAddCheckRangePlus() {
   openCheckRangePlusModal(true, {});
-  }
-  /** 上线 未完成 应为弹窗*/
-  function handleQualityTaskOnline() {
+}
+
+/** 上线 未完成 应为弹窗*/
+function handleQualityTaskOnline() {
   go('/dataQuality/dataSheet/task');
   isOnline.value = false;
   isOffline.value = true;
-  }
-  /** 下线 未完成 应为弹窗*/
-  function handleQualityTaskOffline() {
+}
+
+/** 下线 未完成 应为弹窗*/
+function handleQualityTaskOffline() {
   go('/dataQuality/dataSheet/task');
   isOnline.value = true;
   isOffline.value = false;
-  }
-  /** 跳转运维 未完成 应为跳转到运维界面*/
-  function handleQualityTaskService() {
+}
+
+/** 设置业务标签 */
+function handleBusinessLabel() {
+
+}
+
+/** 复制到 */
+function handleCopyTo() {
+
+}
+
+/** 跳转运维 未完成 应为跳转到运维界面*/
+function handleQualityTaskService() {
   go('/dataQuality/dataSheet/task/taskOperation');
-  }
+}
 
-  /** 编辑按钮*/
-  function handleEdit(record: Recordable) {
+/** 编辑按钮*/
+function handleEdit(record: Recordable) {
   openMainModal(true, {
     record,
     isUpdate: true,
   });
-  }
-  function handleDeleteIds() {
+}
+
+function handleDeleteIds() {
   createConfirm({
     iconType: 'warning',
     title: '确认删除',
@@ -322,21 +337,26 @@
       createMessage.success('批量删除成功!');
     },
   });
-  }
-  /** 重置密码弹窗确定按钮*/
-  /** 删除按钮*/
-  function handleDelete(record: Recordable) {
+}
+
+/** 重置密码弹窗确定按钮*/
+/** 删除按钮*/
+function handleDelete(record: Recordable) {
   createMessage.success('删除成功!');
   reload();
-  }
-  /** 导出按钮*/
-  async function handleExport() {}
-  /** 导入成功*/
-  function handleImportSuccess() {
+}
+
+/** 导出按钮*/
+async function handleExport() {
+}
+
+/** 导入成功*/
+function handleImportSuccess() {
   reload();
-  }
-  /** 新增/编辑成功*/
-  function handleSuccess({ isUpdate, values }) {
+}
+
+/** 新增/编辑成功*/
+function handleSuccess({isUpdate, values}) {
   if (isUpdate) {
     // 演示不刷新表格直接更新内部数据。
     // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
@@ -346,17 +366,19 @@
   } else {
     reload();
   }
-  }
-  /** 部门树的select*/
-  function handleSelect(deptId = '') {
+}
+
+/** 部门树的select*/
+function handleSelect(deptId = '') {
   searchInfo.deptId = deptId;
   reload();
-  }
+}
 
-  function handleView(record: Recordable) {
+function handleView(record: Recordable) {
   go('/system/account_detail/' + record.id);
-  }
-  onMounted(() => {
+}
+
+onMounted(() => {
   const path = route.path;
   if (filterStore.getSearchParams[path]) {
     if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
@@ -371,8 +393,8 @@
       searchInfo.deptId = params.deptId;
     }
   }
-  });
-  onBeforeRouteLeave((to, from, next) => {
+});
+onBeforeRouteLeave((to, from, next) => {
   const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
   console.log('path', from.path);
   console.log('params', params);
@@ -383,5 +405,5 @@
     },
   });
   next(); // 允许导航
-  });
+});
 </script>

src/views/dataQuality/dataSheet/task/mainBody.data.ts

@@ -29,13 +29,7 @@ export const deptMap = (() => {
   }, {});
 })();
 
-export const columns: BasicColumn[] = [
-  // {
-  //   title: '质量规则',
-  //   dataIndex: 'name',
-  //   width: 120,
-  //   slots: { customRender: 'name' },
-  // },
+export const columns: BasicColumn[any] = [
   {
     title: '质量规则',
     dataIndex: 'qualityRule',
@@ -228,11 +222,78 @@ export const searchFormSchema: FormSchema[] = [
     field: 'name',
     label: ' ',
     component: 'Input',
-    colProps: { span: 8 },
+    colProps: { span: 4 },
     componentProps: {
       placeholder: '输入关键字搜索',
     },
   },
+  {
+    field: 'testMode',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '检查方式',
+      options: [
+        { label: '全量', value: '1' },
+        { label: '增量', value: '2' },
+      ],
+    },
+    colProps: { span: 3 },
+  },
+  {
+    field: 'ruleGroup',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '规则组',
+      options: [
+        { label: 'admin_个人工作区', value: '1' },
+        { label: '共享工作区', value: '2' },
+        { label: '商城工作区', value: '3' },
+        { label: '指标工作区', value: '4' },
+      ],
+    },
+    colProps: { span: 3 },
+  },
+  {
+    field: 'releaseStatus',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '发布状态',
+      options: [
+        { label: '已上线', value: '1' },
+        { label: '未上线', value: '2' },
+      ],
+    },
+    colProps: { span: 3 },
+  },
+  {
+    field: 'dateRange',
+    label: ' ',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD', // 显示的日期格式
+      valueFormat: 'YYYY-MM-DD', // 提交的日期格式
+      placeholder: ['开始时间', '结束时间'], // 占位符
+      style: { width: '100%' }, // 控制宽度
+    },
+    colProps: { span: 5 },
+  },
+  {
+    field: 'businessLabel',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '业务标签',
+      options: [
+        { label: '生产', value: '1' },
+        { label: '质量', value: '2' },
+        { label: '人力', value: '3' },
+      ],
+    },
+    colProps: { span: 3 },
+  },
   // {
   //   field: 'flag',
   //   label: ' ',