transitPlatForm-Vue3/src/views/regional/dict/itemvs/index.vue

<template>
  <div class="cate_container">
    <!-- 左侧表格 -->
    <div class="left_box">
      <el-input v-model="leftSearchValue" placeholder="请输入类别名称或代号" class="mb10" />
      <el-table :data="filteredLeftTableData" @row-click="handleLeftRowClick" highlight-current-row border
        :cell-style="cellStyle" height="80vh" style="width: 100%;">
        <el-table-column prop="itemclassCode" label="分单类别代号" width="110" />
        <el-table-column prop="itemclassName" label="类别名称" />
      </el-table>
    </div>

    <!-- 中间表格 -->
    <div class="m_box">
      <el-input v-model="middleSearchValue" placeholder="请输入项目名称或代号" class="mb10" />
      <el-table :data="filteredMiddleTableData" @row-dblclick="handleMiddleRowDblClick" highlight-current-row
        style="width: 100%;" height="80vh" border>
        <el-table-column prop="itemcode" label="项目代号" width="100" />
        <el-table-column prop="itemname" label="当前类别包含门诊项目" />
      </el-table>
    </div>

    <!-- 右侧表格 -->
    <div class="right_box">
      <el-row :gutter="20" class="mb10">
        <el-col :span="12">
          <el-input v-model="rightSearchValue" placeholder="请输入项目名称或代号" />
        </el-col>
        <el-col :span="12">
          <el-select v-model="compareStatus" placeholder="请选择" style="width: 200px;" @change="handleSelectChange">
            <el-option label="未对照" value="1"></el-option>
            <el-option label="其他类别项目" value="2"></el-option>
          </el-select>
        </el-col>
      </el-row>


      <el-table :data="filteredRightTableData" @row-dblclick="handleRightRowDblClick" highlight-current-row
        height="80vh" border style="width: 100%;">
        <el-table-column prop="itemclass" label="类别" width="100">
          <template #default="{ row }">
            {{leftTableData.find(item => item.itemclassCode === row.itemclass)?.itemclassName}}
          </template>
        </el-table-column>
        <el-table-column prop="itemcode" label="门诊项目代号" width="100" />
        <el-table-column prop="itemname" label="门诊项目名称" />
        <!-- <el-table-column prop="zjf" label="助记符" /> -->
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { feeitemclassList, feeitemvsList, noCompareList, feeitemvAdd, feeitemvDel } from '@/api/mzcx/index';
import { classCom } from '@/utils/classCom';
import { ElMessage, ElMessageBox } from 'element-plus'
import { getFirstLetter } from '@/utils/pinyin';

interface FeeItem {
  itemcode: string;
  itemname: string;
  zjf?: string;
  xh?: number;
  itemclassCode?: string;
}

const leftSearchValue = ref('');
const middleSearchValue = ref('');
const rightSearchValue = ref('');
const compareStatus = ref('1');
const leftTableData = ref<Array<{ itemclassCode: string; itemclassName: string }>>([]);
const middleTableData = ref<FeeItem[]>([]);
const rightTableData = ref<FeeItem[]>([]);
const itemclassCodeData = ref<{ itemclassCode?: string; itemclassName?: string }>({});

// 过滤后的数据 
const filteredLeftTableData = computed(() => {
  const searchVal = leftSearchValue.value.toLowerCase().trim();
  if (!searchVal) return leftTableData.value;

  return leftTableData.value.filter(item =>
    item.itemclassCode.toLowerCase().includes(searchVal) ||
    item.itemclassName.toLowerCase().includes(searchVal) ||
    item.pinyin.toLowerCase().includes(searchVal)
  );
});

const filteredMiddleTableData = computed(() => {
  const searchVal = middleSearchValue.value.toLowerCase().trim();
  if (!searchVal) return middleTableData.value;

  return middleTableData.value.filter(item =>
    item.itemcode.toLowerCase().includes(searchVal) ||
    item.itemname.toLowerCase().includes(searchVal) ||
    item.pinyin.toLowerCase().includes(searchVal)
  );
});

const filteredRightTableData = computed(() => {
  const searchVal = rightSearchValue.value.toLowerCase().trim();
  if (!searchVal) return rightTableData.value;

  return rightTableData.value.filter(item =>
    item.itemcode.toLowerCase().includes(searchVal) ||
    item.itemname.toLowerCase().includes(searchVal) ||
    item.pinyin.toLowerCase().includes(searchVal)
  );
});

const handleSelectChange = () => {
  noCompareList({ itemclass: itemclassCodeData.value.itemclassCode, compareStatus: compareStatus.value }).then((res: any) => {
    rightTableData.value = processTableData(res.data, 'itemname');
  }).catch((err: any) => {
    console.error('请求数据失败：', err);
  });
};
// 左侧表格行点击事件 
const handleLeftRowClick = (row: any) => {
  itemclassCodeData.value = row;
  feeitemvsList({ itemclass: itemclassCodeData.value.itemclassCode }).then((res: any) => {
    middleTableData.value = processTableData(res.data, 'itemname');
  }).catch((err: any) => {
    console.error('请求数据失败：', err);
  });
  noCompareList({ itemclass: itemclassCodeData.value.itemclassCode, compareStatus: compareStatus.value }).then((res: any) => {
    rightTableData.value = processTableData(res.data, 'itemname');
  }).catch((err: any) => {
    console.error('请求数据失败：', err);
  });
};

// 中间表格行双击事件 
const handleMiddleRowDblClick = (row: any) => {
  feeitemvDel({ ...row, itemclass: '' }).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg)
      handleLeftRowClick(itemclassCodeData.value)
    }
  })

};

// 右侧表格行双击事件 
const handleRightRowDblClick = (row: any) => {
  feeitemvDel({ ...row, itemclass: itemclassCodeData.value.itemclassCode }).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg)
      handleLeftRowClick(itemclassCodeData.value)
    }
  })
};

const getList = () => {
  feeitemclassList({ pageSize: 999, pageNum: 1 }).then((res: any) => {
    if (res.code == 200) {
      leftTableData.value = processTableData(res.rows, 'itemclassName')
      handleLeftRowClick(res.rows[0]);
    }
  })
}

const processTableData = (data, calss) => {
  return data.map((item) => {
    const pinyinMap = {};
    pinyinMap['pinyin'] = getFirstLetter(item[calss]).toLowerCase();
    return { ...item, ...pinyinMap };
  });
};
getList()

// 单元格样式
const cellStyle = ({ row, column, rowIndex, columnIndex }: {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}) => {
  if (column.label == "类别名称") {
    const bgColor = classCom.decimalToHexColor(row.itemclassBkcolor);
    const textColor = classCom.getContrastTextColor(bgColor);
    return {
      backgroundColor: `${bgColor}`,
      color: textColor,
    };
  }

}
</script>

<style scoped>
.cate_container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}


.left_box {
  width: 20%;
  padding: 10px;
  background-color: rgb(214, 240, 252);
}

.m_box {
  width: 30%;
  padding: 10px;
  background-color: rgb(214, 240, 252);
}

.right_box {
  width: 49%;
  padding: 10px;
  background-color: rgb(214, 240, 252);
}
</style>