军泰 1.产品维护上传修改

gaoluyang

2026-04-07 62e9986b6d2d20e61a3b65745af33165c9f1534b

 src/views/basicData/product/index.vue

@@ -144,10 +144,11 @@
            :data="upload.data"
            :on-success="handleDrawingUploadSuccess"
            :on-remove="handleDrawingRemove"
            :on-preview="handleDrawingPreview"
            :before-upload="handleDrawingBeforeUpload"
            :limit="5"
            accept=".pdf,.jpg,.jpeg,.png,.dwg"
            list-type="picture-card"
            list-type="text"
          >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            <template #tip>
@@ -156,6 +157,29 @@
              </div>
            </template>
          </el-upload>
          <div v-if="drawingFileList.length" class="drawing-preview-list">
            <div
              v-for="file in drawingFileList"
              :key="file.uid || file.id || file.name"
              class="drawing-preview-card"
              @click="handleDrawingPreview(file)"
            >
              <img
                v-if="isImageFile(file)"
                :src="getDrawingFileUrl(file)"
                :alt="file.name"
                class="drawing-preview-image"
              />
              <div
                v-else
                class="drawing-preview-placeholder"
                :class="`is-${getDrawingFileExtension(file)}`"
              >
                {{ getDrawingFileExtension(file).toUpperCase() }}
              </div>
              <div class="drawing-preview-name">{{ file.name }}</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </FormDialog>
@@ -194,6 +218,7 @@
        </template>
      </el-upload>
    </FormDialog>
    <filePreview ref="filePreviewRef" />
  </div>
</template>

@@ -204,6 +229,7 @@
import { Plus } from "@element-plus/icons-vue";
import { getToken } from "@/utils/auth.js";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import filePreview from "@/components/filePreview/index.vue";
import {
  addOrEditProductModel,
  delProduct,
@@ -215,6 +241,7 @@

const { proxy } = getCurrentInstance();
const importUploadRef = ref(null);
const filePreviewRef = ref(null);

const modelDia = ref(false);
const importDia = ref(false);
@@ -617,6 +644,9 @@
  console.log('上传成功响应', response);
  console.log('response.data', response.data);
  if (response.code === 200) {
    file.url = response.data?.tempPath || file.url;
    file.name = response.data?.originalName || file.name;
    file.tempId = response.data?.tempId;
    // 支持多文件，追加到数组
    modelForm.value.tempFileIds.push(response.data?.tempId);
    modelForm.value.salesLedgerFiles.push({
@@ -629,6 +659,32 @@
  } else {
    proxy.$modal.msgError(response.msg || "上传失败");
  }
};

const getDrawingFileUrl = (file) => {
  return file.url || file.response?.data?.tempPath || file.tempPath || "";
};

const getDrawingFileName = (file) => {
  return file.name || file.originalName || getDrawingFileUrl(file).split("/").pop() || "";
};

const getDrawingFileExtension = (file) => {
  const name = getDrawingFileName(file).split("?")[0];
  const nameParts = name.split(".");
  return nameParts.length > 1 ? nameParts.pop().toLowerCase() : "file";
};

const isImageFile = (file) => {
  return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(getDrawingFileExtension(file));
};

const handleDrawingPreview = (file) => {
  const fileUrl = getDrawingFileUrl(file);
  if (!fileUrl) {
    return;
  }
  filePreviewRef.value?.open(fileUrl);
};

const handleDrawingRemove = (file) => {
@@ -698,15 +754,76 @@
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  width: 88px;
  height: 88px;
  text-align: center;
  line-height: 148px;
  line-height: 88px;
}

:deep(.el-upload--picture-card) {
  width: 148px;
  height: 148px;
:deep(.el-upload--text) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;
}

:deep(.el-upload-list--text) {
  margin-top: 8px;
}

.drawing-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.drawing-preview-card {
  width: 120px;
  cursor: pointer;
}

.drawing-preview-image,
.drawing-preview-placeholder {
  width: 120px;
  height: 120px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  background: #f5f7fa;
}

.drawing-preview-image {
  object-fit: cover;
}

.drawing-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #606266;
}

.drawing-preview-placeholder.is-pdf {
  color: #f56c6c;
  background: #fef0f0;
}

.drawing-preview-placeholder.is-dwg {
  color: #409eff;
  background: #ecf5ff;
}

.drawing-preview-name {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #606266;
  word-break: break-all;
}

:deep(.el-upload__tip) {