client-admin/src/render/views/BaseDataConfig/CardImport.vue

<template>
  <div class="card-import">
    <qm-low-form :fields="fields"></qm-low-form>

    <a-table
      :data-source="dataList"
      :columns="columns"
      size="middle"
      bordered
      :loading="loading"
      :pagination="pagination"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <qm-button type="link" @click="editRow(record)">修改</qm-button>
          <qm-button type="link" @click="deleteRow(record)">删除</qm-button>
        </template>
      </template>
    </a-table>
    <AddCardDialog
      v-model="showAddDialog"
      v-if="showAddDialog"
      :cur-row="curRow"
    ></AddCardDialog>
    <ImportCardDialog
      v-model="showImportCardDialog"
      v-if="showImportCardDialog"
    ></ImportCardDialog>
  </div>
</template>
<script name="CardImport" lang="ts" setup>
import { ref, computed, reactive } from "vue";
import AddCardDialog from "./AddCardDialog.vue";
import type { TableColumnsType } from "@qmth/ui";
import useTable from "@/hooks/useTable";
import { getCardList } from "@/ap/baseDataConfig";
import { useUserStore } from "@/store";
import ImportCardDialog from "./ImportCardDialog.vue";

const userStore = useUserStore();

const showImportCardDialog = ref(false);
const showAddDialog = ref(false);
const curRow = ref(null);
const editRow = (row: any) => {
  curRow.value = row;
  showAddDialog.value = true;
};
const fields = ref([
  {
    type: "buttons",
    children: [
      {
        text: "导入卡格式",
        attrs: {
          style: { marginLeft: 0 },
          onClick: () => {
            showImportCardDialog.value = true;
          },
        },
      },
      {
        text: "新增卡格式",
        attrs: {
          type: "default",
          onClick: () => {
            showAddDialog.value = true;
          },
        },
      },
    ],
  },
]);

const { dataList, pagination, loading, getList, toPage } = useTable(
  getCardList,
  { examId: userStore.curExam?.id },
  true
);
const columns: TableColumnsType = [
  {
    title: "编号",
    dataIndex: "number",
    key: "index",
    width: 100,
  },
  {
    title: "科目",
    dataIndex: "subjectName",
  },
  {
    title: "属性",
    dataIndex: "parameter",
  },
  {
    title: "张数",
    dataIndex: "paperCount",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
  },
  {
    title: "操作",
    key: "operation",
    width: 300,
  },
];
const deleteRow = (row: any) => {
  window.$confirm({
    title: () => "系统通知",
    content: () => "请确认是否立即删除？",
    onOk() {
      //todo 执行删除接口
    },
  });
};
</script>
<style lang="less" scoped>
.card-import {
  padding: 0 20px 20px 20px;
}
</style>