feat: (member) 增加 删除按键

src/api/member/list.ts

@@ -1,8 +1,10 @@
 import { defHttp } from '/@/utils/http/axios';
 import { PageParams, MemberListGetResultModel } from './model';
+import { Result } from '/#/axios';
 
 enum Api {
   pageList = '/zfb-api/zfb/user/list',
+  unbindWechat = '/zfb-api/zfb/user/unbindWechat',
 }
 
 /**
@@ -18,3 +20,13 @@ export const ListApi = (params: PageParams) =>
       ignoreCancelToken: true,
     },
   });
+
+export const unbindWechatApi = (id: number | string) =>
+  defHttp.post<Result>({
+    url: Api.unbindWechat,
+    params: { id },
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/member/model.ts

@@ -1,19 +1,19 @@
-import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
-/**
- * @description: Request list interface parameters
- */
-export type PageParams = BasicPageParams;
-
-export interface MemberListItem {
-  id: number;
-  name: string;
-  image: string;
-  link: string;
-  createTime: string;
-  isShow: boolean;
-}
-
-/**
- * @description: Request list return value
- */
-export type MemberListGetResultModel = BasicFetchResult<MemberListItem>;
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+export interface MemberListItem {
+  id: number;
+  name: string;
+  image: string;
+  link: string;
+  createTime: string;
+  isShow: boolean;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type MemberListGetResultModel = BasicFetchResult<MemberListItem>;

src/views/member/list.vue

@@ -1,195 +1,181 @@
-<!-- 
-avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/dTbT3X0Fm7BnUA4DoQhBy14smppF5eBibqPSOib3ou5elGuJ1eYZ9sib2ZALDMs1icYupWIxiaJwWETTV8we9brCHhQ/132"
-bindBrandId: null
-bindBrandName: null
-birthday: 631123200000
-brandId: null
-brandName: null
-city: ""
-gender: 1
-id: 25
-isAdmin: 0
-lastLoginIp: "117.136.32.65"
-lastLoginTime: 1631504271000
-levelName: null
-mobile: "13536501128"
-nickname: "波仔"
-password: "oeADe5U9uLeMYsNigq98zdu8J96A"
-registerIp: "117.136.32.65"
-registerTime: 1631504271000
-userLevelId: null
-username: "微信用户f8f4igi4j9ks"
-weixinOpenid: "oeADe5U9uLeMYsNigq98zdu8J96A" 
--->
-<template>
-  <div class="p-4">
-    <BasicTable @register="registerTable">
-      <template #toolbar> </template>
-      <template #avatar="{ record }">
-        <Avatar :size="80" :src="record.avatar" />
-      </template>
-
-      <template #gender="{ record }">
-        {{ renderGenderLabel(record.gender) }}
-      </template>
-
-      <template #birthday="{ record }">
-        <Time v-if="record.birthday" :value="record.birthday" mode="datetime" />
-      </template>
-
-      <template #lastLoginTime="{ record }">
-        <Time :value="record.lastLoginTime" mode="datetime" />
-      </template>
-
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              onClick: () => {
-                go(`/order/list/detail/${record.orderNo}`);
-              },
-            },
-            {
-              label: '打印',
-              color: 'error',
-              onClick: () => {
-                createMessage.info(`暂未接入`);
-              },
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { uploadApi } from '/@/api/sys/upload';
-
-  import { ListApi } from '/@/api/member/list';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-  import { useGo } from '/@/hooks/web/usePage';
-  import { Avatar } from 'ant-design-vue';
-  import { Time } from '/@/components/Time';
-
-  export default defineComponent({
-    components: { BasicTable, TableAction, Avatar, Time },
-    setup() {
-      const { createMessage } = useMessage();
-      const go = useGo();
-      const { t } = useI18n();
-      const columns: BasicColumn[] = [
-        {
-          title: 'ID',
-          dataIndex: 'id',
-          fixed: 'left',
-          width: 60,
-        },
-        {
-          title: '名称',
-          dataIndex: 'username',
-          // sorter: true,
-          width: 160,
-        },
-        {
-          title: '头像',
-          dataIndex: 'avatar',
-          slots: { customRender: 'avatar' },
-          width: 120,
-        },
-        {
-          title: '性别',
-          dataIndex: 'gender',
-          slots: { customRender: 'gender' },
-          // sorter: true,
-          width: 120,
-        },
-        {
-          title: '出生日期',
-          dataIndex: 'birthday',
-          slots: { customRender: 'birthday' },
-          width: 120,
-        },
-        {
-          title: '最后登录时间',
-          dataIndex: 'lastLoginTime',
-          slots: { customRender: 'lastLoginTime' },
-          // sorter: true,
-          width: 120,
-        },
-        {
-          title: '微信名',
-          dataIndex: 'nickname',
-          width: 120,
-        },
-        {
-          title: '手机号',
-          dataIndex: 'mobile',
-          width: 120,
-        },
-      ];
-
-      const searchForm: Partial<FormProps> = {
-        labelWidth: 100,
-        schemas: [
-          {
-            field: 'username',
-            label: '名称',
-            component: 'Input',
-            componentProps: {
-              maxLength: 100,
-            },
-            colProps: {
-              xl: 5,
-              xxl: 5,
-            },
-          },
-        ],
-      };
-
-      const [registerTable] = useTable({
-        title: '微信用户列表',
-        api: ListApi,
-        columns: columns,
-        useSearchForm: true,
-        formConfig: searchForm,
-        showTableSetting: true,
-        tableSetting: { fullScreen: true },
-        showIndexColumn: false,
-        rowKey: 'id',
-        pagination: { pageSize: 20 },
-        bordered: true,
-        fetchSetting: {
-          pageField: 'page',
-          sizeField: 'limit',
-          listField: 'list',
-          totalField: 'totalCount',
-        },
-      });
-
-      function renderGenderLabel(gender: number): string {
-        switch (gender) {
-          case 0:
-            return '女';
-          case 1:
-            return '男';
-          default:
-            return '未知';
-        }
-      }
-
-      return {
-        registerTable,
-        createMessage,
-        t,
-        go,
-        renderGenderLabel,
-        uploadApi: uploadApi as any,
-      };
-    },
-  });
-</script>
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+      <template #avatar="{ record }">
+        <Avatar :size="80" :src="record.avatar" />
+      </template>
+
+      <template #gender="{ record }">
+        {{ renderGenderLabel(record.gender) }}
+      </template>
+
+      <template #birthday="{ record }">
+        <Time v-if="record.birthday" :value="record.birthday" mode="datetime" />
+      </template>
+
+      <template #lastLoginTime="{ record }">
+        <Time :value="record.lastLoginTime" mode="datetime" />
+      </template>
+
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              color: 'error',
+              label: '删除',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { uploadApi } from '/@/api/sys/upload';
+
+  import { ListApi, unbindWechatApi } from '/@/api/member/list';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { Avatar } from 'ant-design-vue';
+  import { Time } from '/@/components/Time';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, Avatar, Time },
+    setup() {
+      const { createMessage } = useMessage();
+      const go = useGo();
+      const { t } = useI18n();
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 60,
+        },
+        {
+          title: '名称',
+          dataIndex: 'username',
+          // sorter: true,
+          width: 160,
+        },
+        {
+          title: '头像',
+          dataIndex: 'avatar',
+          slots: { customRender: 'avatar' },
+          width: 120,
+        },
+        {
+          title: '性别',
+          dataIndex: 'gender',
+          slots: { customRender: 'gender' },
+          // sorter: true,
+          width: 120,
+        },
+        {
+          title: '出生日期',
+          dataIndex: 'birthday',
+          slots: { customRender: 'birthday' },
+          width: 120,
+        },
+        {
+          title: '最后登录时间',
+          dataIndex: 'lastLoginTime',
+          slots: { customRender: 'lastLoginTime' },
+          // sorter: true,
+          width: 120,
+        },
+        {
+          title: '微信名',
+          dataIndex: 'nickname',
+          width: 120,
+        },
+        {
+          title: '手机号',
+          dataIndex: 'mobile',
+          width: 120,
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          width: 50,
+        },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'username',
+            label: '名称',
+            component: 'Input',
+            componentProps: {
+              maxLength: 100,
+            },
+            colProps: {
+              xl: 5,
+              xxl: 5,
+            },
+          },
+        ],
+      };
+
+      const [registerTable, { reload }] = useTable({
+        title: '微信用户列表',
+        api: ListApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+        pagination: { pageSize: 20 },
+        bordered: true,
+        fetchSetting: {
+          pageField: 'page',
+          sizeField: 'limit',
+          listField: 'list',
+          totalField: 'totalCount',
+        },
+      });
+
+      function renderGenderLabel(gender: number): string {
+        switch (gender) {
+          case 0:
+            return '女';
+          case 1:
+            return '男';
+          default:
+            return '未知';
+        }
+      }
+      async function handleDelete(record: Recordable) {
+        console.log('record', record);
+        try {
+          await unbindWechatApi(record.id);
+        } catch (error) {}
+        reload();
+      }
+
+      return {
+        registerTable,
+        createMessage,
+        t,
+        go,
+        renderGenderLabel,
+        uploadApi: uploadApi as any,
+        handleDelete,
+      };
+    },
+  });
+</script>