<template>
|
<el-dialog :visible.sync="visible" :title="editData ? '编辑培养皿观察记录' : '新增培养皿观察记录'" width="80%" @close="handleClose">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" label-position="top">
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="分离菌落编号" prop="separateColonyCode">
|
<el-input :disabled="roleType!=4" v-model="form.separateColonyCode" placeholder="请输入分离菌落编号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="形状强壮度排名" prop="strength">
|
<el-input :disabled="roleType!=4" v-model="form.strength" placeholder="请输入形状强壮度排名" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-table :data="tableData" border style="width: 100%; margin-bottom: 16px;">
|
<el-table-column prop="index" label="记录次数" width="90">
|
<template #default="{ row }">
|
第{{ row.index }}次
|
</template>
|
</el-table-column>
|
<el-table-column prop="desc" label="形态记录">
|
<template #default="{ row }">
|
<el-input class="el-input-full" style="width: 100%;" :disabled="roleType!=4" v-model="row.desc" placeholder="请输入形态记录"
|
@blur="handleDescBlur(row)" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="images" label="拍照上传" width="180">
|
<template #default="{ row }">
|
<el-upload :file-list="row.images" :disabled="roleType!=4 || row.uploading" list-type="picture-card"
|
:on-preview="file => handlePreview(row, file)"
|
:on-remove="(file, fileList) => handleRemove(row, file, fileList)"
|
:on-success="(res, file, fileList) => handleUpload(row, file, fileList)"
|
:before-upload="file => beforeUpload(file, row)"
|
action="#" class="mini-upload">
|
<template v-if="row.uploading">
|
<i class="el-icon-loading"></i>
|
</template>
|
<template v-else>
|
<i class="el-icon-plus"></i>
|
</template>
|
</el-upload>
|
</template>
|
</el-table-column>
|
<el-table-column prop="time" label="记录时间" width="160">
|
<template #default="{ row }">
|
{{ row.time }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="text-align: center;" v-if="roleType==4">
|
<el-button type="primary" @click="handleOk" :disabled="hasUploading">保存</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
export default {
|
name: 'SlantRecordDialog',
|
props: {
|
visible: Boolean,
|
editData: {
|
type: Object,
|
default: null
|
}
|
},
|
data() {
|
return {
|
roleType: JSON.parse(sessionStorage.getItem('userInfo')).roleType,
|
form: {
|
separateColonyCode: '',
|
strength: '',
|
breedingPreserveId: '',
|
createBy: '',
|
createTime: '',
|
disabled: 0,
|
id: '',
|
images: '',
|
morphologicalRecord: ''
|
},
|
rules: {
|
separateColonyCode: [{ required: true, message: '请输入分离菌落编号', trigger: 'blur' }],
|
strength: [{ required: true, message: '请输入形状强壮度排名', trigger: 'blur' }]
|
},
|
tableData: Array.from({ length: 10 }, (_, i) => ({
|
index: i + 1,
|
desc: '',
|
time: '',
|
images: [],
|
uploading: false
|
}))
|
}
|
},
|
watch: {
|
editData: {
|
immediate: true,
|
handler(val) {
|
if (val) {
|
this.form = { ...val }
|
if (val.morphologicalRecord) {
|
try {
|
const records = JSON.parse(val.morphologicalRecord)
|
this.tableData = records.map((record, index) => ({
|
index: index + 1,
|
desc: record.desc || '',
|
time: record.time || this.getNowTime(),
|
images: record.images || []
|
}))
|
while (this.tableData.length < 10) {
|
this.tableData.push({
|
index: this.tableData.length + 1,
|
desc: '',
|
time: '',
|
images: [],
|
uploading: false
|
})
|
}
|
} catch (e) {
|
console.error('解析形态记录数据失败:', e)
|
this.tableData = Array.from({ length: 10 }, (_, i) => ({
|
index: i + 1,
|
desc: '',
|
time: '',
|
images: [],
|
uploading: false
|
}))
|
}
|
} else {
|
this.tableData = Array.from({ length: 10 }, (_, i) => ({
|
index: i + 1,
|
desc: '',
|
time: '',
|
images: [],
|
uploading: false
|
}))
|
}
|
} else {
|
this.reset()
|
}
|
}
|
},
|
visible(val) {
|
if (!val) {
|
this.reset()
|
}
|
}
|
},
|
methods: {
|
getNowTime() {
|
const d = new Date()
|
return moment(d).format('YYYY-MM-DD HH:mm:ss')
|
},
|
reset() {
|
this.form = {
|
separateColonyCode: '',
|
strength: '',
|
breedingPreserveId: '',
|
createBy: '',
|
createTime: this.getNowTime(),
|
disabled: 0,
|
id: '',
|
images: '',
|
morphologicalRecord: ''
|
}
|
},
|
handleOk() {
|
this.$refs.formRef.validate(valid => {
|
if (!valid) return
|
|
const morphologicalRecord = this.tableData
|
.filter(row => row.desc || (row.images && row.images.length > 0))
|
.map(row => ({
|
desc: row.desc,
|
time: row.time,
|
images: row.images
|
}))
|
|
const submitData = {
|
...this.form,
|
morphologicalRecord: JSON.stringify(morphologicalRecord)
|
}
|
|
this.$emit('ok', submitData)
|
this.reset()
|
this.tableData = Array.from({ length: 10 }, (_, i) => ({
|
index: i + 1,
|
desc: '',
|
time: '',
|
images: [],
|
uploading: false
|
}))
|
this.handleClose()
|
})
|
},
|
handleClose() {
|
this.$emit('update:visible', false)
|
},
|
beforeUpload(file, row) {
|
row.uploading = true
|
return new Promise(resolve => {
|
const reader = new FileReader()
|
reader.onload = e => {
|
resolve()
|
}
|
reader.readAsDataURL(file)
|
})
|
},
|
handleUpload(row, file, fileList) {
|
row.images = fileList.map(f => ({ ...f, url: f.url || URL.createObjectURL(f.raw) }))
|
row.uploading = false
|
},
|
handleRemove(row, file, fileList) {
|
row.images = fileList
|
row.uploading = false
|
},
|
handlePreview(row, file) {
|
this.previewImg = file.url
|
this.previewVisible = true
|
},
|
handleDescBlur(row) {
|
console.log(row)
|
if (row.desc) {
|
row.time = this.getNowTime()
|
this.$forceUpdate()
|
}
|
}
|
},
|
computed: {
|
hasUploading() {
|
return this.tableData.some(row => row.uploading)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
::v-deep(.el-input__inner) {
|
width: 100% !important;
|
}
|
|
::v-deep(.mini-upload){
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
::v-deep(.el-upload--picture-card) {
|
width: 40px !important;
|
height: 40px !important;
|
line-height: 40px !important;
|
}
|
|
::v-deep(.mini-upload .el-upload-list--picture-card .el-upload-list__item) {
|
width: 40px !important;
|
height: 40px !important;
|
}
|
|
::v-deep(.mini-upload .el-upload-list--picture-card .el-upload-list__item-thumbnail) {
|
width: 40px !important;
|
height: 40px !important;
|
object-fit: cover;
|
}
|
|
::v-deep(.mini-upload .el-upload-list--picture-card .el-upload-list__item-preview),
|
::v-deep(.mini-upload .el-upload-list--picture-card .el-upload-list__item-delete) {
|
width: 18px;
|
height: 18px;
|
font-size: 14px;
|
}
|
|
::v-deep(.el-upload--picture-card) {
|
width: 40px !important;
|
height: 40px !important;
|
line-height: 40px !important;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
::v-deep(.mini-upload .el-upload--picture-card i.el-icon-plus) {
|
font-size: 18px;
|
/* 缩小icon */
|
color: #999;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
