diagnosis.admin/src/views/business/ExperienceAdd copy.vue

<template>
  <div class="accordEdit">
    <!-- <div class="flex-center back" @click="$router.back()" v-if='showBtn'>返回</div> -->
    <div style="margin-bottom:10px;">
      <el-button type="primary" size="mini" @click="$router.back()" v-if="showBtn">返回</el-button>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-vertical-center-l">
        <span>*</span>
        <div class="name">方名：</div>
        <div class="input">
          <el-input size="mini" v-model="form.name" placeholder="请输入" :disabled="type=='find'"></el-input>
        </div>
      </div>
      <div class="item flex-vertical-center-l">
        <span></span>
        <div class="name">功效与适应症：</div>
        <div class="input">
          <el-input size="mini" v-model="form.efficacy" placeholder="请输入" :disabled="type=='find'"></el-input>
        </div>
      </div>
      <div class="item flex-vertical-center-l">
        <span>*</span>
        <div class="name">剂型：</div>
        <div class="input">
          <el-select size="mini" v-model="form.doseType" placeholder="请选择" :disabled="type=='find'">
            <el-option
              :label="item.value"
              :value="item.key"
              v-for="(item,index) in doseTypeList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div class="item flex-vertical-center-l">
        <span>*</span>
        <div class="name">中医病名：</div>
        <div class="input">
          <el-select
            size="mini"
            v-model="form.cmName"
            @change="cNameChange"
            placeholder="请选择"
            :disabled="type=='find'"
            filterable
            remote
            :filter-method="filterMethod"
          >
            <el-option
              :label="item.disname"
              :value="item.disname"
              v-for="(item,index) in cmNameList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="item flex-vertical-center-l">
        <span>*</span>
        <div class="name">证型：</div>
        <div class="input">
          <el-autocomplete
            size="mini"
            v-model="form.cardType"
            :fetch-suggestions="searchZhengxing"
            :trigger-on-focus="true"
            @select="selectZX($event)"
            ref="zhengxing"
            :id="'zhengxing'"
            placeholder="请输入"
            :disabled="type=='find'"
          ></el-autocomplete>
        </div>
      </div>
      <div class="item flex-vertical-center-l">
        <span></span>
        <div class="name">方解：</div>
        <div class="input">
          <el-input
            size="mini"
            v-model="form.solution"
            type="textarea"
            placeholder="请输入"
            :disabled="type=='find'"
          ></el-input>
        </div>
      </div>
      <div class="item flex-vertical-center-l">
        <span>*</span>
        <div class="name">选择药房：</div>
        <div class="input">
          <el-select
            size="mini"
            v-model="pharmacyID"
            placeholder="请选择"
            :disabled="type=='find'"
            @change="changePharmacy(form.lastType)"
          >
            <el-option
              :label="item.pharmacyName"
              :value="item.pid"
              v-for="(item,index) in pharmacyList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
      </div>
      <!-- @change="getPharmacyID" -->
      <div class="item flex-vertical-center-l">
        <span>*</span>
        <div class="name">选择类型：</div>
        <div class="input">
          <el-select
            size="mini"
            v-model="form.cMedType"
            placeholder="请选择"
            :disabled="type=='find'"
            @change="changePharmacy(form.lastType)"
          >
            <el-option
              :label="item.pharmacyName"
              :value="item.pid"
              v-for="(item,index) in cMedType"
              :key="index"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div class="item flex-vertical-center-l">
        <span></span>
        <div class="name">专家：</div>
        <div class="input">
          <el-input size="mini" v-model="form.experts" placeholder="请输入" :disabled="type=='find'"></el-input>
        </div>
      </div>
      <div class="item flex-vertical-center-l">
        <span></span>
        <div class="name">专家名衔：</div>
        <div class="input">
          <el-select size="mini" v-model="form.titles" placeholder="请选择" :disabled="type=='find'">
            <el-option
              :label="item.value"
              :value="item.value"
              v-for="(item,index) in titlesList"
              :key="index"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="item flex-vertical-center-l">
        <span></span>
        <div class="name">修改限制：</div>
        <div class="input">
          <el-switch
            size="mini"
            :disabled="type=='find'"
            v-model="form.switch"
            active-color="#5EC7B1"
            inactive-color="#ff4949"
          ></el-switch>
        </div>
      </div>
    </div>

    <div class="pre-detail">处方明细:</div>
    <!-- 表格  -->
    <div class="table-show flex-plane-t-between flex-wrap">
      <!-- 表一和表二 -->
      <div class="table-left-body">
        <div class="table-left" v-if="true">
          <el-table
            :data="tableData"
            style="width:100%;"
            :span-method="arraySpanMethod1"
            id="table1"
          >
            <el-table-column prop="id" label width="40" fixed="left">
              <template slot-scope="scope">
                <!-- width:110px -->
                <!-- v-model="scope.row.key" -->
                <div v-if="!scope.row.name" class="flex-vertical-between">
                  <div style="width:110px;" class="operate2" id="operate2">
                    <el-input
                      :value="scope.row.key"
                      :id="'searchD'+scope.row.id"
                      size="mini"
                      placeholder="请输入..."
                      @input="searchDrug($event,scope)"
                      @blur="drugBlur($event,scope)"
                      @keydown.down.native="drugDown($event,scope)"
                      @keydown.up.native="drugUp($event,scope)"
                      @keydown.enter.native="drugEnter(scope)"
                      :disabled="type=='find'"
                    ></el-input>

                    <div class="table-choose3" v-if="scope.row.key">
                      <div class="table-choose-h flex-vertical-between">
                        <div class="flex-center">药品名称</div>
                        <div class="flex-center">规格</div>
                        <div class="flex-center">产地</div>
                        <div class="flex-center">库存</div>
                      </div>

                      <div
                        class="t-c-b infinite-list"
                        v-infinite-scroll="load"
                        :infinite-scroll-immediate="false"
                        :id="'infiniteList'+scope.row.id"
                        :ref="'infiniteList'+scope.row.id"
                        style="overflow:auto"
                      >
                        <div
                          class="infinite-list-item flex-vertical-between"
                          :style="scope.row.search_i===index1?'background:#F3FFFB;':''"
                          @click="chooseDis1(scope,index1,item1)"
                          v-for="(item1,index1) in scope.row.drugList"
                          :key="index1"
                        >
                          <p class="flex-center">{{item1.ypmc}}</p>
                          <p class="flex-center">{{item1.gg}}</p>
                          <p class="flex-center">{{item1.cdmc}}</p>
                          <p class="flex-center">{{item1.kc}}</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="operate1" v-if="scope.row.id!==totalTableD.length && !scope.row.name">
                    <img src="~@/assets/delete1.png" alt @click="deleteDis1(scope)" />
                  </div>
                </div>
                <!-- -->
                <div v-else>{{scope.row.id}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="药品名称" width="80" fixed="left">
              <template slot-scope="scope" v-if="scope.row.name">
                <div
                  @click="clickName(scope)"
                  v-if="!scope.row.showSearch"
                  :style="{'color':scope.row.color?scope.row.color:''}"
                >{{scope.row.name}}</div>
                <div v-else class="flex-vertical-between">
                  <div style="width:110px;">
                    <el-input
                      :value="scope.row.key"
                      :id="'searchD'+scope.row.id"
                      size="mini"
                      :placeholder="scope.row.name"
                      @input="searchDrug($event,scope)"
                      @blur="drugBlur1($event,scope)"
                      @keydown.down.native="drugDown($event,scope)"
                      @keydown.up.native="drugUp($event,scope)"
                      @keydown.enter.native="drugEnter(scope)"
                      :disabled="type=='find'"
                    ></el-input>
                    <!-- v-model="scope.row.key" -->
                    <div class="table-choose3" v-if="scope.row.key">
                      <div class="table-choose-h flex-vertical-between">
                        <div class="flex-center">药品名称</div>
                        <div class="flex-center">规格</div>
                        <div class="flex-center">产地</div>
                        <div class="flex-center">库存</div>
                      </div>
                      <!--  -->
                      <div
                        class="t-c-b infinite-list"
                        v-infinite-scroll="load"
                        :infinite-scroll-immediate="false"
                        :id="'infiniteList'+scope.row.id"
                        :ref="'infiniteList'+scope.row.id"
                        style="overflow:auto"
                      >
                        <div
                          class="infinite-list-item flex-vertical-between"
                          :style="scope.row.search_i===index1?'background:#F3FFFB;':''"
                          @click="chooseDis1(scope,index1,item1)"
                          v-for="(item1,index1) in scope.row.drugList"
                          :key="index1"
                        >
                          <p class="flex-center">{{item1.ypmc}}</p>
                          <p class="flex-center">{{item1.gg}}</p>
                          <p class="flex-center">{{item1.cdmc}}</p>
                          <p class="flex-center">{{item1.kc}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- fixed="left" -->
            <el-table-column prop="spec" label="规格" width="50"></el-table-column>
            <el-table-column prop="dose" label="剂量" width="50">
              <template slot-scope="scope" v-if="scope.row.name">
                <div class="t_dose">
                  <el-input
                    :value="scope.row.dose"
                    size="mini"
                    :id="'dose'+scope.row.id"
                    @keydown.enter.native="doseEnter(scope)"
                    @input="countDoseMoney($event,scope)"
                    :disabled="type=='find'"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="50"></el-table-column>
            <!-- <el-table-column prop="inventory" label="库存" width="80"> -->

            <!-- </el-table-column> -->
            <el-table-column prop="usage" label="用法">
              <template slot-scope="scope" v-if="scope.row.name">
                <el-select
                  v-model="scope.row.usage"
                  placeholder="请选择"
                  size="mini"
                  @change="usageC($event,scope)"
                  :disabled="type=='find'"
                >
                  <el-option
                    :label="item.value"
                    :value="item.key"
                    v-for="(item,index) in scope.row.usageList"
                    :key="index"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="price" label="单价" width="50">
            </el-table-column>-->
            <!-- <el-table-column prop="total" label="计价总额" width="80">
                            <template slot-scope="scope" v-if="scope.row.name">
                                <div>{{scope.row.total | formatTotal}}</div>
                            </template>
            </el-table-column>-->

            <el-table-column label="操作" fixed="right" width="150">
              <template slot-scope="scope">
                <div class="operate" v-if="scope.row.name">
                  <div v-if="type!='find'">
                    <img src="~@/assets/add.png" alt @click="addDis1(scope)" />
                  </div>
                  <div v-if="type!='find'">
                    <img src="~@/assets/delete1.png" alt @click="deleteDis1(scope)" />
                  </div>
                  <div>
                    <img src="~@/assets/find.png" alt @click="findDrug(scope)" />
                  </div>
                </div>
                <div
                  class="operate"
                  v-else-if="scope.row.id==totalTableD.length && !scope.row.name"
                >
                  <div style="opacity:0;">
                    <img src="~@/assets/find.png" alt />
                  </div>
                </div>

                <div v-else class="operate">
                  <div v-if="scope.row.id!==totalTableD.length">
                    <img src="~@/assets/delete1.png" alt @click="deleteDis1(scope)" />
                  </div>
                </div>
              </template>
            </el-table-column>

            <div slot="empty"></div>
          </el-table>
        </div>
      </div>

      <div class="table-left-body">
        <div class="table-left" v-if="true">
          <el-table
            :data="tableData1"
            style="width:100%;"
            :span-method="arraySpanMethod1"
            id="table1"
          >
            <el-table-column prop="id" label width="40" fixed="left">
              <template slot-scope="scope">
                <!-- width:110px -->
                <!-- v-model="scope.row.key" -->
                <div v-if="!scope.row.name" class="flex-vertical-between">
                  <div style="width:110px;" class="operate2" id="operate2">
                    <el-input
                      :value="scope.row.key"
                      :id="'searchD'+scope.row.id"
                      size="mini"
                      placeholder="请输入..."
                      @input="searchDrug($event,scope)"
                      @blur="drugBlur($event,scope)"
                      @keydown.down.native="drugDown($event,scope)"
                      @keydown.up.native="drugUp($event,scope)"
                      @keydown.enter.native="drugEnter(scope)"
                      :disabled="type=='find'"
                    ></el-input>

                    <div class="table-choose3" v-if="scope.row.key">
                      <div class="table-choose-h flex-vertical-between">
                        <div class="flex-center">药品名称</div>
                        <div class="flex-center">规格</div>
                        <div class="flex-center">产地</div>
                        <div class="flex-center">库存</div>
                      </div>

                      <div
                        class="t-c-b infinite-list"
                        v-infinite-scroll="load"
                        :infinite-scroll-immediate="false"
                        :id="'infiniteList'+scope.row.id"
                        :ref="'infiniteList'+scope.row.id"
                        style="overflow:auto"
                      >
                        <div
                          class="infinite-list-item flex-vertical-between"
                          :style="scope.row.search_i===index1?'background:#F3FFFB;':''"
                          @click="chooseDis1(scope,index1,item1)"
                          v-for="(item1,index1) in scope.row.drugList"
                          :key="index1"
                        >
                          <p class="flex-center">{{item1.ypmc}}</p>
                          <p class="flex-center">{{item1.gg}}</p>
                          <p class="flex-center">{{item1.cdmc}}</p>
                          <p class="flex-center">{{item1.kc}}</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="operate1" v-if="scope.row.id!==totalTableD.length && !scope.row.name">
                    <img src="~@/assets/delete1.png" alt @click="deleteDis1(scope)" />
                  </div>
                </div>
                <!-- -->
                <div v-else>{{scope.row.id}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="药品名称" width="80" fixed="left">
              <template slot-scope="scope" v-if="scope.row.name">
                <div
                  @click="clickName(scope)"
                  v-if="!scope.row.showSearch"
                  :style="{'color':scope.row.color?scope.row.color:''}"
                >{{scope.row.name}}</div>
                <div v-else class="flex-vertical-between">
                  <div style="width:110px;">
                    <el-input
                      :value="scope.row.key"
                      :id="'searchD'+scope.row.id"
                      size="mini"
                      :placeholder="scope.row.name"
                      @input="searchDrug($event,scope)"
                      @blur="drugBlur1($event,scope)"
                      @keydown.down.native="drugDown($event,scope)"
                      @keydown.up.native="drugUp($event,scope)"
                      @keydown.enter.native="drugEnter(scope)"
                      :disabled="type=='find'"
                    ></el-input>
                    <!-- v-model="scope.row.key" -->
                    <div class="table-choose3" v-if="scope.row.key">
                      <div class="table-choose-h flex-vertical-between">
                        <div class="flex-center">药品名称</div>
                        <div class="flex-center">规格</div>
                        <div class="flex-center">产地</div>
                        <div class="flex-center">库存</div>
                      </div>
                      <!--  -->
                      <div
                        class="t-c-b infinite-list"
                        v-infinite-scroll="load"
                        :infinite-scroll-immediate="false"
                        :id="'infiniteList'+scope.row.id"
                        :ref="'infiniteList'+scope.row.id"
                        style="overflow:auto"
                      >
                        <div
                          class="infinite-list-item flex-vertical-between"
                          :style="scope.row.search_i===index1?'background:#F3FFFB;':''"
                          @click="chooseDis1(scope,index1,item1)"
                          v-for="(item1,index1) in scope.row.drugList"
                          :key="index1"
                        >
                          <p class="flex-center">{{item1.ypmc}}</p>
                          <p class="flex-center">{{item1.gg}}</p>
                          <p class="flex-center">{{item1.cdmc}}</p>
                          <p class="flex-center">{{item1.kc}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- fixed="left" -->
            <el-table-column prop="spec" label="规格" width="50"></el-table-column>
            <el-table-column prop="dose" label="剂量" width="50">
              <template slot-scope="scope" v-if="scope.row.name">
                <div class="t_dose">
                  <el-input
                    :value="scope.row.dose"
                    size="mini"
                    :id="'dose'+scope.row.id"
                    @keydown.enter.native="doseEnter(scope)"
                    @input="countDoseMoney($event,scope)"
                    :disabled="type=='find'"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="50"></el-table-column>
            <!-- <el-table-column prop="inventory" label="库存" width="80"> -->

            <!-- </el-table-column> -->
            <el-table-column prop="usage" label="用法">
              <template slot-scope="scope" v-if="scope.row.name">
                <el-select
                  v-model="scope.row.usage"
                  placeholder="请选择"
                  size="mini"
                  @change="usageC($event,scope)"
                  :disabled="type=='find'"
                >
                  <el-option
                    :label="item.value"
                    :value="item.key"
                    v-for="(item,index) in scope.row.usageList"
                    :key="index"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="price" label="单价" width="50">
            </el-table-column>-->
            <!-- <el-table-column prop="total" label="计价总额" width="80">
                            <template slot-scope="scope" v-if="scope.row.name">
                                <div>{{scope.row.total | formatTotal}}</div>
                            </template>
            </el-table-column>-->

            <el-table-column label="操作" fixed="right" width="150">
              <template slot-scope="scope">
                <div class="operate" v-if="scope.row.name">
                  <div v-if="type!='find'">
                    <img src="~@/assets/add.png" alt @click="addDis1(scope)" />
                  </div>
                  <div v-if="type!='find'">
                    <img src="~@/assets/delete1.png" alt @click="deleteDis1(scope)" />
                  </div>
                  <div>
                    <img src="~@/assets/find.png" alt @click="findDrug(scope)" />
                  </div>
                </div>
                <div
                  class="operate"
                  v-else-if="scope.row.id==totalTableD.length && !scope.row.name"
                >
                  <div style="opacity:0;">
                    <img src="~@/assets/find.png" alt />
                  </div>
                </div>

                <div v-else class="operate">
                  <div v-if="scope.row.id!==totalTableD.length">
                    <img src="~@/assets/delete1.png" alt @click="deleteDis1(scope)" />
                  </div>
                </div>
              </template>
            </el-table-column>

            <div slot="empty"></div>
          </el-table>
        </div>
      </div>
    </div>

    <div
      class="save flex-center"
      v-if="(type=='edit' &&showBtn) || (type=='add' && showBtn)"
      @click="save()"
    >保存</div>
    <!-- 药品详情 -->
    <Popup
      width="80%"
      :showDialog="showDrug"
      @cancle="showDrug=false"
      title="药品详情"
      :showBtns="false"
    >
      <div class="drug-body" slot="body">
        <div class="drug-item flex-plane-center-l">
          <span>名称：</span>
          <div>{{drugInfo.matname}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>别名：</span>
          <div>{{drugInfo.matsynonyms}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>剂量区间：</span>
          <div>{{drugInfo.matmindosage}}-{{drugInfo.matmindosage}}{{drugInfo.unit}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>单位：</span>
          <div>{{drugInfo.unit}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>用法：</span>
          <div>{{drugInfo.matusage}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>用法禁忌：</span>
          <div>{{drugInfo.matsjj}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>性味：</span>
          <div>{{drugInfo.matflavour}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>归经：</span>
          <div>{{drugInfo.matmeridian}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>功效：</span>
          <div>{{drugInfo.matefficacy}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>应用：</span>
          <div>{{drugInfo.matapplication}}</div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>使用注意：</span>
          <div>
            <div>{{drugInfo.mattaboo}}</div>
            <!-- <div>2.通常补血用当归身，活血用当归尾，补血活血用全当归</div> -->
          </div>
        </div>
        <div class="drug-item flex-plane-center-l">
          <span>图示：</span>
          <div class="flex-plane-center-l" v-for="(item,index) in drugInfo.matphoto" :key="index">
            <img :src="item" alt />
          </div>
        </div>
        <div class="flex-vertical-center-l flex-wrap">
          <div class="drug-item1 flex-plane-center-l">
            <span>相似中药鉴别使用：</span>
            <div>
              <div v-for="(item,index) in drugInfo.xiangsi" :key="index">
                <span
                  class="mad-cy"
                  v-for="(item1,index1) in item.relmats"
                  :key="index1"
                >{{item1.matname}}{{index1==item.relmats.length-1?'':'、'}}</span>
                <div style="margin-bottom:10px;">{{item.differencedesc}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-vertical-center-l flex-wrap">
          <div class="drug-item1 flex-plane-center-l">
            <span>常用药对：</span>
            <div>
              <div v-for="(item,index) in drugInfo.changyong" :key="index">
                <span
                  class="mad-cy"
                  v-for="(item1,index1) in item.relmats"
                  :key="index1"
                >{{item1.matname}}{{index1==item.relmats.length-1?'':'、'}}</span>
                <div style="margin-bottom:10px;">{{item.differencedesc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Popup>
  </div>
</template>
<script>
import Popup from "@/components/Propup.vue";
import { debounce } from "@/utils/format.js";
import {
  getTableDrug,
  getAddressForHospital,
  getPharmacyID,
  changePharmacy,
  getDrugDetail,
  customerQuery
} from "@/api/diagnosis.js";
import { getSelectType } from "@/api/city.js";
import {
  getCDiseaseName,
  getXDiseaseName,
  getCCardType
} from "@/api/knowledge.js";

import {
  addExperince,
  getExperinceDetail,
  editExperince
} from "@/api/business";

export default {
  components: {
    Popup
  },
  props: {
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showDrug: false,
      drugInfo: {},
      form: {
        name: "", // 方名
        efficacy: "", // 功效
        doseType: "", //剂型

        cmName: "", // 中医病名
        cmNameID: "", // 中医病名id
        cardType: "", // 证型
        cardTypeID: "", // 证型id
        solution: "", // 方解
        cMedType: "", // 中药类型
        experts: "", // 专家
        titles: "", // 专家头衔
        switch: false // 修改限制
      },
      cmNameList: [], // 中医病名列表
      doseTypeList: [], // 剂型选择器
      cardTypeList: [], // 中医证型
      titlesList: [
        {
          key: "1",
          value: "国医大师"
        },
        {
          key: "2",
          value: "国家级名老中医"
        },
        {
          key: "3",
          value: "省级名老中医"
        },
        {
          key: "4",
          value: "名医"
        }
      ],
      pharmacyID: "", // 药房id
      pharmacyList: [],
      cMedType: [
        {
          pharmacyName: "散装饮片",
          pid: "0"
        },
        {
          pharmacyName: "散装颗粒",
          pid: "1"
        },
        {
          pharmacyName: "小包装饮片",
          pid: "2"
        },
        {
          pharmacyName: "小包装颗粒",
          pid: "3"
        }
      ], // 中药类型 pharmacyName /pharmacyId

      /*---------顶部字段信息 结束-------------*/

      /*---------底部字段信息 开始-------------*/
      totalTableD: [
        {
          id: 1,
          name: "",
          spec: "", // 规格
          dose: "", // 剂量
          unit: "", // 单位
          usage: "", // 用法
          key: "",
          search_i: 0,
          // price: '12',
          // total: 12,
          // inventory: '999', // 库存
          usageList: [], // 用法
          drugList: [],
          loadMore: true,
          page: 1
        }
      ],
      tableData: [
        {
          id: 1,
          key: "",
          drugList: [],
          page: 1,
          loadMore: true,
          usageList: [],
          search_i: 0,
          showSearch: false
        }
      ],
      tableData1: [],

      index: 1,
      pid: "", // 协定方id
      type: "add" // 是否是 查看
    };
  },
  created() {
    this.getSelectType("剂型", 0);
    this.customerQuery();
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
      this.getExperinceDetail();
    } else {
      this.getSelectType("中药药品用法", 0);
    }
  },
  methods: {
    // 保存按钮点击
    save() {
      if (!this.form.name) {
        this.$message({
          type: "error",
          message: "请输入方名",
          showClose: true
        });
        return;
      }
      if (!this.form.doseType) {
        this.$message({
          type: "error",
          message: "请选择剂型",
          showClose: true
        });
        return;
      }
      if (!this.form.cmNameID) {
        this.$message({
          type: "error",
          message: "请输入中医病名",
          showClose: true
        });
        return;
      }

      if (!this.form.cardTypeID) {
        this.$message({
          type: "error",
          message: "请输入证型",
          showClose: true
        });
        return;
      }

      if (!this.form.cMedType) {
        this.$message({
          type: "error",
          message: "请选择中药类型",
          showClose: true
        });
        return;
      }
      let hasDrug = false;
      this.totalTableD.forEach(item => {
        if (item.name) {
          hasDrug = true;
        }
      });
      if (!hasDrug) {
        this.$message({
          type: "error",
          message: "请完善处方明细信息",
          showClose: true
        });
        return;
      }

      if (this.type == "add") {
        this.addExperince();
      } else {
        this.editExperince();
      }
    },
    cNameChange() {
      // let id = ''
      this.cmNameList.forEach(item => {
        if (item.disname == this.form.cmName) {
          // id = item.disid
          this.form.cmNameID = item.disid;
        }
      });
      this.form.cardType = "";
      this.form.cardTypeID = "";

      this.getCCardType(this.form.cmNameID);
      setTimeout(() => {
        this.$refs.zhengxing.focus();
      }, 200);
    },
    filterMethod(e) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(e)) {
        this.getCDiseaseName(e, "1");
      } else {
        this.getCDiseaseName(e, "");
      }
    },

    selectZX(e) {
      this.form.cardType = e.value;
      this.form.cardTypeID = e.id;
    },
    async customerQuery() {
      let res = await customerQuery({
        type: 0
      });
      if (res.ResultCode == 0) {
        // this.pharmacyID = res.Data[0].pid
        this.pharmacyList = res.Data;
      }
    },
    // 获取药品详细信息并展示
    async getDrugDetail(id) {
      let res = await getDrugDetail({
        stiDrugId: id
      });
      if (res.ResultCode == 0) {
        res.Data.matphoto = res.Data.matphoto.split(",");
        // res.data.matphoto = res.data.matphoto.split(',')
        res.Data.xiangsi = res.Data.relativedata.filter(item => {
          return item.relativetype == 1;
        });
        res.Data.changyong = res.Data.relativedata.filter(item => {
          return item.relativetype == 2;
        });
        this.drugInfo = res.Data;
        this.showDrug = true;
      }
    },
    // 获取详情
    async getExperinceDetail() {
      let res = await getExperinceDetail({
        pid: this.$route.query.pid
      });
      if (res.ResultCode == 0) {
        this.form = {
          name: res.Data.name, // 方名
          efficacy: res.Data.effect, // 功效
          doseType: res.Data.curetype, //剂型

          cmName: res.Data.diseasename, // 中医病名
          cmNameID: res.Data.diseaseid, // 中医病名id
          cardType: res.Data.symptomname, // 证型
          cardTypeID: res.Data.symptomid, // 证型id
          solution: res.Data.solution, // 方解
          cMedType: res.Data.prescriptiontype, // 中药类型
          experts: res.Data.expert, // 专家
          titles: res.Data.experttitle, // 专家头衔
          switch: res.Data.isupdate == 0 ? true : false // 修改限制
        };
        this.getCCardType(this.form.cmNameID);
        this.totalTableD = [];
        res.Data.prescriptionDetailVos.forEach((item, index) => {
          if (item.drugname) {
            let obj = {
              id: index,
              name: item.drugname,
              spec: item.specification, // 规格
              dose: item.dose, // 剂量
              unit: item.unit, // 单位
              // usage: item.usagestr, // 用法
              usage: item.usagestr,
              // price: item.lsjg,
              price: 0,
              total: 0,
              inventory: 0, // 库存
              key: "",
              search_i: 0,
              medid: item.drugid, // 药品id
              originname: "", // 产地名称
              showSearch: false,

              usageList: []
            };

            this.totalTableD.push(obj);
          }

          this.totalTableD.filter((item, index) => {
            if (item.usageList.length == 0) {
              this.getSelectType("中药药品用法", index, "detail");
            }
            return (item.id = index + 1);
          });
          this.tableData = this.totalTableD.filter((item, index) => {
            return item.id % 2 != 0;
          });
          this.tableData1 = this.totalTableD.filter((item, index) => {
            return item.id % 2 == 0;
          });
        });
      }
    },
    // 修改专家经验
    async editExperince() {
      let prescriptionDetailVos = [];
      this.totalTableD.forEach((item, index) => {
        if (item.name) {
          let obj = {
            dose: item.dose,
            drugid: item.medid,
            drugname: item.name,
            seqn: item.id,
            specification: item.spec,
            unit: item.unit,
            usagestr: item.usage
          };
          prescriptionDetailVos.push(obj);
        }
      });
      let params = {
        curetype: this.form.doseType,
        diseaseid: this.form.cmNameID,
        diseasename: this.form.cmName,
        effect: this.form.efficacy,
        expert: this.form.experts,
        experttitle: this.form.titles,
        isupdate: this.form.switch ? 0 : 1,
        name: this.form.name,
        pharmacyid: this.pharmacyID,
        prescriptiontype: this.form.cMedType,
        solution: this.form.solution,
        symptomid: this.form.cardTypeID,
        symptomname: this.form.cardType,
        prescriptionDetailVos,
        pid: this.$route.query.pid
      };

      let res = await editExperince(params);
      if (res.ResultCode == 0) {
        this.$message({
          type: "success",
          message: "修改成功",
          showClose: true
        });
        setTimeout(() => {
          this.$router.back();
        }, 2000);
      } else {
        this.$message({
          type: "error",
          message: res.ResultInfo,
          showClose: true
        });
      }
    },
    // 添加专家经验
    async addExperince() {
      let prescriptionDetailVos = [];
      this.totalTableD.forEach((item, index) => {
        if (item.name) {
          let obj = {
            dose: item.dose,
            drugid: item.medid,
            drugname: item.name,
            seqn: item.id,
            specification: item.spec,
            unit: item.unit,
            usagestr: item.usage
          };
          prescriptionDetailVos.push(obj);
        }
      });
      let params = {
        curetype: this.form.doseType,
        diseaseid: this.form.cmNameID,
        diseasename: this.form.cmName,
        effect: this.form.efficacy,
        expert: this.form.experts,
        experttitle: this.form.titles,
        isupdate: this.form.switch ? 0 : 1,
        name: this.form.name,
        pharmacyid: this.pharmacyID,
        prescriptiontype: this.form.cMedType,
        solution: this.form.solution,
        symptomid: this.form.cardTypeID,
        symptomname: this.form.cardType,
        prescriptionDetailVos
      };
      let res = await addExperince(params);
      if (res.ResultCode == 0) {
        this.$message({
          type: "success",
          message: "保存成功",
          showClose: true
        });
        setTimeout(() => {
          this.$router.back();
        }, 2000);
      } else {
        this.$message({
          type: "error",
          message: res.ResultInfo,
          showClose: true
        });
      }
    },
    // 通过中药类型获取药房id
    async getPharmacyID() {
      let res = await getPharmacyID({
        type: this.form.cMedType
      });
      if (res.ResultCode == 0) {
        if (res.ResultInfo == "") {
          this.$message({
            showClose: true,
            message: "当前类型无法开药,请切换类型",
            type: "error"
          });
          return;
        }

        this.pharmacyID = res.ResultInfo;
      }
    },
    // 获取中医病名数据
    async getCDiseaseName(key, serchtype = "") {
      let params = {
        pageid: 1,
        pagesize: 9999,
        serchtype,
        keyword: key
      };
      let res = await getCDiseaseName(params);
      if (res.code == 0) {
        this.cmNameList = res.data.diseases;
      }
    },
    // 主诊断证型搜索
    async searchZhengxing(key, cb) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(key)) {
        await this.getCCardType(this.form.cmNameID, "", key, "1");
      } else {
        await this.getCCardType(this.form.cmNameID, "", key, "");
      }

      if (this.cardTypeList.length > 0) {
        let resault = [];
        this.cardTypeList.forEach(item => {
          let obj = {
            value: item.symname,
            id: item.symid,
            therapys: item.therapys
          };
          resault.push(obj);
        });
        cb(resault);
      } else {
        cb([
          {
            value: "搜索不到数据"
          }
        ]);
      }
    },
    // 获取中医证型
    async getCCardType(id, index = "", key = "", serchtype = "") {
      let params = {
        pageid: 1,
        pagesize: 9999,
        disid: serchtype == 1 ? "" : id,
        serchtype,
        keyword: key
      };
      let res = await getCCardType(params);

      if (res.code == 0) {
        if (index === "") {
          this.cardTypeList = res.data.sysptoms;
        }
      }
    },
    // 切换中药类型时 切换 药房 获取 药品里面有没有这条数据
    async changePharmacy(type) {
      let drugIds = [];

      this.totalTableD.forEach(item => {
        if (item.name) {
          let idDose = item.medid + "&" + item.dose;
          // drugIds.push(item.medid)
          drugIds.push(idDose);
        }
      });
      let pharmacyName = "";
      let type1 = 0;
      this.pharmacyList.forEach(item => {
        if (item.pid == this.pharmacyID) {
          pharmacyName = item.pharmacyName;
        }
      });
      if (this.form.cMedType == 0) {
        if (pharmacyName.indexOf("饮片") != -1) {
          type1 = 0;
        } else if (pharmacyName.indexOf("颗粒") != -1) {
          type1 = 1;
        }
      } else {
        if (pharmacyName.indexOf("饮片") != -1) {
          type1 = 2;
        } else if (pharmacyName.indexOf("颗粒") != -1) {
          type1 = 3;
        }
      }
      let params = {
        type: type1,
        pharmacyid: this.pharmacyID,
        drugIds,
        preType: "",
        oldType: type
      };
      let res = await changePharmacy(params);
      if (res.ResultCode == 0) {
        this.totalTableD.forEach((item1, index1) => {
          if (item1.name) {
            res.Data.forEach((item, index) => {
              if (item == item1.medid) {
                item1.color = "red";
              }

              // console.log(item instanceof Object);
              if (item instanceof Object && item.oldYpid == item1.medid) {
                item1.id = 2;
                item1.name = item.ypmc;
                item1.spec = item.gg; // 规格
                item1.dose = item.dose; // 剂量
                item1.unit = item.dw; // 单位
                // usage: item.usagestr, // 用法
                item1.usage = "";
                item1.price = item.lsjg;
                item1.total = 0;
                item1.inventory = item.kc; // 库存
                item1.key = "";
                item1.search_i = index;
                item1.medid = item.pid; // 药品id
                item1.originname = item.cdmc; // 产地名称
                item1.showSearch = false;

                item1.color = "#000";
              }

              this.$set(this.totalTableD, index1, item1);
            });
          }
        });
        this.totalTableD.filter((item, index) => {
          this.getSelectType("中药药品用法", index);
          return (item.id = index + 1);
        });
        this.totalTableD.filter((item, index) => {
          return item.id % 2 != 0;
        });
        this.totalTableD.filter((item, index) => {
          return item.id % 2 == 0;
        });

        // this.form.lastType = this.form.cMedType // 存储这一次的 药房类型
        this.form.lastType = type1;
        // console.log(this.recipe_tabs[this.recipe_tabs_c].totalTableD);
      }
    },

    /*-----------表格处理事件---------*/
    usageC(e, scope) {
      let totalData = this.totalTableD;

      this.totalTableD[scope.row.id - 1].usage = e;

      this.tableData = totalData.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = totalData.filter((item, index) => {
        return item.id % 2 == 0;
      });
    },
    // 输入剂量计算 当前药品总价格
    countDoseMoney(e, scope) {
      let totalData = this.totalTableD;
      let price = this.totalTableD[scope.row.id - 1].price;
      this.totalTableD[scope.row.id - 1].dose = e;
      let dose = this.totalTableD[scope.row.id - 1].dose;
      let total = 0;
      // 计算方式2
      if (this.countWay == "2") {
        total = (Number(price) * Number(dose)).toFixed(2);
      } else {
        total = Number(price) * Number(dose);
      }

      this.totalTableD[scope.row.id - 1].total = total;

      this.tableData = totalData.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = totalData.filter((item, index) => {
        return item.id % 2 == 0;
      });
    },
    doseEnter(scope) {
      if (scope.row.id == this.totalTableD.length - 1) {
        // console.log(document.querySelectorAll('#searchD' + (scope.row.id + 1)), '啦啦啦')
        document.querySelectorAll("#searchD" + (scope.row.id + 1))[1].focus();
      } else {
        try {
          this.totalTableD.forEach(item => {
            if (item.name && !item.dose && scope.row.id < item.id) {
              document.querySelectorAll("#dose" + item.id)[0].focus();
              throw Error();
            }
            if (!item.name) {
              // console.log(document.querySelectorAll('#searchD' + item.id), '啦啦啦')
              document.querySelectorAll("#searchD" + item.id)[1].focus();
              throw Error();
            }
          });
        } catch (error) {}
      }
    },
    //  修改剂数
    doseNumC() {
      let doseNum = this.recipe_tabs[this.recipe_tabs_c].bottom_form.doseNum;
      this.countNowRecipeMoney();
    },
    // 表一和表二 数据添加
    addDis1(scope) {
      let totalData = this.totalTableD;
      let index = scope.row.id;
      // totalData[index + 1].id && totalData[index + 1].name
      if (index != totalData.length - 2) {
        // 插入到 数据中间
        let data = totalData.splice(scope.row.id);

        totalData.push({
          id: 2,
          drugList: [],
          page: 1,
          loadMore: true,
          usageList: [],
          showSearch: false,
          key: "",
          search_i: 0
        });
        totalData = totalData.concat(data);
        // this.totalTableD = totalData;
      } else if (totalData[index + 1].id && !totalData[index + 1].name) {
        totalData.push({
          id: 2,
          drugList: [],
          page: 1,
          loadMore: true,
          usageList: [],
          showSearch: false,
          key: "",
          search_i: 0
        });
      }

      totalData.filter((item, index1) => {
        if (item.usageList.length == 0) {
          this.getSelectType("中药药品用法", index);
        }
        return (item.id = index1 + 1);
      });

      this.totalTableD = totalData;

      this.tableData = totalData.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = totalData.filter((item, index) => {
        return item.id % 2 == 0;
      });

      setTimeout(() => {
        if (scope.row.id == this.totalTableD.length - 1) {
          document.querySelectorAll("#searchD" + (scope.row.id + 1))[0].focus();
        } else {
          try {
            this.totalTableD.forEach(item => {
              if (!item.name) {
                // console.log(document.querySelectorAll('#searchD' + item.id), '啦啦啦')
                document.querySelectorAll("#searchD" + item.id)[0].focus();
                throw Error();
              }
            });
          } catch (error) {}
        }
      }, 500);
    },
    // 表一 和表二 查看药品数据
    findDrug(scope) {
      this.getDrugDetail(scope.row.medid);
    },
    // 表一和表二 数据删除
    deleteDis1(scope) {
      let totalData = this.totalTableD;
      let index = scope.row.id - 1;
      this.totalTableD.splice(index, 1);
      totalData.filter((item, index) => {
        // 调用 父级合理用药接口

        // father.getRationalMed(item.medid)
        return (item.id = index + 1);
      });
      this.tableData = totalData.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = totalData.filter((item, index) => {
        return item.id % 2 == 0;
      });
    },
    clickName(scope) {
      if (this.type == "find") return;
      // 隐藏滚动条
      if (scope.row.id % 2 == 0) {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[1].style.overflow = "hidden";
      } else {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[0].style.overflow = "hidden";
      }

      this.totalTableD[scope.row.id - 1].showSearch = !this.totalTableD[
        scope.row.id - 1
      ].showSearch;

      this.totalTableD[scope.row.id - 1].key = scope.row.name;
      this.totalTableD[scope.row.id - 1].search_i = 0;

      debounce(this.getTableDrug(scope.row.key, 1, scope.row.id - 1), 10000);
      setTimeout(() => {
        console.log(document.querySelectorAll("#searchD" + scope.row.id));
        document.querySelectorAll("#searchD" + scope.row.id)[1].focus();
      }, 500);
    },
    // 合并表一 表二
    arraySpanMethod1({ row, column, rowIndex, columnIndex }) {
      // if (!row.name) {
      //     // document.getElementById('table1')
      //     return [1, 8];
      // }
    },

    // 输入框获取 药品列表
    searchDrug(e, scope) {
      if (!this.pharmacyID) {
        this.$message({
          type: "error",
          message: "请先选择药房",
          showClose: true
        });
        return;
      }
      if (!this.form.cMedType) {
        this.$message({
          type: "error",
          message: "请先选择类型",
          showClose: true
        });
        return;
      }
      // 隐藏滚动条
      if (scope.row.id % 2 == 0) {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[1].style.overflow = "hidden";
      } else {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[0].style.overflow = "hidden";
      }

      this.totalTableD[scope.row.id - 1].key = e;
      let ids = document.querySelectorAll("#operate2");
      ids.forEach((item, index) => {
        item.style["z-index"] = "auto";
      });
      // if (e != '') {
      //     this.recipe_tabs[this.recipe_tabs_c].totalTableD[
      //         scope.row.id - 1
      //     ].showSearch = true
      // } else {
      //     this.recipe_tabs[this.recipe_tabs_c].totalTableD[
      //         scope.row.id - 1
      //     ].showSearch = false
      // }

      this.tableData = this.totalTableD.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = this.totalTableD.filter((item, index) => {
        return item.id % 2 == 0;
      });
      this.index = scope.row.id - 1;

      // this.getTableDrug(scope.row.key, 1, scope.row.id - 1)

      debounce(this.getTableDrug(scope.row.key, 1, scope.row.id - 1), 10000);
    },
    load() {
      console.log("进入");
      let key = this.totalTableD[this.index].key;
      let page = this.totalTableD[this.index].page;
      let loadMore = this.totalTableD[this.index].loadMore;
      if (loadMore) {
        page += 1;
      }

      // if (!loadMore == 1) return;
      this.getTableDrug(key, page, this.index, loadMore);
    },
    drugBlur(e, scope) {
      // 失去焦点 释放滚动条
      if (scope.row.id % 2 == 0) {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[1].style.overflow = "auto";
      } else {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[0].style.overflow = "auto";
      }
      setTimeout(() => {
        this.totalTableD[scope.row.id - 1].key = "";

        let ids = document.querySelectorAll("#operate2");
        ids.forEach((item, index) => {
          item.style["z-index"] = "99";
        });

        this.totalTableD.forEach(item => {
          item.drugList = [];
        });

        this.tableData = this.totalTableD.filter((item, index) => {
          return item.id % 2 != 0;
        });
        this.tableData1 = this.totalTableD.filter((item, index) => {
          return item.id % 2 == 0;
        });
      }, 500);
    },
    drugBlur1(e, scope) {
      // 失去焦点 展示滚动条
      if (scope.row.id % 2 == 0) {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[1].style.overflow = "auto";
      } else {
        document.getElementsByClassName(
          "el-table__body-wrapper"
        )[0].style.overflow = "auto";
      }
      setTimeout(() => {
        this.totalTableD[scope.row.id - 1].key = "";
        this.totalTableD[scope.row.id - 1].showSearch = false;
        let ids = document.querySelectorAll("#operate2");
        ids.forEach((item, index) => {
          item.style["z-index"] = "99";
        });
        this.totalTableD.forEach(item => {
          item.drugList = [];
        });

        this.tableData = this.totalTableD.filter((item, index) => {
          return item.id % 2 != 0;
        });
        this.tableData1 = this.totalTableD.filter((item, index) => {
          return item.id % 2 == 0;
        });
      }, 500);
    },
    // 表一 选中药品
    chooseDis1(scope, index, item) {
      let totalData = this.totalTableD;
      let obj = {
        color: "#000",
        id: scope.row.id,
        name: item.ypmc,
        spec: item.gg, // 规格
        dose: "", // 剂量
        unit: item.dw, // 单位
        // usage: item.usagestr, // 用法
        usage: "",
        // price: item.lsjg,
        price: item.price,
        total: 0,
        inventory: item.kc, // 库存
        key: "",
        search_i: index,
        medid: item.pid, // 药品id
        originname: item.cdmc, // 产地名称
        showSearch: false
      };
      Object.assign(totalData[scope.row.id - 1], obj);

      if (scope.row.id == totalData.length) {
        totalData.push({
          id: 2,
          drugList: [],
          page: 1,
          loadMore: true,
          usageList: [],
          search_i: 0,
          showSearch: false
        });
      }

      this.totalTableD = totalData;
      totalData.filter((item, index) => {
        if (item.usageList.length == 0) {
          this.getSelectType("中药药品用法", index);
        }
        return (item.id = index + 1);
      });

      this.tableData = totalData.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = totalData.filter((item, index) => {
        return item.id % 2 == 0;
      });

      setTimeout(() => {
        let ids = document.querySelectorAll("#dose" + scope.row.id);
        document.querySelectorAll("#dose" + scope.row.id)[0].focus();
      }, 500);
    },
    // 监听键盘事件
    drugDown(e, scope) {
      let totalData = this.totalTableD;
      // 如果到最后一个 判断是否需要分页
      if (
        totalData[scope.row.id - 1].search_i ==
        totalData[scope.row.id - 1].drugList.length - 1
      ) {
        // totalData[scope.$index].search_i
        if (totalData[scope.row.id - 1].loadMore) {
          totalData[scope.row.id - 1].page += 1;
          this.getTableDrug(
            totalData[scope.row.id - 1].key,
            totalData[scope.row.id - 1].page,
            scope.row.id - 1,
            totalData[scope.row.id - 1].loadMore
          );

          totalData[scope.row.id - 1].search_i += 1;
        }
      } else {
        totalData[scope.row.id - 1].search_i += 1;
      }

      // 表格 fixed 时 去 下标 为 1

      if (totalData[scope.row.id - 1].drugList.length > 5) {
        document.querySelectorAll(
          `#infiniteList${scope.row.id}`
        )[1].scrollTop += 36;

        console.log(
          document.querySelectorAll(`#infiniteList${scope.row.id}`)[1]
            .scrollTop,
          "top"
        );
      }
      this.totalTableD = totalData;
      totalData.filter((item, index) => {
        if (item.usageList.length == 0) {
          this.getSelectType("中药药品用法", index);
        }

        return (item.id = index + 1);
      });

      this.tableData = totalData.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = totalData.filter((item, index) => {
        return item.id % 2 == 0;
      });
      this.$forceUpdate();
    },
    drugUp(e, scope) {
      let totalData = this.totalTableD;
      // 如果到最后一个 判断是否需要分页
      if (totalData[scope.row.id - 1].search_i == 0) {
        // totalData[scope.$index].search_i
      } else {
        totalData[scope.row.id - 1].search_i -= 1;
      }

      if (
        document.querySelectorAll(`#infiniteList${scope.row.id}`)[1].scrollTop >
        0
      ) {
        document.querySelectorAll(
          `#infiniteList${scope.row.id}`
        )[1].scrollTop -= 36;
      }
      this.totalTableD = totalData;
      totalData.filter((item, index) => {
        // this.getSelectType('中药药品用法', index)
        if (item.usageList.length == 0) {
          this.getSelectType("中药药品用法", index);
        }
        return (item.id = index + 1);
      });

      this.tableData = totalData.filter((item, index) => {
        return item.id % 2 != 0;
      });
      this.tableData1 = totalData.filter((item, index) => {
        return item.id % 2 == 0;
      });
    },
    drugEnter(scope) {
      this.chooseDis1(
        scope,
        scope.row.search_i,
        scope.row.drugList[scope.row.search_i]
      );
    },
    // 获取表格药品列表
    async getTableDrug(key, page, index, load = true) {
      if (!load) return;
      let pharmacyName = "";
      let type1 = 0;
      this.pharmacyList.forEach(item => {
        if (item.pid == this.pharmacyID) {
          pharmacyName = item.pharmacyName;
        }
      });
      if (this.form.cMedType == 0) {
        if (pharmacyName.indexOf("饮片") != -1) {
          type1 = 0;
        } else if (pharmacyName.indexOf("颗粒") != -1) {
          type1 = 1;
        }
      } else {
        if (pharmacyName.indexOf("饮片") != -1) {
          type1 = 2;
        } else if (pharmacyName.indexOf("颗粒") != -1) {
          type1 = 3;
        }
      }
      let params = {
        key: key,
        limit: 5,
        page: page,
        type: type1, //this.form.cMedType,
        pharmacyid: this.pharmacyID
      };
      let res = await getTableDrug(params);

      if (res.ResultCode == 0) {
        // 计算方式3
        if (this.countWay == "3") {
          res.Data.Items.filter(item => {
            return (item.price = Number(item.price).toFixed(2));
          });
        }
        if (page <= res.Data.TotalPageCount) {
          if (page == 1) {
            this.totalTableD[index].drugList = res.Data.Items;
            this.$forceUpdate();
          } else {
            this.totalTableD[index].drugList = [
              ...this.totalTableD[index].drugList,
              ...res.Data.Items
            ];
            this.totalTableD[index].page += 1;
          }
          if (
            this.totalTableD[index].drugList.length == res.Data.TotalRecordCount
          ) {
            // this.totalTableD[index].loadMore = false
          }

          this.totalTableD.filter((item, index) => {
            return (item.id = index + 1);
          });
          this.tableData = this.totalTableD.filter((item, index) => {
            return item.id % 2 != 0;
          });
          this.tableData1 = this.totalTableD.filter((item, index) => {
            return item.id % 2 == 0;
          });
        } else {
          this.totalTableD[index].loadMore = false;
        }
      }
    },

    // 根据表格获取数据类型
    async getSelectType(data, index, type = "") {
      let res = await getSelectType(data);

      if (data == "中药药品用法") {
        if (this.totalTableD[index].usage) {
          let isSame = false;
          if (!type) {
            res.Data.forEach(item => {
              if (item.value === this.totalTableD[index].usage) {
                this.totalTableD[index].usage = item.key;
              } else {
                this.totalTableD[index].usage = "";
              }
            });
          } else {
            res.Data.forEach(item => {
              if (item.value === this.totalTableD[index].usage) {
                this.totalTableD[index].usage = item.key;
              }
            });
          }
        }
        this.totalTableD[index].usageList = res.Data;
      } else if (data == "剂型") {
        this.doseTypeList = res.Data;
      }
    }

    /*-----------表格处理事件---------*/
  },
  filters: {
    formatTotal(val) {
      if (val == 0) return val;
      // console.log(val, 'val');
      let v = String(val).split(".");
      if (v[1].length > 3) {
        return val.toFixed(3);
      } else {
        return val;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.accordEdit {
  padding: 33px 46px;
  background: #ffffff;
  border-radius: 5px;

  .back {
    width: 74px;
    height: 36px;
    background: #5386f6;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 49px;
    cursor: pointer;
  }

  .item {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333;
    margin-right: 62px;
    margin-bottom: 20px;

    span {
      color: #ff3a3a;
    }

    .input {
      width: 260px;
    }
  }

  .bottom {
    .title {
      margin-bottom: 15px;
    }
  }

  .save {
    width: 74px;
    height: 36px;
    background: #ffae45;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
}

.table-show {
  width: 100%;
  margin: 0 auto;

  // background: #5386F6;
  // overflow: hidden;

  .table-left-body {
    width: 49.8%;
    position: relative;
    perspective: 100px;
    padding-bottom: 53px;
  }

  .table-left {
    width: 100%;
    overflow-y: auto;
    border: 1px solid #dedede;
    box-sizing: border-box;

    .table-l-hader {
      white-space: nowrap;

      div {
        display: inline-block;
        // padding: 15px 10px;
        background: #f3fffb;
        text-align: center;
        height: 48px;
        line-height: 48px;
        border: 1px solid #dedede;
        border-bottom: 0 !important;
        // border-top: 0 !important;
      }

      .med-name {
        margin-left: 50px;
      }

      .kucun {
        padding-right: 120px;
      }

      .fixed-r {
        position: fixed;
        right: 0;
      }

      .fixed-left {
        position: fixed;
        left: 0;
      }
    }

    .table-l-item {
      white-space: nowrap;

      .bg-green {
        .div1 {
          background: #f3fffb;
          border: 1px solid #dedede;
        }
      }

      .div1 {
        display: inline-block;
        // padding: 15px 10px;
        background: #ffffff;
        text-align: center;
        height: 53px;
        line-height: 53px;
        border: 1px solid #dedede;
        z-index: 9999;
        border-top: 0 !important;
      }

      .med-name {
        margin-left: 50px;
      }

      .kucun {
        padding-right: 120px;
        border-right: 1px solid #dedede;
      }

      .fixed-r {
        position: fixed;
        right: 0;
      }

      .fixed-left {
        position: fixed;
        left: 0;
        // border-left: 1px solid #DEDEDE;
      }

      .no-data {
        width: 100%;
        box-sizing: border-box;
        // border-top: 1px solid #DEDEDE;
        position: relative;
        left: 0;
        right: 0;
        bottom: 0px;
        // float: left;
      }
    }
  }
}

.operate {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;

  img {
    width: 16px;
  }
}

.operate2 {
  position: absolute;
  z-index: 99;
}

.operate1 {
  position: fixed;
  width: 50px;
  // background: red;
  right: 15px;
  // top: 63px;
  z-index: 99999 !important;
  text-align: right;

  img {
    width: 16px;
  }
}

.bottom-input {
  background: #fff;
  padding: 12.5px 30px 12.5px 52px;
  position: relative;
  // z-index: 999;
  // perspective: 100px;

  .div {
    width: 154px;
  }

  .table-choose {
    z-index: 9999;
    width: 332px;
    height: 221px;
    background: #ffffff;
    border: 2px solid #d8d8d8;
    position: fixed;
    top: 18px;
    left: 200px;
    overflow: auto;

    .table-choose-h {
      background: #f3fffb;

      div {
        height: 36px;
        width: 73px;
      }

      div:first-child {
        width: 115px;
      }
    }

    .t-c-b {
      cursor: pointer;

      .td {
        background: #f3fffb;
      }

      p {
        border: 1px solid #ededed;
        height: 36px;
        width: 73px;
        // flex: 1;
        box-sizing: border-box;
      }

      p:first-child {
        width: 115px;
      }
    }
  }
}

.input::v-deep .el-select {
  width: 100%;
  box-sizing: border-box;
}

.table-show::v-deep .el-table .cell {
  text-align: center;
}

.table-show ::v-deep .el-select input {
  padding: 0 15px 0 5px;
}

.t_dose::v-deep .el-input__inner {
  // text-align: left;
  padding: 0 5px !important;
}

.table-choose3 {
  z-index: 99999;
  width: 332px;
  height: 221px;
  background: #ffffff;
  border: 2px solid #d8d8d8;
  // position: absolute;
  position: fixed;

  margin-top: 33px;
  // left: -4px;
  overflow: auto;

  .table-choose-h {
    background: #f3fffb;

    div {
      height: 36px;
      width: 73px;
    }

    div:first-child {
      width: 115px;
    }
  }

  .t-c-b {
    cursor: pointer;
    height: 180px;

    .td {
      background: #f3fffb;
    }

    p {
      border: 1px solid #ededed;
      height: 36px;
      width: 73px;
      // flex: 1;
      box-sizing: border-box;
    }

    p:first-child {
      width: 115px;
    }
  }
}

.pre-detail {
  margin: 20px 0;
}

.drug-body {
  padding: 0 99px;
  height: 600px;
  overflow: auto;

  .drug-item {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 20px;

    span {
      display: inline-block;
      width: 100px;
      text-align-last: justify;
    }

    div {
      flex: 1;

      img {
        width: 126px;
        height: 126px;
        background: red;
        margin-right: 32px;
      }

      span {
        text-align-last: left;
      }
    }

    .detail {
      flex: 1;

      .btns {
        width: 80px;
        height: 30px;
        background: #5386f6;
        border-radius: 2px 2px 2px 2px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        margin-bottom: 20px;
      }

      .drug-detail {
        span {
          text-align-last: left;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }
  }

  .drug-item1 {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 15px;
    margin-right: 50px;

    div {
      flex: 1;
    }
  }

  .mad-cy {
    color: #5386f6;
    font-weight: bold;
  }
}
</style>