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