lis8.0-vue3/src/views/liswork/labItem/tab/commmonlyValues.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="dataList" :columns="columns" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd" 
        :config="tableConfig" @row-click="handRowClick">
    <template #qz>
      <el-select v-model="selectValue" clearable>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>    
  </CustomTable>
</div>
</template>

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

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

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

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

const init = () => {
  options.value = {...dictData.value}
}

const bClickAdd = () => {
  const newData: XmValNew = {
    xmid: props.formData.xmid,
    qz: '',
    srm: '',
    jgbz: ''
  }
  console.log('@@新增行：',newData);
  dataList.value?.push(newData);
}

const bClickDel = async () => {
  await ElMessageBox.confirm('是否要删除选中的数据?','Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  );
  //删掉界面上面的数据
  dataList.value = dataList.value?.filter(item => item.xh != selectRow.value.xh ); 
}


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

onMounted(()=>{
  //默认取值
  getDictData('VA')
  init()
   console.log('常用取值：',props.formData);
})


</script>