<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { reactive, toRefs } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
|
|
interface State {
|
resultList: any[];
|
}
|
|
const state = reactive<State>({
|
resultList: [],
|
});
|
const { resultList } = toRefs(state);
|
const [registerModal] = useModalInner(init);
|
const columns: BasicColumn[] = [
|
{ title: '任务', dataIndex: 'messageType', slots: { default: 'messageType' } },
|
{ title: '原因', dataIndex: 'result', slots: { default: 'result' } },
|
];
|
const [registerTable] = useVxeTable({
|
columns,
|
useSearchForm: false,
|
showTableSetting: false,
|
pagination: false,
|
showIndexColumn: false,
|
height: 400,
|
});
|
|
function init(data) {
|
state.resultList = data;
|
}
|
</script>
|
<template>
|
<BasicModal class="result-modal" v-bind="$attrs" @register="registerModal" title="发送测试" :show-ok-btn="false" width="800px">
|
<BasicVxeTable @register="registerTable" :data-source="resultList">
|
<template #messageType="{ record }">
|
<div class="title" :title="record.messageType">
|
<CheckCircleFilled style="color: #67c23a" v-if="record.isSuccess == '1'" />
|
<CloseCircleFilled style="color: #f56c6c" v-else />
|
<span class="pl-[5px]">{{ record.messageType }}</span>
|
</div>
|
</template>
|
<template #result="{ record }">
|
<span class="error-result" :title="record.result">{{ record.result }}</span>
|
</template>
|
</BasicVxeTable>
|
</BasicModal>
|
</template>
|
