From 1b4858ce18c6bd92b7570c9600f346166cfb1951 Mon Sep 17 00:00:00 2001
From: pdsuwwz <pdsu.wwz@foxmail.com>
Date: Fri, 30 Jun 2023 17:31:03 +0800
Subject: [PATCH 1/2] feat: extract member editor

---
 .../MemberTeam/components/MemberEditor.vue    | 242 ++++++++++++++++++
 src/modules/MemberTeam/data/index.ts          |  16 +-
 src/modules/MemberTeam/pages/edit.vue         |  19 +-
 src/modules/MemberTeam/pages/preview.vue      | 216 +---------------
 4 files changed, 271 insertions(+), 222 deletions(-)
 create mode 100644 src/modules/MemberTeam/components/MemberEditor.vue

diff --git a/src/modules/MemberTeam/components/MemberEditor.vue b/src/modules/MemberTeam/components/MemberEditor.vue
new file mode 100644
index 0000000..c780ec4
--- /dev/null
+++ b/src/modules/MemberTeam/components/MemberEditor.vue
@@ -0,0 +1,242 @@
+<template>
+  <n-card
+    :bordered="false"
+    :title="title"
+    class="bg-transparent"
+  >
+    <n-spin :show="loadingForm">
+      <n-form
+        ref="refForm"
+        :model="memberFormModel"
+        label-placement="top"
+        label-width="auto"
+        :disabled="disabledForm"
+      >
+        <n-grid
+          :x-gap="100"
+          cols="xs:1 s:1 m:2 l:2"
+          responsive="screen"
+        >
+          <n-grid-item>
+            <n-grid
+              cols="l:1"
+              responsive="screen"
+            >
+              <n-form-item-gi
+                v-for="(infoItem, index) in memberInfoMap"
+                :key="index"
+                :path="infoItem.path"
+                :label="infoItem.label"
+              >
+                <component
+                  :is="infoItem.render"
+                  v-if="infoItem.render"
+                  v-model:value="memberFormModel[infoItem.path]"
+                />
+
+                <n-input
+                  v-else
+                  v-model:value="memberFormModel[infoItem.path]"
+                />
+              </n-form-item-gi>
+            </n-grid>
+          </n-grid-item>
+          <n-grid-item>
+            <n-form-item
+              path="avatar"
+              label="成员头像"
+            >
+              <AvatarUpload
+                v-model="memberFormModel.avatar"
+                :disabled="disabledForm"
+              />
+            </n-form-item>
+          </n-grid-item>
+        </n-grid>
+
+        <n-form-item v-if="!disabledForm">
+          <n-button
+            type="primary"
+            :loading="loadingSubmit"
+            disabled
+            @click="handleSubmit()"
+          >
+            更新
+          </n-button>
+        </n-form-item>
+      </n-form>
+
+      <pre>{{ JSON.stringify(memberFormModel, null, 2) }}</pre>
+    </n-spin>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { sleep } from '@/utils/request'
+
+import {
+  NRadioGroup,
+  NRadio,
+  NSelect,
+  NButton
+} from 'naive-ui'
+
+import AvatarUpload from '@/modules/MemberTeam/components/AvatarUpload.vue'
+
+import {
+  userRoleMap,
+  userRankMap,
+  findMemberInfoById,
+  userStatusMap
+} from '@/modules/MemberTeam/data'
+import type { TypesMemberTeam } from '@/modules/MemberTeam/types'
+
+
+
+/**
+ * MemberEditor 成员管理-成员信息 【编辑/预览】通用组件
+ */
+defineOptions({
+  name: 'MemberEditor'
+})
+
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  userId: {
+    type: String,
+    default: ''
+  },
+  readonly: {
+    type: Boolean,
+    default: true
+  }
+})
+
+
+const disabledForm = computed(() => props.readonly)
+
+
+const memberFormModel = ref<TypesMemberTeam.TypeMemberPerson>({
+  username: '',
+  roleId: '',
+  userId: '',
+  avatar: '',
+  email: '',
+  rank: '',
+  phone: '',
+  memberStatus: null
+})
+
+const loadingForm = ref(true)
+const fetchMemberInfo = async () => {
+  loadingForm.value = true
+  const _member = await findMemberInfoById(props.userId)
+  if (_member) {
+    memberFormModel.value = _member
+  }
+  loadingForm.value = false
+}
+fetchMemberInfo()
+
+const memberInfoMap = [
+  {
+    path: 'username',
+    label: '成员名称'
+  },
+  {
+    path: 'userId',
+    label: '工号'
+  },
+  {
+    path: 'roleId',
+    label: '项目角色',
+    render: () => h(
+      NSelect,
+      {
+        options: userRoleMap,
+        value: memberFormModel.value.roleId,
+        onUpdateValue (v) {
+          memberFormModel.value.roleId = v
+        }
+      }
+    )
+  },
+  {
+    path: 'email',
+    label: '邮箱'
+  },
+  {
+    path: 'phone',
+    label: '手机号'
+  },
+  {
+    path: 'memberStatus',
+    label: '成员状态',
+    render: () => h(
+      NRadioGroup,
+      {
+        value: memberFormModel.value.memberStatus,
+        onUpdateValue (v) {
+          memberFormModel.value.memberStatus = v
+        }
+      },
+      () => userStatusMap.map(
+        (statusItem) => h(
+          NRadio,
+          {
+            ...statusItem
+          }
+        )
+      )
+    )
+  },
+  {
+    path: 'rank',
+    label: '职级',
+    render: () => h(
+      NSelect,
+      {
+        options: userRankMap,
+        value: memberFormModel.value.rank,
+        onUpdateValue (v) {
+          memberFormModel.value.rank = v
+        }
+      }
+    )
+  }
+]
+
+
+
+const refForm = ref<FormInst>()
+
+const validateRules = async () => {
+  return new Promise((resolve) => {
+    refForm.value!.validate(errors => {
+      if (errors) {
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+const loadingSubmit = ref(false)
+const handleSubmit = async () => {
+  loadingSubmit.value = true
+  await sleep(500)
+  loadingSubmit.value = false
+  window.$ModalMessage.success('更新成功')
+}
+
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/modules/MemberTeam/data/index.ts b/src/modules/MemberTeam/data/index.ts
index 2a99ac4..0fd1cfd 100644
--- a/src/modules/MemberTeam/data/index.ts
+++ b/src/modules/MemberTeam/data/index.ts
@@ -7,7 +7,9 @@ import {
 import memberAvatar from '@/assets/images/member-avatar.png'
 import type { TypesMemberTeam } from '@/modules/MemberTeam/types'
 
-// 随机获取数组中某一项
+/**
+ * 随机获取数组中某一项
+ */
 function getRandomValueFromArray<T>(arr: Array<T>): T {
   const randomIndex = Math.floor(Math.random() * arr.length)
   return arr[randomIndex]
@@ -15,7 +17,9 @@ function getRandomValueFromArray<T>(arr: Array<T>): T {
 
 
 
-// 级别映射表
+/**
+ * 级别映射表
+ */
 export const userRankMap = [
   {
     value: 'junior_development',
@@ -45,7 +49,9 @@ export const findUserRankMapByRankName = (targetRank) => {
 
 
 
-// 角色映射表
+/**
+ * 角色映射表
+ */
 export const userRoleMap = [
   {
     value: 'team_member',
@@ -80,7 +86,9 @@ export const findUserRoleMapByRankName = (targetRole) => {
 
 
 
-// 状态映射表
+/**
+ * 状态映射表
+ */
 export const userStatusMap = [
   {
     value: 1,
diff --git a/src/modules/MemberTeam/pages/edit.vue b/src/modules/MemberTeam/pages/edit.vue
index 59eac04..40e9847 100644
--- a/src/modules/MemberTeam/pages/edit.vue
+++ b/src/modules/MemberTeam/pages/edit.vue
@@ -1,8 +1,11 @@
 <template>
-  <div class="p-16px">
-    <h1>{{ pageTitle }}</h1>
-    <n-input v-model:value="inputValue" />
-  </div>
+  <LayoutPage>
+    <MemberEditor
+      title="成员管理-成员信息编辑"
+      :user-id="userId"
+      :readonly="false"
+    />
+  </LayoutPage>
 </template>
 
 <script lang="ts" setup>
@@ -14,13 +17,11 @@ defineOptions({
   name: 'MemberTeamEdit'
 })
 
-const route = useRoute()
-const router = useRouter()
-
-const pageTitle = ref('MemberTeamEdit 成员管理-成员信息编辑')
+import MemberEditor from '@/modules/MemberTeam/components/MemberEditor.vue'
 
-const inputValue = ref(pageTitle.value)
+const route = useRoute()
 
+const userId = ref(route.params.datasetId)
 
 </script>
 
diff --git a/src/modules/MemberTeam/pages/preview.vue b/src/modules/MemberTeam/pages/preview.vue
index ee666c6..18d3540 100644
--- a/src/modules/MemberTeam/pages/preview.vue
+++ b/src/modules/MemberTeam/pages/preview.vue
@@ -1,99 +1,14 @@
 <template>
   <LayoutPage>
-    <n-card
-      :bordered="false"
+    <MemberEditor
       title="成员管理-成员信息查看"
-      class="bg-transparent"
-    >
-      <n-spin :show="loadingForm">
-        <n-form
-          ref="refForm"
-          :model="memberFormModel"
-          label-placement="top"
-          label-width="auto"
-          :disabled="disabledForm"
-        >
-          <n-grid
-            :x-gap="100"
-            cols="xs:1 s:1 m:2 l:2"
-            responsive="screen"
-          >
-            <n-grid-item>
-              <n-grid
-                cols="l:1"
-                responsive="screen"
-              >
-                <n-form-item-gi
-                  v-for="(infoItem, index) in memberInfoMap"
-                  :key="index"
-                  :path="infoItem.path"
-                  :label="infoItem.label"
-                >
-                  <component
-                    :is="infoItem.render"
-                    v-if="infoItem.render"
-                    v-model:value="memberFormModel[infoItem.path]"
-                  />
-
-                  <n-input
-                    v-else
-                    v-model:value="memberFormModel[infoItem.path]"
-                  />
-                </n-form-item-gi>
-              </n-grid>
-            </n-grid-item>
-            <n-grid-item>
-              <n-form-item
-                path="avatar"
-                label="成员头像"
-              >
-                <AvatarUpload
-                  v-model="memberFormModel.avatar"
-                  :disabled="disabledForm"
-                />
-              </n-form-item>
-            </n-grid-item>
-          </n-grid>
-
-          <n-form-item v-if="!disabledForm">
-            <n-button
-              type="primary"
-              :loading="loadingSubmit"
-              disabled
-              @click="handleSubmit()"
-            >
-              更新
-            </n-button>
-          </n-form-item>
-        </n-form>
-
-        <pre>{{ JSON.stringify(memberFormModel, null, 2) }}</pre>
-      </n-spin>
-    </n-card>
+      :user-id="userId"
+      readonly
+    />
   </LayoutPage>
 </template>
 
 <script lang="ts" setup>
-import { sleep } from '@/utils/request'
-
-import {
-  NRadioGroup,
-  NRadio,
-  NSelect,
-  NButton
-} from 'naive-ui'
-
-import AvatarUpload from '@/modules/MemberTeam/components/AvatarUpload.vue'
-
-import {
-  userRoleMap,
-  userRankMap,
-  findMemberInfoById,
-  userStatusMap
-} from '@/modules/MemberTeam/data'
-import type { TypesMemberTeam } from '@/modules/MemberTeam/types'
-
-
 
 /**
  * MemberTeamPreview 成员管理-成员信息查看
@@ -102,128 +17,11 @@ defineOptions({
   name: 'MemberTeamPreview'
 })
 
-const route = useRoute()
-const router = useRouter()
-
-
-const disabledForm = ref(true)
-
-
-const memberFormModel = ref<TypesMemberTeam.TypeMemberPerson>({
-  username: '',
-  roleId: '',
-  userId: '',
-  avatar: '',
-  email: '',
-  rank: '',
-  phone: '',
-  memberStatus: null
-})
-
-const loadingForm = ref(true)
-const fetchMemberInfo = async () => {
-  loadingForm.value = true
-  const _member = await findMemberInfoById(route.params.datasetId)
-  if (_member) {
-    memberFormModel.value = _member
-  }
-  loadingForm.value = false
-}
-fetchMemberInfo()
-
-const memberInfoMap = [
-  {
-    path: 'username',
-    label: '成员名称'
-  },
-  {
-    path: 'userId',
-    label: '工号'
-  },
-  {
-    path: 'roleId',
-    label: '项目角色',
-    render: () => h(
-      NSelect,
-      {
-        options: userRoleMap,
-        value: memberFormModel.value.roleId,
-        onUpdateValue (v) {
-          memberFormModel.value.roleId = v
-        }
-      }
-    )
-  },
-  {
-    path: 'email',
-    label: '邮箱'
-  },
-  {
-    path: 'phone',
-    label: '手机号'
-  },
-  {
-    path: 'memberStatus',
-    label: '成员状态',
-    render: () => h(
-      NRadioGroup,
-      {
-        value: memberFormModel.value.memberStatus,
-        onUpdateValue (v) {
-          memberFormModel.value.memberStatus = v
-        }
-      },
-      () => userStatusMap.map(
-        (statusItem) => h(
-          NRadio,
-          {
-            ...statusItem
-          }
-        )
-      )
-    )
-  },
-  {
-    path: 'rank',
-    label: '职级',
-    render: () => h(
-      NSelect,
-      {
-        options: userRankMap,
-        value: memberFormModel.value.rank,
-        onUpdateValue (v) {
-          memberFormModel.value.rank = v
-        }
-      }
-    )
-  }
-]
-
-
-
-const refForm = ref<FormInst>()
-
-const validateRules = async () => {
-  return new Promise((resolve) => {
-    refForm.value!.validate(errors => {
-      if (errors) {
-        resolve(false)
-      } else {
-        resolve(true)
-      }
-    })
-  })
-}
-
-const loadingSubmit = ref(false)
-const handleSubmit = async () => {
-  loadingSubmit.value = true
-  await sleep(500)
-  loadingSubmit.value = false
-  window.$ModalMessage.success('更新成功')
-}
+import MemberEditor from '@/modules/MemberTeam/components/MemberEditor.vue'
 
+const route = useRoute()
 
+const userId = ref(route.params.datasetId)
 
 </script>
 

From 503fda8a1b8c1087a7b3b01b75d0edb8ba0ceb5d Mon Sep 17 00:00:00 2001
From: pdsuwwz <pdsu.wwz@foxmail.com>
Date: Fri, 30 Jun 2023 17:33:29 +0800
Subject: [PATCH 2/2] fix: route.params.datasetid

---
 src/modules/MemberTeam/pages/edit.vue    | 2 +-
 src/modules/MemberTeam/pages/preview.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/MemberTeam/pages/edit.vue b/src/modules/MemberTeam/pages/edit.vue
index 40e9847..041496e 100644
--- a/src/modules/MemberTeam/pages/edit.vue
+++ b/src/modules/MemberTeam/pages/edit.vue
@@ -21,7 +21,7 @@ import MemberEditor from '@/modules/MemberTeam/components/MemberEditor.vue'
 
 const route = useRoute()
 
-const userId = ref(route.params.datasetId)
+const userId = ref(route.params.datasetId as string)
 
 </script>
 
diff --git a/src/modules/MemberTeam/pages/preview.vue b/src/modules/MemberTeam/pages/preview.vue
index 18d3540..28a20a3 100644
--- a/src/modules/MemberTeam/pages/preview.vue
+++ b/src/modules/MemberTeam/pages/preview.vue
@@ -21,7 +21,7 @@ import MemberEditor from '@/modules/MemberTeam/components/MemberEditor.vue'
 
 const route = useRoute()
 
-const userId = ref(route.params.datasetId)
+const userId = ref(route.params.datasetId as string)
 
 </script>