playlet/project/src/components/detials/customerProf...

<template>
<!--  v-loading="loading"-->
  <div >
    <div class="bigTitle">
      <i class="el-icon-user-solid"></i>
      <span>添加客服信息</span>
    </div>
    <div class="tableBox_detial">
      <el-skeleton :loading="loading" animated>
        <template slot="template">
          <el-skeleton-item animated style="height: 100px"/>
        </template>
        <template>
          <el-table
            :data="tableData"
            :header-cell-class-name="headerClassName"
            border
            style="width: 100%">
            <el-table-column
              label="所属员工"
              class-name="self-column">
              <template slot-scope="scope">
                <div class="flex-align-center">
                  <img :src="scope.row.avatar" alt="" width="40px">
                  <span class="lMar8">{{scope.row.user_name}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              class-name="self-column"
              label="其他客户来源">
              <template slot-scope="scope">
                {{scope.row.add_way}}
              </template>
            </el-table-column>
            <el-table-column
              class-name="self-column"
              label="添加时间">
              <template slot-scope="scope">
                {{scope.row.createtime}}
              </template>
            </el-table-column>
            <el-table-column
              class-name="self-column"
              label="最近沟通">
              <template slot-scope="scope">
                {{scope.row.remark}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-skeleton>
    </div>

    <div class="bigTitle tMar30">
      <i class="el-icon-user-solid"></i>
      <span>基本信息</span>
<!--      <span style="color: #898D92;font-weight: 400;margin-left: 6px">所属员工可在「侧边栏-客户画像」中进行编辑</span>-->
    </div>
    <el-skeleton :loading="loading" animated>
      <template slot="template">
        <el-skeleton-item animated style="height: 140px"/>
      </template>
      <template>
        <div class="tableBox_detial flexWrap" style="border: 1px solid #D2D2D2">
          <div v-for="(b,bidx) in basicInfo" :key="bidx" class="basic_item"
               :style="[{borderBottom:(b.name == '企业' || b.name == '微博') ? 'none' : '' },{borderRight:bidx%2!==0 ? 'none' : ''}]">
            <div class="name">{{b.name}}</div>
            <div class="value">
              <template v-if="b.key == 'e_birthday'">
                <el-date-picker class="ipt"
                                v-focus
                                v-if="b.itpShow"
                                @blur="iptBlur(bidx)"
                                v-model="b.value"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :placeholder="'请输入'+b.name">
                </el-date-picker>
                <span @click="b.itpShow = true" class="text" v-else>{{b.value?b.value:'-'}}</span>
              </template>
              <template v-else-if="b.key == 'sex'">
                <span>{{b.value == 1 ? '男' : (b.value == 2 ? '女' : '未知')}}</span>
              </template>
              <template v-else>
                <el-input class="ipt" v-focus v-model="b.value" :placeholder="'请输入'+b.name" v-if="b.itpShow" @blur="iptBlur(bidx)"></el-input>
                <span @click="b.itpShow = true" class="text" v-else>{{b.value?b.value:'-'}}</span>
              </template>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>

  </div>
</template>

<script>
export default {
  name: "customerProfile",
  props:['rowProp'],
  data(){
    return{
      loading:false,
      basicInfo:[
        { //性别的位置不要换,换的话在initProfile里调整获取的索引
          name:'性别',
          key:'sex',
          value:'',
          itpShow:false
        },
        {
          name:'地址',
          key:'e_address',
          value:'',
          itpShow:false
        },
        {
          name:'年龄',
          key:'e_age',
          value:'',
          itpShow:false
        },
        {
          name:'生日',
          key:'e_birthday',
          value:'',
          itpShow:false
        },
        {
          name:'描述',
          key:'e_desc',
          value:'',
          itpShow:false
        },
        {
          name:'邮箱',
          key:'e_email',
          value:'',
          itpShow:false
        },
        {
          name:'电话',
          key:'e_phone',
          value:'',
          itpShow:false
        },
        {
          name:'职位',
          key:'e_position',
          value:'',
          itpShow:false
        },
        {
          name:'QQ',
          key:'e_qq',
          value:'',
          itpShow:false
        },
        {
          name:'来源',
          key:'e_source',
          value:'',
          itpShow:false
        },
        {
          name:'企业',
          key:'e_company',
          value:'',
          itpShow:false
        },
        {
          name:'微博',
          key:'e_weibo',
          value:'',
          itpShow:false
        }
      ],
      resInfo:{},
      tableData: [],
    }
  },
  directives:{
    focus:{
      inserted : function (el){
        el.querySelector('input').focus()
      }
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.customerDetail,{
        params:{
          customer_id:this.rowProp.customer_id,
          user_id:this.rowProp.user_id
        }
      }).then((res)=>{
        this.loading = false
        res=res.data
        this.resInfo = res.rst
        this.tableData = []
        this.tableData.push({
          add_way:res.rst.follow_list.add_way,
          createtime:res.rst.follow_list.createtime,
          remark:res.rst.follow_list.remark,
          avatar:res.rst.follow_list.avatar,
          user_name:res.rst.follow_list.user_name
        })
        this.basicInfo[0].value = res.rst.gender
        this.basicInfo.forEach(item=>{
          item.value = res.rst[item.key]
        })
      }).catch(err=>{
        this.loading = false
      })
    },
    editProfile(){
      let data={
        customer_id:this.rowProp.customer_id,
      }
      this.basicInfo.forEach(item=>{
        data[item.key] = item.value
      })
      this.$axios.post(this.URL.BASEURL + this.URL.customerInfoUpdate,data).then((res)=>{
        res=res.data
        this.$message({
          message: res.err,
          type: "info"
        })
      })
    },
    headerClassName(){
      return 'headerClass'
    },
    iptBlur(index){
      this.basicInfo[index].itpShow = false
      this.editProfile()
    }
  }
}
</script>
<style lang="scss">
.tableBox_detial{
  .headerClass{
    background: #FBFBFB !important;
    font-weight: 400;
    color: #666;
  }
  .basic_item{
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    line-height: 44px;
    border-bottom: 1px solid #D2D2D2;
    border-right: 1px solid #D2D2D2;
    .value{
      padding: 0 20px;
      width: 100%;
      .ipt{
        width: 80%;
        .el-input__inner{
          height: 30px;
          line-height: 30px;
        }
      }
      .text{
        width: 80%;
        height: 30px;
        line-height: 30px;
        display:inline-block;
      }
      .text:hover{
        border-bottom: 1px solid #333;
        cursor: text;
      }
    }
    .name{
      color: #666;
      background: #FBFBFB;
      width: 30%;
      padding-left: 20px;
      border-right: 1px solid #D2D2D2;
    }
  }
}
</style>

<style lang="scss" scoped>
.bigTitle{
  color: #333;
  font-size: 14px;
  margin-left: 5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.tableBox_detial{
  font-size: 14px;
  margin-top: 10px;

  .self-column{
    text-align: center;
  }
}
</style>