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

<template>
  <!-- 常见描述 -->
  <div>
    <div class="modifyClass">
      <el-button type="primary" @click="onAddClick">增加</el-button>
      <el-button type="primary" @click="onDelClick">删除</el-button>
    </div>
    <CustomTable ref="tableRef" :data="modelParam.commonDescriptionsData" :columns="columns" :enable-column-drag="true"
      @column-drag-end="handleColumnDragEnd" :config="tableConfig" @row-click="rowClick">
      <template #textresult="{ row }">
        <el-input type="textarea" v-model="row.textresult" class="full-width-input" autosize></el-input>
      </template>
    </CustomTable>
  </div>
</template>


<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import { XmTextresultNew } from '@/types';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';
import { delXmTextresultNew } from '@/api/liswork/labItem/labItemApi';

const modelParam = defineModel<any>()

watch(() => modelParam.value.commonDescriptionsData, (val) => {
  selectRow.value = null
})
const tableRef = ref();
const columns = ref([
  { prop: 'textresult', label: '文字描述', visible: true, align: 'center', slot: 'textresult', width: 500, showOverflowTooltip: false },
]);
const tableConfig = ref({
  border: true, // 边框
  height: '78vh', // 高度
  // highlightCurrentRow: true, // 高亮当前行
  // cellStyle: cellStyleHd
})


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

const selectRow = ref()
const emit = defineEmits(['refreshTabData'])

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

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


const onAddClick = () => {
  const newData: XmTextresultNew = {
    xmid: modelParam.value.basicData.xmid,
    xmdh: modelParam.value.basicData.xmdh,
    xh: maxXh.value,
    textresult: ''
  }
  modelParam.value.commonDescriptionsData.push(newData)
}

const onDelClick = () => {
  if (!selectRow.value) return ElMessage.warning('请选择要删除的数据！');
  ElMessageBox.confirm('是否要删除选中的数据?', '警告',
    { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(() => {
      delXmTextresultNew({ xmid: modelParam.value.basicData.xmid, xh: selectRow.value.xh }).then((res: any) => {
        if (res.code == 0) {
          modelParam.value.commonDescriptionsData = modelParam.value.commonDescriptionsData.filter((item: any) => item.xh != selectRow.value.xh)
        }
      })
    })
}

</script>

<style lang="scss" scoped>
:deep(.el-table .cell) {
  padding: 0;
}
</style>