• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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<template>
16  <div>
17    <BasicTable @register="registerTable" :rowSelection="rowSelection">
18      <template #tableTitle>
19        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 新增</a-button>
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    <BusinessModal @register="registerModal" @success="reload" :isDisabled="isDisabled" />
39  </div>
40</template>
41<script lang="ts" name="system-position" setup>
42import { ref } from 'vue';
43import { BasicTable, TableAction } from '/@/components/Table';
44import { list, deleteBusiness, batchDeleteBusiness } from './business.api';
45import { columns, searchFormSchema } from './business.data';
46import { useListPage } from '/@/hooks/system/useListPage';
47import { useModal } from '/@/components/Modal';
48import BusinessModal from './BusinessModal.vue';
49const [registerModal, { openModal }] = useModal();
50
51// 列表页面公共参数、方法
52const { tableContext } = useListPage({
53  designScope: 'position-template',
54  tableProps: {
55    title: '商家列表',
56    api: list,
57    columns: columns,
58    formConfig: {
59      schemas: searchFormSchema,
60    }
61  }
62});
63
64const isDisabled = ref(false);
65const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
66
67/**
68 * 操作列定义
69 */
70function getActions(record) {
71  return [
72    {
73      label: '详情',
74      onClick: handleDetail.bind(null, record),
75    },
76    {
77      label: '编辑',
78      onClick: handleEdit.bind(null, record),
79    },
80    {
81      label: '删除',
82      popConfirm: {
83        title: '是否确认删除',
84        confirm: handleDelete.bind(null, record),
85      },
86    },
87  ];
88}
89
90/**
91  * 新增事件
92  */
93function handleAdd() {
94  isDisabled.value = false;
95  openModal(true, {
96    isUpdate: false,
97  });
98}
99
100/**
101* 详情页面
102*/
103function handleDetail(record) {
104  isDisabled.value = true;
105  openModal(true, {
106    record,
107    isUpdate: true,
108  });
109}
110
111/**
112 * 编辑事件
113 */
114function handleEdit(record) {
115  isDisabled.value = false;
116  openModal(true, {
117    record,
118    isUpdate: true,
119  });
120}
121
122/**
123  * 删除事件
124  */
125async function handleDelete(record) {
126  await deleteBusiness({ id: record.id }, reload);
127}
128
129
130/**
131 * 批量删除事件
132 */
133async function batchHandleDelete() {
134  await batchDeleteBusiness({ ids: selectedRowKeys.value }, () => {
135    reload();
136    selectedRowKeys.value = [];
137  });
138}
139</script>
140