refactor(personalready): ♻️ 已中奖的界面代码重构 #96

src/router/index.ts

@@ -15,7 +15,7 @@ export const configRoutes = {
         {
             path: '/log-lottery/config/person',
             name: 'PersonConfig',
-            component: () => import('@/views/Config/Person/PersonConfig.vue'),
+            component: () => import('@/views/Config/Person/index.vue'),
             meta: {
                 title: i18n.global.t('sidebar.personConfiguration'),
                 icon: 'person',
@@ -37,7 +37,7 @@ export const configRoutes = {
                 {
                     path: '/log-lottery/config/person/already',
                     name: 'AlreadyPerson',
-                    component: () => import('@/views/Config/Person/PersonAlready.vue'),
+                    component: () => import('@/views/Config/Person/PersonAlready/index.vue'),
                     meta: {
                         title: i18n.global.t('sidebar.winnerList'),
                         icon: 'already',

src/views/Config/Person/PersonAlready.vue

@@ -1,153 +0,0 @@
-<script setup lang='ts'>
-import type { IPersonConfig } from '@/types/storeType'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-import PageHeader from '@/components/PageHeader/index.vue'
-import { Switch } from '@/components/ui/switch'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-
-const { t } = useI18n()
-const personConfig = useStore().personConfig
-
-const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
-// const personList = ref<any[]>(
-//     alreadyPersonList
-// )
-
-// const deleteAll = () => {
-//     personConfig.deleteAllPerson()
-// }
-
-const isDetail = ref(false)
-function handleMoveNotPerson(row: IPersonConfig) {
-  personConfig.moveAlreadyToNot(row)
-}
-
-const tableColumnsList = [
-  {
-    label: i18n.global.t('data.number'),
-    props: 'uid',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.name'),
-    props: 'name',
-  },
-  {
-    label: i18n.global.t('data.avatar'),
-    props: 'avatar',
-    formatValue(row: any) {
-      return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
-    },
-  },
-  {
-    label: i18n.global.t('data.department'),
-    props: 'department',
-  },
-  {
-    label: i18n.global.t('data.identity'),
-    props: 'identity',
-  },
-  {
-    label: i18n.global.t('data.prizeName'),
-    props: 'prizeName',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.operation'),
-    actions: [
-      {
-        label: i18n.global.t('data.removePerson'),
-        type: 'btn-info',
-        onClick: (row: IPersonConfig) => {
-          handleMoveNotPerson(row)
-        },
-      },
-    ],
-  },
-]
-const tableColumnsDetail = [
-  {
-    label: i18n.global.t('data.number'),
-    props: 'uid',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.number'),
-    props: 'name',
-  },
-  {
-    label: i18n.global.t('data.avatar'),
-    props: 'avatar',
-    formatValue(row: any) {
-      return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
-    },
-  },
-  {
-    label: i18n.global.t('data.department'),
-    props: 'department',
-  },
-  {
-    label: i18n.global.t('data.identity'),
-    props: 'identity',
-  },
-  {
-    label: i18n.global.t('data.prizeName'),
-    props: 'prizeName',
-    sort: true,
-  },
-  {
-    label: i18n.global.t('data.prizeTime'),
-    props: 'prizeTime',
-
-  },
-  {
-    label: i18n.global.t('data.operation'),
-    actions: [
-      {
-        label: i18n.global.t('data.removePerson'),
-        type: 'btn-info',
-        onClick: (row: IPersonConfig) => {
-          handleMoveNotPerson(row)
-        },
-      },
-
-    ],
-  },
-]
-</script>
-
-<template>
-  <div class="overflow-y-auto">
-    <PageHeader :title="t('viewTitle.winnerManagement')">
-      <template #buttons>
-        <div class="flex items-center justify-start gap-10">
-          <div>
-            <span>{{ t('table.luckyPeopleNumber') }}：</span>
-            <span>{{ alreadyPersonList.length }}</span>
-          </div>
-
-          <div class="flex flex-col">
-            <div class="form-control">
-              <label class="label flex items-center gap-2">
-                <p class="label-text">{{ t('table.detail') }}:</p>
-                <div class="flex items-center">
-                  <Switch v-model="isDetail" class="cursor-pointer" />
-                </div>
-              </label>
-            </div>
-          </div>
-        </div>
-      </template>
-    </PageHeader>
-
-    <DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
-
-    <DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />
-  </div>
-</template>
-
-<style lang='scss' scoped></style>

src/views/Config/Person/PersonAlready/columns.ts

@@ -0,0 +1,58 @@
+import type { IPersonConfig } from '@/types/storeType'
+import i18n from '@/locales/i18n'
+
+interface IColumnsProps {
+    showPrizeTime?: boolean
+    handleDeletePerson: (row: IPersonConfig) => void
+}
+
+export function tableColumns(props: IColumnsProps) {
+    return [
+        {
+            label: i18n.global.t('data.number'),
+            props: 'uid',
+            sort: true,
+        },
+        {
+            label: i18n.global.t('data.name'),
+            props: 'name',
+        },
+        {
+            label: i18n.global.t('data.avatar'),
+            props: 'avatar',
+            formatValue(row: any) {
+                return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
+            },
+        },
+        {
+            label: i18n.global.t('data.department'),
+            props: 'department',
+        },
+        {
+            label: i18n.global.t('data.identity'),
+            props: 'identity',
+        },
+        {
+            label: i18n.global.t('data.prizeName'),
+            props: 'prizeName',
+            sort: true,
+        },
+        props.showPrizeTime && {
+            label: i18n.global.t('data.prizeTime'),
+            props: 'prizeTime',
+
+        },
+        {
+            label: i18n.global.t('data.operation'),
+            actions: [
+                {
+                    label: i18n.global.t('data.removePerson'),
+                    type: 'btn-info',
+                    onClick: (row: IPersonConfig) => {
+                        props.handleDeletePerson(row)
+                    },
+                },
+            ],
+        },
+    ]
+}

src/views/Config/Person/PersonAlready/index.vue

@@ -0,0 +1,43 @@
+<script setup lang='ts'>
+import { useI18n } from 'vue-i18n'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import { Switch } from '@/components/ui/switch'
+import { useViewModel } from './useViewModel'
+
+const { t } = useI18n()
+
+const { alreadyPersonList, alreadyPersonDetail, isDetail, tableColumnsList, tableColumnsDetail } = useViewModel()
+</script>
+
+<template>
+  <div class="overflow-y-auto">
+    <PageHeader :title="t('viewTitle.winnerManagement')">
+      <template #buttons>
+        <div class="flex items-center justify-start gap-10">
+          <div>
+            <span>{{ t('table.luckyPeopleNumber') }}：</span>
+            <span>{{ alreadyPersonList.length }}</span>
+          </div>
+
+          <div class="flex flex-col">
+            <div class="form-control">
+              <label class="label flex items-center gap-2">
+                <p class="label-text">{{ t('table.detail') }}:</p>
+                <div class="flex items-center">
+                  <Switch v-model="isDetail" class="cursor-pointer" />
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
+      </template>
+    </PageHeader>
+
+    <DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
+
+    <DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />
+  </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAlready/useViewModel.ts

@@ -0,0 +1,26 @@
+import type { IPersonConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import useStore from '@/store'
+import { tableColumns } from './columns'
+
+export function useViewModel() {
+    const personConfig = useStore().personConfig
+
+    const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
+
+    const isDetail = ref(false)
+    function handleMoveNotPerson(row: IPersonConfig) {
+        personConfig.moveAlreadyToNot(row)
+    }
+
+    const tableColumnsList = tableColumns({ showPrizeTime: false, handleDeletePerson: handleMoveNotPerson })
+    const tableColumnsDetail = tableColumns({ showPrizeTime: true, handleDeletePerson: handleMoveNotPerson })
+    return {
+        alreadyPersonList,
+        alreadyPersonDetail,
+        isDetail,
+        tableColumnsList,
+        tableColumnsDetail,
+    }
+}

src/views/Demo/index.vue

@@ -1,8 +1,20 @@
 <script setup lang='ts'>
+import { ref } from 'vue'
 import { Switch } from '@/components/ui/switch'
+
+const checked = ref(true)
 </script>
 
 <template>
+  <fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
+    <legend class="fieldset-legend">
+      Login options
+    </legend>
+    <label class="label">
+      <input type="checkbox" :checked="checked" class="toggle border">
+      Remember me
+    </label>
+  </fieldset>
   <div>
     <Switch class="cursor-pointer" />
   </div>