--demand 面授课

src/components/common/BaseTable.vue

@@ -0,0 +1,134 @@
+<template>
+  <a-table
+    :customRow="customRow"
+    class="ant-table-striped"
+    :row-class-name="(_, index) => (index % 2 === 1 ? 'table-striped' : null)"
+    row-key="id"
+    :columns="columns"
+    :data-source="data"
+    :loading="loading"
+    :pagination="pagination"
+    :row-selection="rowSelection"
+  />
+</template>
+<script setup>
+import {defineProps, defineExpose, ref, computed, onMounted, defineEmits} from "vue";
+import {useRowsPageNoInit} from "@/api/request";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: ""
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  url: {
+    type: String,
+    default: ""
+  },
+  params: {
+    type: Object,
+    default: () => ({})
+  },
+  init: {
+    type: Boolean,
+    default: true
+  },
+  request: {
+    type: Function,
+    default: useRowsPageNoInit
+  }
+});
+const emit = defineEmits(["update:params", "update:selectedRowKeys", "update:selectedRows"]);
+const rowSelectKeys = ref([]);
+const selectsData = ref([]);
+const params = ref({ pageNo: 1, pageSize: 10 });
+const postParam = computed(() => ({ ...params.value, ...props.params }));
+
+const { data, loading, total, fetch } = props.request(props.url, postParam);
+
+const rowSelection = computed(() => (props.type ? {
+  type: props.type,
+  columnWidth: 20,
+  selectedRowKeys: rowSelectKeys.value,
+  onChange: onSelectChange,
+  preserveSelectedRowKeys: true,
+} : null));
+
+const customRow = (record) => ({
+  onClick: () => {
+    if (props.type === "checkbox") {
+      if (rowSelectKeys.value.some(t => t === record.id)) {
+        rowSelectKeys.value = rowSelectKeys.value.filter(t => t !== record.id);
+        selectsData.value = selectsData.value.filter(t => t.id !== record.id);
+      } else {
+        rowSelectKeys.value.push(record.id);
+        selectsData.value.push(record);
+      }
+    } else {
+      rowSelectKeys.value = [record.id];
+      selectsData.value = [record];
+    }
+    emit("update:selectedRowKeys", [...rowSelectKeys.value]);
+    emit("update:selectedRows", [...selectsData.value]);
+  }
+});
+
+function onSelectChange(e, l) {
+  rowSelectKeys.value = e;
+  selectsData.value = l;
+  emit("update:selectedRowKeys", e);
+  emit("update:selectedRows", l);
+}
+
+const pagination = computed(() => ({
+  total: total.value,
+  showSizeChanger: false,
+  current: params.value.pageNo,
+  pageSize: params.value.pageSize,
+  onChange: changePagination,
+}));
+const changePagination = (e) => {
+  params.value.pageNo = e;
+  fetch();
+};
+onMounted(() => props.init && fetch());
+
+function reset(v = {}) {
+  params.value = { pageNo: 1, pageSize: 10, ...v };
+  emit("update:params", { ...v });
+  fetch();
+}
+
+function resetSelected() {
+  rowSelectKeys.value = [];
+  selectsData.value = [];
+  emit("update:selectedRowKeys", []);
+  emit("update:selectedRows", []);
+}
+
+function clear() {
+  rowSelectKeys.value = [];
+  selectsData.value = [];
+  params.value = { pageNo: 1, pageSize: 10 };
+  emit("update:params", {});
+  emit("update:selectedRowKeys", []);
+  emit("update:selectedRows", []);
+}
+
+function toLoading() {
+  loading.value = true;
+}
+
+function remove(i) {
+  rowSelectKeys.value.splice(i, 1);
+  selectsData.value.splice(i, 1);
+  emit("update:selectedRowKeys", rowSelectKeys.value);
+  emit("update:selectedRows", selectsData.value);
+}
+
+defineExpose({ fetch, reset, resetSelected, clear, toLoading, remove });
+
+</script>