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

<template>
  <div class="nvr-page">
    <div class="nvr-list">
      <BasicTable
        :columns="columns"
        :data-source="tableData"
        :row-key="(row) => row.code"
        :action-column="actionColumn"
        :pagination="{
          total: total,
          pageSize: pagesize,
          currentPage: page,
          hideOnSinglePage: !tableData,
        }"
        :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">添加</el-button>
        </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 { BasicTable, TableActionIcons, BasicColumn } from '@/components/Table';
import { columns } from './overviewColumns';
import useNvrStore from './store/useNvrList';
import { Plus } from '@element-plus/icons-vue';
import editIcon from '@/assets/images/table/table-edit.png';
import deleteIcon from '@/assets/images/table/table-delete.png';
import CreateDrawer from './components/CreateDrawer.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { nvrData } from './type';
import { storeToRefs } from 'pinia';
import { conditions } from './constant';
const nvrStore = useNvrStore();
const { total, page, pagesize } = storeToRefs(nvrStore);
const { getNvr, addNvr, deleteNvr, updateNvr } = nvrStore;
const tableData = ref<nvrData[]>();
const drawerTitle = ref('添加NVR');
//列表操作
const handleEdit = (record: Recordable) => {
  drawerTitle.value = '编辑NVR';
  const { openDrawer } = createDrawerRef.value;
  openDrawer(record.id);
};
const handleDelete = (record: Recordable) => {
  ElMessageBox.confirm(
    '请确认是否删除NVR设备信息？',
    '该NVR设备已添加相机，删除后将无法查看相关相机的视频回放',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    },
  ).then(() => {
    deleteNvr(record.id);
    tableData.value = getNvr();
    ElMessage({
      message: '删除NVR设备成功.',
      type: 'success',
    });
  });
};
//添加数据
const createDrawerRef = ref();
const openCreateDrawer = () => {
  drawerTitle.value = '添加NVR';
  const { openDrawer } = createDrawerRef.value;
  openDrawer();
};
//操作列
const actionColumn: BasicColumn = reactive({
  width: 200,
  title: '操作',
  prop: 'action',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableActionIcons as any, {
      space: 20,
      color: '#629bf9',
      style: 'img',
      size: 16,
      actionIcons: [
        {
          label: '修改',
          icon: editIcon,
          onClick: handleEdit.bind(null, record.row),
        },
        {
          label: '删除',
          icon: deleteIcon,
          onClick: handleDelete.bind(null, record.row),
        },
      ],
    });
  },
});
const handleFormSubmit = (newData) => {
  addNvr(newData);
  tableData.value = getNvr();
};
const handleFormEdit = (newData) => {
  updateNvr(newData);
  tableData.value = getNvr();
};
const handlePageNumChange = (pageNum) => {
  page.value = pageNum;
  tableData.value = getNvr();
};
const handlePageSizeChange = (size) => {
  pagesize.value = size;
  tableData.value = getNvr();
};
onMounted(() => {
  tableData.value = getNvr();
});
</script>

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