feat

pyt

2025-05-08 7636ddd9f88a837de1126b72c37269e7dd39b0d7

feat

 culture/src/router/index.js

@@ -213,6 +213,14 @@
                title: "菌种传代生产谱系图",
            },
            component: () => import("../views/pedigree-chart"),
           },
           {
            path: 'add-pedigree',
            name: 'AddPedigree',
            meta: {
                title: "新增菌种传代生产谱系图",
            },
            component: () => import("../views/pedigree-chart/add"),
           }
        ]
    },

 culture/src/views/pedigree-chart/add.vue

New file
@@ -0,0 +1,256 @@
<template>
  <el-form
    :model="form"
    :rules="rules"
    ref="pedigreeForm"
    label-position="top"
    class="strain-form"
  >
    <div class="card">
      <div class="form-items-row">
        <el-form-item label="菌种源" prop="strainSource" required>
          <div class="flex-row">
            <div class="input-wrapper">
              <el-input
                v-model="form.strainSource"
                placeholder="请输入"
                class="fixed-width-input"
              ></el-input>
            </div>
            <span class="form-text">代—</span>
            <div class="input-wrapper">
              <el-input
                v-model="form.generation"
                placeholder="请输入"
                class="fixed-width-input"
              ></el-input>
            </div>
            <span class="form-text">细胞库</span>
          </div>
        </el-form-item>
        <el-form-item label="传代菌种编号" prop="strainNo" required>
          <el-input
            v-model="form.strainNo"
            placeholder="请输入"
            class="fixed-width-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="传代菌种名称" prop="strainName" required>
          <el-input
            v-model="form.strainName"
            placeholder="请输入"
            class="fixed-width-input"
          ></el-input>
        </el-form-item>
      </div>
    </div>
    <div class="chart">
      <div class="header">
        <div class="title">菌种传代生产谱系图</div>
        <div class="option-btn">
          <el-button type="primary" class="el-icon-plus"> 新增</el-button>
          <el-button type="primary">设置传代计划数</el-button>
          <el-button type="primary">详情</el-button>
        </div>
      </div>
    </div>
    <div class="end-btn">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleDraft">存草稿</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
    <!-- 签字确认组件 -->
    <SignatureCanvas
      :visible.sync="signatureVisible"
      @confirm="handleSignatureConfirm"
    />
  </el-form>
</template>

<script>
import SignatureCanvas from "@/components/SignatureCanvas.vue";

export default {
  name: "AddPedigree",
  components: {
    SignatureCanvas,
  },
  data() {
    return {
      signatureVisible: false,
      form: {
        strainSource: "",
        generation: "",
        cellBank: "",
        strainNo: "",
        strainName: "",
        remarks: "",
      },
      rules: {
        strainSource: [
          { required: true, message: "请输入菌种源", trigger: "blur" },
        ],
        strainNo: [
          { required: true, message: "请输入传代菌种编号", trigger: "blur" },
        ],
        strainName: [
          { required: true, message: "请输入传代菌种名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.pedigreeForm.validate((valid) => {
        if (valid) {
          this.signatureVisible = true;
        }
      });
    },
    handleDraft() {
      // 实现存草稿逻辑
      console.log("save draft", this.form);
    },
    handleCancel() {
      this.$router.back();
    },
    handleSignatureConfirm(signatureImage) {
      this.signatureVisible = false;
      // 处理提交逻辑
      console.log("submit form with signature:", this.form, signatureImage);
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="less">
.card {
  min-height: 145px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  border: 4px solid #ffffff;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.chart {
  padding: 20px 38px;
  background: rgba(255,255,255,0.8);
  box-shadow: 0px 10px 19px 0px rgba(0,0,0,0.06);
  border-radius: 16px;
  border: 4px solid #FFFFFF;
  margin-top: 30px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
        font-size: 18px;
    }
    .option-btn {
        display: flex;
        gap: 10px;
        .el-button {
          margin-left: 0;
        }
    }
  }
}

.form-items-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;

  @media (min-width: 1200px) {
    flex-direction: row;
    justify-content: space-between;
  }

  @media (max-width: 1199px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.flex-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}

.strain-form {
  width: 100%;

  :deep(.el-form-item) {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    @media (min-width: 1200px) {
      margin-right: 10px;
    }

    @media (max-width: 1199px) {
      width: 100%;
      margin-right: 0;
    }

    .el-form-item__label {
      padding: 0 0 8px;
      line-height: 1.2;
      text-align: left;
    }

    .el-form-item__content {
      width: 100%;
    }
  }
}

.input-wrapper {
  @media (min-width: 769px) {
    width: 290px;
    min-width: 290px;
  }

  @media (max-width: 768px) {
    width: 100%;
  }
}

.fixed-width-input {
  width: 100%;

  @media (min-width: 769px) {
    width: 290px !important;
    min-width: 290px !important;
  }
}

.form-text {
  margin: 0 8px;
  white-space: nowrap;

  @media (max-width: 768px) {
    margin: 8px 0;
  }
}

.end-btn {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style> 

 culture/src/views/pedigree-chart/index.vue

@@ -177,6 +177,11 @@
        status: "",
      };
    },
    handleNewStrain() {
      this.$router.push({
        path: "/strain/add-pedigree",
      });
    },
    handleSearch() {
      // 实现查询逻辑
      console.log("查询条件：", this.form);