<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="160">
|
<template #default="{ row }">
|
<el-upload
|
class="custom-upload-row"
|
:ref="'uploadRef' + row.index"
|
action="#"
|
:file-list="[]"
|
:http-request="options => rowHandleUpload(options, row)"
|
:before-upload="file => rowBeforeUpload(file, row)"
|
:show-file-list="false"
|
:disabled="roleType!=4 || row.uploading"
|
accept="image/*"
|
:auto-upload="true"
|
>
|
<div class="upload-flex-box">
|
<div
|
v-for="(img, idx) in row.images"
|
:key="img.uid || img.url"
|
class="upload-thumb"
|
@click.stop="handlePreview(row, img)"
|
>
|
<el-image
|
:src="img.url"
|
:preview-src-list="row.images.map(i => i.url)"
|
:initial-index="idx"
|
fit="cover"
|
style="width: 100%; height: 100%;"
|
@click.stop.native="handlePreview(row, img)"
|
/>
|
<i class="el-icon-delete" v-if="roleType==4" @click.stop="rowHandleRemove(row, img, row.images.filter(f => f !== img))"></i>
|
</div>
|
<div
|
v-if="roleType==4"
|
class="upload-thumb upload-btn"
|
@click.stop="triggerUpload(row.index)"
|
>
|
<i class="el-icon-plus"></i>
|
</div>
|
</div>
|
</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'
|
import { customUploadRequest, getFullUrl } from '@/utils/utils'
|
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) {
|
if (!this.editData) {
|
this.reset()
|
this.tableData = Array.from({ length: 10 }, (_, i) => ({
|
index: i + 1,
|
desc: '',
|
time: '',
|
images: [],
|
uploading: false
|
}))
|
}
|
} else {
|
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)
|
},
|
rowBeforeUpload(file, row) {
|
// 可做校验，暂时直接允许
|
return true;
|
},
|
rowHandleUpload(options, row) {
|
row.uploading = true;
|
const { file, onSuccess, onError } = options;
|
customUploadRequest({
|
file,
|
onSuccess: (res) => {
|
if (res.code === 200) {
|
const fileObj = {
|
name: file.name + new Date().getTime(),
|
url: getFullUrl(res.msg || res.data || ''),
|
uid: new Date().getTime()
|
};
|
if (!Array.isArray(row.images)) this.$set(row, 'images', []);
|
row.images.push(fileObj);
|
this.$set(row, 'images', [...row.images]);
|
this.$message.success('文件上传成功');
|
onSuccess(res);
|
} else {
|
this.$message.error(res.msg || '文件上传失败');
|
onError(res);
|
}
|
row.uploading = false;
|
},
|
onError: (err) => {
|
this.$message.error('文件上传失败');
|
row.uploading = false;
|
onError(err);
|
}
|
});
|
},
|
rowHandleRemove(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()
|
}
|
},
|
triggerUpload(index) {
|
const uploadRef = this.$refs['uploadRef' + index];
|
if (uploadRef && uploadRef.$el) {
|
const input = uploadRef.$el.querySelector('input[type=file]');
|
if (input) input.click();
|
}
|
}
|
},
|
computed: {
|
hasUploading() {
|
return this.tableData.some(row => row.uploading)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
::v-deep(.el-input__inner) {
|
width: 100% !important;
|
}
|
|
::v-deep(.custom-upload-row .upload-flex-box) {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
max-width: 140px;
|
}
|
.upload-thumb {
|
width: 40px;
|
height: 40px;
|
position: relative;
|
border: 1px solid #eee;
|
border-radius: 4px;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.upload-thumb img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
.upload-thumb .el-icon-delete {
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
font-size: 14px;
|
color: #f56c6c;
|
background: #fff;
|
border-radius: 50%;
|
cursor: pointer;
|
}
|
.upload-btn {
|
cursor: pointer;
|
background: #fafafa;
|
color: #999;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
