lis8.0-vue3/src/views/liswork/labItem/tab/referenceValueDetails.vue

<template>
<!--参考值明细-->
<div>
  <div class="modifyClass">
    <el-button type="primary" @click="onAddClick">增加</el-button>
    <el-button type="primary" @click="onDelClick">删除</el-button>
  </div>
  <CustomTable ref="tableRefUp" :data="dataListUp" :columns="columnsUp" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
        :config="tableConfig" @row-click="rowClick">
    <template #xb="{row}">
      <el-select v-model="row.xb" clearable>
        <el-option
          v-for="item in optionsXb"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #cp_nl1="{row}">
      <el-input v-model="row.cp_nl1" class="full-width-input"></el-input>
    </template>
    <template #cp_nldw1="{row}">
      <el-select v-model="row.cp_nldw1" clearable>
        <el-option
          v-for="item in optionsNLDW"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #cp_nl2="{row}">
      <el-input v-model="row.cp_nl2" class="full-width-input"></el-input>
    </template>
    <template #cp_nldw2="{row}">
      <el-select v-model="row.cp_nldw2" clearable>
        <el-option
          v-for="item in optionsNLDW"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #bblx="{row}">
      <SelectTable v-model:data="row.bblx" :fields="fields" :tableData="bblxOptions" label="label"
      value="label" objKey="label" :border="true" />
    </template>
    <template #slzq="{row}">
      <el-select v-model="row.slzq" clearable>
        <el-option
          v-for="item in optionsSLZQ"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #zd="{row}">
      <el-input v-model="row.zd" class="full-width-input"></el-input>
    </template>
    <template #ckxx="{row}">
      <el-input v-model="row.ckxx" class="full-width-input"></el-input>
    </template>
    <template #cksx="{row}">
      <el-input v-model="row.cksx" class="full-width-input"></el-input>
    </template>
    <template #alterxx="{row}">
      <el-input v-model="row.alterxx" class="full-width-input"></el-input>
    </template>
    <template #altersx="{row}">
      <el-input v-model="row.altersx" class="full-width-input"></el-input>
    </template>
    <template #dyck="{row}">
      {{ row.ckxx + '--' + row.cksx }}
    </template>
  </CustomTable> 
  <el-row>
    仪器特定参考值:
  </el-row>
  <div class="modifyClass">
    <el-button type="primary" @click="">增加</el-button>
    <el-button type="primary" @click="">删除</el-button>
  </div>
   <CustomTable ref="tableRefDown" :data="dataListDown" :columns="columnsDown" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
        :config="tableConfig"/>
</div>
</template>

<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import { ref } from 'vue';
import {getDictData,dictData} from '@/hooks'
import SelectTable from '@/components/SelectTable/index.vue'
import { ElMessageBox } from 'element-plus';

const props = defineProps({
  dataList: {
    type: Array,
    default: []
  }
});

const optionsXb = [
  {value: '1' ,label: '男'},
  {value: '2' ,label: '女'},
]

const optionsNLDW = [
  {value: '1' ,label: '岁'},
  {value: '2' ,label: '月'},
  {value: '3' ,label: '天'},
  {value: '4' ,label: '时'},
]

const optionsSLZQ = ref<any>([])

const fields = ref(
  [
    { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
    { prop: 'label', label: '名称', width: 150, enablePinyinSearch: true },
  ]
)
const bblxOptions = ref<Array<{ zddh: string; zdmc: string }>>([]);

const tableRefUp = ref<any>();
const tableRefDown = ref<any>();
const dataListUp = ref(props.dataList);
const dataListDown = ref();
const columnsUp = ref([
  { prop: 'xh', label: '序号', visible: false, align: 'center', width: 70 },
  { prop: 'xb', label: '性别', visible: true, align: 'center',slot: 'xb', width: 70 },
  { prop: 'cp_nl1', label: '年龄下限', visible: true, align: 'center',slot:'cp_nl1', width: 100 },
  { prop: 'cp_nldw1', label: '年龄单位', visible: true, align: 'center',slot:'cp_nldw1', width: 70 },
  { prop: 'cp_nl2', label: '年龄上限', visible: true, align: 'center',slot: 'cp_nl2', width: 100 },
  { prop: 'cp_nldw2', label: '年龄单位', visible: true, align: 'center',slot: 'cp_nldw2', width: 100 },
  { prop: 'bblx', label: '标本类型', visible: true, align: 'center',slot: 'bblx', width: 100 },
  { prop: 'slzq', label: '生理周期', visible: true, align: 'center',slot: 'slzq', width: 100 },
  { prop: 'zd', label: '诊断', visible: true, align: 'center',slot:'zd', width: 100 },
  { prop: 'ckxx', label: '参考下限', visible: true, align: 'center',slot:'ckxx', width: 100 },
  { prop: 'cksx', label: '参考上限', visible: true, align: 'center',slot:'cksx', width: 100 },
  { prop: 'alterxx', label: '危急值下限', visible: true, align: 'center',slot:'alterxx', width: 100 },
  { prop: 'altersx', label: '危急值上限', visible: true, align: 'center',slot:'altersx', width: 100 },
  { prop: 'dyck', label: '参考值', visible: true, align: 'center',slot:'dyck', width: 100 },
]);
const columnsDown = ref([
  { prop: 'xb', label: '性别', visible: true, align: 'center',slot: 'xb', width: 100 },
  { prop: 'cp_nl1', label: '年龄下限', visible: true, align: 'center', width: 100 },
  { prop: 'cp_nldw1', label: '年龄单位', visible: true, align: 'center', width: 100 },
  { prop: 'cp_nl2', label: '年龄上限', visible: true, align: 'center', width: 100 },
  { prop: 'cp_nldw2', label: '年龄单位', visible: true, align: 'center', width: 100 },
  { prop: 'bblx', label: '标本类型', visible: true, align: 'center', width: 100 },
  { prop: 'slzq', label: '生理周期', visible: true, align: 'center', width: 100 },
  { prop: 'zd', label: '诊断', visible: true, align: 'center', width: 100 },
  { prop: 'ckxx', label: '参考下限', visible: true, align: 'center', width: 100 },
  { prop: 'cksx', label: '参考上限', visible: true, align: 'center', width: 100 },
  { prop: 'alterxx', label: '危急值下限', visible: true, align: 'center', width: 100 },
  { prop: 'altersx', label: '危急值上限', visible: true, align: 'center', width: 100 },
  { prop: 'dyck', label: '参考值', visible: true, align: 'center', width: 100 },
]);
const tableConfig = ref({
  border: true, // 边框
  height: '35vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})
const selectRow = ref()


//退拽属性
const handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columnsUp.value = data.columns;
  columnsDown.value = data.columns;
}

//序号最大值
const maxXh = computed(() => {
  return dataListUp.value.length > 0 ? Math.max(...dataListUp.value.map((item:any) => item.xh || 0)) : 0;
});


const onAddClick = () => {
  const newData = {
    xh: maxXh.value + 1
  }
  dataListUp.value.push(newData)
}

const onDelClick = async () => {
  console.log('删除',selectRow.value)
  if(selectRow.value){
     await ElMessageBox.confirm('是否要删除选中的数据?','警告',
    { confirmButtonText: 'OK',cancelButtonText: 'Cancel',type: 'warning',});
    dataListUp.value = dataListUp.value.filter((item:any) => item.xh !== selectRow.value.xh)
  }
}

const rowClick = (row:any) => {
  selectRow.value = row
}

onActivated( async ()=>{
  //加载字典数据
  await getDictData('BT','SLZQ')
  bblxOptions.value = dictData.value.BT || []
  optionsSLZQ.value = dictData.value.SLZQ || []
})

</script>


<style lang="scss" scoped>
::v-deep .el-input__inner {
  text-align: center;
}
</style>