feat: 封装附件上传公共组件

Dockerfile

@@ -13,7 +13,23 @@ COPY . ./
 # 安装依赖
 # 若网络不通，可以使用淘宝源
 # RUN pnpm config set registry https://registry.npmmirror.com
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install
+# see https://pnpm.io/docker
+FROM builder AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile 
+
+FROM builder AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build
+
+
+# mirror acceleration
+# RUN npm config set registry https://registry.npmmirror.com
+# RUN pnpm config set registry https://registry.npmmirror.com
+# RUN npm config rm proxy && npm config rm https-proxy
+
+FROM builder
+COPY --from=prod-deps $PROJECT_DIR/node_modules $PROJECT_DIR/node_modules
+COPY --from=build $PROJECT_DIR/dist $PROJECT_DIR/dist
 
 # 构建项目
 ENV VITE_BASE_URL=/

Dockerfile copy

@@ -1,53 +0,0 @@
-# 遇到网络问题可以配置镜像加速：https://gist.github.com/y0ngb1n/7e8f16af3242c7815e7ca2f0833d3ea6
-# FROM 表示设置要制作的镜像基于哪个镜像，FROM指令必须是整个Dockerfile的第一个指令，如果指定的镜像不存在默认会自动从Docker Hub上下载。
-# 指定我们的基础镜像是node，latest表示版本是最新, 如果要求空间极致，可以选择lts-alpine
-# 使用 as 来为某一阶段命名
-FROM node:20-slim AS base
-
-ENV PROJECT_DIR=/huaxin-admin \
-    DB_HOST=mysql \
-    APP_PORT=7001 \
-    PNPM_HOME="/pnpm" \
-    PATH="$PNPM_HOME:$PATH"
-
-
-RUN corepack enable \
-    && yarn global add pm2
-
-# WORKDIR指令用于设置Dockerfile中的RUN、CMD和ENTRYPOINT指令执行命令的工作目录(默认为/目录)，该指令在Dockerfile文件中可以出现多次，
-# 如果使用相对路径则为相对于WORKDIR上一次的值，
-# 例如WORKDIR /data，WORKDIR logs，RUN pwd最终输出的当前目录是/data/logs。
-# cd 到 /huaxin-admin
-WORKDIR $PROJECT_DIR
-COPY ./ $PROJECT_DIR
-RUN chmod +x ./wait-for-it.sh 
-
-# set timezone
-RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
-    && echo 'Asia/Shanghai' > /etc/timezone
-
-# see https://pnpm.io/docker
-FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile 
-
-FROM base AS build
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
-RUN pnpm run build
-
-
-# mirror acceleration
-# RUN npm config set registry https://registry.npmmirror.com
-# RUN pnpm config set registry https://registry.npmmirror.com
-# RUN npm config rm proxy && npm config rm https-proxy
-
-FROM base
-COPY --from=prod-deps $PROJECT_DIR/node_modules $PROJECT_DIR/node_modules
-COPY --from=build $PROJECT_DIR/dist $PROJECT_DIR/dist
-
-# EXPOSE port
-EXPOSE $APP_PORT
-
-# 容器启动时执行的命令，类似npm run start
-# CMD ["pnpm", "start:prod"]
-# CMD ["pm2-runtime", "ecosystem.config.js"]
-ENTRYPOINT ./wait-for-it.sh $DB_HOST:$DB_PORT -- pm2-runtime ecosystem.config.js

src/components/business/README.md

@@ -1,5 +1,7 @@
 ### 业务组件（目录说明）
 
-1.AttachmentManage不同的业务调用该组件需要传入该业务数据link的文件ids，需要传入unlink文件的方法，只是解除关联，文件实际还在服务器上没有删除，如果想要物理删除文件，需要到存储管理中去删除。
+1.AttachmentManage
-
+不同的业务调用该组件需要传入该业务数据link的文件ids，需要传入unlink文件的方法，只是解除关联，文件实际还在服务器上没有删除，如果想要物理删除文件，需要到存储管理中去删除。
+2.AttachmentUpload
+不同的业务去上传附件。需要传入一个afterUploadCallback去接收上传到storage的文件ids，并自己关联业务数据
 #### 与业务强耦合的组件可以放这里

src/components/business/attachment-upload/index.vue

@@ -12,16 +12,19 @@
     <Button @click="onCancel">关闭</Button>
     <Button :type="'primary'" @click="onOk" :disabled="disabledUpload">上传</Button></a-flex
   >
-</template> 
+</template>
 
 <script setup lang="tsx">
   import { ref, computed } from 'vue';
   import { message, type UploadProps } from 'ant-design-vue';
-  import { UploadResultStatus, fileListColumns, type FileItem } from './upload-columns';
+  import { UploadResultStatus, fileListColumns, type FileItem } from './columns';
   import { useTable, type TableColumn } from '@/components/core/dynamic-table';
   import Button from '@/components/basic/button';
   import Api from '@/api/';
 
+  defineOptions({
+    name: 'AttachmentUpload',
+  });
   const emit = defineEmits(['close']);
   const { afterUploadCallback } = defineProps({
     afterUploadCallback: {
@@ -81,7 +84,6 @@
     );
     message.success({ content: '上传完成', key: '上传完成' });
     afterUploadCallback && afterUploadCallback(res.filter((item) => !!item));
-    console.log(fileList.value.filter((n) => n.status === UploadResultStatus.SUCCESS));
   };
 
   const beforeUpload: UploadProps['beforeUpload'] = async (file) => {

src/views/contract/index.vue

@@ -33,9 +33,9 @@
   import { useFormModal, useModal } from '@/hooks/useModal';
   import { contractSchemas } from './formSchemas';
   import { formatToDate } from '@/utils/dateUtil';
-  import UploadContract from './upload-contract.vue';
   import { Button } from 'ant-design-vue';
   import AttachmentManage from '@/components/business/attachment-manage/index.vue';
+  import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
   defineOptions({
     name: 'Contract',
   });
@@ -100,7 +100,7 @@
             {
               icon: 'ant-design:cloud-upload-outlined',
               tooltip: '上传附件',
-              onClick: () => openFileManageModal(record),
+              onClick: () => openAttachmentUploadModal(record),
             },
           ],
         },
@@ -108,19 +108,19 @@
     });
   });
 
-  const openFileManageModal = async (record: API.ContractEntity) => {
+  const openAttachmentUploadModal = async (record: API.ContractEntity) => {
     isUploadPopupVisiable.value = true;
     fnModal.show({
       width: 800,
       title: `合同编号: ${record.contractNumber}`,
       content: () => {
         return (
-          <UploadContract
+          <AttachmentUpload
             onClose={handleUploadClose}
             afterUploadCallback={(files) => {
               afterUploadCallback(files, record.id);
             }}
-          ></UploadContract>
+          ></AttachmentUpload>
         );
       },
       destroyOnClose: true,