vue实现锚点

vue实现锚点

效果预览

点击右侧导航栏，左侧表单会自动定位
废话不多说直接上代码

<template>
  <div>
    <el-row :gutter="20">
      <!--表单-->
      <el-col :span="20" style="height: 800px;overflow: scroll" id="row">
        <el-form :model="goodDeatil" :rules="rules" ref="goodDeatil" label-width="100px"
                 :disabled="isbianji">
          <!--基本信息-->
          <div>
            <p class="titleP"><i class="shanjiao"></i><span>基本信息</span></p>
            <!--基本信息-->
            <el-row>
              <span class="titleSpan">基本信息</span>
              <div class="myform">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="药品编码" prop="drugGoodsCode">
                      <el-input v-model="goodDeatil.drugGoodsCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="助记码" prop="mnemonicCode">
                      <el-input v-model="goodDeatil.mnemonicCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8"></el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="药品通用名" prop="drugCommonName">
                      <el-input v-model="goodDeatil.drugCommonName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="goodDeatil.commonInputPy"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="显示名称" prop="drugGoodsName">
                      <el-input v-model="goodDeatil.drugGoodsName"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="商品名称" prop="drugGoodsName">
                      <el-input v-model="goodDeatil.drugGoodsName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="goodDeatil.inputPy"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="打印名称" prop="printName">
                      <el-input v-model="goodDeatil.printName"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="剂型" prop="DrugForm">
                      <el-select v-model="DrugForm" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in DrugForms"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="包装数" prop="packageNum">
                      <el-input v-model="goodDeatil.packageNum"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-select v-model="MinUnit" clearable placeholder="请选择"
                               style="width: 100%">
                      <el-option
                          v-for="item in MinUnits"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="包装单位" prop="PackageUnit">
                      <el-select v-model="PackageUnit" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in PackageUnits"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-form-item label="基本计量" prop="dosageBase">
                      <el-input v-model="goodDeatil.dosageBase"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-select v-model="DosageUnit" clearable placeholder="请选择"
                               style="width: 100%">
                      <el-option
                          v-for="item in DosageUnits"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="容积" prop="volume">
                      <el-input v-model="goodDeatil.volume"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-select v-model="VolumeUnit" clearable placeholder="请选择"
                               style="width: 100%">
                      <el-option
                          v-for="item in VolumeUnits"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="浓度" prop="concentration">
                      <el-input v-model="goodDeatil.concentration"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span=16>
                    <el-form-item label="生产厂家" prop="manufactureFirm">
                      <el-select v-model="manufactureFirm" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in manufactureFirms"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="加价规则" prop="PremiumType">
                      <el-select v-model="PremiumType" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in PremiumTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span=16>
                    <el-form-item label="供应商" prop="source">
                      <el-select v-model="source" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in sources"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="零售价" prop="price">
                      <el-input v-model="goodDeatil.price"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <!--默认用法-->
            <el-row>
              <span class="titleSpan">默认用法</span>
              <div class="myform">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="用法" prop="usage">
                      <el-select v-model="Usage" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in Usages"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="频次" prop="frequency">
                      <el-select v-model="frequency" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in frequencys"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="每次剂量" prop="dosage">
                      <el-input v-model="goodDeatil.dosage"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-form-item label="日剂量" prop="ddd">
                      <el-input v-model="goodDeatil.ddd"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-select v-model="DddUnit" clearable placeholder="请选择"
                               style="width: 100%">
                      <el-option
                          v-for="item in DddUnits"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="草药特殊煎法" prop="DecoctMethod">
                      <el-select v-model="DecoctMethod" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in DecoctMethods"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="疗程" prop="treatmentCourse">
                      <el-input v-model="goodDeatil.treatmentCourse"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-select v-model="TreatmentCourseUnit" clearable placeholder="请选择"
                               style="width: 100%">
                      <el-option
                          v-for="item in TreatmentCourseUnits"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <!--属性-->
            <el-row>
              <span class="titleSpan">属性</span>
              <div class="myform">
                <el-row :gutter="10">
                  <el-col :span="16">
                    <el-form-item label="药理归类" prop="pharmacologyClass">
                      <el-select v-model="pharmacologyClass" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in pharmacologyClasss"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="药品类别" prop="DrugType">
                      <el-select v-model="DrugType" clearable placeholder="请选择">
                        <el-option
                            v-for="item in DrugTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="毒理属性" prop="DrugToxiProperty">
                      <el-select v-model="DrugToxiProperty" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in DrugToxiPropertys"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="费用分类" prop="FeeClass">
                      <el-select v-model="FeeClass" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in FeeClasss"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="病案费别" prop="MRFeeClass">
                      <el-select v-model="MRFeeClass" clearable placeholder="请选择">
                        <el-option
                            v-for="item in MRFeeClasss"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="限制等级" prop="DrugLimitedLevel">
                      <el-select v-model="DrugLimitedLevel" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in DrugLimitedLevels"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="药品限制标记" prop="Limit">
                      <el-select v-model="Limit" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in Limits"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="包装拆分" prop="splitPackageFlag">
                      <el-select v-model="splitPackageFlag" clearable placeholder="请选择">
                        <el-option
                            v-for="item in splitPackageFlags"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="基药属性" prop="BasicMedicine">
                      <el-select v-model="BasicMedicine" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in BasicMedicines"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="有效标记" prop="name">
                      <el-select v-model="statusCode" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in statusCodes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="条形码" prop="barCode">
                      <el-input v-model="goodDeatil.barCode"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-form-item label="国家编码" prop="gbCode">
                      <el-input v-model="goodDeatil.gbCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-input v-model="goodDeatil.gbCodeVersion"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="省级编码" prop="provinceCode">
                      <el-input v-model="goodDeatil.provinceCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="药交ID" prop="bigPackageUnit">
                      <el-input v-model="goodDeatil.bigPackageUnit"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="医保编码" prop="insuranceCode">
                      <el-input v-model="goodDeatil.insuranceCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="医保类型" prop="InsuranceType">
                      <el-select v-model="insuranceType" clearable placeholder="请选择">
                        <el-option
                            v-for="item in insuranceTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="价格形势" prop="name">
                      <el-select v-model="PriceSituation" clearable placeholder="请选择">
                        <el-option
                            v-for="item in PriceSituations"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="16">
                    <el-form-item label="医保说明" prop="name">
                      <el-input v-model="goodDeatil.insuranceProperty"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="批准文号" prop="name">
                      <el-input v-model="goodDeatil.approvalDoc"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="引进方式" prop="name">
                      <el-select v-model="IntroduceWay" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in IntroduceWays"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="药品外观" prop="name">
                      <el-input v-model="goodDeatil.drugImage"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="text" style="width: 60px;margin: 0px 20px;color: #76CBB2;border:1px solid #76CBB2"
                    >浏览
                    </el-button>
                    <el-button type="text" style="width: 60px;margin: 0px 20px;color: #76CBB2;border:1px solid #76CBB2"
                    >清除
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <!--其他标志-->
            <el-row>
              <span class="titleSpan">其他标志</span>
              <div class="myform">
                <el-form-item label="活动性质" prop="type">
                  <el-checkbox-group v-model="goodDeatil.type">
                    <el-checkbox v-for="(item,i) in goodDeatil.drugGoodsVOS" :key="i" :label="item.infusionFlag">
                      {{ item.flagName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </el-row>
          </div>
          <!--附加信息-->
          <div>
            <p class="titleP"><i class="shanjiao"></i><span>附加信息</span></p>
            <!--采购信息-->
            <el-row>
              <span class="titleSpan">采购信息</span>
              <div class="myform">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="中标开始日期" prop="bidStartDate">
                      <el-date-picker
                          v-model="goodDeatil.bidStartDate"
                          type="datetime"
                          placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="招标价" prop="tenderPrice">
                      <el-input v-model="goodDeatil.tenderPrice"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="中标公司" prop="bidManufactureFirm">
                      <el-select v-model="bidManufactureFirm" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in bidManufactureFirms"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="中标结束日期" prop="bidEndDate">
                      <el-date-picker
                          v-model="goodDeatil.bidEndDate"
                          type="datetime"
                          placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="商标" prop="trademark">
                      <el-input v-model="goodDeatil.trademark"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="中标流水号" prop="bidSerialNumber">
                      <el-input v-model="goodDeatil.bidSerialNumber"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="储藏条件" prop="storageCondition">
                      <el-select v-model="bidManufactureFirm" clearable placeholder="请选择"
                                 style="width: 100%">
                        <el-option
                            v-for="item in bidManufactureFirms"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="产地" prop="manufactureAddr">
                      <el-input v-model="goodDeatil.manufactureAddr"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="type">
                      <el-checkbox-group v-model="goodDeatil.tenderFlag">
                        <el-checkbox label="招标标志" name="type"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <!--药理信息-->
            <el-row>
              <span class="titleSpan">药理信息</span>
              <div class="myform">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="药品简介" prop="introduce">
                      <el-input v-model="goodDeatil.introduce"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="适应证" prop="treatDiagnose">
                      <el-input v-model="goodDeatil.treatDiagnose"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="药理作用" prop="action">
                      <el-input v-model="goodDeatil.action"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="药代动力学" prop="pharmacokinetics">
                      <el-input v-model="goodDeatil.pharmacokinetics"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="不良反应" prop="adverseReaction">
                      <el-input v-model="goodDeatil.adverseReaction"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="用法用量描述" prop="usageAndDosage">
                      <el-input v-model="goodDeatil.usageAndDosage"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="互相作用描述" prop="incompatibility">
                      <el-input v-model="goodDeatil.incompatibility"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="禁忌症" prop="contraindication">
                      <el-input v-model="goodDeatil.contraindication"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="注意事项" prop="attention">
                      <el-input v-model="goodDeatil.attention"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="儿童用药" prop="babyAttention">
                      <el-input v-model="goodDeatil.babyAttention"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="药物过量" prop="overdose">
                      <el-input v-model="goodDeatil.overdose"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="老人用药" prop="olderAttention">
                      <el-input v-model="goodDeatil.olderAttention"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="妇幼哺乳期用药" prop="lactationAttention">
                      <el-input v-model="goodDeatil.lactationAttention"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="有效成分" prop="component">
                      <el-input v-model="goodDeatil.component"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="执行标准" prop="executeStandard">
                      <el-input v-model="goodDeatil.executeStandard"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                      <el-input v-model="goodDeatil.remark"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <div style="height: 300px"></div>
          </div>
        </el-form>
      </el-col>
      <!--锚点-->
      <el-col :span="4">
        <el-row>
          <el-col :span="4">
            <div class="kongxinyuan"></div>
            <div style="width: 5px;height: 30px;background: #DFE0E1;margin-left: 10px"></div>
            <div class="shixinyuan"></div>
            <div style="width: 5px;height: 200px;background: #DFE0E1;margin-left: 10px"></div>
            <div class="shixinyuan"></div>
            <div style="width: 5px;height: 200px;background: #DFE0E1;margin-left: 10px"></div>
            <div class="kongxinyuan"></div>
          </el-col>
          <el-col :span="20">
            <ul style="margin-top: 50px">
              <span @click="dingwei(0,'jbxx')">——基本信息</span>
              <li @click="dingwei(50,'jbxx')" :class="[isjbxx?'current_li':'general_li']">
                ——基本信息
              </li>
              <li @click="dingwei(580,'mryf')" :class="[ismryf?'current_li':'general_li']">
                ——默认用法
              </li>
              <li @click="dingwei(800,'sx')" :class="[issx?'current_li':'general_li']">
                ——属性
              </li>
              <li @click="dingwei(1400,'bz')" :class="[isbz?'current_li':'general_li']">
                ——标志
              </li>
            </ul>

            <ul style="margin-top: 60px">
              <span @click="dingwei(1650,'cgxx')"> ——附加信息</span>
              <li @click="dingwei(1700,'cgxx')" :class="[iscgxx?'current_li':'general_li']">
                ——采购信息
              </li>
              <li @click="dingwei(2000,'ylxx')" :class="[isylxx?'current_li':'general_li']">
                ——药理信息
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import drugInventoryApi from "@/api/drugManage/drugInventory";

export default {
  name: "detilForm",
  props: ['isbianji', 'goodDeatil'],
  data() {
    return {
      isjbxx: true,
      ismryf: false,
      issx: false,
      isbz: false,
      iscgxx: false,
      isylxx: false,
      value: '',
      options: [],
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请选择活动区域', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        ],
        resource: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
        desc: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ]
      },
      DrugForm: '',
      DrugForms: [],
      MinUnit: '',
      MinUnits: [],
      PackageUnit: '',
      PackageUnits: [],
      DosageUnit: '',
      DosageUnits: [],
      VolumeUnit: '',
      VolumeUnits: [],
      BigPackageUnit: '',
      BigPackageUnits: [],
      PremiumType: '',
      PremiumTypes: [],
      DddUnit: '',
      DddUnits: [],
      DecoctMethod: '',
      DecoctMethods: [],
      TreatmentCourseUnit: '',
      TreatmentCourseUnits: [],
      DrugType: '',
      DrugTypes: [],
      DrugToxiProperty: '',
      DrugToxiPropertys: [],
      FeeClass: '',
      FeeClasss: [],
      MRFeeClass: '',
      MRFeeClasss: [],
      DrugLimitedLevel: '',
      DrugLimitedLevels: [],
      BasicMedicine: '',
      BasicMedicines: [],
      PriceSituation: '',
      PriceSituations: [],
      pharmacologyClass: "",
      pharmacologyClasss: [],
      insuranceType: '',
      insuranceTypes: [],
      Usage: '',
      Usages: [],
      frequency: '',
      frequencys: [],
      manufactureFirm: '',
      manufactureFirms: [],
      source: '',
      sources: [],
      Limit: "",
      Limits: [],
      splitPackageFlag: '',
      splitPackageFlags: [],
      statusCode: '',
      statusCodes: [{
        label: '有效',
        value: 'ACTIVE '
      }, {
        label: '作废',
        value: 'NULLIFIED'
      }],
      IntroduceWay: '',
      IntroduceWays: [],
      bidManufactureFirm: '',
      bidManufactureFirms: []
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * 定位
     */
    dingwei(num, type) {
      this.$nextTick(() => {
        // this.$refs.box.scrollTop = 0;
        document.getElementById("row").scrollTop = num;
      });
      switch (type) {
        case 'jbxx':
          this.isjbxx = true
          this.ismryf = false
          this.issx = false
          this.isbz = false
          this.iscgxx = false
          this.isylxx = false
          break
        case 'mryf':
          this.isjbxx = false
          this.ismryf = true
          this.issx = false
          this.isbz = false
          this.iscgxx = false
          this.isylxx = false
          break
        case 'sx':
          this.isjbxx = false
          this.ismryf = false
          this.issx = true
          this.isbz = false
          this.iscgxx = false
          this.isylxx = false
          break
        case 'bz':
          this.isjbxx = false
          this.ismryf = false
          this.issx = false
          this.isbz = true
          this.iscgxx = false
          this.isylxx = false
          break
        case 'cgxx':
          this.isjbxx = false
          this.ismryf = false
          this.issx = false
          this.isbz = false
          this.iscgxx = true
          this.isylxx = false
          break
        case 'ylxx':
          this.isjbxx = false
          this.ismryf = false
          this.issx = false
          this.isbz = false
          this.iscgxx = false
          this.isylxx = true
          break

      }
    },
    /**
     * 获取剂型
     */
    getDrugForms() {
      drugInventoryApi.getDictionary('DrugForm').then(res => {
        if (res.code == 200) {
          let DrugForms = []
          for (let i = 0; i < res.entitys.length; i++) {
            DrugForms.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.DrugForms = DrugForms
          this.DrugForm = this.goodDeatil.drugForm

        }
      })
    },
    /**
     * 包装数后面的单位
     */
    getMinUnit() {
      drugInventoryApi.getDictionary('MinUnit').then(res => {
        if (res.code == 200) {
          let MinUnits = []
          for (let i = 0; i < res.entitys.length; i++) {
            MinUnits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.MinUnits = MinUnits
          this.MinUnit = this.goodDeatil.minUnit
        }
      })
    },
    /**
     * 包装单位
     */
    getPackageUnit() {
      drugInventoryApi.getDictionary('PackageUnit').then(res => {
        if (res.code == 200) {
          let PackageUnits = []
          for (let i = 0; i < res.entitys.length; i++) {
            PackageUnits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.PackageUnits = PackageUnits
          this.PackageUnit = this.goodDeatil.packageUnit
        }
      })
    },
    /**
     * 基本剂量后面单位
     */
    getDosageUnits() {
      drugInventoryApi.getDictionary('DosageUnit').then(res => {
        if (res.code == 200) {
          let DosageUnits = []
          for (let i = 0; i < res.entitys.length; i++) {
            DosageUnits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.DosageUnits = DosageUnits
          this.DosageUnit = this.goodDeatil.dosageUnit
        }
      })
    },
    /**
     * 容积后面单位
     */
    getVolumeUnit() {
      drugInventoryApi.getDictionary('VolumeUnit').then(res => {
        if (res.code == 200) {
          let VolumeUnits = []
          for (let i = 0; i < res.entitys.length; i++) {
            VolumeUnits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.VolumeUnits = VolumeUnits
          this.VolumeUnit = this.goodDeatil.volumeUnit
        }
      })
    },
    /**
     * 大包装数
     */
    getBigPackageUnit() {
      drugInventoryApi.getDictionary('BigPackageUnit').then(res => {
        if (res.code == 200) {
          let BigPackageUnits = []
          for (let i = 0; i < res.entitys.length; i++) {
            BigPackageUnits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.BigPackageUnits = BigPackageUnits
        }
      })
    },
    /**
     * 加价规则
     */
    getPremiumType() {
      drugInventoryApi.getDictionary('PremiumType').then(res => {
        if (res.code == 200) {
          let PremiumTypes = []
          for (let i = 0; i < res.entitys.length; i++) {
            PremiumTypes.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.PremiumTypes = PremiumTypes
          this.PremiumType = this.goodDeatil.premiumType
        }
      })
    },
    /**
     * 日剂量
     */
    getDddUnit() {
      drugInventoryApi.getDictionary('DddUnit').then(res => {
        if (res.code == 200) {
          let DddUnits = []
          for (let i = 0; i < res.entitys.length; i++) {
            DddUnits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.DddUnits = DddUnits
          this.DddUnits = this.goodDeatil.dddUnit
        }
      })
    },
    /**
     * 草药特殊煎法
     */
    getDecoctMethod() {
      drugInventoryApi.getDictionary('DecoctMethod').then(res => {
        if (res.code == 200) {
          let DecoctMethods = []
          for (let i = 0; i < res.entitys.length; i++) {
            DecoctMethods.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.DecoctMethods = DecoctMethods
          this.DecoctMethod = this.goodDeatil.decoctMethod
        }
      })
    },
    /**
     * 疗程
     */
    getTreatmentCourseUnit() {
      drugInventoryApi.getDictionary('TreatmentCourseUnit').then(res => {
        if (res.code == 200) {
          let TreatmentCourseUnits = []
          for (let i = 0; i < res.entitys.length; i++) {
            TreatmentCourseUnits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.TreatmentCourseUnits = TreatmentCourseUnits
          this.TreatmentCourseUnit = this.goodDeatil.treatmentCourseUnit
        }
      })
    },
    /**
     * 药品类别
     */
    getDrugType() {
      drugInventoryApi.getDictionary('DrugType').then(res => {
        if (res.code == 200) {
          let DrugTypes = []
          for (let i = 0; i < res.entitys.length; i++) {
            DrugTypes.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.DrugTypes = DrugTypes
          this.DrugType = this.goodDeatil.drugType
        }
      })
    },
    /**
     * 毒理属性
     */
    getDrugToxiProperty() {
      drugInventoryApi.getDictionary('DrugToxiProperty').then(res => {
        if (res.code == 200) {
          let DrugToxiPropertys = []
          for (let i = 0; i < res.entitys.length; i++) {
            DrugToxiPropertys.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.DrugToxiPropertys = DrugToxiPropertys
          this.DrugToxiProperty = this.goodDeatil.toxiProperty
        }
      })
    },
    /**
     * 费用分类
     */
    getFeeClass() {
      drugInventoryApi.getDictionary('FeeClass').then(res => {
        if (res.code == 200) {
          let FeeClasss = []
          for (let i = 0; i < res.entitys.length; i++) {
            FeeClasss.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.FeeClasss = FeeClasss
          this.FeeClass = this.goodDeatil.priceItemType
        }
      })
    },
    /**
     * 病案费别
     */
    getMRFeeClass() {
      drugInventoryApi.getDictionary('MRFeeClass').then(res => {
        if (res.code == 200) {
          let MRFeeClasss = []
          for (let i = 0; i < res.entitys.length; i++) {
            MRFeeClasss.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.MRFeeClasss = MRFeeClasss
          this.MRFeeClass = this.goodDeatil.mrFeeClass
        }
      })
    },
    /**
     * 限制等级
     */
    getDrugLimitedLevel() {
      drugInventoryApi.getDictionary('DrugLimitedLevel').then(res => {
        if (res.code == 200) {
          let DrugLimitedLevels = []
          for (let i = 0; i < res.entitys.length; i++) {
            DrugLimitedLevels.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.DrugLimitedLevels = DrugLimitedLevels
          this.DrugLimitedLevel = this.goodDeatil.constrainedLevel
        }
      })
    },
    /**
     * 基药属性
     */
    getBasicMedicine() {
      drugInventoryApi.getDictionary('BasicMedicine').then(res => {
        if (res.code == 200) {
          let BasicMedicines = []
          for (let i = 0; i < res.entitys.length; i++) {
            BasicMedicines.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.BasicMedicines = BasicMedicines
          this.BasicMedicine = this.goodDeatil.basicMedicine
        }
      })
    },
    /**
     * 价格形势
     */
    getPriceSituation() {
      drugInventoryApi.getDictionary('PriceSituation').then(res => {
        if (res.code == 200) {
          let PriceSituations = []
          for (let i = 0; i < res.entitys.length; i++) {
            PriceSituations.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.PriceSituations = PriceSituations
          this.PriceSituation = this.goodDeatil.priceSituation
        }
      })
    },
    /**
     * 药理归类
     */
    getPharmacologyClass() {
      drugInventoryApi.getDictionary('pharmacologyClass').then(res => {
        if (res.code == 200) {
          let pharmacologyClasss = []
          for (let i = 0; i < res.entitys.length; i++) {
            pharmacologyClasss.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.pharmacologyClasss = pharmacologyClasss
          this.pharmacologyClass = this.goodDeatil.actionType
        }
      })
    },
    /**
     * 医保类型
     */
    getinsuranceType() {
      drugInventoryApi.getDictionary('InsuranceType').then(res => {
        if (res.code == 200) {
          let insuranceTypes = []
          for (let i = 0; i < res.entitys.length; i++) {
            insuranceTypes.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.insuranceTypes = insuranceTypes
          this.insuranceType = this.goodDeatil.insuranceType
        }
      })
    },
    /**
     * 查询用法
     */
    getUsage() {
      let param = {}
      drugInventoryApi.getUsage(param).then(res => {
        if (res.code == 200) {
          let Usages = []
          for (let i = 0; i < res.entitys.length; i++) {
            Usages.push({label: res.entitys[i].usageName, value: res.entitys[i].usage})
          }
          this.Usages = Usages
          this.Usage = this.goodDeatil.usage
        }
      })
    },
    /**
     * 查询频次
     */
    queryAllDictFreqs() {
      let param = {}
      drugInventoryApi.queryAllDictFreqs(param).then(res => {
        if (res.code == 200) {
          let frequencys = []
          for (let i = 0; i < res.entitys.length; i++) {
            frequencys.push({label: res.entitys[i].elemenName, value: res.entitys[i].elementCode})
          }
          this.frequencys = frequencys
          this.frequency = this.goodDeatil.frequency
        }
      })
    },
    /**
     * 查询生产商
     */
    querymanufactureFirms() {
      let param = {"mnemonicCode": "1"}
      drugInventoryApi.getMau(param).then(res => {
        if (res.code == 200) {
          let manufactureFirms = []
          for (let i = 0; i < res.entitys.length; i++) {
            manufactureFirms.push({
              label: res.entitys[i].manufactureFirmName,
              value: res.entitys[i].manufactureFirmCode
            })
          }
          this.manufactureFirms = manufactureFirms
          this.manufactureFirm = this.goodDeatil.manufactureFirm.toString()
        }
      })
    },
    /**
     * 查询供应商
     */
    querysources() {
      let param = {"mnemonicCode": "0"}
      drugInventoryApi.getMau(param).then(res => {
        if (res.code == 200) {
          let sources = []
          for (let i = 0; i < res.entitys.length; i++) {
            sources.push({label: res.entitys[i].manufactureFirmName, value: res.entitys[i].manufactureFirmCode})
          }
          this.sources = sources
          this.source = this.goodDeatil.source
        }
      })
    },
    /**
     * 查询中标公司
     */
    querybidManufactureFirms() {
      let param = {}
      drugInventoryApi.getMau(param).then(res => {
        if (res.code == 200) {
          let bidManufactureFirms = []
          for (let i = 0; i < res.entitys.length; i++) {
            bidManufactureFirms.push({
              label: res.entitys[i].manufactureFirmName,
              value: res.entitys[i].manufactureFirmCode
            })
          }
          this.bidManufactureFirms = bidManufactureFirms
          this.bidManufactureFirm = this.goodDeatil.bidManufactureFirm
        }
      })
    },
    /**
     * 查询药品限制标记
     */
    getUserLimit() {
      let param = {}
      drugInventoryApi.getUserLimit(param).then(res => {
        if (res.code == 200) {
          let Limits = []
          for (let i = 0; i < res.entitys.length; i++) {
            Limits.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.Limits = Limits
          this.Limit = this.goodDeatil.userLimit
        }
      })
    },
    /**
     * 查询药品包装拆分
     */
    getSplitPackageFlag() {
      let param = {}
      drugInventoryApi.getSplitPackageFlag(param).then(res => {
        if (res.code == 200) {
          let splitPackageFlags = []
          for (let i = 0; i < res.entitys.length; i++) {
            splitPackageFlags.push({label: res.entitys[i].elemenName, value: res.entitys[i].elementCode})
          }
          this.splitPackageFlags = splitPackageFlags
          this.splitPackageFlag = this.goodDeatil.splitPackageFlag.toString()
        }
      })
    },
    /**
     * 查询药品引进方式
     */
    getIntroduceWay() {
      let param = {}
      drugInventoryApi.getIntroduceWay(param).then(res => {
        if (res.code == 200) {
          let IntroduceWays = []
          for (let i = 0; i < res.entitys.length; i++) {
            IntroduceWays.push({label: res.entitys[i].elemenName, value: res.entitys[i].elementCode})
          }
          this.IntroduceWays = IntroduceWays
          this.IntroduceWay = this.goodDeatil.introduceWay
        }
      })
    },
    /**
     * 获取储存条件
     */
    getStoreageConditions() {
      drugInventoryApi.getDictionary('StoreageCondition').then(res => {
        if (res.code == 200) {
          let StoreageConditions = []
          for (let i = 0; i < res.entitys.length; i++) {
            StoreageConditions.push({label: res.entitys[i].elementName, value: res.entitys[i].elementCode})
          }
          this.StoreageConditions = StoreageConditions
          this.StoreageCondition = this.goodDeatil.storeageCondition

        }
      })
    },
  },
  mounted() {
    this.$nextTick(function () {
      // 监听当前组件的滚动事件
      document.getElementById("row").addEventListener('scroll', () => {
        if (document.getElementById("row").scrollTop > 0) {   //显示下拉loading，展现更多数据
          let top = document.getElementById("row").scrollTop
          if (0 < top && top < 580) {
            this.isjbxx = true
            this.ismryf = false
            this.issx = false
            this.isbz = false
            this.iscgxx = false
            this.isylxx = false
          }
          if (580 < top && top < 800) {
            this.isjbxx = false
            this.ismryf = true
            this.issx = false
            this.isbz = false
            this.iscgxx = false
            this.isylxx = false
          }
          if (800 < top && top < 1400) {
            this.isjbxx = false
            this.ismryf = false
            this.issx = true
            this.isbz = false
            this.iscgxx = false
            this.isylxx = false
          }
          if (1400 < top && top < 1650) {
            this.isjbxx = false
            this.ismryf = false
            this.issx = false
            this.isbz = true
            this.iscgxx = false
            this.isylxx = false
          }
          if (1700 < top && top < 2000) {
            this.isjbxx = false
            this.ismryf = false
            this.issx = false
            this.isbz = false
            this.iscgxx = true
            this.isylxx = false
          }
          if (2000 < top) {
            this.isjbxx = false
            this.ismryf = false
            this.issx = false
            this.isbz = false
            this.iscgxx = false
            this.isylxx = true
          }

        }
      }, false)
    });
    this.statusCode = this.goodDeatil.statusCode
    this.getDrugForms()
    this.getMinUnit()
    this.getPackageUnit()
    this.getDosageUnits()
    this.getVolumeUnit()
    this.getPremiumType()
    this.getDddUnit()
    this.getDecoctMethod()
    this.getTreatmentCourseUnit()
    this.getDrugType()
    this.getFeeClass()
    this.getMRFeeClass()
    this.getDrugLimitedLevel()
    this.getBasicMedicine()
    this.getPriceSituation()
    this.getDrugToxiProperty()
    this.getPharmacologyClass()
    this.getinsuranceType()
    this.getUsage()
    this.queryAllDictFreqs()
    this.querymanufactureFirms()
    this.querysources()
    this.getUserLimit()
    this.getSplitPackageFlag()
    this.getIntroduceWay()
    this.querybidManufactureFirms()
    this.getStoreageConditions()
  },
}
</script>

<style scoped lang="scss">
.titleSpan {
  font-size: 16px;
  font-weight: bold;
}

.titleP {
  margin-bottom: 20px;
  height: 40px;
  background: #E9F5FA;
  width: 100%;
  line-height: 20px;
  padding-top: 10px;

  span {
    font-size: 16px;
    font-weight: bold;
  }

}

.shanjiao {
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: transparent transparent transparent blue;
  width: 0px;
  height: 0px;
}

.myform {
  margin: 20px 0px 20px 0px;
  padding: 20px;
  border: 1px #F7F7F7 solid;
  border-radius: 6px;
}

.anchor-track {
  position: absolute;
  left: 4px;
  top: -10px;
  bottom: -10px;
  width: 1px;
  background: #aaa;
  // 上下的空心圆圈
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }
}

::-webkit-scrollbar {
  width: 0 !important;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.kongxinyuan {
  width: 25px;
  height: 25px;
  background: #ffffff;
  border-radius: 50%;
  border: 5px solid #2C99BC;
}

.shixinyuan {
  margin-left: 9px;
  width: 8px;
  height: 8px;
  background-color: #2C99BC;
  border-radius: 4px; /* 图形的半径 */
}

.current_li {
  margin: 20px;
  padding-left: 5px;
  color: #BAC0C3;
  background: #E9F5FA;
  border-radius: 10px;
}

.general_li {
  margin: 20px;
  padding-left: 5px;
  color: #BAC0C3;
  border-radius: 10px;
}
</style>