sl-sfy-safety/src/views/cameras/nvrlist/NvrList.vue

<template>
  <div class="nvr-page">
    <div class="nvr-list">
      <BasicTable :columns="columns" :data-source="nvrList" :row-key="(row) => row.code" :action-column="actionColumn"
        :pagination="{
          total: total,
          pageSize: pagesize,
          currentPage: page,
          hideOnSinglePage: !nvrList.length,
        }" :tableSetting="{
          size: false,
          redo: false,
          fullscreen: false,
          striped: false,
          setting: false,
        }" :striped="true" ref="tableRef" @page-num-change="handlePageNumChange"
        @page-size-change="handlePageSizeChange">
        <template #tableTitle>
          <el-button type="primary" @click="openCreateDrawer" :icon="Plus" v-permission="{ action: [PERM_DEVICE.NVR_ADD] }">添加</el-button>
        </template>
        <template #empty>
          <div class="empty-content flex flex-col items-center">
            <img :src="emptyImg" class="empty-img" />
            <span class="empty-text">暂未添加NVR设备</span>
          </div>
        </template>
      </BasicTable>
    </div>
    <CreateDrawer ref="createDrawerRef" :title="drawerTitle" @form-submit="handleFormSubmit"
      @form-edit="handleFormEdit" />
  </div>
</template>

<script lang="ts" setup>
import { h, ref, reactive, onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import editIcon from '@/assets/images/table/table-edit.png';
import deleteIcon from '@/assets/images/table/table-delete.png';
import emptyImg from '@/assets/images/table/table-empty.png';
import { columns } from './overviewColumns';
import { BasicTable, TableActionIcons, BasicColumn } from '@/components/Table';
import CreateDrawer from './components/CreateDrawer.vue';
import { deleteNVRListItem, getNVRList, NVRListItemAll } from '@/api/camera/camera-nvr';
import { PERM_DEVICE } from '@/types/permission/constants';
import { useUserStore } from '@/store/modules/user';

const nvrList = ref<NVRListItemAll[]>([]);
const total = ref(0);
const page = ref(1);
const pagesize = ref(10);

const getNvrList = () => {
  const queryForm = {
    pageNumber: page.value,
    pageSize: pagesize.value,
  };
  getNVRList(queryForm).then((res) => {
    total.value = res.totalRow;
    nvrList.value = res.records;
  });
}

const drawerTitle = ref('添加NVR');
const createDrawerRef = ref();
//添加数据
const openCreateDrawer = () => {
  drawerTitle.value = '添加NVR';
  const { openDrawer } = createDrawerRef.value;
  openDrawer();
};
// 编辑
const handleEdit = (row) => {
  drawerTitle.value = '编辑NVR';
  const { openDrawer } = createDrawerRef.value;
  openDrawer(row);
};
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '删除后使用该NVR设备的车间内相关相机历史视频内容将无法查看',
    '请确认是否删除NVR设备信息？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'deleteMessage',
      center: true
    }
  )
    .then(() => {
      deleteNVRListItem(row.id).then(() => {
        ElMessage({
          message: '删除NVR设备成功.',
          type: 'success',
        });
        getNvrList();
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
};

const userStore = useUserStore();

//操作列
const actionColumn: BasicColumn = reactive({
  width: 200,
  title: '操作',
  prop: 'action',
  key: 'action',
  fixed: 'right',
  render(record) {
    const actions: any[] = [];

    if (userStore.checkPermission(PERM_DEVICE.NVR_EDIT)) {
      actions.push({
        label: '修改',
        icon: editIcon,
        onClick: handleEdit.bind(null, record.row),
      });
    }

    if (userStore.checkPermission(PERM_DEVICE.NVR_DELETE)) {
      actions.push({
        label: '删除',
        icon: deleteIcon,
        onClick: handleDelete.bind(null, record.row),
      });
    }

    return h(TableActionIcons as any, {
      space: 20,
      color: '#629bf9',
      iconStyle: 'img',
      size: 16,
      actionIcons: [
        {
          label: '修改',
          icon: editIcon,
          onClick: handleEdit.bind(null, record.row),
          ifShow: userStore.checkPermission(PERM_DEVICE.NVR_EDIT)
        },
        {
          label: '删除',
          icon: deleteIcon,
          onClick: handleDelete.bind(null, record.row),
          ifShow: userStore.checkPermission(PERM_DEVICE.NVR_DELETE)
        }
      ]
    });
  },
});

const handleFormSubmit = () => {
  ElMessage({
    message: '添加NVR设备成功.',
    type: 'success',
  });
  getNvrList();
};

const handleFormEdit = () => {
  ElMessage({
    message: '修改NVR设备成功.',
    type: 'success',
  });
  getNvrList();
};

const handlePageNumChange = (pageNum) => {
  page.value = pageNum;
  getNvrList();
};

const handlePageSizeChange = (size) => {
  page.value = 1;
  pagesize.value = size;
  getNvrList();
};

onMounted(() => {
  getNvrList();
});
</script>

<style lang="scss" scoped>
.nvr-page {
  position: relative;
  height: calc(100vh - 64px - 12px);
  background-color: #ffffff;

  .nvr-list {
    padding: 35px 21px;
  }
}

.empty-content {
  margin: auto;
  padding: 125px 0;
}

.empty-img {
  width: 396px;
}

.empty-text {
  font-size: 22px;
  color: #8e8e8e;
  line-height: 30px;
  text-align: center;
}
</style>
<style lang="scss">
.deleteMessage {
  padding: 20px 24px;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;

  .el-message-box__headerbtn {
    margin-top: 12px;
    margin-right: 12px;
  }

  .el-message-box__title {
    justify-content: start;
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    font-weight: 500;
  }

  .el-message-box__container {
    justify-content: start;
    margin-left: 23px;
  }

  .el-message-box__btns {
    display: block;
    float: right;
  }
}
</style>