<template> 
 | 
  <TableLayout :permissions="['business:devices:query']"> 
 | 
    <!-- 搜索表单 --> 
 | 
    <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> 
 | 
      <el-form-item label="会议室" prop="roomId"> 
 | 
        <el-select 
 | 
          v-model="searchForm.roomId" 
 | 
          filterable 
 | 
          clearable 
 | 
          placeholder="请选择会议室" 
 | 
        > 
 | 
          <el-option v-for="item in room" :key="item.id" :value="item.id" :label="item.name" /> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="状态" prop="status"> 
 | 
        <el-select 
 | 
          v-model="searchForm.status" 
 | 
          filterable 
 | 
          clearable 
 | 
          placeholder="请选择会议室" 
 | 
        > 
 | 
          <el-option :key="0" :value="0" label="启用" /> 
 | 
          <el-option :key="1" :value="1" label="禁用" /> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <section> 
 | 
        <el-button type="primary" @click="search">搜索</el-button> 
 | 
        <!-- <el-button type="primary" :loading="isWorking.export" v-permissions="['business:devices:exportExcel']" @click="exportExcel">导出</el-button> --> 
 | 
        <el-button @click="reset">重置</el-button> 
 | 
      </section> 
 | 
    </el-form> 
 | 
    <!-- 表格和分页 --> 
 | 
    <template v-slot:table-wrap> 
 | 
      <ul class="toolbar" v-permissions="['business:devices:create']"> 
 | 
        <li><el-button type="primary" @click="$refs.operaDevicesWindow.open('新建设备')" icon="el-icon-plus" v-permissions="['business:devices:create']">新建</el-button></li> 
 | 
      </ul> 
 | 
      <el-table 
 | 
        v-loading="isWorking.search" 
 | 
        :data="tableData.list" 
 | 
        stripe 
 | 
        border 
 | 
        @selection-change="handleSelectionChange" 
 | 
      > 
 | 
        <el-table-column type="index" prop="index" label="序号" align="center" min-width="50px"></el-table-column> 
 | 
        <el-table-column prop="code" label="门禁ID" align="center" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="name" label="门禁名称" align="center" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="roomName" label="关联会议室" align="center" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="status" label="状态" align="center" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <el-switch 
 | 
              v-model="row.status" 
 | 
              active-color="#13ce66" 
 | 
              inactive-color="#999" 
 | 
              :active-value="0" 
 | 
              :inactive-value="1" 
 | 
              @change="changeStatus(row)" 
 | 
            ></el-switch> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
  
 | 
        <!-- <el-table-column prop="createDate" label="创建时间" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="editor" label="更新人编码" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="editDate" label="更新时间" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="isdeleted" label="是否删除0否 1是" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="remark" label="备注" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="code" label="设备号(不可重复)" min-width="100px"></el-table-column> --> 
 | 
  
 | 
        <el-table-column 
 | 
          v-if="containPermissions(['business:devices:update', 'business:devices:delete'])" 
 | 
          label="操作" 
 | 
          min-width="120" 
 | 
          fixed="right" 
 | 
          align="center" 
 | 
        > 
 | 
          <template slot-scope="{row}"> 
 | 
            <el-button type="text" @click="$refs.operaDevicesWindow.open('编辑设备', row)" icon="el-icon-edit" v-permissions="['business:devices:update']">编辑</el-button> 
 | 
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:devices:delete']">删除</el-button> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
      </el-table> 
 | 
      <pagination 
 | 
        @size-change="handleSizeChange" 
 | 
        @current-change="handlePageChange" 
 | 
        :pagination="tableData.pagination" 
 | 
      ></pagination> 
 | 
    </template> 
 | 
    <!-- 新建/修改 --> 
 | 
    <OperaDevicesWindow ref="operaDevicesWindow" @success="handlePageChange"/> 
 | 
  </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseTable from '@/components/base/BaseTable' 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import OperaDevicesWindow from '@/views/meeting/components/OperaDevicesWindow' 
 | 
import { findList } from '@/api/meeting/rooms' 
 | 
import { updateById } from '@/api/meeting/devices' 
 | 
export default { 
 | 
  name: 'Devices', 
 | 
  extends: BaseTable, 
 | 
  components: { TableLayout, Pagination, OperaDevicesWindow }, 
 | 
  data () { 
 | 
    return { 
 | 
      // 搜索 
 | 
      searchForm: { 
 | 
        id: '', 
 | 
        creator: '', 
 | 
        createDate: '', 
 | 
        editor: '', 
 | 
        editDate: '', 
 | 
        isdeleted: '', 
 | 
        remark: '', 
 | 
        name: '', 
 | 
        code: '', 
 | 
        roomId: '', 
 | 
        status: '' 
 | 
      }, 
 | 
      room: [] 
 | 
    } 
 | 
  }, 
 | 
  provide() { 
 | 
    return { 
 | 
      room: () => this.room 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      module: '设备管理信息表', 
 | 
      api: '/meeting/devices', 
 | 
      'field.id': 'id', 
 | 
      'field.main': 'id' 
 | 
    }) 
 | 
    findList({status:0}) 
 | 
      .then(res => { 
 | 
        this.room = res 
 | 
      }) 
 | 
    this.search() 
 | 
  }, 
 | 
  methods: { 
 | 
    changeStatus(item) { 
 | 
      updateById(item) 
 | 
        .then(() => { 
 | 
          this.$message.success('修改成功') 
 | 
        }) 
 | 
        .catch(e => { 
 | 
        }) 
 | 
        .finally(() => { 
 | 
          this.handlePageChange() 
 | 
        }) 
 | 
    } 
 | 
  }, 
 | 
} 
 | 
  
 | 
</script> 
 |