<script lang="ts" setup>
|
import { computed, onMounted } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { getDataTypeText } from '@jnpf/utils';
|
|
import { cloneDeep } from 'lodash-es';
|
import Sortablejs from 'sortablejs';
|
|
import { $t } from '#/locales';
|
|
import FieldForm from './FieldForm.vue';
|
|
const props = defineProps({
|
list: { type: Array, default: () => [] },
|
type: { type: Number, default: 0 },
|
scrollY: { type: String, default: 'calc(50vh - 218px)' },
|
});
|
|
const emit = defineEmits(['register', 'itemClick']);
|
|
const { createConfirm } = useMessage();
|
const [registerFieldForm, { openModal: openFieldFormModal }] = useModal();
|
|
const getColumns = computed(() => {
|
const dragItem = { title: '拖动', dataIndex: 'drag', key: 'drag', align: 'center', width: 50 };
|
const actionItem = { title: '操作', dataIndex: 'action', key: 'action', width: 70 };
|
const columns = [
|
{ title: '参数名称', dataIndex: 'field', key: 'field' },
|
{ title: '参数类型', dataIndex: 'dataType', key: 'dataType', width: 80 },
|
];
|
const columns_ = [
|
{ title: '字段名称', dataIndex: 'field', key: 'field', width: 110 },
|
{ title: '映射字段', dataIndex: 'defaultValue', key: 'defaultValue', width: 110 },
|
];
|
const list = props.type === 0 ? columns : columns_;
|
return [dragItem, ...list, actionItem];
|
});
|
|
function handleItemClick(record) {
|
emit('itemClick', record);
|
}
|
function addOrUpdateHandle(item?) {
|
openFieldFormModal(true, { item, list: props.list });
|
}
|
function remove(index) {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: `此操作删除该${props.type === 0 ? '参数' : '字段'}, 是否继续?`,
|
onOk: () => {
|
props.list.splice(index, 1);
|
},
|
});
|
}
|
function reload(type, item) {
|
const data = cloneDeep(item);
|
if (type == 'add') {
|
props.list.push(data);
|
} else {
|
const index = props.list.findIndex((res: any) => res.id === data.id);
|
if (index != -1) props.list[index] = data;
|
}
|
}
|
function initSort(className) {
|
const table: any = document.querySelector(`.${className} .ant-table-tbody`);
|
Sortablejs.create(table, {
|
handle: '.drag-handler',
|
animation: 150,
|
easing: 'cubic-bezier(1, 0, 0, 1)',
|
onStart: () => {},
|
onEnd: ({ newIndex, oldIndex }: any) => {
|
setNodeSort(props.list, oldIndex - 1, newIndex - 1);
|
},
|
});
|
}
|
function setNodeSort(data: any, oldIndex: any, newIndex: any) {
|
const currRow = data.splice(oldIndex, 1)[0];
|
data.splice(newIndex, 0, currRow);
|
}
|
|
onMounted(() => {
|
props.type === 0 ? initSort('params-table') : initSort('field-table');
|
});
|
</script>
|
<template>
|
<div class="field-table-box">
|
<div class="title">
|
<span> {{ type === 0 ? '接口参数' : '字段列表' }} <BasicHelp :text="type === 0 ? '接收方式:Body/json' : '设置接口返回字段'" /> </span>
|
</div>
|
<a-table
|
size="small"
|
row-key="id"
|
class="list"
|
:class="type === 0 ? 'params-table' : 'field-table'"
|
:data-source="list"
|
:columns="getColumns"
|
:scroll="{ x: undefined, y: scrollY }"
|
:pagination="false">
|
<template #bodyCell="{ column, record, index }">
|
<template v-if="column.key === 'drag'">
|
<i class="drag-handler icon-ym icon-ym-darg" title="点击拖动"></i>
|
</template>
|
<template v-if="column.key === 'field'">
|
<p @click="handleItemClick(record)" class="cursor-pointer">
|
<span class="required-sign">{{ record.required ? '*' : '' }}</span>
|
{{ record.field }}{{ record.fieldName && type === 0 ? `(${record.fieldName})` : '' }}
|
</p>
|
</template>
|
<template v-if="column.key === 'dataType'">
|
<span>{{ getDataTypeText(record.dataType) }}</span>
|
</template>
|
<template v-if="column.key === 'action'">
|
<a-space :size="10">
|
<i class="icon-ym icon-ym-btn-edit" @click="addOrUpdateHandle(record)"></i>
|
<i class="icon-ym icon-ym-delete" @click="remove(index)"></i>
|
</a-space>
|
</template>
|
</template>
|
</a-table>
|
<div class="table-actions" @click="addOrUpdateHandle()">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add">{{ $t('common.addText') }}</a-button>
|
</div>
|
<FieldForm @register="registerFieldForm" @reload="reload" :type="type" />
|
</div>
|
</template>
|
