军泰伟业 1.产品维护加一个备注字段 2.产品维护列表加一个图纸预览

gaoluyang

2026-04-22 2d45e281e59a5ba6881068ac7240e084feed7e04

军泰伟业
1.产品维护加一个备注字段
2.产品维护列表加一个图纸预览

 src/views/basicData/product/index.vue

@@ -64,7 +64,46 @@
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
      ></PIMTable>
      >
        <template #drawingFiles="{ row }">
          <div v-if="row.salesLedgerFiles && row.salesLedgerFiles.length" class="drawing-thumbs-list">
            <div
              v-for="(file, index) in row.salesLedgerFiles.slice(0, 3)"
              :key="index"
              class="drawing-thumb-item"
              @click="handlePreviewFile(file)"
            >
              <img
                v-if="isImageFile(file)"
                :src="getDrawingFileUrl(file)"
                class="drawing-thumb-img"
              />
              <div v-else class="drawing-thumb-placeholder">
                {{ getDrawingFileExtension(file).toUpperCase() }}
              </div>
            </div>
            <div v-if="row.salesLedgerFiles.length > 3" class="drawing-thumb-more">
              +{{ row.salesLedgerFiles.length - 3 }}
            </div>
          </div>
          <div v-else-if="row.drawingFile" class="drawing-thumbs-list">
            <div
              class="drawing-thumb-item"
              @click="handlePreviewDrawing(row.drawingFile)"
            >
              <img
                v-if="isDrawingImageFile(row.drawingFile)"
                :src="row.drawingFile"
                class="drawing-thumb-img"
              />
              <div v-else class="drawing-thumb-placeholder">
                {{ getFileExtensionFromUrl(row.drawingFile).toUpperCase() }}
              </div>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </PIMTable>
    </div>

    <FormDialog
@@ -181,6 +220,16 @@
            </div>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="modelForm.remark"
            placeholder="请输入备注"
            clearable
            type="textarea"
            :rows="3"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </FormDialog>

@@ -237,6 +286,7 @@
  downloadTemplate,
} from "@/api/basicData/product.js";
import { listPage as getProcessRouteList } from "@/api/productionManagement/processRoute.js";
import { delLedgerFile } from "@/api/salesManagement/salesLedger.js";
import ImportExcel from "./ImportExcel/index.vue";

const { proxy } = getCurrentInstance();
@@ -308,6 +358,19 @@
      return typeMap[String(v)] || "info";
    },
  },
  {
    label: "备注",
    prop: "remark",
    minWidth: 150,
    showOverflowTooltip: true,
  },
  {
    label: "图纸",
    prop: "salesLedgerFiles",
    minWidth: 200,
    dataType: "slot",
    slot: "drawingFiles",
  },
    {
        label: "创建时间",
        prop: "createTime",
@@ -346,6 +409,7 @@
    drawingFile: "",
    tempFileIds: [],
    salesLedgerFiles: [],
    remark: "",
  },
  modelRules: {
    productName: [
@@ -367,6 +431,7 @@
  productType: null,
  routeId: null,
  drawingFile: "",
  remark: "",
  tempFileIds: [],
  salesLedgerFiles: [],
});
@@ -686,12 +751,40 @@
  return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(getDrawingFileExtension(file));
};

const isDrawingImageFile = (url) => {
  if (!url) return false;
  const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
  return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext);
};

const getFileExtensionFromUrl = (url) => {
  if (!url) return "file";
  const cleanUrl = url.split("?")[0];
  const parts = cleanUrl.split(".");
  return parts.length > 1 ? parts.pop().toLowerCase() : "file";
};

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

const handlePreviewFile = (file) => {
  const fileUrl = file.url || file.tempPath || "";
  if (!fileUrl) {
    return;
  }
  filePreviewRef.value?.open(fileUrl);
};

const handlePreviewDrawing = (drawingFile) => {
  if (!drawingFile) {
    return;
  }
  filePreviewRef.value?.open(drawingFile);
};

const handleDrawingRemove = (file) => {
@@ -806,6 +899,89 @@
  object-fit: cover;
}

.drawing-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.drawing-file-tag {
  cursor: pointer;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawing-file-tag:hover {
  color: #409eff;
}

.drawing-file-link {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}

.drawing-file-link:hover {
  color: #66b1ff;
}

.drawing-thumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.drawing-thumb-item {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  transition: all 0.2s;
}

.drawing-thumb-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transform: scale(1.05);
}

.drawing-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawing-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #606266;
  background: #f5f7fa;
}

.drawing-thumb-more {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  border-radius: 4px;
  border: 1px dashed #dcdfe6;
}

.drawing-preview-placeholder {
  display: flex;
  align-items: center;