|
|
@@ -134,7 +134,30 @@
|
|
|
<el-table-column label="维修费用" align="center" prop="maintCost" :show-overflow-tooltip="true"/>
|
|
|
<el-table-column label="维修时长" align="center" prop="maintDuration" :show-overflow-tooltip="true"/>
|
|
|
<el-table-column label="工艺损失" align="center" prop="processLoss" :show-overflow-tooltip="true"/>
|
|
|
- <el-table-column label="附件" align="center" prop="attachments" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="照片" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.photoUrl"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-picture"
|
|
|
+ @click="handleViewPhotos(scope.row.photoUrl)">
|
|
|
+ 查看
|
|
|
+ </el-button>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="附件" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.attachments"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-paperclip"
|
|
|
+ @click="handleViewAttachments(scope.row.attachments)">
|
|
|
+ 查看
|
|
|
+ </el-button>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
<el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
|
|
|
<el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
|
|
|
@@ -226,8 +249,37 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
+ <el-form-item label="照片" prop="photoUrl">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :action="photoUpload.url"
|
|
|
+ :headers="photoUpload.headers"
|
|
|
+ :data="photoUpload.data"
|
|
|
+ :on-success="handlePhotoSuccess"
|
|
|
+ :on-remove="handlePhotoRemove"
|
|
|
+ :before-upload="beforePhotoUpload"
|
|
|
+ :file-list="photoFileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ multiple
|
|
|
+ accept="image/*">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且单个不超过15MB</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="附件" prop="attachments">
|
|
|
- <el-input v-model="processForm.attachments" placeholder="请输入附件" />
|
|
|
+ <el-upload
|
|
|
+ class="attachment-upload"
|
|
|
+ :action="attachmentUpload.url"
|
|
|
+ :headers="attachmentUpload.headers"
|
|
|
+ :data="attachmentUpload.data"
|
|
|
+ :on-success="handleAttachmentSuccess"
|
|
|
+ :on-remove="handleAttachmentRemove"
|
|
|
+ :before-upload="beforeAttachmentUpload"
|
|
|
+ :file-list="attachmentFileList"
|
|
|
+ multiple>
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">可上传多个文件，单个不超过50MB</div>
|
|
|
+ </el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="备注" prop="remarks">
|
|
|
<el-input v-model="processForm.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
|
|
|
@@ -347,8 +399,37 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
+ <el-form-item label="照片" prop="photoUrl">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :action="photoUpload.url"
|
|
|
+ :headers="photoUpload.headers"
|
|
|
+ :data="photoUpload.data"
|
|
|
+ :on-success="handlePhotoSuccess"
|
|
|
+ :on-remove="handlePhotoRemove"
|
|
|
+ :before-upload="beforePhotoUpload"
|
|
|
+ :file-list="photoFileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ multiple
|
|
|
+ accept="image/*">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且单个不超过15MB</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="附件" prop="attachments">
|
|
|
- <el-input v-model="processForm.attachments" placeholder="请输入附件" />
|
|
|
+ <el-upload
|
|
|
+ class="attachment-upload"
|
|
|
+ :action="attachmentUpload.url"
|
|
|
+ :headers="attachmentUpload.headers"
|
|
|
+ :data="attachmentUpload.data"
|
|
|
+ :on-success="handleAttachmentSuccess"
|
|
|
+ :on-remove="handleAttachmentRemove"
|
|
|
+ :before-upload="beforeAttachmentUpload"
|
|
|
+ :file-list="attachmentFileList"
|
|
|
+ multiple>
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">可上传多个文件，单个不超过50MB</div>
|
|
|
+ </el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="备注" prop="remarks">
|
|
|
<el-input v-model="processForm.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
|
|
|
@@ -397,6 +478,41 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
+ <!-- 照片预览对话框 -->
|
|
|
+ <el-dialog title="照片预览" :visible.sync="photoPreviewVisible" width="800px" append-to-body>
|
|
|
+ <div class="photo-preview-container">
|
|
|
+ <div v-for="(photo, index) in previewPhotoList" :key="index" class="photo-item">
|
|
|
+ <el-image
|
|
|
+ :src="photo.url"
|
|
|
+ :preview-src-list="previewPhotoList.map(p => p.url)"
|
|
|
+ fit="contain"
|
|
|
+ style="width: 200px; height: 200px;">
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="previewPhotoList.length === 0" style="text-align: center; color: #999;">暂无照片</div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="photoPreviewVisible = false">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 附件查看对话框 -->
|
|
|
+ <el-dialog title="附件列表" :visible.sync="attachmentDialogVisible" width="600px" append-to-body>
|
|
|
+ <el-table :data="viewAttachmentList" border size="small">
|
|
|
+ <el-table-column label="序号" type="index" width="60" align="center" />
|
|
|
+ <el-table-column label="文件名" prop="name" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column label="操作" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" icon="el-icon-download" @click="downloadAttachment(scope.row)">下载</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div v-if="viewAttachmentList.length === 0" style="text-align: center; color: #999; padding: 20px;">暂无附件</div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="attachmentDialogVisible = false">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -447,6 +563,28 @@ export default {
|
|
|
// 维修计划详情对话框
|
|
|
planDetailVisible: false,
|
|
|
planDetailId: null,
|
|
|
+ // 照片上传配置
|
|
|
+ photoUpload: {
|
|
|
+ headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ url: process.env.VUE_APP_BASE_API + "/common/uploadWithPath",
|
|
|
+ data: { path: "/rel/maint/photo" }
|
|
|
+ },
|
|
|
+ // 附件上传配置
|
|
|
+ attachmentUpload: {
|
|
|
+ headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ url: process.env.VUE_APP_BASE_API + "/common/uploadWithPath",
|
|
|
+ data: { path: "/rel/maint/attachment" }
|
|
|
+ },
|
|
|
+ // 照片文件列表
|
|
|
+ photoFileList: [],
|
|
|
+ // 附件文件列表
|
|
|
+ attachmentFileList: [],
|
|
|
+ // 照片预览对话框
|
|
|
+ photoPreviewVisible: false,
|
|
|
+ previewPhotoList: [],
|
|
|
+ // 附件查看对话框
|
|
|
+ attachmentDialogVisible: false,
|
|
|
+ viewAttachmentList: [],
|
|
|
// 用户导入参数
|
|
|
upload: {
|
|
|
// 是否显示弹出层（用户导入）
|
|
|
@@ -607,6 +745,9 @@ export default {
|
|
|
this.processForm.cannotMaintOrReplace = false;
|
|
|
this.processForm.memoReason = null;
|
|
|
this.processForm.memoTime = null;
|
|
|
+ // 初始化照片和附件文件列表
|
|
|
+ this.photoFileList = this.parseFileList(this.processForm.photoUrl, 'image');
|
|
|
+ this.attachmentFileList = this.parseFileList(this.processForm.attachments, 'file');
|
|
|
// 将数字字段的 null 值转换为 undefined，并确保是数字类型，以便 el-input-number 正常工作
|
|
|
if (this.processForm.maintCost === null || this.processForm.maintCost === '' || this.processForm.maintCost === undefined) {
|
|
|
this.processForm.maintCost = undefined;
|
|
|
@@ -652,6 +793,7 @@ export default {
|
|
|
maintDuration: null,
|
|
|
processLoss: null,
|
|
|
attachments: null,
|
|
|
+ photoUrl: null,
|
|
|
remarks: null,
|
|
|
needMaintOrReplace: false,
|
|
|
newMaintType: null,
|
|
|
@@ -660,6 +802,9 @@ export default {
|
|
|
memoReason: null,
|
|
|
memoTime: null
|
|
|
};
|
|
|
+ // 清空文件列表
|
|
|
+ this.photoFileList = [];
|
|
|
+ this.attachmentFileList = [];
|
|
|
if (this.$refs.processInspectForm) {
|
|
|
this.$refs.processInspectForm.resetFields();
|
|
|
}
|
|
|
@@ -880,6 +1025,108 @@ export default {
|
|
|
handleViewPlan(planId) {
|
|
|
this.planDetailId = planId;
|
|
|
this.planDetailVisible = true;
|
|
|
+ },
|
|
|
+ /** 解析文件URL字符串为文件列表 */
|
|
|
+ parseFileList(urlStr, type) {
|
|
|
+ if (!urlStr) return [];
|
|
|
+ const urls = urlStr.split(',').filter(url => url.trim());
|
|
|
+ return urls.map((url, index) => {
|
|
|
+ const fullUrl = url.startsWith('http') ? url : process.env.VUE_APP_BASE_API + url;
|
|
|
+ return {
|
|
|
+ name: type === 'image' ? `照片${index + 1}` : this.getFileNameFromUrl(url),
|
|
|
+ url: fullUrl,
|
|
|
+ path: url
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 从URL中获取文件名 */
|
|
|
+ getFileNameFromUrl(url) {
|
|
|
+ if (!url) return '';
|
|
|
+ const parts = url.split('/');
|
|
|
+ return parts[parts.length - 1] || '附件';
|
|
|
+ },
|
|
|
+ /** 照片上传前校验 */
|
|
|
+ beforePhotoUpload(file) {
|
|
|
+ const isImage = file.type.startsWith('image/');
|
|
|
+ const isLt15M = file.size / 1024 / 1024 < 15;
|
|
|
+ if (!isImage) {
|
|
|
+ this.$message.error('只能上传图片文件!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt15M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 15MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ /** 照片上传成功 */
|
|
|
+ handlePhotoSuccess(response, file, fileList) {
|
|
|
+ if (response && response.fileName) {
|
|
|
+ const currentUrls = this.processForm.photoUrl ? this.processForm.photoUrl.split(',').filter(u => u) : [];
|
|
|
+ currentUrls.push(response.fileName);
|
|
|
+ this.processForm.photoUrl = currentUrls.join(',');
|
|
|
+ this.$message.success('照片上传成功');
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '上传失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 照片移除 */
|
|
|
+ handlePhotoRemove(file, fileList) {
|
|
|
+ const path = file.path || file.response?.fileName;
|
|
|
+ if (path && this.processForm.photoUrl) {
|
|
|
+ const urls = this.processForm.photoUrl.split(',').filter(u => u && u !== path);
|
|
|
+ this.processForm.photoUrl = urls.join(',');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 附件上传前校验 */
|
|
|
+ beforeAttachmentUpload(file) {
|
|
|
+ const isLt50M = file.size / 1024 / 1024 < 50;
|
|
|
+ if (!isLt50M) {
|
|
|
+ this.$message.error('上传文件大小不能超过 50MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ /** 附件上传成功 */
|
|
|
+ handleAttachmentSuccess(response, file, fileList) {
|
|
|
+ if (response && response.fileName) {
|
|
|
+ const currentUrls = this.processForm.attachments ? this.processForm.attachments.split(',').filter(u => u) : [];
|
|
|
+ currentUrls.push(response.fileName);
|
|
|
+ this.processForm.attachments = currentUrls.join(',');
|
|
|
+ this.$message.success('附件上传成功');
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '上传失败');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 附件移除 */
|
|
|
+ handleAttachmentRemove(file, fileList) {
|
|
|
+ const path = file.path || file.response?.fileName;
|
|
|
+ if (path && this.processForm.attachments) {
|
|
|
+ const urls = this.processForm.attachments.split(',').filter(u => u && u !== path);
|
|
|
+ this.processForm.attachments = urls.join(',');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 查看照片 */
|
|
|
+ handleViewPhotos(photoUrl) {
|
|
|
+ this.previewPhotoList = this.parseFileList(photoUrl, 'image');
|
|
|
+ this.photoPreviewVisible = true;
|
|
|
+ },
|
|
|
+ /** 查看附件 */
|
|
|
+ handleViewAttachments(attachments) {
|
|
|
+ this.viewAttachmentList = this.parseFileList(attachments, 'file');
|
|
|
+ this.attachmentDialogVisible = true;
|
|
|
+ },
|
|
|
+ /** 下载附件 */
|
|
|
+ downloadAttachment(file) {
|
|
|
+ if (file.url) {
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = file.url;
|
|
|
+ link.download = file.name || '附件';
|
|
|
+ link.target = '_blank';
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -898,4 +1145,35 @@ export default {
|
|
|
::v-deep .el-form {
|
|
|
padding-top: 0;
|
|
|
}
|
|
|
+
|
|
|
+/* 照片上传组件样式 */
|
|
|
+.upload-demo ::v-deep .el-upload--picture-card {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-demo ::v-deep .el-upload-list--picture-card .el-upload-list__item {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 附件上传组件样式 */
|
|
|
+.attachment-upload ::v-deep .el-upload-list__item {
|
|
|
+ transition: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 照片预览容器样式 */
|
|
|
+.photo-preview-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.photo-preview-container .photo-item {
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
</style>
|
