<!-- 負責區域 -->
<template>
<section>
<section class="content-body mt20">
<div class="body-header">
<h4 class="title-header">轉讓區域
</h4>
</div>
<transition name="fade">
<div class="mt20">
<div class="add20" >
<div v-if="progress!=3&&progress!=6">
<el-button v-if="role=='roleOne'" :disabled="!multipleList.length" class="eboss-color" size="small" @click="transferAreaList">批量轉移發起</el-button>
<el-button v-if="role=='roleTwo'" :disabled="!multipleList.length" class="eboss-color" size="small" @click="confirmAreaList">批量轉移確認</el-button>
</div>
<div v-if="!show" style="padding-bottom:20px;" class="mt20">
*此處爲轉讓(FROM)的渠道商<span style=" color:#29c1c2;">轉讓前</span>代理區域
</div>
<div v-else style="padding-bottom:20px;" class="mt20">
*此處爲需轉讓(FROM)的渠道商代理區域
</div>
<el-table :data="tableList" size="medium" border style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
<el-table-column
type="selection"
:selectable="selectInit"
width="55">
</el-table-column>
<el-table-column prop="actualProvinceDesc" label="省份" fixed>
</el-table-column>
<el-table-column prop="actualCityDesc" label="城市"></el-table-column>
<el-table-column prop="actualCountyDesc" label="區縣"></el-table-column>
<el-table-column label="關聯日期">
<template slot-scope="scope">
<span >{{scope.row.relationDate}}</span>
</template>
</el-table-column>
<el-table-column prop="transferStatusDesc" label="轉移狀態"></el-table-column>
<el-table-column v-if="role!=='roleTwins'&&progress!=3&&progress!=6" prop="statusDesc" label="操作">
<template slot-scope="scope">
<span v-if="scope.row.transferStatus==1&&role=='roleOne'" @click="transferArea(scope.row)" class="billNo">轉移編輯</span>
<span v-if="scope.row.transferStatus==2&&role=='roleOne'" @click="cancelArea(scope.row)" class="billNo">取消轉移</span>
<span v-if="scope.row.transferStatus==3&&role=='roleTwo'" @click="confirmArea(scope.row)" class="billNo">確認</span>
</template>
</el-table-column>
</el-table>
<!-- 看看時不顯示 -->
</div>
</div>
</transition>
</section>
<section class="content-body mt20">
<div class="body-header">
<h4 class="title-header">轉讓關聯組織
</h4>
</div>
<transition name="fade">
<div class="mt20">
<div class="add20">
<div class="eboss-row">
<div class="eboss-col col-flex">
<label for="" class="label-list">組織級別：</label>
<div class="form-control">
<el-select v-model="areaLevel" size="small" placeholder="請選擇" style="width:100%;" clearable>
<el-option
v-for="item in areaLevelList"
:key="item.value"
:label="item.text"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="eboss-col col-flex">
<label for="" class="label-list">組織狀態：</label>
<div class="form-control">
<el-select v-model="status" size="small" placeholder="請選擇" clearable style="width:100%;">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.text"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="eboss-col col-flex">
<label for="" class="label-list">PMS組織：</label>
<div class="form-control">
<el-autocomplete
class="inline-input"
size="small"
v-model.trim="name"
@clear="clears"
clearable
:fetch-suggestions="handleWarehouseChange"
placeholder="請輸入六級組織ID/名稱搜索"
:trigger-on-focus="false"
@select="handleWarehouseSelect"
>
<template slot-scope="{ item }">
<div >組織名稱：{{ item.name }}</div>
<div >組織ID：{{ item.departmentId }}</div>
</template>
</el-autocomplete>
</div>
</div>
</div>
<div class="mt20" style="text-align:center;">
<el-button class="eboss-color eboss-cols" size="small" @click="reset">重置</el-button>
<el-button class="eboss-color" size="small" @click="search">查詢</el-button>
</div>
<div class="mt20" v-if="progress!=3&&progress!=6">
<el-button v-if="role=='roleOne'" :disabled="!multipleData.length" class="eboss-color" size="small" @click="transferAreaList('organization')">批量轉移發起</el-button>
<el-button v-if="role=='roleTwo'" :disabled="!multipleData.length" class="eboss-color" size="small" @click="confirmAreaList('organization')">批量轉移確認</el-button>
</div>
<div v-if="role=='roleTwins'" style="padding-bottom:20px;" class="mt20">
*此處爲轉讓(FROM)的渠道商<span style=" color:#29c1c2;">轉讓前</span>組織節點
</div>
<div v-else style="padding-bottom:20px;" class="mt20">
*此處爲需轉讓(FROM)的渠道商組織節點
</div>
<el-table ref="multata" :data="tableData" size="medium" border style="width: 100%" v-loading="loadings" @selection-change="handleSelectionChangeData">
<el-table-column
type="selection"
:selectable="selectInit"
width="55">
</el-table-column>
<el-table-column prop="departmentId" label="區域ID" fixed>
</el-table-column>
<el-table-column prop="name" label="組織名稱"></el-table-column>
<el-table-column prop="areaLevelDesc" label="組織級別"></el-table-column>
<el-table-column label="組織狀態">
<template slot-scope="scope">
<span >{{scope.row.statusDesc}}</span>
</template>
</el-table-column>
<el-table-column prop="transferStatusDesc" label="轉移狀態"></el-table-column>
<el-table-column v-if="role!=='roleTwins'&&progress!=3&&progress!=6" label="操作">
<template slot-scope="scope">
<span v-if="scope.row.transferStatus==1&&role=='roleOne'" @click="transferArea(scope.row,'organization')" class="billNo">轉移編輯</span>
<span v-if="scope.row.transferStatus==2&&role=='roleOne'" @click="cancelArea(scope.row,'organization')" class="billNo">取消轉移</span>
<span v-if="scope.row.transferStatus==3&&role=='roleTwo'" @click="confirmArea(scope.row,'organization')" class="billNo">確認</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</transition>
</section>
<section class="content-body mt20">
<transition name="fade">
<div class="mt20 add20" style="text-align:center;">
<!-- 看看時不顯示 -->
<el-button v-if="role!=='roleTwins'" :disabled="progress==3||progress==6" class="eboss-color" size="small" @click="onsubmit">本步完成，確認無誤</el-button>
<el-button v-if="role=='roleOne'&&progress!=3" class="eboss-color eboss-co" size="small" @click="onsave">保存草稿</el-button>
<el-button class="eboss-color eboss-cols " size="small" @click="advance">查看上一步</el-button>
<el-button class="eboss-color eboss-cols" size="small" @click="next">查看下一步</el-button>
<el-button class="eboss-color eboss-cols" size="small" @click="shutDown">關閉</el-button>
<!-- <slot name="btn-list"></slot> -->
</div>
</transition>
</section>
</section>
</template>
<script>
export default {
props: {
role: {
type: String,// 角色類型
required: true
},
transferNo:{
type: [String,Number],// 轉讓單號
required: true
},
active:{
type: [String,Number],// 轉讓單號
required: true
}
},
data() {
return {
showTO:false,
loading:false,
tableList:[],
tableData:[],
show:true,
multipleList:[],
multipleData:[],
name:'',
departmentId:'',
areaLevel:'',
areaLevelList:[],
status:'',
statusList:[],
loadings:false,
saveAreaIds:[],//轉移區域id
cancelAreaIds:[],//取消轉移id
saveDepartmentIds:[],//轉移組織id
cancelDepartmentIds:[],//取消組織id
progress:'',
objList:[],
}
},
beforeRouteUpdate (to, from, next) {
// 在當前路由改變，但是該組件被複用時調用
// 可以訪問組件實例 `this`
let param = {
path : window.location.origin+from.fullPath,
data : this.$data
}
this.$store.dispatch('setCache',param);
next()
},
beforeRouteLeave (to, from, next) {
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
let param = {
path : window.location.origin+from.fullPath,
data : this.$data
}
this.$store.dispatch('setCache',param);
next()
},
watch:{
active: {
handler: function(n,o){
if(n!==''){
this.progress=n
}
},
immediate: true
},
// objList:{//深層處理無用
// handler: function(n,o){
// console.log(n,'ceshi00000000000')
// if(n.length){
// this.multipleData=JSON.parse(JSON.stringify(n))
// // this.multipleData=n
// }
// },
// immediate: true,
// deep: true
// },
},
computed:{
objListTo(){
return
}
},
mounted(){
this.$store.dispatch('getCache').then(res=>{
if(res.success){
Object.assign(this.$data , res.model);
}else{
this.init();
}
})
},
methods: {
init(){
this.getlevelList()
this.getAngent()
this.search()
},
//根據轉讓單號獲取from渠道商代理區域列表
getAngent(){
this.axiosGet(``)
.then(res => {
if (res.success) {
this.tableList=res.model
if(this.tableList.length){
if(this.saveAreaIds.length){//轉移編輯記錄
this.tableList.map(item=>{
for(let val of this.saveAreaIds){
if(item.areaId==val){
this.$set(item,'transferStatus',2)
this.$set(item,'transferStatusDesc','已保存')
}
}
})
}
if(this.cancelAreaIds.length){//取消編輯記錄
this.tableList.map(item=>{
for(let val of this.cancelAreaIds){
if(item.areaId==val){
this.$set(item,'transferStatus',1)
this.$set(item,'transferStatusDesc','不處理')
}
}
})
}
}
} else {
this.$alert(res.errorMessage, '提示')
}
})
},
//獲取from渠道商關聯組織列表
getSelect(params){
this.axiosPost(``,params)
.then(res => {
if (res.success) {
this.tableData=res.model
if(this.tableData.length){
if(this.saveDepartmentIds.length){//轉移編輯記錄
this.tableData.map(item=>{
for(let val of this.saveDepartmentIds){
if(item.departmentId==val){
this.$set(item,'transferStatus',2)
this.$set(item,'transferStatusDesc','已保存')
}
}
})
}
if(this.cancelDepartmentIds.length){//取消編輯記錄
this.tableData.map(item=>{
for(let val of this.cancelDepartmentIds){
if(item.departmentId==val){
this.$set(item,'transferStatus',1)
this.$set(item,'transferStatusDesc','不處理')
}
}
})
}
}
// this.$nextTick(()=>{
// this.tableData.map(val=>{
// if(this.objList.indexOf(val.departmentId)){
// this.$refs.multata.toggleRowSelection(val)
// }
// })
// }
// )
} else {
this.$alert(res.errorMessage, '提示')
}
})
},
//確認提交，
onsubmit(){
this.$confirm('提交後當前步驟的信息不可再編輯，僅能查看，是否確認完成？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
}).then(() => {
this.axiosPost(``,{transferNo:this.transferNo,node:'area',progress:this.progress})
.then(res => {
if (res.success) {
this.$message({
message: '提交成功',
type: 'success'
});
this.$emit('detail')
} else {
this.$alert(res.errorMessage, '提示')
}
})
}).catch(() => {
});
},
//保存草稿
onsave(name){
let params= {
"transferNo": this.transferNo,
"area": {
"saveAreaIds": this.saveAreaIds,
"cancelAreaIds": this.cancelAreaIds
},
"department": {
"saveDepartmentIds": this.saveDepartmentIds,
"cancelDepartmentIds": this.cancelDepartmentIds
}
}
this.axiosPost(``,params)
.then(res => {
if (res.success) {
this.$message({
message: '保存成功',
type: 'success'
});
this.clear()
if(name=='shut'){
this.$router.push('')
}else{
this.getAngent()
this.search()
}
} else {
this.$alert(res.errorMessage, '提示')
}
})
},
clear(){
this.saveAreaIds=[]
this.cancelAreaIds=[]
this.saveDepartmentIds=[]
this.cancelDepartmentIds=[]
},
//代理區域選擇
handleSelectionChange(val) {
this.multipleList = val;
},
//組織區域選擇
handleSelectionChangeData(val) {
this.multipleData=val
//解決對選默認邏輯
// if(this.multipleData.length){
// if(this.objList.length){
// this.multipleData.map(item=>{
// if(this.objList.indexOf(item.departmentId)==-1){
// this.objList.push(item.departmentId)
// // this.objList.push(item)
// }
// })
// }else{
// this.objList=[]
// this.multipleData.map(item=>{
// this.objList.push(item.departmentId)
// })
// // this.objList=this.multipleData
// }
// }else{
// if(this.objList.length){
// this.tableData.map(item=>{
// let index=this.objList.indexOf(item.departmentId)
// if(index!==-1){
// this.objList.splice(index,1)
// }
// })
// }else{
// this.objList=[]
// }
// }
},
//獲取PMS組織
handleWarehouseChange(queryString, cb){
if(!queryString){
this.departmentId = '';
cb([]);
return;
}
this.axiosPost('', {searchParam: queryString.trim()}).then(res=>{
if(res.success){
res.model.map(item=>{
item.value = item.departmentId;
})
cb(res.model);
}else{
this.$message.error(res.errorMessage);
}
})
},
//選擇PMS組織
handleWarehouseSelect(item) {
// console.log(item);
this.departmentId = item.agentNo;
this.name = item.agentName;
},
//刪除PMS組織
clears(item){
this.departmentId=''
this.name=''
},
//重置
reset(){
this.departmentId=''
this.name=''
this.areaLevel=''
this.status=''
},
//搜索組織
search(){
let params={
transferNo:this.transferNo,
areaLevel:this.areaLevel,
status:this.status,
departmentId:this.departmentId,
}
this.getSelect(params)
},
// 獲取組織級別
getlevelList(){
this.axiosPost('').then(res=>{
if(res.success){
this.areaLevelList = res.model.areaLevel;
this.areaLevelList.splice(0,0,{'value':'','text':'全部'})
this.statusList = res.model.areaStatus;
this.statusList.splice(0,0,{'value':'','text':'全部'})
}else {
this.$alert(res.errorMessage, '提示',{ showClose:false});
}
})
},
// 是否可勾選,查看時不可再勾選，勾選時置灰
selectInit(row,index){
if(this.role=='roleTwins'){
return false //不可勾選
}else{
if(this.role=='roleOne'&&row.transferStatus==1){
return true //可勾選
}else if(this.role=='roleTwo'&&row.transferStatus==3){
return true //可勾選
}else{
return false //不可勾選
}
}
// return true //可勾選
},
//轉移區域
transferArea(item,name){
let names='區域'
if(name=='organization'){
names='組織'
}
this.$confirm(`<div>請確認是否轉移該${names}</div>`, `${names}轉移/批量${names}轉移`, {
confirmButtonText: '確定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
}).then(() => {
if(name=='organization'){
// item.transferStatus=2
// item.transferStatusDesc='已保存'
if(this.saveDepartmentIds.indexOf(item.departmentId)==-1){
this.saveDepartmentIds.push(item.departmentId)
}
if(this.cancelDepartmentIds.indexOf(item.departmentId)!==-1){
let index=this.cancelDepartmentIds.indexOf(item.departmentId)
this.cancelDepartmentIds.splice(index,1)
}
// this.multipleData=[]
this.search()
}else{
// item.transferStatus=2
// item.transferStatusDesc='已保存'
if(this.saveAreaIds.indexOf(item.areaId)==-1){
this.saveAreaIds.push(item.areaId)
}
if(this.cancelAreaIds.indexOf(item.areaId)!==-1){
let index=this.cancelAreaIds.indexOf(item.areaId)
this.cancelAreaIds.splice(index,1)
}
// this.multipleList=[]
this.getAngent()
}
})
},
//取消編輯
cancelArea(item,name){
if(name=='organization'){
item.transferStatus=1
item.transferStatusDesc='不處理'
if(this.saveDepartmentIds.indexOf(item.areaId)!=-1){
let index=this.saveDepartmentIds.indexOf(item.areaId)
this.saveDepartmentIds.splice(index,1)
}
if(this.cancelDepartmentIds.indexOf(item.areaId)==-1){
this.cancelDepartmentIds.push(item.areaId)
}
// this.multipleData=[]
this.getSelect()
}else{
item.transferStatus=1
item.transferStatusDesc='不處理'
if(this.saveAreaIds.indexOf(item.areaId)!=-1){
let index=this.saveAreaIds.indexOf(item.areaId)
this.saveAreaIds.splice(index,1)
}
if(this.cancelAreaIds.indexOf(item.areaId)==-1){
this.cancelAreaIds.push(item.areaId)
}
// this.multipleList=[]
this.getAngent()
}
},
//區域批量轉移
transferAreaList(name){
let names='區域'
let length=''
if(name=='organization'){
names='組織'
length=this.multipleData.length
}else{
length=this.multipleList.length
}
console.log(123,this.multipleList.length,length,name)
this.$confirm(`<div>請確認是否轉移這${length}個${names}</div>`, `${names}轉移/批量${names}轉移`, {
confirmButtonText: '確定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
}).then(() => {
if(name=='organization'){
this.organizationList()
}else{
console.log(123,this.multipleList.length)
this.areaList()
}
})
},
//正式進行區域轉移操作
areaList(){
this.multipleList.map(item=>{
// item.transferStatus=2
// item.transferStatusDesc='已保存'
if(this.saveAreaIds.indexOf(item.areaId)==-1){
this.saveAreaIds.push(item.areaId)
}
if(this.cancelAreaIds.indexOf(item.areaId)!==-1){
let index=this.cancelAreaIds.indexOf(item.areaId)
this.cancelAreaIds.splice(index,1)
}
})
// this.tableList.map(val=>{
// this.multipleList.map(item=>{
// if(val.areaId==item.areaId){
// // item.transferStatus=2
// // item.transferStatusDesc='已保存'
// this.$set(val,'transferStatus',2)
// this.$set(val,'transferStatusDesc','已保存')
// }
// })
// })
// this.multipleList=[]
this.getAngent()
},
// //刪除id
// remove(val){
// },
//區域批量確認
confirmAreaList(name){
if(name=='organization'){
let ids=[]
this.multipleData.map(item=>{
ids.push(item.departmentId)
})
this.organizationConfirm(ids)
}else{
let ids=[]
this.multipleList.map(item=>{
ids.push(item.areaId)
})
let agentNo=this.$parent.query.agentNoFrom
this.axiosPost('',{agentNo:agentNo,areaId:ids}).then(res=>{
if(res.success){
if(res.model){
this.confirmList(ids)
}else{
this.$alert('選中需要轉移的區域'+res.errorMessage+'選中需要轉移的1號員工（or普通員工）中未找到匹配的區域，請先至赤兔進行業務區域修改', '提示',{ showClose:false});
}
}else {
this.$alert(res.errorMessage, '提示',{ showClose:false});
}
})
}
},
//區域確認
confirmArea(item,name){
if(name){
let ids=[item.departmentId]
this.organizationConfirm(ids)
}else{
let ids=[item.areaId]
let agentNo=this.$parent.query.agentNoFrom
this.axiosPost('',{agentNo:agentNo,areaId:ids}).then(res=>{
if(res.success){
if(res.model){
this.confirmList(ids)
}else{
this.$alert('選中需要轉移的區域'+res.errorMessage+'選中需要轉移的1號員工（or普通員工）中未找到匹配的區域，請先至赤兔進行業務區域修改', '提示',{ showClose:false});
}
}else {
this.$alert(res.errorMessage, '提示',{ showClose:false});
}
})
}
},
//區域確認操作
confirmList(ids){
let params={
"transferNo": this.transferNo,
"areaIds": ids
}
this.axiosPost('',params).then(res=>{
if(res.success){
this.getAngent()
}else {
this.$alert(res.errorMessage, '提示',{ showClose:false});
}
})
},
//組織轉移
organizationList(){
this.multipleData.map(item=>{
// item.transferStatus=2
// item.transferStatusDesc='已保存'
if(this.saveDepartmentIds.indexOf(item.departmentId)==-1){
this.saveDepartmentIds.push(item.departmentId)
}
if(this.cancelDepartmentIds.indexOf(item.departmentId)!==-1){
let index=this.cancelDepartmentIds.indexOf(item.departmentId)
this.cancelDepartmentIds.splice(index,1)
}
})
// this.tableData.map(val=>{
// this.multipleData.map(item=>{
// if(val.departmentId==item.departmentId){
// // item.transferStatus=2
// // item.transferStatusDesc='已保存'
// this.$set(val,'transferStatus',2)
// this.$set(val,'transferStatusDesc','已保存')
// }
// })
// })
// this.multipleData=[]
this.search()
},
//組織確認
organizationConfirm(ids){
let params={
"transferNo": this.transferNo,
"departmentIds": ids
}
this.axiosPost('',params).then(res=>{
if(res.success){
this.getAngent()
}else {
this.$alert(res.errorMessage, '提示',{ showClose:false});
}
})
},
//上一步
advance(){
this.$emit('receive',0)
},
//下一步
next(){
if(this.role=='roleOne'){
let params= {
"transferNo": this.transferNo,
"area": {
"saveAreaIds": this.saveAreaIds,
"cancelAreaIds": this.cancelAreaIds
},
"department": {
"saveDepartmentIds": this.saveDepartmentIds,
"cancelDepartmentIds": this.cancelDepartmentIds
}
}
this.axiosPost(``,params)
.then(res => {
if (res.success) {
this.$message({
message: '保存成功',
type: 'success'
});
this.clear()
this.$emit('receive',2)
} else {
this.$alert(res.errorMessage, '提示')
}
})
}else{
this.$emit('receive',2)
}
},
//關閉頁面
shutDown(){
if(this.role=='roleOne'){
this.$confirm('請確認是否需要保存草稿？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '不保存',
dangerouslyUseHTMLString: true,
}).then(() => {
this.onsave('shut')
}).catch(() => {
this.$router.push('/cam/transferList')
});
}else{
this.$router.push('/cam/transferList')
}
}
}
}
</script>
<style scoped lang="scss">
.main-content .form-label {
width: 100px;
}
.add20{
padding:10px 25px 20px 25px;
}
.content-flex{
display:flex;justify-content:center;
.fromClass{
width:400px;background:rgba(37,207,207,0.12);padding:20px 60px;border:solid 1px #25cfcf;border-radius:5px;
.ptitle{
text-align:center;color:#ff9b00;font-size:15px;
}
}
.img-arror{
width:30px;text-align:center;height:126px;line-height:126px;margin:0 20px;
}
}
.eboss-color{
background: #29C1C2;
color:#fff;
font-size:14px;
padding-left:20px;
padding-right:20px;
border: solid 1px #29c1c2;
}
.eboss-co{
background: rgba(41,193,194,0.06);
color: #29c1c2;
border: solid 1px #29c1c2;
}
.eboss-cols{
border: solid 1px #d6dde2;
background: #f1f6f7;
color: #666666;
}
.label-list{
height: 40px;
line-height: 40px;
color: #555;
width:120px;
}
.billNo {
cursor: pointer;
color: #29c1c2;
}
</style>
![]()
