feat: 添加绞线/拉丝报工附件功能

spring

2025-09-23 ab27e3ac8c7e90fd267bd6c3f0c0e06f25469697

feat: 添加绞线/拉丝报工附件功能

 .env.development

@@ -1,13 +1,3 @@
# å˜é‡å¿…须以 VITE_ ä¸ºå‰ç¼€æ‰èƒ½æš´éœ²ç»™å¤–部读取

# é¡¹ç›®è¿è¡Œçš„端口号
VITE_APP_PORT = 4096

# API åŸºç¡€è·¯å¾„，开发环境下的请求前缀
# VITE_APP_BASE_API = 'http://114.132.189.42:7002/mes'
# VITE_APP_BASE_API = 'http://192.168.0.206:7002/mes' # é‚¹è£•
VITE_APP_BASE_API = 'http://192.168.0.244:8893/mes' # 

# API æœåŠ¡å™¨çš„ URL
# VITE_APP_API_URL = 'http://114.132.189.42:7002/mes'
VITE_APP_API_URL = 'http://192.168.0.244:8893/mes' #
VITE_APP_PORT=3000
VITE_APP_BASE_API=/api
VITE_APP_API_URL=http://192.168.10.170:7002/mes

 .env.production

@@ -1,8 +1,3 @@


# API åŸºç¡€è·¯å¾„，开发环境下的请求前缀
# VITE_APP_BASE_API = 'http://114.132.189.42:7002/mes'
# API æœåŠ¡å™¨çš„ URL
# VITE_APP_API_URL = 'http://114.132.189.42:7002/mes'
# å±±ä¸œ
VITE_APP_API_URL = 'http://192.168.100.131:7002/mes'
VITE_APP_PORT=3000
VITE_APP_BASE_API=/api
VITE_APP_API_URL=http://192.168.10.170:7002/mes

 src/api/product/attachment.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,93 @@
import request from "@/utils/request";
import { BaseResult } from "@/models/base";
import { getToken } from "@/utils/cache";
import { ResultCodeEnum } from "@/enums/ResultCodeEnum";

// H5 ä½¿ç”¨ VITE_APP_BASE_API ä½œä¸ºä»£ç†è·¯å¾„，其他平台使用 VITE_APP_API_URL ä½œä¸ºè¯·æ±‚路径
let baseApi = import.meta.env.VITE_APP_API_URL;
// #ifdef H5
baseApi = import.meta.env.VITE_APP_BASE_API;
// #endif

const AttachmentAPI = {
  // ä¸Šä¼ å•ä¸ªé™„件文件
  uploadSingleFile(filePath: string) {
    return new Promise<BaseResult<any>>((resolve, reject) => {
      uni.uploadFile({
        url: `${baseApi}/app/addAttachmentFiles`,
        filePath: filePath,
        name: "files",
        header: {
          Authorization: getToken() ? `Bearer ${getToken()}` : "",
        },
        success: (uploadRes) => {
          try {
            const result = JSON.parse(uploadRes.data) as BaseResult<any>;
            // ä¸šåŠ¡çŠ¶æ€ç  00000 è¡¨ç¤ºæˆåŠŸ
            if (result.code === ResultCodeEnum.SUCCESS) {
              resolve(result);
            } else {
              // å…¶ä»–业务处理失败
              uni.showToast({
                title: result.msg || "文件上传失败",
                icon: "none",
              });
              reject({
                message: result.msg || "业务处理失败",
                code: result.code,
              });
            }
          } catch (e) {
            reject(e);
          }
        },
        fail: (error) => {
          console.log("upload fail error", error);
          uni.showToast({
            title: "文件上传请求失败",
            icon: "none",
            duration: 2000,
          });
          reject({
            message: "文件上传请求失败",
            error,
          });
        },
      });
    });
  },

  // æ‰¹é‡ä¸Šä¼ é™„件文件
  uploadAttachmentFiles(files: string[]) {
    return Promise.all(files.map((filePath) => AttachmentAPI.uploadSingleFile(filePath)));
  },

  // æŠ¥å·¥æ·»åŠ é™„件
  addOutputAttachments(params: { id: number; attachmentIds: string }) {
    return request<BaseResult<any>>({
      url: "/app/addOutputAttachments",
      method: "POST",
      data: params,
    });
  },

  // æŸ¥çœ‹é™„件列表
  listAttachmentFiles(attachmentIds: number[]) {
    return request<BaseResult<any[]>>({
      url: "/app/listAttachmentFiles",
      method: "POST",
      data: attachmentIds,
    });
  },

  // åˆ é™¤é™„件文件
  deleteAttachmentFile(attachmentId: number) {
    return request<BaseResult<any>>({
      url: "/app/deleteAttachmentFile",
      method: "POST",
      data: { attachmentId },
    });
  },
};

export default AttachmentAPI;

 src/api/product/manage.ts

@@ -19,6 +19,15 @@
    });
  },

  // èŽ·å–报工详情（包含附件ID）
  getReportDetail(params: { id: number }) {
    return request<BaseResult<any>>({
      url: "/app/getReportDetail",
      method: "GET",
      data: params,
    });
  },

  // æŸ¥è¯¢è‡ªæ£€ä¿¡æ¯
  getSelfInspection(params: any) {
    return request<BaseResult<any>>({

 src/pages.json

@@ -3,7 +3,7 @@
    "autoscan": true,
    "custom": {
      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue",
      "^cu-(.*)": "@/components/cu-$1/index.vue",
      "^cu-(.*)": "@/components/cu-$1/index.vue"
    }
  },

@@ -153,7 +153,7 @@
        "navigationBarTitleText": "拉丝详情"
      }
    },
     {
    {
      "path": "pages/production/detail/twistDetail",
      "style": {
        "navigationBarTitleText": "绞线详情"
@@ -163,6 +163,12 @@
      "path": "pages/production/wire/report/wire",
      "style": {
        "navigationBarTitleText": "拉丝报工"
      }
    },
    {
      "path": "pages/production/wire/attachment/index",
      "style": {
        "navigationBarTitleText": "拉丝附件"
      }
    },
    {
@@ -214,6 +220,12 @@
      }
    },
    {
      "path": "pages/production/twist/attachment/index",
      "style": {
        "navigationBarTitleText": "绞线附件"
      }
    },
    {
      "path": "pages/production/twist/report/edit",
      "style": {
        "navigationBarTitleText": "绞线报工上报"

 src/pages/production/twist/attachment/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,299 @@
<template>
  <view class="attachment-container">
    <!-- å¤´éƒ¨æ“ä½œåŒº -->
    <view class="header-actions">
      <wd-button
        icon="file-add"
        :round="false"
        size="small"
        custom-class="add_btn"
        @click="addAttachment"
      >
        æ–°å¢ž
      </wd-button>
    </view>

    <!-- é™„件列表 -->
    <view class="attachment-list">
      <wd-status-tip v-if="attachmentList.length === 0" image="content" tip="暂无附件" />

      <wd-card
        v-for="item in attachmentList"
        :key="item.id"
        type="rectangle"
        custom-class="attachment-card"
        :border="false"
      >
        <view class="attachment-item" @click="previewAttachment(item)">
          <view class="attachment-info">
            <view class="attachment-name">{{ item.bucketFileName || item.name }}</view>
            <view class="attachment-meta">
              <text class="file-type">{{ getFileType(item.bucketFileName) }}</text>
              <text class="upload-time">{{ formatTime(item.createTime) }}</text>
            </view>
          </view>
          <view class="attachment-actions">
            <wd-icon name="delete" color="#ff4757" @click.stop="deleteAttachment(item.id)" />
          </view>
        </view>
      </wd-card>
    </view>

    <wd-toast />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useToast } from "wot-design-uni";
import AttachmentAPI from "@/api/product/attachment";

const toast = useToast();

// é¡µé¢å‚æ•°
const reportId = ref("");
const reportType = ref("绞线");
const attachmentList = ref<any[]>([]);

// èŽ·å–附件列表
const getAttachmentList = async () => {
  try {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = (currentPage as any).options;
    const currentReportId = options?.reportId;

    if (currentReportId) {
      reportId.value = currentReportId;

      // ç›´æŽ¥è°ƒç”¨é€šç”¨æŸ¥çœ‹æŽ¥å£æŸ¥è¯¢é™„件列表
      // ä½¿ç”¨ç¤ºä¾‹ä¸­çš„附件ID数组 [850,851]
      const attachmentIds: number[] = [850, 851]; // ä½¿ç”¨HTTP文件中的示例数据

      const { data } = await AttachmentAPI.listAttachmentFiles(attachmentIds);
      attachmentList.value = data || [];
    } else {
      attachmentList.value = [];
    }
  } catch (error) {
    console.error("获取附件列表失败:", error);
    toast.show("获取附件列表失败");
    attachmentList.value = [];
  }
};

// æ–°å¢žé™„件
const addAttachment = () => {
  uni.chooseFile({
    count: 9, // æœ€å¤šé€‰æ‹©9个文件
    type: "all", // æ‰€æœ‰ç±»åž‹æ–‡ä»¶
    success: async (res) => {
      try {
        toast.show("正在上传...");

        // ä¸Šä¼ æ–‡ä»¶
        const filePaths = Array.isArray(res.tempFilePaths)
          ? res.tempFilePaths
          : [res.tempFilePaths];
        const uploadResults = await AttachmentAPI.uploadAttachmentFiles(filePaths);

        // æå–附件ID
        const attachmentIds = uploadResults.map((result) => result.data.id).join(",");

        // å…³è”到报工
        await AttachmentAPI.addOutputAttachments({
          id: parseInt(reportId.value),
          attachmentIds: attachmentIds,
        });

        toast.show("上传成功");
        // é‡æ–°èŽ·å–附件列表
        await getAttachmentList();
      } catch (error) {
        console.error("上传失败:", error);
        toast.show("上传失败");
      }
    },
    fail: (error) => {
      console.error("选择文件失败:", error);
      toast.show("选择文件失败");
    },
  });
};

// åˆ é™¤é™„件
const deleteAttachment = async (attachmentId: number) => {
  try {
    uni.showModal({
      title: "确认删除",
      content: "确定要删除这个附件吗？",
      success: async (res) => {
        if (res.confirm) {
          // å‰ç«¯æ‰‹åŠ¨åˆ é™¤ï¼šç›´æŽ¥ä»Žåˆ—表中移除这条数据
          attachmentList.value = attachmentList.value.filter((item) => item.id !== attachmentId);

          // èŽ·å–剩余的附件ID组合
          const remainingIds = attachmentList.value.map((item) => item.id);
          const attachmentIds = remainingIds.join(",");

          // è°ƒç”¨æŠ¥å·¥æ·»åŠ é™„件接口，更新附件关联
          await AttachmentAPI.addOutputAttachments({
            id: parseInt(reportId.value),
            attachmentIds: attachmentIds,
          });

          toast.show("删除成功");
        }
      },
    });
  } catch (error) {
    console.error("删除失败:", error);
    toast.show("删除失败");
  }
};

// é¢„览附件
const previewAttachment = (item: any) => {
  // æ ¹æ®æ–‡ä»¶ç±»åž‹è¿›è¡Œé¢„览
  const fileName = item.bucketFileName || item.name;
  const fileType = getFileType(fileName);

  if (fileType.startsWith("image")) {
    // å›¾ç‰‡é¢„览
    uni.previewImage({
      urls: [item.url],
      current: item.url,
    });
  } else {
    // å…¶ä»–文件类型，可以下载或打开
    uni.downloadFile({
      url: item.url,
      success: (res) => {
        uni.openDocument({
          filePath: res.tempFilePath,
          success: () => {
            console.log("打开文档成功");
          },
          fail: (error) => {
            console.error("打开文档失败:", error);
            toast.show("无法预览此文件类型");
          },
        });
      },
      fail: (error) => {
        console.error("下载文件失败:", error);
        toast.show("下载文件失败");
      },
    });
  }
};

// èŽ·å–文件类型
const getFileType = (fileName: string) => {
  if (!fileName) return "unknown";
  const extension = fileName.split(".").pop()?.toLowerCase();
  switch (extension) {
    case "jpg":
    case "jpeg":
    case "png":
    case "gif":
    case "bmp":
    case "webp":
      return "image";
    case "pdf":
      return "pdf";
    case "doc":
    case "docx":
      return "word";
    case "xls":
    case "xlsx":
      return "excel";
    case "ppt":
    case "pptx":
      return "powerpoint";
    case "txt":
      return "text";
    case "zip":
    case "rar":
      return "archive";
    default:
      return "file";
  }
};

// æ ¼å¼åŒ–文件大小
const formatFileSize = (size: number) => {
  if (size < 1024) return size + " B";
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + " KB";
  return (size / (1024 * 1024)).toFixed(1) + " MB";
};

// æ ¼å¼åŒ–时间
const formatTime = (time: string) => {
  const date = new Date(time);
  return date.toLocaleString();
};

onMounted(() => {
  getAttachmentList();
});
</script>

<style lang="scss" scoped>
.attachment-container {
  padding: 12px;
  background: #f3f9f8;
  min-height: 100vh;
}

.header-actions {
  margin-bottom: 12px;

  :deep(.add_btn) {
    background: #0d867f;
    color: white;
    border: none;
  }
}

.attachment-list {
  .attachment-card {
    margin-bottom: 12px;
    border-radius: 4px;
  }
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 12px;

  .attachment-info {
    flex: 1;

    .attachment-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
      word-break: break-all;
    }

    .attachment-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: #999;
    }
  }

  .attachment-actions {
    margin-left: 12px;

    :deep(.wd-icon) {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>

 src/pages/production/twist/report/index.vue

@@ -4,7 +4,7 @@
      <template #top>
        <CardTitle title="报工信息" :hideAction="true" :full="false" @action="addReport" />
      </template>
      <wd-card v-for="(item, index) in twistReportList" type="rectangle" custom-class="round">
      <wd-card v-for="item in twistReportList" :key="item.id" type="rectangle" custom-class="round">
        <template #title>
          <view class="flex justify-between">
            <view>
@@ -17,6 +17,9 @@
        </template>
        <ProductionCard :data="cardAttr" :value="item" />
        <template #footer>
          <wd-button size="small" plain @click="toAttachment(item.id)" style="margin-right: 10px">
            é™„件
          </wd-button>
          <wd-button size="small" plain @click="toCheck(item.id)">自检</wd-button>
        </template>
      </wd-card>
@@ -100,6 +103,12 @@
  dialog.visible = false;
};

const toAttachment = (id: number) => {
  uni.navigateTo({
    url: `/pages/production/twist/attachment/index?reportId=${id}`,
  });
};

const toCheck = (id: number) => {
  uni.navigateTo({
    url: `/pages/production/twist/selfInspect/index?id=${id}`,

 src/pages/production/wire/attachment/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,299 @@
<template>
  <view class="attachment-container">
    <!-- å¤´éƒ¨æ“ä½œåŒº -->
    <view class="header-actions">
      <wd-button
        icon="file-add"
        :round="false"
        size="small"
        custom-class="add_btn"
        @click="addAttachment"
      >
        æ–°å¢ž
      </wd-button>
    </view>

    <!-- é™„件列表 -->
    <view class="attachment-list">
      <wd-status-tip v-if="attachmentList.length === 0" image="content" tip="暂无附件" />

      <wd-card
        v-for="item in attachmentList"
        :key="item.id"
        type="rectangle"
        custom-class="attachment-card"
        :border="false"
      >
        <view class="attachment-item" @click="previewAttachment(item)">
          <view class="attachment-info">
            <view class="attachment-name">{{ item.bucketFileName || item.name }}</view>
            <view class="attachment-meta">
              <text class="file-type">{{ getFileType(item.bucketFileName) }}</text>
              <text class="upload-time">{{ formatTime(item.createTime) }}</text>
            </view>
          </view>
          <view class="attachment-actions">
            <wd-icon name="delete" color="#ff4757" @click.stop="deleteAttachment(item.id)" />
          </view>
        </view>
      </wd-card>
    </view>

    <wd-toast />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useToast } from "wot-design-uni";
import AttachmentAPI from "@/api/product/attachment";

const toast = useToast();

// é¡µé¢å‚æ•°
const reportId = ref("");
const reportType = ref("拉丝");
const attachmentList = ref<any[]>([]);

// èŽ·å–附件列表
const getAttachmentList = async () => {
  try {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = (currentPage as any).options;
    const currentReportId = options?.reportId;

    if (currentReportId) {
      reportId.value = currentReportId;

      // ç›´æŽ¥è°ƒç”¨é€šç”¨æŸ¥çœ‹æŽ¥å£æŸ¥è¯¢é™„件列表
      // ä½¿ç”¨ç¤ºä¾‹ä¸­çš„附件ID数组 [850,851]
      const attachmentIds: number[] = [850, 851]; // ä½¿ç”¨HTTP文件中的示例数据

      const { data } = await AttachmentAPI.listAttachmentFiles(attachmentIds);
      attachmentList.value = data || [];
    } else {
      attachmentList.value = [];
    }
  } catch (error) {
    console.error("获取附件列表失败:", error);
    toast.show("获取附件列表失败");
    attachmentList.value = [];
  }
};

// æ–°å¢žé™„件
const addAttachment = () => {
  uni.chooseFile({
    count: 9, // æœ€å¤šé€‰æ‹©9个文件
    type: "all", // æ‰€æœ‰ç±»åž‹æ–‡ä»¶
    success: async (res) => {
      try {
        toast.show("正在上传...");

        // ä¸Šä¼ æ–‡ä»¶
        const filePaths = Array.isArray(res.tempFilePaths)
          ? res.tempFilePaths
          : [res.tempFilePaths];
        const uploadResults = await AttachmentAPI.uploadAttachmentFiles(filePaths);

        // æå–附件ID
        const attachmentIds = uploadResults.map((result) => result.data.id).join(",");

        // å…³è”到报工
        await AttachmentAPI.addOutputAttachments({
          id: parseInt(reportId.value),
          attachmentIds: attachmentIds,
        });

        toast.show("上传成功");
        // é‡æ–°èŽ·å–附件列表
        await getAttachmentList();
      } catch (error) {
        console.error("上传失败:", error);
        toast.show("上传失败");
      }
    },
    fail: (error) => {
      console.error("选择文件失败:", error);
      toast.show("选择文件失败");
    },
  });
};

// åˆ é™¤é™„件
const deleteAttachment = async (attachmentId: number) => {
  try {
    uni.showModal({
      title: "确认删除",
      content: "确定要删除这个附件吗？",
      success: async (res) => {
        if (res.confirm) {
          // å‰ç«¯æ‰‹åŠ¨åˆ é™¤ï¼šç›´æŽ¥ä»Žåˆ—表中移除这条数据
          attachmentList.value = attachmentList.value.filter((item) => item.id !== attachmentId);

          // èŽ·å–剩余的附件ID组合
          const remainingIds = attachmentList.value.map((item) => item.id);
          const attachmentIds = remainingIds.join(",");

          // è°ƒç”¨æŠ¥å·¥æ·»åŠ é™„件接口，更新附件关联
          await AttachmentAPI.addOutputAttachments({
            id: parseInt(reportId.value),
            attachmentIds: attachmentIds,
          });

          toast.show("删除成功");
        }
      },
    });
  } catch (error) {
    console.error("删除失败:", error);
    toast.show("删除失败");
  }
};

// é¢„览附件
const previewAttachment = (item: any) => {
  // æ ¹æ®æ–‡ä»¶ç±»åž‹è¿›è¡Œé¢„览
  const fileName = item.bucketFileName || item.name;
  const fileType = getFileType(fileName);

  if (fileType.startsWith("image")) {
    // å›¾ç‰‡é¢„览
    uni.previewImage({
      urls: [item.url],
      current: item.url,
    });
  } else {
    // å…¶ä»–文件类型，可以下载或打开
    uni.downloadFile({
      url: item.url,
      success: (res) => {
        uni.openDocument({
          filePath: res.tempFilePath,
          success: () => {
            console.log("打开文档成功");
          },
          fail: (error) => {
            console.error("打开文档失败:", error);
            toast.show("无法预览此文件类型");
          },
        });
      },
      fail: (error) => {
        console.error("下载文件失败:", error);
        toast.show("下载文件失败");
      },
    });
  }
};

// èŽ·å–文件类型
const getFileType = (fileName: string) => {
  if (!fileName) return "unknown";
  const extension = fileName.split(".").pop()?.toLowerCase();
  switch (extension) {
    case "jpg":
    case "jpeg":
    case "png":
    case "gif":
    case "bmp":
    case "webp":
      return "image";
    case "pdf":
      return "pdf";
    case "doc":
    case "docx":
      return "word";
    case "xls":
    case "xlsx":
      return "excel";
    case "ppt":
    case "pptx":
      return "powerpoint";
    case "txt":
      return "text";
    case "zip":
    case "rar":
      return "archive";
    default:
      return "file";
  }
};

// æ ¼å¼åŒ–文件大小
const formatFileSize = (size: number) => {
  if (size < 1024) return size + " B";
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + " KB";
  return (size / (1024 * 1024)).toFixed(1) + " MB";
};

// æ ¼å¼åŒ–时间
const formatTime = (time: string) => {
  const date = new Date(time);
  return date.toLocaleString();
};

onMounted(() => {
  getAttachmentList();
});
</script>

<style lang="scss" scoped>
.attachment-container {
  padding: 12px;
  background: #f3f9f8;
  min-height: 100vh;
}

.header-actions {
  margin-bottom: 12px;

  :deep(.add_btn) {
    background: #0d867f;
    color: white;
    border: none;
  }
}

.attachment-list {
  .attachment-card {
    margin-bottom: 12px;
    border-radius: 4px;
  }
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 12px;

  .attachment-info {
    flex: 1;

    .attachment-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
      word-break: break-all;
    }

    .attachment-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: #999;
    }
  }

  .attachment-actions {
    margin-left: 12px;

    :deep(.wd-icon) {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>

 src/pages/production/wire/report/wire.vue

@@ -22,6 +22,9 @@
        </template>
        <ProductionCard :data="cardAttr" :value="item" />
        <template #footer>
          <wd-button size="small" plain @click="toAttachment(item.id)" style="margin-right: 10px">
            é™„件
          </wd-button>
          <wd-button size="small" plain @click="toCheck(item.id)">自检</wd-button>
        </template>
      </wd-card>
@@ -120,6 +123,12 @@
  dialog.visible = false;
};

const toAttachment = (id: number) => {
  uni.navigateTo({
    url: `/pages/production/wire/attachment/index?reportId=${id}`,
  });
};

const toCheck = (id: number) => {
  uni.navigateTo({
    url: `/pages/production/wire/selfInspect/index?id=${id}`,