🤸 feat: update member role assign (#44)

Author: pdsuwwz

components.d.ts

@@ -32,6 +32,7 @@ declare module 'vue' {
     NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicTags: typeof import('naive-ui')['NDynamicTags']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
@@ -50,6 +51,7 @@ declare module 'vue' {
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
+    NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']

src/modules/HomeFront/components/CreateProjectForm.vue

@@ -4,6 +4,7 @@
     :model="projectFormModel"
     label-placement="top"
     label-width="auto"
+    class="max-h-600px overflow-y-auto"
   >
     <n-list>
       <template #header>
@@ -79,18 +80,37 @@
         </div>
       </template>
       <n-list-item>
-        <n-button @click="handleSelectMembers()">选择成员</n-button>
-        <!-- <n-form-item
-          path="memberList"
-        >
-          <n-input
-            v-model:value="projectFormModel.memberList"
-          />
-        </n-form-item> -->
+        <n-space vertical>
+          <n-form-item
+            v-for="(userRoleItem, index) in userRoleMap"
+            :key="index"
+            label-placement="left"
+            :label="userRoleItem.label + ':'"
+          >
+            <n-space>
+              <n-tag
+                v-for="(memberListRoleItem) in projectFormModel.memberList[userRoleItem.value]"
+                :key="memberListRoleItem.userId"
+                closable
+              >
+                {{ memberListRoleItem.username }}
+              </n-tag>
+              <n-button
+                size="small"
+                type="primary"
+                dashed
+                @click="handleSelectMembers(userRoleItem)"
+              >
+                添加
+              </n-button>
+            </n-space>
+            <!-- <n-button @click="handleSelectMembers()">选择成员</n-button> -->
+          </n-form-item>
+        </n-space>
       </n-list-item>
     </n-list>
+    <pre>{{ JSON.stringify(projectFormModel, null, 2) }}</pre>
   </n-form>
-  <pre>{{ JSON.stringify(projectFormModel, null, 2) }}</pre>
 
 </template>
 
@@ -114,6 +134,10 @@ import {
   ProjectLevelMap
 } from '@/modules/HomeFront/data'
 
+import {
+  userRoleMap
+} from '@/modules/MemberTeam/data'
+
 import MemberAssignCard from '@/modules/MemberTeam/components/MemberAssignCard.vue'
 
 defineOptions({
@@ -129,7 +153,13 @@ const projectFormModel = ref<TypesHomeFront.TypeCreateProjectInfo>({
   projectDesc: '',
   startDate: null,
   endDate: null,
-  memberList: ''
+  memberList: {
+    teamMember: [],
+    teamLeader: [],
+    projectManager: [],
+    qualityManager: [],
+    reviewManager: []
+  }
 })
 
 
@@ -238,8 +268,12 @@ const projectBasicMap = shallowRef([
   }
 ])
 
-const handleSelectMembers = () => {
-  const dd = window.$ModalDialog.create({
+const refMemberAsign = ref()
+const handleSelectMembers = (userRoleItem) => {
+  const _member = reactive(
+    projectFormModel.value.memberList[userRoleItem.value]
+  )
+  window.$ModalDialog.create({
     title: '选择成员',
     style: {
       maxWidth: '650px',
@@ -248,22 +282,15 @@ const handleSelectMembers = () => {
     maskClosable: false,
     closeOnEsc: false,
     content: () => h(
-      MemberAssignCard
+      MemberAssignCard,
+      {
+        ref: refMemberAsign,
+        modelValue: _member
+      }
     ),
     positiveText: '确定',
     async onPositiveClick() {
-      // const isValid = await instanceRef.value.validateRules()
-      // if (!isValid) {
-      //   return Promise.reject()
-      // }
-
-      // dd.loading = true
-      // dd.positiveText = '提交中..'
-      // await sleep(1000)
-
-      // dd.positiveText = _positiveText
-      // dd.loading = false
-      return Promise.reject()
+      projectFormModel.value.memberList[userRoleItem.value] = refMemberAsign.value.checkedRowsRef
     }
   })
 }

src/modules/HomeFront/types/index.ts

@@ -1,3 +1,5 @@
+import type { TypesMemberTeam } from '@/modules/MemberTeam/types'
+
 export type ProjectItem = {
   id: string
   project_code: string
@@ -9,6 +11,14 @@ export type ProjectItem = {
 
 
 export namespace TypesHomeFront {
+  export interface MemberRoleListMap {
+    teamMember: Array<TypesMemberTeam.TypeMemberPerson>
+    teamLeader: Array<TypesMemberTeam.TypeMemberPerson>
+    projectManager: Array<TypesMemberTeam.TypeMemberPerson>
+    qualityManager: Array<TypesMemberTeam.TypeMemberPerson>
+    reviewManager: Array<TypesMemberTeam.TypeMemberPerson>
+  }
+
   export type TypeCreateProjectInfo = {
     /**
      * 项目名称
@@ -37,6 +47,6 @@ export namespace TypesHomeFront {
     /**
      * 成员映射表 Record
      */
-    memberList: any
+    memberList: MemberRoleListMap
   }
 }

src/modules/MemberTeam/components/MemberAssignCard.vue

@@ -110,6 +110,30 @@ import MemberAvatar from './MemberAvatar.vue'
 
 const memberTeamStore = useMemberTeamStore()
 
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<Array<TypesMemberTeam.TypeMemberPerson>>,
+    default() {
+      return []
+    }
+  }
+})
+
+/**
+ * 浅拷贝，防止原数据被修改
+ */
+const selectedMembers = props.modelValue.slice()
+
+/**
+ * 初始化已经勾选过的行状态
+ */
+const initSelectedMembers = () => {
+  nextTick(() => {
+    checkedRowKeysRef.value = selectedMembers.map((member) => member.userId)
+    checkedRowsRef.value = selectedMembers
+  })
+}
+initSelectedMembers()
 
 /**
  * 构造行唯一 ID
@@ -122,8 +146,16 @@ const getRowKey = (row: TypesMemberTeam.TypeMemberPerson) => row.userId
 const checkedRowKeysRef = ref<Array<DataTableRowKey>>([])
 const checkedRowsRef = ref<Array<TypesMemberTeam.TypeMemberPerson>>([])
 
-const handleUpdateCheckedRows = (keys, rows: Array<object>) => {
-  checkedRowsRef.value = rows as Array<TypesMemberTeam.TypeMemberPerson>
+const handleUpdateCheckedRows = (keys, rows: Array<object>, meta) => {
+  const isChecked = meta.action === 'check'
+  const _row = meta.row as TypesMemberTeam.TypeMemberPerson
+
+  if (isChecked) {
+    checkedRowsRef.value.push(_row)
+  } else {
+    const _index = checkedRowsRef.value.findIndex(checkedRow => checkedRow.userId === _row.userId)
+    _index > -1 && checkedRowsRef.value.splice(_index, 1)
+  }
 }
 
 /**
@@ -191,6 +223,10 @@ const handleChangeSearch = _.debounce(
   200
 )
 
+defineExpose({
+  checkedRowsRef
+})
+
 </script>
 
 <style lang="scss">

src/modules/MemberTeam/data/index.ts

@@ -6,6 +6,7 @@ import {
 
 import memberAvatar from '@/assets/images/member-avatar.png'
 import type { TypesMemberTeam } from '@/modules/MemberTeam/types'
+import type { TypesHomeFront } from '@/modules/HomeFront/types'
 
 /**
  * 随机获取数组中某一项
@@ -47,30 +48,34 @@ export const findUserRankMapByRankName = (targetRank) => {
   )!
 }
 
+export interface UserRole {
+  value: keyof TypesHomeFront.MemberRoleListMap
+  label: string
+}
 
 
 /**
  * 角色映射表
  */
-export const userRoleMap = [
+export const userRoleMap: Array<UserRole> = [
   {
-    value: 'team_member',
+    value: 'teamMember',
     label: '团队成员'
   },
   {
-    value: 'team_leader',
+    value: 'teamLeader',
     label: '现场负责人'
   },
   {
-    value: 'project_manager',
+    value: 'projectManager',
     label: '项目经理'
   },
   {
-    value: 'quality_manager',
+    value: 'qualityManager',
     label: '质控经理'
   },
   {
-    value: 'review_manager',
+    value: 'reviewManager',
     label: '复核经理'
   }
 ]