BoundLink-UI/src/views/project/gift-manage/gift-list/modules/addGiftDetail.vue

<!--
  * 部门表单 弹窗
  *
  * @Author:    BoundLink
  * @Date:      2022-08-08 20:46:18
-->
<template>
  <a-modal v-model:open="visible" width="50%" title="礼品新增" @ok="onSubmit" @cancel="closeModal" destroyOnClose>
    <a-form class="smart-query-form" ref="formRef" labelWrap :label-col="labelCol" :model="form" :rules="rules">
      <div class="cost-compose">
        <div class="basic-info">
          <div class="basic-info-form">
            <a-row :gutter="16" class="smart-query-form-row">
              <a-col :span="12">
                <a-form-item label="物品名称" name="presentName" class="smart-query-form-item">
                  <a-input v-model:value="form.presentName" placeholder="请输入物品名称" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="物品类别" name="presentType" class="smart-query-form-item">
                  <a-input v-model:value="form.presentType" placeholder="请输入物品类别" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16" class="smart-query-form-row">
              <a-col :span="12">
                <a-form-item label="物品单位" name="presentUnit" class="smart-query-form-item">
                  <a-input v-model:value="form.presentUnit" placeholder="请输入物品单位" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="物品品牌" name="presentBrand" class="smart-query-form-item">
                  <a-input v-model:value="form.presentBrand" placeholder="请输入物品品牌" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16" class="smart-query-form-row">
              <a-col :span="12">
                <a-form-item label="市场价格" name="presentPrice" class="smart-query-form-item">
                  <a-input v-model:value="form.presentPrice" placeholder="请输入物品市场价" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="库存数量" name="stockQuantity" class="smart-query-form-item">
                  <a-input-number style="width: 100%" v-model:value="form.stockQuantity" placeholder="请输入库存数量" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16" class="smart-query-form-row">
              <a-col :span="24">
                <a-form-item label="物品略缩图" name="form.presentAttachment" class="smart-query-form-item">
                  <Upload
                    ref="UploadRef"
                    :defaultFileList="defaultFileList"
                    :maxUploadSize="10"
                    :folder="FILE_FOLDER_TYPE_ENUM.COMMON.value"
                    buttonText="上传物品略缩图"
                    @change="changeAttachment"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </a-form>
  </a-modal>
</template>
<script setup>
  import { reactive, ref } from 'vue';
  import { theme, message, Modal } from 'ant-design-vue';
  import _ from 'lodash';
  import Upload from '/@/components/support/file-upload/index.vue';
  import { giftApi } from '/@/api/project/gift-api';
  import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';

  // ----------------------- 对外暴漏 ---------------------
  defineExpose({
    showModal,
  });

  // ----------------------- modal 的显示与隐藏 ---------------------

  const labelCol = { style: { width: '90px' } };
  const emits = defineEmits(['refresh']);
  const visible = ref(false);
  const UploadRef = ref();
  function showModal(params) {
    //判断如果params.id存在且有值，则将params赋给form
    if (params?.id) {
      form = { ...params };

      //删除params中的某些字段
      delete form.deletedFlag;
      delete form.updateTime;
      delete form.updateUserId;
      delete form.createTime;
      delete form.createUserId;

      defaultFileList.value = params.presentAttachment;
      form.presentAttachment = params.presentAttachment;
    }
    visible.value = true;
  }

  function closeModal() {
    UploadRef.value.clear();
    visible.value = false;
    resetFormData();
  }

  // ----------------------- form 表单操作 ---------------------
  const formRef = ref();

  const formDefault = {
    presentName: undefined, // 物品名称
    presentAttachment: undefined, // 物品略缩图
    presentUnit: undefined, // 单位
    presentBrand: undefined, // 品牌
    presentPrice: undefined, // 市场价
    presentType: undefined, // 物品类别
    stockQuantity: undefined, // 库存数量
  };

  let form = reactive({
    ...formDefault,
  });

  // 表单校验规则
  const fromRules = {
    // decisionName: [{ required: true, message: '决策人姓名不能为空' }],
  };

  // 重置表单数据
  function resetFormData() {
    Object.assign(form, formDefault);
  }

  // ----------------------- 上传附件 ----------------------------
  // 已上传的附件列表
  const defaultFileList = ref([]);
  function changeAttachment(fileList) {
    defaultFileList.value = fileList;
    form.presentAttachment = _.isEmpty(fileList) ? [] : fileList;
  }

  // ----------------------- form 表单  ajax 操作 ---------------------
  function onSubmit() {
    formRef.value
      .validateFields()
      .then((values) => {
        console.log('form', form);
        Modal.confirm({
          title: '提示',
          content: '确定要提交吗?',
          okText: '确认',
          onOk() {
            if (form?.id) {
              editGiftData();
            } else {
              addGiftInfo();
            }
          },
          cancelText: '取消',
          onCancel() {},
        });
      })
      .catch((error) => {
        console.log('step1_error', error);
      });
  }

  const addGiftInfo = async () => {
    await giftApi.addGiftInfo(form);
    message.success('新增成功');
    emits('refreshTable');
    onClose();
  };

  const editGiftData = async () => {
    await giftApi.editGiftInfo(form);
    message.success('修改成功');
    emits('refreshTable');
    onClose();
  };

  function onClose() {
    Object.assign(form, formDefault);
    visible.value = false;
  }
</script>