1/* 2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16<template> 17 <div> 18 <BasicTable @register="registerTable" :rowSelection="rowSelection"> 19 <template #tableTitle> 20 <a-dropdown v-if="selectedRowKeys.length > 0"> 21 <template #overlay> 22 <a-menu> 23 <a-menu-item key="1" @click="batchHandleDelete"> 24 <Icon icon="ant-design:delete-outlined"></Icon> 25 删除 26 </a-menu-item> 27 </a-menu> 28 </template> 29 <a-button>批量操作 30 <Icon icon="ant-design:down-outlined"></Icon> 31 </a-button> 32 </a-dropdown> 33 </template> 34 <template #action="{ record }"> 35 <TableAction :actions="getActions(record)" /> 36 </template> 37 </BasicTable> 38 <VideoModal @register="registerModal" @success="reload" /> 39 </div> 40</template> 41<script lang="ts" name="system-position" setup> 42import { BasicTable, TableAction } from '/@/components/Table'; 43import { list, batchDeleteVideo } from './video.api'; 44import { columns, searchFormSchema } from './video.data'; 45import { useListPage } from '/@/hooks/system/useListPage'; 46import { useModal } from '/@/components/Modal'; 47import VideoModal from './VideoModal.vue'; 48const [registerModal, { openModal }] = useModal(); 49 50// 列表页面公共参数、方法 51const { tableContext } = useListPage({ 52 designScope: 'position-template', 53 tableProps: { 54 title: '视频列表', 55 api: list, 56 columns: columns, 57 formConfig: { 58 schemas: searchFormSchema, 59 } 60 } 61}); 62 63const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; 64 65/** 66 * 操作列定义 67 */ 68function getActions(record) { 69 return [ 70 { 71 label: '审核', 72 onClick: handleEdit.bind(null, record) 73 } 74 ]; 75} 76 77/** 78 * 编辑事件 79 */ 80function handleEdit(record) { 81 openModal(true, { 82 record 83 }); 84} 85 86/** 87 * 批量删除事件 88 */ 89async function batchHandleDelete() { 90 await batchDeleteVideo({ ids: selectedRowKeys.value }, () => { 91 reload(); 92 selectedRowKeys.value = []; 93 }); 94} 95</script> 96