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="yqList" :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 v-model="row.zkxm" />
    </template>
    <template #cksx="{row}">
      <el-input v-model="row.cksx" class="full-width-input"></el-input>
    </template>
    <template #ckxx="{row}">
      <el-input v-model="row.ckxx" class="full-width-input"></el-input>
    </template>
    <template #dyckz="{row}">
      <el-input v-model="row.dyckz" 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'

const props = defineProps({
  // 显示数据
  dataList: {
    type: Array<XmInfoVs>,
    required: true,
    default: () => []
  },
  formData: {
    type: Object,
    required: false,
    default: {}
  }
});



//const yq = ref<string>('');
const tableRef = ref<any>();
const yqList = ref<Array<XmInfoVs>>([]);
const columns = ref([
  { 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: 'cksx', label: '参考上限', visible: true, align: 'center',slot: 'cksx', width: 100 },
  { prop: 'ckxx', label: '参考下限', visible: true, align: 'center',slot: 'ckxx', 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 handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columns.value = data.columns;
}

const handInputChange = () => {
  // yqList.value = yqList.value.filter(item => {
  //   return item.yq.includes(yq.value) || item.yqmc.includes(yq.value);
  // });
  // if (yq.value === '') {
  //   yqList.value = props.dataList;
  // }
}

const onClickAdd = () => {
  const newData: XmInfoVs = {
    yq: '',
    xmid: props.formData.xmid,
  }
  yqList.value.push(newData)
}

const onClickDel = async () => {
  if(selectRow.value){
     await ElMessageBox.confirm('是否要删除选中的数据?','Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });
    yqList.value = yqList.value.filter(item => item.yq != selectRow.value.yq);
  }
}

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

onActivated(() =>{
  yqList.value = Array.isArray(props.dataList) ? props.dataList : [];
})
</script>