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

<!-- 常用取值 -->
<template>
<div>
  <div class="modifyClass">
    <el-button type="primary" @click="bClickAdd">增加</el-button>
    <el-button type="primary" @click="bClickDel">删除</el-button>
  </div>
  <CustomTable ref="tableRef" :data="tableList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
        :config="tableConfig" @row-click="handRowClick">
    <template #qz = {row}>
      <el-select v-model="row.qz" clearable allow-create filterable default-first-option>
        <el-option v-for="item in qzOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </template>   
    <template #jgbz = {row}>
      <el-select v-model="row.jgbz" clearable>
        <el-option v-for="item in jgbzOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </template> 
    <template #srm = {row}>
      <el-input v-model="row.srm" class="full-width-input"></el-input>
    </template>
  </CustomTable>
</div>
</template>

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

const props = defineProps({
  formData: {
    type: Object,
    default: {}
  }
});

const modelParam = defineModel<any>()
const emit = defineEmits(['refreshTabData'])

const tableRef = ref<any>();
const tableList = ref<any>();
const columns = ref([
  { prop: 'qz', label: '取值', visible: true, align: 'center', slot:'qz', width: 200 },
  { prop: 'srm', label: '快速输入码', visible: true, align: 'center',slot: 'srm', width: 100 },
  { prop: 'jgbz', label: '结果标志', visible: true, align: 'center', slot: 'jgbz', width: 100 }
]);
const tableConfig = ref({
  border: true, // 边框
  height: '80vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})
const qzOptions = ref()
const selectRow = ref()
const jgbzOptions = ref()

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

watch(
  () => modelParam.value,
  (newVal:any) => {
    tableList.value = [...newVal.commonlyValuesData]; 
  },
  { immediate: true, deep: true } 
);

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

const bClickAdd = () => {
  const newData = {
    xmid: props.formData.xmid,
    qz: '',
    srm: '',
    jgbz: '',
    xh: maxXh.value + 1
  }
  tableList.value.push(newData);

}

const bClickDel = async () => {
  if(selectRow.value){
    await ElMessageBox.confirm('是否要删除选中的数据?','警告',
    {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'});
  //删掉界面上面的数据
  //tableList.value = tableList.value?.filter((item:any) => item.xh != selectRow.value.xh ); 
    await delXmValNewService({xmid:props.formData.xmid,xh:selectRow.value.xh})
    emit('refreshTabData',props.formData)
  }
  
  
}


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

onActivated(async ()=>{
  //默认取值
  await getDictData('VA','LF')
  qzOptions.value = dictData.value.VA
  jgbzOptions.value = dictData.value.LF
  tableList.value =  modelParam.value.commonlyValuesData || []
})


</script>

<style lang="scss" scoped>
</style>