From 9a2e0fb626d4698602134fdc3372a3e40034adab Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Tue, 20 May 2025 16:57:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=95=86=E5=93=81=E3=80=81=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E9=83=A8=E5=88=86=E7=9B=B8=E5=85=B3=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=EF=BC=8C=E4=B8=8B=E4=B8=80=E6=AD=A5=E5=85=88?=
 =?UTF-8?q?=E6=8A=8A=E5=95=86=E5=93=81=E6=90=9E=E5=AE=8C=E5=86=8D=E6=90=9E?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/mall/index.vue | 137 +++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 apps/web-antd/src/views/mall/index.vue

diff --git a/apps/web-antd/src/views/mall/index.vue b/apps/web-antd/src/views/mall/index.vue
new file mode 100644
index 00000000..907810aa
--- /dev/null
+++ b/apps/web-antd/src/views/mall/index.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteStoreApi } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const hasDelete = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteStoreApi({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="店铺管理管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px"> 批量操作 </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #business_license="{ row }">
+        <Image :src="row.business_license" height="30" width="30" />
+      </template>
+      <template #id_card_portrait_side="{ row }">
+        <Image :src="row.id_card_portrait_side" height="30" width="30" />
+      </template>
+      <template #id_card_national_emblem_side="{ row }">
+        <Image :src="row.id_card_national_emblem_side" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: hasDelete.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>