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

<template>
  <!-- 使用仪器 -->
  <div>
    <div>
      <el-button type="primary" @click="onClickAdd">新增</el-button>
      <el-button type="primary" @click="onClickDel">删除</el-button>
    </div>
    <CustomTable ref="tableRef" :data="modelParam.userInstrData" :columns="columns" :enable-column-drag="true"
      @column-drag-end="handleColumnDragEnd" :config="tableConfig" @row-click="onRowClick">
      <template #yq="{ row }">
        <YQSelectTable v-model:data="row.yq" placeholder="请输入仪器名称" />
      </template>
      <template #xs="{ row }">
        <el-input v-model="row.xs" class="full-width-input" />
      </template>
      <template #zkxm="{ row }">
        <el-checkbox :checked="row.zkxm === '1'" @change="(val: any) => row.zkxm = val ? 1 : 0" />
      </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 #dyckz="{ row }">
        <el-input :model-value="getDyckz(row)" disabled class="full-width-input"></el-input>
      </template>
    </CustomTable>
  </div>
</template>


<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import { XmInfoVs } from '@/types';
import YQSelectTable from '@/components/SelectTable/YQSelectTable/index.vue'
import { ElMessageBox } from 'element-plus'
import { deleteXmInfoVs } from '@/api/liswork/labItem/labItemApi';


const modelParam = defineModel<any>()
const tableRef = ref<any>();
const columns = ref([
  { prop: 'vsid', label: '对照编码', visible: false, align: 'center' },
  { prop: 'yq', label: '仪器代号', visible: true, align: 'center', slot: 'yq', width: 150 },
  { prop: 'xs', label: '调整系数', visible: true, align: 'center', slot: 'xs', width: 100 },
  { prop: 'zkxm', label: '质控', visible: true, align: 'center', slot: 'zkxm', width: 40 },
  { prop: 'ckxx', label: '参考下限', visible: true, align: 'center', slot: 'ckxx', width: 100 },
  { prop: 'cksx', label: '参考上限', visible: true, align: 'center', slot: 'cksx', width: 100 },
  { prop: 'dyckz', label: '打印参考值', visible: true, align: 'center', slot: 'dyckz', width: 100 },
]);
const tableConfig = ref({
  border: true, // 边框
  height: '85vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})
const selectRow = ref<XmInfoVs>({
  yq: '',
  xmid: 0
})

const emit = defineEmits(['refreshTabData'])

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

const handInputChange = () => {

}

const onClickAdd = () => {
  const newData: XmInfoVs = {
    yq: '',
    xmid: modelParam.value.basicData.xmid,
  }
  modelParam.value.userInstrData.push(newData)
}

const onClickDel = async () => {
  if (selectRow.value) {
    await ElMessageBox.confirm('是否要删除选中的数据?', 'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });
    await deleteXmInfoVs({ vsid: selectRow.value.vsid || 0 })
    emit('refreshTabData', modelParam.value.basicData)
  }
}

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

const getDyckz = (row: XmInfoVs) => {
  if (!row.cksx && !row.ckxx) {
    return '';
  } else {
    return `${row.ckxx || ''}--${row.cksx || ''}`;
  }

}

onActivated(() => {

})

</script>