1

src/components/common/input-cell.vue

@@ -29,6 +29,8 @@
             :placeholder="placeholder"
             @input="handleInput"
             @blur="handleChange"
+            @compositionstart="onCompositionStart"
+            @compositionend="onCompositionEnd"
           >         
           <textarea
             v-else
@@ -50,6 +52,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { Field } from 'vant'
+Vue.use(Field)
 
 export default Vue.extend({
   components:{ 
@@ -90,18 +94,32 @@ export default Vue.extend({
     return  {
       // value: '',
       length: 0,
-      showError: false
+      showError: false,
+      compsitionCheck: true
     }
   },
-  created() {
-    this.length = this.value?.length || 0
-  },
   methods: {
+    onCompositionStart() {
+      this.compsitionCheck = false
+    },
+    onCompositionEnd(e: InputEvent) {
+      this.compsitionCheck = true
+      const value = (e.target as HTMLInputElement).value
+      this.showError = this.showError ? !this.checkIfEmpty(value) : this.showError
+      this.length = value.length
+      if (this.limit > 0 && this.length >= this.limit) {
+        this.$emit('input', value.slice(0, this.limit))
+        this.length = this.limit
+      } else {
+        this.$emit('input', value)
+      }
+    },
     checkIfEmpty(string: string) {
       if (typeof string === 'undefined') return false
       return string.replace(/(^\s*)|(\s*$)/g, '') !== ''
     },
     handleInput(e: InputEvent) {
+      if (!this.compsitionCheck) return
       const value = (e.target as HTMLInputElement).value
       this.showError = this.showError ? !this.checkIfEmpty(value) : this.showError
       this.length = value.length
@@ -118,6 +136,11 @@ export default Vue.extend({
         this.showError = true
       }
     }
+  },
+  watch: {
+    value(val) {
+      this.length = val.length
+    }
   }
 })
 </script>

src/service/moudles/service.dto.ts

@@ -81,7 +81,7 @@ export interface GetDepDTO {
 
 export interface UpdateDepDTO {
   "name": string,
-  "parentId": string,
+  // "parentId": string,
   "entId": string,
   "id": string,
   "leaderId": string

src/store/index.ts

@@ -7,22 +7,12 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    enterpriseInfo: undefined,
     acceptJoin: undefined,
     addDep: undefined,
     selectedStaff: undefined,
     selectedDep: undefined
   },
   mutations: {
-    setEnterpriseInfo(state, payload) {
-      state.enterpriseInfo = payload
-    },
-    setAcceptJoin(state, payload) {
-      state.acceptJoin = payload
-    },
-    setAddDep(state, payload) {
-      state.addDep = payload
-    },
     setSelectedStaff(state, payload) {
       state.selectedStaff = payload
     },

src/util/Contact/index.ts

@@ -91,10 +91,19 @@ export function getContacts(arr: Array<Staff>) {
   const contacts: Contact = {}
   arr.forEach(item => {
     const firstPy = makePy(item.name)[0].slice(0, 1).toUpperCase()
-    if (typeof contacts[firstPy] === 'undefined') {
-      contacts[firstPy] = [item]
+    const test = /[0-9`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/
+    if (test.test(firstPy)) {
+      if (typeof contacts['#'] === 'undefined') {
+        contacts['#'] = [item]
+      } else {
+        contacts['#'].push(item)
+      }
     } else {
-      contacts[firstPy].push(item)
+      if (typeof contacts[firstPy] === 'undefined') {
+        contacts[firstPy] = [item]
+      } else {
+        contacts[firstPy].push(item)
+      }
     }
   })
   return contacts

src/views/team/add-member.vue

@@ -128,7 +128,7 @@ export default Vue.extend({
       depId: '',
       entId: '',
       hash: 'mock-hash',
-      joinTime: 0,
+      joinTime: new Date().getTime(),
       phone: '',
       position: ''
     }

src/views/team/components/contact-selector.vue

+<template>
+  <!-- 选择成员 -->
+  <van-overlay :show="show" z-index="2000">
+    <div class="select-team w-screen h-screen overflow-auto">
+      <main-page
+        main-bg="bg-white"
+        header-bg="bg-white"
+        :title="title"
+        :loading="loading"
+        left-arrow
+        @click-left="goBack"
+      >
+        <div class="px-4 pt-14">
+          <!-- <div class="py-2">{{currentDep.name}}</div> -->
+          <!-- 通讯录 -->
+          <div class="py-2 font-medium">{{dep.name}}</div>
+          <div class="pb-16">
+            <div class="text-text-secondary py-1">成员</div>
+            <team-contacts
+              :radio="true"
+              :multiple="multiple"
+              :checked.sync="checkedMember"
+              :contacts="contacts"
+            />
+          </div>
+          <!-- 底部操作 -->
+          <div class="py-2 px-4 bg-white w-screen fixed bottom-0 left-0 z-30">
+            <c-button round @click="confirm">确定</c-button>
+          </div>
+        </div>
+      </main-page>
+    </div>
+  </van-overlay>
+</template>
+
+<script lang="ts">
+import Vue, {PropType} from 'vue'
+import { Department, Staff } from '@/Interface'
+
+export default Vue.extend({
+  name: 'ContactSelector',
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'team-tree': () => import('@/views/team/components/team-tree.vue'),
+    'team-contacts': () => import('@/views/team/components/team-contacts.vue'),
+    'c-button': () => import('@/components/common/c-button.vue'),
+    'switch-cell': () => import('@/components/common/switch-cell.vue')
+  },
+  props: {
+    show: Boolean,
+    entId: String,
+    dep: Object,
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    checkedMemberId: {
+      type: Array as PropType<Array<String>>
+    },
+    title: {
+      type: String,
+      default: '团队成员'
+    },
+    contacts: Object,
+    actionType: String
+  },
+  data() {
+    let changedVal: Array<string> = []
+    return {
+      loading: false,
+      changed: false,
+      changedVal
+    }
+  },
+  computed: {
+    checkedMember: {
+      get(): Array<String> {
+        if (!this.changed) {
+          return this.checkedMemberId
+        } else {
+          return this.changedVal
+        }
+      },
+      set(val:Array<string>) {
+        this.changed = true
+        this.changedVal = val
+      }
+    }
+  },
+  methods: {
+    // 确认选择
+    confirm() {
+      this.loading=true
+      const data = {
+        entId: this.entId,
+        depId: '',
+        ids: this.checkedMember as Array<string>
+      }
+      if (this.actionType === 'add') {
+        data.depId = this.dep.id
+      }
+      if (this.actionType === 'remove') {
+        const rootDepId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').rootDepId
+        data.depId = rootDepId
+      }
+      this.$service.staff.changeDep(data).then((res:any) => {
+        this.loading=false
+        const {data} = res
+        if (data.code===this.$global.success) {
+          if (this.actionType === 'remove') {
+            this.$toast('移除成功')
+          } else {
+            this.$toast('添加成功')
+          }
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+      this.$emit('update:checkedMemberId', this.checkedMember)
+      this.$emit('update:show', false)
+      this.checkedMember=[]
+    },
+    goBack(){
+      this.$emit('update:show', false)
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>
\ No newline at end of file

src/views/team/components/member-selector.vue

@@ -5,7 +5,7 @@
       <main-page
         main-bg="bg-white"
         header-bg="bg-white"
-        title="选择主管"
+        :title="title"
         :loading="loading"
         left-arrow
         @click-left="goBack"
@@ -33,6 +33,7 @@
             :checked.sync="ifContainChildDep"
             @change="handleSwitchChange"
           />
+          <!-- <div class="py-2">{{currentDep.name}}</div> -->
           <!-- 通讯录 -->
           <div class="pb-16">
             <div class="text-text-secondary py-1">成员</div>
@@ -41,7 +42,6 @@
               :multiple="multiple"
               :checked.sync="checkedMember"
               :contacts="contacts"
-              @click-member="clickMember"
             />
           </div>
           <!-- 底部操作 -->
@@ -84,6 +84,10 @@ export default Vue.extend({
     },
     checkedMemberId: {
       type: Array as PropType<Array<String>>
+    },
+    title: {
+      type: String,
+      default: '选择主管'
     }
   },
   data() {
@@ -97,13 +101,12 @@ export default Vue.extend({
     }
     let changedVal: Array<string> = []
     return {
-      title: '导航',
       team,
       loading: false,
       contacts: {},
       parentId: '',
-      entId: '166961152260050944',
-      ifContainChildDep: true,
+      entId: '',
+      ifContainChildDep: false,
       enterpriseInfo: {},
       currentDep,
       preDep: {},
@@ -115,6 +118,7 @@ export default Vue.extend({
     }
   },
   mounted() {
+    this.entId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').id
     this.getEntInfo()
   },
   computed: {
@@ -130,7 +134,6 @@ export default Vue.extend({
         }
       },
       set(val:Array<string>) {
-        console.log(val, 'val')
         this.changed = true
         this.changedVal = val
       }
@@ -143,7 +146,6 @@ export default Vue.extend({
     },
     // 确认选择
     confirmSelect() {
-      // this.$store.commit('setAddDepLeader', this.checkedMemberId)
       this.$emit('update:checkedMemberId', this.checkedMember)
       this.$emit('update:show', false)
     },
@@ -188,7 +190,7 @@ export default Vue.extend({
         parentId: this.parentId,
         entId: this.entId,
         hasStaff: true,
-        isDirect: this.ifContainChildDep
+        isDirect: !this.ifContainChildDep
       }).then((res: any) => {
         const { data } = res
         this.loading = false
@@ -205,10 +207,6 @@ export default Vue.extend({
         }
       })
     },
-    clickMember(member: Staff) {
-      // openCompanyUserInfo(JSON.stringify(member))
-      // this.$router.push(`/team/team-member/${member.id}`)
-    },
     clickItem(val: Department) {
       this.parentId = val.id
       this.getStaff()

src/views/team/components/team-contacts.vue

@@ -147,9 +147,13 @@ export default Vue.extend({
     navs() {
       let arr: Array<string> = []
       for (let key in this.contacts) {
-        arr.push(key)
+        if (key !== '#'){
+          arr.push(key)
+        } else {
+          arr.sort().push('#')
+        }
       }
-      return arr.sort()
+      return arr
     },
     list() {
       const obj: Contacts = {}

src/views/team/department-management.vue

@@ -5,6 +5,21 @@
     :loading="loading"
     @click-left="$router.go(-1)"
   >
+    <member-selector
+      :title="memberSelectorTitle"
+      :show.sync="showMemberSelector"
+      :multiple="multiple"
+      :checked-member-id.sync="selectedMemberId"
+    />
+    <contact-selector
+      :ent-id="entId"
+      :dep="depInfo"
+      :title="contactSelectorTitle"
+      :show.sync="showContactSelector"
+      :multiple="multiple"
+      :action-type="actionType"
+      :contacts="contacts"
+    />
     <div class="pt-14 px-4">
       <input-cell
         v-model="depInfo.name"
@@ -17,30 +32,39 @@
       <c-cell
         dot
         title="部门主管"
-        content="部门主管名称"
+        :content="leaderInfo.name"
         class="mt-4"
+        @click="selectLeader"
       />
       <c-cell
         dot
         title="上级部门"
         content="产品设计部"
-        class="mt-4"
       />
-      <switch-cell title="该部门包含子部门成员" :checked.sync="check" />
+      <!-- <switch-cell title="该部门包含子部门成员" :checked.sync="check" /> -->
       <c-cell
         dot
         title="添加成员"
         class="mt-4"
-        @click="$router.push('/team/add-member')"
+        @click="addMember"
       />
       <c-cell
         dot
-        title="删除成员"
+        title="移除成员"
+        @click="removeMember"
       />
       <c-button
         round
-        type="secondary"
         class="mt-10"
+        @click="save"
+      >
+        保存
+      </c-button>
+      <c-button
+        round
+        type="secondary"
+        class="mt-2.5"
+        @click="deleteDep"
       >
         删除部门
       </c-button>
@@ -49,7 +73,9 @@
 </template>
 
 <script lang="ts">
+import { Department, Staff } from '@/Interface'
 import Vue from 'vue'
+import { getContacts } from '@/util/Contact'
 
 export default Vue.extend({
   name: 'DepartmentManagement',
@@ -59,16 +85,30 @@ export default Vue.extend({
     'input-cell': () => import('@/components/common/input-cell.vue'),
     'c-cell': () => import('@/components/common/c-cell.vue'),
     'c-button': () => import('@/components/common/c-button.vue'),
-    'switch-cell': () => import('@/components/common/switch-cell.vue')
+    'switch-cell': () => import('@/components/common/switch-cell.vue'),
+    'member-selector': () => import('@/views/team/components/member-selector.vue'),
+    'contact-selector': () => import('@/views/team/components/contact-selector.vue')
   },
   data() {
+    const selectedMemberId: Array<string> = []
     return {
       name: '产品部',
-      check: false,
       loading: false,
       depId: '',
       entId: '',
-      depInfo: {}
+      depInfo: {} as Department,
+      leaderInfo: {} as Staff,
+
+      showMemberSelector: false,
+      containChild: true,
+      selectedMemberId,
+      memberSelectorTitle: '',
+      multiple: false,
+
+      contacts: {},
+      showContactSelector: false,
+      contactSelectorTitle: '',
+      actionType: 'add'
     }
   },
   created() {
@@ -87,10 +127,118 @@ export default Vue.extend({
         this.loading = false
         if (data.code === this.$global.success) {
           this.depInfo = data.data
+          this.selectedMemberId = [this.depInfo.leaderId]
+          this.getStaffInfo(this.depInfo.leaderId)
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    getStaffInfo(id: string) {
+      this.loading = true
+      this.$service.staff.getInfo({
+        entId: this.entId,
+        id
+      }).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.leaderInfo = data.data
+        }else {
+          this.$toast(data.msg)
+        }
+      })
+    },
+    // 获取通讯录
+    getStaff(id: string, isDirect: boolean) {
+      this.loading = true
+      this.$service.department.getSub({
+        parentId: id,
+        entId: this.entId,
+        hasStaff: true,
+        isDirect: isDirect
+      }).then((res: any) => {
+        const { data } = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          // 通讯录
+          this.contacts = getContacts(data.data.staffList || [])
+          console.log(this.contacts, data.data.staffList, 'this.contacts')
+          // 部门树
         } else {
           this.$toast(data.msg)
         }
       })
+    },
+    selectLeader() {
+      this.showMemberSelector = true
+      this.multiple=false
+      this.selectedMemberId = [this.leaderInfo.id]
+    },
+    addMember() {
+      this.showContactSelector = true
+      this.actionType="add"
+      this.contactSelectorTitle = '添加成员'
+      this.multiple = true
+      const rootDepId = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').rootDepId
+      this.getStaff(rootDepId, false)
+    },
+    removeMember() {
+      this.showContactSelector = true
+      this.actionType="remove"
+      this.contactSelectorTitle = '移除成员'
+      this.multiple = true
+      this.getStaff(this.depInfo.id, true)
+    },
+    deleteDep() {
+      this.$dialog.confirm({
+        title: '提示',
+        message: '确定要删除当前部门吗？'
+        // confirmButtonText: '解散'
+      }).then(() => {
+        const data = {
+          entId: this.entId,
+          id: this.depInfo.id
+        }
+        this.loading=true
+        this.$service.department.deleteDep(data).then((res:any) => {
+          const {data} = res
+          this.loading=false
+          if (data.code === this.$global.success) {
+            this.$toast('删除成功')
+            this.$router.go(-1)
+          } else {
+            this.$toast(data.msg)
+          }
+        })
+      }).catch(() => {
+        console.log('取消解散')
+      })
+    },
+    save() {
+      this.loading = true
+      const dep = this.depInfo
+      const data = {
+        name: dep.name,
+        id: dep.id,
+        leaderId: this.leaderInfo.id,
+        entId: this.entId
+      }
+      this.$service.department.updateDep(data).then((res: any) => {
+        const {data} = res
+        this.loading = false
+        if (data.code === this.$global.success) {
+          this.$toast('保存成功')
+          this.$router.push('/team/team-frame')
+        } else {
+          this.$toast(data.msg)
+        }
+      })
+    }
+  },
+  watch: {
+    selectedMemberId(newVal) {
+      this.getStaffInfo(newVal[0])
     }
   }
 })

src/views/team/team-detail.vue

@@ -116,7 +116,7 @@ export default Vue.extend({
         parentId: id,
         entId: this.entId,
         hasStaff: true,
-        isDirect: this.ifContainChildDep
+        isDirect: !this.ifContainChildDep
       }).then((res: any) => {
         this.loading = false
         const { data } = res

src/views/team/team-frame.vue

@@ -34,8 +34,6 @@
         <div class="pb-16">
           <div class="text-text-secondary py-1">成员</div>
           <team-contacts
-            :radio="showRadio"
-            :multiple="multiple"
             :checked.sync="checkedMemberId"
             :contacts="contacts"
             @click-member="clickMember"
@@ -43,16 +41,11 @@
         </div>
         <!-- 底部操作 -->
         <div class="py-2 px-4 bg-white w-screen fixed bottom-0 left-0 z-30">
-          <template v-if="showRadio">
-            <c-button round @click="confirmSelect">确定</c-button>
-          </template>
-          <template v-else>
-            <div class="grid grid-cols-3 gap-2.5">
-              <c-button round @click="addMember">添加成员</c-button>
-              <c-button round @click="addDep">添加部门</c-button>
-              <c-button round @click="setDepartment">部门设置</c-button>
-            </div>
-          </template>
+          <div class="grid grid-cols-3 gap-2.5">
+            <c-button round @click="addMember">添加成员</c-button>
+            <c-button round @click="addDep">添加部门</c-button>
+            <c-button round @click="setDepartment">部门设置</c-button>
+          </div>
         </div>
       </div>
     </main-page>
@@ -104,14 +97,9 @@ export default Vue.extend({
       preDep: {},
       // 是否显示check
       checkedMemberId: [],
-      showRadio: false,
-      fromPath: '',
-      multiple: false
+      fromPath: ''
     }
   },
-  created() {
-    this.showRadio = this.$route.query.showRadio === '1'
-  },
   mounted() {
     // useLocalStorageState('USER_INFO',getUserInfo())
     this.getEntInfo()
@@ -126,11 +114,6 @@ export default Vue.extend({
       this.parentId = dep.id
       this.getStaff()
     },
-    // 确认选择
-    confirmSelect() {
-      this.$store.commit('setAddDepLeader', this.checkedMemberId)
-      this.$router.push(this.fromPath)
-    },
     appNavBack(){
       this.$router.go(-1)
       // appNavBack()
@@ -174,7 +157,7 @@ export default Vue.extend({
         parentId: this.parentId,
         entId: this.entId,
         hasStaff: true,
-        isDirect: this.ifContainChildDep
+        isDirect: !this.ifContainChildDep
       }).then((res: any) => {
         const { data } = res
         this.loading = false
@@ -193,7 +176,6 @@ export default Vue.extend({
     },
     clickMember(member: Staff) {
       openCompanyUserInfo(JSON.stringify(member))
-      // this.$router.push(`/team/team-member/${member.id}`)
     },
     clickItem(val: Department) {
       this.parentId = val.id
@@ -205,7 +187,7 @@ export default Vue.extend({
     },
     // 部门设置
     setDepartment() {
-      const id = JSON.parse(localStorage.getItem('ENT_INFO') || '{}').rootDepId
+      const id = this.currentDep.id
       this.$router.push(`/team/department-management/${id}`)
     },
     // 添加成员