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

<template>
  <div class="local-expert-tech">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <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-select size="mini" v-model="searchData.includeItem" placeholder="请搜索选择" clearable filterable :loading="projectLoading" loading-text="搜索中..." :filter-method="searchProject" @focus="searchProject('')">
              <el-option v-for="item in projectOptions" :key="item.pid" :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-select size="mini" v-model="searchData.chineseDisease" placeholder="请搜索选择" clearable filterable :loading="diseaseLoading" loading-text="搜索中..." :filter-method="searchDisease" @focus="searchDisease('')">
              <el-option v-for="(item, idx) in diseaseOptions" :key="idx" :label="item.disname" :value="String(item.disid)"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>西医病名：</span>
          <div class="input">
            <el-select size="mini" v-model="searchData.westernDisease" placeholder="请搜索选择" clearable filterable :loading="westernDiseaseLoading" loading-text="搜索中..." :filter-method="searchWesternDisease" @focus="searchWesternDisease('')">
              <el-option v-for="(item, idx) in westernDiseaseOptions" :key="idx" :label="item.westname" :value="String(item.westcode)"></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.expert" placeholder="请输入" clearable></el-input>
          </div>
        </div>
        <div class="screening-btn-group">
          <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="穴位/部位/耳穴/经络" 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="efficacy" label="功效与适应症" min-width="180" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="chineseDisease" label="中医病名" width="120" align="center"></el-table-column>
            <el-table-column prop="cardType" label="证型" width="120" align="center"></el-table-column>
            <el-table-column prop="westernDisease" label="西医病名" width="120" align="center"></el-table-column>
            <el-table-column prop="expert" label="专家" width="100" align="center"></el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <div class="flex-center operation" slot-scope="scope">
                <div class="flex-center" @click="openEditDialog(scope.row)">编辑</div>
                <div class="flex-center bg-yellow" @click="handleDelete(scope.row)">删除</div>
                <div class="flex-center" @click="handleView(scope.row)">查看</div>
              </div>
            </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">
            <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">
            <span style="opacity:0">*</span>
            <div class="name">专家：</div>
            <div class="input">
              <el-input size="mini" v-model="editData.expert" placeholder="请输入"></el-input>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span style="opacity:0">*</span>
            <div class="name">专家名衔：</div>
            <div class="input">
              <el-select size="mini" v-model="editData.expertTitle" placeholder="请选择" clearable>
                <el-option
                  :label="item.value"
                  :value="item.value"
                  v-for="(item,index) in titlesList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <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>
            <div class="name">中医病名：</div>
            <div class="input">
              <el-select size="mini" v-model="editData.chineseDisease" placeholder="请搜索选择" clearable filterable :loading="diseaseLoading" loading-text="搜索中..." :filter-method="searchDisease" @focus="searchDisease('')" @change="onDiseaseChange">
                <el-option v-for="(item, idx) in diseaseOptions" :key="idx" :label="item.disname" :value="String(item.disid)"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span style="opacity:0">*</span>
            <div class="name">证型：</div>
            <div class="input">
              <el-select size="mini" v-model="editData.symptomid" placeholder="请搜索选择" clearable filterable :loading="symptomLoading" loading-text="搜索中..." :filter-method="searchSymptom" @focus="searchSymptom('')" @change="onSymptomChange">
                <el-option v-for="(item, idx) in symptomOptions" :key="idx" :label="item.symname" :value="item.symid"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span style="opacity:0">*</span>
            <div class="name">治法：</div>
            <div class="input">
              <el-select size="mini" v-model="editData.therapyCode" placeholder="请搜索选择" clearable filterable :loading="therapyLoading" loading-text="搜索中..." :filter-method="searchTherapy" @focus="searchTherapy('')">
                <el-option v-for="(item, idx) in therapyOptions" :key="idx" :label="item.therapyName || item.therapy" :value="item.therapyCode"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center">
            <span style="opacity:0">*</span>
            <div class="name">西医诊断：</div>
            <div class="input">
              <el-select size="mini" v-model="editData.westernDisease" placeholder="请搜索选择" clearable filterable multiple collapse-tags :loading="westernDiseaseLoading" loading-text="搜索中..." :filter-method="searchWesternDisease" @focus="searchWesternDisease('')" @change="onWesternDiseaseChange" popper-class="western-disease-select" @visible-change="onWesternDiseaseVisible">                <el-option v-for="(item, idx) in westernDiseaseOptions" :key="idx" :label="item.westname" :value="String(item.westcode)"></el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item flex flex-col-center" style="width: 100%">
            <span style="opacity:0">*</span>
            <div class="name">方解：</div>
            <div class="input">
              <el-input size="mini" type="textarea" v-model="editData.mechanismPre" 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">
              <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">
              <div class="name">专家：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.expert" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center">
              <div class="name">专家名衔：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.expertTitle" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center">
              <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">
              <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">
              <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">
              <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">
              <div class="name">西医诊断：</div>
              <div class="input">
                <el-input size="mini" v-model="viewData.westernDiag" placeholder="-" disabled></el-input>
              </div>
            </div>
            <div class="form-item flex flex-col-center" style="width: 100%">
              <div class="name">方解：</div>
              <div class="input">
                <el-input size="mini" type="textarea" v-model="viewData.mechanismPre" placeholder="-" disabled></el-input>
              </div>
            </div>
          </div>
          <SuitableTechDetail ref="techDetail" :detailData="viewData" />
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import popup from "@/components/Propup.vue";
import AcupointTable from "./components/AcupointTable.vue";
import {
  getDiseaseListMethod,
  getSymptomListMethod,
  getTherapyListMethod,
} from "@/request/api.illness.js";
import { getLocalSuitableTechList, deleteLocalSuitableTech, saveLocalSuitableTech, getLocalSuitableTechInfo, getMappedNondrugItemList } from "@/api/technology.js";
import { getXDiseaseName } from "@/api/knowledge.js";
import SuitableTechDetail from "./components/SuitableTechDetail.vue";

export default {
  name: 'LocalExpertTech',
  components: { popup, AcupointTable, SuitableTechDetail },
  data() {
    return {
      searchData: {
        name: '',
        includeItem: '',
        chineseDisease: '',
        westernDisease: '',
        expert: ''
      },
      // 下拉选项
      diseaseOptions: [],
      westernDiseaseOptions: [],
      westernDiseasePage: 1,
      westernDiseaseHasMore: true,
      symptomOptions: [],
      therapyOptions: [],
      projectOptions: [],
      titlesList: [
        { key: "1", value: "国医大师" },
        { key: "2", value: "国家级名老中医" },
        { key: "3", value: "省级名老中医" },
        { key: "4", value: "名医" }
      ],
      // 下拉加载状态
      diseaseLoading: false,
      westernDiseaseLoading: false,
      symptomLoading: false,
      therapyLoading: false,
      projectLoading: false,
      // 表格数据
      tableData: [],
      tableLoading: false,
      expandRows: [],
      page: 1,
      limit: 10,
      total: 0,
      // 弹窗相关
      showEditDialog: false,
      editLoading: false,
      editData: {
        statistics: {}
      },
      // 查看详情弹窗
      showViewDialog: false,
      viewLoading: false,
      viewData: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // ========== 中医病名搜索 ==========
    async searchDisease(query) {
      this.diseaseLoading = true
      try {
        const { list } = await getDiseaseListMethod(1, 9999, { keyword: query || '' })
        this.diseaseOptions = list || []
      } catch (e) {
        console.error('搜索中医病名失败', e)
      } finally {
        this.diseaseLoading = false
      }
    },
    onDiseaseChange(disid) {
      const selected = this.diseaseOptions.find(item => item.disid === disid)
      if (selected) {
        this.editData.chineseDiseaseName = selected.disname
        this.editData.disCode = selected.disCode
      }
      // 联动清空证型
      this.editData.symptomid = ''
      this.editData.symptomName = ''
      this.symptomOptions = []
      // 联动清空治法
      this.editData.therapyCode = ''
      this.editData.therapyName = ''
      this.therapyOptions = []
      if (disid) {
        this.searchSymptom('')
      }
    },
    // ========== 证型搜索 ==========
    async searchSymptom(query) {
      this.symptomLoading = true
      try {
        const params = { keyword: query || '' }
        if (this.editData.chineseDisease) params.disid = this.editData.chineseDisease
        if (this.editData.disCode) params.disCode = this.editData.disCode
        const { list } = await getSymptomListMethod(1, 9999, params)
        this.symptomOptions = list || []
      } catch (e) {
        console.error('搜索证型失败', e)
      } finally {
        this.symptomLoading = false
      }
    },
    onSymptomChange(symid) {
      const selected = this.symptomOptions.find(item => item.symid === symid)
      if (selected) {
        this.editData.symptomName = selected.symname
      }
      // 联动清空治法
      this.editData.therapyCode = ''
      this.editData.therapyName = ''
      this.therapyOptions = []
      if (symid) {
        this.searchTherapy('')
      }
    },
    // ========== 治法搜索 ==========
    async searchTherapy(query) {
      this.therapyLoading = true
      try {
        const params = { keyword: query || '' }
        if (this.editData.disCode) params.disCode = this.editData.disCode
        if (this.editData.symptomid) {
          params.symptomCode = this.editData.symptomid
          params.symid = this.editData.symptomid
        }
        const { list } = await getTherapyListMethod(1, 9999, params)
        this.therapyOptions = list || []
      } catch (e) {
        console.error('搜索治法失败', e)
      } finally {
        this.therapyLoading = false
      }
    },
    // ========== 西医诊断搜索（分页） ==========
    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
        }
      } 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
        }
      } catch (e) {
        console.error('加载更多西医诊断失败', e)
      } finally {
        this.westernDiseaseLoading = false
      }
    },
    onWesternDiseaseVisible(show) {
      const wrap = document.querySelector(".western-disease-select .el-scrollbar__wrap")
      if (!wrap) return
      if (show) {
        wrap.addEventListener("scroll", this._wdScroll = () => {
          if (wrap.scrollHeight - wrap.scrollTop <= wrap.clientHeight + 5) {
            this.loadMoreWesternDisease()
          }
        })
      } else {
        wrap.removeEventListener("scroll", this._wdScroll)
      }
    },
    onWesternDiseaseChange(codes) {
      const names = codes
        .map(code => {
          const item = this.westernDiseaseOptions.find(o => o.westcode === code)
          return item ? item.westname : ''
        })
        .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: '',
        includeItem: '',
        chineseDisease: '',
        westernDisease: '',
        expert: ''
      }
      this.getList()
    },
    sizeC(e) {
      this.page = e
      this.getList()
    },
    handleExpandChange(row, expandedRows) {
      this.expandRows = expandedRows.map(item => item.pid)
    },
    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 getLocalSuitableTechInfo(row.pid)
          if (res.ResultCode === 0) {
            detail = res.Data || row
          }
        } catch (e) {
          console.error('获取详情失败', e)
        } finally {
          this.editLoading = false
        }

        this.diseaseOptions = detail.disId != null
          ? [{ disid: detail.disId, disname: detail.disName, disCode: detail.disCode }]
          : []
        this.symptomOptions = detail.synCode != null
          ? [{ symid: detail.synCode, symname: detail.synName, synCode: detail.synCode }]
          : []
        this.therapyOptions = detail.theCode != null
          ? [{ therapyCode: detail.theCode, therapy: detail.theName, therapyName: detail.theName }]
          : []
        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.editData = {
          ...detail,
          efficacy: detail.effect || '',
          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 || '',
          therapyCode: detail.theCode != null ? String(detail.theCode) : '',
          therapyName: detail.theName || '',
          westernDisease: detail.westernCode
            ? String(detail.westernCode).split(',').map(s => s.trim())
            : [],
          westernDiseaseName: detail.westernDiag || '',
          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: '',
          treater: '',
          expert: '',
          expertTitle: '',
          efficacy: '',
          chineseDisease: '',
          chineseDiseaseName: '',
          disCode: '',
          symptomid: '',
          symptomName: '',
          symptomCode: '',
          therapyCode: '',
          therapyName: '',
          westernDisease: [],
          westernDiseaseName: '',
          mechanismPre: '',
          isEditable: '1',
          detailTypes: ['穴位'],
          acupoints: [],
          statistics: {},
        }
        this.showEditDialog = true
      }
    },
    async submitEditData() {
      // 保存
      this.$refs.acupointTable.handleSave()
    },
    async onAcupointSave(treatmentList, institutionInfo) {
      // 从下拉选项中查找选中项的名称
      const selectedDisease = this.diseaseOptions.find(
        o => o.disid === this.editData.chineseDisease
      )
      const selectedSymptom = this.symptomOptions.find(
        o => o.symid === this.editData.symptomid
      )
      const selectedTherapy = this.therapyOptions.find(
        o => o.therapyCode === this.editData.therapyCode
      )
      const params = {
        name: this.editData.name,
        // 本地专家特有字段
        treater: this.editData.treater || '',
        expert: this.editData.expert || '',
        expertTitle: this.editData.expertTitle || '',
        mechanismPre: this.editData.mechanismPre || '',
        // 基本信息
        effect: this.editData.efficacy || '',
        // 疾病信息
        disId: this.editData.chineseDisease || undefined,
        disName: selectedDisease
          ? selectedDisease.disname
          : this.editData.chineseDiseaseName || '',
        disCode: this.editData.disCode || '',
        // 证型信息
        synName: selectedSymptom
          ? selectedSymptom.symname
          : this.editData.symptomName || '',
        synCode: this.editData.symptomid || '',
        // 治法信息
        theCode: this.editData.therapyCode || '',
        theName: selectedTherapy
          ? selectedTherapy.therapy
          : 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,
        // 机构信息
        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,
      }

      if (this.editData.pid) {
        params.pid = this.editData.pid
      }

      try {
        const res = await saveLocalSuitableTech(params)
        if (res.ResultCode === 0) {
          this.$message.success(this.editData.pid ? '编辑成功' : '新增成功')
          this.showEditDialog = false
          this.getList()
        }
      } 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 deleteLocalSuitableTech({ 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 getLocalSuitableTechInfo(row.pid)
        if (res.ResultCode === 0) {
          this.viewData = res.Data || {}
        }
      } 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,
          coverageContent: this.searchData.includeItem || undefined,
          disId: this.searchData.chineseDisease || undefined,
          disName: this.searchData.chineseDisease
            ? (this.diseaseOptions.find(o => String(o.disid) === this.searchData.chineseDisease)?.disname || undefined)
            : undefined,
          expert: this.searchData.expert || undefined,
          westernCode: this.searchData.westernDisease || undefined,
          westernDiag: this.searchData.westernDisease
            ? (this.westernDiseaseOptions.find(o => String(o.westcode) === this.searchData.westernDisease)?.westname || undefined)
            : undefined,
        }
        const res = await getLocalSuitableTechList(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,
            efficacy: item.effect || '',
            chineseDisease: item.disName || '',
            cardType: item.synName || '',
            westernDisease: item.westernDiag || '',
            expert: item.expert || '',
            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";

.local-expert-tech {
  width: 100%;
  height: 100%;
}

.local-expert-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-form {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;

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

    .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 {
        width: 100%;
      }
    }
  }
}

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

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

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

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

    .operation {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;

      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        margin: 5px 0;
      }

      .bg-yellow {
        width: 60px;
        height: 24px;
        background: #ffae45;
      }
    }
  }
}
</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>