|
|
<!--
|
|
|
* @description: 新增/编辑笔录
|
|
|
* @fileName: EditRecord
|
|
|
* @author: 17076
|
|
|
* @date: 2024/6/26-下午4:32
|
|
|
* @version: V1.0.0
|
|
|
-->
|
|
|
|
|
|
<template>
|
|
|
<cs-drawer
|
|
|
:drawer-option="drawerOption"
|
|
|
@onReset="handleReset"
|
|
|
@onSubmit="handleSubmit"
|
|
|
>
|
|
|
<div slot="content">
|
|
|
<el-row>
|
|
|
<!-- <el-col v-if="isEdit" :span="8" style="border-right: 1px solid #E9E9E9">-->
|
|
|
<!-- <el-timeline>-->
|
|
|
<!-- <el-timeline-item-->
|
|
|
<!-- v-for="(activity, index) in activities"-->
|
|
|
<!-- :key="index"-->
|
|
|
<!-- :timestamp="activity.timestamp"-->
|
|
|
<!-- >-->
|
|
|
<!-- {{ activity.content }}-->
|
|
|
<!-- </el-timeline-item>-->
|
|
|
<!-- </el-timeline>-->
|
|
|
<!-- </el-col>-->
|
|
|
<el-col :span="24">
|
|
|
<el-form ref="form" :model="recordForm" :rules="rules" label-width="80px">
|
|
|
<el-form-item label="姓名" prop="personId">
|
|
|
<div class="flex-row" style="justify-content: space-between">
|
|
|
<el-select
|
|
|
v-model="recordForm.personId"
|
|
|
:disabled="isEdit"
|
|
|
placeholder="请选择姓名"
|
|
|
style="width: 83%"
|
|
|
@change="handleSelectChange"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in userList"
|
|
|
:key="item.id"
|
|
|
:value="item.id"
|
|
|
:label="item.name"
|
|
|
>
|
|
|
<span>{{ `${item.name}-${item['roleName']}` }}</span>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
<el-button :disabled="isEdit" type="primary" @click="handleAdd">新增</el-button>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="!isEdit" label="第" prop="indexNum">
|
|
|
<div class="flex-row">
|
|
|
<el-input v-model="recordForm.indexNum" placeholder="请输入数字" type="number" style="width: 100px" />
|
|
|
<span style="margin-left: 10px;color: #333333">次供述材料</span>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="isEdit" label="角色" prop="role">
|
|
|
<el-select v-model="recordForm.role" :disabled="isEdit" placeholder="请选择角色" style="width: 100%">
|
|
|
<el-option
|
|
|
v-for="item in roleList"
|
|
|
:key="item.value"
|
|
|
:value="item.value"
|
|
|
:label="item.label"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="询问人" prop="lawAsker">
|
|
|
<el-input v-model="recordForm['lawAsker']" placeholder="请输入询问人,多人可用英文逗号隔开" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="供述时间" prop="confessionTime">
|
|
|
<el-date-picker
|
|
|
v-model="recordForm['confessionTime']"
|
|
|
type="datetimerange"
|
|
|
format="yyyy-MM-dd HH:mm"
|
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
|
start-placeholder="请选择开始时间"
|
|
|
end-placeholder="请选择结束时间"
|
|
|
style="width: 100%"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item v-if="isEdit" label="供述材料" prop="confessionMaterial">
|
|
|
<el-row :gutter="10" type="flex" style="flex-wrap:wrap">
|
|
|
<el-col v-for="(item, index) in fileIdList" :key="index" :span="8">
|
|
|
<div class="file-item">
|
|
|
<img
|
|
|
src="~@/assets/caseDetails/doc.png"
|
|
|
style="width: 50px;height: 50px"
|
|
|
@click="handlePreviewItem(index)"
|
|
|
>
|
|
|
<i class="el-icon-delete file-delete" @click.stop="handleDelete(item)" />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form-item> -->
|
|
|
<el-form-item label="上传材料" prop="fileIdList">
|
|
|
<el-upload
|
|
|
:headers="{
|
|
|
token: token
|
|
|
}"
|
|
|
:disabled="isEdit"
|
|
|
class="upload-demo"
|
|
|
:action="uploadOption.action"
|
|
|
:accept="uploadOption.accept"
|
|
|
:on-preview="handlePreview"
|
|
|
:on-remove="handleRemove"
|
|
|
:on-success="handleSuccess"
|
|
|
:before-upload="beforeUpload"
|
|
|
multiple
|
|
|
:on-exceed="handleExceed"
|
|
|
:file-list="fileList"
|
|
|
>
|
|
|
<el-button :disabled="isEdit" size="small" type="primary" icon="el-icon-upload2">选择文件</el-button>
|
|
|
<div slot="tip" class="el-upload__tip">支持扩展名：docx、doc，单个文档小于5mb</div>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<!--新增用户-->
|
|
|
<add-case-user ref="add" @reloadData="getUserList" />
|
|
|
<!--图片、文件预览-->
|
|
|
<file-viewer
|
|
|
v-if="showFileViewer"
|
|
|
:url-list="formatterFileIds(fileIdList)"
|
|
|
file-type="word"
|
|
|
:initial-index="initialIndex"
|
|
|
:on-close="() => { showFileViewer = false }"
|
|
|
/>
|
|
|
</div>
|
|
|
</cs-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import AddCaseUser from './AddCaseUser.vue'
|
|
|
import { addOrUpdRecords, queryUserList } from '@/api/caseDetails'
|
|
|
import { commonDownloadFile } from '@/api/config/uploadApi'
|
|
|
import FileViewer from '@/components/FileViewer/index.vue'
|
|
|
import { baseURL } from '@/config'
|
|
|
import { getAccessToken } from '@/utils/accessToken'
|
|
|
export default {
|
|
|
name: 'EditRecord',
|
|
|
components: { FileViewer, AddCaseUser },
|
|
|
data() {
|
|
|
return {
|
|
|
// 抽屉配置
|
|
|
drawerOption: {
|
|
|
show: false,
|
|
|
title: '添加笔录'
|
|
|
},
|
|
|
// 是否显示文件浏览器
|
|
|
showFileViewer: false,
|
|
|
token: getAccessToken(),
|
|
|
// 笔录表单
|
|
|
recordForm: {
|
|
|
fileIdList: []
|
|
|
},
|
|
|
rules: {
|
|
|
personId: [{ required: true, message: '姓名不能为空!', trigger: 'blur' }],
|
|
|
indexNum: [{ required: true, message: '次数不能为空!', trigger: 'blur' }],
|
|
|
roleCode: [{ required: true, message: '角色不能为空!', trigger: 'blur' }],
|
|
|
lawAsker: [{ required: true, message: '询问人不能为空!', trigger: 'blur' }],
|
|
|
confessionTime: [{ required: true, message: '供述时间不能为空!', trigger: 'blur' }],
|
|
|
confessionMaterial: [{ required: true, message: '供述材料不能为空!', trigger: 'blur' }],
|
|
|
fileIdList: [{ required: true, message: '上传材料不能为空!', trigger: 'blur' }]
|
|
|
},
|
|
|
// 用户
|
|
|
userList: [],
|
|
|
// 角色
|
|
|
roleList: JSON.parse(sessionStorage.getItem('case_role')),
|
|
|
// 文件列表
|
|
|
fileList: [],
|
|
|
// 上传配置
|
|
|
uploadOption: {
|
|
|
action: `${baseURL}/minio/uploadFile`,
|
|
|
accept: '.docx,.doc'
|
|
|
},
|
|
|
// 初始化下标
|
|
|
initialIndex: 0,
|
|
|
isEdit: false
|
|
|
}
|
|
|
},
|
|
|
// watch: {
|
|
|
// // 监听文件列表
|
|
|
// fileList: {
|
|
|
// handler: function(val) {
|
|
|
// this.$set(this.recordForm, 'file', val.length > 0 ? '12' : '')
|
|
|
// }
|
|
|
// }
|
|
|
// },
|
|
|
mounted() {
|
|
|
this.caseId = this.$route.params.id
|
|
|
},
|
|
|
methods: {
|
|
|
show(data, isEdit) {
|
|
|
this.isEdit = isEdit
|
|
|
// 弹窗宽度变化
|
|
|
// this.drawerOption.width = isEdit ? '50%' : '35%'
|
|
|
const formData = isEdit ? JSON.parse(JSON.stringify(data)) : { fileIdList: [] }
|
|
|
this.recordForm = isEdit ? formData : { fileIdList: [] }
|
|
|
// 处理编辑时时间选择器
|
|
|
if (isEdit && formData['confessionStartTime'] && formData['confessionEndTime']) {
|
|
|
this.$set(this.recordForm, 'confessionTime', [formData['confessionStartTime'], formData['confessionEndTime']])
|
|
|
}
|
|
|
this.getUserList()
|
|
|
this.fileList = []
|
|
|
if (isEdit) {
|
|
|
const list = []
|
|
|
data.fileList.forEach(e => {
|
|
|
list.push(e.fileId)
|
|
|
this.fileList.push({
|
|
|
name: e.fileName,
|
|
|
id: e.fileId
|
|
|
})
|
|
|
})
|
|
|
this.recordForm.fileIdList = list
|
|
|
}
|
|
|
this.drawerOption.title = isEdit ? '编辑笔录' : '添加笔录'
|
|
|
this.drawerOption.show = true
|
|
|
},
|
|
|
// 获取人员列表
|
|
|
getUserList() {
|
|
|
queryUserList({ caseId: this.$route.params.id }).then(res => {
|
|
|
this.userList = res.data
|
|
|
})
|
|
|
},
|
|
|
// 人员选中
|
|
|
handleSelectChange(val) {
|
|
|
const role = this.userList.find(item => item.id === val).roleCode
|
|
|
const name = this.userList.find(item => item.id === val).name
|
|
|
this.$set(this.recordForm, 'role', role)
|
|
|
this.$set(this.recordForm, 'name', name)
|
|
|
},
|
|
|
// 新增用户
|
|
|
handleAdd() {
|
|
|
this.$refs.add.show()
|
|
|
},
|
|
|
// 格式化文件id数组
|
|
|
formatterFileIds(files) {
|
|
|
const list = []
|
|
|
files.map(item => {
|
|
|
list.push(`${baseURL}${commonDownloadFile}${item}`)
|
|
|
})
|
|
|
return list
|
|
|
},
|
|
|
handleRemove(file, uploadFiles) {
|
|
|
const list = []
|
|
|
for (const item of uploadFiles) {
|
|
|
list.push(item.response.data)
|
|
|
}
|
|
|
this.recordForm.fileIdList = list
|
|
|
},
|
|
|
handlePreview(file) {
|
|
|
for (const item of this.fileList) {
|
|
|
if (item.name === file.name) {
|
|
|
if (!item.id) return
|
|
|
this.downloadFile(`${baseURL}${commonDownloadFile}${item.id}&printWaterMarket=true&download=true`, item.name)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
downloadFile(url, fileName) {
|
|
|
const link = document.createElement('a')
|
|
|
link.href = url
|
|
|
link.download = fileName
|
|
|
link.click()
|
|
|
},
|
|
|
handleExceed(files, fileList) {
|
|
|
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
|
|
},
|
|
|
handleSuccess(response) {
|
|
|
if (response.code === 200) {
|
|
|
this.recordForm.fileIdList.push(response.data)
|
|
|
}
|
|
|
},
|
|
|
// 重置
|
|
|
handleReset() {
|
|
|
if (this.isEdit) {
|
|
|
this.recordForm.confessionTime = []
|
|
|
this.recordForm.lawAsker = []
|
|
|
} else {
|
|
|
this.$refs.form.resetFields()
|
|
|
}
|
|
|
},
|
|
|
// 确定
|
|
|
handleSubmit() {
|
|
|
this.$refs.form.validate(async valid => {
|
|
|
if (valid) {
|
|
|
// 处理参数
|
|
|
// const params = this.$baseLodash.cloneDeep(this.recordForm)
|
|
|
// const formData = new FormData()
|
|
|
// if (this.isEdit) {
|
|
|
// params['fileIds'] = this.fileIdList.join(',')
|
|
|
// } else {
|
|
|
// formData.append('caseId', this.caseId)
|
|
|
// }
|
|
|
|
|
|
// delete params['file']
|
|
|
// delete params['confessionTime']
|
|
|
// this.$baseLodash.keys(params).forEach(key => {
|
|
|
// formData.append(key, params[key])
|
|
|
// })
|
|
|
// for (let i = 0; i < this.fileList.length; i++) {
|
|
|
// formData.append('file', this.fileList[i])
|
|
|
// }
|
|
|
const params = {
|
|
|
...this.recordForm,
|
|
|
caseId: this.$route.params.id
|
|
|
}
|
|
|
if (this.$baseLodash.isArray(params['confessionTime'])) {
|
|
|
this.$set(params, 'confessionStartTime', params['confessionTime'][0])
|
|
|
this.$set(params, 'confessionEndTime', params['confessionTime'][1])
|
|
|
}
|
|
|
const loading = this.$baseLoading(0, '笔录上传中，请勿刷新界面..')
|
|
|
addOrUpdRecords(params).then(res => {
|
|
|
loading.close()
|
|
|
const { code, msg } = res
|
|
|
code === 200 ? this.$baseMessage.success(msg || '上传成功') : this.$baseMessage.error(msg || '上传失败')
|
|
|
this.drawerOption.show = false
|
|
|
this.$emit('reloadData')
|
|
|
}).catch(() => {
|
|
|
loading.close()
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 文件列表
|
|
|
beforeUpload(file) {
|
|
|
const isLt5M = file.size / 1024 / 1024 < 5
|
|
|
const filename = file.name
|
|
|
const postfix = filename.substring(filename.lastIndexOf('.'))
|
|
|
if (!['.doc', '.docx'].includes(postfix)) {
|
|
|
this.$message.error('上传图片只能是 doc,docx 格式!')
|
|
|
return false
|
|
|
}
|
|
|
if (!isLt5M) {
|
|
|
this.$baseMessage.error('上传文件大小不能超过 5MB!')
|
|
|
return false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.file-item {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
line-height: 200px;
|
|
|
text-align: center;
|
|
|
margin-bottom: 10px;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
border: 1px solid #D1D3D6;
|
|
|
border-radius: 5px;
|
|
|
img {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.file-delete {
|
|
|
position: absolute;
|
|
|
font-size: 17px;
|
|
|
padding: 3px;
|
|
|
box-sizing: border-box;
|
|
|
top: 2px;
|
|
|
right: 2px;
|
|
|
background: #666666;
|
|
|
color: #FFFFFF;
|
|
|
border-radius: 3px;
|
|
|
cursor: pointer;
|
|
|
display: none;
|
|
|
}
|
|
|
&:hover {
|
|
|
.file-delete {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|