✨ 完成实验部分功能

app/pages/base/index/peopleManage/components/PeopleForm.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+  import cityData from 'public/city.json';
+  import cityZip from 'public/zipcode_district_data.json';
+  import type {
+    FormInstanceFunctions,
+    FormProps,
+    SelectValue,
+  } from 'tdesign-vue-next';
+
+  const cityDataTyped = cityData as Record<string, Record<string, string>>;
+  const cityZipTyped = cityZip as Record<string, string | number>;
+
+  function getZipCode(city: string): string {
+    for (const cityName of [
+      city,
+      city.substring(0, city.length - 1),
+      city.substring(0, city.length - 3),
+    ])
+      if (cityZipTyped[cityName] !== undefined) {
+        return '' + cityZipTyped[cityName];
+      }
+    return '';
+  }
+
+  const store = usePeopleStore();
+  const { currentForm } = storeToRefs(store);
+
+  const form = ref<FormInstanceFunctions>();
+  const provinceIndex = ref('');
+  async function submit() {
+    // 执行提交逻辑
+    if (!form.value) return;
+    const result = await form.value.validate();
+    if (typeof result === 'boolean' && result) form.value.submit();
+  }
+  function resetForm() {
+    if (form.value) form.value.reset();
+  }
+  function changeProvince(val: SelectValue) {
+    setProvinceIndexByName(val as string);
+    currentForm.value.city = '';
+    currentForm.value.zip = '';
+  }
+  function setProvinceIndexByName(name: string) {
+    for (const [key, value] of Object.entries(cityDataTyped['00']!)) {
+      if (value === name) {
+        provinceIndex.value = key;
+        console.log('finish');
+        return;
+      }
+    }
+  }
+
+  defineExpose({
+    submit,
+    resetForm,
+    setProvinceIndexByName,
+  });
+
+  const rules: FormProps['rules'] = {
+    date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+    province: [
+      { required: true, message: '请输入省份', trigger: 'submit' },
+      { required: true, message: '请输入省份', trigger: 'change' },
+    ],
+    city: [{ required: true, message: '请输入城市', trigger: 'submit' }],
+    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+    zip: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
+  };
+</script>
+
+<template>
+  <t-form
+    ref="form"
+    :rules="rules"
+    :data="currentForm"
+    @submit="
+      () => {
+        if (store.showAddPeople) store.addPeople();
+        else if (store.showEditPeople) store.updatePeople();
+      }
+    "
+  >
+    <t-form-item name="date" label="日期">
+      <t-date-picker
+        v-model="currentForm.date"
+        class="w-80"
+        placeholder="请输入日期"
+      />
+    </t-form-item>
+    <t-form-item name="name" label="姓名">
+      <t-input v-model="currentForm.name" placeholder="请输入姓名" />
+    </t-form-item>
+    <t-form-item name="province" label="省份">
+      <t-select
+        v-model="currentForm.province"
+        placeholder="请输入省份"
+        @change="changeProvince"
+      >
+        <t-option
+          v-for="item of cityDataTyped['00']"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+          {{ item }}
+        </t-option>
+      </t-select>
+    </t-form-item>
+    <t-form-item name="city" label="城市">
+      <t-select
+        v-model="currentForm.city"
+        placeholder="请输入城市"
+        :disabled="currentForm.province === ''"
+        @change="
+          (x: SelectValue) => {
+            currentForm.zip = getZipCode(x as string);
+          }
+        "
+      >
+        <t-option
+          v-for="item of cityDataTyped[provinceIndex]"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+          {{ item }}
+        </t-option>
+      </t-select>
+    </t-form-item>
+    <t-form-item name="address" label="地址">
+      <t-input v-model="currentForm.address" placeholder="请输入地址" />
+    </t-form-item>
+    <t-form-item name="zip" label="邮编">
+      <t-input v-model="currentForm.zip" placeholder="请输入邮编" />
+    </t-form-item>
+  </t-form>
+</template>
+
+<style scoped lang="less"></style>

app/pages/base/index/peopleManage/index.vue

@@ -1,16 +1,23 @@
 <script setup lang="tsx">
   import SuperTable from '~/components/SuperTable.vue';
-  import type { TableProps } from 'tdesign-vue-next';
+  import type { TableProps, TableRowData } from 'tdesign-vue-next';
+  import PeopleForm from '~/pages/base/index/peopleManage/components/PeopleForm.vue';
+
+  const store = usePeopleStore();
+
+  const { peopleList, pagination, situation } = storeToRefs(usePeopleStore());
 
-  const pagination = ref<TableProps['pagination']>({
-    defaultPageSize: 10,
-    total: 100,
-    defaultCurrent: 1,
-  });
   const columns = ref<TableProps['columns']>([
     {
       colKey: 'index',
       title: '序号',
+      cell: (_, { rowIndex }: { rowIndex: number }) => (
+        <div>
+          {(pagination.value!.current! - 1) * pagination.value!.pageSize! +
+            rowIndex +
+            1}
+        </div>
+      ),
     },
     {
       colKey: 'date',
@@ -33,54 +40,113 @@
       title: '地址',
     },
     {
-      colKey: '',
+      colKey: 'zip',
       title: '邮编',
     },
     {
       colKey: 'operator',
       title: '操作',
       cell: (_, { row }) => (
-        <div>
+        <div class="w-40 flex flex-row justify-evenly">
           <t-button onClick={() => editUser(row)}>编辑</t-button>
           <t-button onClick={() => deleteUser(row)}>删除</t-button>
         </div>
       ),
     },
   ]);
-  const data = ref([]);
-  for (let i = 0; i < 30; i++) {
-    data.value.push({
-      index: i + 1,
-      date: '2023-10-01',
-      name: 'John Doe',
-      province: 'Province A',
-      city: 'City A',
-      address: 'Address A',
-      postalCode: '123456',
-    } as never);
+
+  onMounted(async () => {
+    await store.getPeopleList();
+  });
+
+  onMounted(async () => {
+    await store.getTotal();
+  });
+
+  function editUser(_row: TableRowData) {
+    if (form.value) form.value.resetForm();
+    store.currentForm = {
+      ...peopleList.value.find((e) => e.id === _row.id)!,
+    } as PeopleInfo;
+    console.log(store.currentForm.province);
+    form.value?.setProvinceIndexByName(store.currentForm.province);
+    console.log(store.currentForm);
+    store.showEditPeople = true;
   }
 
-  function editUser(row: never) {}
+  function deleteUser(_row: TableRowData) {
+    store.deletePeople(_row.id);
+    console.log(_row);
+  }
 
-  function deleteUser(row: never) {}
+  function pageChange(x: { current: number; pageSize: number }) {
+    if (pagination.value) {
+      pagination.value.current = x.current;
+      pagination.value.pageSize = x.pageSize;
+      store.getPeopleList();
+    }
+    console.log(store.pagination);
+  }
+
+  async function doSearch() {
+    await usePeopleStore().getTotal();
+    await usePeopleStore().getPeopleList();
+  }
+
+  const form: Ref<typeof PeopleForm | null> = ref(null);
 </script>
 
 <template>
   <div class="p-6">
     <div class="flex justify-between p-4">
-      <t-button>新增</t-button>
-      <t-input placeholder="搜索" clearable class="max-w-60">
+      <t-button
+        @click="
+          () => {
+            if (form) form.resetForm();
+            store.showAddPeople = true;
+          }
+        "
+        >添加新人员</t-button
+      >
+      <t-input
+        v-model="situation"
+        placeholder="搜索"
+        clearable
+        class="max-w-60"
+        @change="doSearch"
+      >
         <template #suffixIcon>
           <search-icon :style="{ cursor: 'pointer' }" />
         </template>
       </t-input>
     </div>
     <super-table
-      :data="data"
+      v-model:pagination="pagination"
+      :data="peopleList"
       :columns="columns"
       :loading="false"
-      :pagination="pagination"
+      @page-change="pageChange"
     ></super-table>
+    <t-dialog
+      :visible="store.showAddPeople || store.showEditPeople"
+      :close-btn="true"
+      :confirm-btn="store.showAddPeople ? '添加' : '修改'"
+      cancel-btn="取消"
+      @confirm="form?.submit"
+      @close="
+        () => {
+          store.showAddPeople = false;
+          store.showEditPeople = false;
+        }
+      "
+    >
+      <template #header>{{
+        store.showAddPeople ? '添加新人员' : '修改人员信息'
+      }}</template>
+      <template #body>
+        <people-form ref="form" />
+      </template>
+    </t-dialog>
   </div>
 </template>