puzhibing
6 天以前 0db8c9b94a9ac655549d5eba5c2a6c92ac386c06
culture/src/views/strain-library/production-cell-library/add.vue
@@ -20,8 +20,25 @@
                  />
                </el-select>
              </el-form-item>
                <el-form-item label="菌种编号" prop="strainCode">
                    <el-input v-model="form.strainCode" placeholder="请输入"></el-input>
                <el-form-item label="菌种编号" prop="strainCode" class="strain-code-form-item">
<!--                    <el-input v-model="form.strainCode" placeholder="请输入"></el-input>-->
                  <div class="strain-code-wrapper">
                    <el-input
                        v-model="form.strainCode"
                        placeholder="请输入前缀"
                        class="strain-code-input"
                    />
                    <span class="strain-code-separator">-</span>
                    <el-input
                        :value="displayStrainSeq"
                        placeholder="序号"
                        class="strain-seq-input"
                        maxlength="3"
                        @input="handleSeqInput"
                        @blur="formatSeq"
                        @focus="handleFocus"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="菌种名称" prop="strainName">
                    <el-input v-model="form.strainName" placeholder="请输入"></el-input>
@@ -96,7 +113,7 @@
<script>
import SignatureCanvas from '@/components/SignatureCanvas.vue'
import { add, edit, getDetail, addBatch } from './service'
import {add, addBatch, edit, getDetail} from './service'
import {myTeamPageList} from "@/components/chooseProject/servce";
export default {
@@ -114,6 +131,7 @@
            batchForm: {
                count: ''
            },
          displayStrainSeq: '', // 显示用的序号(可能包含前导零)
          cacheForm: null,
            form: {
                strainCode: '',
@@ -147,7 +165,11 @@
            }
        }
    },
    async mounted() {
  deactivated() {
    this.cacheForm = JSON.parse(JSON.stringify(this.form));
    this.cacheForm.displayStrainSeq = this.displayStrainSeq
  },
    async activated() {
      await this.fetchTeamList();
      this.form = {
@@ -160,21 +182,32 @@
        preservationMethod: '',
        remark: ''
      }
      if (this.$route.query.id) {
      if (this.cacheForm) {
        this.form = this.cacheForm;
        if (this.cacheForm.displayStrainSeq) {
          this.displayStrainSeq = this.cacheForm.displayStrainSeq;
        }
      }
      if (this.$route.query.id && !this.cacheForm) {
        getDetail({id: this.$route.query.id}).then(res => {
          this.form = res
          if (res.strainCode) {
            const parts = res.strainCode.split('-');
            if (parts.length > 1) {
              const seq = parts.pop();
              this.displayStrainSeq = seq.replace(/^0+/, '');
              this.form.strainCode = parts.join('-');
            } else {
              this.form.strainCode = res.strainCode;
            }
          }
        })
      }
    },
  deactivated() {
    this.cacheForm = JSON.parse(JSON.stringify(this.form));
  },
  activated() {
    if (this.cacheForm) {
      this.form = this.cacheForm;
    }
  },
    watch: {
        '$route.query.id'() {
            this.form = {
@@ -191,6 +224,73 @@
        }
    },
    methods: {
      // 处理输入:只允许数字
      handleSeqInput(value) {
        console.log('输入值:', value);
        // 如果是空字符串,清空所有
        if (value === '') {
          this.form.strainSeq = '';
          this.displayStrainSeq = '';
          return;
        }
        // 只保留数字,限制3位
        let numStr = value.replace(/\D/g, '').slice(0, 3);
        if (numStr) {
          const num = parseInt(numStr);
          if (!isNaN(num) && num >= 0 && num <= 999) {
            // 存储时去除前导零
            this.form.strainSeq = String(num);
            // 显示时保留用户输入的内容(不补零,让用户看到自己输入的内容)
            this.displayStrainSeq = numStr;
          }
        } else {
          this.form.strainSeq = '';
          this.displayStrainSeq = '';
        }
        console.log('存储值:', this.form.strainSeq);
        console.log('显示值:', this.displayStrainSeq);
      },
      // 失去焦点时:补零到3位
      formatSeq() {
        console.log('失去焦点, 当前值:', this.form.strainSeq);
        if (this.form.strainSeq) {
          const num = parseInt(this.form.strainSeq);
          if (!isNaN(num) && num >= 0 && num <= 999) {
            // 保持存储值为数字字符串
            this.form.strainSeq = String(num);
            // 显示时补零到3位
            this.displayStrainSeq = String(num).padStart(3, '0');
          }
        }
        console.log('格式化后存储值:', this.form.strainSeq);
        console.log('格式化后显示值:', this.displayStrainSeq);
      },
      // 获取焦点时:显示原始数字(去除前导零,便于编辑)
      handleFocus() {
        console.log('获取焦点, 当前值:', this.form.strainSeq);
        if (this.form.strainSeq) {
          // 显示原始数字,去除前导零
          this.displayStrainSeq = this.form.strainSeq;
        }
      },
      getFullStrainCode() {
        const prefix = this.form.strainCode || '';
        const seq = this.displayStrainSeq || '';
        if (prefix && seq) {
          const paddedSeq = String(seq).padStart(3, '0');
          return `${prefix}-${paddedSeq}`;
        }
        return prefix;
      },
      // 获取项目组列表
      async fetchTeamList() {
        if (this.teamList.length > 0) return // 已有数据不再重复请求
@@ -237,9 +337,10 @@
            })
        },
        async handleSignatureConfirm(signatureImage) {
          const fullStrainCode = this.getFullStrainCode();
            let requestData = {
              projectId: this.form.projectId,
                strainCode: this.form.strainCode,
                strainCode: fullStrainCode,
                strainName: this.form.strainName,
                strainSource: this.form.strainSource,
                appraisalMethod: this.form.appraisalMethod,
@@ -264,8 +365,12 @@
                } else {
                    await add(requestData);
                }
              this.cacheForm = null
              this.displayStrainSeq = null
                this.signatureVisible = false;
                this.$router.push({ path: '/strain-library/production-cell-library' });
                this.$closeCurrentView('/strain-library/production-cell-library');
                this.$message.success('操作成功');
            } catch (error) {
                this.$message.error('操作失败');
@@ -323,6 +428,71 @@
.strain-form {
    padding: 0 40px;
  // 菌种编号表单项样式
  .strain-code-form-item {
    // 关键:让表单项占满宽度
    flex: 1;
    min-width: 280px;
    :deep(.el-form-item__content) {
      display: flex;
      align-items: center;
      width: 100%;
      line-height: 36px;
    }
  }
  .strain-code-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 1;
    .strain-code-input {
      flex: 1; // 改为 flex:1 自适应
      min-width: 0; // 防止溢出
      :deep(.el-input__inner) {
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        width: 100%;
      }
    }
    .strain-code-separator {
      color: #909399;
      font-size: 16px;
      font-weight: bold;
      user-select: none;
      flex-shrink: 0;
      line-height: 36px;
      padding: 0 2px;
    }
    .strain-seq-input {
      width: 90px; // 固定宽度
      flex-shrink: 0; // 不被压缩
      :deep(.el-input__inner) {
        height: 36px;
        line-height: 36px;
        text-align: center;
        padding: 0 5px;
        border-radius: 4px;
        width: 100%;
        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
        -moz-appearance: textfield;
      }
    }
  }
    .form-row {
        display: flex;
        flex-wrap: wrap;