address-book-shell 0.0.1

package/packages/address-book/src/index.vue

@@ -0,0 +1,639 @@
+<template>
+  <el-dialog
+    v-on="$listeners"
+    class="address-dialog"
+    :top="top"
+    v-bind="$attrs"
+    title="提示"
+    :width="width"
+    @open="open"
+    @opened="opened"
+  >
+    <template slot="title">
+      <!--  -->
+      <div class="head-title">{{ title }}</div>
+      <div class="tabs not-select" v-if="tabList.length > 1">
+        <el-radio-group v-model="tabsValue" size="small">
+          <el-radio-button v-for="item in tabList" :key="item" :label="item">{{
+            item
+          }}</el-radio-button>
+        </el-radio-group>
+      </div>
+    </template>
+
+    <!-- 中间主体内容 -->
+    <div class="recently" v-if="!hiddenRecently && recently.length">
+      <span class="recently-title">最近</span>
+      <AddreddGroup
+        :data-list="recently"
+        @addSelectionItem="addSelectionItem"
+        @addSelectionList="addSelectionList"
+        @removeAddressItem="deleteSelectionItem"
+        @deleteSelectionList="deleteSelectionList"
+        v-bind="$attrs"
+      ></AddreddGroup>
+    </div>
+    <div class="content mail-list-content" v-show="tabsValue == '组织架构'">
+      <div class="content-aside">
+        <AddressAside
+          @asideChange="asideChange"
+          ref="addressAside"
+          :typeList="typeList"
+          v-bind="$attrs"
+          :robotsList="robotsList"
+        ></AddressAside>
+      </div>
+      <div class="content-table">
+        <AddressContent
+          :radio="radio"
+          v-on="$listeners"
+          v-bind="$attrs"
+          :selected="selectedList"
+          :selectDisabledlist="selectDisabledlist"
+          :robotsList="robotsList"
+          @addSelectionItem="addSelectionItem"
+          @addSelectionList="addSelectionList"
+          @deleteSelectionItem="deleteSelectionItem"
+          @deleteSelectionList="deleteSelectionList"
+          :typeList="typeList"
+          ref="addressContent"
+        ></AddressContent>
+      </div>
+    </div>
+
+    <div class="content mail-list-content" v-show="tabsValue == '我的好友'">
+      <div class="content-table w100">
+        <address-content
+          v-on="$listeners"
+          v-bind="$attrs"
+          :selected="selectedList"
+          :selectDisabledlist="selectDisabledlist"
+          @addSelectionItem="addSelectionItem"
+          @addSelectionList="addSelectionList"
+          @deleteSelectionItem="deleteSelectionItem"
+          @deleteSelectionList="deleteSelectionList"
+          myFriend
+          :tabsValue="tabsValue"
+          ref="addressContentMyFriend"
+        ></address-content>
+      </div>
+    </div>
+
+    <div class="selected">
+      <AddreddGroup
+        :data-list="selectedList"
+        close
+        :size="36"
+        :selectDisabledlist="selectDisabledlist"
+        @removeAddressItem="deleteSelectionItem"
+        @queryRecentContacts="queryRecentContacts"
+        v-bind="$attrs"
+        v-show="selectedList.length"
+      >
+      </AddreddGroup>
+      <span v-show="!selectedList.length" class="no-selected-data">还未进行选择</span>
+    </div>
+    <!-- <span>这是一段信息</span> -->
+    <span slot="footer" class="dialog-footer address-foot">
+      <div class="foot-left">
+        <div class="foot-see-more">
+          <el-button
+            type="info"
+            size="small"
+            @click="footBtnsClick(item.id)"
+            v-for="item in footBtns"
+            :key="item.id"
+            >{{ item.title }}</el-button
+          >
+          <!-- <el-button type="info" size="small" @click="collectionShow">收藏当前名单</el-button> -->
+        </div>
+      </div>
+      <div class="foot-right">
+        <span v-show="selectedList.length" class="foot-selected-num"
+          >已选 {{ selectedList.length }}</span
+        >
+        <el-button @click="cancel" size="small">取 消</el-button>
+        <el-button type="primary" @click="submit" size="small">确 定</el-button>
+      </div>
+    </span>
+    <addressCurrentList
+      :visible.sync="currentListVisible"
+      :selectedList="currentList"
+      @refreshData="refreshData"
+      ref="currentList"
+    ></addressCurrentList>
+  </el-dialog>
+</template>
+
+<script>
+import { queryRecentContacts, addRecentContacts, addPeopleList } from '@/api/address-list-api'
+import { unique, deepClone, deleteArrayItem, Format } from './utils/util'
+import AddreddGroup from './components/address-group.vue'
+import AddressContent from './components/address-content.vue'
+import AddressAside from './components/address-aside.vue'
+import addressCurrentList from './components/address-current-list.vue'
+export default {
+  name: 'address-book-shell',
+  props: {
+    selected: {
+      type: Array,
+      default: () => [],
+    },
+    // 需要人员数据(im模块需要,其他模块目前不需要)包含人员数据和结构数据
+    needPeopleData: {
+      type: Boolean,
+      default: false,
+    },
+    // 权限控制字段(用来控制地址本是否显示岗位，部门数据)
+    typeList: {
+      type: Array,
+      default: () => [
+        { id: '', name: '全部' },
+        { id: '2', name: '部门' },
+        { id: '4', name: '岗位' },
+        { id: '8', name: '人员' },
+      ],
+    },
+
+    onlyMailList: {
+      // 只展示通讯录数据
+      type: Boolean,
+      default: false,
+    },
+    tabs: {
+      // 需要展示的tabs
+      type: Array,
+      // default: () => ['组织架构'],
+      default: () => [],
+    },
+    radio: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '地址本',
+    },
+    width: {
+      type: String,
+      default: '800px',
+    },
+    customClass: {
+      type: String,
+      default: 'address-modal',
+    },
+    selectDisabled: {
+      // 初始化是否将selected传入的人员置灰不能再选
+      type: Boolean,
+      default: false,
+    },
+    noAddRecent: {
+      // 是否需要添加最近联系人
+      // 设置为true之后不会将选中的人加入到最近联系人列表
+      type: Boolean,
+      default: false,
+    },
+    hiddenRecently: {
+      //是否隐藏最近联系人模块
+      type: Boolean,
+      default: false,
+    },
+    footButton: {
+      // ['check: 查看当前名单','collect: 收藏当前名单']
+      type: Array,
+      default: () => ['check'],
+    },
+    top: {
+      // dialog margin-top
+      type: String,
+      default: '7vh',
+    },
+    robotsList: {
+      type: Array,
+      default: () => [],
+    },
+    loginUserinfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      tabsValue: '', //  '组织架构', '群组', '我的好友'
+      nowType: '',
+      selectedList: [],
+      currentList: [],
+      recently: [], //最近联系人
+      selectDisabledlist: [],
+      collectionVisible: false,
+      collectionValue: '',
+      tabList: [],
+      currentListVisible: false,
+      footBtnsData: {
+        check: {
+          title: '查看当前名单',
+          id: '1',
+        },
+        collect: {
+          title: '收藏当前名单',
+          id: '2',
+        },
+      },
+    }
+  },
+  provide() {
+    return {
+      loginUserinfo: this.loginUserinfo,
+      interior: this.loginUserinfo.type == 1,
+    }
+  },
+  components: {
+    AddreddGroup,
+    AddressContent,
+    AddressAside,
+    addressCurrentList,
+  },
+  methods: {
+    open() {
+      // Dialog 打开的回调
+      if (this.tabs.length) {
+        this.tabList = deepClone(this.tabs)
+        // 打开地址本,定位到第一个tab
+      } else {
+        if (this.loginUserinfo.type == 1) {
+          // 内部员工
+          this.tabList = ['组织架构', '我的好友']
+        } else {
+          this.tabList = ['我的好友']
+        }
+      }
+      this.tabsValue = this.tabList[0]
+      this.selectedList = deepClone(this.selected)
+      if (this.selectDisabled && this.selectedList.length) {
+        // 开启了初始数据禁用功能,则在数据初始化时给每一项数据配置item.selectDisabled = true
+        this.selectedList.forEach((item) => {
+          item.selectDisabled = true
+        })
+      }
+      if (this.selectDisabled) {
+        this.selectDisabledlist = deepClone(this.selectedList) || []
+      }
+      if (!this.hiddenRecently) {
+        // 获取最新联系人数据
+        this.queryRecentContacts()
+      }
+      if (this.$refs.addressContent) {
+        this.recovery()
+      } else {
+        this.$nextTick(() => {
+          this.recovery()
+        })
+      }
+      this.$emit('open')
+    },
+    opened() {
+      this.$nextTick(() => {
+        if (this.$refs.addressContentMyFriend) {
+          this.$refs.addressContentMyFriend.myFriendInitData() //获取我的好友数据
+        }
+      })
+    },
+    recovery() {
+      if (this.$refs.addressContent) {
+        this.$refs.addressContent.recoverySelect() //恢复勾选状态
+      }
+      if (this.$refs.addressContentMyFriend) {
+        this.$refs.addressContentMyFriend.recoverySelect() //恢复勾选状态
+      }
+    },
+    // 添加人员
+    addSelectionItem(item) {
+      if (this.selectDisabled && this.selectDisabledlist.length) {
+        let has = false
+        has = this.selectDisabledlist.some((it) => {
+          return it.hrId == item.hrId
+        })
+        if (has) return
+      }
+      if (this.radio) {
+        this.selectedList.splice(0, 1, item)
+      } else {
+        this.selectedList.push(item)
+      }
+      this.selectedList = unique(this.selectedList, 'hrId')
+      this.$refs.addressContent.recoverySelect() //通讯录恢复勾选状态
+      // this.$refs.addressContentMyFriend.recoverySelect() //我的好友恢复勾选状态
+    },
+    // 添加多个人员
+    addSelectionList(list) {
+      list.forEach((item) => {
+        this.selectedList.push(item)
+        // this.selectedList.unshift(item)
+      })
+      this.selectedList = unique(this.selectedList, 'hrId')
+      // this.$refs.addressContent.recoverySelect(true, list) //通讯录恢复勾选状态
+      // this.$refs.addressContentMyFriend.recoverySelect(true, list) //我的好友恢复勾选状态
+    },
+    // 删除人员
+    deleteSelectionItem(item) {
+      if (this.radio) {
+        this.selectedList.splice(0, 1)
+      } else {
+        deleteArrayItem(this.selectedList, item, 'hrId')
+      }
+      this.$refs.addressContent.recoverySelect() //通讯录恢复勾选状态
+      // this.$refs.addressContentMyFriend.recoverySelect() //我的好友恢复勾选状态
+    },
+    // 删除多个人员
+    deleteSelectionList(list) {
+      list.forEach((item) => {
+        deleteArrayItem(this.selectedList, item, 'hrId')
+      })
+      // console.log(this.selectedList, 'this.selectedList')
+      // this.$refs.addressContent.recoverySelect(false, list) //通讯录恢复勾选状态
+      // this.$refs.addressContentMyFriend.recoverySelect(false, list) //我的好友恢复勾选状态
+    },
+    // 获取最近联系人
+    async queryRecentContacts() {
+      if (this.hiddenRecently) return
+      this.recently = []
+      const obj = {
+        aduser: this.loginUserinfo.loginName,
+      }
+      let { vList } = await queryRecentContacts(obj)
+      // let { vList } = await this.request({
+      //   url: '917756',
+      //   params: {
+      //     aduser: this.aduser,
+      //   },
+      // })
+      let list = unique(vList, 'fdBadge')
+      list.map((item) => {
+        item.hrId = item.fdBadge
+        item.avatar = item.fdImg
+        item.name = item.fdName
+        item.aduser = item.fdAduser
+        item.fdId = item.fdOrgId
+      })
+      if (this.onlyMailList) {
+        // 如果只展示内部员,最近联系人过滤掉合作方人员
+        list = list.filter((it) => {
+          return it.fdId
+        })
+      }
+      this.recently = list
+    },
+    // 添加最近联系人
+    async addRecentContacts(data) {
+      if (data.length) {
+        let EContractRecents = []
+        data.forEach((item) => {
+          let obj = {
+            fdOrgId: item.fdId,
+            fdOrgType: item.fdOrgType,
+            opdate: Format('yyyy-MM-dd hh:mm:ss'),
+            fdAduser: item.aduser,
+            fdName: item.name,
+            aduser: this.loginUserinfo.loginName,
+            fdBadge: item.hrId,
+            fdImg: item.avatar,
+          }
+          EContractRecents.push(obj)
+        })
+        await addRecentContacts({ EContractRecents })
+        // await this.request({
+        //   url: '917754',
+        //   params: { EContractRecents },
+        // })
+        // this.queryRecentContacts() //重新获取最近联系人
+      }
+    },
+    asideChange(data) {
+      this.$nextTick(() => {
+        this.$refs.addressContent.asideChange(data)
+      })
+    },
+    cancel() {
+      this.$emit('update:visible', false)
+    },
+    async submit() {
+      // this.$emit('submit', this.deepClone(this.selectedList))
+      let submitData = deepClone(this.selectedList)
+      let params = { data_list: [] }
+
+      // console.log('submit', submitData)
+      // if(this.nowType=="8")
+      submitData.forEach((item) => {
+        params.data_list.push({
+          type: item.fdOrgType || 8,
+          badge: item.hrId || item.depid || item.jobId || item.fdBadge,
+        })
+      })
+
+      if (this.needPeopleData) {
+        let data = await addPeopleList(params)
+        // person_data: submitData:结构数据
+        this.$emit('submitted', data?.person_data || [], submitData)
+      } else {
+        this.$emit('submitted', submitData)
+      }
+      if (!this.noAddRecent) {
+        this.addRecentContacts(submitData)
+      }
+      this.cancel()
+    },
+    refreshData() {
+      if (!this.selectedList.length) return
+      this.$refs.currentList.loading = true
+      let submitData = deepClone(this.selectedList)
+      let params = { data_list: [] }
+      // if(this.nowType=="8")
+      submitData.forEach((item) => {
+        params.data_list.push({
+          type: item.fdOrgType || 8,
+          badge: item.hrId || item.depid || item.jobId || item.fdBadge,
+        })
+      })
+      this.updateNewList(params, submitData)
+    },
+    async updateNewList(params, submitData) {
+      let data = await addPeopleList(params)
+      this.$refs.currentList.loading = false
+      // console.log('paramss555555555', params, submitData, this.selectedList)
+      this.currentList = data.person_data
+    },
+
+    collectionShow() {
+      this.collectionVisible = true
+    },
+    collectionSubmit() {},
+    collectionClose() {},
+    currentListShow() {
+      this.currentListVisible = true
+    },
+    footBtnsClick(id) {
+      switch (id) {
+        case '1':
+          this.currentListShow()
+          break
+        case '2':
+          this.collectionShow()
+          break
+      }
+    },
+    handle() {
+      // console.log('子组件')
+    },
+  },
+
+  mounted() {},
+  created() {},
+  computed: {
+    footBtns() {
+      let arr = []
+      this.footButton.forEach((item) => {
+        arr.push(this.footBtnsData[item])
+      })
+      return arr
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$border-color: rgba(0, 0, 0, 0.09);
+::v-deep .el-dialog {
+  .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.09);
+    border-radius: 8px;
+  }
+  box-sizing: border-box;
+  .el-autocomplete {
+    display: block;
+  }
+  .el-dialog__header {
+    display: flex;
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
+    height: 56px;
+    line-height: 56px;
+    .el-dialog__headerbtn {
+      right: 16px;
+    }
+  }
+  .tabs {
+    position: absolute;
+    top: 12px;
+    left: 82px;
+    height: 32px;
+    line-height: 32px;
+    .el-radio-button {
+      &.is-active {
+        .el-radio-button__inner {
+          color: #fff;
+        }
+      }
+      &:first-child {
+        .el-radio-button__inner {
+          border-radius: 2px 0 0 2px !important;
+        }
+      }
+      &:last-child {
+        .el-radio-button__inner {
+          border-radius: 0 2px 2px 0 !important;
+        }
+      }
+      .el-radio-button__inner {
+        padding: 0;
+        width: 74px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 14px;
+        box-shadow: none !important;
+        border-color: #f44336;
+        color: #f44336;
+      }
+    }
+  }
+  .address-list {
+    position: relative;
+  }
+  .recently {
+    display: flex;
+    padding: 0 16px 0;
+    border-bottom: 1px solid $border-color;
+    min-height: 110px;
+    .recently-title {
+      white-space: nowrap;
+      margin-right: 24px;
+      padding-top: 16px;
+      color: $hr-color85;
+    }
+  }
+  .content {
+    display: flex;
+    height: 49vh;
+    max-height: 508px;
+    border-bottom: 1px solid $border-color;
+    padding: 0 16px 0;
+    &.mail-list-content {
+      .content-aside {
+        box-sizing: border-box;
+        width: 262px;
+        height: 100%;
+        border-right: 1px solid $border-color;
+        padding-top: 16px;
+      }
+      .content-table {
+        box-sizing: border-box;
+        padding-top: 16px;
+        width: calc(100% - 262px);
+        height: 100%;
+        &.w100 {
+          width: 100%;
+        }
+      }
+      .w100 {
+        width: 100%;
+      }
+    }
+  }
+  .selected {
+    min-height: 93px;
+    padding: 0 24px;
+    .no-selected-data {
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      height: 93px;
+      line-height: 93px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.25);
+      user-select: none;
+    }
+  }
+  .el-dialog__footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.09);
+    margin-top: -1px;
+    .address-foot {
+      display: flex;
+      justify-content: space-between;
+      .foot-right {
+        .el-button {
+          margin-right: 0;
+          margin-left: 12px;
+        }
+        .foot-selected-num {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.65);
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+}
+</style>
+<style scoped>
+@import url('../../../src/theme/element-ui-theme/theme/index.css');
+@import url('../../../src/assets/icon-font/iconfont.css');
+</style>