mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-11-16 05:33:41 +08:00
feat(projects): add example for pro-naive-ui.
This commit is contained in:
Zheng-Changfu
GitHub
142
src/views/pro-naive/table/remote/index.vue
Normal file
142
src/views/pro-naive/table/remote/index.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { ProDataTableColumns, ProSearchFormColumns } from 'pro-naive-ui';
|
||||
import {
|
||||
createProSearchForm,
|
||||
renderProCopyableText,
|
||||
renderProDateText,
|
||||
renderProImages,
|
||||
renderProTags,
|
||||
useNDataTable
|
||||
} from 'pro-naive-ui';
|
||||
import { $t } from '@/locales';
|
||||
import ConfigProvider from '../../ConfigProvider.vue';
|
||||
|
||||
function fetchList(params: any, values: any) {
|
||||
console.log(params, values);
|
||||
return new Promise<{ total: number; list: any[] }>(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
total: 987,
|
||||
list: [
|
||||
{
|
||||
now: Date.now(),
|
||||
src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
|
||||
no: '3',
|
||||
title: 'Wonderwall',
|
||||
length: '4:18'
|
||||
},
|
||||
{ now: Date.now(), src: '', no: '', title: "Don't Look Back in Anger", length: '4:48' },
|
||||
{ now: Date.now(), src: undefined, no: '12', title: 'Champagne Supernova', length: '7:27' },
|
||||
{ now: Date.now(), src: null, no: '33', title: 'Wonderwall', length: '4:18' },
|
||||
{ now: Date.now(), src: [], no: '44', title: "Don't Look Back in Anger", length: '4:48' },
|
||||
{
|
||||
now: Date.now(),
|
||||
src: [
|
||||
'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
|
||||
],
|
||||
no: '122',
|
||||
title: 'Champagne Supernova',
|
||||
length: '7:27'
|
||||
},
|
||||
{ now: Date.now(), src: '', no: '333', title: 'Wonderwall', length: '4:18' },
|
||||
{ now: Date.now(), src: '', no: '4444', title: "Don't Look Back in Anger", length: '4:48' },
|
||||
{ now: Date.now(), src: '', no: '1222', title: 'Champagne Supernova', length: '7:27' },
|
||||
{ now: Date.now(), src: '', no: '33333', title: 'Wonderwall', length: '4:18' }
|
||||
]
|
||||
});
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
const columns = computed<ProDataTableColumns<{ src: any; title: string; now: number }>>(() => {
|
||||
return [
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.replicableText'),
|
||||
render: row => renderProCopyableText(row.title)
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.tags'),
|
||||
render: row => renderProTags(row.title)
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.dateFormatting'),
|
||||
render: row =>
|
||||
renderProDateText(row.now, {
|
||||
pattern: 'quarter'
|
||||
})
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.image'),
|
||||
width: 200,
|
||||
render: row => renderProImages(row.src)
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
const searchColumns = computed<
|
||||
ProSearchFormColumns<{
|
||||
name: string;
|
||||
endTime: number;
|
||||
createTime: number;
|
||||
responseTime: number;
|
||||
}>
|
||||
>(() => {
|
||||
return [
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.name'),
|
||||
path: 'name'
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.createTime'),
|
||||
path: 'createTime',
|
||||
field: 'date'
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.responseTime'),
|
||||
path: 'responseTime',
|
||||
field: 'date'
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.remote.responseTime'),
|
||||
path: 'responseTime',
|
||||
field: 'date'
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
const searchForm = createProSearchForm({
|
||||
initialValues: {
|
||||
responseTime: Date.now()
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
table: { tableProps },
|
||||
search: { proSearchFormProps }
|
||||
} = useNDataTable(
|
||||
({ current, pageSize, filters, sorter }, values) => fetchList({ current, pageSize, filters, sorter }, values),
|
||||
{
|
||||
form: searchForm
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ConfigProvider>
|
||||
<div class="h-full flex flex-col">
|
||||
<ProCard :title="$t('page.proNaive.table.remote.filterCondition')" class="mb-24px" :show-collapse="false">
|
||||
<ProSearchForm :form="searchForm" label-placement="left" :columns="searchColumns" v-bind="proSearchFormProps" />
|
||||
</ProCard>
|
||||
<ProDataTable
|
||||
:title="$t('page.proNaive.table.remote.title')"
|
||||
size="small"
|
||||
flex-height
|
||||
:columns="columns"
|
||||
row-key="no"
|
||||
v-bind="tableProps"
|
||||
/>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
</template>
|
||||
138
src/views/pro-naive/table/row-edit/index.vue
Normal file
138
src/views/pro-naive/table/row-edit/index.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed, ref } from 'vue';
|
||||
import { NButton, NFlex, useMessage } from 'naive-ui';
|
||||
import type { ProEditDataTableColumns } from 'pro-naive-ui';
|
||||
import { createProForm } from 'pro-naive-ui';
|
||||
import { $t } from '@/locales';
|
||||
import ConfigProvider from '../../ConfigProvider.vue';
|
||||
|
||||
interface DataSourceType {
|
||||
id: string;
|
||||
title?: string;
|
||||
now?: number;
|
||||
rate?: number;
|
||||
}
|
||||
|
||||
const message = useMessage();
|
||||
const editableKeys = ref<string[]>([]);
|
||||
|
||||
const form = createProForm({
|
||||
initialValues: {
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
now: Date.now(),
|
||||
rate: 4,
|
||||
title: `${$t('page.proNaive.table.rowEdit.task')}1`
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
now: Date.now(),
|
||||
rate: 3,
|
||||
title: `${$t('page.proNaive.table.rowEdit.task')}2`
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
now: Date.now(),
|
||||
rate: 5,
|
||||
title: `${$t('page.proNaive.table.rowEdit.task')}3`
|
||||
}
|
||||
]
|
||||
},
|
||||
onSubmit: values => {
|
||||
message.success(JSON.stringify(values));
|
||||
}
|
||||
});
|
||||
|
||||
function cancelEditable(id: string) {
|
||||
editableKeys.value = editableKeys.value.filter(key => key !== id);
|
||||
}
|
||||
|
||||
const columns = computed<ProEditDataTableColumns<DataSourceType>>(() => {
|
||||
return [
|
||||
{
|
||||
title: $t('page.proNaive.table.rowEdit.name'),
|
||||
path: 'title',
|
||||
field: 'input',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.rowEdit.time'),
|
||||
path: 'now',
|
||||
field: 'date-time',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.rowEdit.score'),
|
||||
path: 'rate',
|
||||
field: 'rate'
|
||||
},
|
||||
{
|
||||
title: $t('page.proNaive.table.rowEdit.action'),
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
render: (row, rowIndex, { remove, editable }) => {
|
||||
return (
|
||||
<NFlex>
|
||||
{editable ? (
|
||||
<NButton text={true} type="primary" onClick={() => cancelEditable(row.id)}>
|
||||
{$t('page.proNaive.table.rowEdit.save')}
|
||||
</NButton>
|
||||
) : (
|
||||
[
|
||||
<NButton text={true} type="primary" onClick={() => editableKeys.value.push(row.id)}>
|
||||
{$t('page.proNaive.table.rowEdit.edit')}
|
||||
</NButton>,
|
||||
<NButton
|
||||
text={true}
|
||||
type="error"
|
||||
onClick={() => {
|
||||
remove(rowIndex);
|
||||
cancelEditable(row.id);
|
||||
}}
|
||||
>
|
||||
{$t('page.proNaive.table.rowEdit.delete')}
|
||||
</NButton>
|
||||
]
|
||||
)}
|
||||
</NFlex>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ConfigProvider>
|
||||
<ProForm :form="form" label-placement="left">
|
||||
<ProConfigProvider
|
||||
:prop-overrides="{
|
||||
ProFormItem: {
|
||||
showFeedback: false
|
||||
}
|
||||
}"
|
||||
>
|
||||
<ProEditDataTable
|
||||
v-model:editable-keys="editableKeys"
|
||||
path="list"
|
||||
:columns="columns"
|
||||
:record-creator-props="{
|
||||
record: () => ({ id: Date.now() })
|
||||
}"
|
||||
row-key="id"
|
||||
:field-props="{
|
||||
title: $t('page.proNaive.table.rowEdit.title')
|
||||
}"
|
||||
>
|
||||
<template #toolbar>
|
||||
<NFlex>
|
||||
<NButton attr-type="reset">{{ $t('page.proNaive.table.rowEdit.reset') }}</NButton>
|
||||
<NButton type="primary" attr-type="submit">{{ $t('page.proNaive.table.rowEdit.submit') }}</NButton>
|
||||
</NFlex>
|
||||
</template>
|
||||
</ProEditDataTable>
|
||||
</ProConfigProvider>
|
||||
</ProForm>
|
||||
</ConfigProvider>
|
||||
</template>
|
||||
Reference in New Issue
Block a user