Skip to content

H
horse
Commit 2d0b6e60 authored by 罗超's avatar 罗超
Browse files
Options

客户操作页面

parent 3e995e0d
Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 168 deletions
src/components/customer/request-group.vue
View file @ 2d0b6e60
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
<template> <template>
<div class="requestgroup"> <div class="requestgroup">
<div :style="{ position: 'relative', 'padding-left': addMsg.length > 1 ? '40px' : '0' }"> <div :style="{ position: 'relative', 'padding-left': addMsg.length > 1 ? '40px' : '0' }">
<div class="row" v-for="(x, y) in addMsg" :key="y" style="margin-bottom: 8px"> <div class="row no-wrap" v-for="(x, y) in addMsg" :key="y" style="margin-bottom: 8px">
<!-- name --> <!-- name -->
<q-select outlined v-model="x.Id" :options="filedList" dense class="my-special-class" label="请选择客户信息" <q-select outlined v-model="x.Id" :options="filedList" dense class="my-special-class" label="请选择客户信息"
option-value="Id" option-label="Name" option-disable="disable" emit-value map-options option-value="Id" option-label="Name" option-disable="disable" emit-value map-options
......
src/pages/customer/components/CustomerOperation.vue
View file @ 2d0b6e60
<template> <template>
<div class="q-mt-md q-pa-md CustomerOperation flex"> <div class="q-mt-md q-pa-md CustomerOperation flex">
<div class="customer-operation-category"> <div class="customer-operation-category">
<div v-for="item in leftList" :key="item.Id" :class="{ active: curItem == item.Id }" class="customer-operation-category--item" @click="changeActive(item)">{{ item.Name }}</div> <div v-for="item in leftList" :key="item.Id" :class="{ active: curItem == item.Id }"
class="customer-operation-category--item" @click="changeActive(item)">{{ item.Name }}</div>
</div> </div>
<div class="customer-operation-content"> <div class="customer-operation-content">
<div v-if="curItem == 1" class="row"> <div v-if="curItem == 1" class="row">
...@@ -45,27 +46,54 @@ ...@@ -45,27 +46,54 @@
<div class="row"> <div class="row">
<div class="collaborator-title">放弃后审核:</div> <div class="collaborator-title">放弃后审核:</div>
<div class="col-10"> <div class="col-10">
<div class="flex items-center"><q-toggle v-model="data.AbandonAudit" false-value="-1" />开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。</div> <div class="flex items-center">
<q-toggle v-model="data.AbandonAudit" false-value="-1" />开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="collaborator-title" style="padding-top: 15px">放弃原因:</div> <div class="collaborator-title" style="padding-top: 15px">放弃原因:</div>
<div class="col-10"> <div class="col-10">
<draggable v-model="data.AbandonReasonList" tag="div" item-key="Id"> <draggable v-model="data.AbandonReasonList" tag="div" item-key="Id">
<template #item="{ element }"> <template #item="{ element,index }">
<div class="flex items-center"> <div class="flex items-center">
<i class="iconfont icon-drag" style="font-size: 20px; color: #777"></i> <i class="iconfont icon-drag" style="font-size: 20px; color: #777"></i>
<div class="AbandonReasonItem flex items-center">{{ element }}</div> <div class="AbandonReasonItem flex items-center">{{ element }}</div>
<n-popover trigger="hover"> <n-popover trigger="hover">
<template #trigger> <template #trigger>
<q-icon name="warning" /> <i class="iconfont icon-edit_light" style="font-size: 20px; color: #111" @click="editAbandonReason(element,index)"></i>
</template> </template>
<span>编辑</span> <span>编辑</span>
</n-popover> </n-popover>
<n-popover trigger="hover">
<template #trigger>
<i class="iconfont icon-delete_light q-ml-md" style="font-size: 20px; color: #111"></i>
</template>
<span>删除</span>
</n-popover>
</div> </div>
</template> </template>
</draggable> </draggable>
<div class="flex items-center q-pl-sm"><q-btn color="primary" label="添加" unelevated class="q-ml-lg q-mr-md" />已设/可设上限：5/10</div> <div class="flex items-center q-pl-sm">
<q-btn color="primary" label="添加" unelevated class="q-ml-lg q-mr-md" @click="AbandonReasonDialog=true" />
已设/可设上限：{{data.AbandonReasonList.length}}/10</div>
<q-dialog v-model="AbandonReasonDialog">
<q-card>
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">添加</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<q-card-section class="q-py-lg" style="width: 460px;max-width: 600px;">
<n-input maxlength="10" size="large" v-model:value="AbandonReasonText" show-count clearable placeholder="请输入放弃原因"/>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="取消" color="primary" v-close-popup />
<q-btn unelevated label="确定" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</div> </div>
</div> </div>
</div> </div>
...@@ -179,184 +207,209 @@ ...@@ -179,184 +207,209 @@
</div> </div>
</div> </div>
</div> </div>
<departmentStaff v-model="showDptDialog" :defaultArray="defaultDpt" nodeKey="newId" :showType="1" labelKey="DeptName" childrenKey="ChildList" strategy="leaf" :treeData="DptDataTree" @select="getdpt" /> <departmentStaff v-model="showDptDialog" :defaultArray="defaultDpt" nodeKey="newId" :showType="1"
labelKey="DeptName" childrenKey="ChildList" strategy="leaf" :treeData="DptDataTree" @select="getdpt" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, toRefs, reactive, defineComponent, onMounted } from 'vue' import {
import customerService from '@/api/customer' ref,
// import customerService2 from '@/api/customer2' toRefs,
import departmentStaff from '@/components/common/departmentStaff.vue' reactive,
import requestGroup from '@/components/customer/request-group.vue' defineComponent,
import draggable from 'vuedraggable' onMounted
export default defineComponent({ } from 'vue'
components: { import customerService from '@/api/customer'
departmentStaff, // import customerService2 from '@/api/customer2'
requestGroup, import departmentStaff from '@/components/common/departmentStaff.vue'
draggable import requestGroup from '@/components/customer/request-group.vue'
}, import draggable from 'vuedraggable'
setup() { export default defineComponent({
const leftList = ref([ components: {
{ departmentStaff,
Id: 1, requestGroup,
Name: '领取公海客户' draggable
}, },
{ setup() {
Id: 2, const leftList = ref([{
Name: '放弃到公海' Id: 1,
}, Name: '领取公海客户'
{ },
Id: 3, {
Name: '申请成为协作人' Id: 2,
}, Name: '放弃到公海'
{ },
Id: 4, {
Name: '添加协作人' Id: 3,
}, Name: '申请成为协作人'
{ },
Id: 5, {
Name: '转移客户' Id: 4,
}, Name: '添加协作人'
{ },
Id: 6, {
Name: '删除客户跟进记录' Id: 5,
}, Name: '转移客户'
{ },
Id: 7, {
Name: '签到拜访设置' Id: 6,
}, Name: '删除客户跟进记录'
{ },
Id: 8, {
Name: '创建企业' Id: 7,
}, Name: '签到拜访设置'
{ },
Id: 9, {
Name: '写跟进' Id: 8,
} Name: '创建企业'
]) },
let curItem = ref(1) {
let data = reactive({ Id: 9,
data: { Name: '写跟进'
IsPublicAudit: 1, }
PublicGetDept: -1, ])
AbandonType: 1 let curItem = ref(1)
}, let data = reactive({
showDptDialog: false, data: {
defaultDpt: [], IsPublicAudit: 1,
DptDataTree: [] PublicGetDept: -1,
}) AbandonType: 1
const changeActive = item => { },
curItem.value = item.Id showDptDialog: false,
} AbandonReasonDialog: false, //放弃原因弹窗
const getConfig = () => { AbandonReasonText:"",//放弃原因
customerService.getCustomerConfig({}).then(res => { AbandonReasonIndex:0,//放弃原因index
console.log('CONFIG', res.data.Data) AbandonReasonType:0,// 修改类型 0：新增,1：编辑
data.data = res.data.Data defaultDpt: [],
DptDataTree: []
}) })
} const changeActive = item => {
const getDptTree = () => { curItem.value = item.Id
customerService.getDeptTree({}).then(res => { }
console.log('DptDataTree', res.data.Data) const getConfig = () => {
data.DptDataTree = res.data.Data customerService.getCustomerConfig({}).then(res => {
// 重组唯一id console.log('CONFIG', res.data.Data)
if (data.DptDataTree.length == 0) return data.data = res.data.Data
data.DptDataTree.forEach((x: any) => { })
}
const getDptTree = () => {
customerService.getDeptTree({}).then(res => {
console.log('DptDataTree', res.data.Data)
data.DptDataTree = res.data.Data
// 重组唯一id
if (data.DptDataTree.length == 0) return
data.DptDataTree.forEach((x: any) => {
x.newId = x.DataType + '-' + x.DeptId
if (x.ChildList && x.ChildList.length > 0) {
getChildList(x.ChildList)
}
})
})
}
const getChildList = (ChildList: Array < any > ) => {
ChildList.forEach(x => {
x.newId = x.DataType + '-' + x.DeptId x.newId = x.DataType + '-' + x.DeptId
if (x.ChildList && x.ChildList.length > 0) { if (x.ChildList && x.ChildList.length > 0) {
getChildList(x.ChildList) getChildList(x.ChildList)
} }
}) })
}
const getdpt = val => {
console.log('dpt', val)
}
//领取公海客户
const checkedPublicGetDept = () => {
data.showDptDialog = true
}
const setCustomerConfig = () => {
customerService.setCustomerConfig(data.data).then(res => {
console.log('set', res.data.Data)
})
}
const editAbandonReason=(val,index)=>{
data.AbandonReasonDialog=true
data.AbandonReasonText=val,
data.AbandonReasonIndex=index
console.log(332,val,index)
}
const changeAbandonReason=()=>{
// data.data.AbandonReasonList[data.]
// console.log(332,val,index)
}
onMounted(() => {
getDptTree()
getConfig()
}) })
return {
leftList,
curItem,
changeActive,
...toRefs(data),
getdpt,
checkedPublicGetDept,
setCustomerConfig,
editAbandonReason,
changeAbandonReason
}
} }
const getChildList = (ChildList: Array<any>) => { })
ChildList.forEach(x => {
x.newId = x.DataType + '-' + x.DeptId
if (x.ChildList && x.ChildList.length > 0) {
getChildList(x.ChildList)
}
})
}
const getdpt = val => {
console.log('dpt', val)
}
//领取公海客户
const checkedPublicGetDept = () => {
data.showDptDialog = true
}
const setCustomerConfig = () => {
customerService.setCustomerConfig(data.data).then(res => {
console.log('set', res.data.Data)
})
}
onMounted(() => {
getDptTree()
getConfig()
})
return {
leftList,
curItem,
changeActive,
...toRefs(data),
getdpt,
checkedPublicGetDept,
setCustomerConfig
}
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.CustomerOperation { .CustomerOperation {
background-color: rgb(243, 246, 249); background-color: rgb(243, 246, 249);
} }
.customer-operation-category { .customer-operation-category {
margin-right: 10px; margin-right: 10px;
width: 200px; width: 200px;
flex: none; flex: none;
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 15px 0; padding: 15px 0;
overflow: auto; overflow: auto;
.customer-operation-category--item { .customer-operation-category--item {
padding: 15px 25px; padding: 15px 25px;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
}
.active {
background-color: #eaf0ff;
color: #3470ff;
}
}
.customer-operation-content {
background: #fff;
flex: 1;
border-radius: 8px;
padding: 25px;
overflow: auto;
} }
.active { .AbandonReasonItem {
background-color: #eaf0ff; width: 453px;
color: #3470ff; height: 50px;
line-height: 50px;
padding-left: 22px;
background-color: #fff;
border-radius: 5px;
border: 1px solid #d7d7d7;
margin: 10px;
} }
}
.customer-operation-content { .collaborator-title {
background: #fff; min-width: 80px;
flex: 1; line-height: 40px;
border-radius: 8px; text-align: right;
padding: 25px; margin-right: 10px;
overflow: auto; font-weight: 600;
} white-space: nowrap;
}
.AbandonReasonItem {
width: 453px;
height: 50px;
line-height: 50px;
padding-left: 22px;
background-color: #fff;
border-radius: 5px;
border: 1px solid #d7d7d7;
margin: 10px;
}
.collaborator-title {
min-width: 80px;
line-height: 40px;
text-align: right;
margin-right: 10px;
font-weight: 600;
white-space: nowrap;
}
</style> </style>
src/pages/customerManage/customer.vue
View file @ 2d0b6e60
...@@ -250,7 +250,15 @@ ...@@ -250,7 +250,15 @@
.customer_Wechat { .customer_Wechat {
color: #9999a8; color: #9999a8;
} }
.n-base-selection-label{ ::v-deep .n-base-selection-label{
height: 56px; height: 54px;
background-color: rgba(0, 0, 0, 0.05);
border: none !important;
}
::v-deep .n-base-selection-input{
height: 54px;
display: flex;
align-items: center;
border: none !important;
} }
</style> </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