<template>
|
<el-dialog :visible.sync="visible" title="新增培养皿观察记录" 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="colonyNo" required>
|
<el-input v-model="form.colonyNo" placeholder="请输入分离菌落编号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="形状强壮度排名" prop="rank" required>
|
<el-input v-model="form.rank" 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 v-model="row.desc" placeholder="请输入形态记录" style="width: 100%;" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="images" label="拍照上传" width="120">
|
<template #default="{ row }">
|
<el-upload
|
:file-list="row.images"
|
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="beforeUpload"
|
action="#"
|
:limit="5"
|
class="mini-upload"
|
>
|
<i class="el-icon-plus"></i>
|
</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;">
|
<el-button type="primary" @click="handleOk">保存</el-button>
|
</div>
|
<el-dialog :visible.sync="previewVisible" width="400px">
|
<img :src="previewImg" alt="图片预览" style="width: 100%;" />
|
</el-dialog>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: 'SlantRecordDialog',
|
props: {
|
visible: Boolean,
|
value: {
|
type: Object,
|
default: () => ({ colonyNo: '', rank: '', records: [] })
|
}
|
},
|
data() {
|
return {
|
form: {
|
colonyNo: '',
|
rank: ''
|
},
|
rules: {
|
colonyNo: [{ required: true, message: '请输入分离菌落编号', trigger: 'blur' }],
|
rank: [{ required: true, message: '请输入形状强壮度排名', trigger: 'blur' }]
|
},
|
tableData: [],
|
previewVisible: false,
|
previewImg: ''
|
}
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(val) {
|
this.form.colonyNo = val.colonyNo || ''
|
this.form.rank = val.rank || ''
|
this.tableData = (val.records && val.records.length === 10)
|
? val.records.map((item, i) => ({ ...item, index: i + 1 }))
|
: Array.from({ length: 10 }, (_, i) => ({ index: i + 1, desc: '', images: [], time: this.getNowTime() }))
|
}
|
},
|
visible(val) {
|
if (!val) {
|
this.reset()
|
}
|
}
|
},
|
methods: {
|
getNowTime() {
|
const d = new Date()
|
return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
|
},
|
reset() {
|
this.form.colonyNo = ''
|
this.form.rank = ''
|
this.tableData = Array.from({ length: 10 }, (_, i) => ({ index: i + 1, desc: '', images: [], time: this.getNowTime() }))
|
},
|
handleOk() {
|
this.$refs.formRef.validate(valid => {
|
if (!valid) return
|
// 校验每行形态记录必填
|
for (let i = 0; i < this.tableData.length; i++) {
|
if (!this.tableData[i].desc) {
|
this.$message.error(`第${i + 1}次形态记录不能为空`)
|
return
|
}
|
}
|
this.$emit('ok', {
|
colonyNo: this.form.colonyNo,
|
rank: this.form.rank,
|
records: this.tableData
|
})
|
this.handleClose()
|
})
|
},
|
handleClose() {
|
this.$emit('update:visible', false)
|
},
|
beforeUpload(file) {
|
// 这里只做本地预览
|
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) }))
|
},
|
handleRemove(row, file, fileList) {
|
row.images = fileList
|
},
|
handlePreview(row, file) {
|
this.previewImg = file.url
|
this.previewVisible = true
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
::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>
|
