qa-regulatory-gwj-vue/src/views/keyprojects/platformelectronic/components/platformvideo.vue

<template>
  <el-dialog
    v-if="visible"
    :visible.sync="visible"
    :before-close="handleClose"
    :append-to-body="true"
    title="固定摄像头"
    width="60%">
    <div class="app-container">
      <div class="filter-container">
        <el-form>
          <el-row :gutter="20">
            <el-col :span="6">  <el-form-item label="视频名称">
              <el-input v-model="KEYWORDS" placeholder="请输入关键字" class="filter-item" style="width: 150px;"/>
            </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item >
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                  搜索
                </el-button>
                <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        v-loading="listLoading"
        ref="multipleTable"
        :data="varList"
        :row-key="getRowKey"
        :header-cell-style="{
          'font-weight': 'bold',
          'color': '#000'
        }"
        tooltip-effect="dark"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          :reserve-selection="true"
          type="selection"
          width="55"
          align="center"/>
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="name" label="视频名称" />
        <el-table-column prop="regionName" label="区域" />
        <el-table-column label="操作" align="left" width="500">
          <template slot-scope="{row}">
            <el-button v-show="row.in !== 1" type="success" icon="el-icon-caret-right" size="mini" @click="selectVideo(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-btn-group">
        <div/>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeWindow">关 闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves'
export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      config: config,
      visible: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      total: 0,
      KEYWORDS: '',
      varList: [],
      allCodes: []
    }
  },

  methods: {
    async init() {
      this.visible = true
      this.varList = []
      this.KEYWORDS = ''
      this.getList()
    },
    getRowKey(row) {
      return row.PLATFORMVIDEOMANAGEMENT_ID
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },

    getAllList() {
      return new Promise(resolve => {
        requestFN(
          '/videomanager/list?showCount=1000&currentPage=1',
          {
            OUTSOURCED_ID: this.$parent.$parent.OUTSOURCED_ID
          }
        ).then((data) => {
          const tempList = data.varList
          const allCodes = []
          tempList.forEach(item => {
            allCodes.push(item.INDEXCODE)
          })
          this.allCodes = allCodes
          resolve()
        }).catch((e) => {
        })
      })
    },

    // 获取列表
    getList() {
      this.listLoading = true
      requestFN(
        '/platformvideomanagement/platformList',
        {
          'pageNo': this.listQuery.page,
          'pageSize': this.listQuery.limit,
          'name': this.KEYWORDS
        }
      ).then((res) => {
        this.listLoading = false
        const tempList = res.data.list
        this.varList = tempList
        this.total = res.data.total
      }).catch((e) => {
        this.listLoading = false
      })
    },

    selectVideo(row) {
      this.$emit('handleSelected', row)
      this.closeWindow()
    },

    goKeyReset() {
      this.KEYWORDS = ''
      this.getList()
    },

    handleClose() {
      this.visible = false
    },
    closeWindow() {
      this.handleClose()
    }
  }

}

</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>