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

<template>
  <!-- 非挂网目录新增 -->
  <div>
    <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="请输入耗材名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="通用名称" prop="genName" :rules="rules.required">
              <el-input
                v-model="infoData.genName"
                placeholder="请输入通用名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="英文名称" prop="engName" :rules="rules.InterEng">
              <el-input
                v-model="infoData.engName"
                placeholder="请输入英文名称"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="品牌" prop="brad">
              <el-input v-model="infoData.brad" 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" :rules="rules.required">
              <el-input
                v-model="infoData.prodEntp"
                placeholder="请输入生产企业"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="代理企业" prop="agnt" :rules="rules.required">
              <el-input
                v-model="infoData.agnt"
                placeholder="请输入代理企业"
              ></el-input>
            </el-form-item>
            <el-form-item label="挂网价格" prop="pubonlnPric" :rules="rules.numPotNo">
              <el-input
                v-model="infoData.pubonlnPric"
                placeholder="请输入挂网价格"
              ></el-input>
            </el-form-item>

            <el-form-item label="规格" prop="spec" :rules="rules.required">
              <el-input
                v-model="infoData.spec"
                placeholder="请输入规格"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="型号" prop="mol" :rules="rules.required">
              <el-input
                v-model="infoData.mol"
                placeholder="请输入型号"
              ></el-input>
            </el-form-item>
            <el-form-item label="材质" prop="matl" :rules="rules.required">
              <el-input
                v-model="infoData.matl"
                placeholder="请输入材质"
              ></el-input>
            </el-form-item>
            <el-form-item label="包装材质" prop="pacmatl" :rules="rules.required">
              <el-input
                v-model="infoData.pacmatl"
                placeholder="请输入包装材质"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="注册证号" prop="regcertno" :rules="rules.required">
              <el-input
                v-model="infoData.regcertno"
                placeholder="请输入注册证号"
              ></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
              >
                <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="fasBtch">
              <el-input
                v-model="infoData.fasBtch"
                placeholder="请输入集采批次"
              ></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.required">
              <el-input
                v-model="infoData.hiCode"
                placeholder="请输入医保编码"
              ></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="purcUnt" :rules="rules.InterChina">
              <el-input
                v-model="infoData.purcUnt"
                placeholder="请输入最小单位"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购价" prop="purcPric" :rules="rules.numPot4">
              <el-input v-model="infoData.purcPric" placeholder="请输入采购价"></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="采购单位" prop="prcUnt" :rules="rules.InterChina">
              <el-input v-model="infoData.prcUnt" placeholder="请输入采购单位"></el-input>
            </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="请输入包装内数量"
                ></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="uscc" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.uscc"
                placeholder="请输入大包装单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.uscc }}
              </div>
            </el-form-item>
            <el-form-item label="大包装含量" prop="legrepName" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.legrepName"
                placeholder="请输入大包装含量"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.legrepName }}
              </div>
            </el-form-item>
            <el-form-item label="大包装条码" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入大包装条码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="中包装单位" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入中包装单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
            <el-form-item label="中包装含量" prop="natstdIndu" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.natstdIndu"
                placeholder="请输入中包装含量"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.natstdIndu }}
              </div>
            </el-form-item>
            <el-form-item label="中包装条码" prop="regCapt" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regCapt"
                placeholder="请输入中包装条码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regCapt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="小包装单位" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入小包装单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
            <el-form-item label="小包装含量" prop="natstdIndu" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.natstdIndu"
                placeholder="请输入小包装含量"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.natstdIndu }}
              </div>
            </el-form-item>
            <el-form-item label="小包装条码" prop="regCapt" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regCapt"
                placeholder="请输入小包装条码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regCapt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="最小计量单位" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入最小计量单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
            <el-form-item label="默认出库单位" prop="natstdIndu" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.natstdIndu"
                placeholder="请输入默认出库单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.natstdIndu }}
              </div>
            </el-form-item>
            <el-form-item label="默认采购单位" prop="regCapt" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regCapt"
                placeholder="请输入默认采购单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regCapt }}
              </div>
            </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>
                <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>
                <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
      >
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylUpload from "@/components/yl-upload";
import { selectMcsListById, insertSplerMcsList } from "@/api/consumCataManage-sup/index";
import rules from "@/utils/rules";
export default {
  components: { ylUpload, ylStep },
  data() {
    return {
      saveLoad: false,
      submitLoad: false,
      rules,
      infoData: { 
        spdId: "",
        materialId: "",
        prodName: "",
        hiCode: "",
        isFas: "",
        fasBtch: "",
        spec: "",
        mol: "",
        matl: "",
        pacmatl: "",
        prodSouc: "",
        regcertno: "",
        prodentpCode: null,
        prodEntp: "",
        purcPric: null,
        status:"",
        isPub:"1",
       },
      listLoading: false,
      planForm: {},
      sourceData: [
        { value: "1", name: "国产" },
        { value: "2", name: "进口" },
      ],
      iFjcData: [
        { value: "0", name: "是" },
        { value: "1", name: "否" },
      ],
      mcsTypeData: [
        { value: "0", name: "普通耗材" },
        { value: "1", name: "高值耗材" },
        { value: "2", 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: "非灭菌" },
      ],
      btnShow: true,
      reaDiv:false,
    };
  },
  created() {
    // if (this.$route.query.status == "B") {
    //   this.btnShow = false;
    // }else if(this.$route.query.status=="D"){
    //   this.reaDiv = true
    // }
    // this.getData()
  },
  methods: {
    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";
          insertSplerMcsList(this.infoData)
            .then((response) => {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              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";
              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(() => {});
        }
      });
    },

    // getData() {
    //   selectMcsListById({ id: this.$route.query.id })
    //     .then((response) => {
    //       this.infoData = response.data;
    //       this.$refs['planForm'].resetFields();
    //     })
    //     .catch((err) => {
    //       this.$message.error("获取数据失败");
    //     });
    // },
  },
};
</script>

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