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="modelParam.commonlyValuesData" :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 class="full-width-input">
          <el-option v-for="item in dictData.VA" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </template>
      <template #jgbz="{ row }">
        <el-select v-model="row.jgbz" clearable class="full-width-input">
          <el-option v-for="item in dictData.LF" :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 { ElMessage, ElMessageBox } from 'element-plus';
import { delXmValNewService } from '@/api/liswork/labItem/labItemApi'


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

watch(() => modelParam.value.commonlyValuesData, () => {
  selectRow.value = null
})

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

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

//序号最大值
const maxXh = computed(() => {
  return modelParam.value.commonlyValuesData.length > 0 ? modelParam.value.commonlyValuesData.length + 1 : 0;
});

const bClickAdd = () => {
  const newData = {
    xmid: modelParam.value.basicData.xmid,
    qz: '',
    srm: '',
    jgbz: '',
    xh: maxXh.value
  }
  modelParam.value.commonlyValuesData.push(newData);

}

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

}


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


</script>

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