123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- <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>
|