From e950c38ba82e5e6bc8b0c50c35e5dbb6a180165a Mon Sep 17 00:00:00 2001
From: 13404089107 <puwei@sinata.cn>
Date: 星期二, 20 五月 2025 16:43:06 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory
---
culture/src/views/strain-library/breeding-record/SlantRecordDialog.vue | 196 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 196 insertions(+), 0 deletions(-)
diff --git a/culture/src/views/strain-library/breeding-record/SlantRecordDialog.vue b/culture/src/views/strain-library/breeding-record/SlantRecordDialog.vue
new file mode 100644
index 0000000..aa2a725
--- /dev/null
+++ b/culture/src/views/strain-library/breeding-record/SlantRecordDialog.vue
@@ -0,0 +1,196 @@
+<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>
--
Gitblit v1.7.1