<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { computed, nextTick, reactive, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicPopup, usePopupInner } from '@jnpf/ui/popup';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { downloadByUrl } from '@jnpf/utils';
|
|
import { copy, del, exportData, getList } from '#/api/systemData/variate';
|
import { $t } from '#/locales';
|
|
import Form from './Form.vue';
|
|
interface State {
|
listQuery: any;
|
id: string;
|
}
|
|
const { createMessage } = useMessage();
|
const state = reactive<State>({
|
listQuery: {
|
keyword: '',
|
},
|
id: '',
|
});
|
|
const getSearchInfo = computed(() => ({ id: unref(state.id), keyword: state.listQuery.keyword }));
|
|
const menuTableColumns: BasicColumn[] = [
|
{ title: '变量名', dataIndex: 'fullName', width: 260 },
|
{ title: '变量值', dataIndex: 'value', width: 260 },
|
{ title: '创建人', dataIndex: 'creatorUser', width: 100 },
|
{ title: '创建时间', dataIndex: 'creatorTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '最后修改时间', dataIndex: 'lastModifyTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
];
|
const [registerPopup] = usePopupInner(init);
|
const [registerSearchForm] = useForm({
|
baseColProps: { span: 6 },
|
showActionButtonGroup: true,
|
showAdvancedButton: true,
|
compact: true,
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
});
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const [registerTable, { reload }] = useVxeTable({
|
api: getList,
|
searchInfo: getSearchInfo,
|
immediate: false,
|
actionColumn: {
|
width: 150,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
pagination: false,
|
});
|
|
function init(data) {
|
state.id = data.id;
|
state.listQuery.keyword = '';
|
nextTick(() => reload({ page: 1 }));
|
}
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.editText'),
|
onClick: addOrUpdateHandle.bind(null, record.id),
|
},
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
modelConfirm: {
|
onOk: handleDelete.bind(null, record.id),
|
},
|
},
|
];
|
}
|
function getDropDownActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.copyText'),
|
modelConfirm: {
|
content: '您确定要复制该变量, 是否继续?',
|
onOk: handleCopy.bind(null, record.id),
|
},
|
},
|
{
|
label: $t('common.exportText'),
|
modelConfirm: {
|
content: '您确定要导出该变量, 是否继续?',
|
onOk: handleExport.bind(null, record.id),
|
},
|
},
|
];
|
}
|
function handleSubmit(values) {
|
state.listQuery.keyword = values?.keyword || '';
|
handleSearch();
|
}
|
function handleReset() {
|
state.listQuery.keyword = '';
|
handleSearch();
|
}
|
function handleSearch() {
|
nextTick(() => reload());
|
}
|
function handleDelete(id) {
|
del(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handleCopy(id) {
|
copy(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handleExport(id) {
|
exportData(id).then((res) => {
|
downloadByUrl({ url: res.data.url });
|
});
|
}
|
function addOrUpdateHandle(id = '') {
|
openFormModal(true, { id, interfaceId: state.id });
|
}
|
</script>
|
<template>
|
<BasicPopup v-bind="$attrs" @register="registerPopup" title="提取变量" class="full-popup">
|
<div class="jnpf-content-wrapper-search-box mt-[10px] pl-[10px]">
|
<BasicForm class="search-form" @register="registerSearchForm" @submit="handleSubmit" @reset="handleReset" />
|
</div>
|
<BasicVxeTable @register="registerTable" :columns="menuTableColumns" :search-info="getSearchInfo">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $t('common.addText') }}</a-button>
|
<jnpf-upload-btn url="/api/system/DataInterfaceVariate/Actions/Import" accept=".ffa" @on-success="reload" />
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" :drop-down-actions="getDropDownActions(record)" />
|
</template>
|
</BasicVxeTable>
|
<Form @register="registerForm" @reload="reload" />
|
</BasicPopup>
|
</template>
|
<style lang="scss" scoped>
|
.jnpf-content-wrapper-search-box {
|
border-bottom: 1px solid var(--border-color-base);
|
}
|
</style>
|
