暂存联系人画像

src/HDrpManagement/contactProfile/index.vue

@@ -0,0 +1,347 @@
+<template>
+  <div>
+    <basicLayout
+        ref="list"
+        tableName="contactTable"
+        idName="sa_accountclassid"
+        :apiId="{query:20240603162604}"
+        :options="options"
+        :isExport="false"
+        @listCreate="listCreate"
+    >
+      <div slot="custom" style="display:flex">
+        <div class="mt-10">
+          <label  class="search__label" >部门:</label>
+          <el-cascader
+              class="inline-24"
+              ref="selectdep"
+              size="small"
+              v-model="dep"
+              :options="selectList.dep"
+              :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"
+              @change="depChange"
+              clearable
+          ></el-cascader>
+        </div>
+
+        <div class="mt-10">
+          <label  class="search__label" >业务员:</label>
+          <el-select class="inline-16" filterable v-model="people" size="small" placeholder="请选择业务员"  @change="peopleChange">
+            <el-option
+                v-for="item in selectList.hr"
+                :key="item.userid"
+                :label="item.name"
+                :value="item.userid"
+            ></el-option>
+          </el-select>
+        </div>
+        <div class="inline-16">
+          <p class="search__label">状态:</p>
+          <el-select v-model="isleave" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="leaveChange" :disabled="dep == ''">
+            <el-option label="在职" value="1"></el-option>
+            <el-option label="离职" value="2"></el-option>
+          </el-select>
+        </div>
+        <div class="inline-16 mt-10">
+          <span style="font-size: 14px;color: #606266;" class="inline-16" >标签</span>
+          <el-select  v-model="tags" placeholder="请选择标签" size="small" @change="selectTag" clearable @clear="selectTag" filterable class="inline-16" multiple>
+            <el-option
+                v-for="item in tagList"
+                :key="item.index"
+                :label="item.tag"
+                :value="item.tag"
+                :disabled="hasDisabledTag(item)">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="mt-10" style="margin-right:10px">
+          <label  class="search__label" >范围:</label>
+          <el-date-picker
+              size="small"
+              @change="timeChange"
+              value-format="yyyy-MM-dd"
+              v-model="dateSelect"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              clearable>
+          </el-date-picker>
+        </div>
+      </div>
+      <template v-slot:tbList="scope">
+        <div v-if="scope.data.column.columnname === 'tag'">
+          <el-tag v-for="(item,index) in scope.data.column.data.tag"  :type="item==='支持者'?'warning':item==='反对者'?'danger':''" size="mini" style="margin-right:10px" :key="index">{{ item }}</el-tag>
+        </div>
+        <div v-else-if="scope.data.column.columnname === 'islinkcustomer'">
+          {{ scope.data.column.data[[scope.data.column.columnname]] == '1' ? '是': '否' }}
+        </div>
+        <div v-else-if="scope.data.column.columnname === 'islinkproject'">
+          {{ scope.data.column.data[[scope.data.column.columnname]] == '1' ? '是': '否' }}
+        </div>
+        <div v-else>
+          {{scope.data.column.data[[scope.data.column.columnname]] || scope.data.column.columnname === 'operation'?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
+        </div>
+      </template>
+      <template v-slot:tbOpreation="scope">
+        <el-button type="text" size="small" @click="goDetail(scope.data.data)">详 情</el-button>
+      </template>
+    </basicLayout>
+    <Detail ref="Detail" v-if="Object.keys(detail).length" :data="detail"></Detail>
+  </div>
+</template>
+
+<script>
+import Detail from './modules/detail'
+export default {
+  name: "index",
+  components:{Detail},
+  data(){
+    return {
+      options:[],
+      list:[],
+      detail:{},
+      total:0,
+      editableTabs:[
+        {
+          templetname:'我负责的',
+          templetid:1
+        },
+        {
+          templetname:'我参与的',
+          templetid:2
+        },
+        {
+          templetname:'我下属负责的',
+          templetid:3
+        },
+        {
+          templetname:'我下属参与的',
+          templetid:4
+        },
+        {
+          templetname:'我创建的',
+          templetid:5
+        }
+      ],
+      param:{
+        "id":20221012164402,
+        "content":{
+          "pageNumber": 1,
+          "pageSize": 20,
+          "type":'',
+          "deleted": 0,
+          "isExport": false,
+          "isend": 0,
+          where:{
+            a:''
+          }
+        }
+      },
+      dep:'',
+      people:'',
+      selectList:[],
+      dateSelect:[],
+      isleave:'',
+      tagList:[],
+      tags:[]
+    }
+  },
+  computed: {
+    grade () {
+      return (n) => {
+        let result
+        switch (n) {
+          case 0:
+            result = '无'
+            break;
+          case 1:
+            result = '等级一'
+            break;
+          case 2:
+            result = '等级二'
+            break;
+          case 3:
+            result = '等级三'
+            break;
+          case 4:
+            result = '等级四'
+            break;
+          case 5:
+            result = '等级一五'
+            break;
+        }
+        return result
+      }
+    }
+  },
+  methods:{
+    createMenu (array) {
+      var that = this
+      let arr = []
+      function convertToElementTree(node) {
+        // 新节点
+        if (node.subdep.length === 0){
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+          }
+        }else {
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            children: []
+          }
+        }
+        if (node.subdep && node.subdep.length > 0) {
+          // 如果存在子节点
+          for (var index = 0; index < node.subdep.length; index++) {
+            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
+            elNode.children.push(convertToElementTree(node.subdep[index]));
+          }
+        }
+        return elNode;
+      }
+      array.forEach((element) => {
+        arr.push(convertToElementTree(element))
+      });
+      return arr
+    },
+    listCreate (param) {
+      console.log(param);
+      param.content.type = ''
+      param.content.dataid = ''
+    },
+    goDetail (data) {
+      console.log(data,'data')
+      this.detail= {}
+      this.$router.push({
+        path:'contactProfile',
+        query: {
+          id:data.sys_phonebookid
+        }
+      })
+      setTimeout(() => {
+        this.detail = data
+        this.$nextTick(() => {
+          this.$refs.Detail.dialogFormVisible=true
+        })
+      })
+    },
+    async getDepAndpeople () {
+      let res = await this.$api.requested({
+        "id": 20230620102004,
+        "content": {
+        }
+      })
+      this.selectList = res.data
+      this.selectList.dep = this.createMenu(res.data.dep)
+      console.log(this.selectList,'范围选择数据');
+    },
+    timeChange (data) {
+      if (data) {
+        this.$refs.list.param.content.where.begdate = this.dateSelect[0]
+        this.$refs.list.param.content.where.enddate = this.dateSelect[1]
+      } else {
+        this.$refs.list.param.content.where.begdate = ''
+        this.$refs.list.param.content.where.enddate = ''
+      }
+
+      this.$refs.list.listData()
+    },
+    leaveChange() {
+      this.$refs.list.param.content.where.isleave = this.isleave
+      this.$refs.list.listData()
+    },
+    depChange(val){
+      this.people = ''
+      this.$refs.list.param.content.type = 1
+      this.$refs.list.param.content.dataid = val[val.length - 1]
+      this.$refs.list.listData()
+    },
+    peopleChange(){
+      this.dep = ''
+      this.isleave = ''
+      this.$refs.list.param.content.type = 0
+      this.$refs.list.param.content.dataid = this.people
+      this.$refs.list.listData()
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.param.content.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.param.content.pageNumber = val
+      this.listData()
+    },
+    async getTagList () {
+      let res = await this.$api.requested({
+        "id": 20220929085401,
+        "content": {
+          "ownertable":"sys_phonebook",
+          "ownerid":102
+        }
+      })
+      this.tagList = res.data.option
+    },
+    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
+    },
+    selectTag(){
+      this.$refs.list.param.content.where.tag = this.tags
+      this.$refs.list.listData()
+    }
+  },
+  created () {
+    this.getDepAndpeople()
+    this.people = JSON.parse(sessionStorage.getItem('active_account')).name
+  },
+  mounted () {
+    this.getTagList()
+    setTimeout(() => {
+      if (this.$route.query.isTrue == '1') {
+        this.detail = {1:1}
+        this.$nextTick(() => {
+          this.$refs.Detail.dialogFormVisible=true
+        })
+      }
+    },1000)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/HDrpManagement/contactProfile/modules/detail.vue

@@ -0,0 +1,331 @@
+<template>
+  <el-drawer append-to-body :visible.sync="dialogFormVisible" size="97%">
+    <div class="Mcontainer">
+      <div style="background:#ffffff;padding:10px" v-if="Object.keys(detailInfo).length">
+        <div class="Mcontainer-header">
+          <div class="Mcontainer-header__left">
+            <div style="width:60px;height: 60px;background:#F3F9FC;border-radius:10px;padding:10px">
+              <img src="@/assets/saler.svg" style="width:100%;height:100%" alt="">
+            </div>
+            <div class="account">
+              <p class="normal-title" style="font-size:18px">
+                <el-tooltip class="item" effect="dark" :content="detailInfo.projectname" placement="top">
+                  <span>{{ detailInfo.name }}</span>
+                 </el-tooltip>
+              </p>
+              <div class="Mtag">
+                <el-tag size="small" v-for="(item,index) in detailInfo.tag" :key="index" style="margin-right:10px">{{ item }}</el-tag>
+              </div>
+            </div>
+          </div>
+          <div class="Mcontainer-header__right">
+            <el-descriptions class="margin-top">
+              <el-descriptions-item label="联系方式">{{ detailInfo.phonenumber }}</el-descriptions-item>
+              <el-descriptions-item label="微信">{{ detailInfo.wechatnum }}</el-descriptions-item>
+              <el-descriptions-item label="偏好">{{ detailInfo.preference }}</el-descriptions-item>
+              <el-descriptions-item label="分级"> {{ detailInfo.grade }}</el-descriptions-item>
+              <el-descriptions-item label="邮箱">{{ detailInfo.email }}</el-descriptions-item>
+              <el-descriptions-item label="爱好">{{ detailInfo.hobby }}</el-descriptions-item>
+              <el-descriptions-item label="性别"> {{ detailInfo.sex }}</el-descriptions-item>
+              <el-descriptions-item label="传真">{{ detailInfo.fax }}</el-descriptions-item>
+              <el-descriptions-item label="备注"> {{ detailInfo.remarks }}</el-descriptions-item>
+              <el-descriptions-item label="生日"> {{ detailInfo.birthday }}</el-descriptions-item>
+              <el-descriptions-item label="单位">{{ detailInfo.company }}</el-descriptions-item>
+              <el-descriptions-item label="负责人">{{ detailInfo.leadername }}</el-descriptions-item>
+              <el-descriptions-item label="家庭住址"> {{ detailInfo.homeaddress }}</el-descriptions-item>
+              <el-descriptions-item label="部门"> {{ detailInfo.depname }}</el-descriptions-item>
+              <el-descriptions-item label="未跟进天数">{{ detailInfo.subdate ? detailInfo.subdate  + '天' : detailInfo.subdate}}
+                <el-tooltip class="item" effect="dark" content="未跟进天数=当前查询时间-最近跟进时间-节假日" placement="top">
+                  <i class="el-icon-warning-outline"></i>
+                </el-tooltip>
+              </el-descriptions-item>
+              <el-descriptions-item label="群组">{{ detailInfo.groupname }}</el-descriptions-item>
+              <el-descriptions-item label="职位"> {{ detailInfo.position }}</el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
+      </div>
+      <div style="padding: 0 10px;">
+        <!--   跟进记录     -->
+        <div class="Mproject" style="margin-top:10px">
+          <el-card class="box-card">
+            <div slot="header">
+              <span class="myTitle">跟进记录</span>
+              <myRadio :value1="followParam.content" :value2="followParam.content.where" key1="dateType" @clickBtn="refreshTable('followParam','followRef')"  :btnOptions="[{label:'全部',value:0},{label:'本年',value:1},{label:'本季',value:2},{label:'本月',value:3}]">
+              </myRadio>
+            </div>
+            <myCard
+                :list="
+              [
+                {title:'跟进次数',value:$refs.followRef && $refs.followRef.total,bg:'#F3F9FC',color:'#3874F6'},
+                {title:'最近跟进人',value:$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].createby || '--',bg:'#E8F7EC',color:'#78B32B'},
+                {title:'最近跟进时间',value:$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].createdate || '--',bg:'#F9F2E5',color:'#FF7603'},
+                {title:'跟进频率',value:$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].followfrequency,descript:'定义：平均跟进天数；若有跟进次数，则按照：跟进频率=（首次跟进时间到当前时间的天数-节假日）÷跟进次数；',bg:'#FDF3F3',color:'#E85B5B'},
+              ]"
+            >
+            </myCard>
+            <p style="font-size:14px;font-weight:bold;margin-bottom:10px" v-if="$refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].followDetail.length">跟进人及次数</p>
+            <div style="display:flex">
+              <myTag
+                  style="margin-right:10px"
+                  v-for="(item,index) in $refs.followRef && $refs.followRef.list[0] && $refs.followRef.list[0].followDetail"
+                  :key="index + 'b'"
+                  :data="{title:item.name,descript:'跟进次数',value:item.qty}"
+              >
+              </myTag>
+            </div>
+            <showIsNone title="项目跟进记录明细">
+              <pageTable
+                  ref="followRef"
+                  :tablecols="tool.tabelCol($route.name).followTable.tablecols"
+                  :param="followParam"
+                  :custom="true"
+              >
+                <template v-slot:custom="scope">
+                  <div v-if="scope.data.columnname === 'followname'">
+                  </div>
+                  <div v-else style="text-wrap:wrap;word-wrap: break-word;white-space: normal;">
+                    {{ scope.data.data[scope.data.columnname] || '--' }}
+                  </div>
+                </template>
+              </pageTable>
+            </showIsNone>
+          </el-card>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import myRadio from '@/HDrpManagement/customerPortrait/modules/myRadio'
+import myCard from '@/HDrpManagement/customerPortrait/modules/myCrad'
+import pageTable from '@/HDrpManagement/customerPortrait/modules/pageTable'
+import showIsNone from '@/HDrpManagement/customerPortrait/modules/showIsNone'
+/*import myNewCard from './myNewCrad'*/
+import myTag from '@/HDrpManagement/customerPortrait/modules/myTag'
+export default {
+  name: "detail",
+  props:['data'],
+  components:{myRadio,myCard,pageTable,showIsNone,myTag},
+  data(){
+    return {
+      dialogFormVisible:false,
+      detailInfo:{},
+      followParam:{
+        "id": 20240605110904,
+        "content": {
+          "sys_phonebookid":'',
+          "dateType":"0",
+          "where":{
+            "begdate":"",
+            "enddate":""
+          }
+        }
+      },
+      follow:[]
+    }
+  },
+  methods:{
+    /*详情页信息*/
+    async getDetailInfo(){
+      const res = await this.$api.requested({
+        "id": 20240605102804,
+        "content": {
+          "sys_phonebookid":this.$route.query.id
+        }
+      })
+      this.detailInfo = res.data[0]
+      console.log(this.detailInfo,'detailInfo')
+    },
+    /*跟进记录*/
+    async followData(){
+      this.followParam.content.sys_phonebookid = this.$route.query.id
+      const res = await this.$api.requested(this.followParam)
+      console.log(res,'跟进记录')
+    },
+    refreshTable(param,el){
+      console.log(param,'param')
+      console.log(this[param],'111')
+      this[param].content.pageNumber = 1
+      this.$refs[el] && this.$refs[el].listData()
+    }
+  },
+  mounted() {
+    this.getDetailInfo()
+    this.followData()
+  }
+}
+</script>
+
+<style scoped>
+*{
+  box-sizing: border-box;
+}
+.my-label {
+  background: rgba(235, 245, 253, 1);
+}
+.nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 100;
+}
+
+/deep/.el-drawer {
+  background:#F5F5F5 !important;
+}
+/deep/.el-drawer__header{
+  display: none !important;
+}
+
+/deep/.el-descriptions-item__cell {
+  padding: 8px 8px 0px 8px !important;
+}
+
+
+/deep/.el-card__header,/deep/.el-card__body {
+  padding: 10px !important;
+}
+.Mcontainer .Mcontainer-header {
+  display: flex;
+  align-items: center;
+}
+.Mcontainer .Mcontainer-header .Mcontainer-header__left {
+  display: flex;
+  max-width: 350px;
+  min-width: 350px;
+  align-items: center;
+  padding-right: 20px;
+}
+.Mcontainer .Mcontainer-header .Mcontainer-header__right {
+  flex: 100;
+  border-left: 1px solid #cccccc;
+  padding-left: 20px;
+}
+.Mcontainer .Mcontainer-header .Mcontainer-header__left .account{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: 10px;
+  overflow: hidden;
+  flex:100;
+}
+.Mcontainer .Mcontainer-header .Mcontainer-header__left .account .Mtag{
+  margin-top: 5px;
+}
+
+.Mcontainer .Mfollow{
+  margin-top: 10px;
+}
+
+.Mcontainer .peopleInfo {
+  margin-top: 10px;
+  padding-bottom: 10px;
+}
+.peopleInfo-content {
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  overflow-y: scroll;
+}
+.peopleInfo-content::-webkit-scrollbar {
+  display: none;
+}
+.peopleInfo-content .leader {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.peopleInfo-content .leader .title {
+  font-size: 14px;
+}
+.peopleInfo-content .leader .content {
+  display: flex;
+  flex-wrap: wrap;
+}
+.peopleInfo-content .leader .content .item {
+  display: flex;
+  align-items: center;
+  margin: 0 20px 10px 0;
+}
+.peopleInfo-content .leader .content .avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 50px;
+  background: #3874F6;
+  margin-right:10px;
+  color: #ffffff;
+}
+.peopleInfo-content .leader .content .Info {
+  display: flex;
+  flex-direction: column;
+}
+.peopleInfo-content .leader .content .Info div {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #cccccc;
+}
+
+
+.peopleInfo-content .people {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.peopleInfo-content .people .title {
+  font-size: 14px;
+}
+.peopleInfo-content .people .content {
+  display: flex;
+  flex-wrap:wrap;
+}
+.peopleInfo-content .people .content .item {
+  display: flex;
+  align-items: center;
+  margin: 0 20px 10px 0;
+}
+.peopleInfo-content .people .content .avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 50px;
+  background: #3874F6;
+  margin-right: 10px;
+  color: #ffffff;
+}
+.peopleInfo-content .people .content .Info {
+  display: flex;
+  flex-direction: column;
+}
+.peopleInfo-content .people .content .Info div {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #cccccc;
+}
+
+.peopleInfo-content .people {}
+
+.descript {
+  font-size: 12px;
+  color: #cccccc;
+  margin-right: 20px;
+  white-space:nowrap;
+}
+.title {
+  font-size: 14px;
+  color: #000000;
+  margin-right: 10px;
+  white-space:nowrap;
+}
+.myTitle {
+  margin-right:24px;
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

src/HDrpManagement/customerPortrait/modules/pageTable.vue

@@ -64,7 +64,7 @@ export default {
       this.list = res.data
       this.list2 = res.data.length && res.data[0].isEmpty ? [] : res.data
       this.total = res.data.length && res.data[0].isEmpty ? 0 : res.total
-      console.log(this.list)
+      console.log(this.list,'list111')
     },
     handleSizeChange(val) {
       // console.log(`每页 ${val} 条`);

src/router/HDrpManagement.js

@@ -1059,6 +1059,16 @@ const HDrpManagement = [
     },
     component: () => import(/* webpackChunkName: "about" */ '@/HDrpManagement/salerPortrait/index')
   },
+  {
+    path: '/contactProfile',
+    name: 'contactProfile',
+    meta: {
+      title: '联系人画像',
+      ast_nav: true,
+      keeproute: true,
+    },
+    component: () => import(/* webpackChunkName: "about" */ '@/HDrpManagement/contactProfile/index')
+  },
   {
     path: '/predictionRule',
     name: 'predictionRule',