ConsumSupplier-Platform/src/views/page/consumCataManage-sup/catalogdetailsadd.vue

<template>
  <!-- 非挂网目录新增 -->
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first">
        <el-form
          :model="infoData"
          ref="planForm"
          label-width="150px"
          class="grid-form-class"
        >
          <div class="common-card">
            <h3>耗材基本资料</h3>
            <!-- <div class="right-type" style="color: #3c64dc; font-weight: 800">
          {{ $store.state.user.username }}
        </div> -->
            <div class="form-body">
              <div class="flex-css">
                <el-form-item
                  label="耗材名称"
                  prop="prodName"
                  :rules="rules.required"
                >
                  <el-input
                    v-model="infoData.prodName"
                    placeholder="请输入耗材名称"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="通用名称"
                  prop="genName"
                  :rules="rules.required"
                >
                  <el-input
                    v-model="infoData.genName"
                    placeholder="请输入通用名称"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="英文名称"
                  prop="engName"
                  :rules="rules.InterEng"
                >
                  <el-input
                    v-model="infoData.engName"
                    placeholder="请输入英文名称"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="flex-css">
                <el-form-item label="品牌" prop="brad">
                  <el-input
                    v-model="infoData.brad"
                    maxlength="50"
                    placeholder="请输入品牌"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="生产来源"
                  prop="prodSouc"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.prodSouc"
                    placeholder="请选择生产来源"
                    clearable
                  >
                    <el-option
                      v-for="item in sourceData"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="生产企业" prop="prodEntp">
                  <el-input
                    v-model="infoData.prodEntp"
                    maxlength="50"
                    placeholder="请输入生产企业"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="flex-css">
                <el-form-item label="代理企业" prop="agnt">
                  <el-input
                    v-model="infoData.agnt"
                    placeholder="请输入代理企业"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <!--  -->

                <el-form-item label="规格" prop="spec">
                  <el-input
                    v-model="infoData.spec"
                    placeholder="请输入规格"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item label="型号" prop="mol">
                  <el-input
                    v-model="infoData.mol"
                    placeholder="请输入型号"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="flex-css">
                <el-form-item label="材质" prop="matl">
                  <el-input
                    v-model="infoData.matl"
                    placeholder="请输入材质"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item label="包装材质" prop="pacmatl">
                  <el-input
                    v-model="infoData.pacmatl"
                    placeholder="请输入包装材质"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item label="注册证号" prop="regcertno">
                  <el-input
                    v-model="infoData.regcertno"
                    placeholder="请输入注册证号"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
              </div>
              <!-- <div class="flex-css">
                <el-form-item label="挂网价格" prop="pubonlnPric" :rules="rules.numPotNo">
                  <el-input
                    v-model="infoData.pubonlnPric"
                    placeholder="请输入挂网价格"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
              </div> -->
            </div>
          </div>
          <div class="common-card">
            <h3>耗材属性资料</h3>
            <div class="form-body">
              <div class="flex-css">
                <!-- <el-form-item label="耗材大类" prop="prodType" :rules="rules.required">
              <el-select v-model="infoData.prodType" placeholder="请选择耗材大类" clearable>
                <el-option
                  v-for="item in prodTypeData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
                <el-form-item
                  label="耗材类别"
                  prop="mcsType"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.mcsType"
                    placeholder="请选择耗材类别"
                    clearable
                  >
                    <el-option
                      v-for="item in mcsTypeData"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="院端集采"
                  prop="isFas"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.isFas"
                    placeholder="请选择是否集采"
                    clearable
                    @change="clearType"
                  >
                    <el-option
                      v-for="item in iFjcData"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="平台集采"
                  prop="plafFas"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.plafFas"
                    placeholder="请选择是否集采"
                    clearable
                    disabled="true"
                    @change="clearType"
                  >
                    <el-option
                      v-for="item in iFjcData"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="flex-css">
                <el-form-item
                  label="集采相关文件"
                  prop="fasFile"
                  v-if="infoData.isFas == '1'"
                >
                  <yl-upload
                    :fileId="infoData.fasFile"
                    @getUpload="getfasFileload"
                  >
                  </yl-upload>
                </el-form-item>
                <el-form-item
                  label="集采批次"
                  prop="fasBtch"
                  v-if="infoData.plafFas == '1'"
                  :rules="rules.required"
                >
                  <el-input
                    v-model="infoData.fasBtch"
                    placeholder="请输入集采批次"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="是否寄售"
                  prop="isCgmt"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.isCgmt"
                    placeholder="请选择是否寄售"
                    clearable
                  >
                    <el-option
                      v-for="item in iFjcData"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="是否十八项重点耗材" prop="isEm" :rules="rules.selectRequired">
              <el-select v-model="infoData.isEm" placeholder="请选择是否十八项重点耗材" clearable>
                <el-option
                  v-for="item in iFjcData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
              </div>
            </div>
          </div>
          <div class="common-card">
            <h3>耗材编码资料</h3>
            <div class="form-body">
              <div class="flex-css">
                <el-form-item
                  label="医保编码"
                  prop="hiCode"
                  :rules="rules.proCodeRule"
                >
                  <el-input
                    v-model="infoData.hiCode"
                    placeholder="请输入医保编码"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="common-card">
            <h3>耗材包装规则</h3>
            <div class="form-body">
              <div class="flex-css">
                <el-form-item
                  label="最小单位"
                  prop="prcUnt"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.prcUnt"
                    placeholder="请选择最小单位"
                    clearable
                  >
                    <el-option
                      v-for="item in purcUntData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="采购价"
                  prop="purcPric"
                  :rules="rules.numPot4"
                >
                  <template slot-scope="{}" slot="label">
                    <span>采购价</span>
                    <el-tooltip class="item" effect="dark" placement="top">
                      <i
                        class="el-icon-question"
                        style="font-size: 14px; vertical-align: middle"
                      ></i>
                      <div slot="content">最小单位采购价</div>
                    </el-tooltip>
                  </template>
                  <el-input
                    v-model="infoData.purcPric"
                    maxlength="50"
                    placeholder="请输入采购价"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="flex-css">
                <el-form-item
                  label="采购单位"
                  prop="purcUnt"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.purcUnt"
                    placeholder="请选择采购单位"
                    clearable
                  >
                    <el-option
                      v-for="item in prcUntData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="包装内数量"
                  prop="convrat"
                  :rules="rules.InterNum"
                >
                  <template slot-scope="{}" slot="label">
                    <span>包装内数量</span>
                    <el-tooltip class="item" effect="dark" placement="top">
                      <i
                        class="el-icon-question"
                        style="font-size: 14px; vertical-align: middle"
                      ></i>
                      <div slot="content">包含最小单位的数量</div>
                    </el-tooltip>
                  </template>
                  <template>
                    <el-input
                      v-model="infoData.convrat"
                      placeholder="请输入包装内数量"
                      maxlength="50"
                    ></el-input>
                  </template>
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="common-card">
            <h3>其他资料</h3>
            <div class="form-body">
              <div class="flex-css">
                <el-form-item
                  label="存储方式"
                  prop="stogType"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.stogType"
                    placeholder="请选择存储方式"
                    clearable
                    @change="storageChage"
                  >
                    <el-option
                      v-for="item in stogTypeData"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="存储温度"
                  prop="stogTemp"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.stogTemp"
                    placeholder="请选择存储温度"
                    clearable
                    disabled
                  >
                    <el-option
                      v-for="item in stogTempData"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否灭菌"
                  prop="isStlz"
                  :rules="rules.selectRequired"
                >
                  <el-select
                    v-model="infoData.isStlz"
                    placeholder="请选择是否灭菌"
                    clearable
                  >
                    <el-option
                      v-for="item in isStlzdata"
                      :key="item.value"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
        <div class="foot-button" v-if="btnShow">
          <el-button type="success" @click="handleSave" :loading="saveLoad"
            >保存</el-button
          >
          <el-button type="primary" @click="handleSubmit" :loading="submitLoad"
            >提交</el-button
          >
          <el-button type="info" @click="handleBack">返回</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylUpload from "@/components/yl-upload";
import { getThreeMonthAgoDate } from "@/utils/utils";
import {
  selectMcsListById,
  insertSplerMcsList,
  insertMcsQua,
  insertFacQua
} from "@/api/consumCataManage-sup/index";
import rules from "@/utils/rules";
export default {
  components: { ylUpload, ylStep },
  data() {
    return {
      activeName: "first",
      saveLoad: false,
      submitLoad: false,
      rules,
      infoData: {
        spdId: "",
        materialId: "",
        prodName: "",
        hiCode: "",
        isFas: "0",
        plafFas: "0",
        fasBtch: "",
        spec: "",
        mol: "",
        matl: "",
        pacmatl: "",
        prodSouc: "",
        regcertno: "",
        prodentpCode: null,
        prodEntp: "",
        purcPric: null,
        status: "",
        isPub: "0",
        id: "",
        fasFile: "" //集采相关文件
      },
      listLoading: false,
      planForm: {},
      sourceData: [{ value: "1", name: "国产" }, { value: "2", name: "进口" }],
      iFjcData: [{ value: "1", name: "是" }, { value: "0", name: "否" }],
      mcsTypeData: [
        { value: "0", name: "普通耗材" },
        { value: "1", name: "高值耗材" },
        { value: "2", name: "试剂" },
        { value: "3", name: "总务耗材" },
        { value: "4", name: "低值可收费" },
        { value: "5", name: "低值不可收费" }
      ],
      prodTypeData: [
        { value: "0", name: "医用耗材" },
        { value: "1", name: "办公用品" }
      ],
      stogTypeData: [
        { value: "常温", name: "常温" },
        { value: "冷藏", name: "冷藏" },
        { value: "冷冻", name: "冷冻" }
      ],
      stogTempData: [
        { value: "15℃-25℃", name: "15℃-25℃" },
        { value: "2℃-8℃", name: "2℃-8℃" },
        { value: "-10℃-2℃", name: "-10℃-2℃" }
      ],
      isStlzdata: [
        { value: "灭菌", name: "灭菌" },
        { value: "非灭菌", name: "非灭菌" }
      ],
      purcUntData: [
        // 最小单位
        { value: "箱", label: "箱" },
        { value: "包", label: "包" },
        { value: "袋", label: "袋" },
        { value: "盒", label: "盒" },
        { value: "瓶", label: "瓶" },
        { value: "根", label: "根" },
        { value: "片", label: "片" },
        { value: "贴", label: "贴" },
        { value: "件", label: "件" },
        { value: "条", label: "条" },
        { value: "只", label: "只" },
        { value: "块", label: "块" },
        { value: "枚", label: "枚" },
        { value: "捆", label: "捆" },
        { value: "束", label: "束" },
        { value: "斤", label: "斤" },
        { value: "个", label: "个" },
        { value: "支", label: "支" },
        { value: "台", label: "台" },
        { value: "克", label: "克" },
        { value: "张", label: "张" },
        { value: "辆", label: "辆" },
        { value: "具", label: "具" },
        { value: "米", label: "米" },
        { value: "批", label: "批" },
        { value: "盘", label: "盘" },
        { value: "把", label: "把" },
        { value: "对", label: "对" },
        { value: "盆", label: "盆" },
        { value: "套", label: "套" },
        { value: "轴", label: "轴" },
        { value: "板", label: "板" },
        { value: "本", label: "本" },
        { value: "公斤", label: "公斤" },
        { value: "万只", label: "万只" },
        { value: "卷", label: "卷" },
        { value: "付", label: "付" },
        { value: "桶", label: "桶" },
        { value: "节", label: "节" },
        { value: "打", label: "打" },
        { value: "副", label: "副" },
        { value: "人份", label: "人份" }
      ],
      prcUntData: [
        { value: "箱", label: "箱" },
        { value: "包", label: "包" },
        { value: "袋", label: "袋" },
        { value: "盒", label: "盒" },
        { value: "大包", label: "大包" },
        { value: "大袋", label: "大袋" },
        { value: "大盒", label: "大盒" },
        { value: "中包", label: "中包" },
        { value: "中袋", label: "中袋" },
        { value: "中盒", label: "中盒" },
        { value: "小包", label: "小包" },
        { value: "小袋", label: "小袋" },
        { value: "小盒", label: "小盒" },
        { value: "瓶", label: "瓶" },
        { value: "个", label: "个" },
        { value: "根", label: "根" },
        { value: "管", label: "管" },
        { value: "件", label: "件" },
        { value: "颗", label: "颗" },
        { value: "支", label: "支" },
        { value: "只", label: "只" },
        { value: "把", label: "把" },
        { value: "罐", label: "罐" },
        { value: "杯", label: "杯" },
        { value: "对", label: "对" },
        { value: "枚", label: "枚" },
        { value: "套", label: "套" },
        { value: "条", label: "条" },
        { value: "桶", label: "桶" },
        { value: "张", label: "张" },
        { value: "束", label: "束" },
        { value: "本", label: "本" },
        { value: "片", label: "片" },
        { value: "台", label: "台" },
        { value: "块", label: "块" },
        { value: "卷", label: "卷" }
      ],
      btnShow: true,
      dialogFormVisible: false,
      loading1: false,
      addform: {
        splerId: "",
        hiCode: "",
        quaName: "",
        quaCode: "",
        issuDate: "",
        endDate: "",
        fileId: "",
        memo: ""
      },
      textMap: {
        one: "耗材资质",
        two: "生产厂商资质"
      },
      dialogStatus: "",
      list: [],
      listC: [],
      editCode: true,
      qualData: [
        { id: "1", dicVal: "耗材授权书" },
        { id: "2", dicVal: "耗材注册证" }
      ],
      TimeOption: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      TimeOption1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    // if (this.$route.query.status == "B") {
    //   this.btnShow = false;
    // }else if(this.$route.query.status=="D"){
    //   this.reaDiv = true
    // }
    // this.getData()
  },
  methods: {
    //集采相关文件上传
    getfasFileload(id) {
      this.infoData.fasFile = id;
    },
    //存储方式和温度联动
    storageChage(val) {
      if (val == "常温") {
        this.infoData.stogTemp = "15℃-25℃";
      }
      if (val == "冷藏") {
        this.infoData.stogTemp = "2℃-8℃";
      }
      if (val == "冷冻") {
        this.infoData.stogTemp = "-10℃-2℃";
      }
    },
    isWithinLastThreeMonths(deadline) {
      // 创建截止日期对象
      const deadlineDate = new Date(deadline);
      // 创建截止日期前三个月的日期对象
      const threeMonthsAgo = new Date(getThreeMonthAgoDate(deadline));
      // 获取当前日期
      const now = new Date();
      // 判断当前日期是否在截止日期前三个月之内
      return now >= threeMonthsAgo && now <= deadlineDate;
    },

    tableColClassName({ row, column, rowIndex, columnIndex }) {
      if (
        this.isWithinLastThreeMonths(new Date(row.endDate)) &&
        columnIndex === 4
      ) {
        return "warning-row";
      }
      return "";
    },
    getUpload(id) {
      this.temp.fileId = id;
      if (id) {
        this.$refs.dataForm.clearValidate("fileId");
      } else {
        this.$refs.dataForm.validateField("fileId");
      }
    },
    // 信息保存
    handleSave() {
      this.$refs["planForm"].validate(valid => {
        if (valid) {
          this.$confirm("确认保存", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.saveLoad = true;
              this.infoData.spdId = this.$route.query.spdId;
              this.infoData.status = "A";
              this.infoData.opeType = "新增";
              insertSplerMcsList(this.infoData)
                .then(response => {
                  this.$message({
                    message: "保存成功",
                    type: "success"
                  });
                  this.infoData.id = response.data.id;
                  this.saveLoad = false;
                })
                .catch(() => {
                  this.saveLoad = false;
                });
            })
            .catch(() => {});
        }
      });
    },

    // 整体提交
    handleSubmit() {
      this.$refs["planForm"].validate(valid => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.submitLoad = true;
              this.infoData.status = "B";
              this.infoData.spdId = this.$route.query.spdId;
              this.infoData.opeType = "新增";
              insertSplerMcsList(this.infoData)
                .then(response => {
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.submitLoad = false;
                  this.$router.push({
                    name: "consumCataManagement-sup",
                    query: { spdId: this.$route.query.spdId }
                  });
                })
                .catch(() => {
                  this.submitLoad = false;
                });
            })
            .catch(() => {});
        } else {
          this.$nextTick(() => {
            this.$scrollToError();
          });
        }
      });
    },
    // 集采类型
    clearType() {
      this.infoData.fasBtch = "";
    },
    handleAdd1(type) {
      (this.addform = {
        splerId: "",
        quaName: "",
        quaCode: "",
        issuDate: "",
        endDate: "",
        fileId: "",
        memo: "",
        prodEntp: ""
      }),
        (this.dialogFormVisible = true);
      this.dialogStatus = type;
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      });
    },
    getUpload(id) {
      this.addform.fileId = id;
      if (id) {
        this.$refs.addForm.clearValidate("fileId");
      } else {
        this.$refs.addForm.validateField("fileId");
      }
    },
    handleBack() {
      this.$router.push({
        name: "distributionmanage",
        query: { spdId: this.$route.query.spdId }
      });
    }
  }
};
</script>

<style scoped lang="scss">
// ::v-deep .el-input__inner {
// width: 300px;
// }
.addclass ::v-deep .el-input__inner {
  width: 260px;
}

::v-deep .warning-row {
  background: #f8e7e9 !important;
}
</style>