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

<template>
  <div class="app-container">
    <el-row :gutter="10" class="compact-form">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增明细</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="delResultFlag" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除明细</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="changeResultFlag" @click="handleUpdate" v-hasPermi="['system:dict:edit']">保存</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" @click="handleCheck" v-hasPermi="['system:dict:import']">初报</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Download" @click="handleCheck" v-hasPermi="['system:dict:import']">初审</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="Upload" @click="handleUnCheck" v-hasPermi="['system:dict:export']">取消初审</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Download" @click="handleCheck" v-hasPermi="['system:dict:import']">审核</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="Upload" @click="handleUnCheck" v-hasPermi="['system:dict:export']">取消审核</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Edit" @click="handleUnCheck" v-hasPermi="['system:dict:export']">预览</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Edit" @click="handleUnCheck" v-hasPermi="['system:dict:export']">打印</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Upload" @click="handleUnCheck" v-hasPermi="['system:dict:export']">上一个</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Download" @click="handleUnCheck" v-hasPermi="['system:dict:export']">下一个</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="compact-form" >
        <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" >
          <el-form-item class="compact-form" label="" label-width="0px" prop="ybh" >
            <el-col :span="1.5">样本编号</el-col>
            <el-col :span="4.5">
            <el-input v-model="queryParams.ybh" clearable placeholder="样本编号" prefix-icon="Search"  @keyup.enter="handleQueryYbh" @clear="handleQueryYbh" />
            </el-col>
            <el-col :span="1.5"><div>检验日期</div></el-col>
            <el-col :span="3.5">
            <el-date-picker  v-model="queryParams.jyrq" type="date" label-width="20px" placeholder="检验日期" value-format="YYYY-MM-DD" :clearable="false" @change="handleQuery" ></el-date-picker>
            </el-col>
            <el-col :span="1.5"><div>部门组别</div></el-col>
            <el-col :span="3.5">
            <Ddlb
                v-model="queryParams.instrGroup"
                :options="instrGroupOptions"
                placeholder="请选择部门组别"
                @change="handleinstrGroupChange"
                :value="setInstrGroup"
                label-width="40px"
            />
            </el-col><el-col :span="1"><div>仪器</div></el-col>
            <el-col :span="4">
            <Ddlb
                v-model="queryParams.yq"
                :options="instrOptions"
                placeholder="请选择仪器"
                @change="handleYqChange"
                :value="setInstr"
            />
            </el-col>
          </el-form-item>
        </el-form>
    </el-row>

    <el-row :gutter="5">
      <el-col :span="5" :xs="24">
    <div class="compact-form">
      <LabPatForm  v-model:labPat="labPat"  ref="labPatRef"  @save="savelabPat" @reset="resetlabPat" />
    </div>
      </el-col>
      <el-col :span="10" :xs="24">
    <div class="compact-form">
      <LabResultForm ref="labResultRef"
          :tableData="labResuts"
          :tableKey="queryParams"
          @add="addLabResult"
          @delete="deleteLabResults"
          @edit="editLabResult"
          @delfalg="setdelResultFlag"
          @changefalg="setchangeResultFlag"
          @fetchLabResults="fetchLabResults"
      />
    </div>
      </el-col>
      <el-col :span="9" :xs="24">
    <div class="compact-form">
      <LabPatListForm
          :labPatList="labPatList"
          :labPatKey="queryParams"
          :total="total"
          @select="selectJob"
          @search="searchJobs"
          @page-change="pageChange"
      />
    </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  getDate,
  queryLabPatList,
  queryLabResults,
  updateLabPatService,
  queryLabPat,
  check2
} from "../../../api/liswork/work/LisWork.js";
import {querylabInstrList,querylabInstrListByLisgroup} from "../../../api/liswork/dict/LabInstr.js";
import {getComDicts, queryComDictListService} from "../../../api/liswork/dict/ComDict.js";
import LabPatForm from './components/labpat.vue'
import LabResultForm from './components/labresult.vue'
import LabPatListForm from './components/labpatlist.vue'
import Ddlb from './components/ddlb.vue'

const single = ref(true);
const delResultFlag = ref(true);
const changeResultFlag = ref(true);
const loading = ref(true);
const instrGroupOptions = ref([]);
const instrOptions = ref([]);
const labPatList = ref([])
const patdata = reactive({
  form: {},
  labPat: {
    jyrq: '',
    yq: '',
    ybh: '',
    brly:'',
    jzbz:'',
    brdh:'',
    brxm:'',
    brxb:'',
    nl:null,
    nldw:'1',
    ksdh:'',
    ch:'',
    sjys:'',
    sqsj:'',
    cyrq:'',
    dysj:'',
    zd:'',
    bz:'',
    yhdh:'',
    hdys:'',
    jgbz:'0',
    yblx:''
  },
  rules: {}
});
const { labPat } = toRefs(patdata);
const labResuts = ref([])
const total = ref(0)
const currentLabResults = ref([])
const searchText = ref('')
const pageSize = ref(10)
const currentPage = ref(1)
const setInstrGroup=ref('')
const setInstr=ref('')
const yq0=ref('')
const jyrq0=ref('')
const ybh0=ref('')
const querydata = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    jyrq: formatDate(new Date()),
    yq: '1',
    ybh: '1',
    days: 1,
    instrGroup:'#'
  },
  rules: {
    ybh: [],
    jyrq: [],
    instrGroup: [],
    yq: [],
  }
  ,
});
const { queryParams, form, rules } = toRefs(querydata);
//子组件labResult.vue
const labResultRef = ref(null);
//子组件labPatRef.vue
const labPatRef = ref(null);

// 页面载入时获取基本默认值参数信息,后面有扩展需要都放这里
const loadYqConfig = async () => {
  // 使用 .value 获取响应式数据的值
  jyrq0.value='2022-06-19';//formatDate(new Date());
  yq0.value='COBAS';
  ybh0.value='1';
  querydata.queryParams.jyrq = jyrq0.value;
  querydata.queryParams.yq = yq0.value;
  querydata.queryParams.ybh = ybh0.value;
  querydata.queryParams.instrGroup = 'A2';
}
// 加载部门下拉列表
function loadinstrGroupOptions(){
  loading.value = true;
  getComDicts({zdlb: 'GROUP'}).then(response => {
    instrGroupOptions.value = response.data.map(item => ({
      id: item.zddh,
      text: item.zdmc
    }));
    loading.value = false;
    setInstrGroup.value=querydata.queryParams.instrGroup;
  });
  loadYqConfig();
}
// 部门组别变化时更新仪器下拉框
const handleinstrGroupChange = (value) => {
  queryParams.value.instrGroup = value
  // 清空仪器选择并重新加载
 // queryParams.value.yq = '';
  instrOptions.value = [];
  // 加载对应组别的仪器数据
  loadinstrOptions();
}
// 仪器变化时的处理函数
const handleYqChange = (value) => {
  if (value === null || value === '') {
    queryParams.value.yq = yq0.value;
    setInstr.value= yq0.value;
  }else {
    yq0.value=value;
    queryParams.value.yq = value;
     handleQuery();
  }
}
// 加载仪器下拉列表
const loadinstrOptions = () => {
  loading.value = true;
  querylabInstrListByLisgroup({pageNum: 1, pageSize: 100,lisgroup: queryParams.value.instrGroup})
      .then(response => {
        if (response.rows) {
          instrOptions.value =  toRaw(response.rows).map(item => ({
            id: item.yq.trimEnd(),
            text: item.yqmc
          }))
          loading.value = false;
          setInstr.value=querydata.queryParams.yq;
        } else {
          throw new Error('仪器响应数据为空');
        }
      })
      .catch(error => {
        console.error('仪器数据加载失败', error);
        loading.value = false;
      });
 // console.error('aaa', queryParams.value);
  //console.log('test22:', instrOptions.value);
}
//获取服务器时间
const serverDate = computed(() => {
  return formatDate(new Date());
});
//切换仪器或检验日期后重置页码
function resetData(){
  queryParams.value = {
    pageNum: 1,
    pageSize: 15,
  }
  searchText.value = ''
  currentPage.value = 1
  pageSize.value = 15
}
//载入样本列表(右边labpatlist.vue组件)
const fetchlabPatList = async (search = '', page = 1, size = 15) => {
  loading.value = true;
  queryParams.value.pageSize = size;
  queryParams.value.pageNum = page;
  queryLabPatList(queryParams.value).then(response => {
    labPatList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  }) .catch(error => {
    console.error('列表数据加载失败', error);
    loading.value = false;
  });
  }
//载入样本编辑表单(左边labpat.vue组件)
const fetchLabPat = async () => {
  loading.value = true;
  queryLabPat(queryParams.value).then(response => {
    labPat.value = response.data;
    loadingPatLabel();
    loading.value = false;
  }) .catch(error => {
    console.error('列表数据加载失败', error);
    loading.value = false;
  });
}
//载入样本结果表单(中间labresult.vue组件)
const fetchLabResults = async () => {
  loading.value = true;
//  console.log('test', queryParams.value);
  queryLabResults({jyrq: queryParams.value.jyrq,yq: queryParams.value.yq,ybh: queryParams.value.ybh}).then(response => {
  //  console.log('RESULT:', response);
    labResuts.value = response.data;
    loading.value = false;
  }) .catch(error => {
    console.error('列表数据加载失败', error);
    loading.value = false;
  });
}
//保存样本表单
const savelabPat = async (labPat) => {
  // 实际项目中这里应该是API调用
  console.log('保存主表:', labPat)

  if (!labPat.id) {
    // 新增
    labPat.id = Date.now()
    labPatList.value.unshift({...labPat})
  } else {
    // 更新
    const index = labPatList.value.findIndex(item => item.id === labPat.id)
    if (index !== -1) {
      labPatList.value.splice(index, 1, {...labPat})
    }
  }

  alert('保存成功')
}
//重置结果表单
const resetlabPat = () => {
  labResuts.value = []
  currentLabResults.value = []
}
//新增结果列
const addLabResult = async (LabResult) => {
  // 实际项目中这里应该是API调用
  console.log('添加明细:', LabResult)

  if (!LabResult.xh) {
    LabResult.xh = currentLabResults.value.length + 1
  }

  const index = currentLabResults.value.findIndex(item => item.xh === LabResult.xh)
  if (index !== -1) {
    currentLabResults.value.splice(index, 1, {...LabResult})
  } else {
    currentLabResults.value.push({...LabResult})
  }

  alert('添加成功')
}
//删除结果列
const deleteLabResults = async (xhList) => {
  // 实际项目中这里应该是API调用
  console.log('删除明细:', xhList)

  currentLabResults.value = currentLabResults.value.filter(item => !xhList.includes(item.xh))

  alert('删除成功')
}
//修改结果列
const editLabResult = (LabResult) => {
  console.log('编辑明细:', LabResult)
  // 在表单中填充数据
  // 这里不需要做任何事情，因为组件已经绑定了数据
}
//样本列表点击切换样本信息,同步载入左边样本信息表单和中间结果表单
const selectJob = async (job) => {
  // 复制选中的job数据到当前编辑状态
 // Object.assign(labPat.value, {...job})
  queryParams.value.jyrq = job.jyrq;
  queryParams.value.yq = job.yq;
  queryParams.value.ybh = job.ybh;
  checkQuery()
  //await nextTick();
  // 获取对应的明细数据
  await fetchLabPat();
  await fetchLabResults();
}
//样本列表检索时刷新列表信息
const searchJobs = async (text, page, size) => {
  searchText.value = text
  currentPage.value = page
  pageSize.value = size
  loadlabPatList()
}
//样本列表翻页时刷新列表信息
const pageChange = async (page, size) => {
  currentPage.value = page
  pageSize.value = size
  loadlabPatList()
}
//刷新样本列表方法封装
const loadlabPatList = async () => {
  await fetchlabPatList(searchText.value, currentPage.value, pageSize.value)
}
/** 查询服务器时间 */
function getdate() {
  getDate().then(response => {
    serverDate.value= formatDate(new Date(response.data));
  })
}
//日期格式化
function formatDate(date) {
  const year = date.getFullYear();
  // 月份是从0开始的，所以要加1
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day} 00:00:00`;
}
const setdelResultFlag = (value) =>{
  delResultFlag.value=value;
}
const setchangeResultFlag = (value) =>{
  changeResultFlag.value=value;
}
//新增
const handleAdd = () => {
  labResultRef.value?.handleAdd();
};
function handleUpdate(){
}
function handleDelete(){
  labResultRef.value?.handleBatchDelete();
}
function loadingPatLabel(){
 // labPatRef.value?.loadingLabel();
}
function handleCheck(){
  loading.value = true;
  console.log('queryParams:', queryParams.value)
  check2(queryParams.value).then(response => {

    console.log('response:', response)
    loading.value = false;
  }) .catch(error => {
    console.error('审核失败', error);
    loading.value = false;
  });
}
function handleUnCheck(){
}
function handlePrint(){
}
function handleQueryDetail(){
}
//切换仪器或检验日期时载入
const handleQuery= async()=>{
  if (checkQuery()===false) return false
  // resetData();
  await loadlabPatList();
  //暂时默认打开1号样本,后面由参数控制
  querydata.queryParams.ybh='1';
  await handleQueryYbh();
}
//切换样本号时载入
const handleQueryYbh = async()=>{
  if (checkQuery()===false) return false
  await fetchLabPat();
  await fetchLabResults();
}
//主键空置拦截
function checkQuery(){
  if (querydata.queryParams.jyrq === ''|| querydata.queryParams.jyrq === null) {
    querydata.queryParams.jyrq = jyrq0.value
    return false;
  }
  if (querydata.queryParams.yq === ''|| querydata.queryParams.yq === null) {
    querydata.queryParams.yq = yq0.value
    return false;
  }
  if (querydata.queryParams.ybh === ''|| querydata.queryParams.ybh === null) {
    querydata.queryParams.ybh = ybh0.value
    return false;
  }
  jyrq0.value=querydata.queryParams.jyrq
  yq0.value=querydata.queryParams.yq
  ybh0.value=querydata.queryParams.ybh
}

//打开页面需要先初始化的内容都放这里
onMounted(() => {
  loadYqConfig();
  loadinstrGroupOptions(); // 页面加载时获取部门组别数据
  loadinstrOptions();
  loadlabPatList();

})
</script>

<style scoped lang="scss">
.compact-form .el-form-item {
  padding: 5px;
  margin-bottom: 5px;
}

.compact-form .el-form-item__label {
  padding-bottom: 0px;
}
.card-content {
  max-height: 450px; /* 设置最大高度 */
  overflow-y: auto;   /* 超出高度时显示垂直滚动条 */
  padding: 5px;      /* 保持与卡片默认一致的内边距 */
}
.clickable:hover {
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: all 0.3s; /* 平滑过渡效果 */
  color: blue;

}
</style>