Skip to content

H
horse
Commit cffd8b77 authored by zhengke's avatar zhengke
Browse files
Options

1

parent c5222b54
Hide whitespace changes
Inline Side-by-side
Showing with 598 additions and 8 deletions
src/api/customer2.ts
View file @ cffd8b77
...@@ -65,6 +65,30 @@ class CustomerService { ...@@ -65,6 +65,30 @@ class CustomerService {
data data
}) })
} }
//获取员工详情数据
static async getCustomInfo(data: any): Promise<HttpResponse> {
return Axios('/QYCustomer/GetCustomerInfo', {
method: 'post',
responseType: 'json',
data
})
}
//获取客户阶段下拉数据
static async getCustomStageList(data: any): Promise<HttpResponse> {
return Axios('/QYCustomer/GetCustomerStageList', {
method: 'post',
responseType: 'json',
data
})
}
//保存客户资料
static async saveCustomInfo(data: any): Promise<HttpResponse> {
return Axios('/QYCustomer/SetCustomerInfo', {
method: 'post',
responseType: 'json',
data
})
}
} }
export {CutomerParams} export {CutomerParams}
......
src/components/common/customRight.vue 0 → 100644
View file @ cffd8b77
<template>
<q-dialog v-model="persistent" full-height maximized position="right" persistent @hide="closeShenheForm"
transition-show="slide-left">
<div class="customMain">
<div class="custom_Top">
<div class="custom_HLeft">
<div class="nameplate_avatar">
<img style="width:100%;height:100%;"
:src="data.dataList.WeChatPhoto" alt="" />
</div>
<div class="Name_List">
<div class="F_16">{{data.dataList.CustomerName}}</div>
<div class="wechat_Name">{{data.dataList.WeChatName}}</div>
</div>
</div>
<div class="custom_HRight">
<q-btn color="primary" label="创建待办" />
</div>
</div>
<div class="custom_Bottom">
<div class="detail-info">
<div class="info_title">客户画像</div>
<div class="info_content" style="margin-bottom:0;">
<div class="customer_info_component">
<div class="customer_info_Stage" v-if="!data.isShowEdit" @click="getCustomEdit(1,data.isShowEdit)">
<div class="stage_label">客户阶段</div>
<div class="stage_value">{{data.dataList.StageName}}</div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">客户阶段</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消"
@click="getCustomEdit(1,data.isShowEdit)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomGate" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-select filled option-value="Id" size="sm" v-model="cutomMsg.Value" option-label="Name" :options="data.customData"
emit-value map-options label="请选择客户阶段" />
</div>
</div>
</div>
</div>
<div class="customer_info_component" v-for="(item,index) in data.FiledDetailList">
<!-- 1单行文本 2多行文本 3单选 4多选 5日期 6日期时间 7数值 -->
<template v-if="item.Type==1">
<div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
<div class="stage_label">{{item.Name}}</div>
<div class="stage_value">{{item.Value}}</div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-input filled v-model="item.value" placeholder="请输入要修改的值"></q-input>
</div>
</div>
</div>
</template>
<template v-if="item.Type==2">
<div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
<div class="stage_label">{{item.Name}}</div>
<div class="stage_value">{{item.Value}}</div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-input filled v-model="item.value" maxlength="50" placeholder="请输入要修改的值"></q-input>
</div>
</div>
</div>
</template>
<template v-if="item.Type==3">
<div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
<div class="stage_label">{{item.Name}}</div>
<div class="stage_value"></div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-select filled option-value="Id" size="sm" v-model="item.value" option-label="Name"
:options="item.OptionsList" emit-value map-options label="请选择" />
</div>
</div>
</div>
</template>
<template v-if="item.Type==4">
<div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
<div class="stage_label">{{item.Name}}</div>
<div class="stage_value"></div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-select filled multiple use-chips option-value="Id" size="sm" v-model="item.CkValue"
option-label="Name" :options="item.OptionsList" emit-value map-options label="请选择" />
</div>
</div>
</div>
</template>
<template v-if="item.Type==5">
<div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
<div class="stage_label">{{item.Name}}</div>
<div class="stage_value"></div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-input filled v-model="item.Value" mask="date" :rules="['date']">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
<q-date v-model="item.Value">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>
</div>
</template>
<template v-if="item.Type==6">
<div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
<div class="stage_label">{{item.Name}}</div>
<div class="stage_value"></div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-input filled v-model="item.Value" mask="date" :rules="['date']">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" cover transition-show="scale" transition-hide="scale">
<q-date v-model="item.Value">
<div class="row items-center justify-end">
<q-btn v-close-popup label="Close" color="primary" flat />
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</div>
</div>
</template>
<template v-if="item.Type==7">
<div class="customer_info_Stage" v-if="!item.isShowEdit" @click="getCustomEdit(2,item)">
<div class="stage_label">{{item.Name}}</div>
<div class="stage_value">{{item.Value}}</div>
</div>
<div class="customer_info_edit" v-else>
<div class="edit_bar">
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomEdit(2,item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
<div class="edit_info_wrap">
<q-input filled v-model="item.value" maxlength="20" placeholder="数值"></q-input>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="custom_Line"></div>
<div class="info_item">
<div class="item_label">客户标签</div>
</div>
<div class="info_item" style="margin-bottom:20px;">
<div class="custom_Edit">编辑</div>
</div>
<div class="info_title">客户跟进</div>
<div class="info_content">
<div class="info_item">
<div class="item_label">上次跟进</div>
<div class="item_value">{{data.dataList.LastFollowUpTime}}</div>
</div>
<div class="info_item">
<div class="item_label">创建时间</div>
<div class="item_value">{{data.dataList.CreateTime}}</div>
</div>
<div class="info_item">
<div class="item_label">添加好友</div>
<div class="item_value">{{data.dataList.FriendTime}}</div>
</div>
<div class="info_item">
<div class="item_label">负责人</div>
<div class="item_value">{{data.dataList.EmpName}}</div>
</div>
<div class="info_item">
<div class="item_label">客户ID</div>
<div class="item_value">{{data.dataList.ExternalUserId}}</div>
</div>
</div>
</div>
<div class="detail-travel">
</div>
</div>
</div>
<!-- <div class="dialog-out-close" @click="closeProcess"
style="position:absolute;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;top:0;left:-30px;">
<q-icon name="iconfont icon-target-full" size="26px" />
</div> -->
</q-dialog>
</template>
<script lang="ts">
import {ref,reactive,onMounted} from 'vue'
import message from '@/utils/message'
import customer2 from '@/api/customer2'
export default {
props: {
//样式字符串
CustomerId: {
type: Number,
default: ''
},
},
setup(props, ctx) {
interface msgParam {
CustomerId: number
}
interface dataParam {
[key: string]: any
}
const msg = reactive < msgParam > ({
CustomerId: props.CustomerId
})
//客户信息保存数据
const cutomMsg = reactive <dataParam> ({
CustomerId: 0,
Type: 2,
CustomId: 0, //自定义字段Id
Value: ''
})
const persistent = ref(true)
const closeCutomer = () => {
ctx.emit('close');
}
const data = reactive < dataParam > ({
dataList: {},
customData: [],
FiledDetailList: [],
isShowEdit: false,
})
//获取详情数据
const getCustomInfo = (param: msgParam) => {
customer2.getCustomInfo(param).then(res => {
data.dataList = res.data.Data;
data.FiledDetailList = res.data.Data.FiledDetailList;
data.FiledDetailList.forEach(x => {
x.isShowEdit = false;
if(x.Type==4){
x.CkValue=x.Value.split(',');
x.CkValue = x.CkValue.map(item=>{
return +item;
})
}
});
cutomMsg.Value = data.dataList.StageId;
})
}
//获取客户阶段下拉
const getCustomStage = (param: {}) => {
customer2.getCustomStageList(param).then(res => {
console.log(res, '下拉数据');
data.customData = res.data.Data;
})
}
//点击切换编辑和查看
const getCustomEdit = (type, e) => {
data.FiledDetailList.forEach(x => {
x.isShowEdit = false;
});
if (type == 1) {
data.isShowEdit = !e;
}
if (type == 2) {
e.isShowEdit = !e.isShowEdit;
console.log(e);
}
}
//点击单个保存自定义客户信息
const saveCustomInfo = (e) =>{
if(e.Type==4){
e.CkValue=e.CkValue.toString();
}
cutomMsg.CustomerId = msg.CustomerId;
cutomMsg.CustomId = e.Id;
cutomMsg.Type = 2;
cutomMsg.Value = e.CkValue;
customer2.saveCustomInfo(cutomMsg).then(res => {
getCustomInfo(msg);
message.successMsg(res.data.Message);
})
}
const saveCustomGate = () =>{
cutomMsg.CustomerId = msg.CustomerId;
cutomMsg.Type = 1;
cutomMsg.CustomId=0;
customer2.saveCustomInfo(cutomMsg).then(res => {
getCustomInfo(msg);
message.successMsg(res.data.Message);
})
}
onMounted(() => {
getCustomInfo(msg);
getCustomStage({});
})
return {
persistent,
closeCutomer,
data,
cutomMsg,
getCustomEdit,
saveCustomInfo,
saveCustomGate
}
}
}
</script>
<style lang="scss">
.custom_RModel {
width: 500px;
height: 100%;
}
.customMain {
width: 1000px !important;
display: flex;
flex-direction: column;
height: 100 vh;
padding: 15px 17px 0 17px;
background-color: #f4f4f6;
overflow: hidden;
}
.custom_Top {
width: 100%;
padding: 22px;
background: #fff;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.custom_HLeft {
display: flex;
}
.nameplate_avatar {
width: 60px;
height: 60px;
flex-shrink: 0;
margin-right: 14px;
border-radius: 5px;
overflow: hidden;
}
.F_16 {
font-size: 16px;
}
.Name_List {
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: hidden;
}
.wechat_Name {
color: #9999a8;
display: flex;
font-size: 14px;
}
.custom_Bottom {
margin-top: 17px;
flex: 1;
display: flex;
margin-top: 17px;
overflow: hidden;
}
.detail-info {
flex-shrink: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 350px;
height: 100%;
padding: 28px 0;
margin-right: 13px;
background: #fff;
border-radius: 8px 8px 0 0;
overflow: auto;
}
.detail-info::-webkit-scrollbar{
display: none;
}
.detail-travel {
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
padding-top: 28px;
background: #fff;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
.info_title {
padding: 0 22px;
margin-bottom: 20px;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
font-family: Microsoft YaHei, Avenir, Helvetica, Arial, sans-serif !important
}
.info_content {
margin-bottom: 30px;
}
.customer_info_Stage {
width: 100%;
padding: 0 7px;
cursor: pointer;
display: flex;
align-content: center;
width: 100%;
padding: 12px 22px;
justify-content: space-between;
}
.stage_label {
color: #606266;
flex-shrink: 0;
margin-right: 10px;
}
.stage_value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.customer_info_component {
width: 100%;
}
.edit_bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 22px;
}
.item_label {
color: #606266;
flex-shrink: 0;
width: 120px;
font-size: 14px;
}
.edit_info_wrap {
padding: 0 22px 12px;
}
.info_item{
position: relative;
display: flex;
padding: 12px 22px;
}
.item_value{
flex: 1;
font-size: 14px;
word-break: break-all;
overflow: hidden;
}
.custom_Line{
width: calc(100% - 44px);
margin: 16px 22px;
border-bottom: 1px solid #d7d7d7;
}
.custom_Edit{
display: flex;
justify-content: center;
align-items: center;
width: 78px;
height: 26px;
margin-right: 3px;
border: 1px dashed #858598;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
</style>
src/pages/customerManage/customer.vue
View file @ cffd8b77
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
<img :src="props.row.WeChatPhoto" style="width:100%;height:100%" /> <img :src="props.row.WeChatPhoto" style="width:100%;height:100%" />
</div> </div>
<div> <div>
<div class="cutomer_Free">{{ props.row.CustomerName }}</div> <div class="cutomer_Free" @click="getCustomInfo(props)">{{ props.row.CustomerName }}</div>
<div class="customer_Wechat">{{ props.row.WeChatName }}</div> <div class="customer_Wechat">{{ props.row.WeChatName }}</div>
</div> </div>
</div> </div>
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
</template> </template>
<template v-slot:body-cell-LableList="props"> <template v-slot:body-cell-LableList="props">
<q-td auto-width :props="props"> <q-td auto-width :props="props">
<q-chip v-for="(item,index) in props.row.LableList">{{item}}</q-chip> <q-chip v-for="(item,index) in props.row.LableList" :key="index">{{item}}</q-chip>
</q-td> </q-td>
</template> </template>
<template v-slot:bottom> <template v-slot:bottom>
...@@ -211,6 +211,7 @@ ...@@ -211,6 +211,7 @@
/> />
</template> </template>
</q-table> </q-table>
<customRight v-if="isShowCustom" :CustomerId="CustomerId" @close="closeCustomer"></customRight>
</div> </div>
</q-page> </q-page>
</div> </div>
...@@ -219,9 +220,11 @@ ...@@ -219,9 +220,11 @@
import { ref, defineComponent, onMounted } from 'vue' import { ref, defineComponent, onMounted } from 'vue'
import CustomerModule from '@/module/customer/customerModule' import CustomerModule from '@/module/customer/customerModule'
import selectTree from '@/components/common/selectTree.vue' import selectTree from '@/components/common/selectTree.vue'
import customRight from '@/components/common/customRight.vue'
export default defineComponent({ export default defineComponent({
components: { components: {
selectTree selectTree,
customRight
}, },
setup() { setup() {
let { let {
...@@ -245,8 +248,17 @@ export default defineComponent({ ...@@ -245,8 +248,17 @@ export default defineComponent({
getChild, getChild,
getCkedFriend getCkedFriend
} = CustomerModule() } = CustomerModule()
let ticked = ref([]) let isShowCustom = ref(false)
let expanded = ref([]) const closeCustomer =()=>{
isShowCustom.value=false;
}
let CustomerId= ref(0);
const getCustomInfo =(item)=>{
CustomerId.value = item.row.Id;
isShowCustom.value=true;
}
onMounted(() => { onMounted(() => {
getCustomerList(msg) getCustomerList(msg)
getWayList({}) getWayList({})
...@@ -270,10 +282,12 @@ export default defineComponent({ ...@@ -270,10 +282,12 @@ export default defineComponent({
friendObj, friendObj,
friendOptions, friendOptions,
getEmployeeData, getEmployeeData,
ticked,
expanded,
getChild, getChild,
getCkedFriend getCkedFriend,
isShowCustom,
closeCustomer,
CustomerId,
getCustomInfo
} }
} }
}) })
...@@ -300,6 +314,7 @@ export default defineComponent({ ...@@ -300,6 +314,7 @@ export default defineComponent({
.cutomer_Free { .cutomer_Free {
color: #3470ff; color: #3470ff;
font-size: 14px; font-size: 14px;
cursor: pointer;
} }
.customer_Wechat { .customer_Wechat {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment