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" :rules="rules.required">
                  <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" :rules="rules.required">
                  <el-input
                    v-model="infoData.agnt"
                    placeholder="请输入代理企业"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item label="挂网价格" prop="pubonlnPric" :rules="rules.numPotNo">
                  <el-input
                    v-model="infoData.pubonlnPric"
                    placeholder="请输入挂网价格"
                    maxlength="50"
                  ></el-input>
                </el-form-item>

                <el-form-item label="规格" prop="spec" :rules="rules.required">
                  <el-input
                    v-model="infoData.spec"
                    placeholder="请输入规格"
                    maxlength="50"
                  ></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="请输入型号"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item label="材质" prop="matl" :rules="rules.required">
                  <el-input
                    v-model="infoData.matl"
                    placeholder="请输入材质"
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <el-form-item label="包装材质" prop="pacmatl" :rules="rules.required">
                  <el-input
                    v-model="infoData.pacmatl"
                    placeholder="请输入包装材质"
                    maxlength="50"
                  ></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="请输入注册证号"
                    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>
              </div>
              <div class="flex-css">
                <el-form-item
                  label="集采批次"
                  prop="fasBtch"
                  v-if="infoData.isFas == '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.required">
                  <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">
                  <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
                  >
                    <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>
      </el-tab-pane>
      <el-tab-pane label="资质信息" name="second">
        <div class="common-card">
          <div>
            <h3>商品资质</h3>
            <div class="right-type">
              <el-button
                style="margin-bottom: 10px"
                type="primary"
                @click="handleAdd('one')"
                >添加资质</el-button
              >
            </div>
          </div>
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            stripe
            border
          >
            <template slot="empty">
              <img src="@/assets/nopage.png" alt />
              <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column label="资质证书信息"> </el-table-column>
            <el-table-column label="资质证书编号" prop="hiCode" />
            <el-table-column label="发证日期" prop="spec" />
            <el-table-column label="截止日期" prop="mol" />
            <el-table-column label="资质证件" prop="isFas">
              <template #default="{ row }">
                <span v-if="row.isFas == '0'">否</span>
                <span v-if="row.isFas == '1'">是</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="purcUnt" />
          </el-table>
        </div>
        <div class="common-card">
          <div>
            <h3>生产厂商资质</h3>
            <div class="right-type">
              <el-button
                style="margin-bottom: 10px"
                type="primary"
                @click="handleAdd1('two')"
                >添加资质</el-button
              >
            </div>
          </div>
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            stripe
            border
          >
            <template slot="empty">
              <img src="@/assets/nopage.png" alt />
              <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column label="资质证书信息"> </el-table-column>
            <el-table-column label="资质证书编号" prop="hiCode" />
            <el-table-column label="发证日期" prop="spec" />
            <el-table-column label="截止日期" prop="mol" />
            <el-table-column label="资质证件" prop="isFas">
              <template #default="{ row }">
                <span v-if="row.isFas == '0'">否</span>
                <span v-if="row.isFas == '1'">是</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="memo" />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      class="addclass"
      width="30%"
      :title="textMap[dialogStatus]"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
    >
      <el-form label-width="120px" :model="addform" ref="addForm">
        <el-form-item
          label="资质证书信息"
          prop="quaCertName"
          :rules="rules.selectRequired"
        >
          <el-select v-model.trim="addform.quaCertName" placeholder="请选择资质证书信息">
            <el-option
              v-for="item in qualData"
              :key="item.id"
              :label="item.dicVal"
              :value="item.dicVal"
              clearable
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资质证书编号" prop="quaCertNo" :rules="rules.required">
          <el-input
            v-model="addform.quaCertNo"
            placeholder="请输入资质证书编号"
            maxlength="50"
          ></el-input>
        </el-form-item>

        <el-form-item label="发证时间" prop="quaBeginTime" :rules="rules.dateRequired">
          <el-date-picker
            v-model.trim="addform.quaBeginTime"
            type="date"
            :picker-options="TimeOption1"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间" prop="quaEndTime" :rules="rules.dateRequired">
          <el-date-picker
            v-model.trim="addform.quaEndTime"
            type="date"
            :picker-options="TimeOption"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="资质证件" prop="invoFile" :rules="rules.uploadRequired">
          <yl-upload :fileId="addform.invoFile" @getUpload="getUpload" urlName="acco">
            <template v-slot:dec>只能上传pdf文件</template>
          </yl-upload>
          <!-- <yl-upload
                v-else
              :fileId="addform.invoFile"
              readonly
            >
            </yl-upload> -->
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input
            v-model="addform.memo"
            placeholder="请输入备注"
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-preventReClick
          v-loading="loading1"
          @click="handledialog()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </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 {
      activeName: "first",
      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: "0",
      },
      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: "非灭菌" },
      ],
      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,
      dialogFormVisible: false,
      loading1: false,
      addform: {
        quaCertName: "",
        quaCertNo: "",
        quaBeginTime: "",
        quaEndTime: "",
        quaAtt: "",
        memo: "",
        invoFile: "",
      },
      textMap: {
        one: "商品资质",
        two: "生产厂商资质",
      },
      dialogStatus: "",
    };
  },
  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";
          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("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.submitLoad = true;
              this.infoData.status = "B";
              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(() => {});
        }
      });
    },
    // 集采类型
    clearType() {
      this.infoData.fasBtch = "";
    },
    // getData() {
    //   selectMcsListById({ id: this.$route.query.id })
    //     .then((response) => {
    //       this.infoData = response.data;
    //       this.$refs['planForm'].resetFields();
    //     })
    //     .catch((err) => {
    //       this.$message.error("获取数据失败");
    //     });
    // },
    // 新增资质
    handleAdd(type) {
      this.dialogFormVisible = true;
      this.dialogStatus = type;
    },
    handleAdd1(type) {
      this.dialogFormVisible = true;
      this.dialogStatus = type;
    },
    getUpload(id) {
      this.addform.invoFile = id;
      if (id) {
        this.$refs.addForm.clearValidate("invoFile");
        console.log(this.addform.invoFile, "this.addform.invoFile");
      } else {
        this.$refs.addForm.validateField("invoFile");
      }
    },
    // 确认
    handledialog() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.loading1 = true;
              if (this.dialogStatus == "one") {
              } else if (this.dialogStatus == "two") {
              }
              aaaa(this.addform)
                .then((response) => {
                  this.$message({
                    message: "提交成功",
                    type: "success",
                  });
                  this.loading1 = false;
                  // this.$router.push({
                  //   name: "InvoiceManage",
                  //   query: {
                  //     spdId: this.$route.query.spdId,
                  //     activeNameTab: this.$route.query.activeNameTab,
                  //   },
                  // });
                })
                .catch(() => {
                  this.loading1 = false;
                  this.$message({
                    message: "提交失败",
                    type: "error",
                  });
                });
            })
            .catch(() => {});
        }
      });
    },
  },
};
</script>

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