|
@@ -1,82 +1,213 @@
|
|
|
<template>
|
|
|
<div v-if="pageStatus == 0">配置加载中...</div>
|
|
|
<div v-else-if="pageStatus == 1">此页面只对站点用户开发</div>
|
|
|
- <div v-else-if="pageStatus == 4" >
|
|
|
- <div v-if="labelList.labelFlag == 1" class="Label_AddUser">
|
|
|
- <div v-if="labelList.labelArr.length == 0">
|
|
|
- 你未添加标签,请先添加标签后再来设置规则
|
|
|
- </div>
|
|
|
- <el-collapse
|
|
|
- v-model="activeNames"
|
|
|
- @change="handleChange"
|
|
|
- class="collapse"
|
|
|
- accordion
|
|
|
- >
|
|
|
- <el-collapse-item
|
|
|
- :name="ele.id"
|
|
|
- v-for="(ele, index) in labelList.labelArr"
|
|
|
- :key="ele.id"
|
|
|
+ <div v-else-if="pageStatus == 4">
|
|
|
+ <div class="Label_AddUser">
|
|
|
+ <!-- v-if="labelList.labelFlag == 1" -->
|
|
|
+ <div v-if="(labelList.labelArr||[]).length == 0">
|
|
|
+ 你未添加标签,请先添加标签后再来设置规则
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-collapse
|
|
|
+ v-model="activeNames"
|
|
|
+ @change="openLabel"
|
|
|
+ class="collapse"
|
|
|
+ accordion
|
|
|
>
|
|
|
- <template slot="title">
|
|
|
- 标签{{ index + 1 }} <i class="header-icon el-icon-info"></i>
|
|
|
- <b>{{ ele.labelName }}</b>
|
|
|
- </template>
|
|
|
- <el-transfer
|
|
|
- v-model="customerLabelList"
|
|
|
- :props="{
|
|
|
- key: 'phone',
|
|
|
- label: 'label',
|
|
|
- }"
|
|
|
- :data="notCustomerLabelListCom"
|
|
|
- @change="transfer"
|
|
|
- filterable
|
|
|
- :titles="['可添加的人员', '已加入']"
|
|
|
+ <el-collapse-item
|
|
|
+ :name="ele.id"
|
|
|
+ v-for="(ele, index) in labelList.labelArr"
|
|
|
+ :key="ele.id"
|
|
|
>
|
|
|
- <div
|
|
|
- class="transfer-footer"
|
|
|
- slot="left-footer"
|
|
|
- style="text-align: center"
|
|
|
- v-show="!loading"
|
|
|
- >
|
|
|
- 数据拉取完成,可点击操作
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="transfer-footer"
|
|
|
- slot="right-footer"
|
|
|
- style="text-align: center"
|
|
|
- v-show="loading"
|
|
|
- >
|
|
|
- 数据拉取中,请稍后...
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="transfer-footer"
|
|
|
- slot="right-footer"
|
|
|
- style="text-align: center"
|
|
|
- v-show="error"
|
|
|
- >
|
|
|
- 数据失败,请刷新重试
|
|
|
- </div>
|
|
|
- </el-transfer>
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
- </div>
|
|
|
- <div v-else>你未启用标签功能</div>
|
|
|
+ <template slot="title">
|
|
|
+ 标签{{ index + 1 }} <i class="header-icon el-icon-info"></i>
|
|
|
+ <b>{{ ele.labelName }}</b>
|
|
|
+ </template>
|
|
|
+ <el-col :span="11">
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ v-model="leftQuery.customerName"
|
|
|
+ placeholder="输入姓名"
|
|
|
+ style="width: 150px"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-input
|
|
|
+ v-model="leftQuery.phone"
|
|
|
+ placeholder="输入手机号"
|
|
|
+ style="width: 150px; margin-left: 3px"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-search"
|
|
|
+ style="margin-left: 6px"
|
|
|
+ @click="getLeftData"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ style="margin-left: 6px"
|
|
|
+ @click="clearLeftQuery"
|
|
|
+ >清空</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="leftData"
|
|
|
+ border
|
|
|
+ size="mini"
|
|
|
+ :resizable="false"
|
|
|
+ highlight-current-row
|
|
|
+ height="500"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ >
|
|
|
+ <el-table-column label="可选">
|
|
|
+ <el-table-column
|
|
|
+ prop="phone"
|
|
|
+ label="姓名"
|
|
|
+ type="selection"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="customerName"
|
|
|
+ label="姓名"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="phone"
|
|
|
+ label="手机号"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="添加" width="60px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-circle-plus-outline"
|
|
|
+ class="underline btn24"
|
|
|
+ size="mini"
|
|
|
+ @click="handleMoveLabel('right', 1, scope.row)"
|
|
|
+ >添加</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="leftTotal > 0"
|
|
|
+ :total="leftTotal"
|
|
|
+ :page.sync="leftQuery.pageNum"
|
|
|
+ :limit.sync="leftQuery.pageSize"
|
|
|
+ @pagination="getLeftData"
|
|
|
+ style="margin-bottom:30px"
|
|
|
+ :pagerCount="5"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ />
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button type="primary" size="mini" @click="toggleLabel">主要</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ v-model="rightQuery.customerName"
|
|
|
+ placeholder="输入姓名"
|
|
|
+ style="width: 150px"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-input
|
|
|
+ v-model="rightQuery.phone"
|
|
|
+ placeholder="输入手机号"
|
|
|
+ style="width: 150px; margin-left: 3px"
|
|
|
+ size="mini"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-search"
|
|
|
+ style="margin-left: 6px"
|
|
|
+ @click="getRightData"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ style="margin-left: 6px"
|
|
|
+ @click="clearRightQuery"
|
|
|
+ >清空</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="rightData"
|
|
|
+ border
|
|
|
+ size="mini"
|
|
|
+ highlight-current-row
|
|
|
+ :resizable="false"
|
|
|
+ height="500"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ disabled
|
|
|
+
|
|
|
+ :loading="true"
|
|
|
+ >
|
|
|
+ <el-table-column label="已选" :resizable="false">
|
|
|
+ <el-table-column
|
|
|
+ prop="phone"
|
|
|
+ type="selection"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="customerName"
|
|
|
+ label="姓名"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="phone"
|
|
|
+ label="手机号"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="移除" width="60px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-remove-outline"
|
|
|
+ class="underline btn24"
|
|
|
+ size="mini"
|
|
|
+ @click="handleMoveLabel('left', 1, scope.row)"
|
|
|
+ >移除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="rightTotal > 0"
|
|
|
+ :total="rightTotal"
|
|
|
+ :page.sync="rightQuery.pageNum"
|
|
|
+ :limit.sync="rightQuery.pageSize"
|
|
|
+ @pagination="getRightData"
|
|
|
+ style="margin-bottom:30px"
|
|
|
+ :pagerCount="5"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-else>你未启用标签功能</div> -->
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listPrice } from "@/api/station/price";
|
|
|
import {
|
|
|
sysDeptDemoList,
|
|
|
- labelRulelist,
|
|
|
- selectLabelList,
|
|
|
- deleteLabelRuleDetail,
|
|
|
- addDetail,
|
|
|
selectCustomerLabelInfo,
|
|
|
addAndDelCustomerLabel,
|
|
|
selectPhoneList,
|
|
|
+ selectNotCustomerLabelInfo,
|
|
|
} from "@/api/label/label";
|
|
|
export default {
|
|
|
name: "Label_SetLabel",
|
|
@@ -89,68 +220,167 @@ export default {
|
|
|
loading: false,
|
|
|
error: false,
|
|
|
currentLabelId: undefined,
|
|
|
- pageStatus:0
|
|
|
+ pageStatus: 4,
|
|
|
+ timer: null,
|
|
|
+ leftData: [],
|
|
|
+ rightData: [],
|
|
|
+ leftTotal:100,
|
|
|
+ rightTotal:100,
|
|
|
+ leftQuery: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ labelId:null,
|
|
|
+ customerName: null,
|
|
|
+ phone:null
|
|
|
+ },
|
|
|
+ rightQuery: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ labelId:null,
|
|
|
+ customerName: null,
|
|
|
+ phone:null
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- notCustomerLabelListCom() {
|
|
|
- return (this.notCustomerLabelList || []).map((ele) => {
|
|
|
- ele.label = ele.phone + "_" + ele.customerName;
|
|
|
- return ele;
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
created() {
|
|
|
this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
+ getLeftData(){
|
|
|
+ // this.leftData = [];
|
|
|
+ selectNotCustomerLabelInfo(this.leftQuery)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.leftData = res.rows;
|
|
|
+ this.leftTotal = res.total
|
|
|
+ } else {
|
|
|
+ throw new Error("");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.leftData = [];
|
|
|
+ this.leftTotal = 0;
|
|
|
+ this.msgError("拉取左边标签用户失败,请刷新~");
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ getRightData(){
|
|
|
+ // this.rightData = [];
|
|
|
+ selectPhoneList(this.rightQuery)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.rightData = res.rows;
|
|
|
+ this.rightTotal = res.total;
|
|
|
+ } else {
|
|
|
+ throw new Error("");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.rightData = [];
|
|
|
+ this.rightTotal = 0;
|
|
|
+ this.msgError("拉取右边标签用户失败,请刷新~");
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ handleMoveLabel(direction = 'right', type = 1, row, labelIdArr){ // type 1 传row type 2 idArr direction right 向右转移 left 向左转移
|
|
|
+ const changeArr = []
|
|
|
+ if(type == 1){
|
|
|
+ changeArr.push(row.phone)
|
|
|
+ }else if(type == 2){
|
|
|
+ changeArr = labelIdArr
|
|
|
+ }
|
|
|
+ const query = {
|
|
|
+ labelId: direction == 'right' ? this.leftQuery.labelId : this.rightQuery.labelId,
|
|
|
+ flag: "1",
|
|
|
+ phoneList: changeArr,
|
|
|
+ };
|
|
|
+ if (direction == "right") {
|
|
|
+ query.flag = "0";
|
|
|
+ } else if (direction == "left") {
|
|
|
+ query.flag = "1";
|
|
|
+ }
|
|
|
+ addAndDelCustomerLabel(query).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.getLeftData();
|
|
|
+ this.getRightData();
|
|
|
+ } else {
|
|
|
+ throw new Error("");
|
|
|
+ }
|
|
|
+ }).catch((err)=>{
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ clearLeftQuery(labelId = null){
|
|
|
+ this.leftQuery = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ labelId,
|
|
|
+ customerName: null,
|
|
|
+ phone:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearRightQuery(labelId = null){
|
|
|
+ this.rightQuery = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ labelId,
|
|
|
+ customerName: null,
|
|
|
+ phone:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ let changeArr = [];
|
|
|
+ val.map((ele) => {
|
|
|
+ changeArr.push(ele.phone);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
init() {
|
|
|
- this.setPageStatus()
|
|
|
- this.getList();
|
|
|
+ this.getLabelList();
|
|
|
},
|
|
|
setPageStatus() {
|
|
|
this.queryPageStatus([2]).then((res) => {
|
|
|
this.pageStatus = res;
|
|
|
});
|
|
|
},
|
|
|
- handleChange(val) {
|
|
|
- this.getLabelUser(val);
|
|
|
+ openLabel(id) {
|
|
|
+ this.clearLeftQuery(id);
|
|
|
+ this.clearRightQuery(id);
|
|
|
+ this.getLeftData();
|
|
|
+ this.getRightData();
|
|
|
},
|
|
|
getLabelUser(id) {
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
selectCustomerLabelInfo({
|
|
|
labelId: id,
|
|
|
- }).then((res) => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.notCustomerLabelList = res.data.notCustomerLabelList;
|
|
|
- this.customerLabelList = res.data.phoneList;
|
|
|
- } else {
|
|
|
- this.msgError("拉取标签下用户信息失败");
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getRightUser() {
|
|
|
- this.loading = true;
|
|
|
- selectPhoneList({
|
|
|
- labelId: this.activeNames,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
- this.customerLabelList = res.rows;
|
|
|
- this.loading = false;
|
|
|
+ this.notCustomerLabelList = res.data.notCustomerLabelList;
|
|
|
+ this.customerLabelList = res.data.phoneList;
|
|
|
} else {
|
|
|
- this.customerLabelList = [];
|
|
|
throw new Error("");
|
|
|
}
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.loading = false;
|
|
|
this.error = true;
|
|
|
- this.customerLabelList = [];
|
|
|
- this.notCustomerLabelList = [];
|
|
|
- this.msgError("拉取数据失败,请刷新重试");
|
|
|
+ this.msgError("拉取标签下用户信息失败");
|
|
|
});
|
|
|
},
|
|
|
- getList() {
|
|
|
+ getLeftUser(id) {
|
|
|
+
|
|
|
+ },
|
|
|
+ toggleLabel(){
|
|
|
+ console.log('hahaha');
|
|
|
+ },
|
|
|
+ getRightUser() {
|
|
|
+ this.loading = true;
|
|
|
+
|
|
|
+ },
|
|
|
+ getLabelList() {
|
|
|
return sysDeptDemoList().then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
this.labelList = res.data;
|
|
@@ -159,24 +389,28 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- transfer(originlArr, direction, changeArr) {
|
|
|
- const query = {
|
|
|
- labelId: this.activeNames,
|
|
|
- flag: "1",
|
|
|
- phoneList: changeArr,
|
|
|
- };
|
|
|
- if (direction == "right") {
|
|
|
- query.flag = "0";
|
|
|
- } else if (direction == "left") {
|
|
|
- query.flag = "1";
|
|
|
- }
|
|
|
- addAndDelCustomerLabel(query).then((res) => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.getRightUser();
|
|
|
- } else {
|
|
|
- }
|
|
|
- });
|
|
|
+ handleRight(row) {
|
|
|
+ console.log(row)
|
|
|
},
|
|
|
+ // transfer(originlArr, direction, changeArr) {
|
|
|
+
|
|
|
+ // const query = {
|
|
|
+ // labelId: this.activeNames,
|
|
|
+ // flag: "1",
|
|
|
+ // phoneList: changeArr,
|
|
|
+ // };
|
|
|
+ // if (direction == "right") {
|
|
|
+ // query.flag = "0";
|
|
|
+ // } else if (direction == "left") {
|
|
|
+ // query.flag = "1";
|
|
|
+ // }
|
|
|
+ // addAndDelCustomerLabel(query).then((res) => {
|
|
|
+ // if (res.code == 200) {
|
|
|
+ // this.getRightUser();
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -184,7 +418,7 @@ export default {
|
|
|
<style lang="scss">
|
|
|
.Label_AddUser {
|
|
|
.collapse {
|
|
|
- width: 800px;
|
|
|
+ width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
|
|
|
//.el-collapse-item__wrap {
|