diagnosis.admin/src/views/business/SuitableTech.vue

<template>
  <div class="suitable-tech">
    <!-- 搜索项 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div style="flex:1">
        <div class="screening-form flex-vertical-center-l flex-wrap">
          <div class="screening-item flex-vertical-center-l">
            <span>方名：</span>
            <div class="input">
              <el-input
                size="mini"
                v-model="searchData.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>共享至：</span>
            <div class="input">
              <el-radio-group v-model="searchData.shareType" size="mini">
                <el-radio label="0">个人</el-radio>
                <el-radio label="1">科室</el-radio>
                <el-radio label="2">机构</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>{{ userNameLabel }}：</span>
            <div class="input">
              <el-input
                size="mini"
                v-model="searchData.userName"
                placeholder="请输入"
                clearable
              ></el-input>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>是否统建处方：</span>
            <div class="input">
              <el-select
                size="mini"
                v-model="searchData.isUnified"
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="screening-form flex-vertical-center-l flex-wrap">
          <div class="screening-item flex-vertical-center-l" v-if="searchData.isUnified === '1'">
            <span>医派：</span>
            <div class="input">
              <el-input
                size="mini"
                v-model="searchData.medicalSchool"
                placeholder="请输入"
                clearable
              ></el-input>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l" v-if="searchData.isUnified === '1'">
            <span>科室：</span>
            <div class="input">
              <el-input
                size="mini"
                v-model="searchData.department"
                placeholder="请输入"
                clearable
              ></el-input>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>涵盖项目：</span>
            <div class="input">
              <el-select
                size="mini"
                v-model="searchData.includeItem"
                placeholder="请搜索选择"
                clearable
                filterable
                :loading="projectLoading"
                loading-text="搜索中..."
                :filter-method="searchProject"
                @focus="searchProject('')"
              >
                <el-option
                  v-for="(item, idx) in projectOptions"
                  :key="idx"
                  :label="item.itemName"
                  :value="item.pid"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>功效与适应症：</span>
            <div class="input">
              <el-input
                size="mini"
                v-model="searchData.efficacy"
                placeholder="请输入"
                clearable
              ></el-input>
            </div>
          </div>

          <el-button type="primary" size="mini" @click="search()">搜索</el-button>
          <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
          <el-button type="primary" size="mini" @click="openEditDialog()">新增</el-button>
        </div>
      </div>
    </div>

    <!-- 列表表格数据 -->
    <div class="table">
      <div class="today-table">
        <div class="table-container">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            border
            height="100%"
            row-key="pid"
            :expand-row-keys="expandRows"
            @expand-change="handleExpandChange"
            v-loading="tableLoading"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="expand-table">
                  <el-table
                    :data="props.row.subList"
                    border
                    size="mini"
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="index"
                      label="序号"
                      width="60"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="treatItemName"
                      label="项目名称"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      label="分类"
                      width="120"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ formatTreatClass(scope.row.treatClass) }}
                      </template>
                    </el-table-column>
                    <el-table-column label="穴位/部位/耳穴/经络" align="center">
                      <template slot-scope="scope">
                        {{ formatDetailList(scope.row) }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="isUpdate"
                      label="是否可修改"
                      width="100"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.isUpdate === "1" ? "是" : "否" }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="index"
              label="序号"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="方名"
              min-width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="effect"
              label="功效与适应症"
              min-width="180"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="provenance"
              label="处方出处"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="showType"
              label="共享状态"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.showType === "0"
                    ? "个人"
                    : scope.row.showType === "1"
                    ? "科室"
                    : scope.row.showType === "2"
                    ? "机构"
                    : "-"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="purposeType"
              label="是否统建处方"
              width="110"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.purposeType === "1" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="createUserName"
              label="创建者"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <div class="flex-center">
                  <div class="find-detail find-fill" :class="{ 'is-disabled': scope.row.createUser != currentUserId }" @click="scope.row.createUser == currentUserId && openEditDialog(scope.row)">编辑</div>
                  <div class="find-detail find-fill1" :class="{ 'is-disabled': scope.row.createUser != currentUserId }" @click="scope.row.createUser == currentUserId && handleDelete(scope.row)">删除</div>
                  <div class="find-detail find-fill2" @click="handleView(scope.row)">查看</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex-vertical-center-r today-page">
          <el-pagination
            background
            layout=" prev, pager, next, jumper, total"
            :total="total"
            :page-size="limit"
            @current-change="sizeC($event)"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增/编辑弹窗 -->
    <popup
      distanceTop="5vh"
      fullscreen
      :showBtns="false"
      :showDialog.sync="showEditDialog"
      :loading="editLoading"
      :title="editData.pid ? '编辑适宜技术协定方' : '新增适宜技术协定方'"
    >
      <div slot="body" class="dialog-body-wrapper">
        <div class="dialog-back-btn" @click="handleEditBack">返回</div>
        <div class="dialog-scroll-area">
          <div class="dialog-form flex-wrap">
            <!-- 第一行：方名、中医病名、共享至、处方出处、证型、治法 -->
            <div class="form-item flex flex-col-center form-item-sixth">
              <div class="name"><span style="color: red">*</span> 方名：</div>
              <div class="input">
                <el-input
                  size="mini"
                  v-model="editData.name"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">中医病名：</div>
              <div class="input">
                <el-popover placement="bottom" width="180" trigger="focus" :close-delay="100">
                  <el-input
                    :class="{invalid: editData.chineseDiseaseName && (!editData.disCode)}"
                    size="mini"
                    slot="reference"
                    :placeholder="key1?key1:'中医病名'"
                    v-model="key1"
                    ref="zybm"
                    @input="getDiseaseList(key1)"
                    @focus="handleFocus('bm')"
                    @keydown.enter.native="handleEnter('bm')"
                  >
                    <div slot="suffix" class="suffix">
                      <i class="el-icon-arrow-down" v-if="!key1"></i>
                      <i class="el-icon-circle-close" v-else @click="clearBm"></i>
                    </div>
                  </el-input>
                  <ul class="option-list">
                    <li
                      v-for="item in diseaseList"
                      :key="item.$uid"
                      :class="{ active: editData.chineseDiseaseName === item.$name }"
                      @click="handleBm(item)"
                    >{{ item.$name }}</li>
                  </ul>
                </el-popover>
              </div>
            </div>
             <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">证型：</div>
              <div class="input">
                <el-popover placement="bottom" width="180" trigger="focus" :close-delay="100">
                  <el-input
                    :class="{invalid: editData.symptomName && !editData.symptomCode}"
                    size="mini"
                    slot="reference"
                    :placeholder="key2?key2:'中医证型'"
                    v-model="key2"
                    ref="zhengxing"
                    @input="getSymptomList(key2)"
                    @focus="handleFocus('zx')"
                    @keydown.enter.native="handleEnter('zx')"
                  >
                    <div slot="suffix" class="suffix">
                      <i class="el-icon-arrow-down" v-if="!key2"></i>
                      <i class="el-icon-circle-close" v-else @click="clearZx"></i>
                    </div>
                  </el-input>
                  <ul class="option-list">
                    <li
                      v-for="item in symptomList"
                      :key="item.$uid"
                      :class="{ active: editData.symptomName === item.$name, matched: item.isMatched }"
                      @click="handleZx(item)"
                    >{{ item.$name }}</li>
                  </ul>
                </el-popover>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">治法：</div>
              <div class="input">
                <el-popover placement="bottom" width="180" trigger="focus" :close-delay="100" v-model="popoverZF">
                  <el-input
                    :class="{invalid: editData.therapyName && !editData.therapyCode}"
                    size="mini"
                    slot="reference"
                    :placeholder="key3?key3:'中医治法'"
                    v-model="key3"
                    ref="zhifa"
                    @input="getTherapyList(key3)"
                    @focus="handleFocus('zf')"
                    @keydown.enter.native="handleEnter('zf')"
                  >
                    <div slot="suffix" class="suffix">
                      <i class="el-icon-arrow-down" v-if="!key3"></i>
                      <i class="el-icon-circle-close" v-else @click="clearZf"></i>
                    </div>
                  </el-input>
                  <ul class="option-list">
                    <li
                      v-for="item in therapyList"
                      :key="item.$uid"
                      :class="{ active: editData.therapyName === item.$name, matched: item.isMatched }"
                      @click="handleZf(item)"
                    >{{ item.$name }}</li>
                  </ul>
                </el-popover>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">共享至：</div>
              <div class="input">
                <el-select
                  size="mini"
                  v-model="editData.showType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="opt in shareOptions"
                    :key="opt.value"
                    :label="opt.label"
                    :value="opt.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">处方出处：</div>
              <div class="input">
                <el-input
                  size="mini"
                  v-model="editData.source"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
           
            <!-- 第二行：西医诊断、功效与适应症 -->
            <div class="form-item flex form-item-half" style="align-items: flex-start;">
              <span style="opacity:0">*</span>
              <div class="name">西医诊断：</div>
              <div class="input">
                <div class="western-disease-input-wrapper" @click="$refs.wdAutocomplete.focus()">
                  <el-tag
                    v-for="code in editData.westernDisease"
                    :key="code"
                    size="mini"
                    closable
                    @close="removeWesternDisease(code)"
                  >{{ westernDiseaseNameMap[code] || code }}</el-tag>
                  <el-autocomplete
                    ref="wdAutocomplete"
                    size="mini"
                    v-model="westernDiseaseSearch"
                    :fetch-suggestions="queryWesternDisease"
                    value-key="westname"
                    :placeholder="editData.westernDisease.length ? '' : '请搜索选择'"
                    clearable
                    :trigger-on-focus="true"
                    @select="onWesternDiseaseSelect"
                  >
                    <template slot-scope="{ item }">
                      <div :class="{ 'autocomplete-disabled': item._disabled }">
                        {{ item.westname }}
                      </div>
                    </template>
                  </el-autocomplete>
                </div>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-half">
              <span style="opacity:0">*</span>
              <div class="name">功效与适应症：</div>
              <div class="input">
                <el-input
                  size="mini"
                  v-model="editData.efficacy"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
            <!-- 第三行：统建处方 -->
            <div class="form-item flex flex-col-center">
              <span style="opacity:0">*</span>
              <el-checkbox v-model="editData.isUnified" class="unified-checkbox">统建处方</el-checkbox>
            </div>
            <div class="form-item flex flex-col-center" v-if="editData.isUnified">
              <div class="name"><span style="color: red">*</span> 医派：</div>
              <div class="input">
                <el-input
                  size="mini"
                  v-model="editData.medicalSchool"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center" v-if="editData.isUnified">
              <div class="name"><span style="color: red">*</span> 科室：</div>
              <div class="input">
                <el-input
                  size="mini"
                  v-model="editData.department"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
          </div>

          <!-- 配穴表格 -->
          <AcupointTable
            ref="acupointTable"
            v-model="editData.acupoints"
            :isEditable.sync="editData.isEditable"
            :detailTypes.sync="editData.detailTypes"
            :statistics.sync="editData.statistics"
            :showGuide="true"
            @save="onAcupointSave"
          />
        </div>
      </div>
    </popup>

    <!-- 查看详情弹窗 -->
    <popup
      distanceTop="5vh"
      fullscreen
      :showBtns="false"
      :showDialog.sync="showViewDialog"
      :loading="viewLoading"
      title="查看适宜技术协定方"
    >
      <div slot="body" class="dialog-body-wrapper">
        <div class="dialog-back-btn" @click="showViewDialog = false">返回</div>
        <div class="dialog-scroll-area">
          <div class="dialog-form flex-wrap">
            <!-- 第一行：方名、中医病名、证型、治法、共享至、处方出处 -->
            <div class="form-item flex flex-col-center form-item-sixth">
              <div class="name">方名：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.name" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">中医病名：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.disName" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">证型：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.synName" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <span style="opacity:0">*</span>
              <div class="name">治法：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.theName" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <div class="name">共享至：</div>
              <div class="input">
                <el-select size="mini" v-model="viewData.showType" disabled>
                  <el-option label="个人" value="0"></el-option>
                  <el-option label="科室" value="1"></el-option>
                  <el-option label="机构" value="2"></el-option>
                </el-select>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-sixth">
              <div class="name">处方出处：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.provenance" placeholder="-" disabled></el-input>
              </div>
            </div>

            <!-- 第二行：西医诊断、功效与适应症 -->
            <div class="form-item flex form-item-half" style="align-items: flex-start;">
              <span style="opacity:0">*</span>
              <div class="name">西医诊断：</div>
              <div class="input">
                <div class="western-disease-input-wrapper view-mode">
                  <el-tag
                    v-for="(name, idx) in viewWesternDiseaseNames"
                    :key="idx"
                    size="mini"
                  >{{ name }}</el-tag>
                </div>
              </div>
            </div>
            <div class="form-item flex flex-col-center form-item-half">
              <span style="opacity:0">*</span>
              <div class="name">功效与适应症：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.effect" placeholder="-" disabled></el-input>
              </div>
            </div>
            <!-- 第三行：统建处方 -->
            <div class="form-item flex flex-col-center">
              <span style="opacity:0">*</span>
              <el-checkbox v-model="viewData.isUnifiedChecked" class="unified-checkbox" true-label="1" false-label="0" disabled>统建处方</el-checkbox>
            </div>
            <div class="form-item flex flex-col-center" v-if="viewData.purposeType === '1'">
              <div class="name">医派：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.sectCategory" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center" v-if="viewData.purposeType === '1'">
              <div class="name">科室：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.sectDept" placeholder="-" disabled></el-input>
              </div>
            </div>
          </div>
          <SuitableTechDetail ref="techDetail" :detailData="viewData" :showGuide="true" />
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import popup from "@/components/Propup.vue";
import AcupointTable from "./components/AcupointTable.vue";
import SuitableTechDetail from "./components/SuitableTechDetail.vue";
import {
  getDiseaseListMethod,
  getSymptomListMethod,
  getTherapyListMethod,
} from "@/request/api";
import {
  getSuitableTechList,
  getSuitableTechInfo,
  saveSuitableTech,
  deleteSuitableTech,
  getMappedNondrugItemList,
} from "@/api/technology.js";
import { getXDiseaseName } from "@/api/knowledge.js";

export default {
  name: "SuitableTech",
  components: { popup, AcupointTable, SuitableTechDetail },
  data() {
    return {
      searchData: {
        name: "",
        shareType: "0",
        userName: "",
        isUnified: "",
        medicalSchool: "",
        department: "",
        includeItem: "",
        efficacy: "",
      },
      // 中医诊断下拉
      diseaseList: [],
      symptomList: [],
      therapyList: [],
      popoverZF: false,
      key1: "",
      key2: "",
      key3: "",
      westernDiseaseOptions: [],
      westernDiseaseNameMap: {},
      westernDiseaseSearch: "",
      westernDiseasePage: 1,
      westernDiseaseHasMore: true,
      projectOptions: [],
      // 下拉加载状态
      westernDiseaseLoading: false,
      projectLoading: false,
      // 表格数据
      tableData: [],
      tableLoading: false,
      expandRows: [],
      page: 1,
      limit: 10,
      total: 0,
      // 弹窗相关
      showEditDialog: false,
      editLoading: false,
      editData: {
        statistics: {},
        westernDisease: [],
        chineseDiseaseName: "",
        symptomName: "",
        therapyName: "",
      },
      // 查看详情弹窗
      showViewDialog: false,
      viewLoading: false,
      viewData: {},
    };
  },
  computed: {
    userNameLabel() {
      const map = {
        "0": "姓名",
        "1": "科室名称",
        "2": "机构名称",
      };
      return map[this.searchData.shareType] || "姓名";
    },
    currentUserId() {
      const userInfo = this.$store.state.user.userInfo || {};
      return userInfo.pid;
    },
    shareOptions() {
      const userInfo = this.$store.state.user.userInfo || {};
      const perm = String(userInfo.prescriptionSharePerm || "");
      const permList = perm.split(/[,，]/).map(v => v.trim());
      const has = (v) => permList.includes(String(v));
      const options = [];
      if (has(0)) options.push({ label: "个人", value: "0" });
      if (has(1) || has(2)) options.push({ label: "科室", value: "1" });
      if (has(3)) options.push({ label: "医疗机构", value: "2" });
      return options;
    },
    defaultShareType() {
      const options = this.shareOptions;
      return options.length ? options[0].value : "0";
    },
    viewWesternDiseaseNames() {
      if (!this.viewData.westernDiag) return [];
      return String(this.viewData.westernDiag).split(",").map((s) => s.trim()).filter(Boolean);
    },
  },
  created() {
    this.getList();
  },
  watch: {
    key1: {
      handler(value, oldVal) {
        if (this.key1 === "") {
          this.editData.chineseDisease = "";
          this.editData.chineseDiseaseName = "";
          this.editData.disCode = "";
        }
        if (!value && oldVal) {
          this.getSymptomList();
          this.getTherapyList();
        }
      }
    },
    key2: {
      handler(value, oldVal) {
        if (this.key2 === "") {
          this.editData.symptomName = "";
          this.editData.symptomid = "";
          this.editData.symptomCode = "";
        }
        if (!value && oldVal) {
          this.getSymptomList();
          this.getTherapyList();
        }
      }
    },
    key3: {
      handler(value, oldVal) {
        if (this.key3 === "") {
          this.editData.therapyName = "";
          this.editData.therapyCode = "";
        }
        if (!value && oldVal) {
          this.getTherapyList();
        }
      }
    },
  },
  methods: {
    /**
     * focus 事件
     * @param {'bm'|'zx'|'zf'} type
     */
    handleFocus(type) {
      if (type === 'bm' && this.diseaseList.length === 0) this.getDiseaseList(this.key1);
      else if (type === 'zx' && this.symptomList.length === 0) this.getSymptomList(this.key2);
      else if (type === 'zf' && this.therapyList.length === 0) this.getTherapyList(this.key3);
    },
    /**
     * enter事件
     * @param {'bm'|'zx'|'zf'} type
     */
    handleEnter(type) {
      if (type === 'bm' && this.diseaseList.length) this.handleBm(this.diseaseList[0]);
      else if (type === 'zx' && this.symptomList.length) this.handleZx(this.symptomList[0]);
      else if (type === 'zf' && this.therapyList.length) this.handleZf(this.therapyList[0]);
    },
    //获取病名数据
    async getDiseaseList(keyword = '') {
      const {total, list} = await getDiseaseListMethod(1, 9999, {keyword}).catch(() => ({total: 0, list: []}));
      this.diseaseList = list;
    },
    // 病名选中
    async handleBm(item) {
      this.editData.chineseDisease = String(item.disid);
      this.editData.chineseDiseaseName = item.$name;
      this.editData.disCode = item.$code;
      this.key1 = item.$name;
      this.$refs.zybm.blur();

      this.clearZx();

      if (!this.key1) return;
      this.$refs.zhengxing && this.$refs.zhengxing.focus();
      await this.getSymptomList();
    },
    // 清空病名
    clearBm() {
      this.editData.chineseDisease = "";
      this.editData.chineseDiseaseName = "";
      this.editData.disCode = "";
      this.key1 = "";
      this.clearZx();
    },
    // 获取证型数据
    async getSymptomList(keyword = '') {
      const {total, list} = await getSymptomListMethod(1, 9999, {
        keyword,
        disid: this.editData.chineseDisease,
        disCode: this.editData.disCode,
      }).catch(() => ({total: 0, list: []}));
      this.symptomList = list;
    },
    // 证型选中
    async handleZx(item) {
      this.editData.symptomName = item.$name;
      this.editData.symptomid = item.$code;
      this.editData.symptomCode = item.$code;
      this.key2 = item.$name;
      this.$refs.zhengxing.blur();

      this.clearZf();
      this.$refs.zhifa && this.$refs.zhifa.focus();
      await this.getTherapyList();
    },
    // 清空证型
    clearZx() {
      this.editData.symptomName = "";
      this.editData.symptomid = "";
      this.editData.symptomCode = "";
      this.key2 = "";
      this.clearZf();
    },
    /**
     * 获取治法
     * @param keyword
     * @return {Promise<void>}
     */
    async getTherapyList(keyword = '') {
      const {total, list} = await getTherapyListMethod(1, 9999, {
        keyword,
        disCode: this.editData.disCode,
        symptomCode: this.editData.symptomid,
        symid: this.editData.symptomid,
      }).catch(() => ({total: 0, list: []}));
      this.therapyList = list;
    },
    // 治法选中
    handleZf(item) {
      this.editData.therapyName = item.$name;
      this.editData.therapyCode = item.$code;
      this.key3 = item.$name;
      this.$nextTick(() => {
        this.$refs.zhifa && this.$refs.zhifa.blur();
        this.popoverZF = false;
      });
    },
    // 清空治法
    clearZf() {
      this.editData.therapyName = "";
      this.editData.therapyCode = "";
      this.key3 = "";
    },
    // ========== 西医诊断搜索（分页） ==========
    async searchWesternDisease(query) {
      this.westernDiseasePage = 1;
      this.westernDiseaseHasMore = true;
      this._wdQuery = query || "";
      this.westernDiseaseLoading = true;
      try {
        const pinyin = /^[A-Za-z]+$/g;
        const serchtype = query && pinyin.test(query) ? "1" : "";
        const res = await getXDiseaseName({
          pageid: 1,
          pagesize: 200,
          keyword: query || "",
          serchtype,
        });
        if (res.code == 0) {
          const list = res.data?.wests || [];
          // 保留已选中但不在搜索结果中的选项
          const selectedCodes = Array.isArray(this.editData.westernDisease)
            ? this.editData.westernDisease
            : [];
          const resultCodes = new Set(list.map((i) => i.westcode));
          const preserved = selectedCodes
            .filter((code) => !resultCodes.has(code))
            .map((code) => ({
              westcode: code,
              westname: this.westernDiseaseNameMap[code] || code,
            }));
          this.westernDiseaseOptions = [...preserved, ...list];
          this.westernDiseaseHasMore = list.length >= 200;
          list.forEach((item) => {
            if (item.westcode && item.westname) {
              this.westernDiseaseNameMap[item.westcode] = item.westname;
            }
          });
        }
      } catch (e) {
        console.error("搜索西医诊断失败", e);
      } finally {
        this.westernDiseaseLoading = false;
      }
    },
    async loadMoreWesternDisease() {
      if (this.westernDiseaseLoading || !this.westernDiseaseHasMore) return;
      this.westernDiseasePage++;
      this.westernDiseaseLoading = true;
      try {
        const query = this._wdQuery || "";
        const pinyin = /^[A-Za-z]+$/g;
        const serchtype = query && pinyin.test(query) ? "1" : "";
        const res = await getXDiseaseName({
          pageid: this.westernDiseasePage,
          pagesize: 200,
          keyword: query,
          serchtype,
        });
        if (res.code == 0) {
          const list = res.data?.wests || [];
          this.westernDiseaseOptions = this.westernDiseaseOptions.concat(list);
          this.westernDiseaseHasMore = list.length >= 200;
          list.forEach((item) => {
            if (item.westcode && item.westname) {
              this.westernDiseaseNameMap[item.westcode] = item.westname;
            }
          });
        }
      } catch (e) {
        console.error("加载更多西医诊断失败", e);
      } finally {
        this.westernDiseaseLoading = false;
      }
    },
    onWesternDiseaseVisible(show) {
      if (!show) {
        const wrap = document.querySelector(
          ".western-disease-select .el-scrollbar__wrap",
        );
        if (wrap && this._wdScroll) {
          wrap.removeEventListener("scroll", this._wdScroll);
        }
        return;
      }
      // 首次打开且无数据时加载初始列表
      if (this.westernDiseaseOptions.length === 0) {
        this.searchWesternDisease("");
      }
      this.$nextTick(() => {
        const wrap = document.querySelector(
          ".western-disease-select .el-scrollbar__wrap",
        );
        if (wrap) {
          wrap.addEventListener(
            "scroll",
            (this._wdScroll = () => {
              if (wrap.scrollHeight - wrap.scrollTop <= wrap.clientHeight + 5) {
                this.loadMoreWesternDisease();
              }
            }),
          );
        }
      });
    },
    async queryWesternDisease(queryString, cb) {
      await this.searchWesternDisease(queryString);
      if (this.westernDiseaseOptions.length > 0) {
        cb(this.westernDiseaseOptions);
      } else {
        cb([{ westname: "暂无数据", _disabled: true }]);
      }
    },
    onWesternDiseaseSelect(item) {
      if (item._disabled) {
        this.$nextTick(() => {
          this.westernDiseaseSearch = "";
        });
        return;
      }
      const code = String(item.westcode);
      if (!this.editData.westernDisease.includes(code)) {
        this.editData.westernDisease.push(code);
        this.westernDiseaseNameMap[code] = item.westname;
        this.updateWesternDiseaseName();
      }
      this.westernDiseaseSearch = "";
      this.$nextTick(() => {
        this.searchWesternDisease("");
      });
    },
    removeWesternDisease(code) {
      this.editData.westernDisease = this.editData.westernDisease.filter((c) => c !== code);
      this.updateWesternDiseaseName();
    },
    updateWesternDiseaseName() {
      const names = this.editData.westernDisease
        .map((code) => this.westernDiseaseNameMap[code] || "")
        .filter(Boolean);
      this.editData.westernDiseaseName = names.join(",");
    },
    // ========== 涵盖项目模糊搜索 ==========
    async searchProject(query) {
      this.projectLoading = true;
      try {
        const res = await getMappedNondrugItemList({
          pageNum: 1,
          pageSize: 100,
          itemName: query || undefined,
        });
        if (res.ResultCode === 0) {
          this.projectOptions = res.Data?.Items || res.Data || [];
        }
      } catch (e) {
        console.error("搜索涵盖项目失败", e);
      } finally {
        this.projectLoading = false;
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
    clearFilter() {
      this.searchData = {
        name: "",
        shareType: "0",
        userName: "",
        isUnified: "",
        medicalSchool: "",
        department: "",
        includeItem: "",
        efficacy: "",
      };
      this.getList();
    },
    sizeC(e) {
      this.page = e;
      this.getList();
    },
    handleExpandChange(row, expandedRows) {
      this.expandRows = expandedRows.map((item) => item.pid);
    },
    formatTreatClass(val) {
      const map = {
        1: "艾灸疗法",
        2: "非艾·灸法",
        3: "拔罐疗法",
        4: "针刺疗法",
        5: "敷熨熏浴",
        6: "推拿疗法",
        7: "耳穴疗法",
        8: "刮痧疗法",
        9: "物理疗法",
        10: "中医肛肠",
        11: "中医微创",
        12: "其他疗法",
        194: "中医骨伤",
      };
      return map[val] || val || "-";
    },
    formatDetailList(row) {
      const parts = [];
      const extractNames = (arr) => {
        if (!Array.isArray(arr) || !arr.length) return "";
        return arr
          .map((item) => item.name || "")
          .filter(Boolean)
          .join("、");
      };
      const pointNames = extractNames(row.detailPoint);
      if (pointNames) parts.push("穴位: " + pointNames);
      const meridianNames = extractNames(row.detailMeridian);
      if (meridianNames) parts.push("经络: " + meridianNames);
      const earNames = extractNames(row.detailEarPoint);
      if (earNames) parts.push("耳穴: " + earNames);
      const bodyNames = extractNames(row.detailBodyPart);
      if (bodyNames) parts.push("部位: " + bodyNames);
      const otherNames = extractNames(row.detailOther);
      if (otherNames) parts.push("其他: " + otherNames);
      return parts.join("；") || "-";
    },
    handleEditBack() {
      if (!this.editData.pid) {
        this.$confirm("协定方未保存，返回则会清空当前编辑内容", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.showEditDialog = false;
          })
          .catch(() => {});
      } else {
        this.showEditDialog = false;
      }
    },
    async openEditDialog(row) {
      if (row) {
        // 调用详情接口获取完整数据
        this.editLoading = true;
        let detail = row;
        try {
          const res = await getSuitableTechInfo(row.pid);
          if (res.ResultCode === 0) {
            detail = res.Data || row;
          }
        } catch (e) {
          console.error("获取详情失败", e);
        } finally {
          this.editLoading = false;
        }

        // 初始化搜索关键字，用于回显
        this.key1 = detail.disName || "";
        this.key2 = detail.synName || "";
        this.key3 = detail.theName || "";
        // 加载下拉列表数据
        if (this.key1) this.getDiseaseList(this.key1);
        if (this.key2) this.getSymptomList(this.key2);
        if (this.key3) this.getTherapyList(this.key3);
        if (detail.westernCode) {
          const codes = String(detail.westernCode).split(",");
          const names = detail.westernDiag
            ? String(detail.westernDiag).split(",")
            : [];
          this.westernDiseaseOptions = codes.map((code, idx) => ({
            westcode: code.trim(),
            westname: (names[idx] || "").trim() || code.trim(),
          }));
        } else {
          this.westernDiseaseOptions = [];
        }
        // 同步到名称映射
        this.westernDiseaseNameMap = {};
        this.westernDiseaseOptions.forEach((item) => {
          if (item.westcode && item.westname) {
            this.westernDiseaseNameMap[item.westcode] = item.westname;
          }
        });

        this.editData = {
          ...detail,
          showType: String(detail.showType ?? "0"),
          efficacy: detail.effect || "",
          source: detail.provenance || "",
          isUnified: String(detail.purposeType) === "1",
          medicalSchool: detail.sectCategory || "",
          department: detail.sectDept || "",
          chineseDisease: detail.disId != null ? String(detail.disId) : "",
          chineseDiseaseName: detail.disName || "",
          disCode: detail.disCode || "",
          symptomid: detail.synCode != null ? String(detail.synCode) : "",
          symptomName: detail.synName || "",
          symptomCode: detail.synCode || "",
          westernDisease: detail.westernCode
            ? String(detail.westernCode)
                .split(",")
                .map((s) => s.trim())
            : [],
          westernDiseaseName: detail.westernDiag || "",
          therapyCode: detail.theCode != null ? String(detail.theCode) : "",
          therapyName: detail.theName || "",
          acupoints: detail.acupoints || [],
          detailTypes: detail.detailTypes || ["穴位"],
          statistics: detail.statistics || {},
        };

        this.showEditDialog = true;

        // 弹窗显示后回填 treatmentList 到 AcupointTable
        this.$nextTick(() => {
          if (this.$refs.acupointTable && detail.treatmentList) {
            this.$refs.acupointTable.loadFromServerData(detail.treatmentList);
          }
        });
      } else {
        this.editData = {
          name: "",
          chineseDisease: "",
          chineseDiseaseName: "",
          disCode: "",
          symptomid: "",
          symptomName: "",
          therapyCode: "",
          therapyName: "",
          westernDisease: [],
          westernDiseaseName: "",
          efficacy: "",
          showType: this.defaultShareType,
          source: "",
          isUnified: false,
          medicalSchool: "",
          department: "",
          isEditable: "1",
          detailTypes: [""],
          acupoints: [],
          statistics: {},
        };
        this.key1 = "";
        this.key2 = "";
        this.key3 = "";
        this.diseaseList = [];
        this.symptomList = [];
        this.therapyList = [];
        this.showEditDialog = true;
      }
    },
    async submitEditData() {
      // 通过 AcupointTable 的 handleSave 触发保存流程
      this.$refs.acupointTable.handleSave();
    },
    async onAcupointSave(treatmentList, institutionInfo) {
      // 从下拉选项中查找选中项的名称
      const selectedDisease = this.diseaseList.find(
        (o) => String(o.disid) === this.editData.chineseDisease,
      );
      const selectedSymptom = this.symptomList.find(
        (o) => o.$code === this.editData.symptomid,
      );
      const selectedTherapy = this.therapyList.find(
        (o) => o.$code === this.editData.therapyCode,
      );
      const params = {
        // 必填字段
        name: this.editData.name,
        showType: this.editData.showType || "0",
        // 基本信息
        effect: this.editData.efficacy || "",
        provenance: this.editData.source || "",
        purposeType: this.editData.isUnified ? "1" : "0",
        sectCategory: this.editData.medicalSchool || "",
        sectDept: this.editData.department || "",
        // 疾病信息
        disId: this.editData.chineseDisease || undefined,
        disName: selectedDisease
          ? selectedDisease.$name
          : this.editData.chineseDiseaseName || "",
        disCode: this.editData.disCode || "",
        // 证型信息
        synId: undefined,
        synName: selectedSymptom
          ? selectedSymptom.$name
          : this.editData.symptomName || "",
        synCode: this.editData.symptomid || "",
        // 治法信息
        theCode: this.editData.therapyCode || "",
        theName: selectedTherapy
          ? selectedTherapy.$name
          : this.editData.therapyName || "",
        // 西医诊断
        westernCode: Array.isArray(this.editData.westernDisease)
          ? this.editData.westernDisease.join(",")
          : this.editData.westernDisease || "",
        westernDiag: this.editData.westernDiseaseName || "",
        // 总金额
        totalAmount: parseFloat(this.editData.statistics?.totalPrice) || 0,
        // 机构信息：来自 getNondrugItemDetail 接口（新增时），或 editData 回显（编辑时）
        ygtid: institutionInfo?.ygtid || this.editData.ygtid || "",
        departmentId:
          institutionInfo?.departmentId || this.editData.departmentId || "",
        stitutionsId:
          institutionInfo?.stitutionsId || this.editData.stitutionsId || "",
        stitutionsName:
          institutionInfo?.stitutionsName || this.editData.stitutionsName || "",
        // 治疗明细项列表
        treatmentList,
      };

      // 编辑时传递 pid
      if (this.editData.pid) {
        params.pid = this.editData.pid;
      }

      try {
        const res = await saveSuitableTech(params);
        if (res.ResultCode === 0) {
          this.$message.success(this.editData.pid ? "编辑成功" : "新增成功");
          this.showEditDialog = false;
          this.getList();
        }
        // 后端返回错误时，request.js 响应拦截器已弹出错误消息并 reject，
        // 这里不需要再重复弹窗；网络错误同样由拦截器处理
      } catch (e) {
        console.error("保存失败", e);
      } finally {
        if (this.$refs.acupointTable) {
          this.$refs.acupointTable.saveDone();
        }
      }
    },
    handleDelete(row) {
      this.$confirm("确认删除该条记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await deleteSuitableTech({ pid: row.pid });
            if (res.ResultCode === 0) {
              this.$message.success("删除成功");
              this.getList();
            } else {
              this.$message.error(res.ResultInfo || "删除失败");
            }
          } catch (e) {
            console.error("删除失败", e);
            this.$message.error("删除失败");
          }
        })
        .catch(() => {});
    },
    // 查看详情
    async handleView(row) {
      this.viewLoading = true;
      this.showViewDialog = true;
      this.viewData = {};
      try {
        const res = await getSuitableTechInfo(row.pid);
        if (res.ResultCode === 0) {
          const data = res.Data || {};
          this.viewData = {
            ...data,
            showType: String(data.showType ?? "0"),
            isUnifiedChecked: data.purposeType || "0",
          };
        }
      } catch (e) {
        console.error("获取详情失败", e);
      } finally {
        this.viewLoading = false;
      }
    },
    async getList() {
      this.tableLoading = true;
      try {
        const params = {
          pageNum: this.page,
          pageSize: this.limit,
          name: this.searchData.name || undefined,
          effect: this.searchData.efficacy || undefined,
          showType: this.searchData.shareType || undefined,
          sectCategory: this.searchData.medicalSchool || undefined,
          sectDept: this.searchData.department || undefined,
          purposeType: this.searchData.isUnified || undefined,
          coverageContent: this.searchData.includeItem || undefined,
          rangtypeName: this.searchData.userName || undefined,
        };
        const res = await getSuitableTechList(params);
        if (res.ResultCode === 0) {
          const list = res.Data?.Items || [];
          this.total = res.Data?.totalRecordCount || 0;
          this.tableData = list.map((item, index) => ({
            ...item,
            index: (this.page - 1) * this.limit + index + 1,
            subList: (item.treatmentList || []).map((sub, sIdx) => ({
              ...sub,
              index: sIdx + 1,
            })),
          }));
        }
      } catch (e) {
        console.error("获取列表失败", e);
      } finally {
        this.tableLoading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.suitable-tech {
  width: 100%;
  height: 100%;
}

.suitable-tech ::v-deep .screening-form {
  .screening-item {
    width: 20%;
    flex: none;

    .el-input,
    .el-select {
      width: 100%;
    }
  }
}

.suitable-tech ::v-deep .popup-container {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  height: calc(100vh - 60px) !important;
}

.dialog-body-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dialog-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 16px;
  cursor: pointer;
  margin-bottom: 10px;
  width: fit-content;

  &:hover {
    opacity: 0.8;
  }
}

.dialog-content-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  overflow: hidden;
}

.screening-btn-group {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.share-badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  background: #ffae45;
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
}

.expand-table {
  padding: 10px 20px;
}

.table {
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
  height: 70vh;

  .table-container {
    height: 90%;
  }

  .today-table {
    height: 100%;

    .find-detail {
      width: 60px;
      height: 24px;
      border: 1px solid #ffae45;
      border-radius: 2px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      margin: 0 2px;
      background: #ffae45;
    }

    .find-fill {
      background: #5386f6 !important;
      color: #fff !important;
      border: 1px solid #5386f6;
    }

    .find-fill1 {
      background: #ff6245;
      color: #fff !important;
      border: 1px solid #ff6245;
    }

    .find-fill2 {
      background: #68a8ff !important;
      color: #fff !important;
      border: 1px solid #68a8ff;
    }

    .find-detail.is-disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

.form {
  width: 50%;

  .form-item {
    margin-bottom: 10px;

    span {
      color: red;
    }

    .name {
      width: 120px;
    }

    .input {
      flex: 1;
    }
  }
}

.dialog-form {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;

  .form-item {
    width: 25%;
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 10px;

    &.form-item-half {
      width: 50%;
    }

    &.form-item-sixth {
      width: 16.5%;

      .name {
        width: 60px;
        min-width: 60px;
      }
    }

    .name {
      width: 110px;
      min-width: 110px;
      font-size: 14px;
      white-space: nowrap;
      text-align: right;
      margin-right: 5px;
    }

    .input {
      flex: 1;
      min-width: 0;

      .el-input,
      .el-select,
      .el-autocomplete {
        width: 100%;
      }

      .el-popover__reference-wrapper {
        display: block !important;
        width: 100%;

        .el-input {
          width: 100%;
        }
      }
    }

    .unified-checkbox {
      margin-left: 115px;
    }
  }
}

.dialog-scroll-area {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dialog-scroll-area ::v-deep .recipe-acupoint-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.autocomplete-disabled {
  color: #999 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

.el-input.invalid::v-deep {
  input {
    color: #ff0000;
  }
}

.option-list {
  margin: -12px -12px;
  max-height: 300px;
  overflow: auto;
  .active {
    color: #5386f6;
  }
  li {
    padding: 8px 12px;
    list-style: none;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
    color: #606266;
    font-weight: 500;
    cursor: pointer;
  }
  li:hover {
    background: #f5f7fa;
  }
}

.suffix {
  height: 100%;
  padding-right: 5px;
  display: flex;
  align-items: center;
  i {
    cursor: pointer;
    color: #c0c4cc;
  }
  i:hover {
    color: #909399;
  }
}

.western-disease-input-wrapper {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 2px 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 28px;
  cursor: text;

  .el-tag {
    margin: 2px 4px 2px 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .el-autocomplete {
    flex: 1;
    min-width: 80px;
  }

  ::v-deep .el-input__inner {
    border: none !important;
    padding: 0 4px;
    height: 24px;
    line-height: 24px;
    background: transparent;
  }

  ::v-deep .el-input__suffix {
    display: flex;
    align-items: center;
  }

  &:hover {
    border-color: #c0c4cc;
  }

  &:focus-within {
    border-color: #409eff;
  }

  &.view-mode {
    cursor: default;
    background: #f5f7fa;

    .el-tag {
      background-color: #f0f2f5;
      border-color: #e4e7ed;
      color: #909399;
    }
  }
}

.dialog-scroll-area ::v-deep .recipe-acupoint {
  flex: 1;
  min-height: 0;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .table {
    height: 81vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .table {
    height: 80vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .table {
    height: 72vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

@media screen and (min-width: 1281px) and (max-width: 1360px) {
  .table {
    height: 72vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>