web/src/views/activity/contest/edit.vue

<template>
  <BasicDrawer
    @ok="handleSubmit"
    :destroyOnClose="true"
    :maskClosable="false"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    :width="1002"
    showFooter
  >
    <BasicForm @register="registerForm">
      <template #selectUser>
        <SelectUser v-model:value="selectUserValue" @change="handleUserChange" />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script setup lang="ts">
  import { ref, computed, unref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from './data.config';
  import {
    getBandingTaskInfo,
    postBandingBandingTask,
    putBandingBandingTask,
  } from '/@/services/apis/BandingTaskController';
  import SelectUser from '/@/views/notice/components/SelectUser.vue';
  import { Recordable } from 'vite-plugin-mock';

  const isUpdate = ref(true);
  const modelRef = ref({});
  const emit = defineEmits(['success', 'register']);
  const { createMessage } = useMessage();

  const selectUserValue = ref<Recordable[]>([]);

  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
    labelWidth: 100,
    schemas: formSchema,
    showActionButtonGroup: false,
  });

  const [registerModal, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
    resetFields();
    setDrawerProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;
    modelRef.value = { ...data.baseData };

    if (unref(isUpdate)) {
      const resData = await getBandingTaskInfo({ id: data.baseData.id });

      modelRef.value = { ...resData };
      setFieldsValue({
        ...resData,
      });
    }
  });

  const getTitle = computed(() => (!unref(isUpdate) ? '新增赛事活动' : '编辑赛事活动'));
  const handleSubmit = async () => {
    try {
      const values = await validate();
      setDrawerProps({ confirmLoading: true });
      const postParams = unref(modelRef);
      Object.assign(postParams, values);

      if (unref(isUpdate)) {
        await putBandingBandingTask(postParams as API.UpdateBandingTaskDto);
      } else {
        await postBandingBandingTask(postParams as API.AddBandingTaskDto);
      }

      createMessage.success('操作成功');
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  };

  const handleUserChange = (data: Recordable[]) => {
    selectUserValue.value = data;
  };
</script>

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