|
|
@@ -0,0 +1,428 @@
|
|
|
+<template>
|
|
|
+ <div v-if="pageStatus == 0">配置加载中...</div>
|
|
|
+ <div v-else-if="pageStatus == 1">此页面只对站点用户开发</div>
|
|
|
+ <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
|
|
|
+ >
|
|
|
+ <el-collapse-item
|
|
|
+ :name="ele.id"
|
|
|
+ v-for="(ele, index) in labelList.labelArr"
|
|
|
+ :key="ele.id"
|
|
|
+ >
|
|
|
+ <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"
|
|
|
+ :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 {
|
|
|
+ sysDeptDemoList,
|
|
|
+ selectCustomerLabelInfo,
|
|
|
+ addAndDelCustomerLabel,
|
|
|
+ selectPhoneList,
|
|
|
+ selectNotCustomerLabelInfo,
|
|
|
+} from "@/api/label/label";
|
|
|
+export default {
|
|
|
+ name: "Label_SetLabel",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeNames: undefined,
|
|
|
+ labelList: {},
|
|
|
+ notCustomerLabelList: [],
|
|
|
+ customerLabelList: [],
|
|
|
+ loading: false,
|
|
|
+ error: false,
|
|
|
+ currentLabelId: undefined,
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 = this.leftQuery.labelId){
|
|
|
+ this.leftQuery = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ labelId,
|
|
|
+ customerName: null,
|
|
|
+ phone:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearRightQuery(labelId = this.rightQuery.labelId){
|
|
|
+ console.log(this.rightQuery);
|
|
|
+ this.rightQuery = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ labelId,
|
|
|
+ customerName: null,
|
|
|
+ phone:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ let changeArr = [];
|
|
|
+ val.map((ele) => {
|
|
|
+ changeArr.push(ele.phone);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ init() {
|
|
|
+ this.getLabelList();
|
|
|
+ },
|
|
|
+ setPageStatus() {
|
|
|
+ this.queryPageStatus([2]).then((res) => {
|
|
|
+ this.pageStatus = res;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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 {
|
|
|
+ // throw new Error("");
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // .catch(() => {
|
|
|
+ // this.loading = false;
|
|
|
+ // this.error = true;
|
|
|
+ // this.msgError("拉取标签下用户信息失败");
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ toggleLabel(){
|
|
|
+ console.log('hahaha');
|
|
|
+ },
|
|
|
+
|
|
|
+ getLabelList() {
|
|
|
+ return sysDeptDemoList().then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.labelList = res.data;
|
|
|
+ } else {
|
|
|
+ this.msgError("初始化数据失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 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>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.Label_AddUser {
|
|
|
+ .collapse {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ //.el-collapse-item__wrap {
|
|
|
+ // border-bottom: 1px solid;
|
|
|
+ //}
|
|
|
+
|
|
|
+ .el-transfer-panel {
|
|
|
+ width: 300px;
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-transfer-panel__list.is-filterable {
|
|
|
+ height: 465px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Joe