101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
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="tableList" :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 { ElMessageBox } from 'element-plus';
|
|
import { ref } from 'vue';
|
|
|
|
|
|
const props = defineProps({
|
|
dataList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
});
|
|
|
|
const tableRef = ref();
|
|
const tableList = ref<Array<XmTextresultNew>>([])
|
|
const columns = ref([
|
|
{ prop: 'textresult', label: '文字描述', visible: true, align: 'center',slot: 'textresult', width: 500,showOverflowTooltip:false },
|
|
]);
|
|
const tableConfig = ref({
|
|
border: true, // 边框
|
|
height: '80vh', // 高度
|
|
highlightCurrentRow: true, // 高亮当前行
|
|
// cellStyle: cellStyleHd
|
|
})
|
|
|
|
|
|
//退拽属性
|
|
const handleColumnDragEnd = (data: any) => {
|
|
// 更新列配置
|
|
columns.value = data.columns;
|
|
}
|
|
|
|
const selectRow = ref()
|
|
|
|
//序号最大值
|
|
const maxXh = computed(() => {
|
|
return tableList.value.length > 0 ? Math.max(...tableList.value.map((item:any) => item.xh || 0)) : 0;
|
|
});
|
|
|
|
const rowClick = (row:any) => {
|
|
selectRow.value = row
|
|
}
|
|
|
|
|
|
const onAddClick = () => {
|
|
const newData: XmTextresultNew = {
|
|
xmid: props.formData.xmid,
|
|
xmdh: props.formData.xmdh,
|
|
xh: maxXh.value + 1
|
|
}
|
|
tableList.value.push(newData)
|
|
}
|
|
|
|
const onDelClick = async ()=> {
|
|
if(selectRow.value){
|
|
await ElMessageBox.confirm('是否要删除选中的数据?','警告',
|
|
{ confirmButtonText: 'OK',cancelButtonText: 'Cancel',type: 'warning',});
|
|
tableList.value = tableList.value.filter((item:any) => item.xh != selectRow.value.xh)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
watch(
|
|
() => props.dataList,
|
|
(newVal:any) => {
|
|
tableList.value = newVal;
|
|
}
|
|
);
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-table .cell) {
|
|
padding: 0;
|
|
}
|
|
</style> |