提交最新代码

puzhibing

6 天以前 0db8c9b94a9ac655549d5eba5c2a6c92ac386c06

 culture/src/views/strain-library/breeding-record/SlantRecordDialog.vue

@@ -1,15 +1,15 @@
<template>
  <el-dialog :visible.sync="visible" :title="editData ? '编辑培养皿观察记录' : '新增培养皿观察记录'" width="80%" @close="handleClose">
  <el-dialog :visible.sync="visible" :title="readOnly ? '培养皿观察记录详情' : 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-input :disabled="!editable" 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-input :disabled="!editable" v-model="form.strength" placeholder="请输入形状强壮度排名" />
          </el-form-item>
        </el-col>
      </el-row>
@@ -22,7 +22,7 @@
      </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="请输入形态记录"
          <el-input class="el-input-full" style="width: 100%;" :disabled="!editable" v-model="row.desc" placeholder="请输入形态记录"
            @blur="handleDescBlur(row)" />
        </template>
      </el-table-column>
@@ -36,7 +36,7 @@
            :http-request="options => rowHandleUpload(options, row)"
            :before-upload="file => rowBeforeUpload(file, row)"
            :show-file-list="false"
            :disabled="roleType!=4 || row.uploading"
            :disabled="!editable || row.uploading"
            accept="image/*"
            :auto-upload="true"
          >
@@ -48,17 +48,17 @@
                @click.stop="handlePreview(row, img)"
              >
                <el-image
                  :src="img.url"
                  :preview-src-list="row.images.map(i => i.url)"
                  :src="getFullUrl(img.url)"
                  :preview-src-list="row.images.map(i => getFullUrl(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>
                <i class="el-icon-delete" v-if="editable" @click.stop="rowHandleRemove(row, img, row.images.filter(f => f !== img))"></i>
              </div>
              <div
                v-if="roleType==4"
                v-if="editable"
                class="upload-thumb upload-btn"
                @click.stop="triggerUpload(row.index)"
              >
@@ -74,7 +74,7 @@
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;" v-if="roleType==4">
    <div style="text-align: center;" v-if="editable">
      <el-button type="primary" @click="handleOk" :disabled="hasUploading">保存</el-button>
    </div>
  </el-dialog>
@@ -82,11 +82,15 @@

<script>
import moment from 'moment'
import { customUploadRequest, getFullUrl } from '@/utils/utils'
import { customUploadRequest, getFullUrl, getUploadedFilePath, normalizeFileList } from '@/utils/utils'
export default {
  name: 'SlantRecordDialog',
  props: {
    visible: Boolean,
    readOnly: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
      default: null
@@ -132,7 +136,8 @@
                index: index + 1,
                desc: record.desc || '',
                time: record.time || this.getNowTime(),
                images: record.images || []
                images: this.normalizeImages(record.images),
                uploading: false
              }))
              while (this.tableData.length < 10) {
                this.tableData.push({
@@ -203,6 +208,7 @@
      }
    },
    handleOk() {
      if (!this.editable) return
      this.$refs.formRef.validate(valid => {
        if (!valid) return

@@ -235,8 +241,15 @@
      this.$emit('update:visible', false)
    },
    rowBeforeUpload(file, row) {
      // 可做校验，暂时直接允许
      return true;
      if (!file.type || !file.type.startsWith('image/')) {
        this.$message.error('只能上传图片文件')
        return false
      }
      if (file.size > 10 * 1024 * 1024) {
        this.$message.error('图片大小不能超过 10MB')
        return false
      }
      return true
    },
    rowHandleUpload(options, row) {
      row.uploading = true;
@@ -244,10 +257,11 @@
      customUploadRequest({
        file,
        onSuccess: (res) => {
          if (res.code === 200) {
          const uploadedPath = getUploadedFilePath(res)
          if (uploadedPath) {
            const fileObj = {
              name: file.name,
              url: getFullUrl(res.msg || res.data || ''),
              url: uploadedPath,
              uid: new Date().getTime()
            };
            if (!Array.isArray(row.images)) this.$set(row, 'images', []);
@@ -256,8 +270,8 @@
            this.$message.success('文件上传成功');
            onSuccess(res);
          } else {
            this.$message.error(res.msg || '文件上传失败');
            onError(res);
            this.$message.error(res && res.msg ? res.msg : '上传接口未返回文件地址');
            onError(new Error('missing uploaded file path'));
          }
          row.uploading = false;
        },
@@ -277,21 +291,28 @@
      this.previewVisible = true
    },
    handleDescBlur(row) {
      console.log(row)
      if (row.desc) {
      if (this.editable && row.desc) {
        row.time = this.getNowTime()
        this.$forceUpdate()
      }
    },
    triggerUpload(index) {
      if (!this.editable) return
      const uploadRef = this.$refs['uploadRef' + index];
      if (uploadRef && uploadRef.$el) {
        const input = uploadRef.$el.querySelector('input[type=file]');
        if (input) input.click();
      }
    },
    getFullUrl,
    normalizeImages(images) {
      return normalizeFileList(images)
    }
  },
  computed: {
    editable() {
      return [1, 4].includes(Number(this.roleType)) && !this.readOnly
    },
    hasUploading() {
      return this.tableData.some(row => row.uploading)
    }