|
@@ -12,6 +12,7 @@
|
|
|
class="custom-select"
|
|
|
id="inputGroupSelect01"
|
|
|
style="width: 80px"
|
|
|
+ v-model="queryParams.oilName"
|
|
|
>
|
|
|
<option selected>Choose...</option>
|
|
|
<option value="1">One</option>
|
|
@@ -24,9 +25,7 @@
|
|
|
<div class="input-group input-group-sm flex-nowrap">
|
|
|
<div class="input-group-prepend" style="width: 80px"></div>
|
|
|
<div class="input-group-prepend">
|
|
|
- <span class="input-group-text" id="addon-wrapping"
|
|
|
- >日期:</span
|
|
|
- >
|
|
|
+ <span class="input-group-text" id="addon-wrapping">日期:</span>
|
|
|
<el-date-picker
|
|
|
v-model="dateRangeCreatedDate"
|
|
|
type="datetimerange"
|
|
@@ -61,9 +60,9 @@
|
|
|
<span class="input-group-text" id="addon-wrapping">次</span>
|
|
|
</div>
|
|
|
<div class="input-group-prepend">
|
|
|
- <span class="input-group-text" id="addon-wrapping"
|
|
|
- > < 加油次数 < </span
|
|
|
- >
|
|
|
+ <span class="input-group-text" id="addon-wrapping">
|
|
|
+ < 加油次数 <
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<input
|
|
|
type="text"
|
|
@@ -148,9 +147,9 @@
|
|
|
<span class="input-group-text" id="addon-wrapping">升</span>
|
|
|
</div>
|
|
|
<div class="input-group-prepend">
|
|
|
- <span class="input-group-text" id="addon-wrapping"
|
|
|
- > < 加油升数 < </span
|
|
|
- >
|
|
|
+ <span class="input-group-text" id="addon-wrapping">
|
|
|
+ < 加油升数 <
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<input
|
|
|
type="text"
|
|
@@ -165,16 +164,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <hr/>
|
|
|
+ <hr />
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-sm col-md-8">
|
|
|
<div class="input-group input-group-sm flex-nowrap">
|
|
|
<div class="input-group-prepend" style="width: 80px"></div>
|
|
|
<div class="input-group-prepend">
|
|
|
- <span class="input-group-text" id="addon-wrapping"
|
|
|
- >时间:</span
|
|
|
- >
|
|
|
+ <span class="input-group-text" id="addon-wrapping">时间:</span>
|
|
|
<el-date-picker
|
|
|
v-model="dateRangeCreatedDate"
|
|
|
type="datetimerange"
|
|
@@ -313,17 +310,30 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<hr />
|
|
|
- <el-table :data="labelList" >
|
|
|
+ <el-table :data="userList" @selection-change="selectionChange">
|
|
|
<af-table-column align="center" prop="id" type="selection" />
|
|
|
- <af-table-column label="姓名" align="center" prop="id" />
|
|
|
- <af-table-column label="当前归属的标签" align="center" prop="id" />
|
|
|
- <af-table-column label="手机号" align="center" prop="stationName" />
|
|
|
+ <af-table-column label="姓名" align="center" prop="customerName" />
|
|
|
+ <af-table-column label="当前归属的标签" align="center" prop="labelName">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ class="badge"
|
|
|
+ :class="[
|
|
|
+ scope.row.labelId === null ? 'badge-danger' : 'badge-success',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ scope.row.labelId === null ? "未标记" : scope.row.labelName
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </af-table-column>
|
|
|
+ <af-table-column label="手机号" align="center" prop="phone" />
|
|
|
<af-table-column
|
|
|
label="最后一笔消费时间"
|
|
|
align="center"
|
|
|
- prop="stationName"
|
|
|
+ prop="createDate"
|
|
|
/>
|
|
|
<af-table-column
|
|
|
label="近期详细消费"
|
|
@@ -342,38 +352,122 @@
|
|
|
>
|
|
|
</template>
|
|
|
</af-table-column>
|
|
|
- <af-table-column label="操作" align="center" width="160px">
|
|
|
+ <af-table-column label="操作" align="center" width="160px" fixed="right">
|
|
|
<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
|
|
|
- >
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- icon="el-icon-circle-plus-outline"
|
|
|
- class="underline btn24"
|
|
|
- size="mini"
|
|
|
- @click="handleMoveLabel('right', 1, scope.row)"
|
|
|
- >删除当前标签</el-button
|
|
|
+ <el-dropdown @command="toLabeled">
|
|
|
+ <span class="el-dropdown-link" style="font-size: 12px">
|
|
|
+ 打标签<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item
|
|
|
+ :command="ele.id"
|
|
|
+ v-for="ele in labelList"
|
|
|
+ :key="ele.id"
|
|
|
+ >{{ ele.labelName }}</el-dropdown-item
|
|
|
+ >
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <el-popconfirm
|
|
|
+ title="此操作会将选中用户强制列为无标签状态,是否继续?"
|
|
|
+ confirm-button-text="删除"
|
|
|
+ @onConfirm="toUnLableed"
|
|
|
>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-circle-plus-outline"
|
|
|
+ class="underline btn24"
|
|
|
+ size="mini"
|
|
|
+ slot="reference"
|
|
|
+ >删标签</el-button
|
|
|
+ >
|
|
|
+ </el-popconfirm>
|
|
|
</template>
|
|
|
</af-table-column>
|
|
|
</el-table>
|
|
|
<pagination
|
|
|
- v-show="total > 0"
|
|
|
+ v-show="total > 10"
|
|
|
:total="total"
|
|
|
+ :pageSizes="[10, 50, 100, 200]"
|
|
|
:page.sync="queryParams.pageNum"
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
+ <el-dialog
|
|
|
+ title="打标签"
|
|
|
+ :visible.sync="toLabeledDialog"
|
|
|
+ width="750px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <div v-if="filterSelectedUser.length != 0">
|
|
|
+ <div class="ml-5">
|
|
|
+ 以下成员已经存在标签,如果<b>直接点击确认按钮</b>,以下成员<b>不会拉入此标签</b><span class="badge badge-success ml-1">{{translationLabel(currentLabelId)}}</span>。
|
|
|
+ </div>
|
|
|
+ <div class="ml-5">
|
|
|
+ 想要<b>强制拉入标签</b><span class="badge badge-success ml-1">{{translationLabel(currentLabelId)}}</span>,请<b>先删除这些成员的现有的标签</b>,然后点击确认按钮,即可操作完成。
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="app-container">
|
|
|
+ <el-table
|
|
|
+ :data="filterSelectedUser"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ >
|
|
|
+ <af-table-column align="center" prop="id" type="selection" />
|
|
|
+ <af-table-column label="姓名" align="center" prop="customerName" />
|
|
|
+ <af-table-column
|
|
|
+ label="当前归属的标签"
|
|
|
+ align="center"
|
|
|
+ prop="labelName"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ class="badge"
|
|
|
+ :class="[
|
|
|
+ scope.row.labelId === null
|
|
|
+ ? 'badge-danger'
|
|
|
+ : 'badge-success',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ scope.row.labelId === null ? "未标记" : scope.row.labelName
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </af-table-column>
|
|
|
+
|
|
|
+ <af-table-column label="手机号" align="center" prop="phone" />
|
|
|
+
|
|
|
+ <af-table-column label="操作" align="center" width="160px">
|
|
|
+ <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>
|
|
|
+ </af-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="totalInfo > 0"
|
|
|
+ :total="totalInfo"
|
|
|
+ :page.sync="query.pageNum"
|
|
|
+ :limit.sync="query.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>点击确认按钮,立刻将选中用户拉入标签<span class="badge badge-success ml-1">{{translationLabel(currentLabelId)}}</span>~</div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="handleSubmitLable" size="small">确 定</el-button>
|
|
|
+ <el-button @click="cancelSubmitLabel" size="small">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
<el-dialog
|
|
|
title="1235555"
|
|
|
- :visible.sync="orderOpen"
|
|
|
+ visible.sync="false"
|
|
|
width="750px"
|
|
|
append-to-body
|
|
|
>
|
|
@@ -398,14 +492,6 @@
|
|
|
prop="oilPersonnel"
|
|
|
/>
|
|
|
<af-table-column label="加油枪号" align="center" prop="oilGun" />
|
|
|
- <!--
|
|
|
- <af-table-column
|
|
|
- label="支付类型"
|
|
|
- align="center"
|
|
|
- prop="payType"
|
|
|
- :formatter="payTypeFotmat"
|
|
|
- />
|
|
|
- -->
|
|
|
<af-table-column
|
|
|
label="油站名称"
|
|
|
width="120"
|
|
@@ -463,7 +549,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listRecord } from "@/api/customer/record";
|
|
|
+import { getLabelUser, getLabelList, delUserLabel,addAndDelCustomerLabel } from "@/api/label/label";
|
|
|
|
|
|
export default {
|
|
|
name: "Dzk_Bill",
|
|
@@ -472,17 +558,17 @@ export default {
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
// 客户电子会员卡充值消费记录表格数据
|
|
|
- labelList: [],
|
|
|
+ userList: [],
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- orderNo: null,
|
|
|
- customerNo: null,
|
|
|
- customerName: null,
|
|
|
- usageType: null,
|
|
|
- payType: null,
|
|
|
- cardOilsType: null,
|
|
|
+ // orderNo: null,
|
|
|
+ // customerNo: null,
|
|
|
+ // customerName: null,
|
|
|
+ // usageType: null,
|
|
|
+ // payType: null,
|
|
|
+ // cardOilsType: null,
|
|
|
},
|
|
|
orderList: [{}],
|
|
|
orderOpen: false,
|
|
@@ -499,14 +585,100 @@ export default {
|
|
|
levelId: this.levelId,
|
|
|
},
|
|
|
dateRangeCreatedDate: [],
|
|
|
+ selectedUser: [],
|
|
|
+ checkedUser: [],
|
|
|
+ toLabeledDialog: false,
|
|
|
+ labelList: [],
|
|
|
+ currentLabelId:undefined,
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ filterSelectedUser() {
|
|
|
+ return this.selectedUser.filter((ele) => {
|
|
|
+ return !!ele.labelId && ele.labelId != this.currentLabelId;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
created() {
|
|
|
this.getList();
|
|
|
+ getLabelList()
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.labelList = res.rows;
|
|
|
+ } else {
|
|
|
+ throw new Error("");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.msgError("拉取标签列表失败,请刷新网页~");
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
- selectionChange(selection){
|
|
|
+ handleSubmitLable(){
|
|
|
+ const addArr = []
|
|
|
+ this.selectedUser.map((ele)=>{
|
|
|
+ if(ele.labelId != this.currentLabelId && !ele.labelId )
|
|
|
+ addArr.push(ele.phone)
|
|
|
+ })
|
|
|
+ addAndDelCustomerLabel({
|
|
|
+ labelId: this.currentLabelId,
|
|
|
+ flag: "0",
|
|
|
+ phoneList : addArr
|
|
|
+ }).then((res)=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("批量拉入标签成功~")
|
|
|
+ this.toLabeledDialog = false;
|
|
|
+ }else{
|
|
|
+ throw new Error("");
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ this.msgError("批量拉入标签失败,请刷新网页后重试~")
|
|
|
+ this.toLabeledDialog= false;
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ cancelSubmitLabel(){
|
|
|
+ this.toLabeledDialog = false;
|
|
|
+ },
|
|
|
+ translationLabel(id){
|
|
|
+ console.log(this.labelList);
|
|
|
+ const label = this.labelList.find((ele)=>{
|
|
|
+ return id == ele.id
|
|
|
+ })
|
|
|
+ if(label == undefined){
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return label.labelName;
|
|
|
+ },
|
|
|
+ toUnLableed() {
|
|
|
+ if(this.selectedUser.length == 0){
|
|
|
+ this.msgError("请先选择用户后再进行删除标签~");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const delArr = [];
|
|
|
+ this.selectedUser.map((ele)=>{
|
|
|
+ if(!!ele.phone){
|
|
|
+ delArr.push(ele.phone)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ delUserLabel({phoneList:delArr}).then((res)=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("删除用户标签成功~");
|
|
|
+ }else{
|
|
|
+ throw new Error("")
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ this.msgError("删除用户标签状态失败,请刷新后重试~")
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ selectionChange(selection) {
|
|
|
console.log(selection);
|
|
|
+ this.selectedUser = selection;
|
|
|
},
|
|
|
usageTypeFotmat(row, column) {
|
|
|
if (row.usageType === "+") {
|
|
@@ -530,8 +702,8 @@ export default {
|
|
|
},
|
|
|
/** 查询客户电子会员卡充值消费记录列表 */
|
|
|
getList() {
|
|
|
- listRecord(this.queryParams).then((response) => {
|
|
|
- this.labelList = response.rows;
|
|
|
+ getLabelUser(this.queryParams).then((response) => {
|
|
|
+ this.userList = response.rows;
|
|
|
this.total = response.total;
|
|
|
});
|
|
|
},
|
|
@@ -548,6 +720,14 @@ export default {
|
|
|
orderOpenMethod() {
|
|
|
this.orderOpen = true;
|
|
|
},
|
|
|
+ toLabeled(id) {
|
|
|
+ if (this.selectedUser.length == 0) {
|
|
|
+ this.msgError("请先选择用户后再打标签");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.currentLabelId = id
|
|
|
+ this.toLabeledDialog = true;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -559,4 +739,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.el-dropdown-link {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+.el-icon-arrow-down {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
</style>
|