wechatmsg.vue

<template>
	<div class="bloc-wrapper manage-container msg-wrapper">
		<el-row class="manage-head-wrapper">
			<el-col :span="24">
                <!-- <div class="manage-input-box">
					<el-input v-model="uname" class="search-inp"
						:placeholder="$t('table.username') + '/' + $t('table.name')" clearable />
				</div> -->
				<!-- <div class="manage-input-box">
					<span class="condition-item-text">接收人：</span>
					<el-select clearable filterable v-model="userUnid"
                        :placeholder="$t('pholder.select')" class="mall-sel-box">
                        <el-option v-for="item in userList" :key="item.id" :label="item.realName"
                            :value="item.unid"></el-option>
                    </el-select>
				</div> -->
                <div class="manage-input-box">
                  <!-- 广场/门店列表 -->
                  <span class="condition-item-text">门店列表：</span>
                  <el-select v-model="context" filterable :placeholder="$t('pholder.shopSelect')" clearable>
                    <el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.name" />
                  </el-select>
                </div>
				<div class="manage-input-box">
					<span class="condition-item-text">消息类型：</span>
					<el-select clearable filterable v-model="messageType"
                        :placeholder="$t('pholder.select')" class="mall-sel-box">
                        <el-option v-for="item in messageTypeList" :key="item[0]" :label="item[1]"
                            :value="item[0]"></el-option>
                    </el-select>
				</div>
                <!-- <div class="manage-input-box">
					<span class="condition-item-text">消息内容：</span>
					<el-input clearable filterable v-model="context"
                        placeholder="请输入关键词" class="search-inp"></el-input>
				</div> -->
				<div class="manage-input-box">
					<span class="condition-item-text">日期：</span>
					<el-date-picker
                                class="date-input analysis-date-input times-box"
                                v-model="customTime"
                                value-format="yyyy-MM-dd"
                                align="right"
                                type="daterange"
                                size="mini"
                                :picker-options="pickerOptions"
                                range-separator="-"
                                :start-placeholder="$t('pholder.startDate')"
                                :end-placeholder="$t('pholder.endDate')">
                            </el-date-picker>
				</div>
				
				<el-button type="primary" class="search-btn" @click="searchFun">{{ $t('button.search') }}</el-button>
			</el-col>
			<el-col :span="6">
				<!-- <el-button
          type="primary"
          class="manage-add-btn"
          size="mini"
          @click="addUserHandle"
          icon="el-icon-circle-plus-outline"
        >{{$t('button.addUser')}}</el-button> -->
			</el-col>
		</el-row>
		<el-row class="manage-content">
			<el-col :span="24">
				<el-table :data="tableData" :max-height="tableHeight" style="width: 100%"
					header-row-class-name="manage-tab-head" v-loading='loading'>
					<el-table-column prop="tabOrder" align="center" :label="$t('table.order')" width="60">
					</el-table-column>
					<el-table-column prop="realName" align="center" width="100" label="接收人"></el-table-column>
					<el-table-column prop="messageText" align="center" width="180" label="消息类型"></el-table-column>
					<el-table-column prop="content" align="center" label="消息内容">
                        <template #default="{ row }">
						    <p style="font-weight: 600;" v-html="row.context.first.value"></p>
							<p v-html="row.content"></p>
						</template>
                    </el-table-column>
					<!-- <el-table-column prop="context.remark.value" align="center" label="备注">
                        <template #default="{ row }">
							<p v-html="row.context.remark.value"></p>
						</template>
                    </el-table-column> -->
					<el-table-column prop="sendTime" align="center" width="180" label="发送日期"></el-table-column>
					<el-table-column prop="sendStatus" align="center" width="100" label="发送状态">
						<template #default="{ row }">
							{{ row.sendStatus > 0 ? '已发送' : '发送失败' }}
						</template>
					</el-table-column>
					<el-table-column prop="readStatus" align="center" width="100" label="阅读状态">
						<template #default="{ row }">
							{{ row.readStatus > 0 ? '已读' : '未读' }}
						</template>
					</el-table-column>
					<el-table-column prop="dealContext" align="center" label="回复内容">
						<template #default="{ row }">
							{{ row.dealContext }}
						</template>
					</el-table-column>
					<!-- <el-table-column prop="loginName" align="center" :label="$t('table.username')"></el-table-column>
          <el-table-column prop="realName" align="center" :label="$t('table.name')"></el-table-column>
          <el-table-column
            prop="accountId"
            :formatter="accnameFormat"
            align="center"
            :label="$t('table.merchant')"
          ></el-table-column>
          <el-table-column prop="createTime" align="center" :label="$t('table.CreatTime')"></el-table-column>
          <el-table-column
            prop="status"
            align="center"
            :label="$t('table.Userstate')"
            :formatter="statusFormatter"
          >
          </el-table-column> -->
					<el-table-column :label="$t('table.operate')" width="100" align="center">
						<template slot-scope="scope">
							<el-button @click="detailRow(scope.row)" type="text" size="small" class="tab-btn">
								{{ $t('button.details') }}</el-button>
						</template>
					</el-table-column> 
				</el-table>
				<el-pagination class="manage-pagination-box" background :current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @size-change="sizeChange"
					@current-change="currentChange" layout="sizes, prev, pager, next, slot" :total="total">
					<span class="slot-ele-total">{{ $t('table.pageHead') }} {{ total }} {{ $t('table.pageTail') }}</span>
				</el-pagination>
			</el-col>
		</el-row>
		<msg-detail-dialog ref="detailRef"></msg-detail-dialog>
	</div>
</template>

<script>
import _ from 'underscore';
import msgDetail from "./msg";
const messageTypeObjAll = {
    face_count_analyze:'报表_客群分时统计',
	gate_data_fluctuate:'监控点数据异常波动',
	other_gate_minute_warn:'非外围监控点分钟级别告警',
	gate_minute_warn:'外围监控点分钟级别告警',
	face_analyze:'报表_门店客群统计',
	mall_day_warn:'商场天级别告警',
	mall_hour_warn:'商场小时级别告警',
	mall_minute_warn:'商场分钟级别告警',
	floor_day_warn:'楼层天级别告警',
	floor_hour_warn:'楼层小时级别告警',
	floor_minute_warn:'楼层分钟级别告警',
	gate_day_warn:'监控点天级别告警',
	gate_hour_warn:'监控点小时级别告警',
	zone_day_warn:'店铺天级别告警',
	zone_hour_warn:'店铺小时级别告警',
	zone_minute_warn:'店铺分钟级别告警',
	mall_day_push:'商场天级别推送',
	mall_hour_push:'商场小时级别推送',
	mall_minute_push:'商场分钟级别推送',
	floor_day_push:'楼层天级别推送',
	floor_hour_push:'楼层小时级别推送',
	floor_minute_push:'楼层分钟级别推送',
	gate_day_push:'监控点天级别推送',
	gate_hour_push:'监控点小时级别推送',
	gate_minute_push:'监控点分钟级别推送',
	zone_day_push:'店铺天级别推送',
	zone_hour_push:'店铺小时级别推送',
	zone_minute_push:'店铺分钟级别推送',
	device_status:'设备上线离线告警',
	main_store_day_push:'主力店铺数据推送',
	contract_remind:'合同签约提醒',
	mall_hour_count_data:'报表_小时级基础统计'
};
const messageTypeObj = {
    mall_minute_warn:'商场级别告警',
    gate_minute_warn:'外围监控点告警',
    other_gate_minute_warn:'非外围监控点告警',
    gate_data_fluctuate:'监控点数据波动异常',
    contract_remind:'合同签约提醒',
};
let nowDate = dateUnit.dateFormat(new Date(),'yyyy-MM-dd');
export default {
	components: {
       'msg-detail-dialog':msgDetail
	},
	data() {
		return {
			userUnid:'',
			pagesizeArr: [10, 20, 50, 100],
			messageType:'',
            context:'',
			pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
			customTime:[nowDate,nowDate],
			messageTypeList:[[0,'全部'],...Object.entries(messageTypeObj)],
			tableData: [],
			total: 0,
			pageSize: 10,
			currentPage: 1,
			userList: [],
            mallListForTerm:[],
            loading:true
		};
	},
	computed: {
		tableHeight() {
			const windowInnerHeight = window.innerHeight;
			return windowInnerHeight - windowInnerHeight * 0.24;
		},
		isSup() {
			const userType = this.$cookie.get("user_type");
			return userType === "super" ? true : false;
		},
		isSupOrAdmin() {
			const userType = this.$cookie.get("user_type");
			return userType === "super" || userType === "admin" ? true : false;
		}
	},
	created(){
       this.getUsers();
       this.mallFetch()
	},
	mounted() {
		this.getTableData();
		
	},
	methods: {
        mallFetch() {
          this.mallListForTerm = [];
          this.mallValue = "";
            this.$api.base.mall(
             {
               accountId: this.$cookie.get("accountId"),
               status_arr: "1,3"
             },
             null,
             true
           )
           .then(data => {
             let result = data.data;
             this.mallListForTerm = result.data;
           })
        },
		getUsers() {
			let accountId = this.$cookie.get("accountId")
			return this.$api.management.userList({ page: 1, pageSize: 1000, accountId }).then(data => {
                data.data.data.list.unshift({
                    id:0,
                    realName:'全部',
                    userUnid:''
                });
				this.userList = data.data.data.list;
			})
		},
		async getTableData() {
			this.tableData = [];
			if(this.userList.length==0){
				await this.getUsers();
			}
			let tabelParams = {
				accountId: this.$cookie.get("accountId"),
				pageNum: this.currentPage,
				pageSize: this.pageSize
			};
            if(this.userUnid){
                tabelParams.userUnid = this.userUnid
            }
			if(this.messageType){
				tabelParams.messageTypeKey = this.messageType
			}
            if(this.context){
                tabelParams.context = this.context
            }
			if(this.customTime){
                tabelParams.timeGte = this.customTime[0] + ' 00:00:00';
				tabelParams.timeLte = this.customTime[1] + ' 23:59:59';
			}
            this.loading = true;
			this.$api.management.wechatList(tabelParams)
				.then(data => {
					const result = data.data;
                    this.loading = false
					result.data.list.forEach((item, index) => {
						item.context = JSON.parse(item.context);
						item.messageText = messageTypeObjAll[item.messageTypeKey];
						item.tabOrder = (this.currentPage - 1) * this.pageSize + index + 1;
						//item.toUser = _.findWhere(this.userList,{unid:item.userUnid})||{};
                        item.content = _.compact(_.map(_.range(1,11),index=>{
                            let keyword = item.context['keyword'+index];
                            return keyword&&keyword.value||null;
                        })).join('<br>');
					})
                    
					this.tableData = result.data.list;
					this.total = result.data.total
				})
				.catch(error => { });
		},
		// 切换每页
		sizeChange(val) {
			this.pageSize = val;
			this.currentPage = 1
			this.getTableData()
		},
		// 切换分页
		currentChange(val) {
			this.currentPage = val;
			this.getTableData()
		},
		//点击详情弹框
		detailRow(row) {
			let json = JSON.parse(JSON.stringify(row));
			this.$refs.detailRef.dialogInit(json);
		},

		// 删除用户
		deleteRow(row) {
			this.$confirm(this.$t("message.confirDelete"), this.$t("button.delete"), {
				confirmButtonText: this.$t("message.confirm"),
				cancelButtonText: this.$t("message.cancel"),
				type: "warning"
			})
				.then(() => {
					this.$api.management.deleteUser(row.id)
						.then(res => {
							if (res.data.code == 200) {
								this.$message({
									showClose: true,
									type: "success",
									message: this.$t("message.deleteSuccess")
								});
								this.getTableData();
							} else {
								this.$message({
									showClose: true,
									type: "error",
									message: res.data.msg
								});
							}

						})
						.catch(err => {
							this.$message({
								showClose: true,
								type: "error",
								message: this.$t("message.deleteFailed")
							});
						});
				})
				.catch(action => { });
		},
		// 搜索
		searchFun() {
			this.currentPage = 1;
			this.pageSize = 10;
			this.getTableData()
		}
	}
};
</script>

<style lang="less">
.bloc-wrapper {
	width: 100%;
	height: 100%;
	font-size: 13px;
}

.all-permission {
	line-height: 28px;
}
.msg-wrapper {
   h1 {text-align: center;}    table {
      border-collapse: collapse;
      margin: 0 auto;
      text-align: center;
    }

    table td,
    table th {
      border: 1px solid #cad9ea;
      color: #666;
      height: 30px;
    }

    table thead th {
      background-color: #CCE8EB;
      padding: 0 12px;
    }

    table tr:nth-child(odd) {
      background: #fff;
    }

    table tr:nth-child(even) {
      background: #F5FAFA;
    }
}
 
  
</style>