index.vue

<template>
    <div class="clerk-wrapper queueManagementContainer">
        <div class="header manage-head-wrapper">
            <el-form ref="form" class="boxShadow searchFormSocial" inline>
                <el-form-item :label="$t('table.mall')">
                    <el-select v-model="searchForm.mallId" filterable :placeholder="$t('pholder.select')" @change="mallChange">
                        <el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.areaName')">
                    <el-select v-model="searchForm.cashierAreaId" :placeholder="$t('pholder.areaSelect')" @change="areaChange">
                        <el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.laneName')">
                    <el-select v-model="searchForm.cashierChannelId" clearable :placeholder="$t('pholder.selectLane')">
                       <el-option :label="$t('pholder.all')" value="" />
                        <el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <!--< el-form-item :label="$t('table.alarmType')">
                    <el-select v-model="searchForm.messageType" clearable :placeholder="$t('pholder.selectLane')">
                       <el-option :label="$t('pholder.all')" value="" />
                        <el-option v-for="item in messageTypetData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('table.date')">
                  <el-date-picker
                        v-model="searchForm.countDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    <!-- <el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate" style="width: 100%;"></el-date-picker> -->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
                    <el-button type="primary" class="search-btn" size="mini" plain @click="alarmRulesFun">{{$t('button.alarmRules')}}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="manage-content">
            <div class="asis-table-content boxShadow" v-loading="loading">
              <el-table
                :data="tableData"
                :max-height="tableHeight"
                style="width: 100%;"
                ref="row_table"
                v-loading="loading"
                class="clerk-manage-table"
                header-row-class-name="manage-tab-head"
              >
                <el-table-column :label="$t('table.order')" align="center" type="index" width="100"></el-table-column>
               <!-- <el-table-column :label="$t('table.alarmType')" align="center" prop="messageType" width="160">
                  <template slot-scope="scope">
                      <span>{{scope.row.messageType==0?$t('table.queueLengthAlert'):$t('table.waitTimeAlert')}}</span>
                  </template>
                </el-table-column> -->
                <el-table-column :label="$t('table.laneName')" width="160" align="center" prop="cashierChannelId" :formatter="landFormat"></el-table-column>
                <el-table-column :label="$t('table.messageContent')" align="center" prop="messageContent" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('table.sentDate')" align="center" prop="sendTime" width="160"></el-table-column>
                <el-table-column :label="$t('table.state')" align="center" prop="status" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.status==1?$t('table.sendSuccess'):$t('table.sendFail')}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('table.recipient')" align="center" prop="sendEmail" show-overflow-tooltip>
                </el-table-column>
                <el-table-column :label="$t('table.judgmentStatus')" width="150" align="center" prop="checkStatus">
                    <template slot-scope="scope">
                        <span>{{scope.row.checkStatus===1?$t('table.right'):(scope.row.checkStatus===0?$t('table.wrong'):'')}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('table.judgmentContent')" align="center" prop="remark" show-overflow-tooltip>
                </el-table-column>
                <el-table-column :label="$t('table.operate')" align="center" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" class="tab-btn" @click="getDetail(scope.row)">{{$t('button.look')}}</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="cerrentChange"
                layout="sizes, prev, pager, next, slot"
                :total="total"
              >
                <span
                  class="slot-ele-total"
                >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
              </el-pagination>
            </div>
        </div>
        <add-dialog ref="addModel"></add-dialog>
        <el-dialog :title="$t('allPages.Image')" class="manage-dialog dialog_lj imgDialog" :visible.sync="imgDialogVisible"
            :close-on-click-modal="false" v-if="imgDialogVisible" @close="imgDialogVisible = false">
            <div class="alermForm">
                <el-form :model="alermForm" status-icon ref="alermForm">
                    <el-form-item :label="$t('table.judgmentStatus')" prop="checkStatus">
                        <el-radio v-model="alermForm.checkStatus" label="1">{{$t('table.right')}}</el-radio>
                        <el-radio v-model="alermForm.checkStatus" label="0">{{$t('table.wrong')}}</el-radio>
                    </el-form-item>
                    <el-form-item :label="$t('table.judgmentContent')" prop="remark">
                        <el-input type="textarea" v-model="alermForm.remark"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="height: 600px;overflow: auto;">
                <div v-for="(item,index) in imgArr" :key="index">
                    <el-image  :src='picUrl+item'>
                    </el-image>
                    <p style="line-height: 32px;width: 100%;text-align: right;">
                       {{item.slice(14)}}
                    </p>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="imgDialogVisible = false" class="dialog-btn">{{ $t('dialog.close') }}</el-button>
                <el-button type="primary" @click="alermSubmit('alermForm')" class="dialog-btn dialog-confirm-btn">
                    {{ $t('dialog.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment'
    import addDialog from './addRule.vue'
    export default {
        data() {
            return {
                alermForm:{
                    remark:'',
                    checkStatus:1
                },
                picUrl:'',
              imgArr:[],
              imgDialogVisible:false,
              mallListForTerm:[],
              channelListData:[],
              areaListData:[],
              tableData: [],
              total: 0,
              pageSize: 10,
              currentPage: 1,
              pagesizeArr: [10, 20, 50, 100],
              loading: false,
              searchForm: {
                 mallId: '',
                 cashierAreaId: '',
                 cashierChannelId: '',
                 // messageType:'',
                 countDate: [new Date(),new Date()],
              },
              messageTypetData:[{
                name:this.$t('table.queueLengthAlert'),
                id:'0'
              },{
                name:this.$t('table.waitTimeAlert'),
                id:'1'
              }]
            }
        },
        components:{
            addDialog,
        },
        mounted() {
            this.picUrl = window._vionConfig.picUrl
            this.getMallListForTerm()
        },
        computed: {
            tableHeight() {
                const windowInnerHeight = window.innerHeight;
                return windowInnerHeight - windowInnerHeight * 0.24;
            },
        },
        methods: {
            alermSubmit(){
                this.$api.queueManagementApi.getAlarmMessageLog(this.alermForm)
                  .then((res) => {
                    let result = res.data;
                    if(result.code==200){
                      this.$message({
                        message: this.$t('message.editSuccess'),
                        type: 'success'
                      });
                      this.getTableData();
                      this.$refs.alermForm.resetFields();
                      this.imgDialogVisible = false
                    }else{
                      this.$message({
                        message: result.msg,
                        type: 'error'
                      });
                    }
                  })
            },
            getDetail(row){
                this.alermForm = {
                    id:row.id,
                    checkStatus: row.checkStatus !== '' ? String(row.checkStatus) :'',
                    remark: row.remark
                }
                if(row.screenshotPath){
                    this.imgArr = row.screenshotPath.split(";")
                }
                this.imgDialogVisible = true
            },
            // 广场
            getMallListForTerm() {
                this.mallListForTerm = [];
                this.searchForm.mallId = "";
                this.$api.base.mall({
                    accountId: this.$cookie.get('accountId'),
                    status_arr: "1,3"
                }).then(data => {
                    let result = data.data;
                    if (result.data.length) {
                        if (this.getSessionLocal("mallId")) {
                            this.searchForm.mallId = Number(this.getSessionLocal("mallId"));
                        } else {
                            this.searchForm.mallId = result.data[0].id;
                            this.setSessionLocal("mallId", this.searchForm.mallId);
                        }
                        this.mallListForTerm = result.data;
                    }
                    this.getAreaList();
                })
            },
            mallChange(val) {
                this.setSessionLocal("mallId", val);
                this.searchForm.cashierAreaId = ''
                this.searchForm.cashierChannelId = ''
                this.areaListData = [];
                this.channelListData = [];
                this.getAreaList(val)
            },
            // 区域
            getAreaList(val) {
                this.areaListData = [];
                this.$api.queueManagementApi.getAreaList({
                    mallId: this.searchForm.mallId,
                    pageNum: 1,
                    pageSize: 999999
                }).then(res => {
                    let result = res.data;
                    if (result.code == 200) {
                        if (result.data.list && result.data.list.length > 0) {
                            this.searchForm.cashierAreaId = result.data.list[0].id
                            this.areaListData = result.data.list;
                            this.getChannelList()
                        }
                    }
                })
            },
            areaChange() {
                this.searchForm.cashierChannelId = ''
                this.getChannelList()
            },
            // 通道
            getChannelList() {
                this.channelListData = [];
                this.$api.queueManagementApi.getChannelList({
                    areaId: this.searchForm.cashierAreaId,
                    pageNum: 1,
                    pageSize: 999999
                }).then(res => {
                    let result = res.data;
                    if (result.code == 200) {
                        if (result.data.list && result.data.list.length > 0) {
                            this.channelListData = result.data.list;
                            this.getTableData()
                        }
                    }
                })
            },
            landFormat(row, column, cellValue){
                let result = ''
                this.channelListData.forEach(item=>{
                  if(item.id==cellValue){
                    result = item.name
                  }
                })
                return result
            },
            alarmRulesFun(){
              this.$api.queueManagementApi.getAlarmRulesList({
                  mallId: this.searchForm.mallId,
                  areaId: this.searchForm.cashierAreaId,
                  pageNum: 1,
                  pageSize: 999999
              }).then(res => {
                  let result = res.data;
                  if (result.code == 200) {
                    this.$refs.addModel.dialogInit(result.data.list,this.searchForm.mallId,this.searchForm.cashierAreaId);
                  }
              })
            },
            searchFun(){
                this.currentPage = 1;
                this.getTableData()
            },
            getTableData() {
                this.loading = true;
                this.tableData = [];
                this.$api.queueManagementApi.getAlarmMessageList({
                    mallId: this.searchForm.mallId,
                    cashierAreaId: this.searchForm.cashierAreaId,
                    cashierChannelId: this.searchForm.cashierChannelId,
                    // messageType: this.searchForm.messageType,
                    startDate: moment(this.searchForm.countDate[0]).format('YYYY-MM-DD'),
                    endDate:moment(this.searchForm.countDate[1]).format('YYYY-MM-DD'),
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                }).then(res => {
                    let result = res.data;
                    if(result.code==200){
                       this.tableData = result.data.list;
                       this.total = result.data.total;
                    }
                    this.loading = false;
                })
            },
            sizeChange(val) {
              this.pageSize = val;
              this.getTableData();
            },
            cerrentChange(val) {
              if (this.currentPage != val) {
                this.currentPage = val;
                this.getTableData();
              }
            },
        }
    }
</script>

<style scoped="scoped" lang="less">
    .imgDialog{
        /deep/.el-dialog{
          width: 1000px !important;
        }
        /deep/.el-form-item__label{
            width: 120px !important;
        }  
        /deep/.el-form-item__label+.el-form-item__content{
            width: calc(100% - 160px) !important;
        }
    }
    .searchFormSocial{
        /deep/.el-select{
          width: 180px;
        }
        /deep/.el-form-item__label{
          width: auto !important;
          min-width: 60px;
        }
    }
  /deep/.el-date-editor{
    width: 250px !important;
  }
  /deep/.el-table .cell{
      text-overflow: ellipsis !important;
  }
</style>