liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'master' of http://git.2weisou.com/wangxiao/zkPCproject into master

newStyle
lancer 3 years ago
parent
03dc4b7f96 4def0b975e
commit
e21964e9fb
6 changed files with 810 additions and 177 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      package.json
  2. BIN
      public/img/xiaza1.png
  3. +55
    -0
      src/api/modules/http.js
  4. +339
    -32
      src/views/Receive/index.vue
  5. +413
    -143
      src/views/Scheduling/index.vue
  6. +2
    -2
      vue.config.js

+ 1
- 0
package.json View File

@@ -30,6 +30,7 @@
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"script-loader": "^0.7.2", "script-loader": "^0.7.2",
"sockjs-client": "1.0.0", "sockjs-client": "1.0.0",
"sortablejs": "^1.14.0",
"stomp-websocket": "2.3.4-next", "stomp-websocket": "2.3.4-next",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-audio-player": "0.0.2", "vue-audio-player": "0.0.2",


BIN
public/img/xiaza1.png View File

Before After
Width: 20  |  Height: 20  |  Size: 519 B

+ 55
- 0
src/api/modules/http.js View File

@@ -356,4 +356,59 @@ export function taboodelete(query) {
}) })
} }


//顾问排班列表
export function AgentPoollist(query) {
return request({
url: 'autoSR/zkAgentPool/list',
method:'get',
params:query
})
}

//查询顾问
export function agentListSort(query) {
return request({
url: 'autoSR/zkAgentPool/agentListSort',
method:'get',
params:query
})
}


//排班删除
export function agentListdelete(query) {
return request({
url: 'autoSR/zkAgentPool/delete',
method:'get',
params:query
})
}

//排班批量删除
export function agentListdelBatch(query) {
return request({
url: 'autoSR/zkAgentPool/delBatch',
method:'get',
params:query
})
}

//排班添加
export function agentListsortUpdate(data) {
return request({
url: 'autoSR/zkAgentPool/sortUpdate',
method:'post',
data
})
}

//排班批量删除
export function agentListupdate(query) {
return request({
url: 'autoSR/zkAgentPool/update',
method:'get',
params:query
})
}




+ 339
- 32
src/views/Receive/index.vue View File

@@ -1,18 +1,99 @@
<template> <template>
<div class="hello">
<!-- <div class="player">
{{ currentAudioName || audioList[0].name }}
<audio-player
ref="audioPlayer"
:show-prev-button="true"
:show-next-button="true"
:audio-list="audioList.map((elm) => elm.url)"
:before-play="handleBeforePlay"
theme-color="#ff2929"
@playing="playing"
/>
</div> -->
<div id="aplayer"></div>
<div class="box-center">
<div class="topbox">
<div class="topzuo">
<div class="title">
<span class="span1">首次到访</span>
<span class="span2">无效录音｜未标注｜反面案例</span>
</div>
<div class="title" style="margin-top: 6px;">
<span class="span3">宋先生</span>
<span class="span2">2021-10-01 10:00:00</span>
</div>
<div style="display: flex;width: 100%;">
<div class="aplayer" id="aplayer"></div>
<div style="margin-left: -5px; margin-top: 21px;" @click="download()">
<img style="width:12px;height:12px;"
src="/img/xiaza1.png" alt="">
</div>
</div>
<div class="aplayerSpeed">
<div style="display: flex; justify-content: space-around; width: 130px;">
<div @click="aplayerChange('del')" style="cursor:pointer">上一首</div>
<div style="cursor:pointer">{{(aplayerId/1+1)+'/'+aplayerLength}}</div>
<div @click="aplayerChange('add')" style="cursor:pointer">下一首</div>
</div>
<div @click="aplayerSpeed(0.5)" :class="aplayerSpeedNum==0.5?'aplayerSpeedFont':''" style="cursor:pointer">0.5x</div>
<div @click="aplayerSpeed(1)" :class="aplayerSpeedNum==1?'aplayerSpeedFont':''" style="cursor:pointer">1.0x</div>
<div @click="aplayerSpeed(1.5)" :class="aplayerSpeedNum==1.5?'aplayerSpeedFont':''" style="cursor:pointer">1.5x</div>
<div @click="aplayerSpeed(2)" :class="aplayerSpeedNum==2?'aplayerSpeedFont':''" style="cursor:pointer">2.0x</div>
</div>
</div>
<div class="topyou" >
<div style="font-size:16px;">
客户：<span style="color: #2671E2;">李先生</span>
</div>
<div style="display: flex;font-size:15px;margin-top: 8px;">
<div style="width:40%;">
<div style="margin-top: 6px;">负责顾问：李先生</div>
<div style="margin-top: 6px;">接待时长：155min</div>
<div style="margin-top: 6px;">客户等级：A</div>
</div>
<div style="width:60%;">
<div style="margin-top: 6px;">到访次数：3次</div>
<div style="margin-top: 6px;">最近到访：2021-10-01 14:00:00</div>
<div style="margin-top: 6px;">客户阶段：初访</div>
</div>
</div>
</div>
</div>

<div class="topbox1">
<div class="topzuo">
<div class="topzuo-zuo">
<div class="zuo-titbox">
<div class="searchbox">
<input class="input" placeholder="请输入关键词" type="text">
<div class="searchbutt">搜索</div>
</div>
<div class="headboxbott">
<div class="headovfu">
<div style="width: 100%;display: flex;" class="inner-container">
<div @click="tapspagek(index)" :class="{ roleindexclass: roleindex == index }" class="biaoji1"
v-for="(item,index) in tablist" :key="index">{{item.name}}</div>
</div>
</div>
<div class="headpade">
<div class="biaoji" @click="biaoji()">标记</div>
</div>
</div>
</div>
</div>
<div class="topzuo-you">
<div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;border-bottom: 1px solid #E0E0E0;">
<div style="flex: 1;font-size: 15px;color: #333333;text-indent:5%;">客户意向</div>
<div style="flex: 1;font-size: 15px;color: #2671E2;text-indent:70%;">校准</div>
</div>
<div class="pingfenbox" >
<div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">系统分析</div>
<div :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">人工校准</div>
</div>
</div>
</div>
<div class="topyou">
<div class="pingfenbox" >
<div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">销讲总执行率10%</div>
<div :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">禁忌执行</div>
</div>
<div>
<div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">
<div style="flex: 1;font-size: 15px;color: #333333;text-indent:23%;">指标</div>
<div style="flex: 1;font-size: 15px;color: #333333;text-indent:23%;">执行率</div>
</div>
</div>
</div>
</div>

</div> </div>
</template> </template>


@@ -37,20 +118,23 @@ export default {
url: "https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3", url: "https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3",
}, },
], ],
tablist:[ {name:'全部',}, {name:'A',}, {name:'b',}, {name:'c',},],
roleindex:0,
zhixingcenterindex:0,


}; };
}, },
mounted() {
this.bofangchushihua();
},
methods: { methods: {
// handleBeforePlay(next) {
// // 这里可以做一些事情...
// this.currentAudioName =
// this.audioList[this.$refs.audioPlayer.currentPlayIndex].name;
// console.log("我要开始播放了");

// next(); // 开始播放
// },
// playing(e) {
// console.log("我播放中", this.$refs.audioPlayer.currentTime);
// },
recordclick(i){
this.zhixingcenterindex=i;
},
tapspagek(i){
this.roleindex=i;
},
bofangchushihua() { bofangchushihua() {
var that = this; var that = this;
this.$nextTick(() => { this.$nextTick(() => {
@@ -74,16 +158,239 @@ export default {
}); });
}, },
}, },
mounted() {
this.bofangchushihua();
},
}; };
</script> </script>


<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.player {
width: 30%;
margin: 20px auto;
<style scoped lang="scss" >
.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
background: #FFFFFF;
}
.topbox{
width: 100%;
display: flex;
.topzuo{
width:75% ;
min-width: 800px;
height: 140px;
background: #FFFFFF;
border: 1px solid #E0E0E0;
padding: 10px;
position: relative;

.title{
color: #32363D;
.span1{
font-size: 16px;
font-weight: 600;
margin-left: 2px;
}
.span2{
font-size: 14px;
margin-left: 10px;
}
.span3{
font-size: 16px;
margin-left: 2px;
}
}
}
.topyou{
width:24% ;
min-width: 380px;
height: 140px;
padding: 10px;
background: #FFFFFF;
border: 1px solid #E0E0E0;
margin-left: 20px;
}
}
.topbox1{
width: 100%;
display: flex;
margin-top: 18px;
height: calc(80vh - 150px);
.topzuo{
width:75% ;
min-width: 800px;
height: 100%;
display: flex;
.topzuo-zuo{
width: 60%;
height: 100%;
background: #FFFFFF;
border: 1px solid #E0E0E0;
.zuo-titbox{
width: 100%;
height: 100px;
border-bottom: 1px solid #E0E0E0;
.searchbox{
width: 100%;
height: 50px;
display: flex;
margin-top: 6px;
justify-content: center;
align-items: center;
.input{
width: 80%;
height: 32px;
line-height: 32px;
background: #FFFFFF;
border-radius: 2px;
text-indent: 6px;
border: 1px solid #E0E0E0;
}
.searchbutt{
width: 68px;
height: 32px;
line-height: 32px;
background: #2671E2;
border-radius: 2px;
color: #FFFFFF;
margin-left: 20px;
text-align: center;
}
}
}
}
.topzuo-you{
width: 39%;
height: 100%;
margin-left: 18px;
background: #FFFFFF;
border: 1px solid #E0E0E0;
}
}
.topyou{
width:24% ;
min-width: 380px;
height: 100%;
background: #FFFFFF;
border: 1px solid #E0E0E0;
margin-left: 20px;
}
} }

.roleindexclass{
background: #2671E2;
color: #FFFFFF;
}
.headboxbott{
width: 100%;
height:50px;
display: flex;
align-items: center;
}
.headovfu{
flex: 1;
height: 40px;
overflow: hidden;
margin-top: 10px;
}
.headpade{
width: 100px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.biaoji{
width: 70px;
height: 30px;
background: #E6625B;
border-radius: 24px;
text-align: center;
line-height: 30px;
color: #FFFFFF;
}
.biaoji1{
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
margin-left: 10px;
flex-shrink: 0;
border-radius: 4px;
}
.inner-container{
overflow-x: scroll;
height: 40px;
}
/*滚动条样式*/
.inner-container::-webkit-scrollbar {
height: 4px;
}
.inner-container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.inner-container::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
.aplayer{
box-shadow:none;
/*width: 80%;*/
width: 95.3%;
}
.aplayer-author{
display: none;
}


.aplayerSpeed{
display: flex;
/*justify-content: space-around;*/
justify-content: space-between;
padding: 0 10px;
font-size: 14px;
color: #999;
/*width: 616px;*/
width: 86.5%;
margin: 0 auto;
position: absolute;
left: 78px;
bottom: 12px;
}
/deep/.aplayer-pic{
width: 60px !important;
height: 60px !important;
}
/deep/.aplayer-music{
display: none !important;
}
.aplayer-controller{
margin-top: 15px;
}

.aplayerSpeedFont{
color: #2671E2;
}
/deep/.aplayer-info{
padding: 22px 7px 0px 10px;;
}
.pingfenbox{
width: 100%;
height: 46px;
line-height: 46px;
border-bottom: 1px solid #E0E0E0;
display: flex;
}
.pingfenbox div{
flex: 1;
text-align: center;
font-size: 16px;
text-indent: 20px;
}
.activecllasscet{
color: #2671E2;
}


</style> </style>

+ 413
- 143
src/views/Scheduling/index.vue View File

@@ -1,57 +1,74 @@
<template> <template>

<div class="box-center"> <div class="box-center">
<!-- 头 --> <!-- 头 -->
<div class="app-top"> <div class="app-top">
<div class="app-titel" style="margin-top: 5px"> <div class="app-titel" style="margin-top: 5px">
<div class="label">用户名：</div>
<div class="label">楼盘名称：</div>
<div style="width: 200px">
<el-select
v-model="houseid"
@change="houseChange"
placeholder="请选择"
>
<el-option
v-for="item in houseList"
:key="item.id"
:label="item.propertyName"
:value="item.id"
>
</el-option>
</el-select>
</div>
<div class="label">顾问名：</div>
<div> <div>
<el-input v-model="value"></el-input>
<el-input v-model="name"></el-input>
</div> </div>
<div class="label">状态：</div>
<div class="label">工作状态：</div>
<div> <div>
<el-select v-model="value" placeholder="请选择">
<el-select v-model="stateoptseid" placeholder="请选择">
<el-option <el-option
v-for="item in options"
v-for="item in stateoptse"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value">
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="label">排班状态：</div> <div class="label">排班状态：</div>
<div> <div>
<el-select v-model="value" placeholder="请选择">
<el-select v-model="schedulingoptseid" placeholder="请选择">
<el-option <el-option
v-for="item in options"
v-for="item in schedulingoptse"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value">
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="app-titel" style="margin-top: 15px">
<div class="app-titel" style="margin-top: 15px">
<div class="label" style="color: #ffffff">筛选相关：</div> <div class="label" style="color: #ffffff">筛选相关：</div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<el-button style="background: #2671e2; color: #ffffff" <el-button style="background: #2671e2; color: #ffffff"
>筛选</el-button
@click="screening()">筛选</el-button
> >
</div> </div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<el-button>清空筛选条件</el-button>
<el-button @click="reset()">清空筛选条件</el-button>
</div> </div>
<div style="margin-left: 20px">
<div style="margin-left: 20px">
<el-button style="background: #2671e2; color: #ffffff" <el-button style="background: #2671e2; color: #ffffff"
>添加</el-button
@click="addinfo()" >添加</el-button
> >
</div> </div>
<div style="margin-left: 20px">
<div style="margin-left: 20px">
<el-button style="background: #2671e2; color: #ffffff" <el-button style="background: #2671e2; color: #ffffff"
>批量删除</el-button
@click="alldel()" >批量删除</el-button
> >
</div> </div>
<div style="margin-left: 20px">
<div style="margin-left: 20px">
<el-button style="background: #2671e2; color: #ffffff" <el-button style="background: #2671e2; color: #ffffff"
>批量排班</el-button >批量排班</el-button
> >
@@ -61,152 +78,395 @@


<!-- 表格 --> <!-- 表格 -->
<div class="cen-tab"> <div class="cen-tab">
<el-table
:data="tableData"
stripe
height="400"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="用户名"
align="center"
>
</el-table-column>
<el-table-column
prop="name"
label="状态"
align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="上次接待结束时间"
align="center">
</el-table-column>
<el-table
:data="tableData"
stripe
height="400"
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="name" label="顾问名" align="center">
</el-table-column>
<el-table-column prop="name" label="状态" align="center">
<template slot-scope="scope">
<span v-if="scope.row.status == 0">空闲</span>
<span v-if="scope.row.status == 1">接待中</span>
<span v-if="scope.row.status == 2">暂停接待</span>
</template>
</el-table-column>
<el-table-column
prop="createTime"
label="上次接待结束时间"
align="center"
>
</el-table-column>


<el-table-column
prop="date"
label="有无排班"
align="center"
>
</el-table-column>
<!-- scope -->
<el-table-column label="操作" align="center">
<template slot-scope="">
<span style="color: #2671E2;">暂停接待</span>
<span style="color: #2671E2;margin-left: 10px;">工作安排</span>
<span style="color: #2671E2;margin-left: 10px;">删除</span>
</template>
</el-table-column>
</el-table>
<div style="display: flex;justify-content:flex-end;margin-top: 10px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
<el-table-column prop="date" label="有无排班" align="center">
<template slot-scope="scope">
<span v-if="scope.row.hasSchedule == 1">有排班</span>
<span v-if="scope.row.hasSchedule == 0">无排班</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<span style="color: #2671e2" @click="switchstatus(scope.row,2)" v-if="scope.row.status == 0">暂停接待</span>
<span style="color: #2671e2" @click="switchstatus(scope.row,0)" v-if="scope.row.status == 2">空闲</span>
<span style="color: #2671e2; margin-left: 10px">工作安排</span>
<span style="color: #2671e2; margin-left: 10px" @click="del(scope.row)">删除</span>
</template>
</el-table-column>
</el-table>
<div style="display: flex; justify-content: flex-end; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[6, 12, 18, 24]"
:page-size="6"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div> </div>


<el-dialog title="绑定" :visible.sync="dialogVisible" >
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editor()">保存</el-button>
<el-dialog title="新增" :visible.sync="dialogVisible">
<div>
<div style="text-align: center;">
<el-transfer
ref="transfer" id="transfer"
style="text-align: left; display: inline-block;height:400px;"
v-model="transfervalue"
:titles="['无排班', '排班']"
:button-texts="['删除', '添加']"
@change="handleChange"
:data="transferdata">
<span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.label }}</span>
</el-transfer>
</div> </div>
</el-dialog>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editor()">保存</el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>


<script> <script>
import Sortable from 'sortablejs'
export default { export default {
data() { data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${ i }`
});
}
return data;
};
return { return {
currentPage4:4,
value: "",
input: "",
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: " 1518 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: " 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: " 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: " 1518 弄",
},
{
date: "2016-05-08",
name: "王小虎",
address: " 1518 弄",
},
{
date: "2016-05-06",
name: "王小虎",
address: " 1518 弄",
},
{
date: "2016-05-07",
name: "王小虎",
address: " 1518 弄",
},
transferdata: generateData(),
draggingKey : null,
transfervalue: [],
multipleSelection: [],
dialogVisible: false,
currentPage4: 1,
tableData: [],
houseList: [],
houseid: "",
name: "",
stateoptse: [
{ label: "空闲", value: 0 },
{ label: "接待中", value: 1 },
{ label: "暂停接待", value: 2 },
],
stateoptseid: "",
schedulingoptse: [
{ label: "无排班", value: 0 },
{ label: "有排班", value: 1 },
], ],
multipleSelection:[],
dialogVisible:false,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
schedulingoptseid: "",
Page: 1,
size: 6,
total: 0,
}; };
}, },
mounted() {},
mounted() {

this.getHouse();
},
methods: { methods: {
editorinfo(){
this.dialogVisible=true;
switchstatus(row,i){
let obj = {
agentId: row.agentId,
status:i
};
this.$confirm(i==0?'修改为空闲, 是否继续?':'修改为暂停接待, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
distinguishCancelAndClose: true,
type: 'warning'
}).then(() => {
this.$api.http.agentListupdate(obj).then((res) => {
if(res.code==0){
this.$message({
type: 'success',
message: '修改成功!'
});
this.reset()
}else{
this.$message.error(res.message);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消修改'
});
});
}, },
editor(){
this.dialogVisible=false;



drag(ev,option) {
　　　　this.draggingKey = option.key;
}, },
handleSelectionChange(val) {
this.multipleSelection = val;
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys);
}, },
addinfo() {
this.agentListSort()
this.dialogVisible = true;

const secounds = 2;
let num = 0
const timer = setInterval(() => {
if(num < secounds) {
num++
}else {
clearInterval(timer)
this.inif()
}
}, 500)// 这里的时间不要忘记，否则没有效果
},
inif(){
const transfer = this.$refs.transfer.$el
const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
Sortable.create(rightEl, {
animation: 100,
onEnd: (evt) => {
const { oldIndex, newIndex } = evt
const temp = this.transfervalue[oldIndex]
if (!temp || temp === 'undefined') {
return
}// 解决右边最后一项从右边拖左边，有undefined的问题
　　//这里和网上的有点不一样,网上搜到的结果排序是,当前拖拽的元素和拖拽位置的元素互换位置,但是实际上在使用el-transfer有两个问题
　　//1.右侧排序value的数组顺序来源于后台穿的数组顺序,实际如果不设置target-order="unshift"的话,展示会按照左侧的数据列顺序展示,导致拖拽排序时顺序乱七八糟
　　//2.实际拖拽排序看到的效果是当前拖拽元素拖拽到其他地方,其他地方的元素会下移,而不是调换顺序
// 去除空字符串
// for (var i = 0; i < this.transfervalue.length; i++) {
// if (this.transfervalue[i] == '' || this.transfervalue[i] == null || typeof (this.transfervalue[i]) == 'undefined') {
// this.transfervalue.splice(i, 1)
// i = i - 1
// }
// }
const arr_temp = [].concat(this.transfervalue) // 创建一个新的临时数组，用以操作后不变更原数组
console.log(this.transfervalue)
arr_temp.splice(newIndex, 0, arr_temp.splice(oldIndex, 1)[0]) // 在b位置插入从a位置截取的元素
this.transfervalue = arr_temp
console.log(this.transfervalue)
this.$emit('update:call-back', this.transfervalue)
}
})
const leftEl = leftPanel.getElementsByClassName('el-transfer-panel__list')[0]
Sortable.create(leftEl, {
animation: 100,
onEnd: (evt) => {
const { oldIndex, newIndex } = evt
const temp = this.transferdata[oldIndex]
this.$set(this.transferdata, oldIndex, this.transferdata[newIndex])
this.$set(this.transferdata, newIndex, temp)
}
})
leftPanel.ondragover = (ev) => {
ev.preventDefault()
}
leftPanel.ondrop = (ev) => {
ev.preventDefault()
const index = this.transfervalue.indexOf(this.draggingKey)
if (index !== -1) {
this.transfervalue.splice(index, 1)
}
}
rightPanel.ondragover = (ev) => {
ev.preventDefault()
}
rightPanel.ondrop = (ev) => {
ev.preventDefault()
if (this.transfervalue.indexOf(this.draggingKey) === -1) {
this.transfervalue.push(this.draggingKey)
}
}
},
//查询顾问
agentListSort(){
let obj = {
houseId: this.houseid,
};
this.$api.http.agentListSort(obj).then((res) => {
this.transfervalue=res.data.chosedSource.map(item => {
return item.id
});
let contlist=[...res.data.chosedSource,...res.data.dataSource]
this.transferdata=contlist.map(item => {
return {label: item.name, key: item.id}
});
});
},
// 楼盘选择
houseChange(e) {
this.houseid = e;
this.Page = 1;
this.stateoptseid = "";
this.schedulingoptseid = "";
this.name = "";
this.AgentPoollist();
},
// 获取楼盘下拉的数据
getHouse() {
this.$api.api.findHouseByUser().then((res) => {
this.houseList = res.data;
this.houseid = this.houseList[0].id;
this.AgentPoollist();
});
},
AgentPoollist() {
let obj = {
current: this.Page,
size: this.size,
itemId: this.houseid,
status: this.stateoptseid,
hasSchedule: this.schedulingoptseid,
name: this.name,
};
this.$api.http.AgentPoollist(obj).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
});
},
screening(){
this.Page = 1;
this.AgentPoollist();
},
reset(){
this.Page = 1;
this.stateoptseid = "";
this.schedulingoptseid = "";
this.name = "";
this.AgentPoollist();
},
//删除
del(item){
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
distinguishCancelAndClose: true,
type: 'warning'
}).then(() => {
this.$api.http.agentListdelete({
id:item.id,
houseId:this.houseid
}).then((res) => {
if(res.code==0){
this.$message({
type: 'success',
message: '删除成功!'
});
this.Page=1;
this.AgentPoollist()
}else{
this.$message.error(res.message);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
alldel(){
if(this.multipleSelection.length==0){
this.$message.error("请选择删除项！");
return
}else{
console.log("11111111111",this.multipleSelection)
let sirsto=''
this.multipleSelection.map(item => {
sirsto+=item.id+','
});
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
distinguishCancelAndClose: true,
type: 'warning'
}).then(() => {
this.$api.http.agentListdelBatch({
ids:sirsto,
houseId:this.houseid
}).then((res) => {
if(res.code==0){
this.$message({
type: 'success',
message: '删除成功!'
});
this.Page=1;
this.AgentPoollist()
}else{
this.$message.error(res.message);
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
editor() {
console.log(this.transfervalue)
let newlist=this.transfervalue.map((item,index) => {
return {sort: index+1, id: item}
});
let obj = {
houseId: this.houseid,
changedArr:JSON.stringify(newlist),
};
this.$api.http.agentListsortUpdate(obj).then((res) => {
this.dialogVisible = false;
this.reset()
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) { handleSizeChange(val) {
console.log(`每页 ${val} 条`); console.log(`每页 ${val} 条`);
this.size = val;
this.AgentPoollist()
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
console.log(`当前页: ${val}`); console.log(`当前页: ${val}`);
this.Page = val;
this.AgentPoollist()
} }
}, },
}; };
@@ -219,10 +479,10 @@ export default {
min-width: 1200px; min-width: 1200px;
padding-bottom: 100px; padding-bottom: 100px;
} }
.cen-tab{
.cen-tab {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
background: #FFFFFF;
background: #ffffff;
margin-top: 15px; margin-top: 15px;
} }
.tophove { .tophove {
@@ -265,4 +525,14 @@ export default {
} }
} }
} }
/deep/.el-transfer-panel{
width: 300px !important;
}
/deep/.el-transfer-panel__body{
height: 400px !important;
}
/deep/.el-transfer-panel__list{
height: 400px !important;
}

</style> </style>

+ 2
- 2
vue.config.js View File

@@ -4,8 +4,8 @@
*/ */
// const url = 'http://pigx-gateway' // const url = 'http://pigx-gateway'
// const url = 'http://39.97.167.65:9999' //测试 // const url = 'http://39.97.167.65:9999' //测试
const url = 'http://192.168.31.160:9999' //长龙
// const url = 'http://192.168.31.133:9999' //嘉豪
// const url = 'http://192.168.31.160:9999' //长龙
const url = 'http://192.168.31.133:9999' //嘉豪
// const url = 'http://192.168.31.100:9999' //王笑 // const url = 'http://192.168.31.100:9999' //王笑


const CompressionWebpackPlugin = require('compression-webpack-plugin') const CompressionWebpackPlugin = require('compression-webpack-plugin')


Write Preview
Loading…
Cancel
Save