index.vue 10.9 KB
<template>
    <div class="clerk-wrapper queueManagementContainer">
        <div class="header manage-head-wrapper">
            <el-form ref="form" label-width="100px" inline class="searchForm boxShadow searchFormSocial">
                <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-input v-model="searchForm.name" class="search-inp" :placeholder="$t('pholder.input')" clearable></el-input>
                </el-form-item>
                <el-form-item>
                   <el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
                </el-form-item>
                <div class="btns">
                    <el-button type="primary" size="mini" class="manage-add-btn fl-btn" @click="addClerk">{{$t('button.groupAdd')}}</el-button>
                </div>
            </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.areaName')" align="center" prop="name"></el-table-column>
                <el-table-column :label="$t('table.plan')" align="center" prop="pic">
                    <template slot-scope="scope">
                      <el-popover placement="right" title trigger="hover">
                        <img :src="floorPlanFormatter(scope.row.pic)" width="300" height="300" class="zoomout-img"/>
                        <img slot="reference" :src="floorPlanFormatter(scope.row.pic)" :alt="scope.row.pic" width="50" height="50" class="face-img"/>
                      </el-popover>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('table.areaNumber')" align="center" prop="code"></el-table-column>
                <el-table-column :label="$t('table.areaType')" align="center" prop="type">
                    <template slot-scope="scope">
                        <span>{{scope.row.type==1?$t('pholder.selfService'):$t('pholder.manualCashier')}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('table.areaStatus')" align="center" prop="status">
                    <template slot-scope="scope">
                        <span>{{scope.row.status==0?$t('pholder.state1'):$t('pholder.state2')}}</span>
                    </template>
                </el-table-column>
               <!-- <el-table-column label="QoS" align="center" prop="role_unid">
                    <template slot-scope="scope">
                      <el-button type="text" class="tab-btn" @click="qosConfig(scope.row)">{{$t('asisTab.setting')}}</el-button>
                    </template>
                </el-table-column> -->
                <el-table-column :label="$t('table.deviceBind')" align="center" prop="role_unid">
                    <template slot-scope="scope">
                      <el-button type="text" class="tab-btn" @click="bindRow(scope.row)">{{$t('button.unbind')}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('table.operate')" align="center" min-width="150">
                  <template slot-scope="scope">
                    <el-button type="text" class="tab-btn" @click="permissHandle(scope.row)">{{scope.row.status == 0 ? $t('button.disable') : $t('button.enable')}}</el-button>
                    <el-button type="text" class="tab-btn" @click="editHandle(scope.row)">{{$t('button.edit')}}</el-button>
                    <el-button type="text" class="tab-btn" @click="delHandle(scope.row)">{{$t('button.delete')}}</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>
        <bind-dev-dialog ref="bindDevModel"></bind-dev-dialog>
        <qos-config-dialog ref="qosConfigModel"></qos-config-dialog>
    </div>
</template>

<script>
    import addDialog from './add.vue'
    import bindDevDialog from "./bindDev";
    import qosConfigDialog from './qosConfigDialog.vue'
    export default {
        data() {
            return {
              mallListForTerm:[],
              tableData: [],
              total: 0,
              pageSize: 10,
              currentPage: 1,
              pagesizeArr: [10, 20, 50, 100],
              loading: false,
              searchForm:{
                  mallId:'',
                  name:''
              },
              tableData:[]
            }
        },
        components:{
            addDialog,
            bindDevDialog,
            qosConfigDialog
        },
        mounted() {
            this.getMallListForTerm()
        },
        computed: {
            tableHeight() {
                const windowInnerHeight = window.innerHeight;
                return windowInnerHeight - windowInnerHeight * 0.24;
            },
        },
        methods: {
            floorPlanFormatter(floorPlan) {
              if (floorPlan) {
                var floorPath;
                floorPath = window._vionConfig.picUrl + floorPlan;
                return floorPath;
              } else {
                return defaultImg;
              }
            },
            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.getTableData();
                })
            },
            mallChange(val) {
                this.setSessionLocal("mallId", val);
                this.getTableData();
            },
            addClerk(){
                this.$refs.addModel.dialogInit('add');
            },
            editHandle(row){
                this.$refs.addModel.dialogInit('edit',row);
            },
            delHandle(row) {
              this.$confirm(this.$t("message.delete"), this.$t("message.prompt"), {
                confirmButtonText: this.$t("message.confirm"),
                cancelButtonText: this.$t("message.cancel"),
                type: "warning"
              }).then(() => {
                  this.$api.queueManagementApi.deleteArea({id:row.id}).then(res => {
                      let result = res.data;
                      if(result.code==200){
                        this.$message({
                          message: result.msg,
                          type: 'success'
                        });
                        this.getTableData();
                      }else{
                        this.$message({
                          message: result.msg,
                          type: 'error'
                        });
                      }
                    })
                })
            },
            permissHandle(row){
                this.$api.queueManagementApi.updateArea({
                    id:row.id,
                    status:row.status==1?0:1
                }).then((res) => {
                    let result = res.data;
                    if(result.code==200){
                      this.$message({
                        message: result.msg,
                        type: 'success'
                      });
                      this.getTableData();
                    }else{
                      this.$message({
                        message: result.msg,
                        type: 'error'
                      });
                    }
                  })
            },
            bindRow(row){
                this.$refs.bindDevModel.dialogInit(row);
            },
            qosConfig(row){
                this.$refs.qosConfigModel.dialogInit(row);
            },
            searchFun(){
                this.currentPage = 1;
                this.getTableData()
            },
            getTableData() {
                this.loading = true;
                this.tableData = [];
                this.$api.queueManagementApi.getAreaList({
                    name: this.searchForm.name,
                    mallId: this.searchForm.mallId,
                    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">
    .face-img {
      width: 50px;
      height: 50px;
      cursor: zoom-in;
    }

    .zoomout-img {
      width: auto;
      height: 300px;
    }
    .btns{
        margin-right: 20px;
        margin-top: 7px;
    }
</style>