web/src/views/course/statistics/components/edit.vue

<template>
  <BasicModal
    @ok="handleSubmit"
    :destroyOnClose="true"
    :maskClosable="false"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    :width="1002"
    showFooter
    :defaultFullscreen="true"
  >
    <div>
      <div style="height: 112px">
        <Descriptions bordered>
          <Descriptions.Item label="年月">
            {{ modelRef?.year }}年{{ modelRef?.month }}月
          </Descriptions.Item>
          <Descriptions.Item label="时间">
            {{ formatToDate(modelRef?.startDate) }}~{{ formatToDate(modelRef?.endDate) }}
          </Descriptions.Item>
          <Descriptions.Item label="总课时">
            {{ modelRef?.allClassTime }}
          </Descriptions.Item>
          <Descriptions.Item label="总课时费(元）">
            {{ modelRef?.classTimeAmount }}
          </Descriptions.Item>
          <Descriptions.Item label="总外聘教师超课时费（元）">
            {{ modelRef?.beyondClassTimeAmount }}
          </Descriptions.Item>
          <Descriptions.Item label="总金额（元）">
            {{ modelRef?.totalAmount }}
          </Descriptions.Item>
        </Descriptions>
      </div>
      <div style="height: calc(100% - 112px)">
        <BasicTable @register="registerTable" :searchInfo="searchInfo">
          <template #toolbar>
            <a-button type="primary" @click="handelRefrresh" :disabled="modelRef?.status === 3">
              刷新统计
            </a-button>
            <a-button type="primary" @click="handleWeight">权重设置</a-button>
            <a-button type="primary" @click="handleCost">费用设置</a-button>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </template>
          <template #allClassTime="{ text, index }">
            <a-button type="link" @click="handelDetail(index)"> {{ text }}</a-button>
          </template>
        </BasicTable>
      </div>
    </div>
    <FormWeight @register="registerWeightModal" />
    <FormCost @register="registerCostModal" />
    <FormDetail @register="registerDetailModal" />
  </BasicModal>
</template>
<script setup lang="ts">
  import { ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
  import { formDetailSchema } from '../data.config';
  import {
    getClassTimeStatisticsInfo,
    getClassTimeStatisticsRecordExport,
    getClassTimeStatisticsRecordList,
    postClassTimeStatisticsChangeStatus,
    postClassTimeStatisticsRefreshStatistics,
  } from '/@/services/apis/ClassTimeStatisticsController';
  import { useTable, BasicTable } from '/@/components/Table';
  import { Descriptions } from 'ant-design-vue';
  import FormWeight from './weight.vue';
  import FormCost from './cost.vue';
  import { formatToDate } from '/@/utils/dateUtil';
  import FormDetail from './detail.vue';
  import { downloadByData } from '/@/utils/file/download';

  const isUpdate = ref(true);
  const modelRef = ref<Recordable>({});
  const searchInfo = reactive<Recordable>({});
  const emit = defineEmits(['success', 'register']);
  const [registerWeightModal, { openModal: openWeightModal }] = useModal();
  const [registerCostModal, { openModal: openCostModal }] = useModal();
  const [registerDetailModal, { openModal: openDetailModal }] = useModal();

  const [registerTable, { reload, getDataSource }] = useTable({
    api: getClassTimeStatisticsRecordList,
    title: '课时统计表',
    rowKey: 'id',
    columns: formDetailSchema,
    useSearchForm: false,
    showTableSetting: true,
    bordered: true,
    immediate: false,
    canResize: true,
    pagination: false,
  });

  const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: true,
      okText: '锁定',
      cancelText: '关闭',
      okButtonProps: { disabled: data.baseData.status === 3 },
    });
    isUpdate.value = false;

    const resData = await getClassTimeStatisticsInfo({ id: data.baseData.id });
    modelRef.value = { ...resData };
    searchInfo.id = data.baseData.id;
    reload();
    setModalProps({ confirmLoading: false });
  });

  const getTitle = computed(() => (!unref(isUpdate) ? '统计明细' : '统计明细'));
  const handleSubmit = async () => {
    try {
      await postClassTimeStatisticsChangeStatus({ id: modelRef.value.id, status: 3 });
      closeModal();

      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  };

  const handleWeight = () => {
    openWeightModal(true, {
      isUpdate: true,
      baseData: {
        classTimeStatisticsId: unref(modelRef).id,
        jsonContent: unref(modelRef).weightSetJson,
      },
    });
  };
  const handleCost = () => {
    openCostModal(true, {
      isUpdate: false,
      baseData: {
        classTimeStatisticsId: unref(modelRef).id,
        jsonContent: unref(modelRef).costSetJson,
      },
    });
  };

  const handelDetail = (index) => {
    const data = getDataSource();
    openDetailModal(true, {
      isUpdate: false,
      baseData: {
        data,
        index,
      },
    });
  };
  const handelRefrresh = async () => {
    await postClassTimeStatisticsRefreshStatistics({ id: unref(modelRef).id });
    closeModal();

    emit('success');
  };

  const handleExport = async () => {
    downloadByData(
      (await getClassTimeStatisticsRecordExport({})).data,
      `课时统计表${formatToDate(new Date())}.xlsx`,
    );
  };
</script>

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