yos_web/src/HManagement/addressList/mycontact/index.vue

<template>
  <div>
    <div class="flex-align-stretch">
      <group ref="grouplist" @setGroupData="setGroupData" @clickGroup="clickGroup">
        <add-contact :tagList="tagList" v-if="tool.checkAuth($route.name,'addContact')" slot="addContact" :group="group" @onAddSuccess="onAddSuccess"></add-contact>
        <add-group v-if="tool.checkAuth($route.name,'addGroup')" slot="addGroup" @onSuccess="onAddSuccess"></add-group>
        <template v-slot:edit="scope">
          <editGroup v-if="tool.checkAuth($route.name,'editGroup')" :data="scope.data" @onSuccess="onAddSuccess"></editGroup>
        </template>
        <template v-slot:del="scope">
          <delGroup v-if="tool.checkAuth($route.name,'deleteGroup')" :data="scope.data" @onSuccess="onAddSuccess"></delGroup>
        </template>
      </group>  
      <contacts style="flex:1 0 auto" :data="activeGroupData" @clickContacts="clickContacts" @filtetContacts="filtetContacts"></contacts>
      <detail :activeContactsData="activeContactsData">
        <template v-slot:edit="data">
          <edit :tagList="tagList" v-if="tool.checkAuth($route.name,'update') && data.data.groupname != '客户联系人' && data.data.groupname != '项目联系人'" :data="data" :group="group" @onEditSuccess="onEditSuccess"></edit>
        </template>
        <template v-slot:del="data">
          <ondel v-if="tool.checkAuth($route.name,'delete') && data.data.groupname != '客户联系人' && data.data.groupname != '项目联系人'" :data="data" @onDelSuccess="onDelSuccess"></ondel>
        </template>
      </detail>
    </div>
  </div>
</template>

<script>
import addContact from './modules/addContact.vue'
import addGroup from './modules/addGroup.vue'
import group from './modules/group.vue'
import contacts from './modules/contacts.vue'
import detail from './modules/detail.vue'
import edit from './modules/edit.vue'

import  editGroup from './modules/editGroup.vue'
import  delGroup from './modules/delGroup.vue'

import ondel from './modules/del.vue'

export default {
  components:{
    addContact,
    addGroup,
    group,
    contacts,
    detail,
    ondel,
    edit,
    editGroup,
    delGroup
  },
  data () {
    return {
      group:[],
      activeGroupData:[],
      activeContactsData:null,
      tagList:[],
      allData:[]
    }
  },
  methods:{
    onAddSuccess () {
      this.$refs['grouplist'].listData(()=>{
        let arr = []
        arr = [...this.$refs['grouplist'].sysGroup,...this.$refs['grouplist'].myGroup]
        this.allData = arr
        console.log(this.allData,'所有数据');
        
        this.activeGroupData = arr.filter(e=>{return e.rowindex === this.activeGroupData.rowindex})[0]
        this.activeContactsData = this.activeGroupData.phonebook.filter(e=>{return e.rowindex === this.activeContactsData.rowindex})[0]
      })
    },
    onEditSuccess (form) {
      this.$refs['grouplist'].listData()
      this.activeContactsData = Object.assign({},this.activeContactsData,form)
      this.activeGroupData.phonebook = this.activeGroupData.phonebook.map(e=>{
        if (e.rowindex === form.rowindex) {
          e = Object.assign({},e,form)
        }
        return e
      })
    }, 
    setGroupData (val) {
      this.group = val
      console.log(this.group,'group')
    },
    clickGroup (val,allData) {
      this.activeGroupData = val
      this.activeContactsData = null
      this.allData = allData
    },
    clickContacts (val) {
      this.activeContactsData = val
    },
    onDelSuccess (id) {
      this.activeGroupData.phonebook = this.activeGroupData.phonebook.filter(e=>{
        return e.sys_phonebookid !== id
      })
      this.activeContactsData = null
      // this.$refs['grouplist'].listData()
    },
    filtetContacts (type,val) {
      this.activeGroupData = []
      let allData = []
      this.allData.map(item => item.phonebook).forEach(item2 => {
        allData.push(...item2)
      })
      if (type === 'name') {
        this.activeGroupData.phonebook = allData.filter(e=>{
          return e.name === val
        })
      } else if (type === 'phonenumber') {
        this.activeGroupData.phonebook = allData.filter(e=>{
          return e.phonenumber === val
        })
      } else {
        this.onAddSuccess()
      }
      
    },
    async getTagList () {
      let res = await this.$api.requested({
        "id": 20220929085401,
        "content": {
            "ownertable":"sys_phonebook",
            "ownerid":102
        }
      })
      this.tagList = res.data.option
    }
  },
  mounted () {
    this.getTagList()
  }
}

</script>
<style>
</style>