web/src/views/educational/division/components/satisfy.vue

<script setup lang="ts">
  import { useModalInner, BasicModal } from '/@/components/Modal';
  import { PageWrapper } from '/@/components/Page';
  import { useTable, BasicTable, TableAction } from '/@/components/Table';
  import { reactive, ref } from 'vue';
  import { Recordable } from 'vite-plugin-mock';
  import {
    getBandingTaskClassSatisfyStudent,
    postBandingTaskClassRemoveStudent,
  } from '/@/services/apis/BandingTaskClassController';
  import { tableSatisfyColumns } from '../data.config';

  const modelRef = ref<Recordable>({});

  const emit = defineEmits(['success', 'register']);
  const searchInfo = reactive<Recordable>({});

  const [registerTable, { reload }] = useTable({
    api: getBandingTaskClassSatisfyStudent,
    title: '满足学生列表',
    rowKey: 'id',
    columns: tableSatisfyColumns,
    useSearchForm: false,
    showTableSetting: true,
    bordered: true,
    immediate: false,
    canResize: true,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const [registerModal, { setModalProps }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    modelRef.value = { ...data.baseData };
    searchInfo.bandingTaskClassId = data.baseData.id;
    reload();
  });

  const handleDelete = async (record: Recordable) => {
    await postBandingTaskClassRemoveStudent({
      bandingTaskClassId: modelRef.value.id,
      newStudentIds: [record.id],
    });
    reload();
  };

  const handleCancel = () => {
    emit('success');
  };
</script>

<template>
  <BasicModal
    :destroyOnClose="true"
    :maskClosable="false"
    v-bind="$attrs"
    @register="registerModal"
    :width="1002"
    title="满足学生"
    :footer="null"
    @cancel="handleCancel"
  >
    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
      <BasicTable @register="registerTable" :searchInfo="searchInfo">
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '移出',
                onClick: handleDelete.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </PageWrapper>
  </BasicModal>
</template>

<style scoped lang="less"></style>