web-admin/src/views/base/teaching-manage/modifyTeaching.vue

<template>
  <a-modal
    v-model:visible="visible"
    :width="500"
    title-align="start"
    top="10vh"
    :align-center="false"
    @before-open="modalBeforeOpen"
  >
    <template #title> {{ title }} </template>
    <a-form ref="formRef" :model="formData" :rules="rules" auto-label-width>
      <a-form-item field="name" label="教学点名称">
        <a-input
          v-model.trim="formData.name"
          placeholder="请输入"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item field="code" label="教学点代码">
        <a-input
          v-model.trim="formData.code"
          placeholder="请输入"
          allow-clear
        ></a-input>
      </a-form-item>
      <a-form-item field="capacity" label="容量">
        <a-input-number
          v-model="formData.capacity"
          placeholder="请输入"
          :style="{ width: '120px' }"
          :min="1"
          :max="99999"
          :step="1"
        />
      </a-form-item>
      <a-form-item field="cityId" label="城市">
        <a-select
          v-model="formData.cityId"
          placeholder="请选择"
          filter-option
          allow-clear
          :options="[]"
        >
        </a-select>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button type="primary" :disabled="loading" @click="confirm"
        >确认</a-button
      >
      <a-button @click="close">取消</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed, nextTick, reactive, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import type { FormInstance } from '@arco-design/web-vue/es/form';
  import { updateTeaching } from '@/api/base';
  import useLoading from '@/hooks/loading';
  import useModal from '@/hooks/modal';
  import { objAssign, objModifyAssign } from '@/utils/utils';
  import { TeachingItem, TeachingUpdateParams } from '@/api/types/base';
  import { FormRules } from '@/types/global';

  defineOptions({
    name: 'ModifyTeaching',
  });

  /* modal */
  const { visible, open, close } = useModal();
  defineExpose({ open, close });

  const defaultFormData = {
    id: null,
    name: '',
    code: '',
    cityId: null,
    capacity: undefined,
  };

  const props = defineProps<{
    rowData: TeachingItem;
  }>();
  const emit = defineEmits(['modified']);

  const isEdit = computed(() => !!props.rowData.id);
  const title = computed(() => `${isEdit.value ? '编辑' : '新增'}教学点`);

  const formRef = ref<FormInstance>();
  const formData = reactive<TeachingUpdateParams>({ ...defaultFormData });
  const rules: FormRules<TeachingUpdateParams> = {
    name: [
      {
        required: true,
        message: '请输入名称',
      },
      {
        max: 50,
        message: '名称不能超过50字符',
      },
    ],
    code: [
      {
        required: true,
        message: '请输入代码',
      },
      {
        max: 50,
        message: '代码不能超过50字符',
      },
    ],
    capacity: [
      {
        required: true,
        message: '请输入容量',
      },
    ],
    cityId: [
      {
        required: true,
        message: '请选择城市',
      },
    ],
  };

  /* confirm */
  const { loading, setLoading } = useLoading();
  async function confirm() {
    const err = await formRef.value?.validate();
    if (err) return;

    setLoading(true);
    const datas = objAssign(formData, {});
    const res = await updateTeaching(datas).catch(() => false);
    setLoading(false);
    if (!res) return;
    Message.success('修改成功！');
    emit('modified', datas);
    close();
  }
  /* init modal */
  function modalBeforeOpen() {
    if (props.rowData.id) {
      objModifyAssign(formData, props.rowData);
    } else {
      objModifyAssign(formData, defaultFormData);
    }
    nextTick(() => {
      formRef.value?.clearValidate();
    });
  }
</script>