风险监测指标增加批量删除

zrch-risk-client-39/src/views/metric/MetricMonitorCombinedSetList.vue

 <template>
   <div>
     <!--引用表格-->
-   <BasicTable @register="registerTable"   @edit-end="handleEditEnd" @edit-cancel="handleEditCancel" :beforeEditSubmit="beforeEditSubmit">
+    <BasicTable
+      @register="registerTable"
+      @edit-end="handleEditEnd"
+      @edit-cancel="handleEditCancel"
+      :beforeEditSubmit="beforeEditSubmit"
+      :rowSelection="rowSelection"
+    >
       <!--插槽:table标题-->
       <template #tableTitle>
         <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
         <a-button type="primary" @click="handleCaluculatAllMetric" preIcon="ant-design:plus-outlined">计算所有指标值</a-button>
         <a-button type="primary" @click="handleCustomImport" preIcon="ant-design:plus-outlined">从EXCEL导入</a-button>
+        <a-dropdown v-if="selectedRowKeys.length > 0">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined"></Icon>
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon icon="mdi:chevron-down"></Icon>
+          </a-button>
+        </a-dropdown>
       </template>
 
       <!--操作栏-->
       <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
       </template>
       <!--字段回显插槽-->
-      <template #htmlSlot="{text}">
+      <template #htmlSlot="{ text }">
         <div v-html="text"></div>
       </template>
       <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'tolVal'">
-            【{{record.stTolVal}}~{{record.tolVal}}】
-          </template>
-          <template v-if="column.key === 'warnVal'">
-            ({{record.tolVal}}~{{record.warnVal}}）
-          </template>
-          <template v-if="column.key === 'intvVal'">
-            【{{record.warnVal}}~{{record.intvVal}}】
-          </template>
+        <template v-if="column.key === 'tolVal'"> 【{{ record.stTolVal }}~{{ record.tolVal }}】 </template>
+        <template v-if="column.key === 'warnVal'"> ({{ record.tolVal }}~{{ record.warnVal }}） </template>
+        <template v-if="column.key === 'intvVal'"> 【{{ record.warnVal }}~{{ record.intvVal }}】 </template>
       </template>
     </BasicTable>
     <!-- 表单区域 -->
@@ -37,58 +51,54 @@
 </template>
 
 <script lang="ts" name="metric-metricMonitorSet" setup>
-  import {ref, computed, unref} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
-  import {useModal} from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
-  import MetricMonitorSetFomulaModal from './components/MetricMonitorSetFomulaModal.vue'
-  import {columns, searchFormSchema,formSchema} from './MetricMonitorSet.data';
-  import {listCombined, deleteOne, batchDelete,caluculatAllMetric,saveOrUpdate,batchImmportCalculate} from './MetricMonitorSet.api';
-  import Import from '/@/views/audit/common/components/import.vue'
+  import { ref, computed, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import MetricMonitorSetFomulaModal from './components/MetricMonitorSetFomulaModal.vue';
+  import { columns, searchFormSchema, formSchema } from './MetricMonitorSet.data';
+  import { listCombined, deleteOne, batchDelete, caluculatAllMetric, saveOrUpdate, batchImmportCalculate } from './MetricMonitorSet.api';
+  import Import from '/@/views/audit/common/components/import.vue';
 
-  const [registerModal, {openModal}] = useModal();
-  const [registerFomulasModal, {openModal:openFomulasModal}] = useModal();
+  const [registerModal, { openModal }] = useModal();
+  const [registerFomulasModal, { openModal: openFomulasModal }] = useModal();
 
-  const refImport = ref()
+  const refImport = ref();
 
   //注册table数据
-  const { tableContext} = useListPage({
-      tableProps:{
+  const { tableContext } = useListPage({
+    tableProps: {
       title: '监测方案',
       api: listCombined,
       columns,
-           canResize:true,
+      canResize: true,
       formConfig: {
         schemas: searchFormSchema,
-              autoSubmitOnEnter:true,
-              showAdvancedButton:true,
-              fieldMapToNumber: [
-              ],
-              fieldMapToTime: [
-              ],
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        fieldMapToNumber: [],
+        fieldMapToTime: [],
       },
       actionColumn: {
         width: 150,
-               fixed:'right'
+        fixed: 'right',
       },
-      }
-  })
-
-  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
+    },
+  });
 
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
 
   /**
    * 新增事件
    */
   function handleAdd() {
     openModal(true, {
-       mtrcCtp:2,
+      mtrcCtp: 2,
       isUpdate: false,
       showFooter: true,
     });
   }
 
-
   /**
    * 编辑事件
    */
@@ -122,13 +132,13 @@
    * 删除事件
    */
   async function handleDelete(record) {
-     await deleteOne({id: record.id}, handleSuccess);
+    await deleteOne({ id: record.id }, handleSuccess);
   }
   /**
    * 批量删除事件
    */
   async function batchHandleDelete() {
-     await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
   }
   /**
    * 成功回调
@@ -139,7 +149,7 @@
   /**
    * 操作栏
    */
-  function getTableAction(record){
+  function getTableAction(record) {
     return [
       {
         label: '编辑',
@@ -149,37 +159,38 @@
       //    label: '编辑公式',
       //    onClick: handleFormulas.bind(null, record),
       //  }
-       ]
+    ];
   }
   /**
    * 下拉操作栏
    */
-  function getDropDownAction(record){
+  function getDropDownAction(record) {
     return [
       {
         label: '详情',
         onClick: handleDetail.bind(null, record),
-         }, {
+      },
+      {
         label: '删除',
         popConfirm: {
           title: '是否确认删除',
           confirm: handleDelete.bind(null, record),
-           }
-         }
-       ]
+        },
+      },
+    ];
   }
 
   function handleEditEnd({ record, index, key, value }: Recordable) {
-      handleSuccess()
+    handleSuccess();
     return false;
   }
 
   async function beforeEditSubmit({ record, index, key, value }) {
     let tmpPbj = {
-        id:record.id,
-        mtrcNo:record.mtrcNo,
-      }
-      tmpPbj[key] = value
+      id: record.id,
+      mtrcNo: record.mtrcNo,
+    };
+    tmpPbj[key] = value;
     await saveOrUpdate(tmpPbj);
   }
 
@@ -187,20 +198,19 @@
     console.log('cancel');
   }
 
-    function handleCaluculatAllMetric(){
-      caluculatAllMetric()
+  function handleCaluculatAllMetric() {
+    caluculatAllMetric();
   }
 
   const importCallback = async (datas) => {
     //const transformedData = transformData(datas,pid);
     await batchImmportCalculate(datas);
     await reload();
-    }
-
+  };
 
   const handleCustomImport = () => {
-      refImport.value.iniData(formSchema)
-    }
+    refImport.value.iniData(formSchema);
+  };
 
   // function transformData(originalArray) {
   //   return originalArray.map(item => ({
@@ -214,11 +224,6 @@
   //       }]
   //   }));
   // }
-
-
-
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>