| | |
| | | <view v-else class="info-value">{{ formData.daa020 }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料编码</view> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="ItemList" |
| | | @change="onItemChange"> |
| | | <view class="picker-value">{{ ItemList[ItemIndex] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.itemNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">工单单号</view> |
| | | <picker v-if="isUpdate" class="picker-input" name="selector" :range="DAA001List" |
| | | @change="onDaa001Change"> |
| | | <view class="picker-value">{{ DAA001List[DAA001Index] || '请选择' }}</view> |
| | | </picker> |
| | | <view v-else class="info-value">{{ formData.billNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料编码</view> |
| | | <view class="info-value">{{ formData.itemNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料名称</view> |
| | |
| | | <view v-if="item.result==null || item.result=='未完成'" class="watermark pending"> |
| | | {{ getStatusText(item.result) }} |
| | | </view> |
| | | <view class="description-text">{{ item.projName }}</view> |
| | | <view class="description-text">{{ getInspectionDescription(item) }}</view> |
| | | </td> |
| | | <td> |
| | | <button v-if="item.isCheck >= item.levelNum" class="record-btn" @click="toDetail(item)">查看</button> |
| | |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 操作按钮 --> |
| | | <view class="action-buttons"> |
| | | <button class="action-btn primary" v-if="isUpdate && !isShowTable" @click="getItem">创建检验单并生成部分默认值</button> |
| | | <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button> |
| | | <button class="action-btn danger" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">删除单据</button> |
| | | <button class="action-btn warning" v-if="!isUpdate && !isShowTable" @click="saveRemarks">添加不合格描述</button> |
| | | <button class="action-btn primary" v-if="isShowTable" @click="getTable">获取检验项目</button> |
| | | <button class="action-btn primary" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button> |
| | | <button class="action-btn success" v-if="!isUpdate && !isShowTable" @click="getGenUpdate">获取检验项目</button> |
| | | <button class="action-btn success" v-if="!isUpdate && !isShowTable" @click="submitInspection">提交检验</button> |
| | | </view> |
| | | <!-- 操作按钮 --> |
| | | <view class="action-buttons"> |
| | | <!-- 新建单据时的创建按钮 --> |
| | | <button class="action-btn primary" v-if="isUpdate && !isShowTable" @click="save"> |
| | | 创建检验单并生成部分默认值 |
| | | </button> |
| | | |
| | | <!-- 已有单据的操作按钮 --> |
| | | <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="toImage">上传/查看图片</button> |
| | | <button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="viewAttachmentInfo">查看附件信息</button> |
| | | |
| | | <button class="action-btn danger" v-if="!isUpdate && !formData.fcheckResu && !isShowTable && formData.fsubmit !== 1" @click="removeXJ">删除单据</button> |
| | | <button class="action-btn warning" v-if="!isUpdate && !isShowTable && formData.fsubmit !== 1" @click="saveRemarks">添加不合格描述</button> |
| | | |
| | | <!-- 检验项目管理按钮 --> |
| | | <button class="action-btn primary" v-if="isShowTable" @click="getTable">获取检验项目</button> |
| | | <button class="action-btn primary" v-if="isShowTable && isUpdate" @click="saveTable">生成检验项目</button> |
| | | <button class="action-btn success" v-if="!isUpdate && !isShowTable && formData.fsubmit !== 1" @click="getGenUpdate">获取检验项目</button> |
| | | <button class="action-btn success" v-if="!isUpdate && !isShowTable && formData.fsubmit !== 1" @click="submitInspection">提交检验</button> |
| | | </view> |
| | | <!-- 修改不合格描述弹出框 --> |
| | | <view v-if="remarksPopup" class="overlay"> |
| | | <view class="popup"> |
| | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 附件列表弹窗 --> |
| | | <view v-if="showAttachmentPopup" class="overlay"> |
| | | <view class="popup attachment-list-popup"> |
| | | <div class="attachment-popup-header"> |
| | | <h3 class="attachment-popup-title">附件列表</h3> |
| | | <button class="attachment-close-btn" @click="closeAttachmentPopup">关闭</button> |
| | | </div> |
| | | |
| | | <div class="attachment-popup-content"> |
| | | <div v-if="attachmentsLoading" class="attachment-loading"> |
| | | <div class="loading-spinner"></div> |
| | | <span class="loading-text">正在加载附件...</span> |
| | | </div> |
| | | |
| | | <div v-else-if="attachments.length === 0" class="attachment-empty"> |
| | | <div class="empty-icon">📁</div> |
| | | <div class="empty-text">暂无附件</div> |
| | | <div class="empty-hint">该物料暂未上传任何附件</div> |
| | | </div> |
| | | |
| | | <div v-else class="attachment-list"> |
| | | <div v-for="item in attachments" :key="item.id" class="attachment-item"> |
| | | <div class="attachment-info"> |
| | | <div class="file-type-badge" :class="getFileTypeClass(item.fattach)"> |
| | | {{ getFileTypeIcon(item.fattach) }} |
| | | </div> |
| | | <div class="attachment-details"> |
| | | <div class="attachment-name" @click="showAttachmentDetailDialog(item)"> |
| | | {{ item.fattach }} |
| | | </div> |
| | | <div class="attachment-meta"> |
| | | <span class="meta-type">{{ item.ftype || '未知类型' }}</span> |
| | | <span v-if="item.fversion" class="meta-version">v{{ item.fversion }}</span> |
| | | <span v-if="item.fdate" class="meta-date">{{ formatDate(item.fdate) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="attachment-actions"> |
| | | <button class="btn-secondary" @click="showAttachmentDetailDialog(item)">详情</button> |
| | | <button v-if="isPreviewable(item.fattach)" |
| | | class="btn-primary" |
| | | @click="previewFtpFile(item)">预览</button> |
| | | <button class="btn-success" @click="downloadAttachment(item)">下载</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 附件详情弹窗 --> |
| | | <view v-if="showAttachmentDetail" class="overlay"> |
| | | <view class="popup attachment-detail-popup"> |
| | | <div class="attachment-popup-header"> |
| | | <h3 class="attachment-popup-title">附件详情</h3> |
| | | <button class="attachment-close-btn" @click="closeAttachmentDetail">返回</button> |
| | | </div> |
| | | |
| | | <div class="attachment-popup-content"> |
| | | <div v-if="selectedAttachment" class="attachment-detail-content"> |
| | | <div class="attachment-detail-header"> |
| | | <div class="file-type-badge large" :class="getFileTypeClass(selectedAttachment.fattach)"> |
| | | {{ getFileTypeIcon(selectedAttachment.fattach) }} |
| | | </div> |
| | | <div class="attachment-detail-title"> |
| | | {{ selectedAttachment.fattach }} |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="attachment-detail-info"> |
| | | <div class="info-row"> |
| | | <div class="info-item"> |
| | | <text class="info-label">ID</text> |
| | | <text class="info-content">{{ Math.trunc(selectedAttachment.id) }}</text> |
| | | </div> |
| | | <div class="info-item"> |
| | | <text class="info-label">类型</text> |
| | | <text class="info-content">{{ selectedAttachment.ftype || '未知类型' }}</text> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="info-row" v-if="selectedAttachment.fversion"> |
| | | <div class="info-item"> |
| | | <text class="info-label">版本</text> |
| | | <text class="info-content">{{ selectedAttachment.fversion }}</text> |
| | | </div> |
| | | <div class="info-item" v-if="selectedAttachment.fdate"> |
| | | <text class="info-label">受控日期</text> |
| | | <text class="info-content">{{ formatDate(selectedAttachment.fdate) }}</text> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="info-row" v-if="selectedAttachment.createBy"> |
| | | <div class="info-item"> |
| | | <text class="info-label">上传人</text> |
| | | <text class="info-content">{{ selectedAttachment.createBy }}</text> |
| | | </div> |
| | | <div class="info-item" v-if="selectedAttachment.createDate"> |
| | | <text class="info-label">上传时间</text> |
| | | <text class="info-content">{{ formatDate(selectedAttachment.createDate) }}</text> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="attachment-detail-actions"> |
| | | <button v-if="isPreviewable(selectedAttachment.fattach)" |
| | | class="btn-primary" |
| | | @click="previewFtpFile(selectedAttachment)">预览</button> |
| | | <button class="btn-success" @click="downloadAttachment(selectedAttachment)">下载</button> |
| | | </div> |
| | | </div> |
| | | <div v-else class="attachment-detail-empty"> |
| | | <div class="empty-icon">❌</div> |
| | | <div class="empty-text">暂无附件信息</div> |
| | | </div> |
| | | </div> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 文件预览弹窗 --> |
| | | <view v-if="showFilePreviewPopup" class="overlay"> |
| | | <view class="popup file-preview-popup"> |
| | | <h3 class="file-preview-title">{{ previewTitle }}</h3> |
| | | <div class="file-preview-divider"></div> |
| | | <div class="file-preview-content"> |
| | | <!-- 文本内容预览 --> |
| | | <pre v-if="previewType === 'text'">{{ previewContent }}</pre> |
| | | |
| | | <!-- 图片内容预览 --> |
| | | <view v-else-if="previewType === 'image'" class="image-preview-container"> |
| | | <image |
| | | :src="previewContent" |
| | | mode="aspectFit" |
| | | class="preview-image-clickable" |
| | | @click="previewImageInPopup" |
| | | style="width: 100%; max-height: 400px; cursor: pointer;" |
| | | /> |
| | | <div class="image-zoom-hint">点击图片可放大查看</div> |
| | | </view> |
| | | |
| | | <!-- Excel 等 Office 文件提示 --> |
| | | <view v-else-if="previewType === 'excel'" class="unsupported-preview"> |
| | | <view class="unsupported-icon">📊</view> |
| | | <view class="unsupported-text">Excel 文件暂不支持在线预览</view> |
| | | <view class="unsupported-hint">请点击下载按钮获取完整文件</view> |
| | | </view> |
| | | |
| | | <!-- 不支持的文件类型 --> |
| | | <view v-else class="unsupported-preview"> |
| | | <view class="unsupported-icon">📄</view> |
| | | <view class="unsupported-text">此文件格式暂不支持预览</view> |
| | | <view class="unsupported-hint">请点击下载按钮获取完整文件</view> |
| | | </view> |
| | | </div> |
| | | <div class="file-preview-actions"> |
| | | <button v-if="previewType !== 'text'" class="file-preview-btn download-btn" @click="downloadPreviewFile">📥 下载文件</button> |
| | | <button class="file-preview-btn close-btn" @click="closeFilePreview">关闭</button> |
| | | </div> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | </view> |
| | | </template> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | formData: { |
| | | id: "", |
| | | releaseNo: "", |
| | | createBy: "", |
| | | createDate: "", |
| | | daa020: "", |
| | | itemNo: "", |
| | | billNo: "", |
| | | catQty: "", |
| | | detailMem: "", |
| | | taskNo: "", |
| | | fcheckResu: "", |
| | | boardModel: "", |
| | | planQty: "", |
| | | mocode: "", |
| | | boardStyle: "" |
| | | }, |
| | | formData: { |
| | | id: "", |
| | | releaseNo: "", |
| | | createBy: "", |
| | | createDate: "", |
| | | daa020: "", |
| | | daa002: "", // 添加产品ID字段 |
| | | itemNo: "", |
| | | itemName: "", // 添加物料名称 |
| | | itemModel: "", // 添加规格型号 |
| | | billNo: "", |
| | | catQty: "", |
| | | detailMem: "", |
| | | taskNo: "", |
| | | fcheckResu: "", |
| | | fsubmit: 0, // 添加提交状态字段 |
| | | boardModel: "", |
| | | planQty: "", |
| | | mocode: "", |
| | | boardStyle: "" |
| | | }, |
| | | |
| | | DAA020List: [], |
| | | DAA020Index: -1, |
| | | filteredDAA020List: [], |
| | | |
| | | DAA001List: [], |
| | | DAA001List: [], |
| | | DAA001Index: -1, |
| | | schemeResult: [], |
| | | |
| | | isShowTable: false, |
| | | |
| | | ItemList: [], |
| | | ItemIndex: -1, |
| | | boardItems: [], |
| | | |
| | | |
| | | isShowTable: false, |
| | | |
| | | lineList: [], |
| | | |
| | | lineNo: "", |
| | |
| | | departmentList: [], |
| | | selectedDepartment: '', |
| | | WORKSHOP: '', |
| | | |
| | | // 附件相关数据 |
| | | showAttachmentPopup: false, |
| | | showAttachmentDetail: false, |
| | | showFilePreviewPopup: false, |
| | | attachments: [], |
| | | attachmentsLoading: false, |
| | | selectedAttachment: null, |
| | | previewTitle: '', |
| | | previewContent: '', |
| | | previewType: '', |
| | | previewFileUrl: '' |
| | | |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | |
| | | this.formData.releaseNo = params["releaseNo"]; |
| | | //getQaItemXj02 |
| | | this.init(); |
| | | |
| | | // 如果是从列表页面点击查看附件按钮跳转过来的,自动打开附件弹窗 |
| | | if (params["showAttachments"] === "true") { |
| | | this.$nextTick(() => { |
| | | this.viewAttachmentInfo(); |
| | | }); |
| | | } |
| | | } else { |
| | | //初始化检验单号 |
| | | this.$post({ |
| | |
| | | } |
| | | }, |
| | | |
| | | getInspectionDescription(item) { |
| | | // 取ITEM_MOD字段的值 |
| | | if (item.itemMod && item.itemMod.trim() !== '') { |
| | | return item.itemMod; |
| | | } else { |
| | | return '检验项目详情'; |
| | | } |
| | | }, |
| | | |
| | | removeXJ() { |
| | | if (this.formData.id) { |
| | | this.$post({ |
| | |
| | | this.$showMessage("请先选择检验单号"); |
| | | } |
| | | }, |
| | | getItem() { |
| | | |
| | | save() { |
| | | // 验证必填字段 - 借鉴SJ的验证逻辑,但保持XJ的字段验证 |
| | | if (!this.formData.billNo) { |
| | | this.$showMessage("请选择工单单号"); |
| | | return; |
| | | } |
| | | |
| | | if (!this.formData.itemNo) { |
| | | this.$showMessage("物料信息获取失败,请重新选择工单"); |
| | | return; |
| | | } |
| | | |
| | | if (!this.tableData || this.tableData.length === 0) { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | return; |
| | | } |
| | | |
| | | |
| | | if (!this.formData.billNo) { |
| | | this.$showMessage("请选择工单单号"); |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/XJ/save", |
| | | data: { |
| | | from: this.formData, |
| | | userNo: this.$loginInfo.account, |
| | | items: this.tableData |
| | | } |
| | | }).then(res => { |
| | | this.formData.id = res.data.tbBillList; |
| | | this.$showMessage("生成检验项目成功"); |
| | | this.init(); |
| | | this.isUpdate = false; |
| | | }); |
| | | }, |
| | | const saveData = { |
| | | ReleaseNo: this.formData.releaseNo, |
| | | ItemNo: this.formData.itemNo, |
| | | BillNo: this.formData.billNo, |
| | | DepartmentId: this.selectedDepartment, // 只使用部门ID |
| | | WorkShop: null, // 明确设置为null,避免数据库字段错误 |
| | | ItemId: this.formData.daa002, // 使用工单中的产品ID |
| | | PlanQty: this.formData.planQty, |
| | | CreateBy: this.formData.createBy, |
| | | CreateDate: this.formData.createDate, |
| | | FcheckDate: new Date(), |
| | | Remarks: this.formData.remarks || "" |
| | | }; |
| | | |
| | | // 调试信息 |
| | | console.log("创建检验单数据:", { |
| | | formData: this.formData, |
| | | selectedDepartment: this.selectedDepartment, |
| | | WORKSHOP: this.WORKSHOP, |
| | | saveData: saveData, |
| | | tableData: this.tableData |
| | | }); |
| | | |
| | | this.$post({ |
| | | url: "/XJ/save", |
| | | data: { |
| | | from: saveData, |
| | | userNo: this.$loginInfo.account, |
| | | items: this.tableData |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList) { |
| | | this.formData.id = res.data.tbBillList; |
| | | |
| | | // 如果返回了完整的检验项目信息,更新tableData |
| | | if (res.data.xjDto && res.data.xjDto.items) { |
| | | this.tableData = res.data.xjDto.items; |
| | | } |
| | | |
| | | this.$showMessage("创建检验单并生成默认值成功"); |
| | | this.isUpdate = false; |
| | | |
| | | // 更新formData的其他字段 |
| | | this.formData = { ...this.formData, ...saveData }; |
| | | } else { |
| | | this.$showMessage("创建检验单失败,请检查数据"); |
| | | } |
| | | }).catch(err => { |
| | | console.error("创建检验单错误:", err); |
| | | this.$showMessage("创建检验单失败:" + (err.message || "未知错误")); |
| | | }); |
| | | }, |
| | | |
| | | // 加载部门列表 |
| | | loadDepartments() { |
| | |
| | | }); |
| | | }, |
| | | |
| | | //生产线别选择并初始话工单号 |
| | | //生产线别选择并初始化工单号 |
| | | onDaa020Change(event) { |
| | | //获取生产线别的下标地址 |
| | | this.DAA020Index = event.mp.detail.value; |
| | | |
| | | |
| | | this.lineNo = this.lineList[this.DAA020Index].lineNo; |
| | | |
| | | // 设置线体编号到formData |
| | | this.formData.daa020 = this.lineList[this.DAA020Index].lineName; |
| | | |
| | | this.$post({ |
| | | url: "/XJ/getBoardItem", |
| | | url: "/XJ/getWorkOrderWithItem", // 调用新的API获取工单详细信息 |
| | | data: { |
| | | lineNo: this.lineNo |
| | | } |
| | | }).then(res => { |
| | | //填充工单号的数据源 |
| | | this.boardItems = res.data.tbBillList; |
| | | this.ItemList = this.boardItems.map(item => item.itemNo); |
| | | //变为默认空值的状态 |
| | | this.ItemIndex = -1; |
| | | }) |
| | | |
| | | }, |
| | | onItemChange(event) { |
| | | this.ItemIndex = event.mp.detail.value; |
| | | this.formData.itemNo = this.boardItems[this.ItemIndex].itemNo;//主要是改这里 |
| | | this.formData.itemId = this.boardItems[this.ItemIndex].id;//主要是改这里 |
| | | this.formData.itemName = this.boardItems[this.ItemIndex].itemName;//主要是改这里 |
| | | this.formData.itemModel = this.boardItems[this.ItemIndex].itemModel;//主要是改这里 |
| | | this.$post({ |
| | | url: "/XJ/getDaa001", |
| | | data: { |
| | | daa020: this.lineNo, |
| | | item: this.formData.itemNo |
| | | daa020: this.lineNo |
| | | } |
| | | }).then(res => { |
| | | //填充工单号的数据源 |
| | | this.schemeResult = res.data.tbBillList; |
| | | this.DAA001List = this.schemeResult.map(s => s.daa001); |
| | | this.DAA001List = this.schemeResult.map(s => s.daa001); // 修改为小写 |
| | | //变为默认空值的状态 |
| | | this.DAA001Index = -1; |
| | | |
| | | |
| | | this.formData.billNo = ""; |
| | | // 清空物料信息 |
| | | this.formData.itemNo = ""; |
| | | this.formData.itemName = ""; |
| | | this.formData.itemModel = ""; |
| | | this.formData.planQty = ""; |
| | | this.tableData = []; |
| | | }) |
| | | |
| | | }, |
| | | //选取工单填充物料号和其他信息 |
| | | |
| | | //选取工单填充物料号和其他信息 |
| | | onDaa001Change(event) { |
| | | this.DAA001Index = event.mp.detail.value; |
| | | this.formData.billNo = this.schemeResult[this.DAA001Index].daa001; |
| | | this.formData.planQty = this.schemeResult[this.DAA001Index].daa008; |
| | | //表单中的部分字段赋值 |
| | | const selectedWorkOrder = this.schemeResult[this.DAA001Index]; |
| | | |
| | | // 设置工单信息 |
| | | this.formData.billNo = selectedWorkOrder.daa001; // 修改为小写 |
| | | this.formData.planQty = selectedWorkOrder.daa008; // 修改为小写 |
| | | this.formData.daa002 = selectedWorkOrder.daa002; // 设置产品ID |
| | | |
| | | // 从工单数据中获取物料信息 |
| | | this.formData.itemNo = selectedWorkOrder.itemNo; // 修改为小写 |
| | | this.formData.itemName = selectedWorkOrder.itemName; // 修改为小写 |
| | | this.formData.itemModel = selectedWorkOrder.itemModel; // 修改为小写 |
| | | |
| | | // 获取检验项目 |
| | | this.$post({ |
| | | url: "/XJ/getItem", |
| | | url: "/XJ/setJYItem", |
| | | data: { |
| | | daa001: this.formData.billNo |
| | | itemNo: this.formData.itemNo |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | //当返回的结果集为空时置空原有的值 |
| | | if (!data) { |
| | | this.formData.billNo = ""; |
| | | this.formData.itemNo = ""; |
| | | this.formData.planQty = ""; |
| | | if (res.data.tbBillList.length > 0) { |
| | | this.tableData = res.data.tbBillList; |
| | | this.isSubmit = false; |
| | | } else { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | return; |
| | | } |
| | | |
| | | this.$post({ |
| | | url: "/XJ/setJYItem", |
| | | data: { |
| | | itemNo: this.formData.itemNo |
| | | } |
| | | }).then(res => { |
| | | if (res.data.tbBillList.length > 0) { |
| | | this.tableData = res.data.tbBillList; // 在箭头函数中,this 指向外层作用域的 this |
| | | this.isSubmit = false; |
| | | } else { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | } |
| | | }); |
| | | }).catch(err => { |
| | | console.error("获取检验项目错误:", err); |
| | | this.$showMessage("获取检验项目失败"); |
| | | this.tableData = []; |
| | | }); |
| | | }, |
| | | init() { |
| | | this.$post({ |
| | | url: "/XJ/getPage", |
| | | data: { |
| | | id: this.formData.id, |
| | | pageIndex: 1, |
| | | limit: 1, |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | if (data) { |
| | | this.formData = data; |
| | | |
| | | this.$post({ |
| | | url: "/XJ/getJYItem", |
| | | data: { |
| | | pid: this.formData.id |
| | | } |
| | | }).then(res1 => { |
| | | let tableData = res1.data.tbBillList |
| | | //当已检验个数都不为空时按照检测结构排序 |
| | | tableData.sort((a, b) => { |
| | | if (a.result === '未完成' && b.result === '合格') { |
| | | return -1; |
| | | } else if (a.result === '合格' && b.result === '未完成') { |
| | | return 1; |
| | | } else { |
| | | return 0; |
| | | } |
| | | }); |
| | | this.tableData = tableData; |
| | | if (this.tableData.length === 0) { |
| | | this.isShowTable = true; |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }, |
| | | init() { |
| | | this.$post({ |
| | | url: "/XJ/getPage", |
| | | data: { |
| | | id: this.formData.id, |
| | | pageIndex: 1, |
| | | limit: 1, |
| | | } |
| | | }).then(res => { |
| | | let data = res.data.tbBillList[0]; |
| | | if (data) { |
| | | this.formData = data; |
| | | |
| | | // 不再根据fsubmit字段修改isUpdate状态 |
| | | // 而是通过按钮的v-if条件来控制显示 |
| | | |
| | | this.$post({ |
| | | url: "/XJ/getJYItem", |
| | | data: { |
| | | pid: this.formData.id |
| | | } |
| | | }).then(res1 => { |
| | | let tableData = res1.data.tbBillList |
| | | //当已检验个数都不为空时按照检测结构排序 |
| | | tableData.sort((a, b) => { |
| | | if (a.result === '未完成' && b.result === '合格') { |
| | | return -1; |
| | | } else if (a.result === '合格' && b.result === '未完成') { |
| | | return 1; |
| | | } else { |
| | | return 0; |
| | | } |
| | | }); |
| | | this.tableData = tableData; |
| | | if (this.tableData.length === 0) { |
| | | this.isShowTable = true; |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }, |
| | | toDetail(item) { |
| | | if (this.isUpdate) { |
| | | uni.showToast({ |
| | |
| | | this.$showMessage(res.data.message || "获取失败"); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | // 附件相关方法 |
| | | viewAttachmentInfo() { |
| | | this.showAttachmentPopup = true; |
| | | this.attachmentsLoading = true; |
| | | this.attachments = []; |
| | | this.$post({ |
| | | url: "/XJ/getAttachments", |
| | | data: { itemNo: this.formData.itemNo } |
| | | }).then(res => { |
| | | this.attachmentsLoading = false; |
| | | if (res.status === 0) { |
| | | this.attachments = res.data.tbBillList; |
| | | // 为每个附件设置默认可用状态 |
| | | this.attachments.forEach((item, index) => { |
| | | this.$set(item, 'ftpAvailable', true); |
| | | this.$set(item, 'checking', false); |
| | | }); |
| | | } else if (res.status === 1 && res.message === "该检验单未上传附件信息!") { |
| | | uni.showToast({ title: res.message, icon: "none" }); |
| | | } else { |
| | | uni.showToast({ title: "获取附件失败", icon: "none" }); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | closeAttachmentPopup() { |
| | | this.showAttachmentPopup = false; |
| | | }, |
| | | |
| | | showAttachmentDetailDialog(item) { |
| | | this.selectedAttachment = item; |
| | | this.showAttachmentPopup = false; |
| | | this.showAttachmentDetail = true; |
| | | }, |
| | | |
| | | closeAttachmentDetail() { |
| | | this.showAttachmentDetail = false; |
| | | this.selectedAttachment = null; |
| | | this.showAttachmentPopup = true; |
| | | }, |
| | | |
| | | isPreviewable(filename) { |
| | | if (!filename) return false; |
| | | const ext = filename.trim().split('.').pop().toLowerCase(); |
| | | return [ |
| | | 'pdf', |
| | | 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', |
| | | 'txt', 'log', 'md', |
| | | 'doc', 'docx', |
| | | 'xls', 'xlsx', |
| | | 'ppt', 'pptx', |
| | | 'csv' |
| | | ].includes(ext); |
| | | }, |
| | | |
| | | // 获取文件类型图标 |
| | | getFileTypeIcon(filename) { |
| | | if (!filename) return '📄'; |
| | | const ext = filename.trim().split('.').pop().toLowerCase(); |
| | | const iconMap = { |
| | | 'pdf': '📕', |
| | | 'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️', 'bmp': '🖼️', 'webp': '🖼️', |
| | | 'txt': '📝', 'log': '📝', 'md': '📝', |
| | | 'doc': '📘', 'docx': '📘', |
| | | 'xls': '📊', 'xlsx': '📊', |
| | | 'ppt': '📙', 'pptx': '📙', |
| | | 'csv': '📊', |
| | | 'zip': '📦', 'rar': '📦', '7z': '📦', |
| | | 'dwg': '🏗️', 'dxf': '🏗️' |
| | | }; |
| | | return iconMap[ext] || '📄'; |
| | | }, |
| | | |
| | | // 获取文件类型CSS类 |
| | | getFileTypeClass(filename) { |
| | | if (!filename) return 'file-unknown'; |
| | | const ext = filename.trim().split('.').pop().toLowerCase(); |
| | | const classMap = { |
| | | 'pdf': 'file-pdf', |
| | | 'jpg': 'file-image', 'jpeg': 'file-image', 'png': 'file-image', 'gif': 'file-image', 'bmp': 'file-image', 'webp': 'file-image', |
| | | 'txt': 'file-text', 'log': 'file-text', 'md': 'file-text', |
| | | 'doc': 'file-word', 'docx': 'file-word', |
| | | 'xls': 'file-excel', 'xlsx': 'file-excel', |
| | | 'ppt': 'file-powerpoint', 'pptx': 'file-powerpoint', |
| | | 'csv': 'file-excel', |
| | | 'zip': 'file-archive', 'rar': 'file-archive', '7z': 'file-archive', |
| | | 'dwg': 'file-cad', 'dxf': 'file-cad' |
| | | }; |
| | | return classMap[ext] || 'file-unknown'; |
| | | }, |
| | | |
| | | // 格式化日期 |
| | | formatDate(dateString) { |
| | | if (!dateString) return ''; |
| | | try { |
| | | const date = new Date(dateString); |
| | | return date.toLocaleDateString('zh-CN', { |
| | | year: 'numeric', |
| | | month: '2-digit', |
| | | day: '2-digit', |
| | | hour: '2-digit', |
| | | minute: '2-digit' |
| | | }); |
| | | } catch (e) { |
| | | return dateString; |
| | | } |
| | | }, |
| | | |
| | | downloadAttachment(item) { |
| | | const fileName = item.fattach.replace(/[\s\u3000\r\n]+/g, '').trim(); |
| | | const downloadUrl = this.$store.state.serverInfo.serverAPI + "/XJ/DownloadFtpFile?itemNo=" + |
| | | encodeURIComponent(item.itemNo) + "&fileName=" + encodeURIComponent(fileName) + |
| | | "&ftpServer=" + encodeURIComponent(this.$store.state.serverInfo.ftpServer); |
| | | |
| | | uni.downloadFile({ |
| | | url: downloadUrl, |
| | | success: (res) => { |
| | | if (res.statusCode === 200) { |
| | | uni.showToast({ title: '下载成功', icon: 'success' }); |
| | | } else { |
| | | uni.showToast({ title: '下载失败', icon: 'none' }); |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | console.error('下载失败:', err); |
| | | uni.showToast({ title: '下载失败,请重试', icon: 'none' }); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | previewFtpFile(item) { |
| | | const fileName = item.fattach.replace(/[\s\u3000\r\n]+/g, '').trim(); |
| | | const fileExt = fileName.split('.').pop().toLowerCase(); |
| | | |
| | | if (!this.isPreviewable(fileName)) { |
| | | uni.showModal({ |
| | | title: '不支持预览', |
| | | content: '该文件类型不支持在线预览,请下载后查看', |
| | | showCancel: false |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | const previewUrl = this.$store.state.serverInfo.serverAPI + "/XJ/PreviewFtpFile?itemNo=" + |
| | | encodeURIComponent(item.itemNo) + "&fileName=" + encodeURIComponent(fileName) + |
| | | "&ftpServer=" + encodeURIComponent(this.$store.state.serverInfo.ftpServer); |
| | | |
| | | if (['pdf'].includes(fileExt)) { |
| | | this.previewPdfFile(previewUrl, fileName); |
| | | } else if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(fileExt)) { |
| | | this.previewImageFile(previewUrl, fileName); |
| | | } else if (['txt'].includes(fileExt)) { |
| | | this.previewTextFile(previewUrl, fileName); |
| | | } else { |
| | | this.previewOfficeFile(previewUrl, fileName); |
| | | } |
| | | }, |
| | | |
| | | previewPdfFile(url, fileName) { |
| | | this.previewTitle = fileName; |
| | | this.previewContent = url; |
| | | this.previewType = 'pdf'; |
| | | this.previewFileUrl = url; |
| | | this.showFilePreviewPopup = true; |
| | | this.showAttachmentDetail = false; |
| | | }, |
| | | |
| | | previewImageFile(url, fileName) { |
| | | this.previewTitle = fileName; |
| | | this.previewContent = url; |
| | | this.previewType = 'image'; |
| | | this.previewFileUrl = url; |
| | | this.showFilePreviewPopup = true; |
| | | this.showAttachmentDetail = false; |
| | | }, |
| | | |
| | | previewTextFile(url, fileName) { |
| | | this.previewTitle = fileName; |
| | | this.previewType = 'text'; |
| | | this.previewFileUrl = url; |
| | | this.showFilePreviewPopup = true; |
| | | this.showAttachmentDetail = false; |
| | | |
| | | uni.request({ |
| | | url: url, |
| | | method: 'GET', |
| | | success: (res) => { |
| | | this.previewContent = res.data; |
| | | }, |
| | | fail: (err) => { |
| | | this.previewContent = '预览失败,请下载后查看'; |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | previewOfficeFile(url, fileName) { |
| | | this.previewTitle = fileName; |
| | | this.previewContent = ''; |
| | | this.previewType = 'excel'; |
| | | this.previewFileUrl = url; |
| | | this.showFilePreviewPopup = true; |
| | | this.showAttachmentDetail = false; |
| | | }, |
| | | |
| | | closeFilePreview() { |
| | | this.showFilePreviewPopup = false; |
| | | this.showAttachmentDetail = true; |
| | | }, |
| | | |
| | | downloadPreviewFile() { |
| | | if (this.previewFileUrl && this.selectedAttachment) { |
| | | this.downloadAttachment(this.selectedAttachment); |
| | | } |
| | | }, |
| | | |
| | | previewImageInPopup() { |
| | | // 在新窗口中打开图片进行放大查看 |
| | | if (this.previewContent) { |
| | | uni.previewImage({ |
| | | urls: [this.previewContent], |
| | | current: this.previewContent |
| | | }); |
| | | } |
| | | } |
| | | |
| | | }, |
| | | onShow() { |
| | | //每次进入页面都会执行的方法 |
| | |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.info { |
| | | background-color: #17a2b8; |
| | | color: white; |
| | | } |
| | | |
| | | .action-btn.small { |
| | | padding: 6px 12px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | /* 弹出框样式 */ |
| | | .overlay { |
| | | position: fixed; |
| | |
| | | background-color: white; |
| | | } |
| | | |
| | | /* 附件相关样式 */ |
| | | .no-attachments { |
| | | text-align: center; |
| | | padding: 40px 20px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .attachments-list { |
| | | max-height: 400px; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .attachment-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 12px; |
| | | border: 1px solid #eee; |
| | | border-radius: 4px; |
| | | margin-bottom: 8px; |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | .attachment-info { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 4px; |
| | | } |
| | | |
| | | .attachment-name { |
| | | font-weight: 500; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .attachment-type { |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .attachment-date { |
| | | font-size: 12px; |
| | | color: #95a5a6; |
| | | } |
| | | |
| | | .attachment-actions { |
| | | display: flex; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .popup-actions { |
| | | padding: 20px; |
| | | border-top: 1px solid #eee; |
| | |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | /* 附件弹窗样式 */ |
| | | .attachment-list { |
| | | padding: 0; |
| | | margin: 0; |
| | | list-style: none; |
| | | max-height: 300px; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .attachment-list li { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 12px 0; |
| | | border-bottom: 1px solid #f0f0f0; |
| | | } |
| | | |
| | | .attachment-info { |
| | | flex: 1; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .attachment-name { |
| | | color: #3498db; |
| | | cursor: pointer; |
| | | font-weight: 500; |
| | | transition: color 0.2s; |
| | | display: block; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .attachment-name:hover { |
| | | color: #217dbb; |
| | | text-decoration: underline; |
| | | } |
| | | |
| | | .attachment-meta { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .attachment-type { |
| | | color: #7f8c8d; |
| | | font-style: italic; |
| | | } |
| | | |
| | | .attachment-actions { |
| | | display: flex; |
| | | gap: 8px; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .attachment-list .secondary-btn { |
| | | padding: 4px 10px; |
| | | font-size: 13px; |
| | | border-radius: 3px; |
| | | background: #f5f7fa; |
| | | color: #333; |
| | | border: 1px solid #dbe2ea; |
| | | transition: background 0.2s, color 0.2s; |
| | | } |
| | | |
| | | .attachment-list .secondary-btn:hover { |
| | | background: #e6f0fa; |
| | | color: #1976d2; |
| | | } |
| | | |
| | | .preview-btn { |
| | | background: #e8f5e8 !important; |
| | | color: #2e7d2e !important; |
| | | border-color: #a5d6a5 !important; |
| | | } |
| | | |
| | | .preview-btn:hover { |
| | | background: #d4eecc !important; |
| | | color: #1e5f1e !important; |
| | | } |
| | | |
| | | /* 附件弹窗通用样式 */ |
| | | .attachment-list-popup { |
| | | width: 80vw; |
| | | max-width: 800px; |
| | | max-height: 85vh; |
| | | } |
| | | |
| | | .attachment-detail-popup { |
| | | width: 70vw; |
| | | max-width: 600px; |
| | | } |
| | | |
| | | .attachment-popup-header { |
| | | padding: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | background-color: white; |
| | | } |
| | | |
| | | .attachment-popup-title { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin: 0; |
| | | } |
| | | |
| | | .attachment-close-btn { |
| | | padding: 8px 16px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .attachment-close-btn:hover { |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | .attachment-popup-content { |
| | | padding: 16px; |
| | | max-height: 60vh; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | /* 加载状态 */ |
| | | .attachment-loading { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 40px 20px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .loading-spinner { |
| | | width: 32px; |
| | | height: 32px; |
| | | border: 3px solid #f3f3f3; |
| | | border-top: 3px solid #3498db; |
| | | border-radius: 50%; |
| | | animation: spin 1s linear infinite; |
| | | } |
| | | |
| | | @keyframes spin { |
| | | 0% { transform: rotate(0deg); } |
| | | 100% { transform: rotate(360deg); } |
| | | } |
| | | |
| | | .loading-text { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | /* 空状态 */ |
| | | .attachment-empty { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 40px 20px; |
| | | gap: 12px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .empty-icon { |
| | | font-size: 36px; |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | .empty-text { |
| | | font-size: 16px; |
| | | color: #7f8c8d; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .empty-hint { |
| | | font-size: 14px; |
| | | color: #95a5a6; |
| | | } |
| | | |
| | | /* 附件列表布局 - 按照LLJ的卡片风格 */ |
| | | .attachment-list { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .attachment-item { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | overflow: hidden; |
| | | transition: all 0.3s; |
| | | border: 1px solid #eee; |
| | | } |
| | | |
| | | .attachment-item:hover { |
| | | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .attachment-info { |
| | | padding: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .file-type-badge { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-size: 20px; |
| | | background: #f8f9fa; |
| | | border: 2px solid #e9ecef; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .file-type-badge.large { |
| | | width: 56px; |
| | | height: 56px; |
| | | font-size: 28px; |
| | | } |
| | | |
| | | .file-type-badge.file-pdf { background: #ffe6e6; border-color: #ffcccc; } |
| | | .file-type-badge.file-image { background: #e6f3ff; border-color: #cce7ff; } |
| | | .file-type-badge.file-text { background: #e6ffe6; border-color: #ccffcc; } |
| | | .file-type-badge.file-word { background: #e6f0ff; border-color: #cce0ff; } |
| | | .file-type-badge.file-excel { background: #e6ffe6; border-color: #ccffcc; } |
| | | .file-type-badge.file-powerpoint { background: #fff0e6; border-color: #ffe0cc; } |
| | | .file-type-badge.file-archive { background: #f0e6ff; border-color: #e0ccff; } |
| | | .file-type-badge.file-cad { background: #e6fff0; border-color: #ccffe0; } |
| | | .file-type-badge.file-unknown { background: #f5f5f5; border-color: #e0e0e0; } |
| | | |
| | | .attachment-details { |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .attachment-name { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | cursor: pointer; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | margin-bottom: 8px; |
| | | transition: color 0.2s; |
| | | } |
| | | |
| | | .attachment-name:hover { |
| | | color: #3498db; |
| | | } |
| | | |
| | | .attachment-card-body { |
| | | padding: 16px 20px 20px; |
| | | } |
| | | |
| | | .attachment-meta { |
| | | display: flex; |
| | | gap: 16px; |
| | | font-size: 12px; |
| | | color: #95a5a6; |
| | | } |
| | | |
| | | .meta-type { |
| | | background-color: #ecf0f1; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .meta-version { |
| | | background-color: #e8f5e8; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | color: #2e7d32; |
| | | } |
| | | |
| | | .meta-date { |
| | | background-color: #fff3e0; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | color: #f57c00; |
| | | } |
| | | |
| | | .attachment-actions { |
| | | padding: 12px 16px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 8px; |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | /* 按钮样式 - 按照LLJ风格 */ |
| | | .btn-secondary { |
| | | padding: 8px 16px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | color: #2c3e50; |
| | | flex: 1; |
| | | } |
| | | |
| | | .btn-secondary:hover { |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | .btn-primary { |
| | | padding: 8px 16px; |
| | | border: 1px solid #3498db; |
| | | border-radius: 4px; |
| | | background-color: #3498db; |
| | | color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | flex: 1; |
| | | } |
| | | |
| | | .btn-primary:hover { |
| | | background-color: #2980b9; |
| | | } |
| | | |
| | | .btn-success { |
| | | padding: 8px 16px; |
| | | border: 1px solid #2ecc71; |
| | | border-radius: 4px; |
| | | background-color: #2ecc71; |
| | | color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | flex: 1; |
| | | } |
| | | |
| | | .btn-success:hover { |
| | | background-color: #27ae60; |
| | | } |
| | | |
| | | |
| | | |
| | | /* 附件详情样式 */ |
| | | .attachment-detail-header { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 20px; |
| | | margin-bottom: 20px; |
| | | padding-bottom: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .attachment-detail-title { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | flex: 1; |
| | | word-break: break-all; |
| | | } |
| | | |
| | | .attachment-detail-info { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | margin-bottom: 12px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .info-item { |
| | | flex: 1; |
| | | } |
| | | |
| | | .info-label { |
| | | display: block; |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .info-content { |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | line-height: 1.5; |
| | | } |
| | | |
| | | .attachment-detail-actions { |
| | | padding: 12px 16px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 8px; |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | /* 文件预览弹窗样式 */ |
| | | .file-preview-popup { |
| | | width: 80vw; |
| | | max-width: 800px; |
| | | max-height: 80vh; |
| | | } |
| | | |
| | | .file-preview-title { |
| | | padding: 20px; |
| | | margin: 0; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | border-bottom: 1px solid #eee; |
| | | word-break: break-all; |
| | | } |
| | | |
| | | .file-preview-content { |
| | | padding: 20px; |
| | | max-height: 60vh; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .file-preview-content pre { |
| | | white-space: pre-wrap; |
| | | word-wrap: break-word; |
| | | font-family: 'Courier New', monospace; |
| | | font-size: 12px; |
| | | line-height: 1.4; |
| | | background: #f8f9fa; |
| | | padding: 15px; |
| | | border-radius: 4px; |
| | | border: 1px solid #e9ecef; |
| | | } |
| | | |
| | | .image-preview-container { |
| | | text-align: center; |
| | | } |
| | | |
| | | .image-zoom-hint { |
| | | margin-top: 10px; |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .unsupported-preview { |
| | | text-align: center; |
| | | padding: 40px 20px; |
| | | } |
| | | |
| | | .unsupported-icon { |
| | | font-size: 48px; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .unsupported-text { |
| | | font-size: 16px; |
| | | color: #7f8c8d; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .unsupported-hint { |
| | | font-size: 14px; |
| | | color: #95a5a6; |
| | | } |
| | | |
| | | .file-preview-actions { |
| | | padding: 15px 20px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 10px; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .file-preview-btn { |
| | | padding: 8px 16px; |
| | | border-radius: 4px; |
| | | border: none; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | transition: all 0.2s; |
| | | } |
| | | |
| | | .file-preview-btn.download-btn { |
| | | background: #2ecc71; |
| | | color: white; |
| | | } |
| | | |
| | | .file-preview-btn.close-btn { |
| | | background: #95a5a6; |
| | | color: white; |
| | | } |
| | | |
| | | .file-preview-btn:hover { |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 2px 8px rgba(0,0,0,0.15); |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (max-width: 768px) { |
| | | .info-grid { |
| | |
| | | .action-buttons { |
| | | flex-direction: column; |
| | | } |
| | | |
| | | /* 附件弹窗响应式 */ |
| | | .attachment-list-popup { |
| | | width: 95vw; |
| | | margin: 10px; |
| | | } |
| | | |
| | | .attachment-detail-popup { |
| | | width: 95vw; |
| | | margin: 10px; |
| | | } |
| | | |
| | | .file-preview-popup { |
| | | width: 95vw; |
| | | } |
| | | |
| | | .attachment-grid { |
| | | grid-template-columns: 1fr; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .attachment-card { |
| | | margin: 0; |
| | | } |
| | | |
| | | .attachment-card-actions { |
| | | flex-direction: column; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .action-btn { |
| | | width: 100%; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .attachment-detail-actions { |
| | | flex-direction: column; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .detail-action-btn { |
| | | width: 100%; |
| | | } |
| | | |
| | | .attachment-popup-header { |
| | | padding: 16px 20px; |
| | | } |
| | | |
| | | .attachment-popup-title { |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .attachment-icon { |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 480px) { |
| | | .attachment-popup-content { |
| | | padding: 16px; |
| | | } |
| | | |
| | | .attachment-card-header { |
| | | padding: 16px 16px 12px; |
| | | } |
| | | |
| | | .attachment-card-body { |
| | | padding: 12px 16px 16px; |
| | | } |
| | | |
| | | .file-type-icon { |
| | | width: 40px; |
| | | height: 40px; |
| | | font-size: 20px; |
| | | } |
| | | |
| | | .file-type-icon.large { |
| | | width: 56px; |
| | | height: 56px; |
| | | font-size: 28px; |
| | | } |
| | | } |
| | | </style> |