Skip to content

J
jilinzhongdianrenqun-web
Commit 7b4761b6 by wuchao
Options

修复bug

parent 7b94a2b4
正在显示 包含 166 行增加 和 42 行删除
src/api/common.js
...@@ -18,11 +18,10 @@ export const getCityList = (data) => { ...@@ -18,11 +18,10 @@ export const getCityList = (data) => {
}) })
} }
// 上传图片到民政生产服务器 // 上传图片到后台上传服务
export const uploadPic = (data) => { export const uploadPic = (data) => {
return axios.request({ return axios.request({
// url: 'http://10.40.20.11:5000/api/uc/csc/auditOrderService/uploadPic', url: '/api/ac/jilinsscgsdp/uploadService/uploadFile',
url: '/api/uc/mzsc/uploadService/uploadPic',
data: data, data: data,
method: 'post' method: 'post'
}) })
......
src/view/key-person/key-person-visit-record/index.vue
...@@ -107,25 +107,35 @@ ...@@ -107,25 +107,35 @@
style="width: 100%" style="width: 100%"
/> />
</FormItem> </FormItem>
<FormItem label="回访记录" prop="visit_record" required> <FormItem label="回访记录" prop="visit_record">
<Input type="textarea" :rows="4" v-model="visitModal.form.visit_record" placeholder="请输入回访记录" /> <Input type="textarea" :rows="4" v-model="visitModal.form.visit_record" placeholder="请输入回访记录" />
</FormItem> </FormItem>
<FormItem label="上传图片"> <FormItem label="上传图片">
<Upload <Upload
ref="upload" ref="upload"
:action="uploadAction" action="#"
:headers="uploadHeaders" :show-upload-list="false"
:on-success="handleUploadSuccess"
:on-remove="handleUploadRemove"
:on-error="handleUploadError"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:file-list="visitModal.form.visit_img_list" :format="['jpg', 'jpeg', 'png', 'bmp', 'gif', 'webp']"
multiple
accept="image/*" accept="image/*"
multiple
> >
<Button icon="ios-cloud-upload-outline">上传图片</Button> <Button icon="ios-cloud-upload-outline">上传图片</Button>
</Upload> </Upload>
<div style="color: #999; font-size: 12px; margin-top: 8px;">支持多张图片上传，单张图片不超过5MB</div> <div class="upload-tips">支持多张图片上传，单张图片不超过5MB</div>
<div v-if="visitModal.form.visit_img_list.length" class="upload-preview">
<div
class="demo-upload-list"
v-for="(item, index) in visitModal.form.visit_img_list"
:key="item.uid || index"
>
<img :src="item.preview || item.url" alt="回访图片" />
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleVisitImagePreview(item)" />
<Icon type="ios-trash-outline" @click.native="removeVisitImage(index)" />
</div>
</div>
</div>
</FormItem> </FormItem>
</Form> </Form>
</div> </div>
...@@ -141,6 +151,9 @@ ...@@ -141,6 +151,9 @@
:rating_dict_type="currentRatingDictType" :rating_dict_type="currentRatingDictType"
:key_person_id="historyModal.key_person_id" :key_person_id="historyModal.key_person_id"
/> />
<Modal v-model="visitModal.preview.visible" title="查看图片" width="600">
<img v-if="visitModal.preview.visible" :src="visitModal.preview.url" alt="预览图片" style="width: 100%" />
</Modal>
</div> </div>
</template> </template>
...@@ -165,7 +178,7 @@ const createVisitForm = () => ({ ...@@ -165,7 +178,7 @@ const createVisitForm = () => ({
plan_name: '', plan_name: '',
plan_type: '', plan_type: '',
rating_type: '', rating_type: '',
visit_time: '', visit_time: null,
visit_record: '', visit_record: '',
visit_img_list: [] visit_img_list: []
}) })
...@@ -236,16 +249,31 @@ export default { ...@@ -236,16 +249,31 @@ export default {
personInfo: {}, personInfo: {},
form: createVisitForm(), form: createVisitForm(),
rules: { rules: {
visit_time: [{ required: true, message: '请选择回访时间', trigger: 'change' }], visit_time: [{ required: true, type: 'date', message: '请选择回访时间', trigger: 'change' }],
visit_record: [{ required: true, message: '请输入回访记录', trigger: 'blur' }] visit_record: [
{
trigger: ['blur', 'change'],
validator: (rule, value, callback) => {
const text = (value || '').trim()
const hasImages = Array.isArray(this.visitModal.form.visit_img_list) && this.visitModal.form.visit_img_list.length > 0
if (text || hasImages) {
callback()
} else {
callback(new Error('请填写回访记录或上传图片，至少一项'))
}
}
}
]
},
preview: {
visible: false,
url: ''
} }
}, },
historyModal: { historyModal: {
key_person_id: '' key_person_id: ''
}, },
currentRatingDictType: '', currentRatingDictType: '',
uploadAction: '/api/uc/mzsc/uploadService/uploadPic',
uploadHeaders: {},
visitButtonPower: {}, visitButtonPower: {},
severUserInfo: {} severUserInfo: {}
} }
...@@ -479,7 +507,7 @@ export default { ...@@ -479,7 +507,7 @@ export default {
nextForm.plan_name = row.plan_name || '' nextForm.plan_name = row.plan_name || ''
nextForm.plan_type = row.plan_type || '' nextForm.plan_type = row.plan_type || ''
nextForm.rating_type = row.plan_rating_type || row.rating_level || '' nextForm.rating_type = row.plan_rating_type || row.rating_level || ''
nextForm.visit_time = this.formatDateTime(new Date()) nextForm.visit_time = new Date()
this.$set(this.visitModal, 'form', nextForm) this.$set(this.visitModal, 'form', nextForm)
this.currentRatingDictType = row.rating_dict_type || '' this.currentRatingDictType = row.rating_dict_type || ''
try { try {
...@@ -506,53 +534,83 @@ export default { ...@@ -506,53 +534,83 @@ export default {
} }
}, },
beforeUpload (file) { beforeUpload (file) {
const isValidType = file.type.startsWith('image/') const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp', 'image/gif', 'image/webp']
const isValidType = allowedTypes.includes(file.type) || file.type.startsWith('image/')
const isLt5M = file.size / 1024 / 1024 < 5 const isLt5M = file.size / 1024 / 1024 < 5
if (!isValidType) { if (!isValidType) {
this.$Message.error('只能上传图片文件！') this.$Message.error('请上传图片格式')
return false return false
} }
if (!isLt5M) { if (!isLt5M) {
this.$Message.error('图片大小不能超过5MB！') this.$Message.error('图片大小不能超过5MB！')
return false return false
} }
// 使用自定义上传 const tempItem = {
this.uploadFile(file) uid: `${Date.now()}_${Math.random().toString(16).slice(2)}`,
name: file.name,
status: 'uploading',
preview: '',
url: ''
}
this.visitModal.form.visit_img_list.push(tempItem)
const reader = new FileReader()
reader.onload = (e) => {
this.$set(tempItem, 'preview', e.target.result)
}
reader.readAsDataURL(file)
this.uploadFile(file, tempItem)
return false return false
}, },
async uploadFile (file) { async uploadFile (file, targetItem) {
const formData = new FormData() const formData = new FormData()
formData.append('file', file) formData.append('file', file)
try { try {
const res = await uploadPic(formData) const res = await uploadPic(formData)
if (res && res.data && res.data.errcode === 0) { if (res && res.data && res.data.errcode === 0) {
const url = res.data.data || res.data.url const url = this.extractUploadUrl(res.data)
if (url) { if (url) {
this.visitModal.form.visit_img_list.push({ if (targetItem) {
name: file.name, this.$set(targetItem, 'url', url)
url: url, this.$set(targetItem, 'status', 'finished')
status: 'finished' } else {
}) this.visitModal.form.visit_img_list.push({
name: file.name,
url: url,
status: 'finished'
})
}
this.$Message.success('上传成功') this.$Message.success('上传成功')
this.revalidateVisitRecordField()
} }
} else { } else {
this.$Message.error((res.data && res.data.errmsg) || '上传失败') this.$Message.error((res && res.data && res.data.errmsg) || '上传失败')
this.removeVisitImageByItem(targetItem)
} }
} catch (e) { } catch (e) {
console.error('上传失败', e) console.error('上传失败', e)
this.$Message.error('上传失败') this.$Message.error('上传失败')
this.removeVisitImageByItem(targetItem)
} }
}, },
handleUploadSuccess (response, file, fileList) { removeVisitImage (index) {
// 不使用默认上传，已在beforeUpload中处理 if (index < 0) return
this.visitModal.form.visit_img_list.splice(index, 1)
this.revalidateVisitRecordField()
}, },
handleUploadRemove (file, fileList) { removeVisitImageByItem (item) {
this.visitModal.form.visit_img_list = fileList if (!item) return
const idx = this.visitModal.form.visit_img_list.indexOf(item)
if (idx > -1) {
this.visitModal.form.visit_img_list.splice(idx, 1)
}
this.revalidateVisitRecordField()
}, },
handleUploadError (error, file, fileList) { handleVisitImagePreview (item) {
console.error('图片上传失败', error) if (!item) return
const message = (error && (error.message || error.errMsg)) || '图片上传失败' const url = item.url || item.preview
this.$Message.error(message) if (!url) return
this.visitModal.preview.url = url
this.visitModal.preview.visible = true
}, },
async submitVisit () { async submitVisit () {
const formRef = this.$refs.visitForm const formRef = this.$refs.visitForm
...@@ -571,14 +629,20 @@ export default { ...@@ -571,14 +629,20 @@ export default {
return false return false
} }
const visitRecord = (this.visitModal.form.visit_record || '').trim() const visitRecord = (this.visitModal.form.visit_record || '').trim()
if (!visitRecord) { const hasVisitImages = Array.isArray(this.visitModal.form.visit_img_list) && this.visitModal.form.visit_img_list.length > 0
this.$Message.error('请输入回访记录') if (!visitRecord && !hasVisitImages) {
this.$Message.error('请填写回访记录或上传图片，至少一项')
return false return false
} }
this.visitModal.form.visit_record = visitRecord if (visitRecord) {
this.visitModal.form.visit_record = visitRecord
}
this.visitModal.submitting = true this.visitModal.submitting = true
try { try {
const visitImg = this.visitModal.form.visit_img_list.map(item => item.url || (item.response && item.response.data && item.response.data.url) || (item.response && item.response.data)).filter(Boolean).join(',') const visitImg = this.visitModal.form.visit_img_list
.map(item => item && item.url)
.filter(Boolean)
.join(',')
const params = { const params = {
key_person_id: this.visitModal.form.key_person_id, key_person_id: this.visitModal.form.key_person_id,
key_person_visit_id: this.visitModal.form.key_person_visit_id, key_person_visit_id: this.visitModal.form.key_person_visit_id,
...@@ -679,6 +743,18 @@ export default { ...@@ -679,6 +743,18 @@ export default {
} }
} }
return '' return ''
},
extractUploadUrl (responseData) {
if (!responseData) return ''
if (typeof responseData === 'string') return responseData
const data = responseData.data || {}
return data.url || data.fileUrl || data.file_url || responseData.url || ''
},
revalidateVisitRecordField () {
const formRef = this.$refs.visitForm
if (formRef && typeof formRef.validateField === 'function') {
formRef.validateField('visit_record')
}
} }
} }
} }
...@@ -712,4 +788,53 @@ export default { ...@@ -712,4 +788,53 @@ export default {
.info-form { .info-form {
margin-bottom: 16px; margin-bottom: 16px;
} }
.upload-tips {
color: #999;
font-size: 12px;
margin-top: 8px;
}
.upload-preview {
display: flex;
flex-wrap: wrap;
margin-top: 12px;
}
.demo-upload-list {
width: 104px;
height: 104px;
border: 1px solid #e8eaec;
border-radius: 4px;
margin-right: 12px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.demo-upload-list img {
width: 100%;
height: 100%;
object-fit: cover;
}
.demo-upload-list-cover {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.demo-upload-list:hover .demo-upload-list-cover {
opacity: 1;
}
.demo-upload-list-cover i {
color: #fff;
font-size: 20px;
margin: 0 8px;
cursor: pointer;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论