From 63fe4c5b2e1cad84f5cf6f7a818049e63b55b5a0 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sat, 5 Oct 2024 12:51:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/components/table/index.ts   |   1 +
 .../src/components/table/src/table-switch.vue |  82 +++++++
 apps/web-antd/src/views/system/user/data.tsx  |  49 +++-
 apps/web-antd/src/views/system/user/index.vue | 210 ++++++++++++++----
 4 files changed, 298 insertions(+), 44 deletions(-)
 create mode 100644 apps/web-antd/src/components/table/index.ts
 create mode 100644 apps/web-antd/src/components/table/src/table-switch.vue

diff --git a/apps/web-antd/src/components/table/index.ts b/apps/web-antd/src/components/table/index.ts
new file mode 100644
index 00000000..28bd800a
--- /dev/null
+++ b/apps/web-antd/src/components/table/index.ts
@@ -0,0 +1 @@
+export { default as TableSwitch } from './src/table-switch.vue';
diff --git a/apps/web-antd/src/components/table/src/table-switch.vue b/apps/web-antd/src/components/table/src/table-switch.vue
new file mode 100644
index 00000000..4d945195
--- /dev/null
+++ b/apps/web-antd/src/components/table/src/table-switch.vue
@@ -0,0 +1,82 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { Switch } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+export default defineComponent({
+  name: 'TableSwitch',
+  components: {
+    Switch,
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Boolean, String, Number],
+      default: false,
+    },
+    checkedText: {
+      type: String,
+      default: '启用',
+    },
+    unCheckedText: {
+      type: String,
+      default: '禁用',
+    },
+    // 使用严格相等判断  类型要正确
+    checkedValue: {
+      type: [Boolean, String, Number],
+      default: '0',
+    },
+    unCheckedValue: {
+      type: [Boolean, String, Number],
+      default: '1',
+    },
+    api: {
+      type: Function,
+      required: false,
+      default: null,
+    },
+    reload: {
+      type: Function,
+      required: false,
+      default: null,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    type CheckedType = boolean | number | string;
+    async function onChange(checked: CheckedType) {
+      const { checkedValue, unCheckedValue } = props;
+      // 原本的状态
+      const lastStatus =
+        checked === checkedValue ? unCheckedValue : checkedValue;
+      // 切换状态
+      emit('update:modelValue', checked);
+      const { api, reload } = props;
+      try {
+        isFunction(api) && (await api());
+        isFunction(reload) && (await reload());
+      } catch {
+        emit('update:modelValue', lastStatus);
+      }
+    }
+
+    return {
+      onChange,
+    };
+  },
+});
+</script>
+
+<template>
+  <Switch
+    v-bind="$attrs"
+    :checked="modelValue"
+    :checked-children="checkedText"
+    :checked-value="checkedValue"
+    :un-checked-children="unCheckedText"
+    :un-checked-value="unCheckedValue"
+    @change="onChange"
+  />
+</template>
diff --git a/apps/web-antd/src/views/system/user/data.tsx b/apps/web-antd/src/views/system/user/data.tsx
index c8c6f011..a34bd88e 100644
--- a/apps/web-antd/src/views/system/user/data.tsx
+++ b/apps/web-antd/src/views/system/user/data.tsx
@@ -1,7 +1,7 @@
 import { DictEnum } from '@vben/constants';
 import { getPopupContainer } from '@vben/utils';
 
-import { type FormSchemaGetter, z } from '#/adapter';
+import { type FormSchemaGetter, type VxeGridProps, z } from '#/adapter';
 import { getDictOptions } from '#/utils/dict';
 
 export const querySchema: FormSchemaGetter = () => [
@@ -39,6 +39,52 @@ export const querySchema: FormSchemaGetter = () => [
     label: '创建时间',
   },
 ];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    field: 'userName',
+    title: '名称',
+  },
+  {
+    field: 'nickName',
+    title: '昵称',
+  },
+  {
+    field: 'avatar',
+    title: '头像',
+    slots: { default: 'avatar' },
+    width: 80,
+  },
+  {
+    field: 'deptName',
+    title: '部门',
+  },
+  {
+    field: 'phonenumber',
+    title: '手机号',
+    formatter({ cellValue }) {
+      return cellValue || '暂无';
+    },
+  },
+  {
+    field: 'status',
+    title: '状态',
+    slots: { default: 'status' },
+  },
+  {
+    field: 'createTime',
+    title: '创建时间',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',
@@ -87,6 +133,7 @@ export const drawerSchema: FormSchemaGetter = () => [
     component: 'Input',
     fieldName: 'email',
     label: '邮箱',
+    // TODO: 这里非必填未生效
     rules: z.string().email('请输入正确的邮箱').optional(),
   },
   {
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 88092143..49818bcd 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -1,28 +1,37 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
 import { ref } from 'vue';
 
-import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import {
+  Page,
+  useVbenDrawer,
+  useVbenModal,
+  type VbenFormProps,
+} from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { Card, message } from 'ant-design-vue';
+import { Avatar, Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
-import { useVbenForm } from '#/adapter';
-import { userExport } from '#/api/system/user';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+import {
+  userExport,
+  userList,
+  userRemove,
+  userStatusChange,
+} from '#/api/system/user';
+import { TableSwitch } from '#/components/table';
 import { downloadExcel } from '#/utils/file/download';
 
-import { querySchema } from './data';
+import { columns, querySchema } from './data';
 import DeptTree from './dept-tree.vue';
 import userDrawer from './user-drawer.vue';
 import userImportModal from './user-import-modal.vue';
 
-// 左边部门用
-const selectDeptId = ref<string[]>([]);
-
-function handleSelect() {
-  console.log(selectDeptId.value);
-  message.info(`选择了 ${selectDeptId.value.join(', ')}`);
-}
-
+/**
+ * 导入
+ */
 const [UserImpotModal, userImportModalApi] = useVbenModal({
   connectedComponent: userImportModal,
 });
@@ -31,49 +40,119 @@ function handleImport() {
   userImportModalApi.open();
 }
 
+// 左边部门用
+const selectDeptId = ref<string[]>([]);
+
+const formOptions: VbenFormProps = {
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    trigger: 'default',
+    checkMethod: ({ row }) => row?.userId !== 1,
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // 区间选择器处理
+        if (formValues?.createTime) {
+          formValues.params = {
+            beginTime: dayjs(formValues.createTime[0]).format(
+              'YYYY-MM-DD 00:00:00',
+            ),
+            endTime: dayjs(formValues.createTime[1]).format(
+              'YYYY-MM-DD 23:59:59',
+            ),
+          };
+          Reflect.deleteProperty(formValues, 'createTime');
+        } else {
+          Reflect.deleteProperty(formValues, 'params');
+        }
+        // 部门树选择处理
+        if (selectDeptId.value.length === 1) {
+          formValues.deptId = selectDeptId.value[0];
+        } else {
+          Reflect.deleteProperty(formValues, 'deptId');
+        }
+
+        return await userList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'userId',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+
 const [UserDrawer, userDrawerApi] = useVbenDrawer({
   connectedComponent: userDrawer,
 });
 
 function handleAdd() {
-  userDrawerApi.setData({ update: false });
+  userDrawerApi.setData({});
   userDrawerApi.open();
 }
 
-const [QueryForm] = useVbenForm({
-  // 默认展开
-  collapsed: false,
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
+function handleEdit(row: Recordable<any>) {
+  userDrawerApi.setData({ id: row.userId });
+  userDrawerApi.open();
+}
+
+async function handleDelete(row: Recordable<any>) {
+  await userRemove(row.userId);
+  await tableApi.reload();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.operId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await userRemove(ids);
+      await tableApi.reload();
     },
-  },
-  schema: querySchema(),
-  // 是否可展开
-  showCollapseButton: true,
-  submitButtonOptions: {
-    text: '查询',
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-});
+  });
+}
 </script>
 
 <template>
-  <Page content-class="flex gap-[8px]">
+  <Page :auto-content-height="true" content-class="flex gap-[8px]">
     <DeptTree
       v-model:select-dept-id="selectDeptId"
       :height="300"
       class="w-[260px]"
-      @select="handleSelect"
+      @select="() => tableApi.reload()"
     />
-    <div class="flex w-full flex-col gap-[8px]">
-      <Card>
-        <QueryForm />
-      </Card>
-      <Card>
-        <div class="flex justify-end gap-[8px]">
+    <BasicTable>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">用户列表</span>
+      </template>
+      <template #toolbar-tools>
+        <Space>
           <a-button
             v-access:code="['system:user:export']"
             @click="downloadExcel(userExport, '用户管理', {})"
@@ -86,6 +165,14 @@ const [QueryForm] = useVbenForm({
           >
             {{ $t('pages.common.import') }}
           </a-button>
+          <a-button
+            danger
+            type="primary"
+            v-access:code="['system:user:delete']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
           <a-button
             type="primary"
             v-access:code="['system:user:add']"
@@ -93,10 +180,47 @@ const [QueryForm] = useVbenForm({
           >
             {{ $t('pages.common.add') }}
           </a-button>
-        </div>
-      </Card>
-    </div>
+        </Space>
+      </template>
+      <template #avatar="{ row }">
+        <Avatar v-if="row.avatar" :src="row.avatar" />
+        <Avatar
+          v-else
+          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
+        />
+      </template>
+      <template #status="{ row }">
+        <TableSwitch
+          v-model="row.status"
+          :api="() => userStatusChange(row)"
+          :disabled="row.userId === 1"
+          :reload="() => tableApi.reload()"
+        />
+      </template>
+      <template #action="{ row }">
+        <Space v-if="row.userId !== 1">
+          <a-button
+            size="small"
+            type="primary"
+            v-access:code="['system:user:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </a-button>
+          <Popconfirm
+            placement="left"
+            title="确认删除？"
+            v-access:code="['system:user:delete']"
+            @confirm="handleDelete(row)"
+          >
+            <a-button danger size="small" @click.stop="">
+              {{ $t('pages.common.delete') }}
+            </a-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
     <UserImpotModal />
-    <UserDrawer />
+    <UserDrawer @reload="tableApi.reload()" />
   </Page>
 </template>