Skip to content

J
jilinzhongdianrenqun-web
Commit eb46c660 by wangchunyang
Options

Merge branch 'master' of https://code.palacesun.com/wuchao/jilinzhongdianrenqun-web

parents 49f71edf 2ff25466
正在显示 包含 177 行增加 和 53 行删除
src/api/common.js
......@@ -18,11 +18,10 @@ export const getCityList = (data) => {
})
}
// 上传图片到民政生产服务器
// 上传图片到后台上传服务
export const uploadPic = (data) => {
return axios.request({
// url: 'http://10.40.20.11:5000/api/uc/csc/auditOrderService/uploadPic',
url: '/api/uc/mzsc/uploadService/uploadPic',
url: '/api/ac/jilinsscgsdp/uploadService/uploadFile',
data: data,
method: 'post'
})
......
src/view/key-person/index.vue
......@@ -20,23 +20,23 @@
</Col>
<Col span="8">
<Card style="width:90%">
<div class="statistics-bar-top-ii" @click="toPage('/special/personMinor')">
<div class="i-top-ii">重点未成年人</div>
<div class="i-center-ii">{{ scoreData.minors.total }}人</div>
<div class="statistics-bar-top-iii" @click="toPage('/special/peopleInfo2')">
<div class="i-top-iii">刑满释放人员</div>
<div class="i-center-iii">{{ scoreData.released.total }}人</div>
</div>
<div style="width: 100%;height: 300px; margin-top: 20px;" ref="main" >
<div style="width: 100%;height: 100%; margin-top: 20px;" id="pie2"></div>
<div style="width: 100%;height: 100%; margin-top: 20px;" id="pie3"></div>
</div>
</Card>
</Col>
<Col span="8">
<Card style="width:90%">
<div class="statistics-bar-top-iii" @click="toPage('/special/peopleInfo2')">
<div class="i-top-iii">刑满释放人员</div>
<div class="i-center-iii">{{ scoreData.released.total }}人</div>
<div class="statistics-bar-top-ii" @click="toPage('/special/personMinor')">
<div class="i-top-ii">重点未成年人</div>
<div class="i-center-ii">{{ scoreData.minors.total }}人</div>
</div>
<div style="width: 100%;height: 300px; margin-top: 20px;" ref="main" >
<div style="width: 100%;height: 100%; margin-top: 20px;" id="pie3"></div>
<div style="width: 100%;height: 100%; margin-top: 20px;" id="pie2"></div>
</div>
</Card>
</Col>
......@@ -110,7 +110,7 @@
<Col span="8">
<div class="statistics-bar-top-i">
<div class="i-top">严重精神病患者</div>
<div class="i-center-i">{{ overdueWarningData.mentalPatient.total }}人</div>
<div class="i-center-i">{{ scoreData.mentalPatient.total }}人</div>
<div>
<Row>
<Col span="12">
......@@ -134,7 +134,7 @@
<Col span="8">
<div class="statistics-bar-top-iii">
<div class="i-top-iii">刑满释放人员</div>
<div class="i-center-iii">{{ overdueWarningData.released.total }}人</div>
<div class="i-center-iii">{{ scoreData.released.total }}人</div>
<div>
<Row>
<Col span="12">
......@@ -158,7 +158,7 @@
<Col span="8">
<div class="statistics-bar-top-ii">
<div class="i-top-ii">重点未成年人</div>
<div class="i-center-ii">{{ overdueWarningData.minors.total }}人</div>
<div class="i-center-ii">{{ scoreData.minors.total }}人</div>
<div>
<Row>
<Col span="12">
......
src/view/key-person/key-person-visit-record/index.vue
......@@ -107,25 +107,35 @@
style="width: 100%"
/>
</FormItem>
<FormItem label="回访记录" prop="visit_record" required>
<FormItem label="回访记录" prop="visit_record">
<Input type="textarea" :rows="4" v-model="visitModal.form.visit_record" placeholder="请输入回访记录" />
</FormItem>
<FormItem label="上传图片">
<Upload
ref="upload"
:action="uploadAction"
:headers="uploadHeaders"
:on-success="handleUploadSuccess"
:on-remove="handleUploadRemove"
:on-error="handleUploadError"
action="#"
:show-upload-list="false"
:before-upload="beforeUpload"
:file-list="visitModal.form.visit_img_list"
multiple
:format="['jpg', 'jpeg', 'png', 'bmp', 'gif', 'webp']"
accept="image/*"
multiple
>
<Button icon="ios-cloud-upload-outline">上传图片</Button>
</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>
</Form>
</div>
......@@ -141,6 +151,9 @@
:rating_dict_type="currentRatingDictType"
: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>
</template>
......@@ -165,7 +178,7 @@ const createVisitForm = () => ({
plan_name: '',
plan_type: '',
rating_type: '',
visit_time: '',
visit_time: null,
visit_record: '',
visit_img_list: []
})
......@@ -236,16 +249,31 @@ export default {
personInfo: {},
form: createVisitForm(),
rules: {
visit_time: [{ required: true, message: '请选择回访时间', trigger: 'change' }],
visit_record: [{ required: true, message: '请输入回访记录', trigger: 'blur' }]
visit_time: [{ required: true, type: 'date', message: '请选择回访时间', trigger: 'change' }],
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: {
key_person_id: ''
},
currentRatingDictType: '',
uploadAction: '/api/uc/mzsc/uploadService/uploadPic',
uploadHeaders: {},
visitButtonPower: {},
severUserInfo: {}
}
......@@ -479,7 +507,7 @@ export default {
nextForm.plan_name = row.plan_name || ''
nextForm.plan_type = row.plan_type || ''
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.currentRatingDictType = row.rating_dict_type || ''
try {
......@@ -506,53 +534,83 @@ export default {
}
},
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
if (!isValidType) {
this.$Message.error('只能上传图片文件！')
this.$Message.error('请上传图片格式')
return false
}
if (!isLt5M) {
this.$Message.error('图片大小不能超过5MB！')
return false
}
// 使用自定义上传
this.uploadFile(file)
const tempItem = {
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
},
async uploadFile (file) {
async uploadFile (file, targetItem) {
const formData = new FormData()
formData.append('file', file)
try {
const res = await uploadPic(formData)
if (res && res.data && res.data.errcode === 0) {
const url = res.data.data || res.data.url
const url = this.extractUploadUrl(res.data)
if (url) {
this.visitModal.form.visit_img_list.push({
name: file.name,
url: url,
status: 'finished'
})
if (targetItem) {
this.$set(targetItem, 'url', url)
this.$set(targetItem, 'status', 'finished')
} else {
this.visitModal.form.visit_img_list.push({
name: file.name,
url: url,
status: 'finished'
})
}
this.$Message.success('上传成功')
this.revalidateVisitRecordField()
}
} else {
this.$Message.error((res.data && res.data.errmsg) || '上传失败')
this.$Message.error((res && res.data && res.data.errmsg) || '上传失败')
this.removeVisitImageByItem(targetItem)
}
} catch (e) {
console.error('上传失败', e)
this.$Message.error('上传失败')
this.removeVisitImageByItem(targetItem)
}
},
handleUploadSuccess (response, file, fileList) {
// 不使用默认上传，已在beforeUpload中处理
removeVisitImage (index) {
if (index < 0) return
this.visitModal.form.visit_img_list.splice(index, 1)
this.revalidateVisitRecordField()
},
handleUploadRemove (file, fileList) {
this.visitModal.form.visit_img_list = fileList
removeVisitImageByItem (item) {
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) {
console.error('图片上传失败', error)
const message = (error && (error.message || error.errMsg)) || '图片上传失败'
this.$Message.error(message)
handleVisitImagePreview (item) {
if (!item) return
const url = item.url || item.preview
if (!url) return
this.visitModal.preview.url = url
this.visitModal.preview.visible = true
},
async submitVisit () {
const formRef = this.$refs.visitForm
......@@ -571,14 +629,20 @@ export default {
return false
}
const visitRecord = (this.visitModal.form.visit_record || '').trim()
if (!visitRecord) {
this.$Message.error('请输入回访记录')
const hasVisitImages = Array.isArray(this.visitModal.form.visit_img_list) && this.visitModal.form.visit_img_list.length > 0
if (!visitRecord && !hasVisitImages) {
this.$Message.error('请填写回访记录或上传图片，至少一项')
return false
}
this.visitModal.form.visit_record = visitRecord
if (visitRecord) {
this.visitModal.form.visit_record = visitRecord
}
this.visitModal.submitting = true
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 = {
key_person_id: this.visitModal.form.key_person_id,
key_person_visit_id: this.visitModal.form.key_person_visit_id,
......@@ -679,6 +743,18 @@ export default {
}
}
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 {
.info-form {
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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论