fix:新增礼品管理

src/views/project/gift-manage/gift-list/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <CommonTable ref="commonTableRef" :tableOptions="tableConfig"> </CommonTable>
+  <addGiftDetail ref="addGiftDetailRef" @refreshTable="refreshTable"></addGiftDetail>
+</template>
+
+<script setup lang="jsx">
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+
+  import useDict from '/@/utils/dict-util';
+  await useDict.init(['MATE_DELIVERY_STATUS']);
+
+  import { giftApi } from '/@/api/project/gift-api';
+  import addGiftDetail from './modules/addGiftDetail.vue';
+
+  const commonTableRef = ref(null);
+  const addGiftDetailRef = ref(null);
+
+  const tableConfig = ref({
+    url: '/supports/present/queryPage',
+    // 设置网络请求方式为GET
+    requestMethod: 'GET',
+    tableAttrs: {},
+    showIndexColumn: true,
+    search: [
+      {
+        label: '物品名称',
+        field: 'deliveryName',
+        type: 'input',
+        attrs: {},
+      },
+      {
+        label: '物品类别',
+        field: 'CustomerName',
+        type: 'input',
+        attrs: {},
+      },
+    ],
+    buttons: [
+      {
+        label: '礼品新增',
+        iconName: 'PlusOutlined',
+        attrs: {
+          type: 'primary',
+          onClick: () => {
+            addGiftDetailRef.value.showModal();
+          },
+        },
+      },
+    ],
+    columns: [
+      {
+        title: '物品名称',
+        dataIndex: 'presentName',
+        align: 'center',
+      },
+      {
+        title: '物品略缩图',
+        // dataIndex: 'attachment',
+        align: 'center',
+        customRender: ({ text, record, index, column }) => {
+          const imageUrls = record?.presentAttachment || [];
+          if (!Array.isArray(imageUrls)) {
+            return '图片数据异常';
+          }
+          return imageUrls.map((imgUrl, imgIndex) => (
+            <a-image
+              key={imgIndex}
+              width={40}
+              src={imgUrl.fileUrl}
+              fallback='https://example.com/default-image.png' // 默认图片
+            />
+          ));
+        },
+      },
+      {
+        title: '单位',
+        dataIndex: 'presentUnit',
+        align: 'center',
+      },
+      {
+        title: '品牌',
+        dataIndex: 'presentBrand',
+        align: 'center',
+      },
+      {
+        title: '市场价',
+        dataIndex: 'presentPrice',
+        align: 'center',
+      },
+      {
+        title: '物品类别',
+        dataIndex: 'presentType',
+        align: 'center',
+      },
+      {
+        title: '库存数量',
+        dataIndex: 'stockQuantity',
+        align: 'center',
+        ellipsis: true,
+      },
+      {
+        title: '登记人',
+        dataIndex: 'createUserId',
+        align: 'center',
+        customRender: ({ text, record, index, column }) => {
+          return record?.createUserId?.actualName;
+        },
+      },
+      {
+        title: '登记时间',
+        dataIndex: 'createTime',
+        align: 'center',
+      },
+      {
+        title: '操作',
+        dataIndex: 'action',
+        fixed: 'right',
+        align: 'center',
+        width: 110,
+        customRender: ({ text, record, index, column }) => {
+          return (
+            <div class='smart-table-operate'>
+              <a-button type='link' onClick={() => addGiftDetailRef.value.showModal(record)}>
+                编辑
+              </a-button>
+              <a-button type='link' danger onClick={() => goDelete(record)}>
+                删除
+              </a-button>
+            </div>
+          );
+        },
+      },
+    ],
+    beforeFetch({ params }) {
+      return {
+        ...params,
+      };
+    },
+    // afterFetch({ data }) {},
+  });
+
+  const router = useRouter();
+
+  //删除单行礼品信息
+  const goDelete = (record) => {
+    console.log('record', record);
+    giftApi.delGiftInfo(record.id);
+    refreshTable();
+  };
+
+  function refreshTable() {
+    commonTableRef.value.reload();
+  }
+</script>
+
+<style lang="less" scoped>
+  ::v-deep .ant-float-btn-description {
+    font-size: 18px !important;
+  }
+  :deep(.ant-progress-inner) {
+    width: 27px !important;
+    height: 27px !important;
+    font-size: 11px !important;
+  }
+  :deep(.ant-table-column[data-key='index']) {
+    width: 60px !important;
+  }
+</style>

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

@@ -0,0 +1,191 @@
+<!--
+  * 部门表单 弹窗
+  *
+  * @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>