feat(components): 增加列表弹出表单

src/typings/business.d.ts

@@ -47,3 +47,16 @@ declare namespace Message {
     date: string;
   }
 }
+
+declare namespace CommonList {
+  interface UserList {
+    id: number;
+    name: string;
+    age: number;
+    gender: '0' | '1' | null;
+    email: string;
+    address: string;
+    role: 'super' | 'admin' | 'user';
+    disabled: boolean;
+  }
+}

src/views/list/commonList/components/TableModal.vue

@@ -0,0 +1,121 @@
+<template>
+  <n-modal
+    v-model:show="modalVisible"
+    :mask-closable="false"
+    preset="card"
+    :title="title"
+    class="w-700px"
+    :segmented="{
+      content: true,
+      action: true,
+    }"
+  >
+    <n-form label-placement="left" :model="formModel" label-align="left" :label-width="80">
+      <n-grid :cols="24" :x-gap="18">
+        <n-form-item-grid-item :span="12" label="用户名" path="name">
+          <n-input v-model:value="formModel.name" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="年龄" path="age">
+          <n-input-number v-model:value="formModel.age" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="性别" path="gender">
+          <n-input v-model:value="formModel.gender" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="邮箱" path="email">
+          <n-input v-model:value="formModel.email" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="地址" path="address">
+          <n-input v-model:value="formModel.address" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="角色" path="role">
+          <n-input v-model:value="formModel.role" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="12" label="状态" path="disabled">
+          <n-switch v-model:value="formModel.disabled" />
+        </n-form-item-grid-item>
+      </n-grid>
+    </n-form>
+    <template #action>
+      <n-space justify="center">
+        <n-button @click="closeModal()">取消</n-button>
+        <n-button type="primary">提交</n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+type FormModel = Pick<CommonList.UserList, 'name' | 'age' | 'gender' | 'address' | 'email' | 'role' | 'disabled'>;
+const defaultFormModal: FormModel = {
+  name: '',
+  age: 0,
+  gender: null,
+  email: '',
+  address: '',
+  role: 'user',
+  disabled: true,
+};
+const formModel = ref({ ...defaultFormModal });
+
+interface Props {
+  visible: boolean;
+  type?: ModalType;
+  modalData?: any;
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'add',
+  modalData: null,
+});
+
+interface Emits {
+  (e: 'update:visible', visible: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const modalVisible = computed({
+  get() {
+    return props.visible;
+  },
+  set(visible) {
+    closeModal(visible);
+  },
+});
+function closeModal(visible = false) {
+  emit('update:visible', visible);
+}
+type ModalType = 'add' | 'edit';
+const title = computed(() => {
+  const titles: Record<ModalType, string> = {
+    add: '添加用户',
+    edit: '编辑用户',
+  };
+  return titles[props.type];
+});
+
+function UpdateFormModelByModalType() {
+  const handlers = {
+    add: () => {
+      formModel.value = { ...defaultFormModal };
+    },
+    edit: () => {
+      if (props.modalData) {
+        formModel.value = { ...props.modalData };
+      }
+    },
+  };
+  handlers[props.type]();
+}
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      UpdateFormModelByModalType();
+    }
+  },
+);
+</script>
+
+<style scoped></style>

src/views/list/commonList/index.vue

@@ -33,7 +33,7 @@
     <n-card>
       <n-space vertical size="large">
         <div class="flex gap-4">
-          <n-button type="primary">
+          <n-button type="primary" @click="handleAddTable">
             <template #icon><i-icon-park-outline-add-one /></template>
             新建
           </n-button>
@@ -48,6 +48,7 @@
         </div>
         <n-data-table :columns="columns" :data="listData" :loading="loading" />
         <Pagination :count="100" @change="changePage" />
+        <TableModal v-model:visible="visible" :type="modalType" :modal-data="editData" />
       </n-space>
     </n-card>
   </n-space>
@@ -58,9 +59,11 @@ import { onMounted, ref, h } from 'vue';
 import { fetchUserList } from '@/service';
 import type { DataTableColumns } from 'naive-ui';
 import { NButton, NPopconfirm, NSpace, NSwitch, NTag, FormInst } from 'naive-ui';
-import { useLoading } from '@/hook';
+import { useLoading, useBoolean } from '@/hook';
+import TableModal from './components/TableModal.vue';
 
 const { loading, startLoading, endLoading } = useLoading(false);
+const { bool: visible, setTrue: openModal } = useBoolean(false);
 
 const initialModel = { condition_1: '', condition_2: '', condition_3: '', condition_4: '' };
 const model = ref({ ...initialModel });
@@ -82,7 +85,7 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'gender',
     render: (row) => {
-      const rowData = row as unknown as UserList;
+      const rowData = row as unknown as CommonList.UserList;
       const tagType = {
         '0': {
           label: '女',
@@ -113,7 +116,7 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'role',
     render: (row) => {
-      const rowData = row as unknown as UserList;
+      const rowData = row as unknown as CommonList.UserList;
       const tagType = {
         super: 'primary',
         admin: 'warning',
@@ -127,7 +130,7 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'disabled',
     render: (row) => {
-      const rowData = row as unknown as UserList;
+      const rowData = row as unknown as CommonList.UserList;
 
       return (
         <NSwitch value={rowData.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, rowData.id)}>
@@ -141,10 +144,10 @@ const columns: DataTableColumns = [
     align: 'center',
     key: 'actions',
     render: (row) => {
-      const rowData = row as unknown as UserList;
+      const rowData = row as unknown as CommonList.UserList;
       return (
         <NSpace justify={'center'}>
-          <NButton size={'small'} onClick={() => sendMail(rowData.id)}>
+          <NButton size={'small'} onClick={() => handleEditTable(rowData)}>
             编辑
           </NButton>
           <NPopconfirm onPositiveClick={() => sendMail(rowData.id)}>
@@ -167,17 +170,8 @@ function handleUpdateDisabled(disabled: boolean, id: number) {
     listData.value[index].disabled = disabled;
   }
 }
-interface UserList {
+
-  id: number;
+const listData = ref<CommonList.UserList[]>([]);
-  name: string;
-  age: number;
-  gender: '0' | '1' | null;
-  email: string;
-  address: string;
-  role: 'super' | 'admin' | 'user';
-  disabled: boolean;
-}
-const listData = ref<UserList[]>([]);
 
 onMounted(() => {
   getUserList();
@@ -195,6 +189,27 @@ function changePage(page: number, size: number) {
 function handleResetSearch() {
   model.value = { ...initialModel };
 }
+
+type ModalType = 'add' | 'edit';
+const modalType = ref<ModalType>('add');
+function setModalType(type: ModalType) {
+  modalType.value = type;
+}
+
+const editData = ref<CommonList.UserList | null>(null);
+function setEditData(data: CommonList.UserList | null) {
+  editData.value = data;
+}
+
+function handleEditTable(rowData: CommonList.UserList) {
+  setEditData(rowData);
+  setModalType('edit');
+  openModal();
+}
+function handleAddTable() {
+  openModal();
+  setModalType('add');
+}
 </script>
 
 <style scoped></style>