考试系统后台总结 vue3+ts+antd+jeccg

1.关于表格回显问题 

1.关于表格序号递增

 customRender: ({index}) => `${index + 1}`,

2.关于表格有效时期范围写法

  customRender:  ({record})=> {
      console.log('record',record);     
      return record.createTime.substring(0, 9)+" 至 "+record.expireTime.substring(0, 9);
    },

3.关于表格text值为0，为1的数据回显

 {
    title: '是否通过',
    dataIndex: 'pass',
    key: 'pass',
     customRender: ({ text }) => {
      switch (text) {
        case 0:
          return '不通过';
        case 1:
          return '通过';
      }
    }
  },

4.关于数据回显

   <a-form-item label="通知类型" name="type">
          <a-select v-model:value="model.type" placeholder="请选择" :disabled="disabled">
            <a-select-option value="1">短信</a-select-option>
            <a-select-option value="2">邮件</a-select-option>
          </a-select>
        </a-form-item>

这个数据回显的时候会显示数字 1或者2

解决方法

下拉框渲染的是数字而不是对应的文字，如何处理_react更新表单时 下拉框显示数字怎么办-CSDN博客

  model.value.type = model.value.type.toString();

2.关于form一行显示两列

 <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 10 }" style="margin-bottom: 20px" :rules="validatorRules">
      <a-row>
        <a-col :span="12">
          <a-form-item label="认证批次" prop="fileA">
            <a-input v-model:value="formState.fieldA" placeholder="input placeholder" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="认证类型" prop="fileB"> <a-input v-model:value="formState.fieldc" placeholder="input placeholder" /> </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item label="申请结束时间" prop="fileC">
            <a-input v-model:value="formState.fieldB" placeholder="input placeholder" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="证书类型" prop="fileD">
            <a-input v-model:value="formState.fieldB" placeholder="input placeholder" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

3.关于前后端交互

1.判断详情还是新增

这里的:disabled="!showFooter"可以来判断详情还是新增，详情时候disabled为true就不让更改了。

  <a-form ref="formData3Ref" :model="formData3" :label-col="{ style: { width: '100px', textAlign: 'left' } }" autocomplete="off" align>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="会员价格" name="price30" :rules="[{ required: true, message: '请输入会员价格' }]">
                    <a-input-number :disabled="!showFooter" style="width: 100%" placeholder="请输入" v-model:value="formData3.price30" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="非会员价格" name="price31" :rules="[{ required: true, message: '请输入非会员价格' }]">
                    <a-input-number :disabled="!showFooter" style="width: 100%" placeholder="请输入" v-model:value="formData3.price31" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

2.开班管理

先获取分页列表getList，然后拿到id和title和lessonDate，lessonTeacher。然后提交saveOrUpdate这个接口。查看详情，直接通过id去查 不用想那么多。

<template>
  <BasicDrawer width="70%" v-bind="$attrs" @register="registerDrawer" :title="getTitle" destroyOnClose :showFooter="showFooter" @ok="handleSubmit">
    <!-- 表单 -->
    <BasicForm @register="registerForm" />
    模块
    <a-card>
      <a-form ref="modalFormRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <div v-for="(item, index) in queryPageList" :key="index">
          <p>{{ item.modelName }}</p>
          <a-row>
            <a-col :span="12">
              <a-form-item label="授课日期" name="email">
                <a-date-picker v-model:value="queryPageList[index].lessonDate" valueFormat="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="授课讲师" name="email">
                <a-input v-model:value="queryPageList[index].lessonTeacher"> </a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-card>
  </BasicDrawer>
</template>
<script setup lang="ts">
  import { computed, ref, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { studentFormSchema, classListColumn } from './teach.data';
  import { saveOrUpdate, getList, queryById } from './student.api';
  const modalFormRef = ref();
  const formState = ref({
    region: '',
    invType: '1',
    titleType: '1',
    applyId: '',
  });
  const labelCol = ref({
    span: 6,
  });
  const id = ref('');
  const wrapperCol = ref({
    span: 12,
  });
  const queryPageList = ref([]);
  const getListFc = async () => {
    const res: any = await getList({ pageSize: 9999 });
    queryPageList.value = res.records.map((item) => {
      return {
        modelId: item.id,
        modelName: item.title,
        lessonDate: null,
        lessonTeacher: '',
      };
    });
    console.log('getList', res);
  };

  //  const getclassListFc= async ()=>{
  //    const res : any = await getclassList();
  //    console.log('getclassList',res)
  //     }
  //   getclassListFc();

  // 新增/更新标识
  const isUpdate = ref(true);
  const showFooter = ref(true);

  //获取标题
  const getTitle = computed(() => {
    if (!unref(isUpdate)) {
      return '新增开班管理';
    } else {
      // 显示底部 - 代表编辑
      if (unref(showFooter)) {
        return '编辑开班管理';
      }
      return '详情';
    }
  });

  //表单配置
  const [registerForm, { setProps, setFieldsValue, resetFields, validate }] = useForm({
    labelWidth: 120,
    schemas: studentFormSchema,
    showActionButtonGroup: false,
  });
  const [wertForm, {}] = useForm({
    labelWidth: 120,
    schemas: classListColumn,
    showActionButtonGroup: false,
  });

  // 独立的 Drawer 内部调用
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    queryPageList.value = [];
    await resetFields();

    // 接受传参
    showFooter.value = data?.showFooter ?? true;
    isUpdate.value = !!data?.isUpdate;
    if (!isUpdate.value && data.showFooter) {
      getListFc();
    } else {
      id.value = data.record.id;
      let res = await queryById({ id: data.record.id });
      queryPageList.value = res.scmClassModelRelationList;
    }
    // 显示加载
    // setDrawerProps({ confirmLoading: true });

    // 无论新增还是编辑，都可以设置表单值
    if (typeof data.record === 'object') {
      setFieldsValue({
        ...data.record,
      });
    }

    // 隐藏底部时禁用整个表单
    setProps({ disabled: !showFooter.value });
    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
  });

  // 声明Emits
  const emit = defineEmits(['success', 'register']);

  // 提交事件
  async function handleSubmit() {
    try {
      let values = await validate();
      setDrawerProps({ confirmLoading: true });
      let isUpdateVal = unref(isUpdate);
      values.scmClassModelRelationList = queryPageList.value;
      if (isUpdateVal) {
        values.id = id.value;
      }
      //提交表单
      await saveOrUpdate(values, isUpdateVal);
      //关闭弹窗
      closeDrawer();
      //刷新列表
      emit('success', { isUpdateVal, values });
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>