web/src/views/educational/textbookSubscription/components/changeTextBook.vue

<script setup lang="ts">
  import { useModalInner } from '/@/components/Modal';
  import { useTable } from '/@/components/Table';
  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
  import { changeColumns, textbookColumns } from './data.config';
  import { reactive, ref } from 'vue';
  import BasicTable from '/@/components/Table/src/BasicTable.vue';
  import { Modal } from 'ant-design-vue';
  import { getTextbookPage } from '/@/services/apis/TextbookController';
  import { getDataOption } from '/@/api/system/dic';
  import { putWfTextbookSubscriptionAlteration } from '/@/services/apis/WfTextbookSubscriptionController';
  import { useMessage } from '/@/hooks/web/useMessage';
  const emits = defineEmits(['success', 'register']);
  const dataSource = ref<any>([]);
  const visible = ref(false);
  const changeType = ref(0);
  const changeId = ref<string>('');
  const rawValue = reactive({
    studentSubscriptionNumber: 0,
    teacherSubscriptionNumber: 0,
  });
  const [register, { closeModal, setModalProps }] = useModalInner((data) => {
    changeId.value = data.id;
    dataSource.value = [data];
    rawValue.studentSubscriptionNumber = data.studentSubscriptionNumber;
    rawValue.teacherSubscriptionNumber = data.teacherSubscriptionNumber;
  });
  const [selectTableRef, { getSelectRows, clearSelectedRowKeys }] = useTable({
    title: '可选课程信息',
    bordered: true,
    columns: textbookColumns.slice(0, -5),
    api: getTextbookPage,
    useSearchForm: true,
    showTableSetting: true,
    resizeHeightOffset: 200,
    rowSelection: {
      type: 'radio',
    },
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'textbookType',
          label: '教材类型',
          component: 'ApiSelect',
          componentProps: {
            api: getDataOption,
            params: {
              code: 'textbook_type',
            },
          },
          colProps: {
            span: 12,
          },
        },
        {
          field: 'bookName',
          label: '教材名称',
          component: 'Input',
          colProps: {
            span: 12,
          },
        },
      ],
    },
    beforeFetch: (params) => {
      return {
        ...params,
      };
    },
  });
  const { createMessage } = useMessage();
  const handleSubmit = () => {
    dataSource.value = getSelectRows();
    changeType.value = 2;
    handleCancel();
  };
  const handleCancel = () => {
    visible.value = false;
    clearSelectedRowKeys();
  };
  const handleEdit = async () => {
    if (changeType.value === 0) {
      return createMessage.warning('您未进行任何变更，请选择变更课程或者变更征订数量后提交');
    }

    const value = dataSource.value[0];
    if (changeType.value === 1) {
      if (
        rawValue.studentSubscriptionNumber === value.studentSubscriptionNumber &&
        rawValue.teacherSubscriptionNumber === value.teacherSubscriptionNumber
      ) {
        return createMessage.warning('您未进行任何变更，请选择变更课程或者变更征订数量后提交');
      }
    }
    if (changeType.value === 2) {
      value.courseSubjectId = value.id;
    }
    value.id = changeId.value;
    value.alterationType = changeType.value;
    try {
      setModalProps({
        confirmLoading: true,
      });
      await putWfTextbookSubscriptionAlteration(value, 'none');
      createMessage.success('变更成功');
      emits('success');
      changeType.value = 0;
      closeModal();
    } catch (e) {
      console.log(e);
      createMessage.error('变更失败');
    } finally {
      setModalProps({
        confirmLoading: false,
      });
    }
  };
</script>

<template>
  <BasicModal
    defaultFullscreen
    @ok="handleEdit"
    v-bind="$attrs"
    @register="register"
    width="1200px"
    title="变更"
  >
    <a-button type="primary" @click="visible = true">选择变更课程</a-button>
    <BasicTable
      :bordered="true"
      :pagination="false"
      :data-source="dataSource"
      :columns="changeColumns"
    >
      <template #studentSubscriptionNumber="{ record }">
        <a-input-number
          :default-value="0"
          @change="changeType !== 2 ? (changeType = 1) : null"
          :step="1"
          :min="0"
          placeholder="请输入"
          v-model:value="record.studentSubscriptionNumber"
        />
      </template>
      <template #teacherSubscriptionNumber="{ record }">
        <a-input-number
          :default-value="0"
          @change="changeType !== 2 ? (changeType = 1) : null"
          :step="1"
          :min="0"
          placeholder="请输入"
          v-model:value="record.teacherSubscriptionNumber"
        />
      </template>
    </BasicTable>
  </BasicModal>
  <Modal
    @cancel="handleCancel"
    @ok="handleSubmit"
    width="1000px"
    v-model:visible="visible"
    title="选择变更课程"
  >
    <BasicTable @register="selectTableRef" title="课程列表" />
  </Modal>
</template>

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