|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <BasicModal
|
|
|
+ @ok="handleSubmit"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ :maskClosable="false"
|
|
|
+ v-bind="$attrs"
|
|
|
+ @register="registerModal"
|
|
|
+ :title="getTitle"
|
|
|
+ :width="1002"
|
|
|
+ showFooter
|
|
|
+ :defaultFullscreen="true"
|
|
|
+ :show-cancel-btn="false"
|
|
|
+ >
|
|
|
+ <div class="h-full">
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
+ <template #toolbar>
|
|
|
+ <div class="flex-1 flex items-center">
|
|
|
+ <!-- <div class="flex flex-1 items-center justify-center text-lg font-bold">
|
|
|
+ <Space>
|
|
|
+ <div>{{ modelRef?.userName }}</div>
|
|
|
+ <div>{{ modelRef?.name }}</div>
|
|
|
+ <div>{{ modelRef?.employTypeCn }}</div>
|
|
|
+ </Space>
|
|
|
+ </div> -->
|
|
|
+ <div class="flex items-center">
|
|
|
+ <Space>
|
|
|
+ <a-button type="primary" @click="handleExport">导出</a-button>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div
|
|
|
+ style="width: 10px; height: 10px; border-radius: 50%; background-color: #facd91"
|
|
|
+ ></div>
|
|
|
+ <div class="ml-2">调课</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div
|
|
|
+ style="width: 10px; height: 10px; border-radius: 50%; background-color: #ec808d"
|
|
|
+ ></div>
|
|
|
+ <div class="ml-2">顶课</div>
|
|
|
+ </div>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #allClassTime="{ text }">
|
|
|
+ <div>{{ text }}</div>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </div>
|
|
|
+ </BasicModal>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+ import { ref, computed, unref, h } from 'vue';
|
|
|
+ import { Space } from 'ant-design-vue';
|
|
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+ import { useTable, BasicTable, BasicColumn } from '/@/components/Table';
|
|
|
+ import {
|
|
|
+ postClassTimeStatisticsRecordDetailExportQuery,
|
|
|
+ getClassTimeStatisticsRecordDetailInfo,
|
|
|
+ } from '/@/services/apis/ClassTimeStatisticsController';
|
|
|
+ import { formatToDate } from '/@/utils/dateUtil';
|
|
|
+ import { downloadByData } from '/@/utils/file/download';
|
|
|
+
|
|
|
+ const isUpdate = ref(true);
|
|
|
+ const modelRef = ref<Recordable>({});
|
|
|
+ const emit = defineEmits(['success', 'register']);
|
|
|
+
|
|
|
+ const [registerTable, { setTableData, setColumns, redoHeight }] = useTable({
|
|
|
+ title: '课时统计表',
|
|
|
+ rowKey: 'id',
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '课程名称',
|
|
|
+ dataIndex: 'userName',
|
|
|
+ align: 'left',
|
|
|
+ width: 80,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ useSearchForm: false,
|
|
|
+ showTableSetting: true,
|
|
|
+ bordered: true,
|
|
|
+ immediate: false,
|
|
|
+ canResize: true,
|
|
|
+ pagination: false,
|
|
|
+ showIndexColumn: false,
|
|
|
+ resizeHeightOffset: 80,
|
|
|
+ });
|
|
|
+
|
|
|
+ const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
|
|
|
+ setModalProps({ confirmLoading: true });
|
|
|
+ isUpdate.value = false;
|
|
|
+
|
|
|
+ modelRef.value = { ...data.baseData };
|
|
|
+
|
|
|
+ await loadData();
|
|
|
+ });
|
|
|
+
|
|
|
+ const loadData = async () => {
|
|
|
+ setModalProps({ confirmLoading: true, loading: true });
|
|
|
+ const resData = await getClassTimeStatisticsRecordDetailInfo({ id: unref(modelRef).id });
|
|
|
+
|
|
|
+ const columns: BasicColumn[] = [
|
|
|
+ {
|
|
|
+ title: '节次',
|
|
|
+ dataIndex: 'timeName',
|
|
|
+ align: 'left',
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const dataList: Recordable[] = [];
|
|
|
+ try {
|
|
|
+ if (resData) {
|
|
|
+ const { rowTitle, columnTitle, data, allClassTime } = resData;
|
|
|
+
|
|
|
+ const totalRow: Recordable = { timeName: '合计课时' };
|
|
|
+
|
|
|
+ rowTitle.forEach((item, index) => {
|
|
|
+ columns.push({
|
|
|
+ title: item.scheduleDate,
|
|
|
+ dataIndex: `day${index}`,
|
|
|
+ width: 120,
|
|
|
+ customRender: formatDay,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ columnTitle.forEach((col) => {
|
|
|
+ let row: Recordable = {
|
|
|
+ timeName: col.type,
|
|
|
+ };
|
|
|
+
|
|
|
+ rowTitle.forEach((item, index) => {
|
|
|
+ const filter = data.filter(
|
|
|
+ (f) =>
|
|
|
+ formatToDate(f.scheduleDate, 'MM.DD') === `${item.scheduleDate}` &&
|
|
|
+ f.type === col.type,
|
|
|
+ );
|
|
|
+
|
|
|
+ const colName = `day${index}`;
|
|
|
+
|
|
|
+ totalRow[colName] = {
|
|
|
+ courseName: item.content === 0 || item.content === '0.0' ? '' : item.content,
|
|
|
+ };
|
|
|
+
|
|
|
+ row[colName] = {};
|
|
|
+ row['total'] = col.content === 0 || col.content === '0.0' ? '' : col.content;
|
|
|
+
|
|
|
+ if (filter.length > 0) {
|
|
|
+ const filterItem = filter[0];
|
|
|
+ if (filterItem.content) {
|
|
|
+ const contents = filterItem.content.split(',');
|
|
|
+ const courseName = contents[0];
|
|
|
+ let className = '';
|
|
|
+ if (contents.length > 1) {
|
|
|
+ className = contents[1];
|
|
|
+ }
|
|
|
+
|
|
|
+ row[colName]['courseName'] = courseName === '0.0' ? '' : courseName;
|
|
|
+ row[colName]['className'] = className;
|
|
|
+
|
|
|
+ if (filterItem.adjustType === 'course_exchange') {
|
|
|
+ row[colName]['color'] = '#facd91';
|
|
|
+ }
|
|
|
+ if (filterItem.adjustType === 'course_substitute') {
|
|
|
+ row[colName]['color'] = '#ec808d';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ dataList.push(row);
|
|
|
+ });
|
|
|
+
|
|
|
+ totalRow['total'] = allClassTime;
|
|
|
+ dataList.push(totalRow);
|
|
|
+
|
|
|
+ // console.log('dataList', dataList);
|
|
|
+ }
|
|
|
+
|
|
|
+ columns.push({
|
|
|
+ title: '合计(课时)',
|
|
|
+ dataIndex: 'total',
|
|
|
+ width: 90,
|
|
|
+ });
|
|
|
+
|
|
|
+ setColumns(columns);
|
|
|
+ setTableData(dataList);
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ redoHeight();
|
|
|
+ }, 500);
|
|
|
+ } finally {
|
|
|
+ setModalProps({ confirmLoading: false, loading: false });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const formatDay = ({ text }) => {
|
|
|
+ let style = {};
|
|
|
+ if (text && text.color) {
|
|
|
+ style['backgroundColor'] = text.color;
|
|
|
+ style['color'] = '#fff';
|
|
|
+ }
|
|
|
+ return h('div', { style: style }, [
|
|
|
+ h('div', null, text?.courseName || ''),
|
|
|
+ h('div', null, text?.className || ''),
|
|
|
+ ]);
|
|
|
+ };
|
|
|
+
|
|
|
+ const getTitle = computed(() => (!unref(isUpdate) ? '课时明细' : '课时明细'));
|
|
|
+ const handleSubmit = async () => {
|
|
|
+ try {
|
|
|
+ closeModal();
|
|
|
+ emit('success');
|
|
|
+ } finally {
|
|
|
+ setModalProps({ confirmLoading: false });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleExport = async () => {
|
|
|
+ setModalProps({ loading: true, confirmLoading: true });
|
|
|
+ downloadByData(
|
|
|
+ (await postClassTimeStatisticsRecordDetailExportQuery({ id: unref(modelRef).id })).data,
|
|
|
+ `课时明细统计表${formatToDate(new Date())}.xlsx`,
|
|
|
+ );
|
|
|
+ setModalProps({ loading: false, confirmLoading: false });
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less"></style>
|