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

<template>
  <div>
    <normalBook
        ref="basicLayout"
        tableName="phoneBookTable"
        idName="sys_phonebookid"
        :apiId="{query:20231220085804,del:''}"
        :autoQuery="false"
        @onSuccess="selectChange"
    >
      <template #titleLight>
        <addContact :tagList="tagList" v-if="tool.checkAuth($route.name,'addContact')" slot="addContact" :group="group" @onAddSuccess="selectChange"></addContact>
      </template>
      <template #custom>
        <div class="mt-10" v-if="usertype === 0">
          <label  class="search__label" >范围:</label>
          <el-select class="inline-24" v-model="tabName" placeholder="请选择数据分类" @change="selectChange" size="small" >
            <el-option
                v-for="item in editableTabsAdmin"
                :key="item.index"
                :label="item.templetname"
                :value="item.templetid"
            ></el-option>
          </el-select>
        </div>
        <div class="mt-10" v-else>
          <label  class="search__label" >范围:</label>
          <el-select class="inline-24" v-model="tabName" placeholder="请选择数据分类" @change="selectChange" size="small" >
            <el-option
                v-for="item in editableTabs"
                :key="item.index"
                :label="item.templetname"
                :value="item.templetid"
            ></el-option>
          </el-select>
        </div>
        <div class="inline-16">
          <label class="search__label">关联:</label>
          <el-select  v-model="contactstype" placeholder="请选择标签" size="small" @change="selectChange" clearable @clear="selectChange" class="inline-16">
            <el-option label="关联客户" value="关联客户"></el-option>
            <el-option label="关联项目" value="关联项目"></el-option>
          </el-select>
        </div>
        <div class="inline-16 mt-10">
          <span class="search__label">标签:</span>
          <el-select  v-model="tags" placeholder="请选择标签" size="small" @change="selectChange" clearable @clear="clearSearch" filterable class="inline-16" multiple @focus="getTagList">
            <el-option
                v-for="item in tagList"
                :key="item.index"
                :label="item.tag"
                :value="item.tag"
                :disabled="hasDisabledTag(item)">
            </el-option>
          </el-select>
        </div>
      </template>
      <template #custom-right>
        <div class="inline-16 mt-10">
          <el-button type="primary" size="small" @click="onReset" >重置</el-button>
        </div>
      </template>
      <template #tableLeft style="padding: 0">
        <div style="margin: 0;padding: 0;min-width: 320px;max-width: 320px;">
          <myGroup ref="groupRef" @clickGroup="clickGroup" @groupList="groupList" :typeTab="tabName" @delGroup="onReset"></myGroup>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'tag1'">
          <div v-if="scope.data.column.data.tag1">
            <div v-if="scope.data.column.data.tag1.length > 0">
              <el-tag v-for="tag in scope.data.column.data.tag1" :key="tag.index" :type="tag==='支持者'?'warning':tag==='反对者'?'danger':''" size="mini" style="margin:0 5px 0 0">
                {{tag}}
              </el-tag>
            </div>
            <div v-else>--</div>
          </div>
          <div v-else>--</div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'islinkcustomer'">
          <div>{{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]] === 0?'否':'是':'否'}}</div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'islinkproject'">
          <div>{{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]] === 0?'否':'是':'否'}}</div>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
<!--        <drawerDetail :data="scope.data.data" :groupname="scope.data.data.groupname" detailPath="/phonebookDetail" idName="sys_phonebookid"></drawerDetail>-->
        <el-button size="mini" @click="onGoto(scope.data.data)" type="text">详 情</el-button>
      </template>
    </normalBook>
  </div>
</template>

<script>
import normalBook from "@/components/normal-basic-layout-new/normalBook";
import myGroup from '../mycontact/index';
import addContact from '../mycontact/modules/addContact'
export default {
  name: "index",
  components:{normalBook,myGroup,addContact},
  data(){
    return {
      tabIndex:"1",
      editableTabsValue:"我负责的",
      usertype:JSON.parse(sessionStorage.getItem('active_account')).usertype,
      editableTabs:[
        {
          templetname:'我负责的',
          templetid:1
        },
        {
          templetname:'我参与的',
          templetid:2
        },
        {
          templetname:'我下属负责的',
          templetid:3
        },
        {
          templetname:'我下属参与的',
          templetid:4
        },
        {
          templetname:'我创建的',
          templetid:5
        }
      ],
      editableTabsAdmin:[
        {
          templetname:'我负责的',
          templetid:1
        },
        {
          templetname:'我参与的',
          templetid:2
        },
        {
          templetname:'我下属负责的',
          templetid:3
        },
        {
          templetname:'我下属参与的',
          templetid:4
        },
        {
          templetname:'我创建的',
          templetid:5
        },
        {
          templetname:'站点全部',
          templetid:99
        }
      ],
      tagList:[],
      tags:[],
      group:[],
      tabName:1,
      param:{
        "id": 20231220085804,
        "content": {
          "type":1,
          "groupname":"",
          "sys_phonebookgroupid":0,
          "pageNumber": 1,
          "pageSize": 40,
          "where": {
            "condition": "",
            "tag":[]
          }
        }
      },
      groupname:'',
      contactstype:''
    }
  },
  methods:{
    async listData(id){
      this.$refs.basicLayout.param.content.type = this.tabName
      this.$nextTick(()=>{
        this.$refs.basicLayout.listData()
      })
    },
    /*任务页面跳转*/
    onGoto(row){
      console.log(row,'row')
      this.$store.dispatch('changeDetailDrawer',true)
      this.$router.push({
        path:'/phonebookDetail',
        query:{
          id:row.sys_phonebookid,
          groupname:row.groupname,
          tabName:this.tabName
        }
      })
    },
    async getTagList () {
      let res = await this.$api.requested({
        "id": 20220929085401,
        "content": {
          "ownertable":"sys_phonebook",
          "ownerid":102
        }
      })
      this.tagList = res.data.option
      console.log(this.tagList,'tagList标签')
    },
    selectChange(){
      console.log(this.tabName)
      this.$refs.basicLayout.param.content.type = this.tabName
      this.$refs.basicLayout.param.content.where.tag = this.tags
      this.$refs.basicLayout.param.content.where.contactstype = this.contactstype
      this.$refs.basicLayout.listData()
      this.$refs.groupRef.param.content.type = this.tabName
      this.$refs.groupRef.listData()
    },
    onReset(){
      this.tags = []
      this.tabName = 1
      this.$refs.basicLayout.param.content.type = 1
      this.param.content.where.tag = []
      this.$refs.basicLayout.param.content.where.condition = ''
      this.$refs.basicLayout.param.content.groupname = ''
      this.$refs.basicLayout.param.content.sys_phonebookgroupid = ''
      this.$refs.groupRef.param.content.type = 1
      this.$refs.groupRef.param.content.where.groupname = ''
      this.$refs.groupRef.$refs.grouplist.active = 0
      /*this.$refs.groupRef.listData()*/
      this.selectChange()
    },
    clearSearch(){
      this.$refs.basicLayout.listData()
    },
    clickGroup(val,type){
      this.$refs.basicLayout.param.content.groupname = val.groupname
      this.$refs.basicLayout.param.content.sys_phonebookgroupid = val.sys_phonebookgroupid
      this.listData()
    },
    /*onAddSuccess () {
      this.listData()
      this.$refs.groupRef.listData()
    },*/
    hasDisabledTag (item) {
      let arr = []
      let arr2 = []
      arr = this.tagList.filter(item=>{
        return this.tags.includes(item.tag)
      })
      arr.forEach(e=>{
        arr2 = arr2.concat(e.mutextag)
      })
      arr2 = this.tags.length === 0?[]:arr2
      let _isSame = arr2.some(tag=>item.tag === tag)
      return _isSame
    },
    /*async querytemplet () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.querytemplet.querytemplet",
        "method":"query",
        "content": {}
      })
      this.editableTabs = res.data
      for (let i=0;i<res.data.length;i++){
        if (res.data[i].templetname == '站点全部'){
          this.tabName = res.data[i].templetid
          break
        }else {
          this.tabName = res.data[0].templetid
        }
      }
      this.listData(this.tabName)
    }*/
    groupList(res){
      let k = 0
      for (var i=0;i<res.length;i++){
        if (res[i].groupname !== '项目联系人' && res[i].groupname !== '客户联系人' ){
          this.group[k] = res[i]
          k++
        }
      }
      console.log(this.group,'groupList')
    },
    onDelSuccess(){
      console.log('抽屉关闭')
      /*this.onReset()*/
    }
  },
  mounted() {
    /*this.querytemplet()*/
    this.listData(1)
  }
}
</script>

<style scoped>

</style>