<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { cloneDeep } from 'lodash-es';
|
|
const props = defineProps({
|
list: { type: Array, default: () => [] },
|
dataSetList: { type: Array, default: () => [] },
|
});
|
|
const columns = [
|
{ title: '数据集', dataIndex: 'dataSet', key: 'dataSet', width: 100 },
|
{ title: '每页条数', dataIndex: 'limit', key: 'limit', width: 80 },
|
{ title: '操作', dataIndex: 'action', key: 'action', width: 50 },
|
];
|
const emptyItem: any = { dataSet: '', limit: null };
|
const { createMessage } = useMessage();
|
|
const getDataSetList = computed(() => props.dataSetList.map((o: any) => ({ id: o.fullName, fullName: o.fullName })));
|
|
function handleAdd() {
|
if (props.list.length >= 2) {
|
createMessage.warning('最多只能添加2个数据集');
|
return;
|
}
|
props.list.push(cloneDeep(emptyItem));
|
}
|
function handleDel(index) {
|
props.list.splice(index, 1);
|
}
|
</script>
|
<template>
|
<div>
|
<a-table size="small" row-key="id" class="complex-header-table" :data-source="list" :columns="columns" :pagination="false">
|
<template #bodyCell="{ column, record, index }">
|
<template v-if="column.key === 'dataSet'">
|
<JnpfSelect v-model:value="record.dataSet" placeholder="请选择" :options="getDataSetList" class="!w-[84px]" :dropdown-match-select-width="false" />
|
</template>
|
<template v-if="column.key === 'limit'">
|
<JnpfInputNumber v-model:value="record.limit" placeholder="请输入" class="!w-[64px]" :min="1" />
|
</template>
|
<template v-if="column.key === 'action'">
|
<a-button class="action-btn" type="link" color="error" @click="handleDel(index)" size="small">删除</a-button>
|
</template>
|
</template>
|
</a-table>
|
<div class="table-add-action" @click="handleAdd()">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add">添加</a-button>
|
</div>
|
</div>
|
</template>
|
