GB28181-Server/web_src/components/CloudRecordChannelList.vue

<template>
<div class="box box-primary ids">
    <div class="box-header">
        <h4 class="text-primary text-center">云端录像通道列表</h4>
    </div>
    <div class="box-body">
        <div class="form-inline">
            <div class="form-group form-group-sm">
                <label>搜索</label>
                <input type="text" class="form-control" placeholder="关键字" v-model.trim="q" @keydown.enter.prevent ref="q">
            </div>
        </div>
        <br>
        <div class="clearfix"></div>
        <el-table :data="pageData" stripe :default-sort="{prop: 'serial', order: 'ascending'}" @sort-change="sortChange">
            <el-table-column min-width="250" label="设备国标编号" prop="serial" show-overflow-tooltip sortable="custom"></el-table-column>
            <el-table-column min-width="250" label="通道国标编号" prop="code" show-overflow-tooltip sortable="custom"></el-table-column>
            <!-- <el-table-column min-width="200" label="通道名称" prop="name" show-overflow-tooltip></el-table-column> -->
            <el-table-column min-width="160" label="操作" :fixed="!isMobile() ? 'right' : undefined">
                <template slot-scope="scope">
                    <div class="btn-group btn-group-xs">
                    <router-link :to="`/cloudrecord/timeview/${scope.row.serial}/${scope.row.code}`" class="btn btn-info">
                        <i class="fa fa-file-video-o"></i> 查看录像
                    </router-link>
                    <a role="button" class="btn btn-danger" @click.prevent="remove(scope.row)" v-if="hasAnyRole(serverInfo, userInfo, '管理员')">
                        <i class="fa fa-remove"></i> 删除
                    </a>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="box-footer clearfix" v-if="total > 0">
        <el-pagination layout="prev,pager,next" class="pull-right" :total="total" :page-size.sync="pageSize" :current-page.sync="page"></el-pagination>
    </div>
</div>
</template>

<script>
import Vue from 'vue'
import {
    mapState
} from 'vuex'
import _ from 'lodash'
import $ from 'jquery'
import moment from 'moment'

export default {
    data() {
        return {
            pageSize: 10,
            q: "",
            page: 1,
            pageData: [],
            total: 0,
            sort: '',
            order: ''
        }
    },
    mounted() {
        // this.$refs['q'].focus();
        // this.load(); //load when sort change
    },
    computed: {
        ...mapState(['serverInfo', 'userInfo'])
    },
    methods: {
        ready(){
            this.$watch('q', function() {
                this.doDelaySearch();
            });
            this.$watch('page', function(val) {
                this.doSearch(val);
            });
        },
        load() {
            $.get('/api/v1/cloudrecord/querychannels', {
                start: (this.page - 1) * this.pageSize,
                limit: this.pageSize,
                q: this.q,
                sort: this.sort,
                order: this.order
            }).then(data => {
                this.pageData = data.rows;
                this.total = data.total;
            })
        },
        sortChange(data) {
            this.sort = data.prop;
            this.order = data.order;
            this.load();
        },
        selectDevice(id) {
            this.$emit("select-device", id);
        },
        doSearch(page = 1) {
            var query = {};
            if (this.q) query["q"] = this.q;
            this.$router.replace({
                path: `/cloudrecord/${page}`,
                query: query
            });
        },
        doDelaySearch: _.debounce(function () {
            this.doSearch();
        }, 500),
        async remove(row) {
            this.$confirm(`删除 ${row.name} ,会将设备所有录像删除，确认继续?`, '提示').then(() => {
                $.get('/api/v1/cloudrecord/removechannel', {
                    serial: row.serial,
                    code: row.code,
                }).always(() => {
                    this.load();
                })
            }).catch(() => {})
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.q = to.query.q || "";
            vm.page = parseInt(to.params.page) || 1;
            vm.ready();
        })
    },
    beforeRouteUpdate(to, from, next) {
        next();
        this.$nextTick(() => {
            this.q = to.query.q || "";
            this.page = parseInt(to.params.page) || 1;
            this.pageData = [];
            this.load();
        })
    }
}
</script>