gx

chenyc

2025-06-09 81ced3885266779c3a3813a0e4687962375b1d62

 src/views/home/components/lis_.ui.vue

@@ -1,91 +1,758 @@
<template>
    <div class="dietarySurvey-home">
        <div v-if="patientsInfo.id">
           <div class="lisview">
            <div class="child">
                1的撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="child">
                1
            </div>
            <div class="child">
                大水水水水水水水水水水水水水水
            </div>
            <div class="child">
                1
            </div>
            <div class="child">
                1
            </div>
            <div class="child">
                1
            </div>
            <div class="child">
                1
            </div>
            <div class="child">
                1
            </div>
            <div class="child">
                大水水水水水水水水水水水水水水水水水水
            </div>
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
           </div>
        </div>
        <el-empty v-else description="无数据，请先选择患者"></el-empty>
    </div>

   <div class="inspection_project_report_container">
      <el-row>
         <el-col :span="24" v-loading="loading">
            <el-row :gutter="15">
               <el-col :span="4">
                  <el-row>
                     <el-col :span="24" class="patTabel">
                        <el-table
                           v-if="tableHeight > 0"
                           :data="feeItemOptions"
						
                           :height="tableHeight"
                           border
                           class="patient_table"
                           :row-class-name="feeItemTableRowClassName"
                           @row-click="feeItemRowClick"
                        >
                           <el-table-column label="检验项目">
                              <template #default="scope">
                                 {{ scope.row }}
                              </template>
                           </el-table-column>
                        </el-table>
                     </el-col>
                  </el-row>
               </el-col>
               <el-col :span="20" class="patTabel" v-loading="loading" >
                  <el-table  stripe border :data="tableData" class="patient_table" :row-class-name="feeItemTableRowClassName">
                     <el-table-column  min-width="110"  fixed  prop="itemType" label="检验日期">
                        <template #default="scope">
                           {{scope.row.sampleDate.substring(0,11)}}
                        </template>
                     </el-table-column>
                     <el-table-column  min-width="100" v-for="(col,index) in tableCols" :key="index" >
                        <template #header> {{col.name}}<br/>{{`${col.参考值 || ''}${col.单位 || ''}`}}</template>
                        <template #default="scope">
                           <span  v-html="funJg(col,scope.row)"></span>
                        </template>
                     </el-table-column>
                  </el-table>
               </el-col>
            </el-row>
         </el-col>
      </el-row>
   </div>
</template>

<script setup lang="ts">

<script lang="ts" setup>
import { listTestItemsByFeeItemName, saveLisResult } from '/@/api/lis/report';
import { number } from 'echarts';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import {
   apiGetChargeItems,
   listReportsByPatientApi,
   apiDelLisByDate,
   apiDelLis,
   apiUpdateLis,
   handCalculatorKtvAndUrrApi,
} from '/@/api/dataConversio/index';
import { useStore } from '/@/store/index';
import { storeToRefs } from 'pinia';
import { usePatientsInfo } from '/@/stores/patientsInfo';
import { computed, reactive } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { verifyNumberIntegerAndFloat } from '/@/utils/toolsValidate';
import { QueryList } from '/@/api/Patients';
const storesPat = usePatientsInfo();
const { patientsInfo } = storeToRefs(storesPat);
const props = defineProps(['tableHeight'])
const state = reactive({
    tableData: [],
    loading: false,
})
const tableHe = computed(() => {
    return props.tableHeight - 130
})
// 第一步：定义子组件里面的方法
const getData = (str: string) => {
    console.log("子组件获取显示数据！" + str);
    console.log(props.tableHeight)
    var pam = {
        patientCode: patientsInfo.value.code,
        page: 1,
        size: 100,
        orderType: 1,
        orderIsUse: 2,
        desc: 1,
        orderName: '',
    }
    state.loading = true
const store = patientsInfo;

const searchForm = ref({
   patCode: '', // 患者编号
   feeItemName: '', // 收费项目
});

const loading = ref(false);
const tableData = ref([]);
const tableCols = ref([]);
const feeItemNameLoading = ref(false);
const feeItemOptions = ref<string[]>([]);
const patLoading = ref(false);
const patOptions = ref<any[]>([]);
const tableHeight = ref(0);
const editItemForm = ref({
   code: '',
   itemName: '',
   itemResult: '',
   itemResultUnit: '',
   sampleDate: formatDate(new Date(), 'YYYY-mm-dd'),
   oldSampleDate: formatDate(new Date(), 'YYYY-mm-dd'),
   reportCode: '',
}); // 修改单项时用到的
const isEditItemDialogShow = ref(false);
const editItemFormRef = ref();
const editItemFormRules = ref({
   itemResult: [{ required: true, message: '请输入检验结果', trigger: 'blur' }],
});

const disabledItem = ['转铁蛋白饱和度', '计算URR', 'KT/V (计算KT/V)'];

watch(
   // @ts-ignore
   () => patientsInfo.value.code,
   (newVal) => {
      if (newVal) {
         if (newVal) {
            searchForm.value.patCode = newVal;
            nextTick(() => {
               searchFun();
            });
         }
      } else {
         // ElMessage.warning('请选择患者');
      }
   }
);

// 修改整个日期的
const editManyFeeFormRef = ref();
const isManyFeeShow = ref(false);
const editManyFeeForm = ref({
   sampleDate: formatDate(new Date(), 'YYYY-mm-dd'),
   oldSampleDate: formatDate(new Date(), 'YYYY-mm-dd'),
   reportCode: '',
   children: [],
});
// 新增检验数据
const addFeeFormRef = ref();
const isShowAddFeeShow = ref(false);
const addLoading = ref(false);
// 临时日期 上次保存的日期
const addFeeFormDatels = ref('');
const addFeeForm = ref({
   patientCode: '',
   sampleDate: formatDate(new Date(), 'YYYY-mm-dd'),
   feeItemName: '',
   details: [],
});

const clientCode = computed(() => {
   // @ts-ignore
   return patientsInfo.value.clientCode;
});

/**
 * 查询
 */
const searchFun = async () => {
   if (!searchForm.value.patCode) return true
   if (!searchForm.value.feeItemName) return ElMessage.warning('请选择收费项目');
   loading.value = true;
   try {
      const params = {
         clientCode: clientCode.value,
         ...searchForm.value,
         isFilterTestItem: 1,
      };
      const { data } = await listReportsByPatientApi(params);
      // tableCols.value = data.cols;
      tableCols.value=[...data.cols.filter(e => e.排序 !== null).sort((a, b) => a.排序 - b.排序), ...data.cols.filter(e => e.排序 === null)]
      tableData.value = data.reports;
   } finally {
      loading.value = false;
   }
};

/**
 * 获取收费项目列表
 */
const getFeeItems = async () => {
   feeItemNameLoading.value = true;
   try {
      const { data } = await apiGetChargeItems();
      feeItemOptions.value = data;
      if (data.length > 0) {
         feeItemRowClick(data[0]);
      }
   } finally {
      feeItemNameLoading.value = false;
   }
};

/**
 * 获取患者列表
 */
const getPatients = async () => {
   patLoading.value = true;
   try {
      const params = {
         page: 0,
         size: 0,
         wherecondition: ` client_code="${clientCode.value}" and patient_is_alive='1'`,
         ordercondition: 'patient_hemo_code asc',
      };
      const { data } = await QueryList(params);
      patOptions.value = data.list;
      if (data.list.length > 0) {
         searchForm.value.patCode = data.list[0].code;
      }
   } catch (err) {
      console.error(err);
   } finally {
      patLoading.value = false;
   }
};

/**
 * 删除检验数据
 */
const delRow = (row: any) => {
   let msg = `<span style="color:red"> ${row.sampleDate.substring(0, 11)} </span>`;
   ElMessageBox.confirm(
      `
    此操作将会删除该患者 ${msg} 所有的检验数据，是否确认？
    `,
      '提示',
      {
         dangerouslyUseHTMLString: true,
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(async () => {
         loading.value = true;
         try {
            await apiDelLisByDate(`reportCode=${row.reportCode}`);
            await searchFun();
            ElMessage.success('删除成功');
         } finally {
            loading.value = false;
         }
      })
      .catch(() => {});
};

/** 删除单项检验数据 */
const delItem = (item: any) => {
   let msg = `<span style="color:red"> ${item.itemName} </span>`;
   ElMessageBox.confirm(
      `
    此操作将会删除该患者 ${msg} 的检验数据，是否确认？
    `,
      '提示',
      {
         dangerouslyUseHTMLString: true,
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(async () => {
         loading.value = true;
         try {
            await apiDelLis(`code=${item.code}`);
            await searchFun();
            ElMessage.success('删除成功');
         } finally {
            loading.value = false;
         }
      })
      .catch(() => {});
};

/** 更新整个日期的检查项 */
const editRow = (row: any) => {
   console.log(row);
   const editData = {
      sampleDate: formatDate(new Date(row.sampleDate), 'YYYY-mm-dd'),
      oldSampleDate: formatDate(new Date(row.sampleDate), 'YYYY-mm-dd'),
      reportCode: row.reportCode, // 报告单编号
      children: [],
   };
   editData.children = row.results.map((item) => {
      const editItem = {
         code: item ? item.code : '',
         itemSystemName: item.itemSystemName,
         itemName: item.itemName,
         stName: item.itemName,
         itemResult: item ? item.itemResult : '',
         itemResultUnit: item ? item.itemResultUnit : '',
         sampleDate: formatDate(new Date(row.sampleDate), 'YYYY-mm-dd'),
         reportCode: row.reportCode, // 报告单编号
         参考值高值: item.参考高值,
         参考值低值: item.参考低值,
      };
      return editItem;
   });
   editManyFeeForm.value = editData;
   isManyFeeShow.value = true;
};

/** 更新整个日期的检查项 -- 提交 */
const editManySubmit = async (formEl: any) => {
   console.log(formEl);
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
      if (valid) {
         loading.value = true;
         try {
            const asyncs = editManyFeeForm.value.children.map((e) => {
               const item: any = {
                  reportCode: e.reportCode,
                  code: e.code,
                  itemName: e.itemName,
                  result: e.itemResult,
               };
               // 判断检查日期是否修改，如果修改则需要提交 sampleDate
               if (formatDate(new Date(editManyFeeForm.value.sampleDate), 'YYYY-mm-dd') !== editManyFeeForm.value.oldSampleDate) {
                  item.sampleDate = formatDate(new Date(editManyFeeForm.value.sampleDate), 'YYYY-mm-dd');
               }
               return item;
            });

            await Promise.all(asyncs.map((e) => apiUpdateLis(e)));
            await searchFun();
            loading.value = false;
            isManyFeeShow.value = false;
            ElMessage.success('修改成功');
         } catch (error) {
            loading.value = false;
         }
      }
   });
};

/** 更新单项检验数据 */
const editItem = (item: any, row: any) => {
   const editItem = {
      code: item ? item.code : '',
      itemName: item.itemName,
      stName: item.itemName,
      itemResult: item ? item.itemResult : '',
      itemResultUnit: item ? item.itemResultUnit : '',
      sampleDate: formatDate(new Date(row.sampleDate), 'YYYY-mm-dd'),
      oldSampleDate: formatDate(new Date(row.sampleDate), 'YYYY-mm-dd'),
      reportCode: row.reportCode, // 报告单编号
      参考值低值: item.参考低值,
      参考值高值: item.参考高值,
   };
   editItemForm.value = editItem;
   isEditItemDialogShow.value = true;
};

/** 更新单项检验数据 -- 提交 */
const editItemSubmit = async (formEl: any) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
      if (valid) {
         try {
            const params: any = {
               reportCode: editItemForm.value.reportCode,
               code: editItemForm.value.code,
               itemName: editItemForm.value.itemName,
               result: editItemForm.value.itemResult,
            };
            // 判断检验日期是否有更改，如果有则需要提交sampleDate
            if (formatDate(new Date(editItemForm.value.sampleDate), 'YYYY-mm-dd') !== editItemForm.value.oldSampleDate) {
               params.sampleDate = formatDate(new Date(editItemForm.value.sampleDate), 'YYYY-mm-dd');
            }
            await apiUpdateLis(params);
            await searchFun();
            loading.value = false;
            isEditItemDialogShow.value = false;
            ElMessage.success('修改成功');
         } catch (error) {
            loading.value = false;
         }
      }
   });
};

const addFun = async () => {
   // 新增检验数据
   addFeeForm.value = {
      patientCode: searchForm.value.patCode,
      sampleDate: addFeeFormDatels.value === '' ? formatDate(new Date(), 'YYYY-mm-dd') : addFeeFormDatels.value,
      feeItemName: searchForm.value.feeItemName,
      details: [],
   };
   isShowAddFeeShow.value = true;
   addLoading.value = true;
   try {
      addFeeForm.value.details = await getTestItems();
   } finally {
      addLoading.value = false;
   }
};

const addSubmit = async () => {
   const isHaveResData = addFeeForm.value.details.filter((v: any) => !!v.testValue || v.testValue == 0);
   if (isHaveResData.length <= 0) return ElMessage.warning('请至少保证一项检验结果存在数据');
   addLoading.value = true;
   try {
      const details = isHaveResData.map((v) => {
         const item = {
            feeItemName: v.feeItem,
            sampleDate: addFeeForm.value.sampleDate,
            testItemName: v.testItem,
            testItemResult: v.testValue,
            testItemUnit: v.testItemUnit,
            itemRef: v.参考值,
         };
         return item;
      });
      const data = {
         patientCode: searchForm.value.patCode,
         details,
      };
      addFeeFormDatels.value = addFeeForm.value.sampleDate;
      await saveLisResult(data);
      isShowAddFeeShow.value = false;
      searchFun();
      ElMessage.success('保存成功');
   } catch (error) {
      ElMessage.error('保存失败，请联系管理员: ' + error);
   } finally {
      addLoading.value = false;
   }
};

const feeItemChangeByAdd = (val: string) => {
   nextTick(async () => {
      addLoading.value = true;
      try {
         addFeeForm.value.details = await getTestItems();
      } finally {
         addLoading.value = false;
      }
   });
};

const itemInpChange2 = (val: any, colItem: any) => {
   if (colItem.itemSystemName !== '血清铁' && colItem.itemSystemName !== '总铁结合力') return false;
   let xtq = val || 0; // 血清铁
   let ztjhl = val || 0; // 总铁结合力
   if (colItem.itemSystemName === '血清铁') {
      const item = editManyFeeForm.value.children.find((e) => e.itemSystemName === '总铁结合力');
      item && (ztjhl = item.itemResult || 0);
   }
   if (colItem.itemSystemName === '总铁结合力') {
      const item = editManyFeeForm.value.children.find((e) => e.itemSystemName === '血清铁');
      item && (xtq = item.itemResult || 0);
   }
   console.log(xtq, ztjhl);
   if (!verifyNumberIntegerAndFloat(xtq + '') || !verifyNumberIntegerAndFloat(ztjhl + '') || ztjhl == 0 || xtq == 0) {
      const i = editManyFeeForm.value.children.findIndex((e) => e.itemSystemName === '转铁蛋白饱和度');
      if (i !== -1) {
         editManyFeeForm.value.children[i].itemResult = '';
      }
      return false;
   }
   let sum: any = (xtq / ztjhl) * 100;
   if (sum % 1 !== 0) {
      sum = scaleFormat(sum, 2);
   }
   // 查
   const i = editManyFeeForm.value.children.findIndex((e) => e.itemSystemName === '转铁蛋白饱和度');
   if (i !== -1) {
      editManyFeeForm.value.children[i].itemResult = sum;
   }
};

const itemInpChange = (val: any, colItem: any) => {
   if (colItem.stName !== '血清铁' && colItem.stName !== '总铁结合力') return false;
   let xtq = val || 0; // 血清铁
   let ztjhl = val || 0; // 总铁结合力
   if (colItem.stName === '血清铁') {
      const item = addFeeForm.value.details.find((e) => e.stName === '总铁结合力');
      item && (ztjhl = item.testValue || 0);
   }
   if (colItem.stName === '总铁结合力') {
      const item = addFeeForm.value.details.find((e) => e.stName === '血清铁');
      item && (xtq = item.testValue || 0);
   }
   console.log(xtq, ztjhl);
   if (!verifyNumberIntegerAndFloat(xtq + '') || !verifyNumberIntegerAndFloat(ztjhl + '') || ztjhl == 0 || xtq == 0) {
      const i = addFeeForm.value.details.findIndex((e) => e.stName === '转铁蛋白饱和度');
      if (i !== -1) {
         addFeeForm.value.details[i].testValue = '';
      }
      return false;
   }
   let sum: any = (xtq / ztjhl) * 100;
   if (sum % 1 !== 0) {
      sum = scaleFormat(sum, 2);
   }
   // 查
   const i = addFeeForm.value.details.findIndex((e) => e.stName === '转铁蛋白饱和度');
   if (i !== -1) {
      addFeeForm.value.details[i].testValue = sum;
   }
};
const itemInpChangeyz = (val: any, colItem: any) => {
   const isNumber = /^\d*$/.test(val);
   console.log(val, colItem, isNumber);
   if (val && isNumber) {
      if (colItem.参考值低值 && colItem.参考值高值) {
         if (Number(val) <= colItem.参考值低值 || Number(val) >= colItem.参考值高值) {
            ElMessage({
               message: `${colItem.stName}输入的值为${val}没有在${colItem.参考值低值}~${colItem.参考值高值}参考值范围内！`,
               type: 'warning',
               duration: 5000,
            });
         }
      }
   }
};

const scaleFormat = (value: any = 0, scale: number = 4) => {
   return Number.parseFloat(value).toFixed(scale);
};

const getTestItems = async () => {
   const { data } = await listTestItemsByFeeItemName(`feeItemName=${addFeeForm.value.feeItemName}&clientCode=${clientCode.value}`);
   return data.testItems
      .filter((e) => e.是否显示 !== 0)
      .map((v: any) => {
         const obj = Object.assign({}, { ...v });
         const item = {
            ...v,
            testValue: '',
            stName: obj.testItem,
            testItem: obj.testItem2 || v.testItem,
            placeholder: obj.参考值,
            sortOrder: obj.排序字段 || 9999,
         };
         return item;
      })
      .sort((a, b) => a.sortOrder - b.sortOrder);
};

const formatResultColor = (resultFlag: string) => {
   let color = '#606266';
   switch (resultFlag) {
      case '正常':
         color = '#606266';
         break;
      case '偏高':
         color = 'red';
         break;
      case '高':
         color = 'red';
         break;
      case '偏低':
         color = '#409EFF';
         break;
      case '低':
         color = '#409EFF';
         break;
   }
   return color;
};

/** 选中收费项目 */
const feeItemRowClick = (row: any) => {
   if (row === searchForm.value.feeItemName) return false;
   searchForm.value.feeItemName = row;
   searchFun();
};

const formatDescriptionsTitle = (str: string) => {
   return `检验日期：${formatDate(new Date(str), 'YYYY-mm-dd')}`;
};

const feeItemTableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
   if (searchForm.value.feeItemName) {
      if (row === searchForm.value.feeItemName) {
         return 'success-row';
      } else {
         return '';
      }
   } else {
      return '';
   }
};

const setTableHeight = () => {
   let height = document.documentElement.clientHeight;
   const navDom = document.querySelector('.layout-header');
   if (navDom) {
      height -= navDom.scrollHeight;
   }

   const demoFormDom = document.querySelector('.card_box_search');

   if (demoFormDom) {
      height -= demoFormDom.scrollHeight;
   }

   height = height - 140;
   tableHeight.value = height;
};

/** 计算ktv/urr 修改的 */
const calculatorKtvAndUrrByUpdate = async () => {
   const compareMap = [
      { stTestName: '透析前尿素氮', key: 'dataNiaosu1' },
      { stTestName: '透析后尿素氮', key: 'dataNiaosu2' },
      { stTestName: '透析时间', key: 'dataMedPeriod' },
      { stTestName: '透前体重', key: 'dataWeight1' },
      { stTestName: '透后体重', key: 'dataWeight2' },
   ];
   const params: any = {};
   const blanks: string[] = [];
   editManyFeeForm.value.children.forEach((e) => {
      const item = compareMap.find((v) => v.stTestName === e.itemSystemName);
      if (item) {
         console.log(+e.itemResult);
         if (e.itemResult === '' || typeof +e.itemResult !== 'number' || isNaN(+e.itemResult)) {
            blanks.push(e.itemSystemName);
         }
         params[item.key] = e.itemResult;
      }
   });
   if (blanks.length > 0) return ElMessage.warning(`${blanks.join('、')}为空或不为数字`);
   addLoading.value = true;
   try {
      const { data } = await handCalculatorKtvAndUrrApi(params);
      const urrIndex = editManyFeeForm.value.children.findIndex((e) => e.itemSystemName === '计算URR');
      const ktvIndex = editManyFeeForm.value.children.findIndex((e) => e.itemSystemName === 'KT/V (计算KT/V)');
      if (urrIndex !== -1) {
         editManyFeeForm.value.children[urrIndex].itemResult = data?.URR;
      }
      if (ktvIndex !== -1) {
         editManyFeeForm.value.children[ktvIndex].itemResult = data?.Ktv;
      }
   } finally {
      addLoading.value = false;
   }
};

/**
 * 计算ktv/URR 新增的
 */
const calculatorKtvAndUrr = async () => {
   const compareMap = [
      { stTestName: '透析前尿素氮', key: 'dataNiaosu1' },
      { stTestName: '透析后尿素氮', key: 'dataNiaosu2' },
      { stTestName: '透析时间', key: 'dataMedPeriod' },
      { stTestName: '透前体重', key: 'dataWeight1' },
      { stTestName: '透后体重', key: 'dataWeight2' },
   ];
   const params: any = {};
   const blanks: string[] = [];
   addFeeForm.value.details.forEach((e) => {
      const item = compareMap.find((v) => v.stTestName === e.stName);
      if (item) {
         console.log(+e.testValue);
         if (e.testValue === '' || typeof +e.testValue !== 'number' || isNaN(+e.testValue)) {
            blanks.push(e.testItem);
         }
         params[item.key] = e.testValue;
      }
   });
   if (blanks.length > 0) return ElMessage.warning(`${blanks.join('、')}为空或不为数字`);
   addLoading.value = true;
   try {
      const { data } = await handCalculatorKtvAndUrrApi(params);
      const urrIndex = addFeeForm.value.details.findIndex((e) => e.stName === '计算URR');
      const ktvIndex = addFeeForm.value.details.findIndex((e) => e.stName === 'KT/V (计算KT/V)');
      if (urrIndex !== -1) {
         addFeeForm.value.details[urrIndex].testValue = data?.URR;
      }
      if (ktvIndex !== -1) {
         addFeeForm.value.details[ktvIndex].testValue = data?.Ktv;
      }
   } finally {
      addLoading.value = false;
   }
};
const funJg=(col:any,row:any)=>{
   const name=col.系统默认名称;
   if(row.results.length>0){
      const x= row.results.findIndex((e:any)=>{return e.itemSystemName===name})
      if(x==-1){
         return ''
      }else{
         if(row.results[x].resultFlag==='正常'){
            return `<span style="color: black;">${row.results[x].itemResult}</span>` 
         }else if(row.results[x].resultFlag==='偏高'){
            return `<span style="color: red;">${row.results[x].itemResult}</span>` 
         }else if(row.results[x].resultFlag==='高'){
            return `<span style="color: red;">${row.results[x].itemResult}</span>` 
         }
         else if(row.results[x].resultFlag==='偏低'){
            return `<span style="color: #409EFF;">${row.results[x].itemResult}</span>` 
         }else if(row.results[x].resultFlag==='低'){
            return `<span style="color: #409EFF;">${row.results[x].itemResult}</span>` 
         } else {
            return `<span>${row.results[x].itemResult}</span>` 
         }
			
      }
   }else{
      return ''
   }
}

// 第二步：暴露方法
defineExpose({ getData })
onMounted(async () => {
   setTableHeight();
   // await getPatients();
   // @ts-ignore
   if (patientsInfo.value.code) {
      // @ts-ignore
      searchForm.value.patCode = patientsInfo.value.code
   } else {
      // ElMessage.warning('请选择患者');
   }
   getFeeItems();
});
</script>

<style  lang="scss">

.lisview{
    display: flex; /* 使用Flexbox布局 */
    flex-wrap: wrap;
    .child {
        margin: 5px; /* 为了清楚地展示间隔 */
        padding: 10px;
        border: 1px solid #000;
    }
<style lang="scss" scoped>
* {
   box-sizing: border-box;
}
    


.inspection_project_report_container {
   .card_box {
      padding: 15px;
      background: #fff;
      padding-bottom: 0;
      &.card_box_search {
         padding-bottom: 0;
         margin-bottom: 10px;
      }
   }
   .search_inp_box {
      padding: 10px;
      background-color: #6babfa;
   }
   .fee_item_box {
      margin-bottom: 20px;
   }
   .item_res_text {
      &:hover {
         color: #409eff !important;
         cursor: pointer;
      }
   }
   .m_b_20 {
      margin-bottom: 20px;
   }
   .result_box {
      overflow-y: auto;
   }
}
</style>

<style lang="scss">
.patient_table {
   .success-row {
      background: rgb(197.7, 225.9, 255);
            color: #409EFF;
   }
}
</style>