diagnosis.admin/src/components/MedicineAndChina.vue

// 中成药
<template>
  <div class="zcy">
    <div class="chinese_medicine">
      <div class="flex flex-row-right">
        <div class="t-con-radio flex-vertical-center-l" style="flex-wrap: wrap;align-items: center;">
          <div class="t-radio-group2" :class="{multiple: group.options.length > 1}" v-for="group in pharmacyTypeGroup" :key="group.name">
            <label v-if="group.options.length > 1">{{group.name}}</label>
            <el-radio v-for="item in group.options" :key="item.ptype"
                      v-model="recipe.radio"
                      :disabled="recipe.disable"
                      :label="item.ptype"
                      @click.native.prevent="recipe.disable || changePharmacy(recipe.lastType,item.ptype)"
            >{{item.name}}</el-radio>
          </div>
        </div>
        <div class="clearer flex-center" @click="clearData();$emit('clear')">清空</div>
      </div>

      <div class="c-m-table">
        <div class="table-body table-show">
          <el-table :data="tableData3" style="width:100%;" :span-method="arraySpanMethod">
            <el-table-column prop="id" label width="20" fixed="left">
              <template slot-scope="scope">
                <div v-if="!scope.row.name" class="flex-vertical-between">
                  <div style="width:80px;" class="operate2" id="operate2">
                    <el-input
                      :value="scope.row.key"
                      :id="'searchD1'+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="!editable"
                    ></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:#EDF3FE;':''"
                          @click="chooseDis3(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>{{item1.cdmc}}</p>
                          <p class="flex-center">{{item1.kc}}</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- <div class="operate1" v-if="scope.row.id!==tableData3.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="药品名称" fixed="left">
              <template slot-scope="scope">
                <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:80px;">
                    <el-input
                      :value="scope.row.key"
                      :id="'searchD1'+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="!editable"
                    ></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:#EDF3FE;':''"
                          @click="chooseDis3(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>{{item1.cdmc}}</p>
                          <p class="flex-center">{{item1.kc}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="spec" label="规格" width="100"></el-table-column>
            <el-table-column prop="originname" label="产地"></el-table-column>
            <el-table-column prop="usage" label="用法" width="90">
              <template slot-scope="scope" v-if="scope.row.name">
                <el-select
                  v-model="scope.row.usage"
                  placeholder="请选择"
                  size="mini"
                  @change="usageChange($event,scope)"
                >
                  <el-option
                    :label="item.value"
                    :value="item.key"
                    v-for="(item,index) in usageList"
                    :key="index"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="timesQuan" label="次用量" width="160">
              <template slot-scope="scope" v-if="scope.row.name">
                <div class="flex flex-row-center" style="padding: 0 8px;">
                  <div class="t_dose">
                    <el-input
                      v-model="scope.row.timesQuan"
                      size="mini"
                      @input="timesQuanC($event,scope)"
                    ></el-input>
                  </div>
                  <div class="t_dose">
                    <el-select
                      size="mini"
                      v-model="scope.row.timesUnit"
                      @change="timesUnitC($event,scope)"
                    >
                      <el-option value="1" label="g"></el-option>
                      <el-option value="1" label="ml"></el-option>
                      <el-option value="2" label="支"></el-option>
                      <el-option value="3" label="个"></el-option>
                    </el-select>
                  </div>
                  <!-- <div class="unit">{{scope.row.usage=='2'?'ml':'克'}}</div> -->
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="nums" label="频次" width="90">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.nums"
                  placeholder="请选择"
                  size="mini"
                  @change="numsChange($event,scope)"
                  v-if="scope.row.name"
                >
                  <el-option
                    :label="item.value"
                    :value="item.key"
                    v-for="(item,index) in numList"
                    :key="index"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="dose" label="数量" width="160">
              <template slot-scope="scope" v-if="scope.row.name">
                <div class="flex flex-row-center" style="padding: 0 8px;">
                  <div class="t_dose">
                    <el-input
                      :value="scope.row.dose"
                      size="mini"
                      @input="countDoseMoney($event,scope)"
                      :id="'dose1'+scope.row.id"
                      @keydown.enter.native="doseEnter(scope)"
                    ></el-input>
                  </div>
                  <div class="t_dose">
                    <el-select
                      size="mini"
                      v-model="scope.row.doseUnit"
                      placeholder="请选择"
                      @change="doseUnitC($event,scope)"
                    >
                      <el-option
                        :value="item.value"
                        :label="item.key"
                        v-for="(item,index) in bzdwList"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="unit" label="单位" width="50"></el-table-column> -->
            <el-table-column prop="price" label="单价" width="50"></el-table-column>

            <!-- <el-table-column prop="time" label="服药时间" width="100">
                        <template slot-scope="scope" v-if="scope.row.name">
                            <el-select v-model="scope.row.time" placeholder="请选择" size='mini'
                                @change="timeC($event,scope)">
                                <el-option :label="item.value" :value="item.key"
                                    v-for="(item,index) in scope.row.timeList" :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"></el-table-column>
            <!-- <el-table-column prop="inventory" label="库存" width="50">
            </el-table-column>-->
            <el-table-column label="操作" width="64" fixed="right">
              <template slot-scope="scope">
                <div class="operate" v-if="scope.row.name">
                  <div v-if="editable">
                    <img src="../assets/add.png" alt @click="addDrug3(scope)" />
                  </div>
                  <div v-if="editable">
                    <img src="../assets/delete1.png" alt @click="deleteDrug3(scope)" />
                  </div>
                  <div>
                    <img src="../assets/find.png" alt @click="findDrug(scope)" />
                  </div>
                </div>
                <div class="operate" v-else-if="scope.row.id==tableData3.length && !scope.row.name">
                  <div style="opacity:0;">
                    <img src="../assets/find.png" alt />
                  </div>
                </div>

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

        <!-- 底部处方 -->
        <div class="table-bottom">
          <div class="table-b-header">
            <div v-if="bottom_form.usege=='xz'" class="header-about">
              <div class="item flex-vertical-center-l">
                <span>操作指南：</span>
                <div style="flex:1;">
                  <el-input size="mini" placeholder="请输入" v-model="bottom_form.caozuo"></el-input>
                </div>
              </div>
            </div>

            <div class="header-about">
              <div class="item flex-vertical-center-l">
                <span>嘱托：</span>
                <div style="flex:1;">
                  <el-input size="mini" placeholder="请输入" v-model="bottom_form.zhutuo"></el-input>
                </div>
              </div>
            </div>
            <!-- v-if="container_i!=2" -->
            <div class="header-about flex-vertical-center-l flex-wrap" v-if="false">
              <!-- <div class="item flex-vertical-center-l">
                                <span>配送：</span>
                                <div class="div1">
                                    <el-radio-group v-model="bottom_form.radio" @change="getAdd">
                                        <el-radio label="0">是</el-radio>
                                        <el-radio label="1">否</el-radio>

                                    </el-radio-group>
                                </div>
              </div>-->
              <div class="item flex-vertical-center-l">
                <div
                  class="daijiao-check flex flex-row-left flex-col-center"
                  @click="changePeiSong"
                >
                  <div :class="['img-body',bottom_form.radio==0?'active':'']">
                    <img src="~@/assets/new-icon/checked.png" alt v-if="bottom_form.radio==0" />
                  </div>
                  <span>配送</span>
                </div>
              </div>

              <div class="item flex-vertical-center-l" v-if="bottom_form.radio==0">
                <span>收货人：</span>
                <div class="div1">
                  <el-input size="mini" placeholder="请输入" v-model="bottom_form.savename"></el-input>
                </div>
              </div>
              <div class="item flex-vertical-center-l" v-if="bottom_form.radio==0">
                <span>电话：</span>
                <div class="div1">
                  <el-input size="mini" placeholder="请输入" v-model="bottom_form.phone"></el-input>
                </div>
              </div>
              <div class="item flex-vertical-center-l flex-wrap" v-if="bottom_form.radio==0">
                <span>地址：</span>
                <div class="city1 city">
                  <el-select
                    size="mini"
                    v-model="province"
                    placeholder="选择省"
                    @change="proC($event)"
                  >
                    <el-option
                      :label="item.name"
                      :value="item.code"
                      v-for="(item,index) in provinceList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </div>
                <div class="city1 city">
                  <el-select size="mini" v-model="city" placeholder="选择市" @change="cityC($event)">
                    <el-option
                      :label="item.name"
                      :value="item.code"
                      v-for="(item,index) in cityList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </div>
                <div class="city1 city">
                  <el-select size="mini" v-model="area" placeholder="选择区">
                    <el-option
                      :label="item.name"
                      :value="item.code"
                      v-for="(item,index) in areaList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </div>
                <div class="div4">
                  <el-input size="mini" placeholder="请输入详细地址" v-model="bottom_form.address"></el-input>
                </div>
              </div>

              <div
                class="right flex-center"
                v-if="bottom_form.radio==0"
                @click="getAddressForHospital"
              >寄到本院</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 留在这个页面 -->
    <div class="table-b-bottom flex-vertical-between">
      <div class="t-b-b-left flex-vertical-center-l flex-wrap">
        <div class="t-b-l-item">
          当前处方金额:
          <span>{{nowRecipeMoney}}元</span>
        </div>
        <div class="t-b-l-item" v-if="container_i==0">
          单剂金额:
          <span>10元</span>
        </div>
        <div class="t-b-l-item" v-if="bottom_form.daijian && bottom_form.doseType=='tj'">
          代煎费:
          <span>10元</span>
        </div>
        <div class="t-b-l-item" v-if="bottom_form.radio==0" v-show="moneyMsg.deliveryPrice">
          配送费:
          <span>{{moneyMsg.deliveryPrice}}元</span>
        </div>
        <div class="t-b-l-item" v-if="bottom_form.doseType=='gj'">
          制膏费:
          <span>10元</span>
        </div>
        <div class="t-b-l-item">
          合计费用:
          <span>{{allMoney}}元</span>
        </div>
      </div>
      <div class="t-b-b-right flex-vertical-center-r">
        <!-- <div class="flex-center bg-green" @click="submit()" v-if="showSubmit">提交处方</div> -->
        <template v-if="isAutoCheck==0">
          <el-button
            type="primary"
            size="mini"
            @click="submit()"
            v-if="editable"
          >保存处方</el-button>
        </template>

        <template v-if="isAutoCheck==1">
          <el-button
            type="primary"
            size="mini"
            @click="submit()"
            v-if="editable"
          >保存处方</el-button>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getProver,
  getArea,
  getSelectType,
  getPharmacyMsg,
  getPatAddress
} from "@/api/city.js";
import {
  changePharmacy,
  getTableDrug,
  getAddressForHospital,
  getPharmacyID,
  customerQuery,
  getBzdw
} from "@/api/diagnosis.js";
import { debounce } from "@/utils/format.js";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { getDataByKey } from "@/api/system.js";

let medicineBlurTimer;
export default {
  name: "medandchinese",
  props: {
    container_i: {
      type: Number,
      default: 1
    },
    showSubmit: {
      type: Boolean,
      default: true
    },
    isPs: {
      type: Number,
      default: 1
    }
  },
  watch: {
    isPs: {
      immediate: true,
      deep: true,
      handler: function() {
        this.bottom_form.radio = this.isPs;
      }
    },
    getuserinfo: {
      deep: true,
      immediate: true,
      handler() {
        if (this.getuserinfo.organizationid) {
          this.getDataByKey("automaticReview");
        }
      }
    }
  },
  data() {
    return {
      name: "中药制剂",
      prescribed: 0,
      isAutoCheck: "0", // 是否自动审核 0 手动 1自动 (自动的时候用his 的是否支付成功字段 判断显示)
      paystate: 0, // 云his 是否支付  0 否 1是(为否可以编辑)
      tableData3: [
        {
          id: 1,
          key: "",
          drugList: [],
          search_i: 0,
          showSearch: false,
          page: 1,
          loadMore: true,
          usageList: [],
          numList: [],
          timeList: []
        }
      ],
      /**
       * 相当于 recipe_tabs[recipe_tabs_c]
       */
      recipe: {},
      usageList: [],
      timeList: [],
      numList: [],
      bzdwList: [],
      page: 1,
      // 底部表单
      bottom_form: {
        doseNum: "",
        doseType: "",
        usege: "",
        num: "",
        daijian: "",
        nongjian: "",
        time: "",
        caozuo: "",
        zhutuo: "",
        radio: "1",
        savename: "", // 收货人
        address: "",
        phone: "",
        doseType1: "zc",
        doseNum: ""
      },
      pharmacyList: [], // 药房选择器 数据
      pharmacyTypes: [],
      pharmacyTypeGroup: [],
      pharmacyID: "", // 药房id
      isPay: false,
      province: "",
      city: "",
      area: "",
      provinceList: [],
      cityList: [],
      areaList: [],
      moneyMsg: {},
      nowRecipeMoney: 0, // 当前处方金额
      allMoney: 0, // 合计金额
      index: 0
    };
  },
  created() {
    this.loaded();
    // this.getTableDrug(,'1)
    this.getProver();
    // this.getPharmacyMsg(1)
    this.getSelectType("中药制剂药品用法", 0);
    this.getSelectType("中药制剂服药时间", 0);
    this.getSelectType("中药制剂频次", 0);
    this.getPharmacyID();
    // this.customerQuery()
    this._getBzdw();
  },
  methods: {
    async loaded(props) {
      if (!this.pharmacyTypes.length) await this.customerQuery().catch(() => void 0);

      let defaultProps = this.recipe;
      try {
        defaultProps = {...this.pharmacyTypes[0], ...defaultProps};
        this.recipe.pharmacyID = defaultProps.pharmacyID || this.pharmacyList[0].pid;
        this.recipe.radio = defaultProps.radio || defaultProps.ptype;
        this.recipe.lastType = defaultProps.radio || defaultProps.ptype;
      } catch (e) {}
      this.$forceUpdate();
      return this;
    },
    //   配送点击
    changePeiSong() {
      this.bottom_form.radio = this.bottom_form.radio == "1" ? "0" : "1";
      this.getAdd(this.bottom_form.radio);
    },
    // 获取地址
    getAdd(e) {
      if (e == 1) {
        this.province = "";
        this.city = "";
        this.area = "";
        this.bottom_form.savename = "";
        this.bottom_form.phone = "";
        this.bottom_form.address = "";
      } else {
        this.getPatAddress();
      }
      this.countNowRecipeMoney();
    },
    findDrug(scope) {
      this.$emit("find", scope);
    },
    // 频次改变
    numsChange(e, scope) {
      this.tableData3[scope.$index].nums = e;
      this.tableData3 = this.tableData3.map(item => ({...item}));
    },
    usageChange(e, scope) {
      this.tableData3[scope.$index].usage = e;
      this.tableData3 = this.tableData3.map(item => ({...item}));
    },
    // 渲染次用量
    timesQuanC(e, scope) {
      this.tableData3[scope.$index].timesQuan = e;
      this.tableData3 = this.tableData3.map(item => ({...item}));
    },
    // 数量 单位修改
    doseUnitC(e, scope) {
      this.tableData3[scope.$index].doseUnit = e;
      this.tableData3 = this.tableData3.map(item => ({...item}));
    },
    // 次用量单位 修改
    timesUnitC(e, scope) {
      this.tableData3[scope.$index].timesUnit = e;
      this.tableData3 = this.tableData3.map(item => ({...item}));
    },
    // 渲染服药时间
    timeC(e, scope) {
      this.tableData3[scope.$index].time = e;
      this.tableData3 = this.tableData3.map(item => ({...item}));
    },
    // 计算当前处方金额
    countNowRecipeMoney() {
      let data = this.tableData3;
      let total = 0;
      data.forEach(item => {
        if (item.total) {
          total += Number(item.total);
        }
      });

      this.nowRecipeMoney = total.toFixed(2);
      // 是否配送
      let isDelivery = this.bottom_form.radio;
      //配送费
      let deliveryPrice =
        isDelivery == 0 ? this.moneyMsg.deliveryPrice || 0 : 0;

      this.allMoney = Number(total.toFixed(2)) + Number(deliveryPrice);
      this.$emit("update:totalAllMoney", this.allMoney);
    },
    countDoseMoney(e, scope) {
      scope.row.dose = e;

      scope.row.total = (
        Number(this.tableData3[scope.$index].dose) *
        Number(this.tableData3[scope.$index].price)
      ).toFixed(2);

      // setTimeout(() => {
      //     document.querySelectorAll('#dose' + scope.row.id)[0].value = e
      // }, 200)
      this.$set(this.tableData3, scope.$index, scope.row);

      this.countNowRecipeMoney();
    },
    // 清空按钮点击
    clearData() {
      this.tableData3 = [];
      this.tableData3.push({
        id: 1,
        key: "",
        drugList: [],
        search_i: 0,
        showSearch: false,
        page: 1,
        loadMore: true
      });
      this.page = 1;
      this.countNowRecipeMoney();
    },
    load() {
      let key = this.tableData3[this.index].key;
      let page = this.tableData3[this.index].page;
      let loadMore = this.tableData3[this.index].loadMore;
      let index = this.tableData3[this.index].id - 1;
      if (loadMore) {
        page += 1;
      }
      // console.log('思辨')

      this.getTableDrug(key, page, index, loadMore);
    },
    // 搜索展示药品
    searchDrug(e, scope) {
      this.tableData3[scope.$index].key = e;
      this.page = scope.row.page;

      let index = scope.$index;
      this.index = index;
      this.tableData3[index].id = index + 1;
      this.tableData3[index].key = e;
      this.tableData3[index].search_i = 0;
      // debounce(this.getTableDrug(e, 1, scope.$index), 1000)
      debounce(this.getTableDrug(scope.row.key, 1, index), 10000);
    },
    // 药品名称 输入框失去焦点
    drugBlur(e, scope) {
      return this.drugBlur1(e, scope)
    },
    drugBlur1(e, scope) {
      medicineBlurTimer = setTimeout(() => {
        this.tableData3[scope.row.id - 1].key = "";
        this.tableData3[scope.row.id - 1].showSearch = false;
        let ids = document.querySelectorAll("#operate2");
        ids.forEach((item, index) => {
          item.style["z-index"] = "99";
        });
      }, 500);
    },
    // 监听键盘事件
    drugDown(e, scope) {
      let totalData = this.tableData3;
      // 如果到最后一个 判断是否需要分页
      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.tableData3 = totalData.filter((item, index) => {
        // this.getSelectType('中药药品用法', index)
        return (item.id = index + 1);
      });

      this.$forceUpdate();
    },
    drugUp(e, scope) {
      let totalData = this.tableData3;
      // 如果到最后一个 判断是否需要分页
      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.tableData3 = totalData.filter((item, index) => {
        // this.getSelectType('中药药品用法', index)
        return (item.id = index + 1);
      });
    },
    drugEnter(scope) {
      this.chooseDis3(
        scope,
        scope.row.search_i,
        scope.row.drugList[scope.row.search_i]
      );
    },
    clickName(scope) {
      if (medicineBlurTimer) clearTimeout(medicineBlurTimer);

      const index = scope.$index;
      scope.row.id = index + 1;
      this.tableData3[index].id = index;
      this.tableData3[index].key = scope.row.name;
      this.tableData3[index].showSearch = true;
      this.tableData3[index].search_i = 0;

      this.tableData3 = this.tableData3.map(item => ({...item}));

      debounce(this.getTableDrug(scope.row.key, 1, index), 10000);
      setTimeout(() => {
        console.log(document.querySelectorAll("#searchD1" + scope.row.id));
        document.querySelectorAll("#searchD1" + scope.row.id)[1].focus();
      }, 500);
    },
    doseEnter(scope) {
      if (scope.row.id == this.tableData3.length - 1) {
        // console.log(document.querySelectorAll('#searchD1' + (scope.row.id + 1)), '啦啦啦')
        document.querySelectorAll("#searchD1" + (scope.row.id + 1))[1].focus();
      } else {
        try {
          this.tableData3.forEach(item => {
            if (item.name && !item.dose && scope.row.id < item.id) {
              document.querySelectorAll("#dose1" + item.id)[0].focus();
              throw Error();
            }
            if (!item.name) {
              // console.log(document.querySelectorAll('#searchD1' + item.id), '啦啦啦')
              document.querySelectorAll("#searchD1" + item.id)[1].focus();
              throw Error();
            }
          });
        } catch (error) {}
      }
    },
    // 选中中成药方
    chooseDis3(scope, index, item) {
      if (!item) return;
      const totalData = this.tableData3;
      const i = totalData.findIndex(t => t.medid === item.pid);
      const oneself = i === scope.row.id - 1;
      if (i !== -1 && !oneself) {
        this.$message.warning("请勿重复添加药品");
        return;
      }

      let obj = {
        color: item.kc == 0 ? "red" : "#000",
        id: scope.row.id,
        name: item.ypmc,
        spec: item.gg, // 规格
        timesQuan: item.timesQuan || item.ycjl || "", // 次用量
        timesUnit: item.timesUnit || item.ycjldw || "", // 次用量单位
        dose: scope.row.color === "red" || oneself ? null : "", // 剂量 数量
        doseUnit: item.doseUnit || item.jldw || '', // 数量单位
        unit: item.dw, // 单位
        // unit: item.bzdw, // 单位
        // usage: item.usagestr, // 用法
        usage: item.usage || "",
        // price: item.lsjg,
        price: item.price,
        total: 0,
        inventory: item.kc, // 库存
        key: "",
        search_i: index,
        medid: item.pid, // 药品id
        showSearch: false,
        originname: item.cdmc // 产地名称
      };
      if (obj.dose == null) {
        obj.dose = scope.row.dose;
      }


      const m = Object.assign(totalData[scope.$index], obj);
      this.tableData3[scope.$index] = m;

      if (scope.$index == this.tableData3.length - 1) {
        this.tableData3.push({
          search_i: 0,
          key: "",
          page: 1,
          drugList: [],
          usageList: [],
          numList: [],
          timeList: [],
          loadMore: true
        });
      }

      this.tableData3.filter((item, index) => {
        this.getSelectType("中药制剂药品用法", index);
        this.getSelectType("中药制剂服药时间", index);
        this.getSelectType("中药制剂频次", index);
        return (item.id = index + 1);
      });
      setTimeout(() => {
        let ids = document.querySelectorAll("#dose1" + scope.row.id);
        // console.log(ids, 'ids');
        // ids[0].style.color = 'red'
        document.querySelectorAll("#dose1" + scope.row.id)[0].focus();
      }, 500);
    },

    // 表三 添加
    addDrug3(scope) {
      let tableData3 = this.tableData3;
      if (scope.$index == tableData3.length - 1) {
        this.tableData3.push({
          key: "",
          page: 1,
          drugList: [],
          usageList: [],
          numList: [],
          timeList: [],
          loadMore: true,
          search_i: 0,
          showSearch: false
        });
        this.getSelectType("中药制剂药品用法", this.tableData3.length - 1);
        this.getSelectType("中药制剂服药时间", this.tableData3.length - 1);
        this.getSelectType("中药制剂频次", this.tableData3.length - 1);
      } else {
        let data = tableData3.splice(scope.row.id);

        tableData3.push({
          id: 2,
          drugList: [],
          page: 1,
          key: "",
          usageList: [],
          numList: [],
          timeList: [],
          loadMore: true,
          search_i: 0,
          showSearch: false
        });
        tableData3 = tableData3.concat(data);

        this.tableData3 = tableData3;

        this.getSelectType("中药制剂药品用法", scope.$index + 1);
        this.getSelectType("中药制剂服药时间", scope.$index + 1);
        this.getSelectType("中药制剂频次", scope.$index + 1);
      }

      this.tableData3.filter((item, index) => {
        return (item.id = index + 1);
      });
    },
    // 表三 删除
    deleteDrug3(scope) {
      if (this.tableData3.length > 1) {
        this.tableData3.splice(scope.$index, 1);
        this.tableData3.filter((item, index) => {
          return (item.id = index + 1);
        });

        this.countNowRecipeMoney();
      }
      if (this.tableData3.length === 0) this.$emit('clear');
    },
    // 修改省的数据
    proC(e) {
      // console.log(e)
      this.city = "";
      this.area = "";
      this.getArea(e, 1);
    },
    cityC(e) {
      this.area = "";
      this.getArea(e, 2);
    },
    // 合并表格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (!row.name) {
      //     return [1, 14]
      // }
    },
    submit() {
      this.$emit("submit");
    },
    // 获取包装单位
    async _getBzdw() {
      let res = await getBzdw();
      if (res.ResultCode == 0) {
        this.bzdwList = res.Data;
      }
    },
    // 通过中药类型获取药房id
    async getPharmacyID() {
      return;
      let res = await getPharmacyID({
        type: "6"
      });
      if (res.ResultCode == 0) {
        if (res.ResultInfo == "") {
          this.$message({
            showClose: false,
            message: "当前类型无法开药,请切换类型",
            type: "error"
          });
          return;
        }
        this.pharmacyID = res.ResultInfo;
        // this.changePharmacy()
        this.getPharmacyMsg(res.ResultInfo);
      }
    },
    async customerQuery() {
      let res = await customerQuery({
        type: 2
      });
      if (res.ResultCode == 0) {
        let pharmacyTypes = [];
        let pharmacyTypeGroup = [];
        res.Data.forEach(item => {
          item.dosageForms = item.dosageForms.split(",");
          item.dosageForms.forEach(item1 => {
            pharmacyTypes.push({
              type: item1,
              ptype: item.pid + "@" + item1,
              name: item.displayName + (item.dosageForms.length > 1 ? ` (${this.getRadioName(item1)})` : '')
            });
          });
          if (item.dosageForms.length > 1) {
            pharmacyTypeGroup.push({
              name: item.displayName,
              options: item.dosageForms.map(item1 => {
                return {
                  type: item1,
                  ptype: item.pid + "@" + item1,
                  name: this.getRadioName(item1),
                }
              })
            })
          } else if (item.dosageForms.length === 1) {
            pharmacyTypeGroup.push({
              name: item.displayName,
              options: item.dosageForms.map(item1 => {
                return {
                  type: item1,
                  ptype: item.pid + "@" + item1,
                  name: item.displayName,
                }
              })
            })
          }
        });
        this.pharmacyList = res.Data;
        this.pharmacyTypes = pharmacyTypes;
        this.pharmacyTypeGroup = pharmacyTypeGroup;
      }
    },
    async changePharmacy(type, val) {
      if (!type) type = this.recipe.lastType || '';
      if (!val) val = this.recipe.radio || '';
      this.recipe.radio = val;
      const loading = this.$loading({
        lock: true,
        text: "处理中,请稍后....",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      const drugIds = this.tableData3.filter(item => item.name).map(item => `${ item.medid }&${ item.doce || '' }&${ item.usage || '' }`);
      val = val.split("@")[1];
      type = type.split("@")[1];
      this.recipe.pharmacyID = this.recipe.radio.split("@")[0];

      let params = {
        type: val,
        pharmacyid: this.recipe.pharmacyID,
        drugIds,
        preType: this.recipe.preType,
        oldType: type
      };
      let res = await changePharmacy(params).catch(err => {});
      if (res.ResultCode == 0) {
        for (const item of res.Data) {
          if (typeof item === 'string') {
            const item1 = this.tableData3.find(item1 => item1.medid === item);
            if (item1) item1.color = "red";
          } else if (item && typeof item === 'object') {
            const item1 = this.tableData3.find(item1 => item1.medid === item.oldYpid);
            if (item1) {
              item1.medid = item.pid; // 药品id
              item1.name = item.ypmc;
              item1.spec = item.gg; // 规格
              item1.unit = item.dw; // 单位
              item1.price = item.price;
              item1.inventory = item.kc; // 库存
              item1.originname = item.cdmc; // 产地名称
              if (item.timesQuan)  item1.timesQuan = item.timesQuan;
              if (item.timesUnit)  item1.timesUnit = item.timesUnit;
              if (item.dose)  item1.dose = item.dose;
              if (item.doseUnit)  item1.doseUnit = item.doseUnit;
              if (item.usage)  item1.usage = item.usage;

              item1.total = item1.price * (item.dose || 0);
            }
          }
        }
        this.tableData3 = this.tableData3.map(item => ({...item}));
        this.recipe.lastType = this.recipe.radio; // 存储这一次的 药房类型
        setTimeout(() => {
          this.countNowRecipeMoney();
        }, 500);
      }
      loading.close();
    },
    async getAddressForHospital() {
      let res = await getAddressForHospital({});
      if (res.ResultCode == 0) {
        this.province = res.Data.province;
        this.city = res.Data.city;
        this.area = res.Data.district;
        this.bottom_form.address = res.Data.adressdetail;

        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);
        this.bottom_form.province = res.Data.province;
        this.bottom_form.city = res.Data.city;
        this.bottom_form.area = res.Data.district;
      }
    },
    // 获取表格药品列表
    async getTableDrug(key, page, index, load = true) {
      if (medicineBlurTimer) clearTimeout(medicineBlurTimer);
      if (!load) return;

      let type = this.recipe.radio.split("@")[1];
      let params = {
        key: key,
        limit: 5,
        page: page,
        type,
        pharmacyid: this.recipe.pharmacyID
      };
      let res = await getTableDrug(params);
      if (res.ResultCode == 0) {
        res.Data.Items.filter(item => {
          return (item.price = Number(Number(item.price).toFixed(3)));
        });
        if (page <= res.Data.TotalPageCount) {
          if (page == 1) {
            this.tableData3[index].drugList = res.Data.Items;
          } else {
            this.tableData3[index].drugList = [
              ...this.tableData3[index].drugList,
              ...res.Data.Items
            ];
            this.tableData3[index].page += 1;
          }
        } else if (index >= 0) {
          this.tableData3[index].loadMore = false;
        }
        this.tableData3 = this.tableData3.map(item => ({...item}));
      }
    },
    // 获取省数据
    async getProver() {
      let res = await getProver();
      if (res.ResultCode == 0) {
        this.provinceList = res.Data;
      }
    },
    // 获取市数据
    async getArea(code, type) {
      let res = await getArea(code);
      if (res.ResultCode == 0) {
        if (type == 1) {
          this.cityList = res.Data;
        } else {
          this.areaList = res.Data;
        }
      }
    },
    // 根据表格获取数据类型
    async getSelectType(data, index) {
      let res = await getSelectType(data);

      if (data == "中药制剂药品用法") {
        this.tableData3[index].usageList = res.Data;
        this.usageList = res.Data;
      } else if (data == "中药制剂服药时间") {
        this.tableData3[index].timeList = res.Data;
        this.timeList = res.Data;
      } else if (data == "中药制剂频次") {
        this.tableData3[index].numList = res.Data;
        this.numList = res.Data;
      }
    },
    // 获取制膏费用
    async getPharmacyMsg(data) {
      let res = await getPharmacyMsg(data);
      if (res.ResultCode == 0) {
        this.moneyMsg = res.Data;
      }
    },
    // 获取患者地址信息
    async getPatAddress() {
      if (!this.getPatiensInfo.basisPatient.pid) return;
      let res = await getPatAddress({
        patId: this.getPatiensInfo.basisPatient.pid
      });
      if (res.ResultCode == 0) {
        this.bottom_form.address = res.Data.detailadress;
        this.bottom_form.savename = res.Data.name;
        this.bottom_form.phone = res.Data.phone;
        this.province = res.Data.province;
        this.city = res.Data.city;
        this.area = res.Data.district;

        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);
      }
    },
    // 获取医共体计算方式配置
    async getDataByKey(key = "automaticReview") {
      /*
        countMenthod:计费方式
        automaticReview:是否开启自动审核
      */

      let res = await getDataByKey({
        key: key,
        organizationid: this.getuserinfo.organizationid
      });
      if (res.ResultCode == 0) {
        if (key == "countMenthod") {
          if (res.ResultInfo == "0") {
            this.countWay = "1";
          } else if (res.ResultInfo == "1") {
            this.countWay = "2";
          } else if (res.ResultInfo == "2") {
            this.countWay = "3";
          }
        }

        if (key == "automaticReview") {
          this.isAutoCheck = res.ResultInfo;
        }
      }
    }
  },
  computed: {
    editable() {
      switch (+this.isAutoCheck) {
        case 0:
          /**
           * v-if="isAutoCheck==0"
           * v-if="prescribed==0 || !prescribed"
           * 保存处方
           */
          return +this.prescribed === 0
        case 1:
          /**
           * v-if="isAutoCheck==1"
           * v-if="paystate==0 || !paystate"
           * 保存处方
           */
          return +this.paystate === 0
        default:
          return false
      }
    },
    saveable() /* 父组件 获取 */ {
      return this.editable && this.tableData3.some(item => item.name)
    },
    ...mapGetters(["getuserinfo", "getPatiensInfo"])
  }
};
</script>
<style lang="scss" scoped>
.t-con-radio {
  flex: 1;
  padding-bottom: 5px;
  border-bottom: 1px solid #eaeaea;

  ::v-deep .el-radio__label {
    font-size: 16px;
  }
}

.t-radio-title {
  width: 82px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.t-radio-group {
  flex: 1;
}

.t-radio-group2 {
  padding: 4px 8px;

  &.multiple {
    border: 2px dashed #5386f6;

    > label:first-of-type {
      margin-right: 8px;
      color: rgba(0, 0, 0, 0.6);

      &:after {
        margin-left: 2px;
        content: ":";
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@import "../style/common.scss";

.center-table {
  border: 2px solid #dedede;
  padding: 7px 0 0;
  // min-height: 600px;
  // position: relative;

  .table-header {
    padding-bottom: 7px;
    border-bottom: 2px solid #dedede;

    .table-label {
      .label-item {
        cursor: pointer;
        width: 134px;
        border-right: 2px solid #eaeaea;

        div {
          color: #666;
          transform: rotate(45deg);
          font-size: 28px;
          margin-left: 12px;
          margin-top: 1px;
        }
      }

      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .l_active {
        color: #5386f6;
      }
    }
  }

  .add-presc {
    width: 70px;
    height: 26px;
    background: #ffae45;
    border-radius: 4px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    margin-right: 20px;
  }

  .table-show {
    width: 100%;

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

    .table-left-body {
      width: 49.5%;
      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;
  }

  .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: relative;
      top: 2px;
      left: -48px;
      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;
        }
      }
    }
  }

  .table-bottom {
    // position: absolute;
    // bottom: 0;
    // right: 0;
    // left: 0;\
    padding: 0 5px;
    margin-top: 10px;
    // margin-top: 66px;

    .header-about {
      .item {
        margin-right: 8px;
        margin-bottom: 8px;

        span {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        .div1 {
          width: 100px;
        }

        .div2 {
          width: 74px;
        }

        .city1 {
          width: 120px;
        }

        .div3 {
          width: 92px;
        }

        .div4 {
          width: 160px;
        }

        .input-suffix {
          line-height: 36px;
        }
      }

      .right {
        width: 70px;
        height: 26px;
        background: #ffae45;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }

  .table-b-bottom {
    padding: 5px 5px;
    border-top: 2px solid #dedede;
    margin-top: 10px;

    .t-b-l-item {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-right: 20px;

      span {
        color: #ff6245;
      }
    }

    .t-b-b-right {
      div {
        width: 130px;
        height: 46px;
        background: #ffae45;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }

      .bg-green {
        background: #5386f6;
        margin-left: 20px;
      }
    }
  }

  // 中成药 和适宜技术配方
  .chinese_medicine {
    padding: 5px 5px 0;

    .clearer {
      width: 84px;
      height: 28px;
      background: #ffae45;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      cursor: pointer;
      margin-bottom: 5px;
      // float: right;
    }

    .c-m-table {
      width: 100%;
      // overflow: hidden;
      // border: 1px solid #dedede;
      // height: 336px;
      // overflow: auto;

      .table-body {
        border: 1px solid #dedede;
        overflow: auto;
      }

      .unit {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        // margin-left: 10px;
      }

      .input {
        width: 60px;
      }
    }
  }
}

.table-show {
  width: 100%;

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

  .table-left-body {
    width: 49.5%;
    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;
      }
    }
  }
}

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

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

  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: relative;
    top: 2px;
    left: -48px;
    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;
      }
    }
  }
}

.table-bottom {
  // position: absolute;
  // bottom: 0;
  // right: 0;
  // left: 0;\
  padding: 0 37px;
  margin-top: 241px;

  .header-about {
    .item {
      margin-right: 20px;
      margin-bottom: 10px;

      span {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .div1 {
        width: 120px;
      }

      .div2 {
        width: 74px;
      }

      .city1 {
        width: 120px;
      }

      .div3 {
        width: 92px;
      }

      .div4 {
        width: 160px;
      }

      .input-suffix {
        line-height: 36px;
      }
    }

    .right {
      width: 70px;
      height: 26px;
      background: #ffae45;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
}

.table-b-bottom {
  padding: 10px 27px;
  border-top: 2px solid #dedede;
  margin-top: 10px;

  .t-b-l-item {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-right: 20px;

    span {
      color: #ff6245;
    }
  }

  .t-b-b-right {
    div {
      width: 130px;
      height: 46px;
      background: #ffae45;
      border-radius: 4px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      cursor: pointer;
    }

    .bg-green {
      background: #5386f6;
      margin-left: 20px;
    }
  }
}

.table-choose3 {
  z-index: 99;
  // width: 332px;
  width: 532px;
  height: 221px;
  background: #ffffff;
  border: 2px solid #d8d8d8;
  position: fixed;
  //top: 44px;
  //left: 84px;
  //margin-top: 19px;
  overflow: auto;

  .table-choose-h {
    background: rgba($color: #5386f6, $alpha: 0.1);

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

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

    div:nth-child(2),
    div:nth-child(3) {
      width: 173px;
    }
  }

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

    .td {
      background: rgba($color: #5386f6, $alpha: 0.1);
    }

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

    p:first-child {
      width: 115px;
    }
    p:nth-child(2),
    p:nth-child(3) {
      width: 173px;
    }
  }
}

.collapse ::v-deep .el-collapse-item__content {
  padding-bottom: 5px;
}

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

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

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

.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;
}

.city::v-deep .el-select input {
  padding: 0 20px 0 10px;
  // height: 32px;
}

.xuewei::v-deep .el-select {
  width: 100%;
}

.c-m-table::v-deep .el-table td {
  padding: 2px 0;
}

.c-m-table::v-deep .el-table th {
  padding: 2px 0;
}

.header-about::v-deep .el-checkbox {
  margin-right: 5px;
}

.header-about::v-deep .el-checkbox__label {
  padding-left: 5px;
}

.daijiao-check {
  margin-right: 8px;

  .img-body {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    font-size: 0;

    img {
      width: 14px;
      height: 14px;
    }
  }

  .active {
    border: 0px solid #5386f6;

    img {
      width: 17px;
      height: 17px;
    }
  }

  span {
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .center-table .chinese_medicine .clearer {
    height: 24px;
  }

  .c-m-table ::v-deep .el-table th {
    font-size: 12px;
  }

  .c-m-table ::v-deep .el-table td {
    font-size: 12px;
  }

  .center-table .table-bottom .header-about .item span {
    font-size: 12px;
  }

  .center-table .table-b-bottom .t-b-l-item {
    font-size: 12px;
  }

  .center-table .chinese_medicine .c-m-table .table-body {
    min-height: 360px;
  }
}
</style>