Skip to content

H
horse
Commit 330b1666 authored by Mac's avatar Mac
Browse files
Options

1

parent 20c890a6
Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 0 deletions
src/pages/customerManage/editor/editlaqun.vue
View file @ 330b1666
<template>
<div class="page addPhase">
<div class="q-pa-md q-gutter-sm navbar">
<q-breadcrumbs>
<q-breadcrumbs-el label="返回" icon="navigate_before" @click="jumpBeforePage" />
<q-breadcrumbs-el label="创建分配规则" />
</q-breadcrumbs>
<q-btn color="primary" label="完成" @click="savemove" :loading="state.loading" />
</div>
<div class="container">
<div class="content-block">
<div class="bold" style="justify-content: flex-start;">选择可操作“拉群分配客户”的SDR（售前客服）<span style="color:#f67172">*</span></div>
<div class="departs flex justify-between items-center">
<q-btn outline color="primary" label="选择部门/成员" @click="choicemember" />
<div class="flex align-center depart-title">
<span>已选：{{ state.peopleNum }}人</span>
<div class="per"></div>
<span>有效账号数（已启用探马账号人数）：0人</span>
</div>
</div>
<div
class="user_lists"
v-if="state.addMsg.DeptEmpList && state.addMsg.DeptEmpList.length > 0"
>
<div v-for="(x,y) in state.addMsg.DeptEmpList" :key="y">
<q-chip
color="primary"
v-if="x.Id.slice(0, 1) == '1'"
text-color="white"
icon="work"
:label="x.DeptName"
></q-chip>
<q-chip
color="primary"
v-if="x.Id.slice(0, 1) == '2'"
text-color="white"
icon="person"
:label="x.DeptName"
></q-chip>
</div>
</div>
</div>
<div class="content-block">
<div class="bold" style="justify-content: flex-start;">选择可分配的销售
<span style="color:#f67172">*请勿在企微后台限制SDR查看销售，否则无法在企微手机端拉群</span>
<span style="color: rgb(57, 116, 255);cursor: pointer;margin-left: 5px;">查看可能导致失败的原因</span>
</div>
<div class="departs flex justify-between items-center">
<q-btn outline color="primary" label="选择部门/成员" @click="choicemember" />
<div class="flex align-center depart-title">
<span>已选：{{ state.peopleNum }}人</span>
<div class="per"></div>
<span>有效账号数（已启用探马账号人数）：0人</span>
</div>
</div>
<div
class="user_lists"
v-if="state.addMsg.DeptEmpList && state.addMsg.DeptEmpList.length > 0"
>
<div v-for="(x,y) in state.addMsg.DeptEmpList" :key="y">
<q-chip
color="primary"
v-if="x.Id.slice(0, 1) == '1'"
text-color="white"
icon="work"
:label="x.DeptName"
></q-chip>
<q-chip
color="primary"
v-if="x.Id.slice(0, 1) == '2'"
text-color="white"
icon="person"
:label="x.DeptName"
></q-chip>
</div>
</div>
</div>
<div class="content-block">
<div class="bold" style="justify-content: flex-start;">销售分配顺序</div>
<div class="q-gutter-sm">
<q-radio v-model="state.addMsg.RuleAllotWay" :val="1" label="顺序分配" />
<q-radio v-model="state.addMsg.RuleAllotWay" :val="2" label="随机分配" />
</div>
</div>
<div class="content-block">
<div class="bold" style="justify-content: flex-start;">指定销售身份</div>
<div class="q-gutter-sm">
<q-radio v-model="state.addMsg.RuleAllotWay" :val="1" label="客户负责人" />
<q-radio v-model="state.addMsg.RuleAllotWay" :val="2" label="客户协作人" />
</div>
</div>
</div>
<departmentStaff
v-model="state.showDialog"
v-model:defaultArray="state.defaultArray"
nodeKey="newId"
labelKey="DeptName"
childrenKey="ChildList"
strategy="leaf"
:treeData="state.dataTree"
@select="getdpt"
@getNum="getNum"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, } from 'vue'
import router from '@/router/index'
// import customerSetService from '@/api/customerSet'
import departmentStaff from '@/components/common/departmentStaff.vue'
import customerService from '@/api/customer'
// import { useQuasar } from 'quasar'
export default defineComponent({
components: {
departmentStaff
},
setup() {
// const $q = useQuasar()
const state: any = reactive({
addMsg: {
Id: 0,
FlowName: '',
DeptEmpList: [],
UseStage: [],
LoseCause: [],
InvalidCause: [],
RuleAllotWay:1,
},
peopleNum:0,
gettypeoneList: [],
getheight: 270,
loading: false,
UseStageName: [],
showDialog: false,
defaultArray: [],
dataTree: [],
FlowId: 0,//编辑上个页面带过来的
})
const jumpBeforePage = () => {
router.push({
path: '/customerSetup',
query: {
type: 'laqun'
}
})
}
let getEmployeeData = () => {
customerService.getEmployeeData({}).then(res => {
state.dataTree = res.data.Data
// 重组唯一id
if (state.dataTree.length == 0) return
state.dataTree.forEach(x => {
x.newId = x.DataType + '-' + x.DeptId
if (x.ChildList && x.ChildList.length > 0) {
getChildList(x.ChildList)
}
})
})
}
let getChildList = (ChildList: Array<any>) => {
ChildList.forEach(x => {
x.newId = x.DataType + '-' + x.DeptId
if (x.ChildList && x.ChildList.length > 0) {
getChildList(x.ChildList)
}
})
}
let getdpt = (val) => {
state.addMsg.DeptEmpList = val
state.showDialog = false
}
//获取已选人数
const getNum = n => {
state.peopleNum = n
}
let choicemember = () => {
state.showDialog = true
}
let savemove =()=>{
console.log('保存')
}
onMounted(() => {
getEmployeeData()
})
return {
state,
jumpBeforePage,
choicemember,
getEmployeeData,
getdpt,
savemove,
getNum
}
}
})
</script>
<style lang="scss" scoped>
.page {
min-height: 100vh;
background-color: #f4f4f6;
padding-bottom: 20px;
padding-top: 80px;
.mt20 {
margin-top: 90px;
}
}
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
font-size: 16px;
border-bottom: 1px solid #d7d7d7;
background-color: #fff;
position: fixed;
/* left: 0; */
top: 0;
right: 0;
z-index: 9;
}
.container {
margin: 0 auto;
width: 1087px;
.content-block {
padding: 30px 20px;
border-radius: 8px;
background-color: #fff;
margin-top: 20px;
.fission-title {
color: #000;
font-size: 18px;
font-weight: 600;
}
.fission-subtitle {
color: #000;
font-weight: bold;
margin-top: 15px;
margin-bottom: 15px;
font-size: 14px;
}
.departs {
.depart-title {
font-size: 14px;
.per {
height: 16px;
width: 2px;
display: inline-block;
margin: 0 15px;
background: #d7d7d7;
}
}
}
}
.btn {
display: flex;
align-items: center;
margin-top: 24px;
margin-left: 56px;
margin-bottom: 30px;
}
.bold {
font-weight: 760;
font-size: 16px;
color: #333;
border-left: 3px solid #3470ff;
margin-bottom: 20px;
margin-left: -20px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.addPhase .all-stage {
width: 300px;
padding: 20px 45px;
border: 1px solid #d7d7d7;
border-radius: 8px;
min-height: 260px;
}
.addPhase .select-item-title {
font-size: 14px;
font-weight: 800;
padding-bottom: 10px;
}
.addPhase .right-arrow {
width: 28px;
height: 28px;
background: #e7e7e7;
border-radius: 50%;
align-self: center;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 16px;
margin: 0 30px;
}
.addPhase .user_lists {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.fission-subtitle {
color: #000;
font-weight: bold;
margin-top: 15px;
margin-bottom: 15px;
font-size: 14px;
}
.departs {
.depart-title {
font-size: 14px;
.per {
height: 16px;
width: 2px;
display: inline-block;
margin: 0 15px;
background: #d7d7d7;
}
}
}
</style>
\ No newline at end of file
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