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="创建人"
width="120"
align="center" />
<el-table-column
prop="cadditionalInfo"
label="备注"
min-width="150"
show-overflow-tooltip />
<el-table-column
prop="createDate"
label="创建时间"
@ -44,9 +49,16 @@
</el-table-column>
</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-row :gutter="10">
<el-col :span="24">
<el-form-item label=" " class="auto">
<el-upload
drag
@ -61,6 +73,19 @@
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload>
</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>
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button>
@ -71,8 +96,7 @@
</template>
<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 {
name: 'InspectionRequestAttachmentTab',
@ -100,7 +124,7 @@ export default {
uploadLoading: false,
uploadFileList: [],
ossForm: {
remark: ''
cadditionalInfo: ''
}
}
},
@ -163,7 +187,7 @@ export default {
}
})
this.uploadFileList = []
this.ossForm.remark = ''
this.ossForm.cadditionalInfo = '' //
this.ossVisible = true
},
@ -177,6 +201,7 @@ export default {
this.uploadFileList = fileList
},
//
//
submitData() {
if (this.uploadFileList.length === 0) {
@ -194,8 +219,8 @@ export default {
formData.append('orderRef2', this.searchData.requestNo)
formData.append('orderRef3', '')
formData.append('createdBy', this.$store.state.user.name)
formData.append('fileRemark', this.ossForm.remark || '')
formData.append('orderReftype', 'InspectionRequestAttachment')
formData.append('CAdditionalInfo', this.ossForm.cadditionalInfo || '') // 使 CAdditionalInfo
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => {
if (data && data.code === 0) {
@ -255,12 +280,49 @@ export default {
<style scoped lang="scss">
.customer-css {
padding: 0;
margin: 0;
background: #fff;
}
// 仿
.auto /deep/ .el-form-item__content {
height: auto;
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>

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

@ -287,6 +287,29 @@ export default {
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 */
.form-item + .el-row .el-button,
.el-button--small,

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

@ -27,6 +27,11 @@
label="创建人"
width="120"
align="center" />
<el-table-column
prop="cadditionalInfo"
label="备注"
min-width="150"
show-overflow-tooltip />
<el-table-column
prop="createDate"
label="创建时间"
@ -45,8 +50,16 @@
</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-row :gutter="10">
<el-col :span="24">
<el-form-item label=" " class="auto">
<el-upload
drag
@ -61,6 +74,19 @@
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload>
</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>
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button>
@ -100,7 +126,7 @@ export default {
uploadLoading: false,
uploadFileList: [],
ossForm: {
remark: ''
cAdditionalInfo: ''
}
}
},
@ -163,7 +189,7 @@ export default {
}
})
this.uploadFileList = []
this.ossForm.remark = ''
this.ossForm.cAdditionalInfo = ''
this.ossVisible = true
},
@ -194,9 +220,15 @@ export default {
formData.append('orderRef2', this.searchData.flexId)
formData.append('orderRef3', '')
formData.append('createdBy', this.$store.state.user.name)
formData.append('fileRemark', this.ossForm.remark || '')
formData.append('CAdditionalInfo', this.ossForm.cAdditionalInfo || '')
formData.append('orderReftype', 'LogisticsAttachment')
//
console.log('上传参数:')
for (let pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1])
}
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => {
if (data && data.code === 0) {
this.$message.success('上传成功')
@ -207,6 +239,7 @@ export default {
}
this.uploadLoading = false
}).catch((error) => {
console.error('上传失败:', error)
this.$message.error('上传失败')
this.uploadLoading = false
})
@ -263,4 +296,30 @@ export default {
height: auto;
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>

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

@ -34,40 +34,57 @@
<!-- 第二行供应商名称供应商编码 -->
<el-row :gutter="20">
<el-col :span="12">
<el-col :span="6">
<div class="form-item">
<div class="label">供应商名称</div>
<div class="value">{{ detailData.supplierName }}</div>
</div>
</el-col>
<el-col :span="12">
<el-col :span="6">
<div class="form-item">
<div class="label">供应商编码</div>
<div class="value">{{ detailData.supplierNo }}</div>
</div>
</el-col>
</el-row>
<!-- 第三行物料名称数量抽样数量 -->
<el-row :gutter="20">
<el-col :span="8">
<el-col :span="6">
<div class="form-item">
<div class="label">物料名称</div>
<div class="value">{{ detailData.itemName }}</div>
</div>
</el-col>
<el-col :span="8">
<el-col :span="6">
<div class="form-item">
<div class="label">数量</div>
<div class="value">{{ detailData.quantity }}</div>
</div>
</el-col>
<el-col :span="8">
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="form-item">
<div class="label">抽样数量</div>
<div class="value">{{ detailData.sampleSize }}</div>
</div>
</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>
<!-- 第四行尺寸A-E -->
@ -104,48 +121,32 @@
</el-col>
</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-col :span="8">
<el-col :span="6">
<div class="form-item">
<div class="label">供应商邮箱</div>
<div class="value">{{ detailData.supplierEmail }}</div>
</div>
</el-col>
<el-col :span="8">
<el-col :span="6">
<div class="form-item">
<div class="label">纠正措施请求</div>
<div class="value">{{ formatCaRequest(detailData.caRequest) }}</div>
</div>
</el-col>
<el-col :span="8">
<el-col :span="6">
<div class="form-item">
<div class="label">收集/批次号</div>
<div class="value">{{ detailData.collectionBatch }}</div>
</div>
</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>
<!-- 第七行问题描述全宽 -->
@ -195,17 +196,6 @@
</div>
</el-col>
</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>
</template>

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

@ -27,6 +27,11 @@
label="创建人"
width="120"
align="center" />
<el-table-column
prop="cadditionalInfo"
label="备注"
min-width="150"
show-overflow-tooltip />
<el-table-column
prop="createDate"
label="创建时间"
@ -45,8 +50,16 @@
</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-row :gutter="10">
<el-col :span="24">
<el-form-item label=" " class="auto">
<el-upload
drag
@ -61,6 +74,19 @@
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload>
</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>
<span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="uploadLoading" @click="submitData">确定</el-button>
@ -100,7 +126,7 @@ export default {
uploadLoading: false,
uploadFileList: [],
ossForm: {
remark: ''
cAdditionalInfo: ''
}
}
},
@ -163,7 +189,7 @@ export default {
}
})
this.uploadFileList = []
this.ossForm.remark = ''
this.ossForm.cAdditionalInfo = ''
this.ossVisible = true
},
@ -194,9 +220,15 @@ export default {
formData.append('orderRef2', this.searchData.issueNo)
formData.append('orderRef3', '')
formData.append('createdBy', this.$store.state.user.name)
formData.append('fileRemark', this.ossForm.remark || '')
formData.append('CAdditionalInfo', this.ossForm.cAdditionalInfo || '')
formData.append('orderReftype', 'QualityIssueAttachment')
//
console.log('上传参数:')
for (let pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1])
}
ossUploadNoSaveOSSForYJY(formData).then(({ data }) => {
if (data && data.code === 0) {
this.$message.success('上传成功')
@ -207,6 +239,7 @@ export default {
}
this.uploadLoading = false
}).catch((error) => {
console.error('上传失败:', error)
this.$message.error('上传失败')
this.uploadLoading = false
})
@ -263,4 +296,30 @@ export default {
height: auto;
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>

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

@ -1953,4 +1953,27 @@ export default {
.choose-label:hover {
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>
Loading…
Cancel
Save