Skip to content

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

1

parent 8dda8584
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 119 deletions
src/components/common/customRight.vue
View file @ b5ee9b71
......@@ -5,8 +5,7 @@
<div class="custom_Top">
<div class="custom_HLeft">
<div class="nameplate_avatar">
<img style="width:100%;height:100%;"
:src="data.dataList.WeChatPhoto" alt="" />
<img style="width:100%;height:100%;" :src="data.dataList.WeChatPhoto" alt="" />
</div>
<div class="Name_List">
<div class="F_16">{{data.dataList.CustomerName}}</div>
......@@ -37,8 +36,8 @@
</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="请选择客户阶段" />
<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>
......@@ -55,7 +54,8 @@
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
@click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
......@@ -75,7 +75,8 @@
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
@click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
......@@ -95,7 +96,8 @@
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
@click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
......@@ -116,7 +118,8 @@
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
@click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
......@@ -138,7 +141,8 @@
<div class=""></div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
@click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
......@@ -170,7 +174,8 @@
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
@click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
......@@ -202,7 +207,8 @@
<div class="item_label">{{item.Name}}</div>
<div>
<q-btn color="white" size="sm" text-color="black" label="取消" @click="getCustomCancel(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" @click="saveCustomInfo(item)" />
<q-btn color="primary" style="margin-left:10px;" size="sm" label="确定"
@click="saveCustomInfo(item)" />
</div>
</div>
<div class="edit_content">
......@@ -220,7 +226,7 @@
</div>
<div class="customTag_component">
<div class="custom_Edit" @click="isshowlabel=true">编辑</div>
<div v-for="(tItem,tIndex) in data.dataList.LableList">
<div v-for="(tItem,tIndex) in data.dataList.LableList" :key="tIndex">
<q-chip square color="primary" text-color="white">{{tItem.Name}}</q-chip>
</div>
</div>
......@@ -249,7 +255,7 @@
</div>
</div>
<div class="detail-travel">
<div style="margin:0 22px;">
<div class="detail_first">
<q-tabs v-model="data.ckedTab" dense align="left" class="text-teal">
<q-tab name="1" label="客户旅程" />
<q-tab name="2" label="商机" />
......@@ -258,50 +264,64 @@
<q-tab name="5" label="合同" />
<q-tab name="6" label="工单" />
</q-tabs>
<div class="tripTypeContent">
<div v-for="(qItem,qIndex) in data.tripTypeArr" :key="qIndex" :class="{'ckedClass':qIndex==customTripMsg.Type}"
@click="getckedType(qItem)">{{qItem.Name}}</div>
</div>
<div class="TimeLineDiv">
<q-timeline color="primary">
<q-timeline-entry v-for="(tItem,tIndex) in data.tripDataList" :key="tIndex">
<template v-slot:title>
<div style="font-size:14px;">{{tItem.Description}}</div>
</template>
<template v-slot:subtitle>
<div class="customUpdateTime">
<div>{{tItem.UpdateTime}}</div>
<div>{{tItem.UpdateByName}}</div>
</div>
</template>
<div>
{{tItem.Remark}}
<div style="flex:1;overflow:hidden;">
<div class="detail_Main">
<div class="tripTypeContent" style="flex-shrink:0">
<div v-for="(qItem,qIndex) in data.tripTypeArr" :key="qIndex"
:class="{'ckedClass':qIndex==customTripMsg.Type}" @click="getckedType(qItem)">{{qItem.Name}}</div>
</div>
<div class="follow_Component" style="flex-shrink:0">
<fileUpload></fileUpload>
<!-- <div class="editer_input">
<q-input v-model="text" style="50px" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
</div> -->
</div>
<div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
<div class="TimeLineDiv">
<q-timeline color="primary">
<q-timeline-entry v-for="(tItem,tIndex) in data.tripDataList" :key="tIndex">
<template v-slot:title>
<div style="font-size:14px;">{{tItem.Description}}</div>
</template>
<template v-slot:subtitle>
<div class="customUpdateTime">
<div>{{tItem.UpdateTime}}</div>
<div>{{tItem.UpdateByName}}</div>
</div>
</template>
<div>
{{tItem.Remark}}
</div>
</q-timeline-entry>
</q-timeline>
</div>
</q-timeline-entry>
</q-timeline>
</div>
<div style="margin:20px 0;">
<q-pagination class="full-width justify-end" v-model="customTripMsg.pageIndex" color="primary"
:max="data.TripPageCount" input @update:model-value="changePage" />
</div>
</div>
</div>
</div>
<q-pagination class="full-width justify-end" v-model="customTripMsg.pageIndex" color="primary" :max="data.TripPageCount"
:input="true" @update:model-value ="changePage" />
</div>
</div>
<div class="dialog-out-close" @click="closeCutomer">
<q-icon name="iconfont icon-close" size="15px" />
</div>
<labelgroup
v-if="isshowlabel"
:list="LableList"
@close="isshowlabel = false"
@submit="getlabel"
></labelgroup>
<labelgroup v-if="isshowlabel" :list="LableList" @close="isshowlabel = false" @submit="getlabel"></labelgroup>
</div>
</q-dialog>
</template>
<script lang="ts">
import {ref,reactive,onMounted} from 'vue'
import {
ref,
reactive,
onMounted
} from 'vue'
import message from '@/utils/message'
import customer2 from '@/api/customer2'
import labelgroup from '@/components/customer/label-group.vue'
import fileUpload from '@/components/common/fileUpload.vue'
export default {
props: {
//样式字符串
......@@ -311,11 +331,12 @@
},
},
components: {
labelgroup
labelgroup,
fileUpload
},
setup(props, ctx) {
let isshowlabel = ref(false) //标签弹出显示
let LableList = ref<Array<any> | string>([]) //标签的数组
let LableList = ref < Array < any > | string > ([]) //标签的数组
interface msgParam {
CustomerId: number
......@@ -327,18 +348,18 @@
CustomerId: props.CustomerId
})
//客户信息保存数据
const cutomMsg = reactive <dataParam> ({
const cutomMsg = reactive < dataParam > ({
CustomerId: 0,
Type: 2,
CustomId: 0, //自定义字段Id
Value: ''
})
//客户旅程分页列表
const customTripMsg = reactive <dataParam>({
pageIndex:1,
pageSize:10,
CustomerId:0,
Type:0
const customTripMsg = reactive < dataParam > ({
pageIndex: 1,
pageSize: 10,
CustomerId: 0,
Type: 0
})
const persistent = ref(true)
const closeCutomer = () => {
......@@ -349,12 +370,12 @@
customData: [],
FiledDetailList: [],
isShowEdit: false,
multiArr:[],
ckedTab:'1',
First:1,
tripTypeArr:[],
tripDataList:[],
TripPageCount:0
multiArr: [],
ckedTab: '1',
First: 1,
tripTypeArr: [],
tripDataList: [],
TripPageCount: 0
})
//获取详情数据
const getCustomInfo = (param: msgParam) => {
......@@ -363,13 +384,13 @@
data.FiledDetailList = res.data.Data.FiledDetailList;
data.FiledDetailList.forEach(x => {
x.isShowEdit = false;
if(x.Type==4){
if (x.Type == 4) {
data.multiArr = x.Value.split(',')
data.multiArr = data.multiArr.map(item=>{
data.multiArr = data.multiArr.map(item => {
return +item;
})
}
if(x.Type==3){
if (x.Type == 3) {
x.Value = parseInt(x.Value);
}
});
......@@ -384,7 +405,7 @@
}
//点击切换编辑和查看
const getCustomEdit = (type, e) => {
data.isShowEdit=false;
data.isShowEdit = false;
data.FiledDetailList.forEach(x => {
x.isShowEdit = false;
});
......@@ -396,27 +417,27 @@
}
}
//点击单个保存自定义客户信息
const saveCustomInfo = (e) =>{
const saveCustomInfo = (e) => {
cutomMsg.CustomerId = msg.CustomerId;
cutomMsg.CustomId = e.Id;
cutomMsg.Type = 2;
if(e.Type==4){
if (e.Type == 4) {
cutomMsg.Value = data.multiArr.toString();
}else{
} else {
cutomMsg.Value = e.Value;
}
customer2.saveCustomInfo(cutomMsg).then(res => {
getCustomInfo(msg);
message.successMsg(res.data.Message);
})
})
}
const getCustomCancel = (e) =>{
const getCustomCancel = (e) => {
e.isShowEdit = !e.isShowEdit;
}
const saveCustomGate = () =>{
const saveCustomGate = () => {
cutomMsg.CustomerId = msg.CustomerId;
cutomMsg.Type = 1;
cutomMsg.CustomId=0;
cutomMsg.CustomId = 0;
customer2.saveCustomInfo(cutomMsg).then(res => {
getCustomInfo(msg);
data.isShowEdit = false;
......@@ -424,24 +445,24 @@
})
}
//获取单选值
const getSingle = (e) =>{
if(e.Value&&e.OptionsList.length>0){
const ckedObj = e.OptionsList.find((x:any)=>{
return x.Id == e.Value
})
if(ckedObj){
return ckedObj.Name
}
const getSingle = (e) => {
if (e.Value && e.OptionsList.length > 0) {
const ckedObj = e.OptionsList.find((x: any) => {
return x.Id == e.Value
})
if (ckedObj) {
return ckedObj.Name
}
}
}
//获取多选
const getMutipleCk = (e) =>{
if(e.Value&&e.OptionsList.length>0){
const getMutipleCk = (e) => {
if (e.Value && e.OptionsList.length > 0) {
const ValArr = e.Value.split(',');
let myArr: any[] = [];
for(let i=0;i<ValArr.length;i++){
for(let j=0;j<e.OptionsList.length;j++){
if(ValArr[i]==e.OptionsList[j].Id){
for (let i = 0; i < ValArr.length; i++) {
for (let j = 0; j < e.OptionsList.length; j++) {
if (ValArr[i] == e.OptionsList[j].Id) {
myArr.push(e.OptionsList[j].Name);
}
}
......@@ -453,12 +474,12 @@
isshowlabel.value = false;
console.log(list);
const labelMsg = reactive < dataParam > ({
CustomerIds:0,
LableIds:''
CustomerIds: 0,
LableIds: ''
})
labelMsg.CustomerIds = msg.CustomerId;
let ckedArr : any[] = [];
list.forEach(x=>{
let ckedArr: any[] = [];
list.forEach(x => {
ckedArr.push(x.Id);
})
labelMsg.LableIds = ckedArr.toString();
......@@ -468,28 +489,28 @@
})
}
//获取客户旅程类型
const getCustomerTripType = (param: {}) =>{
const getCustomerTripType = (param: {}) => {
customer2.getCustomerTripType(param).then(res => {
console.log(res,'trip数据');
console.log(res, 'trip数据');
data.tripTypeArr = res.data.Data;
let Obj = {
Id:0,
Name:'全部'
Id: 0,
Name: '全部'
}
data.tripTypeArr.unshift(Obj);
})
}
//点击旅客类型
const getckedType = (e) => {
console.log(e,'eee');
console.log(e, 'eee');
customTripMsg.CustomerId = msg.CustomerId;
customTripMsg.Type = e.Id;
getCustomerPage();
}
//获取客户旅程分页列表
const getCustomerPage = () =>{
customer2.getCustomerTripPage(customTripMsg).then(res=>{
console.log(res,'旅程分页数据');
const getCustomerPage = () => {
customer2.getCustomerTripPage(customTripMsg).then(res => {
console.log(res, '旅程分页数据');
data.tripDataList = res.data.Data.PageData;
data.TripPageCount = res.data.Data.PageCount;
})
......@@ -603,9 +624,11 @@
border-radius: 8px 8px 0 0;
overflow: auto;
}
.detail-info::-webkit-scrollbar{
.detail-info::-webkit-scrollbar {
display: none;
}
.detail-travel {
width: 100%;
flex-grow: 1;
......@@ -674,23 +697,27 @@
.edit_info_wrap {
padding: 0 22px 12px;
}
.info_item{
.info_item {
position: relative;
display: flex;
padding: 12px 22px;
}
.item_value{
.item_value {
flex: 1;
font-size: 14px;
word-break: break-all;
overflow: hidden;
}
.custom_Line{
.custom_Line {
width: calc(100% - 44px);
margin: 16px 22px;
border-bottom: 1px solid #d7d7d7;
}
.custom_Edit{
.custom_Edit {
display: flex;
justify-content: center;
align-items: center;
......@@ -702,57 +729,99 @@
font-size: 12px;
cursor: pointer;
}
.dialog-out-close{
.dialog-out-close {
background-color: #3470ff;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 20px;
height: 26px;
color:#fff;
color: #fff;
cursor: pointer;
position: absolute;
top: 0;
left: -20px;
text-align: center;
}
.customTag_component{
margin-bottom:20px;
.customTag_component {
margin-bottom: 20px;
display: flex;
flex-wrap:wrap;
flex-wrap: wrap;
align-items: center;
padding:12px 22px;
padding: 12px 22px;
}
.tripTypeContent{
.tripTypeContent {
display: flex;
margin-top:20px;
margin-top: 20px;
overflow-x: auto;
white-space: nowrap;
}
.ckedClass{
color:#3470ff;
.ckedClass {
color: #3470ff;
font-weight: 700;
}
.tripTypeContent div{
margin-right:20px;
.tripTypeContent div {
margin-right: 20px;
cursor: pointer;
}
.TimeLineDiv{
margin-top:20px;
.TimeLineDiv {
margin-top: 20px;
overflow: auto;
height:620px;
padding-right:20px;
// height:620px;
flex: 1;
height: 100%;
padding-right: 20px;
}
.q-timeline__title{
margin-bottom:5px;
.q-timeline__title {
margin-bottom: 5px;
}
.customUpdateTime{
.customUpdateTime {
display: flex;
justify-content: space-between;
font-size:14px;
color:#9696a6;
font-size: 14px;
color: #9696a6;
}
.q-timeline__subtitle{
.q-timeline__subtitle {
opacity: 1;
font-weight: normal;
}
.follow_Component {
padding: 0 22px;
margin-top: 10px;
width: 100%;
background-color: #f6f6f6;
border-radius: 5px;
}
.q-textarea .q-field__native {
padding-top: 0;
}
// .q-field__native {
// height: 50px;
// }
.detail_first{
margin:0 22px;
display:flex;
flex-direction:column;
height:100%;
}
.detail_Main{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding-top: 10px;
overflow: hidden;
}
</style>
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