lis8.0-vue3/src/views/liswork/Issueorder/index.vue

/**
* @file index.vue 科内开单
* @author: w
* @since: 2026-03-02
*/

<template>
  <div class="app-container">
    <el-row :gutter="10" class="row-box">
      <el-col :span="13" style="height: 100%;">
        <div class="box-shadow">
          <el-row class="top-box">
            <el-col :span="7">
              <el-button type="primary" size="small" @click="saveHandle">保存</el-button>
              <el-button type="primary" size="small" @click="addHandle">新增</el-button>
              <el-button type="danger" size="small" @click="deleteHandle">删除</el-button>
            </el-col>
            <el-col :span="17">
              <div class="tips">
                项目检索： <el-input v-model="searchKey" size="small" style="width: 150px;" @clear="filterDictData"
                  @input="filterDictData" /> &nbsp;
                <el-button type="primary" size="small" @click="BillingHandle">开单项目</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="5" style="height: 100%;">
            <el-col :span="7">
              <Info v-model:labPat="labpat" />
            </el-col>
            <el-col :span="17" style="height: 100%;">
              <div class="xmBoxs">
                <template v-for="item in filterData" :key="item.sflbmc">
                  <div class="title">{{ item.sflbmc }}</div>
                  <el-checkbox-group v-model="checkboxs" @change="handleChecksChange">
                    <el-row>
                      <el-col :span="12" v-for="v in item.children" :key="v.sfxmdh">
                        <el-checkbox :label="v.sfxmdh">
                          {{ v.sfxmmc }}
                        </el-checkbox>
                      </el-col>
                    </el-row>
                  </el-checkbox-group>
                </template>
              </div>
              <div style="height: calc(40% - 30px)">
                <CustomVxeTable :table-data="sqXmList" :columns="sqXmColumns" @cell-dblclick="dbRowclick"
                  :scrollYConfig="{ enabled: true, rSize: 30, height: '100%', }" class="mytable-style">
                  <template #zt="{ row }">
                    申请
                  </template>
                </CustomVxeTable>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="11" style="height: 100%;">
        <div class="box-shadow">
          <el-form :model="queryParams" inline size="small" label-width="5.5rem">
            <el-form-item label="姓名：" prop="brxm">
              <el-input v-model="queryParams.brxm" style="width: 9rem;" />
            </el-form-item>
            <el-form-item label="条码号：" prop="sqh">
              <el-input v-model="queryParams.sqh" style="width: 9rem;" />
            </el-form-item>
            <el-form-item label="状态：" prop="zt">
              <el-select v-model="queryParams.zt" placeholder="请选择" style="width: 9rem;" clearable>
                <el-option label="已申请未打印" value="1" />
                <el-option label="显示所有" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="登记时间：" prop="begdate">
              <el-date-picker v-model="queryParams.begdate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                style="width: 7.5rem;" />&nbsp; -&nbsp;
              <el-date-picker v-model="queryParams.enddate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                style="width: 7.5rem;" />
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
            </el-form-item>
          </el-form>
          <div class="table-box">
            <CustomVxeTable :table-data="labPatList" :loading="loading" :columns="tableColumns"
              @current-change="handleRowClick" size="small"
              :scrollYConfig="{ enabled: true, rSize: 30, height: '100%', }" :row-style="rowStyle"
              :cell-style="cellStyle" class="mytable-style" ref="tableRef" :enable-column-drag="true"
              @column-drag-end="handleColumnDragEnd">
              <template #brxb="{ row }">
                {{ formatDict(row.brxb, 'SX') }}
              </template>
              <template #nldw="{ row }">
                {{ formatDict(row.nldw, 'AU') }}
              </template>
              <template #yblx="{ row }">
                {{ formatDict(row.yblx, 'BT') }}
              </template>

              <template #ksdh="{ row }">
                {{ formatDict(row.ksdh, 'DP') }}
              </template>
              <template #brly="{ row }">
                {{ formatDict(row.brly, 'PT') }}
              </template>

            </CustomVxeTable>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 开单项目设置 -->
    <SetBilling ref="setbilRef" @update="getXmList" />

  </div>
</template>

<script setup>
import Info from './components/info.vue'
import { getDictData, formatDict, dictData } from '@/hooks'
import { queryXmInfoList, saveReqInfo, queryPatList } from '@/api/liswork/order'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { getFirstLetter } from '@/utils/pinyin';
import SetBilling from './components/setBilling.vue'

const labpat = ref({
  zt: '1'
})
const checkboxs = ref([])
const searchKey = ref('')
const loading = ref(false)
const tableRef = useTemplateRef('tableRef')
const labPatList = ref([])
const queryParams = ref({})


const tableColumns = ref([
  { field: 'brdh', title: '病历号', width: 80, align: 'center', resizable: true },
  { field: 'brxm', title: '姓名', width: 40, align: 'center', resizable: true, },
  { field: 'brxb', title: '性别', width: 30, align: 'center', slotName: 'brxb', resizable: true },
  { field: 'sqh', title: '条码号', width: 100, align: 'center', resizable: true, },
  { field: 'zt', title: '状态', width: 40, align: 'center', resizable: true, },
  { field: 'nl', title: '年', width: 30, align: 'center', resizable: true },
  { field: 'nldw', title: '龄', width: 20, align: 'center', slotName: 'nldw', resizable: true },
  { field: 'yblx', title: '标本', width: 50, align: 'center', resizable: true, slotName: 'yblx' },
  { field: 'yhdh', title: '检验医生', width: 60, align: 'center', resizable: true, slotName: 'yhdh' },
  { field: 'ksdh', title: '科室', width: 80, align: 'center', slotName: 'ksdh', resizable: true },
  { field: 'sqsj', title: '登记时间', width: 80, align: 'center', resizable: true },
  { field: 'brly', title: '病人来源', width: 90, align: 'center', slotName: 'brly', resizable: true },
  { field: 'jymd', title: '项目', width: 90, align: 'center', resizable: true },
])

const rowStyle = ({ row }) => {
}

const cellStyle = ({ row, column }) => {
}

const handleRowClick = (row) => {
  row.brxb = row.brxb.trim()
  row.zt = row.zt.trim()
  labpat.value = row
}

const handleQuery = () => {
  queryParams.value.begdate = dayjs(queryParams.value.begdate).format('YYYY-MM-DD') + ' 00:00:00'
  queryParams.value.enddate = dayjs(queryParams.value.enddate).format('YYYY-MM-DD') + ' 23:59:59'
  queryPatList(queryParams.value).then(res => {
    labPatList.value = res.data
  })
}

const saveHandle = () => {
  if (!labpat.value.brdh) return ElMessage.warning('病人代号不能为空！')
  if (!labpat.value.yblx) return ElMessage.warning('样本类型不能为空！')
  if (!sqXmList.value.length) return ElMessage.warning('请选择项目！')
  const data = {
    labReqmain: labpat.value,
    reqInputLisWorkVOList: sqXmList.value
  }
  saveReqInfo(data).then(res => {
    handleQuery()
  })
}

const addHandle = () => {
  labpat.value = {
    zt: '1'
  }
}
const deleteHandle = () => {
}

// 更新列配置
const handleColumnDragEnd = (data) => {

  tableColumns.value = [];

  nextTick(() => {
    tableColumns.value = [...data.columns];
  });
}

const filterData = ref([])
const xmColumns = ref([
  { field: 'sflbmc', title: '类别', align: 'center', resizable: true },
  { field: 'sfxmdh', title: '代号', align: 'center', resizable: true },
  { field: 'sfxmmc', title: '简称', align: 'center', width: 150, resizable: true },
  { field: 'dj', title: '单价', align: 'center', resizable: true },
  { field: 'spec', title: '规格', align: 'center', resizable: true },
  { field: 'yblx', title: '样本', align: 'center', resizable: true },
])

const setbilRef = useTemplateRef('setbilRef')
const BillingHandle = () => {
  setbilRef.value.open()
}

const processedTableData = ref([])

const filterDictData = () => {
  const key = searchKey.value.trim().toLowerCase();

  if (!key) {
    // 空搜索时显示全部预处理数据
    filterData.value = resultList([...processedTableData.value])
    return;
  }

  filterData.value = resultList(processedTableData.value.filter((item) => {
    const matchLabel = item.pinyin.toString().toLowerCase().includes(key);
    return matchLabel;
  })
  )
}

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

const sqXmList = ref([])

const sqXmColumns = ref([
  { field: 'sflbmc', title: '类别', align: 'center', resizable: true },
  { field: 'sfxmdh', title: '代号', align: 'center', resizable: true },
  { field: 'sfxmmc', title: '简称', align: 'center', width: 150, resizable: true },
  { field: 'dj', title: '单价', align: 'center', resizable: true },
  { field: 'spec', title: '规格', align: 'center', resizable: true },
  { field: 'yblx', title: '样本', align: 'center', resizable: true },
  { field: 'zt', title: '状态', align: 'center', resizable: true, slotName: 'zt' },
])

const handleChecksChange = (val) => {
  sqXmList.value = []
  val.forEach(item => {
    const existingItem = processedTableData.value.find((row) => row.sfxmdh == item)
    if (existingItem) {
      sqXmList.value.push(existingItem)
    }
  })

}
const dbRowclick = ({ row }) => {
  const index = sqXmList.value.findIndex((item) => item.sfxmdh == row.sfxmdh)
  if (index > -1) {
    sqXmList.value.splice(index, 1)
  }
}

const getXmList = () => {
  queryXmInfoList().then(res => {
    processedTableData.value = processTableData(res.data);
    filterData.value = resultList([...processedTableData.value])
  })
}

//数据分类
const resultList = (arr) => {
  const categoryList = Array.from(new Set(arr.map(item => item.sflbmc))).map(v => {
    return {
      sflbmc: v,
      children: []
    }
  })

  categoryList.forEach(item => {
    arr.forEach(v => {
      if (item.sflbmc == v.sflbmc) {
        item.children.push(v)
      }
    })
  })

  return categoryList
}

onMounted(() => {
  queryParams.value.begdate = dayjs().format('YYYY-MM-DD')
  queryParams.value.enddate = dayjs().format('YYYY-MM-DD')
  getXmList()
  getDictData('PT', 'SX', 'AU', 'BT', 'DP', 'SRD', 'ZJLX')
})

</script>

<style scoped lang="scss">
.app-container {
  background: #F0F3F8;
}

.box-shadow {
  height: 100%;
  box-shadow: 2px 2px 4px 0px rgba(206, 217, 234, 0.7);
  border-radius: .75rem;
  padding: .5rem;
  background-color: #fff;

  .flex-between {
    margin-bottom: .5rem;
  }
}

.row-box {
  height: 100%;
}

.table-box {
  height: calc(100% - 60px);
}

.el-form-item {
  margin-bottom: 5px;
}

.top-box {
  border-bottom: 1px solid #E6E9ED;
  padding-bottom: 2px;
}

.xmBoxs {
  :deep(.el-checkbox__label) {}

  height: 60%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #817e7e;
    border-radius: 4px;
  }
}

.tips {
  font-style: 15px;
  color: #123d64;
  font-weight: 600;
}

.title {
  font-size: 14px;
  color: #000;
  font-weight: 700;
}
</style>