kd-aiot-frontend-yms/src/views/‌doorSecurity‌/entryExitRecords/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading" style="width: 100%">
      <!-- 搜索表单 -->
      <seekPage :seekList="seekList" :formLength="3" @search="reload"></seekPage>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 375px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        :selection.sync="selection"
        :page-size="20"
        @columns-change="handleColumnChange"
        :cache-key="cacheKeyUrl"
      >
        <template v-slot:deviceName="{ row }">
            <el-link type="primary" :underline="false" @click="openDetail(row)">
                {{ row.deviceName }}
            </el-link>
        </template>
        <!-- 是否正常列 -->
        <template v-slot:isAbnormal="{ row }">
          <el-tag :type="row.isAbnormal == 0 ? 'success' : 'danger'" size="small">
            {{ row.isAbnormal == 0 ? '正常通行' : '异常事件' }}
          </el-tag>
        </template>
        <!-- 操作 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="openDetail(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 查看详情弹窗 -->
    <detail-dialog
      :visible.sync="detailVisible"
      :data="currentRow"
    />
  </div>
</template>

<script>
  import seekPage from '@/BIZComponents/seekPage.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import { listEntryExitRecords } from '@/api/‌doorSecurity‌';
  import detailDialog from './components/detailDialog.vue';

  export default {
    mixins: [tabMixins],
    components: {
      seekPage,
      detailDialog
    },
    data() {
      return {
        loading: false,
        detailVisible: false,
        currentRow: null,
        selection: [],
        cacheKeyUrl: 'eos-entryExitRecords-list',
        columnsVersion: 1
      };
    },
    computed: {
      columns() {
        void this.columnsVersion;
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            width: 60,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            minWidth: 140,
            prop: 'deviceName',
            label: '设备名称',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'deviceName'
          },
          {
            minWidth: 100,
            prop: 'doorNo',
            label: '门号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 140,
            prop: 'ipAddress',
            label: '设备IP',
            align: 'center',
            showOverflowTooltip: true
          },
        //   {
        //     minWidth: 120,
        //     prop: 'personName',
        //     label: '人员姓名',
        //     align: 'center',
        //     showOverflowTooltip: true
        //   },
          {
            minWidth: 110,
            prop: 'isAbnormal',
            label: '是否正常',
            slot: 'isAbnormal',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return cellValue == 0 ? '正常通行' : '异常事件';
            }
          },
          {
            minWidth: 120,
            prop: 'eventType',
            label: '事件类型',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'eventDescription',
            label: '事件描述',
            align: 'center',
            showOverflowTooltip: true
          }, 
          {
            minWidth: 120,
            prop: 'eventTime',
            label: '触发时间',
            align: 'center',
            showOverflowTooltip: true
          },
        //   {
        //     columnKey: 'action',
        //     label: '操作',
        //     width: 120,
        //     align: 'center',
        //     resizable: false,
        //     slot: 'action',
        //     fixed: 'right'
        //   }
        ];
      },
      seekList() {
        return [
          {
            label: '设备名称:',
            value: 'deviceName',
            type: 'input',
            placeholder: '请输入设备名称'
          },
        //   {
        //     label: '门号:',
        //     value: 'doorNo',
        //     type: 'input',
        //     placeholder: '请输入门号'
        //   },
        //   {
        //     label: '人员姓名:',
        //     value: 'personName',
        //     type: 'input',
        //     placeholder: '请输入人员姓名'
        //   },
          {
            label: '是否正常:',
            value: 'isAbnormal',
            type: 'select',
            planList: [
              { value: '0', label: '正常通行' },
              { value: '1', label: '异常事件' }
            ],
            placeholder: '请选择'
          },
          {
            label: '事件类型:',
            value: 'eventType',
            type: 'input',
            placeholder: '请输入事件类型'
          }
        ];
      }
    },
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, where }) {
        const res = await listEntryExitRecords({
          pageNum: page,
          size: limit,
          ...where
        });
        res.count = res.total || 0;
        res.list = res.records || [];
 
        return res
      },

      /* 刷新表格 */
      reload(where = {}) {
        this.$refs.table.reload({ page: 1, where });
      },

      /* 打开查看详情弹窗 */
      openDetail(row) {
        this.currentRow = row || null;
        this.detailVisible = true;
      }
    }
  };
</script>