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

<template>
  <div>
    <el-form :model="infoData" ref="planForm" label-width="150px" class="grid-form-class">
      <div class="common-card" v-if="reaDiv">
        <!-- <h3>审批状态</h3> -->
        <!-- <yl-step></yl-step> -->
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="驳回原因" prop="rejtRea">
              <el-input v-model="infoData.rejtRea"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <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">
              <div class="content" v-if="isShow">
                {{ infoData.prodName }}
              </div>
              <el-input
                v-else
                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="请输入通用名称"
                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">
              <div class="content" v-if="isShow">
                {{ infoData.prodEntp }}
              </div>
              <el-input
                v-else
                v-model="infoData.prodEntp"
                placeholder="请输入生产企业"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="代理企业" prop="agnt">
              <div class="content" v-if="isShow">
                {{ infoData.agnt }}
              </div>
              <el-input
                v-else
                v-model="infoData.agnt"
                placeholder="请输入代理企业"
              ></el-input>
            </el-form-item>
            <el-form-item label="挂网价格" prop="pubonlnPric">
              <div class="content" v-if="isShow">
                {{ infoData.pubonlnPric }}
              </div>
              <el-input
                v-else
                v-model="infoData.pubonlnPric"
                placeholder="请输入挂网价格"
              ></el-input>
            </el-form-item>

            <el-form-item label="规格" prop="spec">
              <div class="content" v-if="isShow">
                {{ infoData.spec }}
              </div>
              <el-input
                v-else
                v-model="infoData.spec"
                placeholder="请输入规格"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="型号" prop="mol">
              <div class="content" v-if="isShow">
                {{ infoData.mol }}
              </div>
              <el-input v-else v-model="infoData.mol" placeholder="请输入型号"></el-input>
            </el-form-item>
            <el-form-item label="材质" prop="matl">
              <div class="content" v-if="isShow">
                {{ infoData.matl }}
              </div>
              <el-input
                v-else
                v-model="infoData.matl"
                placeholder="请输入材质"
              ></el-input>
            </el-form-item>
            <el-form-item label="包装材质" prop="pacmatl">
              <div class="content" v-if="isShow">
                {{ infoData.pacmatl }}
              </div>
              <el-input
                v-else
                v-model="infoData.pacmatl"
                placeholder="请输入包装材质"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="注册证号" prop="regcertno">
              <div class="content" v-if="isShow">
                {{ infoData.regcertno }}
              </div>
              <el-input
                v-else
                v-model="infoData.regcertno"
                placeholder="请输入注册证号"
              ></el-input>
            </el-form-item>
            <el-form-item label="目录来源" prop="isPub">
              <!-- <el-select
                v-model="infoData.isPub"
                placeholder="请选择目录来源"
                clearable
                disabled
              >
                <el-option
                  v-for="item in isPubData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select> -->
              <div class="content">
                <span v-if="infoData.isPub == '1'">挂网</span>
                <span v-if="infoData.isPub == '0'">非挂网</span>
              </div>
            </el-form-item>
            <el-form-item label="  " prop="regcertno">
              <div class="content" v-if="isShow">
                <!-- {{infoData.regcertno}} -->
              </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="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">
              <div class="content" v-if="isShow">
                <span v-if="infoData.isFas == '1'">是</span>
                <span v-if="infoData.isFas == '0'">否</span>
              </div>
              <el-select
                v-else
                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>
          </div>
          <div class="flex-css">
            <el-form-item label="带量批次" prop="fasBtch" v-if="infoData.isFas == '1'">
              <div class="content" v-if="isShow">
                {{ infoData.fasBtch }}
              </div>
              <el-input
                v-else
                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">
              <div class="content" v-if="isShow">
                {{ infoData.hiCode }}
              </div>
              <el-input
                v-else
                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="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">
              <el-input
                maxlength="50"
                v-model="infoData.purcPric"
                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
              >
                <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">
      <el-button v-if="btnShow" type="success" @click="handleSave" :loading="saveLoad"
        >保存</el-button
      >
      <el-button v-if="btnShow" type="primary" @click="handleSubmit" :loading="submitLoad"
        >提交</el-button
      >
      <!-- </div>
    <div class="foot-button"> -->
      <el-button type="danger" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylUpload from "@/components/yl-upload";
import {
  selectMcsListById,
  selectMcsListIntfById,
  insertSplerMcsList,
} from "@/api/consumCataManage-sup/index";
import rules from "@/utils/rules";
export default {
  components: { ylUpload, ylStep },
  data() {
    return {
      saveLoad: false,
      submitLoad: false,
      rules,
      infoData: { quaList: [] },
      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: "试剂" },
      ],
      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: "非灭菌" },
      ],
      isPubData: [
        { value: "1", name: "挂网" },
        { value: "0", 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: "打" },
      ],
      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: "束" },
      ],
      btnShow: true,
      reaDiv: false,
      // 禁用
      isShow: true,
    };
  },
  created() {
    // this.$nextTick(()=>{
    //   this.$refs['planForm'].resetFields();
    // })
    if (this.$route.query.status == "B" || this.$route.query.status == "C") {
      this.btnShow = false;
    } else if (this.$route.query.status == "D") {
      this.reaDiv = true;
    }
    if (this.$route.query.isPub == "0") {
      this.isShow = false;
    } else {
      this.isShow = true;
    }
    if (this.$route.query.type == "modify") {
      this.getData1();
    } else {
      this.getData();
    }
  },
  methods: {
    getUpload(id) {
      this.temp.fileId = id;
      if (id) {
        this.$refs.dataForm.clearValidate("fileId");
      } else {
        this.$refs.dataForm.validateField("fileId");
      }
    },
    //获取列表数据
    getData() {
      selectMcsListIntfById({ id: this.$route.query.id })
        .then((response) => {
          this.infoData = response.data;
          this.$refs["planForm"].resetFields();
        })
        .catch((err) => {
          this.$message.error("获取数据失败");
        });
    },
    getData1() {
      selectMcsListById({ id: this.$route.query.id })
        .then((response) => {
          this.infoData = response.data;
          this.$refs["planForm"].resetFields();
        })
        .catch((err) => {
          this.$message.error("获取数据失败");
        });
    },
    clearType() {
      this.infoData.fasBtch = "";
    },
    // 信息保存
    handleSave() {
      // this.$refs["planForm"].validate((valid) => {
      // if (valid) {
      this.$confirm("确认保存", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.saveLoad = true;
          (this.infoData.isPub = this.$route.query.isPub),
            (this.infoData.opeType = this.$route.query.opeType),
            (this.infoData.status = "A");
          // this.infoData.opeType = "修改"
          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("确认提交", "提示", {
            confirmButtonext: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.submitLoad = true;
              (this.infoData.isPub = this.$route.query.isPub),
                (this.infoData.status = "B");
              // this.infoData.opeType = this.$route.query.opeType;
              if (!this.$route.query.opeType) {
                this.infoData.opeType = "修改";
              } else {
                this.infoData.opeType = this.$route.query.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(() => {});
        }
      });
    },
    // 返回
    handleBack() {
      if (this.$route.query.page == "2") {
        this.$router.push({
          name: "consumCataManagement-sup",
          query: { current: this.$route.query.current, spdId: this.$route.query.spdId },
        });
      } else {
        this.$router.push({
          name: "distributionmanage",
          query: { current: this.$route.query.current, spdId: this.$route.query.spdId },
        });
      }
    },
  },
};
</script>

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