Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-labor...

13404089107

2025-05-28 a60dc30be50598fe2d1acb42f8171ec69e37b436

 culture/src/views/pedigree-chart/progenitorComponents/AddAncestor.vue

@@ -1,262 +1,334 @@
<template>
    <!-- 设置传代计划数弹窗 -->
    <el-dialog :title="planForm.status == 'add' ? '新增菌种传代项' : '菌种传代项详情'" :visible.sync="planDialogVisible" width="40%"
        :close-on-click-modal="false">
        <el-form :model="planForm" :rules="planRules" ref="planForm" label-position="top">
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="菌株类型" required>
                        <div class="type-box" v-if="planForm.status == 'add'">
                            <div @click="handleType(index)" v-for="(item, index) in ['原始祖代菌株SO', '分离菌落 CO', '祖代菌株 O']"
                                :key="item" class="type-box-item"
                                :class="index + 1 == planForm.activeType && 'activeType'">
                                <div class="type-box-item-text">{{ item }}</div>
                                <img v-if="index + 1 == planForm.activeType" class="type-box-item-select"
                                    src="../../../assets/public/selectType.png" />
                            </div>
                        </div>
                        <div v-else class="type-box">
                            <div class="type-box-item activeType">
                                {{ ['原始祖代菌株SO', '分离菌落 CO', '祖代菌株 O'][planForm.activeType - 1] }}
                            </div>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="20" v-if="planForm.activeType == 1">
                    <el-form-item label="来源获得" prop="source">
                        <el-input :disabled="planForm.status != 'add'" v-model="planForm.source"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" v-else>
                    <el-form-item label="菌落编号" prop="source">
                        <el-input :disabled="planForm.status != 'add'" v-model="planForm.source"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="菌种名称" prop="inoculateName">
                        <el-input :disabled="planForm.status != 'add'" v-model="planForm.inoculateName"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="菌种编号" prop="inoculateNo">
                        <el-input :disabled="planForm.status != 'add'" v-model="planForm.inoculateNo"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="保存/废弃" required>
                        <div class="flex-row" v-if="planForm.status == 'add'">
                            <div @click="handleStatus('save')" :class="planForm.isDiscarded && 'active'">保存</div>
                            <div @click="handleStatus('discard')" :class="!planForm.isDiscarded && 'active'">废弃</div>
                        </div>
                        <div v-else class="activeStatus">
                            保存
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" v-if="!planForm.isDiscarded">
                <el-col :span="10">
                    <el-form-item label="废弃原因说明" required>
                        <el-input :disabled="planForm.status != 'add'" v-model="planForm.discardReason"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="菌种入库时间">
                        <el-input disabled v-model="planForm.inTime"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="planForm.status != 'add'" :gutter="20">
                <el-col :span="10">
                    <el-form-item label="接种操作人签字">
                        <el-image />
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="菌种保藏人签字">
                        <el-image />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div v-if="planForm.status == 'add'" class="dialog-footer">
            <el-button>保存草稿</el-button>
            <el-button type="primary" @click="handleAddPlan">提交</el-button>
        </div>
    </el-dialog>
  <!-- 设置传代计划数弹窗 -->
  <el-dialog
    :title="planForm.formStatus == 'add' ? '新增菌种传代项' : '菌种传代项详情'"
    :visible.sync="planDialogVisible"
    width="40%"
    :close-on-click-modal="false"
  >
    <el-form
      :model="planForm"
      :rules="planRules"
      ref="planForm"
      label-position="top"
    >
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="菌株类型" required>
            <div class="type-box" v-if="planForm.formStatus == 'add'">
              <div
                @click="handleType(index)"
                v-for="(item, index) in [
                  '原始祖代菌株SO',
                  '分离菌落 CO',
                  '祖代菌株 O',
                ]"
                :key="item"
                class="type-box-item"
                :class="index + 1 == planForm.strainType && 'activeType'"
              >
                <div class="type-box-item-text">{{ item }}</div>
                <img
                  v-if="index + 1 == planForm.strainType"
                  class="type-box-item-select"
                  src="../../../assets/public/selectType.png"
                />
              </div>
            </div>
            <div v-else class="type-box">
              <div class="type-box-item activeType">
                {{
                  ["原始祖代菌株SO", "分离菌落 CO", "祖代菌株 O"][
                    planForm.strainType - 1
                  ]
                }}
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20" v-if="planForm.strainType == 1">
          <el-form-item label="来源获得" prop="source">
            <el-input
              :disabled="planForm.formStatus != 'add'"
              v-model="planForm.source"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" v-else>
          <el-form-item label="菌落编号" prop="colonyNumber">
            <el-input
              :disabled="planForm.formStatus != 'add'"
              v-model="planForm.colonyNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="菌种名称" prop="strainName">
            <el-input
              :disabled="planForm.formStatus != 'add'"
              v-model="planForm.strainName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="菌种编号" prop="strainCode">
            <el-input
              :disabled="planForm.formStatus != 'add'"
              v-model="planForm.strainCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="保存/废弃" required>
            <div class="flex-row" v-if="planForm.formStatus == 'add'">
              <div
                @click="handleStatus('save')"
                :class="planForm.status === 1 && 'active'"
              >
                保存
              </div>
              <div
                @click="handleStatus('discard')"
                :class="planForm.status === 2 && 'active'"
              >
                废弃
              </div>
            </div>
            <div v-else class="activeStatus">
              {{ planForm.status === 1 ? "保存" : "废弃" }}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="planForm.status === 2">
        <el-col :span="10">
          <el-form-item label="废弃原因说明" required>
            <el-input
              :disabled="planForm.formStatus != 'add'"
              v-model="planForm.remark"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="菌种入库时间">
            <el-input disabled v-model="planForm.confirmTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="planForm.formStatus != 'add'" :gutter="20">
        <el-col v-if="planForm.vaccinateSignature" :span="10">
          <el-form-item label="接种操作人签字">
            <el-image :src="planForm.vaccinateSignature" />
          </el-form-item>
        </el-col>
        <el-col v-if="planForm.preserveSignature" :span="10">
          <el-form-item label="菌种保藏人签字">
            <el-image :src="planForm.preserveSignature" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="planForm.formStatus == 'add'" class="dialog-footer">
      <el-button>保存草稿</el-button>
      <el-button type="primary" @click="handleAddPlan">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            planDialogVisible: false,
            planForm: {},
            planRules: {
                inoculateNo: [
                    { required: true, message: '请输入菌种编号', trigger: 'blur' }
                ],
                inoculateName: [
                    { required: true, message: '请输入菌种名称', trigger: 'blur' }
                ],
                source: [
                    { required: true, message: '请输入来源获得', trigger: 'blur' }
                ],
            },
            dialogTitle: ''
        }
  data() {
    return {
      planDialogVisible: false,
      planForm: {
        source: "", // 来源获得
        strainCode: "", // 菌种编号
        strainName: "", // 菌种名称
        colonyNumber: "", // 菌落编号
        strainType: "1", // 1原始祖代菌株 2分离菌落 3祖代菌株
        status: 1, // 1保存 2废弃
        type: 1, // 固定为1
        confirmTime: "",
        remark: "",
        formStatus: "add",
      },
      planRules: {
        strainCode: [
          { required: true, message: "请输入菌种编号", trigger: "blur" },
        ],
        colonyNumber: [
          { required: true, message: "请输入菌落编号", trigger: "blur" },
        ],
        strainName: [
          { required: true, message: "请输入菌种名称", trigger: "blur" },
        ],
        source: [
          { required: true, message: "请输入来源获得", trigger: "blur" },
        ],
      },
      dialogTitle: "",
    };
  },
  methods: {
    openInitData(value) {
      // 赋值当前时间
      // const now = new Date();
      // const pad = (n) => n.toString().padStart(2, "0");
      // this.planForm.storageTime = `${now.getFullYear()}-${pad(
      //   now.getMonth() + 1
      // )}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(
      //   now.getMinutes()
      // )}:${pad(now.getSeconds())}`;
      this.planForm = value;
      this.openDialog();
    },
    methods: {
        openInitData(value) {
            this.planForm = value
            this.openDialog()
        },
        openDialog() {
            this.planDialogVisible = true
        },
        closeDialog() {
            this.planDialogVisible = false
        },
        handleAddPlan() {
            this.$refs.planForm.validate((valid) => {
                if (valid) {
                    if (!this.planForm.activeType) {
                        this.$message.warning('请选择菌株类型');
                        return
                    }
                    this.$emit('addNodeSign', this.planForm, 1)
                }
            })
        },
        handleStatus(status) {
            if (this.planForm.status != 'add') return
            this.planForm.isDiscarded = status === 'save'
            this.$forceUpdate()
        },
        handleType(index) {
            if (this.planForm.status != 'add') return
            this.planForm.activeType = index + 1
    openDialog() {
      this.planDialogVisible = true;
    },
    closeDialog() {
      this.planDialogVisible = false;
    },
    handleAddPlan() {
      this.$refs.planForm.validate((valid) => {
        if (valid) {
          if (!this.planForm.strainType) {
            this.$message.warning("请选择菌株类型");
            return;
          }
          this.$emit("addNodeSign", { ...this.planForm }, 1);
        }
    }
}
      });
    },
    handleStatus(status) {
      if (this.planForm.formStatus !== "add") return;
      this.planForm.status = status === "save" ? 1 : 2;
      this.$forceUpdate();
    },
    handleType(index) {
      if (this.planForm.formStatus !== "add") return;
      this.planForm.strainType = index + 1;
      // 如果是分离菌落或祖代菌株，colonyNumber=source，否则清空
      this.planForm.colonyNumber = "";
    },
  },
};
</script>
<style scoped lang="less">
.dialog-footer {
    margin-top: 39px;
    display: flex;
    justify-content: center;
    gap: 60px;
  margin-top: 39px;
  display: flex;
  justify-content: center;
  gap: 60px;

    .el-button--primary {
        width: 150px;
        height: 40px;
        background: #049C9A;
        border-radius: 4px;
    }
  .el-button--primary {
    width: 150px;
    height: 40px;
    background: #049c9a;
    border-radius: 4px;
  }

    .el-button--default {

        width: 150px;
        height: 40px;
        border-radius: 4px;
    }
  .el-button--default {
    width: 150px;
    height: 40px;
    border-radius: 4px;
  }
}

::v-deep .el-input-number .el-input__inner {
    text-align: left;
  text-align: left;
}

.el-input-number--small {
    width: 100%;
  width: 100%;
}

.flex-row {
    width: 370px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333333;
    padding: 4px;
  width: 370px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333333;
  padding: 4px;
  border-radius: 10px;
  border: 2px solid rgba(4, 156, 154, 0.5);
  font-family: "PingFangSCRegular";

  .flex-row-save {
    background: #049c9a;
    color: #fff;
  }

  div {
    width: 183px;
    height: 32px;
    text-align: center;
    flex-shrink: 0;
    cursor: pointer;
  }

  .active {
    font-family: "sourceHanSansCN-Medium";
    color: #049c9a;
    background: #ebfefd;
    box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
    border-radius: 10px;
    border: 2px solid rgba(4, 156, 154, 0.5);
    font-family: 'PingFangSCRegular';

    .flex-row-save {
        background: #049C9A;
        color: #fff;
    }

    div {
        width: 183px;
        height: 32px;
        text-align: center;
        flex-shrink: 0;
        cursor: pointer;
    }

    .active {
        font-family: 'SourceHanSansCN-Medium';
        color: #049C9A;
        background: #EBFEFD;
        box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
        border-radius: 10px;
    }
  }
}

.activeStatus {
    font-family: 'SourceHanSansCN-Medium';
    color: #049C9A;
    background: #EBFEFD;
    border-radius: 10px;
    width: 183px;
    line-height: 40px;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
  font-family: "sourceHanSansCN-Medium";
  color: #049c9a;
  background: #ebfefd;
  border-radius: 10px;
  width: 183px;
  line-height: 40px;
  border-radius: 10px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
}

.type-box {
    display: flex;
    align-items: center;
    gap: 11px;
  display: flex;
  align-items: center;
  gap: 11px;

    .activeType {
        background: #EBFEFD;
        font-weight: 500;
        color: #049C9A;
  .activeType {
    background: #ebfefd;
    font-weight: 500;
    color: #049c9a;
  }

  &-item {
    cursor: pointer;
    position: relative;
    width: 150px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 4px;
    font-weight: 400;
    font-size: 16px;
    color: #333333;

    &-text {
      line-height: 40px;
    }

    &-item {
        cursor: pointer;
        position: relative;
        width: 150px;
        text-align: center;
        background: #F5F5F5;
        border-radius: 4px;
        font-weight: 400;
        font-size: 16px;
        color: #333333;

        &-text {
            line-height: 40px;
        }

        &-select {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 21px;
            height: 17px;
        }
    &-select {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 21px;
      height: 17px;
    }
  }
}
</style>
</style>