client-mazu/src/pages/checkerManage/deviceManage.vue

<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="名称"
        prop="name">
        <el-input v-model="form.name" clearable></el-input>
      </el-form-item>
      <el-form-item
        label="设备编号"
        prop="uniqueKey">
        <el-input v-model="form.uniqueKey" clearable></el-input>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getList(true)">
          搜索
        </el-button>
        <el-button
          type="primary"
          @click="setBatchScenic(true)">
          批量绑定景点
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <el-tabs v-model="activeName">
        <el-tab-pane
          label="设备列表"
          name="allList">
          <span slot="label">
            全部设备列表
          </span>
          <el-table
            border
            v-loading="loading"
            :data="tableData">
            <el-table-column
              type="index"
              width="50px"
              label="#">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="uniqueKey"
              label="设备编号">
            </el-table-column>
            <el-table-column
              prop="type"
              label="设备类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">手持设备</span>
                <span v-else-if="scope.row.type === 2">闸机</span>
                <span v-else>{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态">
              <template slot-scope="scope">
                <el-switch
                  @change="handelStatusChange($event,scope.row)"
                  v-model="scope.row.status"
                  active-text="启用"
                  inactive-text="禁用"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="ip"
              label="IP">
            </el-table-column>
            <el-table-column
              width="80"
              prop="dayEnter"
              label="当日进">
            </el-table-column>
            <el-table-column
              width="80"
              prop="dayOut"
              label="当日出">
            </el-table-column>
            <el-table-column
              label="绑定的景点">
              <template slot-scope="props">
                <span>{{ props.row.scenicList | getSceneNames }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="最后在线时间">
              <template slot-scope="props">
                <span>{{ props.row.lastOnlineTime | formatTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间">
              <template slot-scope="props">
                <span>{{ props.row.createTime | formatTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="150px"
              label="操作">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  v-if="scope.row.online ===1"
                  @click="openConfigDialog(scope.row)">
                  配置
                </el-link>
                <el-link
                  type="primary"
                  @click="openDialog(scope.row)"
                >
                  编辑
                </el-link>

                <el-link
                  type="primary"
                  @click="deleteChecker(scope.row.id)">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page.sync="form.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="form.pageSize"
            @size-change="handleSizeChange"
            @current-change="getList()"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane
          label="设备配置"
          name="noScenic">
          <span slot="label">
            景点未配置
          </span>
          <el-table
            border
            v-loading="loading"
            :data="tableData">
            <el-table-column
              type="index"
              width="50px"
              label="#">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="uniqueKey"
              label="设备编号">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态">
              <template slot-scope="scope">
                <el-switch
                  @change="handelStatusChange($event,scope.row)"
                  v-model="scope.row.status"
                  active-text="启用"
                  inactive-text="禁用"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="ip"
              label="IP">
            </el-table-column>
            <el-table-column
              width="80"
              prop="dayEnter"
              label="当日进">
            </el-table-column>
            <el-table-column
              width="80"
              prop="dayOut"
              label="当日出">
            </el-table-column>
            <el-table-column
              label="绑定的景点">
              <template slot-scope="props">
                <span>{{ props.row.scenicList | getSceneNames }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="最后在线时间">
              <template slot-scope="props">
                <span>{{ props.row.lastOnlineTime | formatTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间">
              <template slot-scope="props">
                <span>{{ props.row.createTime | formatTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="150px"
              label="操作">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  v-if="scope.row.online ===1"
                  @click="openConfigDialog(scope.row)">
                  配置
                </el-link>
                <el-link
                  type="primary"
                  @click="openDialog(scope.row)"
                >
                  编辑
                </el-link>

                <el-link
                  type="primary"
                  @click="deleteChecker(scope.row.id)">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page.sync="form.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="form.pageSize"
            @size-change="handleSizeChange"
            @current-change="getList()"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 弹框 -->
    <ElDialog
      title="编辑设备"
      width="760px"
      v-model="dialogVisible"
    >
      <DialogEdit
        ref="editDialog"
        :scene-list="scenicList"
        :current-item="currentItem"
        @updateList="getList"
        style="margin-top: 20px"
      ></DialogEdit>
    </ElDialog>

    <ElDialog
      title="批量绑定景点"
      width="500px"
      v-model="batchUpdateDialogVisible"
    >
      <el-form
        inline
        :model="batchUpdateInfo"
        ref="form"
        class="form-wrap"
        label-width="150px"
        style="margin-top: 20px">
        <el-form-item
          label="设备"
          prop="checkerIdList">
          <el-select
            v-model="batchUpdateInfo.checkerIdList"
            filterable
            multiple
            placeholder="请选择">
            <el-option
              v-for="(item, idx) in tableData"
              :key="`checker-${idx}`"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="景点"
          prop="scenicIdList">
          <el-select
            v-model="batchUpdateInfo.scenicIdList"
            filterable
            multiple
            placeholder="请选择">
            <el-option
              v-for="(item, idx) in scenicList"
              :key="`scene-${idx}`"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="margin: 20px; float: right;">
        <el-button @click="batchUpdateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateBatchScenic">确定</el-button>
      </div>
    </ElDialog>
  </div>
</template>

<script>
import { getDeviceList, batchUpdateDeviceScene, updateDevice, deleteChecker } from '@/api/checker'
import ElDialog from '@/components/Dialog'
import DialogEdit from './deviceManage/DialogEdit'
// import ConfigSetting from './deviceManage/ConfigSetting'

export default {
  data () {
    return {
      activeName: 'allList', // 当前选中的tab
      form: {
        name: '', // 名称
        uniqueKey: '', // 设备编号
        withoutScenicFlag: 0, // 是否无景点
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      tableData: [],
      total: 0,
      dialogVisible: false,
      configDialogVisible: false,
      batchUpdateDialogVisible: false,
      batchUpdateInfo: {
        checkerIdList: [],
        scenicIdList: []
      },
      currentItem: {}
    }
  },
  computed: {
    scenicList () {
      return this.$store.state.app.scenicList
    }
  },
  created () {
    this.getList()
  },
  components: {
    ElDialog,
    DialogEdit
  },
  filters: {
    filterOnline (n) {
      return n === 1 ? '在线' : '离线'
    },
    filterInOut (n) {
      switch (n) {
        case 1:
          return '进口'
        case 2:
          return '出口'
        case 3:
          return '双向'
      }
    },
    getSceneNames (list) {
      return list.map(item => item.scenicName).join(',')
    }
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    // 获取通道列表
    getList (goFirst) {
      let params = { ...this.form }

      goFirst && (params.pageNum = 1)
      this.loading = true
      getDeviceList(params).then(res => {
        const list = res.data?.records || []
        this.total = res.data?.total || 0
        this.tableData = list
        this.loading = false
      })
    },
    // 打开弹框
    openDialog (item) {
      this.currentItem = {
        id: item.id,
        name: item.name,
        scenicIdList: item.scenicList.map(item => item.scenicId)
      }
      this.dialogVisible = true
      this.updateSceneList()
    },

    // 打开配置弹框
    openConfigDialog (item) {
      this.configDialogVisible = true
      this.updateSceneList()
    },
    deleteChecker (id, index) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteChecker(id).then(res => {
          this.$message.success('操作成功')
          this.getList()
        })
      }).catch(() => {})
    },
    updateSceneList () {
      this.$store.dispatch('getScenicList')
    },
    setBatchScenic () {
      this.batchUpdateDialogVisible = true
      this.batchUpdateInfo.scenicIdList = []
      this.batchUpdateInfo.checkerIdList = []
      this.updateSceneList()
    },
    updateBatchScenic () {
      batchUpdateDeviceScene(this.batchUpdateInfo).then(res => {
        this.$message.success('操作成功')
        this.batchUpdateDialogVisible = false
        this.getList()
      })
    },
    handelStatusChange (value, item) {
      const newItem = {
        id: item.id,
        status: value,
        name: item.name,
        url: item.url || '',
        scenicIdList: (item.scenicList || []).map(i => i.scenicId)
      }

      updateDevice(newItem).then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    }
  },
  watch: {
    activeName (val) {
      this.form.withoutScenicFlag = val === 'noScenic' ? 1 : 0
      this.form.name = ''
      this.getList(true)
    }
  }
}
</script>

<style scoped>

</style>