national-motion-web/src/views/businessManagement/courses/publishcourses.vue

<template>
  <div class="p-8px bg-white">
    <div class="px-4">
      <BasicForm @register="registerForm">
        <template #title1>
          <TypographyTitle :level="4">基础信息</TypographyTitle>
          <Divider></Divider>
        </template>
        <template #title2>
          <TypographyTitle :level="4">价格、限购、正常课表</TypographyTitle>
          <Divider></Divider>
        </template>
        <template #ZtCustomTable1="{ model, field }">
          <ZtCustomTable
            :tableColumn="publishcoursesColums"
            v-model:value="model[field]"
            show-index
            :show-action="Number(route.query.type) == 0"
          ></ZtCustomTable>
        </template>
        <template #title3>
          <TypographyTitle :level="4">课程介绍</TypographyTitle>
          <Divider></Divider>
        </template>
        <template #VideoUpload="{ model, field }">
          <uploadVideo v-model:model-value="model[field]"></uploadVideo>
          <span class="text-gray">单个视频；时长10s ~ 5分钟以内；宽高比为5:4。单个文件不超过100M；</span>
        </template>

        <template #formFooter>
          <div class="w-full flex items-center justify-center my-3" v-if="Number(route.query.type) != 1">
            <a-button type="primary" @click="save" class="mr-2" :loading="isSubmit"> 保存 </a-button>
            <a-button type="error" @click="back" class="mr-2"> 关闭 </a-button>
          </div>
        </template>
      </BasicForm>
      <div class="h-20px"></div>
    </div>
  </div>
</template>
<script lang="ts" setup name="business-management-publishcourses">
  import uploadVideo from '@/components/uploadVideo/index.vue';

  import { TypographyTitle, Divider } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import ZtCustomTable from '/@/components/ZtCustomTable/index.vue';
  import { formSchema, publishcoursesColums } from './courses.data';
  import dayjs from 'dayjs';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { saveOrUpdate, getDetaile } from './courses.api';
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { nextTick } from 'vue';
  import { useShopInfoStore } from '/@/store/modules/shopInfo';
  useShopInfoStore().getCurrentDep();
  const { close: closeTab } = useTabs();
  const route = useRoute();
  const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate, getFieldsValue }] = useForm({
    schemas: formSchema,
    showActionButtonGroup: false,
    labelCol: { span: 4 },
  });
  const viewDataSport = ref<any>({});
  const customTableData = ref({});
  async function isView() {
    if (Number(route.query.type) != 0) {
      await getDataList();
      nextTick(async () => {
        setProps({
          disabled: Number(route.query.type) == 1,
        });
        await setFieldsValue({
          ...viewDataSport.value,
          categoryId: viewDataSport.value.categoryId.split(','),
          priceRulesList: customTableData.value,
        });
      });
    }
  }
  isView();
  async function getDataList() {
    const res = await getDetaile({ id: route.query.id });
    // viewDataSportList.value = res;\
    customTableData.value = res.priceRulesList.map((it) => {
      return {
        name: it.name,
        time: [it.startTime, it.endTime],
        id: dayjs().valueOf(),
      };
    });
    viewDataSport.value = res.courses;
  }

  const isSubmit = ref(false);
  async function back() {
    await closeTab();
  }
  async function save() {
    await validate();
    const form = await getFieldsValue();
    isSubmit.value = true;
    const newObj = {
      courses: { ...form, priceRulesList: null },
      priceRulesList: transformData(form.priceRulesList),
    };
    try {
      await saveOrUpdate(newObj, Number(route.query.type) != 0);
      isSubmit.value = false;
      back();
    } catch (error) {
      console.log(error);
      isSubmit.value = false;
    }
  }
  function transformData(data) {
    return data.map((it) => {
      return {
        startTime: dayjs(it.editValueRefs.time[0]).format('YYYY-MM-DD hh:mm:ss'),
        endTime: dayjs(it.editValueRefs.time[1]).format('YYYY-MM-DD hh:mm:ss'),
        name: it.editValueRefs.name.value,
      };
    });
  }
</script>