Browse Source

feat(attachment): 添加附件备注功能并优化上传弹窗界面

- 在附件表格中新增备注列显示功能
- 为三个模块的附件上传功能添加备注输入字段
- 优化上传弹窗的布局结构和样式设计
- 添加拖拽功能支持提升用户体验
- 统一上传弹窗的表单验证和数据处理逻辑
- 修复日期选择器图标的样式问题
- 重构附件上传的数据传输参数结构
master
qiankanghui 1 week ago
parent
commit
535d89ae1c
  1. 80
      src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue
  2. 23
      src/views/modules/inspection/com_inspectionRequestDetail.vue
  3. 67
      src/views/modules/npcIqc/com_logisticsAttachmentTab.vue
  4. 80
      src/views/modules/npcIqc/com_npcIqcDetail.vue
  5. 67
      src/views/modules/quality/com_qualityIssueAttachment.vue
  6. 23
      src/views/modules/quality/qualityIssueList.vue

80
src/views/modules/inspection/com_inspectionRequestAttachmentTab.vue

@ -27,6 +27,11 @@
label="创建人" label="创建人"
width="120" width="120"
align="center" /> align="center" />
<el-table-column
prop="cadditionalInfo"
label="备注"
min-width="150"
show-overflow-tooltip />
<el-table-column <el-table-column
prop="createDate" prop="createDate"
label="创建时间" label="创建时间"
@ -44,9 +49,16 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 上传附件弹窗 -->
<el-dialog title="上传附件" :visible.sync="ossVisible" width="450px" append-to-body :close-on-click-modal="false">
<el-dialog
title="上传附件"
:visible.sync="ossVisible"
v-drag
width="450px"
append-to-body
:close-on-click-modal="false">
<el-form ref="form" :model="ossForm" label-width="80px" label-position="top"> <el-form ref="form" :model="ossForm" label-width="80px" label-position="top">
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label=" " class="auto"> <el-form-item label=" " class="auto">
<el-upload <el-upload
drag drag
@ -61,6 +73,19 @@
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" class="auto">
<el-input
type="textarea"
v-model="ossForm.cadditionalInfo"
resize="none"
:autosize="{minRows: 3, maxRows: 3}"
placeholder="请输入备注">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button> <el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button>
@ -71,8 +96,7 @@
</template> </template>
<script> <script>
import { queryOssFilePlus, removeOss, previewOssFileById } from '@/api/oss/oss'
import { ossUploadNoSaveOSSForYJY } from '@/api/oss/oss'
import { queryOssFilePlus, removeOss, previewOssFileById,ossUploadNoSaveOSSForYJY} from '@/api/oss/oss'
export default { export default {
name: 'InspectionRequestAttachmentTab', name: 'InspectionRequestAttachmentTab',
@ -100,7 +124,7 @@ export default {
uploadLoading: false, uploadLoading: false,
uploadFileList: [], uploadFileList: [],
ossForm: { ossForm: {
remark: ''
cadditionalInfo: ''
} }
} }
}, },
@ -163,7 +187,7 @@ export default {
} }
}) })
this.uploadFileList = [] this.uploadFileList = []
this.ossForm.remark = ''
this.ossForm.cadditionalInfo = '' //
this.ossVisible = true this.ossVisible = true
}, },
@ -177,6 +201,7 @@ export default {
this.uploadFileList = fileList this.uploadFileList = fileList
}, },
//
// //
submitData() { submitData() {
if (this.uploadFileList.length === 0) { if (this.uploadFileList.length === 0) {
@ -194,8 +219,8 @@ export default {
formData.append('orderRef2', this.searchData.requestNo) formData.append('orderRef2', this.searchData.requestNo)
formData.append('orderRef3', '') formData.append('orderRef3', '')
formData.append('createdBy', this.$store.state.user.name) formData.append('createdBy', this.$store.state.user.name)
formData.append('fileRemark', this.ossForm.remark || '')
formData.append('orderReftype', 'InspectionRequestAttachment') formData.append('orderReftype', 'InspectionRequestAttachment')
formData.append('CAdditionalInfo', this.ossForm.cadditionalInfo || '') // 使 CAdditionalInfo
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => { ossUploadNoSaveOSSForYJY(formData).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
@ -255,12 +280,49 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.customer-css { .customer-css {
padding: 0; padding: 0;
margin: 0;
background: #fff;
} }
// 仿
.auto /deep/ .el-form-item__content { .auto /deep/ .el-form-item__content {
height: auto; height: auto;
line-height: 1.5; line-height: 1.5;
} }
//
/deep/ .el-dialog__body {
padding: 10px 20px 5px;
}
/deep/ .el-form-item {
margin-bottom: 8px;
}
/deep/ .el-dialog__header {
padding: 10px 20px 5px;
margin: 0;
}
/deep/ .el-form-item__label {
font-weight: 500;
color: #606266;
padding-bottom: 4px;
}
//
/deep/ .el-upload-dragger {
width: 100%;
height: 120px;
}
//
/deep/ .el-dialog {
max-height: 450px;
display: flex;
flex-direction: column;
.el-dialog__body {
flex: 1;
overflow-y: auto;
}
}
</style> </style>

23
src/views/modules/inspection/com_inspectionRequestDetail.vue

@ -287,6 +287,29 @@ export default {
outline: none; outline: none;
} }
/* 日期选择器图标样式修复 */
/deep/ .el-date-editor.el-input {
width: 100%;
}
/deep/ .el-date-editor .el-input__inner {
padding-left: 35px !important;
}
/deep/ .el-date-editor .el-input__prefix {
left: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
/deep/ .el-date-editor .el-input__icon {
line-height: 32px;
height: 32px;
font-size: 14px;
}
/* 按钮样式:字体13px,高度32px */ /* 按钮样式:字体13px,高度32px */
.form-item + .el-row .el-button, .form-item + .el-row .el-button,
.el-button--small, .el-button--small,

67
src/views/modules/npcIqc/com_logisticsAttachmentTab.vue

@ -27,6 +27,11 @@
label="创建人" label="创建人"
width="120" width="120"
align="center" /> align="center" />
<el-table-column
prop="cadditionalInfo"
label="备注"
min-width="150"
show-overflow-tooltip />
<el-table-column <el-table-column
prop="createDate" prop="createDate"
label="创建时间" label="创建时间"
@ -45,8 +50,16 @@
</el-table> </el-table>
<!-- 上传附件弹窗 --> <!-- 上传附件弹窗 -->
<el-dialog title="上传附件" :visible.sync="ossVisible" width="450px" append-to-body :close-on-click-modal="false">
<el-dialog
title="上传附件"
:visible.sync="ossVisible"
v-drag
width="450px"
append-to-body
:close-on-click-modal="false">
<el-form ref="form" :model="ossForm" label-width="80px" label-position="top"> <el-form ref="form" :model="ossForm" label-width="80px" label-position="top">
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label=" " class="auto"> <el-form-item label=" " class="auto">
<el-upload <el-upload
drag drag
@ -61,6 +74,19 @@
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" class="auto">
<el-input
type="textarea"
v-model="ossForm.cAdditionalInfo"
resize="none"
:autosize="{minRows: 3, maxRows: 3}"
placeholder="请输入备注">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button> <el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button>
@ -100,7 +126,7 @@ export default {
uploadLoading: false, uploadLoading: false,
uploadFileList: [], uploadFileList: [],
ossForm: { ossForm: {
remark: ''
cAdditionalInfo: ''
} }
} }
}, },
@ -163,7 +189,7 @@ export default {
} }
}) })
this.uploadFileList = [] this.uploadFileList = []
this.ossForm.remark = ''
this.ossForm.cAdditionalInfo = ''
this.ossVisible = true this.ossVisible = true
}, },
@ -194,9 +220,15 @@ export default {
formData.append('orderRef2', this.searchData.flexId) formData.append('orderRef2', this.searchData.flexId)
formData.append('orderRef3', '') formData.append('orderRef3', '')
formData.append('createdBy', this.$store.state.user.name) formData.append('createdBy', this.$store.state.user.name)
formData.append('fileRemark', this.ossForm.remark || '')
formData.append('CAdditionalInfo', this.ossForm.cAdditionalInfo || '')
formData.append('orderReftype', 'LogisticsAttachment') formData.append('orderReftype', 'LogisticsAttachment')
//
console.log('上传参数:')
for (let pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1])
}
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => { ossUploadNoSaveOSSForYJY(formData).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message.success('上传成功') this.$message.success('上传成功')
@ -207,6 +239,7 @@ export default {
} }
this.uploadLoading = false this.uploadLoading = false
}).catch((error) => { }).catch((error) => {
console.error('上传失败:', error)
this.$message.error('上传失败') this.$message.error('上传失败')
this.uploadLoading = false this.uploadLoading = false
}) })
@ -263,4 +296,30 @@ export default {
height: auto; height: auto;
line-height: 1.5; line-height: 1.5;
} }
//
/deep/ .el-dialog__body {
padding: 10px 20px 5px;
}
/deep/ .el-form-item {
margin-bottom: 8px;
}
/deep/ .el-dialog__header {
padding: 10px 20px 5px;
margin: 0;
}
/deep/ .el-form-item__label {
font-weight: 500;
color: #606266;
padding-bottom: 4px;
}
//
/deep/ .el-upload-dragger {
width: 100%;
height: 120px;
}
</style> </style>

80
src/views/modules/npcIqc/com_npcIqcDetail.vue

@ -34,40 +34,57 @@
<!-- 第二行供应商名称供应商编码 --> <!-- 第二行供应商名称供应商编码 -->
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">供应商名称</div> <div class="label">供应商名称</div>
<div class="value">{{ detailData.supplierName }}</div> <div class="value">{{ detailData.supplierName }}</div>
</div> </div>
</el-col> </el-col>
<el-col :span="12">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">供应商编码</div> <div class="label">供应商编码</div>
<div class="value">{{ detailData.supplierNo }}</div> <div class="value">{{ detailData.supplierNo }}</div>
</div> </div>
</el-col> </el-col>
</el-row>
<!-- 第三行物料名称数量抽样数量 -->
<el-row :gutter="20">
<el-col :span="8">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">物料名称</div> <div class="label">物料名称</div>
<div class="value">{{ detailData.itemName }}</div> <div class="value">{{ detailData.itemName }}</div>
</div> </div>
</el-col> </el-col>
<el-col :span="8">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">数量</div> <div class="label">数量</div>
<div class="value">{{ detailData.quantity }}</div> <div class="value">{{ detailData.quantity }}</div>
</div> </div>
</el-col> </el-col>
<el-col :span="8">
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">抽样数量</div> <div class="label">抽样数量</div>
<div class="value">{{ detailData.sampleSize }}</div> <div class="value">{{ detailData.sampleSize }}</div>
</div> </div>
</el-col> </el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">检验结果总计</div>
<div class="value">{{ detailData.inspectionTotal }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">检验员姓名</div>
<div class="value">{{ detailData.inspectorName }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">录入日期</div>
<div class="value">{{ formatDate(detailData.entryDate) }}</div>
</div>
</el-col>
</el-row> </el-row>
<!-- 第四行尺寸A-E --> <!-- 第四行尺寸A-E -->
@ -104,48 +121,32 @@
</el-col> </el-col>
</el-row> </el-row>
<!-- 第五行检验结果总计检验员姓名录入日期 -->
<el-row :gutter="20">
<el-col :span="8">
<div class="form-item">
<div class="label">检验结果总计</div>
<div class="value">{{ detailData.inspectionTotal }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">检验员姓名</div>
<div class="value">{{ detailData.inspectorName }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<div class="label">录入日期</div>
<div class="value">{{ formatDate(detailData.entryDate) }}</div>
</div>
</el-col>
</el-row>
<!-- 第六行供应商邮箱纠正措施请求收集/批次号 --> <!-- 第六行供应商邮箱纠正措施请求收集/批次号 -->
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">供应商邮箱</div> <div class="label">供应商邮箱</div>
<div class="value">{{ detailData.supplierEmail }}</div> <div class="value">{{ detailData.supplierEmail }}</div>
</div> </div>
</el-col> </el-col>
<el-col :span="8">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">纠正措施请求</div> <div class="label">纠正措施请求</div>
<div class="value">{{ formatCaRequest(detailData.caRequest) }}</div> <div class="value">{{ formatCaRequest(detailData.caRequest) }}</div>
</div> </div>
</el-col> </el-col>
<el-col :span="8">
<el-col :span="6">
<div class="form-item"> <div class="form-item">
<div class="label">收集/批次号</div> <div class="label">收集/批次号</div>
<div class="value">{{ detailData.collectionBatch }}</div> <div class="value">{{ detailData.collectionBatch }}</div>
</div> </div>
</el-col> </el-col>
<el-col :span="6">
<div class="form-item">
<div class="label">Created By</div>
<div class="value">{{ detailData.createdBy }}</div>
</div>
</el-col>
</el-row> </el-row>
<!-- 第七行问题描述全宽 --> <!-- 第七行问题描述全宽 -->
@ -195,17 +196,6 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!-- 第十行Created ByUpdate ByUpdate Date可选 -->
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">Created By</div>
<div class="value">{{ detailData.createdBy }}</div>
</div>
</el-col>
<!-- 如需显示 Update By / Update Date取消注释并调整列宽 -->
</el-row>
</div> </div>
</div> </div>
</template> </template>

67
src/views/modules/quality/com_qualityIssueAttachment.vue

@ -27,6 +27,11 @@
label="创建人" label="创建人"
width="120" width="120"
align="center" /> align="center" />
<el-table-column
prop="cadditionalInfo"
label="备注"
min-width="150"
show-overflow-tooltip />
<el-table-column <el-table-column
prop="createDate" prop="createDate"
label="创建时间" label="创建时间"
@ -45,8 +50,16 @@
</el-table> </el-table>
<!-- 上传附件弹窗 --> <!-- 上传附件弹窗 -->
<el-dialog title="上传附件" :visible.sync="ossVisible" width="380px" append-to-body :close-on-click-modal="false">
<el-dialog
title="上传附件"
:visible.sync="ossVisible"
v-drag
width="450px"
append-to-body
:close-on-click-modal="false">
<el-form ref="form" :model="ossForm" label-width="80px" label-position="top"> <el-form ref="form" :model="ossForm" label-width="80px" label-position="top">
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label=" " class="auto"> <el-form-item label=" " class="auto">
<el-upload <el-upload
drag drag
@ -61,6 +74,19 @@
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" class="auto">
<el-input
type="textarea"
v-model="ossForm.cAdditionalInfo"
resize="none"
:autosize="{minRows: 3, maxRows: 3}"
placeholder="请输入备注">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button> <el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button>
@ -100,7 +126,7 @@ export default {
uploadLoading: false, uploadLoading: false,
uploadFileList: [], uploadFileList: [],
ossForm: { ossForm: {
remark: ''
cAdditionalInfo: ''
} }
} }
}, },
@ -163,7 +189,7 @@ export default {
} }
}) })
this.uploadFileList = [] this.uploadFileList = []
this.ossForm.remark = ''
this.ossForm.cAdditionalInfo = ''
this.ossVisible = true this.ossVisible = true
}, },
@ -194,9 +220,15 @@ export default {
formData.append('orderRef2', this.searchData.issueNo) formData.append('orderRef2', this.searchData.issueNo)
formData.append('orderRef3', '') formData.append('orderRef3', '')
formData.append('createdBy', this.$store.state.user.name) formData.append('createdBy', this.$store.state.user.name)
formData.append('fileRemark', this.ossForm.remark || '')
formData.append('CAdditionalInfo', this.ossForm.cAdditionalInfo || '')
formData.append('orderReftype', 'QualityIssueAttachment') formData.append('orderReftype', 'QualityIssueAttachment')
//
console.log('上传参数:')
for (let pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1])
}
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => { ossUploadNoSaveOSSForYJY(formData).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$message.success('上传成功') this.$message.success('上传成功')
@ -207,6 +239,7 @@ export default {
} }
this.uploadLoading = false this.uploadLoading = false
}).catch((error) => { }).catch((error) => {
console.error('上传失败:', error)
this.$message.error('上传失败') this.$message.error('上传失败')
this.uploadLoading = false this.uploadLoading = false
}) })
@ -263,4 +296,30 @@ export default {
height: auto; height: auto;
line-height: 1.5; line-height: 1.5;
} }
//
/deep/ .el-dialog__body {
padding: 10px 20px 5px;
}
/deep/ .el-form-item {
margin-bottom: 8px;
}
/deep/ .el-dialog__header {
padding: 10px 20px 5px;
margin: 0;
}
/deep/ .el-form-item__label {
font-weight: 500;
color: #606266;
padding-bottom: 4px;
}
//
/deep/ .el-upload-dragger {
width: 100%;
height: 120px;
}
</style> </style>

23
src/views/modules/quality/qualityIssueList.vue

@ -1953,4 +1953,27 @@ export default {
.choose-label:hover { .choose-label:hover {
text-decoration: underline; text-decoration: underline;
} }
/* 新增和编辑弹窗中的日期选择器图标样式修复 */
.add-dialog-form /deep/ .el-date-editor.el-input {
width: 100%;
}
.add-dialog-form /deep/ .el-date-editor .el-input__inner {
padding-left: 35px !important;
}
.add-dialog-form /deep/ .el-date-editor .el-input__prefix {
left: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
.add-dialog-form /deep/ .el-date-editor .el-input__icon {
line-height: 28px;
height: 28px;
font-size: 14px;
}
</style> </style>
Loading…
Cancel
Save