web/src/views/educational/classLessons/components/edit.vue

<script setup lang="ts">
  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
  import { useModalInner } from '/@/components/Modal';
  import { reactive, ref } from 'vue';
  import BasicTable from '/@/components/Table/src/BasicTable.vue';
  import { BasicColumn, useTable } from '/@/components/Table';
  import {
    getBaseClassCourseGetAllCoursesAndTextbooks,
    getBaseClassCourseGetAllSelectedCoursesAndTextbooks,
    postBaseClassCourseUpdateAddCoursesAndTextbooks,
  } from '/@/services/apis/BaseClassCourseController';
  import { requestMagicApi } from '/@/api/magicApi';
  import { useMessage } from '/@/hooks/web/useMessage';
  const rightSelectedRowKeys = ref<any>([]);
  const selectedKey = ref<any>([]);
  const semesterId = ref('');
  const classIds = ref<any>([]);
  const selectedRow = ref<any>([]);
  const emits = defineEmits(['success', 'register']);
  const isLoading = ref(false);
  const tableColumns = ref<BasicColumn[]>([
    {
      title: '课程名称',
      dataIndex: 'courseName',
      align: 'left',
    },
    {
      title: '教材名称',
      dataIndex: 'bookName',
      align: 'left',
    },
  ]);
  const [allTable] = useTable({
    title: '可选课程',
    bordered: true,
    rowKey: 'id',
    columns: tableColumns as any,
    api: getBaseClassCourseGetAllCoursesAndTextbooks,
    useSearchForm: true,
    showTableSetting: true,
    resizeHeightOffset: 200,
    rowSelection: {
      type: 'checkbox',
      onChange: (selectedRowKeys, selectedRows) => {
        selectedKey.value = selectedRowKeys;
        selectedRow.value = selectedRows;
        setSelectedRowKeys([]);
        const data = getDataSource();
        const addList: any[] = [];
        selectedRow.value.forEach((item: any) => {
          if (!data.find((i: any) => i.id === item.id)) {
            addList.push(item);
          }
        });
        setTableData(data.concat(addList));
        //   筛选出data里面没有的
      },
    },
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          label: '学科组',
          field: 'subjectGroupId',
          component: 'ApiSelect',
          componentProps: {
            getPopupContainer: () => document.body,
            api: requestMagicApi,
            params: { url: '/educational/subjectGroup/list' },
          },
          colProps: { span: 12 },
        },
      ],
    },
    beforeFetch: (params) => {
      return {
        ...params,
        textbookType: searchForm.textbookType,
        bookName: searchForm.bookName,
        baseSemesterId: searchForm.baseSemesterId,
      };
    },
  });
  const [selectTable, { setTableData, getDataSource, setSelectedRowKeys }] = useTable({
    title: '已选课程',
    bordered: true,
    rowKey: 'id',
    columns: tableColumns as any,
    showTableSetting: true,
    resizeHeightOffset: 200,
    pagination: false,
    rowSelection: {
      type: 'checkbox',
      onChange: (selectedRowKeys) => {
        rightSelectedRowKeys.value = selectedRowKeys;
      },
    },
  });

  const searchForm = reactive({
    textbookType: undefined,
    bookName: '',
    baseSemesterId: undefined,
  });
  const [modalRegister, { closeModal }] = useModalInner(async (data) => {
    const ids = data.list.map((item) => item.classId);
    semesterId.value = data.selectId;
    classIds.value = ids;
    searchForm.baseSemesterId = data.baseSemesterId;
    const dataInfo = await getBaseClassCourseGetAllSelectedCoursesAndTextbooks({
      classIds: ids.join(','),
      semester: data.selectId,
    });
    setTableData(dataInfo);
  });
  const handleCancel = () => {
    searchForm.textbookType = undefined;
    searchForm.bookName = '';
    closeModal();
  };
  const handleClear = () => {
    setTableData(
      getDataSource().filter((item: any) => !rightSelectedRowKeys.value.includes(item.id)),
    );
    rightSelectedRowKeys.value = getDataSource().map((item: any) => item.id);
    setSelectedRowKeys(rightSelectedRowKeys.value);
  };
  const { createMessage } = useMessage();
  const handleSubmit = async () => {
    const data = getDataSource();
    const params = {
      baseSemesterId: semesterId.value,
      classIds: classIds.value,
      ids: data.map((item: any) => item.id),
    };
    try {
      isLoading.value = true;
      await postBaseClassCourseUpdateAddCoursesAndTextbooks(params as any);
      createMessage.success('添加成功');
      setTableData([]);
      setSelectedRowKeys([]);
      emits('success');
      closeModal();
    } catch {
      createMessage.error('添加失败');
    } finally {
      isLoading.value = false;
    }
  };
</script>

<template>
  <BasicModal
    destroyOnClose
    @ok="handleSubmit"
    @cancel="handleCancel"
    width="1400px"
    @register="modalRegister"
    title="课程选择"
  >
    <div class="flex flex-row">
      <BasicTable class="w-1/2" @register="allTable" />
      <BasicTable class="w-1/2" @register="selectTable">
        <template #toolbar>
          <a-button @loading="isLoading" type="primary" @click="handleClear">批量移出</a-button>
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>

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