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 @@
<template>
<div class="requestgroup">
<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 -->
<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
......
src/pages/customer/components/CustomerOperation.vue
View file @ 2d0b6e60
<template>
<div class="q-mt-md q-pa-md CustomerOperation flex">
<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 class="customer-operation-content">
<div v-if="curItem == 1" class="row">
......@@ -45,27 +46,54 @@
<div class="row">
<div class="collaborator-title">放弃后审核:</div>
<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 class="row">
<div class="collaborator-title" style="padding-top: 15px">放弃原因:</div>
<div class="col-10">
<draggable v-model="data.AbandonReasonList" tag="div" item-key="Id">
<template #item="{ element }">
<template #item="{ element,index }">
<div class="flex items-center">
<i class="iconfont icon-drag" style="font-size: 20px; color: #777"></i>
<div class="AbandonReasonItem flex items-center">{{ element }}</div>
<n-popover trigger="hover">
<template #trigger>
<q-icon name="warning" />
<i class="iconfont icon-edit_light" style="font-size: 20px; color: #111" @click="editAbandonReason(element,index)"></i>
</template>
<span>编辑</span>
</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>
</template>
</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>
......@@ -179,184 +207,209 @@
</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>
</template>
<script lang="ts">
import { ref, toRefs, reactive, defineComponent, onMounted } from 'vue'
import customerService from '@/api/customer'
// import customerService2 from '@/api/customer2'
import departmentStaff from '@/components/common/departmentStaff.vue'
import requestGroup from '@/components/customer/request-group.vue'
import draggable from 'vuedraggable'
export default defineComponent({
components: {
departmentStaff,
requestGroup,
draggable
},
setup() {
const leftList = ref([
{
Id: 1,
Name: '领取公海客户'
},
{
Id: 2,
Name: '放弃到公海'
},
{
Id: 3,
Name: '申请成为协作人'
},
{
Id: 4,
Name: '添加协作人'
},
{
Id: 5,
Name: '转移客户'
},
{
Id: 6,
Name: '删除客户跟进记录'
},
{
Id: 7,
Name: '签到拜访设置'
},
{
Id: 8,
Name: '创建企业'
},
{
Id: 9,
Name: '写跟进'
}
])
let curItem = ref(1)
let data = reactive({
data: {
IsPublicAudit: 1,
PublicGetDept: -1,
AbandonType: 1
},
showDptDialog: false,
defaultDpt: [],
DptDataTree: []
})
const changeActive = item => {
curItem.value = item.Id
}
const getConfig = () => {
customerService.getCustomerConfig({}).then(res => {
console.log('CONFIG', res.data.Data)
data.data = res.data.Data
import {
ref,
toRefs,
reactive,
defineComponent,
onMounted
} from 'vue'
import customerService from '@/api/customer'
// import customerService2 from '@/api/customer2'
import departmentStaff from '@/components/common/departmentStaff.vue'
import requestGroup from '@/components/customer/request-group.vue'
import draggable from 'vuedraggable'
export default defineComponent({
components: {
departmentStaff,
requestGroup,
draggable
},
setup() {
const leftList = ref([{
Id: 1,
Name: '领取公海客户'
},
{
Id: 2,
Name: '放弃到公海'
},
{
Id: 3,
Name: '申请成为协作人'
},
{
Id: 4,
Name: '添加协作人'
},
{
Id: 5,
Name: '转移客户'
},
{
Id: 6,
Name: '删除客户跟进记录'
},
{
Id: 7,
Name: '签到拜访设置'
},
{
Id: 8,
Name: '创建企业'
},
{
Id: 9,
Name: '写跟进'
}
])
let curItem = ref(1)
let data = reactive({
data: {
IsPublicAudit: 1,
PublicGetDept: -1,
AbandonType: 1
},
showDptDialog: false,
AbandonReasonDialog: false, //放弃原因弹窗
AbandonReasonText:"",//放弃原因
AbandonReasonIndex:0,//放弃原因index
AbandonReasonType:0,// 修改类型 0：新增,1：编辑
defaultDpt: [],
DptDataTree: []
})
}
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) => {
const changeActive = item => {
curItem.value = item.Id
}
const getConfig = () => {
customerService.getCustomerConfig({}).then(res => {
console.log('CONFIG', res.data.Data)
data.data = res.data.Data
})
}
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
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)
})
}
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>
<style lang="scss" scoped>
.CustomerOperation {
background-color: rgb(243, 246, 249);
}
.CustomerOperation {
background-color: rgb(243, 246, 249);
}
.customer-operation-category {
margin-right: 10px;
width: 200px;
flex: none;
background-color: #fff;
border-radius: 8px;
padding: 15px 0;
overflow: auto;
.customer-operation-category {
margin-right: 10px;
width: 200px;
flex: none;
background-color: #fff;
border-radius: 8px;
padding: 15px 0;
overflow: auto;
.customer-operation-category--item {
padding: 15px 25px;
cursor: pointer;
font-weight: 600;
user-select: none;
color: #333;
font-size: 14px;
.customer-operation-category--item {
padding: 15px 25px;
cursor: pointer;
font-weight: 600;
user-select: none;
color: #333;
font-size: 14px;
}
.active {
background-color: #eaf0ff;
color: #3470ff;
}
}
.customer-operation-content {
background: #fff;
flex: 1;
border-radius: 8px;
padding: 25px;
overflow: auto;
}
.active {
background-color: #eaf0ff;
color: #3470ff;
.AbandonReasonItem {
width: 453px;
height: 50px;
line-height: 50px;
padding-left: 22px;
background-color: #fff;
border-radius: 5px;
border: 1px solid #d7d7d7;
margin: 10px;
}
}
.customer-operation-content {
background: #fff;
flex: 1;
border-radius: 8px;
padding: 25px;
overflow: auto;
}
.collaborator-title {
min-width: 80px;
line-height: 40px;
text-align: right;
margin-right: 10px;
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>
src/pages/customerManage/customer.vue
View file @ 2d0b6e60
......@@ -250,7 +250,15 @@
.customer_Wechat {
color: #9999a8;
}
.n-base-selection-label{
height: 56px;
::v-deep .n-base-selection-label{
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>
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