refactor(demo): table demo use script setup (#3296)

* refactor: /@/ => @/

* refactor: table demo use script setup

* refactor: change /@/ to @/

* feat: add antdv qrcode demo

* style(qrcode): add margin bottom

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>
This commit is contained in:
xingyu 2023-11-18 16:50:20 +08:00 committed by GitHub
parent 003a951bef
commit 9fad2ab631
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 847 additions and 1076 deletions

View File

@ -26,7 +26,7 @@
</div>
</template>
<script lang="ts" setup>
import { CountTo } from '/@/components/CountTo/index';
import { CountTo } from '@/components/CountTo';
import Icon from '@/components/Icon/Icon.vue';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';

View File

@ -6,7 +6,7 @@
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
loading: Boolean,

View File

@ -6,7 +6,7 @@
</script>
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useECharts } from '@/hooks/web/useECharts';
defineProps({
...basicProps,

View File

@ -6,7 +6,7 @@
</script>
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useECharts } from '@/hooks/web/useECharts';
defineProps({
...basicProps,

View File

@ -6,7 +6,7 @@
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
loading: Boolean,

View File

@ -6,7 +6,7 @@
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
loading: Boolean,

View File

@ -6,7 +6,7 @@
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
loading: Boolean,

View File

@ -25,8 +25,8 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { Avatar } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import headerImg from '/@/assets/images/header.jpg';
import { useUserStore } from '@/store/modules/user';
import headerImg from '@/assets/images/header.jpg';
const userStore = useUserStore();
const userinfo = computed(() => userStore.getUserInfo);

View File

@ -1,15 +1,15 @@
<template>
<PageWrapper title="二维码组件使用示例">
<div class="flex flex-wrap">
<CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 w-1/4 mr-6">
<CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" />
</CollapseContainer>
<CollapseContainer title="渲染成img标签示例" class="text-center mb-6 w-1/4 mr-6">
<CollapseContainer title="渲染成img标签示例" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" tag="img" />
</CollapseContainer>
<CollapseContainer title="配置样式示例" class="text-center mb-6 w-1/4 mr-6">
<CollapseContainer title="配置样式示例" class="text-center mb-6 w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
:options="{
@ -18,11 +18,11 @@
/>
</CollapseContainer>
<CollapseContainer title="本地logo示例" class="text-center mb-6 w-1/4 mr-6">
<CollapseContainer title="本地logo示例" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" :logo="LogoImg" />
</CollapseContainer>
<CollapseContainer title="在线logo示例" class="text-center mb-6 w-1/4 mr-6">
<CollapseContainer title="在线logo示例" class="text-center mb-6 w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
logo="https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png"
@ -32,7 +32,7 @@
/>
</CollapseContainer>
<CollapseContainer title="logo配置示例" class="text-center mb-6 w-1/4 mr-6">
<CollapseContainer title="logo配置示例" class="text-center mb-6 w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
:logo="{
@ -45,17 +45,17 @@
/>
</CollapseContainer>
<CollapseContainer title="下载示例" class="text-center w-1/4 mr-6">
<CollapseContainer title="下载示例" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
<a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
<div class="msg">(在线logo会导致图片跨域需要下载图片需要自行解决跨域问题)</div>
</CollapseContainer>
<CollapseContainer title="配置大小示例" class="text-center w-1/4 mr-6">
<CollapseContainer title="配置大小示例" class="text-center w-1/5 mr-6">
<QrCode :value="qrCodeUrl" :width="300" />
</CollapseContainer>
<CollapseContainer title="扩展绘制示例" class="text-center w-1/4 mr-6">
<CollapseContainer title="扩展绘制示例" class="text-center w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
:width="200"
@ -67,6 +67,14 @@
<a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
<div class="msg">要进行扩展绘制则不能将tag设为img</div>
</CollapseContainer>
<CollapseContainer title="Antdv QRCode" class="text-center w-1/5 mr-6">
<QRCode :value="qrCodeUrl" :size="200" />
</CollapseContainer>
<CollapseContainer title="Antdv QRCode 带icon" class="text-center w-1/5 mr-6">
<QRCode :value="qrCodeUrl" :size="200" :icon="LogoImg" />
</CollapseContainer>
</div>
</PageWrapper>
</template>
@ -77,6 +85,7 @@
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { type Nullable } from '@vben/types';
import { QRCode } from 'ant-design-vue';
const qrCodeUrl = 'https://www.vvbin.cn';
const qrRef = ref<Nullable<QrCodeActionType>>(null);

View File

@ -56,9 +56,8 @@
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable, BasicColumn, TableAction } from '@/components/Table';
import { demoListApi } from '/@/api/demo/table';
@ -122,40 +121,30 @@
width: 200,
},
];
export default defineComponent({
components: { BasicTable, TableAction },
setup() {
const [registerTable] = useTable({
title: 'TableAction组件及固定列示例',
api: demoListApi,
columns: columns,
bordered: true,
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
actionColumn: {
width: 250,
title: 'Action',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
return {
registerTable,
handleEdit,
handleDelete,
handleOpen,
};
const [registerTable] = useTable({
title: 'TableAction组件及固定列示例',
api: demoListApi,
columns: columns,
bordered: true,
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
actionColumn: {
width: 250,
title: 'Action',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleEdit(record: Recordable) {
console.log('点击了编辑', record);
}
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
</script>

View File

@ -28,53 +28,38 @@
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable, ColumnChangeParam } from '/@/components/Table';
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, ColumnChangeParam } from '@/components/Table';
import { getBasicColumns, getBasicData } from './tableData';
export default defineComponent({
components: { BasicTable },
setup() {
const canResize = ref(false);
const loading = ref(false);
const striped = ref(true);
const border = ref(true);
const pagination = ref<any>(false);
function toggleCanResize() {
canResize.value = !canResize.value;
}
function toggleStriped() {
striped.value = !striped.value;
}
function toggleLoading() {
loading.value = true;
setTimeout(() => {
loading.value = false;
pagination.value = { pageSize: 20 };
}, 3000);
}
function toggleBorder() {
border.value = !border.value;
}
const canResize = ref(false);
const loading = ref(false);
const striped = ref(true);
const border = ref(true);
const pagination = ref<any>(false);
function handleColumnChange(data: ColumnChangeParam[]) {
console.log('ColumnChanged', data);
}
return {
columns: getBasicColumns(),
data: getBasicData(),
canResize,
loading,
striped,
border,
toggleStriped,
toggleCanResize,
toggleLoading,
toggleBorder,
pagination,
handleColumnChange,
};
},
});
const columns = getBasicColumns();
const data = getBasicData();
function toggleCanResize() {
canResize.value = !canResize.value;
}
function toggleStriped() {
striped.value = !striped.value;
}
function toggleLoading() {
loading.value = true;
setTimeout(() => {
loading.value = false;
pagination.value = { pageSize: 20 };
}, 3000);
}
function toggleBorder() {
border.value = !border.value;
}
function handleColumnChange(data: ColumnChangeParam[]) {
console.log('ColumnChanged', data);
}
</script>

View File

@ -27,11 +27,11 @@
</BasicTable>
</div>
</template>
<script lang="tsx">
import { defineComponent, h } from 'vue';
import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
<script lang="tsx" setup>
import { h } from 'vue';
import { BasicTable, useTable, BasicColumn, TableImg } from '@/components/Table';
import { Tag, Avatar } from 'ant-design-vue';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
const columns: BasicColumn[] = [
{
@ -91,21 +91,13 @@
dataIndex: 'endTime',
},
];
export default defineComponent({
components: { BasicTable, TableImg, Tag, Avatar },
setup() {
const [registerTable] = useTable({
title: '自定义列内容',
titleHelpMessage: '表格中所有头像、图片均为mock生成仅用于演示图片占位',
api: demoListApi,
columns: columns,
bordered: true,
showTableSetting: true,
});
return {
registerTable,
};
},
const [registerTable] = useTable({
title: '自定义列内容',
titleHelpMessage: '表格中所有头像、图片均为mock生成仅用于演示图片占位',
api: demoListApi,
columns: columns,
bordered: true,
showTableSetting: true,
});
</script>

View File

@ -8,14 +8,14 @@
/>
</div>
</template>
<script lang="ts">
import { defineComponent, h } from 'vue';
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
import { optionsListApi } from '/@/api/demo/select';
<script lang="ts" setup>
import { h } from 'vue';
import { BasicTable, useTable, BasicColumn } from '@/components/Table';
import { optionsListApi } from '@/api/demo/select';
import { demoListApi } from '/@/api/demo/table';
import { treeOptionsListApi } from '/@/api/demo/tree';
import { useMessage } from '/@/hooks/web/useMessage';
import { demoListApi } from '@/api/demo/table';
import { treeOptionsListApi } from '@/api/demo/tree';
import { useMessage } from '@/hooks/web/useMessage';
import { Progress } from 'ant-design-vue';
const columns: BasicColumn[] = [
@ -210,67 +210,56 @@
width: 200,
},
];
export default defineComponent({
components: { BasicTable },
setup() {
const [registerTable] = useTable({
title: '可编辑单元格示例',
api: demoListApi,
columns: columns,
showIndexColumn: false,
bordered: true,
});
const { createMessage } = useMessage();
function handleEditEnd({ record, index, key, value }: Recordable) {
console.log(record, index, key, value);
return false;
}
//
function feakSave({ value, key, id }) {
createMessage.loading({
content: `正在模拟保存${key}`,
key: '_save_fake_data',
duration: 0,
});
return new Promise((resolve) => {
setTimeout(() => {
if (value === '') {
createMessage.error({
content: '保存失败:不能为空',
key: '_save_fake_data',
duration: 2,
});
resolve(false);
} else {
createMessage.success({
content: `记录${id}${key}已保存`,
key: '_save_fake_data',
duration: 2,
});
resolve(true);
}
}, 2000);
});
}
async function beforeEditSubmit({ record, index, key, value }) {
console.log('单元格数据正在准备提交', { record, index, key, value });
return await feakSave({ id: record.id, key, value });
}
function handleEditCancel() {
console.log('cancel');
}
return {
registerTable,
handleEditEnd,
handleEditCancel,
beforeEditSubmit,
};
},
const [registerTable] = useTable({
title: '可编辑单元格示例',
api: demoListApi,
columns: columns,
showIndexColumn: false,
bordered: true,
});
const { createMessage } = useMessage();
function handleEditEnd({ record, index, key, value }: Recordable) {
console.log(record, index, key, value);
return false;
}
//
function feakSave({ value, key, id }) {
createMessage.loading({
content: `正在模拟保存${key}`,
key: '_save_fake_data',
duration: 0,
});
return new Promise((resolve) => {
setTimeout(() => {
if (value === '') {
createMessage.error({
content: '保存失败:不能为空',
key: '_save_fake_data',
duration: 2,
});
resolve(false);
} else {
createMessage.success({
content: `记录${id}${key}已保存`,
key: '_save_fake_data',
duration: 2,
});
resolve(true);
}
}, 2000);
});
}
async function beforeEditSubmit({ record, index, key, value }) {
console.log('单元格数据正在准备提交', { record, index, key, value });
return await feakSave({ id: record.id, key, value });
}
function handleEditCancel() {
console.log('cancel');
}
</script>

View File

@ -9,8 +9,8 @@
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import {
BasicTable,
useTable,
@ -18,13 +18,13 @@
BasicColumn,
ActionItem,
EditRecordRow,
} from '/@/components/Table';
import { optionsListApi } from '/@/api/demo/select';
} from '@/components/Table';
import { optionsListApi } from '@/api/demo/select';
import { demoListApi } from '/@/api/demo/table';
import { treeOptionsListApi } from '/@/api/demo/tree';
import { demoListApi } from '@/api/demo/table';
import { treeOptionsListApi } from '@/api/demo/tree';
import { cloneDeep } from 'lodash-es';
import { useMessage } from '/@/hooks/web/useMessage';
import { useMessage } from '@/hooks/web/useMessage';
const columns: BasicColumn[] = [
{
@ -221,102 +221,91 @@
width: 200,
},
];
export default defineComponent({
components: { BasicTable, TableAction },
setup() {
const { createMessage: msg } = useMessage();
const currentEditKeyRef = ref('');
const [registerTable] = useTable({
title: '可编辑行示例',
titleHelpMessage: [
'本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
],
api: demoListApi,
columns: columns,
showIndexColumn: false,
showTableSetting: true,
tableSetting: { fullScreen: true },
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleEdit(record: EditRecordRow) {
currentEditKeyRef.value = record.key;
record.onEdit?.(true);
}
function handleCancel(record: EditRecordRow) {
currentEditKeyRef.value = '';
record.onEdit?.(false, false);
}
async function handleSave(record: EditRecordRow) {
//
msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
const valid = await record.onValid?.();
if (valid) {
try {
const data = cloneDeep(record.editValueRefs);
console.log(data);
//TODO
// ...
//
const pass = await record.onEdit?.(false, true);
if (pass) {
currentEditKeyRef.value = '';
}
msg.success({ content: '数据已保存', key: 'saving' });
} catch (error) {
msg.error({ content: '保存失败', key: 'saving' });
}
} else {
msg.error({ content: '请填写正确的数据', key: 'saving' });
}
}
function createActions(record: EditRecordRow): ActionItem[] {
if (!record.editable) {
return [
{
label: '编辑',
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
onClick: handleEdit.bind(null, record),
},
];
}
return [
{
label: '保存',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
popConfirm: {
title: '是否取消编辑',
confirm: handleCancel.bind(null, record),
},
},
];
}
function onEditChange({ column, value, record }) {
//
if (column.dataIndex === 'id') {
record.editValueRefs.name4.value = `${value}`;
}
console.log(column, value, record);
}
return {
registerTable,
handleEdit,
createActions,
onEditChange,
};
const { createMessage: msg } = useMessage();
const currentEditKeyRef = ref('');
const [registerTable] = useTable({
title: '可编辑行示例',
titleHelpMessage: [
'本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
],
api: demoListApi,
columns: columns,
showIndexColumn: false,
showTableSetting: true,
tableSetting: { fullScreen: true },
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleEdit(record: EditRecordRow) {
currentEditKeyRef.value = record.key;
record.onEdit?.(true);
}
function handleCancel(record: EditRecordRow) {
currentEditKeyRef.value = '';
record.onEdit?.(false, false);
}
async function handleSave(record: EditRecordRow) {
//
msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
const valid = await record.onValid?.();
if (valid) {
try {
const data = cloneDeep(record.editValueRefs);
console.log(data);
//TODO
// ...
//
const pass = await record.onEdit?.(false, true);
if (pass) {
currentEditKeyRef.value = '';
}
msg.success({ content: '数据已保存', key: 'saving' });
} catch (error) {
msg.error({ content: '保存失败', key: 'saving' });
}
} else {
msg.error({ content: '请填写正确的数据', key: 'saving' });
}
}
function createActions(record: EditRecordRow): ActionItem[] {
if (!record.editable) {
return [
{
label: '编辑',
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
onClick: handleEdit.bind(null, record),
},
];
}
return [
{
label: '保存',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
popConfirm: {
title: '是否取消编辑',
confirm: handleCancel.bind(null, record),
},
},
];
}
function onEditChange({ column, value, record }) {
//
if (column.dataIndex === 'id') {
record.editValueRefs.name4.value = `${value}`;
}
console.log(column, value, record);
}
</script>

View File

@ -33,45 +33,33 @@
</BasicTable>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { getBasicColumns } from './tableData';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable, TableAction, PageWrapper },
setup() {
const [registerTable] = useTable({
api: demoListApi,
title: '可展开表格演示',
titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
columns: getBasicColumns(),
rowKey: 'id',
canResize: false,
expandRowByClick: true,
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
fixed: 'right',
// slots: { customRender: 'action' },
},
});
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
return {
registerTable,
handleDelete,
handleOpen,
};
const [registerTable] = useTable({
api: demoListApi,
title: '可展开表格演示',
titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
columns: getBasicColumns(),
rowKey: 'id',
canResize: false,
expandRowByClick: true,
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
fixed: 'right',
// slots: { customRender: 'action' },
},
});
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
</script>

View File

@ -8,37 +8,24 @@
</BasicTable>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns } from './tableData';
import { PageWrapper } from '/@/components/Page';
import { PageWrapper } from '@/components/Page';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable, PageWrapper },
setup() {
const [registerTable, { reload }] = useTable({
title: '远程加载示例',
api: demoListApi,
columns: getBasicColumns(),
pagination: { pageSize: 10 },
});
function handleReloadCurrent() {
reload();
}
function handleReload() {
reload({
page: 1,
});
}
return {
registerTable,
handleReloadCurrent,
handleReload,
};
},
const [registerTable, { reload }] = useTable({
title: '远程加载示例',
api: demoListApi,
columns: getBasicColumns(),
pagination: { pageSize: 10 },
});
function handleReloadCurrent() {
reload();
}
function handleReload() {
reload({ page: 1 });
}
</script>

View File

@ -26,11 +26,10 @@
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable, BasicColumn, TableAction } from '@/components/Table';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
const columns: BasicColumn[] = [
{
@ -64,33 +63,23 @@
width: 200,
},
];
export default defineComponent({
components: { BasicTable, TableAction },
setup() {
const [registerTable] = useTable({
title: 'TableAction组件及固定列示例',
api: demoListApi,
columns: columns,
rowSelection: { type: 'radio' },
bordered: true,
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
return {
registerTable,
handleDelete,
handleOpen,
};
const [registerTable] = useTable({
title: 'TableAction组件及固定列示例',
api: demoListApi,
columns: columns,
rowSelection: { type: 'radio' },
bordered: true,
actionColumn: {
width: 160,
title: 'Action',
dataIndex: 'action',
},
});
function handleDelete(record: Recordable) {
console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
console.log('点击了启用', record);
}
</script>

View File

@ -19,29 +19,19 @@
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getCustomHeaderColumns } from './tableData';
import { FormOutlined } from '@ant-design/icons-vue';
import { demoListApi } from '/@/api/demo/table';
import { BasicHelp } from '/@/components/Basic';
import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
import { demoListApi } from '@/api/demo/table';
import { BasicHelp } from '@/components/Basic';
import HeaderCell from '@/components/Table/src/components/HeaderCell.vue';
export default defineComponent({
components: { BasicTable, FormOutlined, BasicHelp, HeaderCell },
setup() {
const [registerTable] = useTable({
title: '定高/头部自定义',
api: demoListApi,
columns: getCustomHeaderColumns(),
canResize: false,
scroll: { y: 100 },
});
return {
registerTable,
};
},
const [registerTable] = useTable({
title: '定高/头部自定义',
api: demoListApi,
columns: getCustomHeaderColumns(),
canResize: false,
scroll: { y: 100 },
});
</script>

View File

@ -3,48 +3,38 @@
<BasicTable @register="registerTable" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns } from './tableData';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup() {
function handleSummary(tableData: Recordable[]) {
const totalNo = tableData.reduce((prev, next) => {
prev += next.no;
return prev;
}, 0);
return [
{
_row: '合计',
_index: '平均值',
no: totalNo,
},
{
_row: '合计',
_index: '平均值',
no: totalNo,
},
];
}
const [registerTable] = useTable({
title: '表尾行合计示例',
api: demoListApi,
rowSelection: { type: 'checkbox' },
columns: getBasicColumns(),
showSummary: true,
summaryFunc: handleSummary,
scroll: { x: 2000 },
canResize: false,
});
return {
registerTable,
};
},
function handleSummary(tableData: Recordable[]) {
const totalNo = tableData.reduce((prev, next) => {
prev += next.no;
return prev;
}, 0);
return [
{
_row: '合计',
_index: '平均值',
no: totalNo,
},
{
_row: '合计',
_index: '平均值',
no: totalNo,
},
];
}
const [registerTable] = useTable({
title: '表尾行合计示例',
api: demoListApi,
rowSelection: { type: 'checkbox' },
columns: getBasicColumns(),
showSummary: true,
summaryFunc: handleSummary,
scroll: { x: 2000 },
canResize: false,
});
</script>

View File

@ -2,7 +2,7 @@
<BasicTable @register="registerTable">
<template #form-custom> custom-slot </template>
<template #headerTop>
<a-alert type="info" show-icon>
<Alert type="info" show-icon>
<template #message>
<template v-if="checkedKeys.length > 0">
<span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
@ -12,72 +12,60 @@
<span>未选中任何项目</span>
</template>
</template>
</a-alert>
</Alert>
</template>
<template #toolbar>
<a-button type="primary" @click="getFormValues">获取表单数据</a-button>
</template>
</BasicTable>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns, getFormConfig } from './tableData';
import { Alert } from 'ant-design-vue';
import type { Key } from 'ant-design-vue/lib/table/interface';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable, AAlert: Alert },
setup() {
const checkedKeys = ref<Array<string | number>>([]);
const [registerTable, { getForm }] = useTable({
title: '开启搜索区域',
api: demoListApi,
columns: getBasicColumns(),
useSearchForm: true,
formConfig: getFormConfig(),
showTableSetting: true,
tableSetting: { fullScreen: true },
showIndexColumn: false,
rowKey: 'id',
rowSelection: {
type: 'checkbox',
selectedRowKeys: checkedKeys,
onSelect: onSelect,
onSelectAll: onSelectAll,
},
});
function getFormValues() {
console.log(getForm().getFieldsValue());
}
function onSelect(record, selected) {
if (selected) {
checkedKeys.value = [...checkedKeys.value, record.id];
} else {
checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
}
}
function onSelectAll(selected, selectedRows, changeRows) {
const changeIds = changeRows.map((item) => item.id);
if (selected) {
checkedKeys.value = [...checkedKeys.value, ...changeIds];
} else {
checkedKeys.value = checkedKeys.value.filter((id) => {
return !changeIds.includes(id);
});
}
}
return {
registerTable,
getFormValues,
checkedKeys,
onSelect,
onSelectAll,
};
const checkedKeys = ref<Key[]>([]);
const [registerTable, { getForm }] = useTable({
title: '开启搜索区域',
api: demoListApi,
columns: getBasicColumns(),
useSearchForm: true,
formConfig: getFormConfig(),
showTableSetting: true,
tableSetting: { fullScreen: true },
showIndexColumn: false,
rowKey: 'id',
rowSelection: {
type: 'checkbox',
selectedRowKeys: checkedKeys.value,
onSelect: onSelect,
onSelectAll: onSelectAll,
},
});
function getFormValues() {
console.log(getForm().getFieldsValue());
}
function onSelect(record, selected) {
if (selected) {
checkedKeys.value = [...checkedKeys.value, record.id];
} else {
checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
}
}
function onSelectAll(selected, selectedRows, changeRows) {
const changeIds = changeRows.map((item) => item.id);
if (selected) {
checkedKeys.value = [...checkedKeys.value, ...changeIds];
} else {
checkedKeys.value = checkedKeys.value.filter((id) => {
return !changeIds.includes(id);
});
}
}
</script>

View File

@ -3,26 +3,16 @@
<BasicTable @register="registerTable" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getMergeHeaderColumns } from './tableData';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup() {
const [registerTable] = useTable({
title: '合并单元格',
bordered: true,
api: demoListApi,
columns: getMergeHeaderColumns(),
});
return {
registerTable,
};
},
const [registerTable] = useTable({
title: '合并单元格',
bordered: true,
api: demoListApi,
columns: getMergeHeaderColumns(),
});
</script>

View File

@ -3,25 +3,15 @@
<BasicTable @register="registerTable" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getMultipleHeaderColumns } from './tableData';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup() {
const [registerTable] = useTable({
title: '多级表头示例',
api: demoListApi,
columns: getMultipleHeaderColumns(),
});
return {
registerTable,
};
},
const [registerTable] = useTable({
title: '多级表头示例',
api: demoListApi,
columns: getMultipleHeaderColumns(),
});
</script>

View File

@ -21,119 +21,98 @@
title="RefTable示例"
titleHelpMessage="使用Ref调用表格内方法"
ref="tableRef"
:api="api"
:api="demoListApi"
:columns="columns"
rowKey="id"
:rowSelection="{ type: 'checkbox' }"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicTable, TableActionType } from '/@/components/Table';
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicTable, TableActionType } from '@/components/Table';
import { getBasicColumns, getBasicShortColumns } from './tableData';
import { useMessage } from '/@/hooks/web/useMessage';
import { demoListApi } from '/@/api/demo/table';
import { useMessage } from '@/hooks/web/useMessage';
import { demoListApi } from '@/api/demo/table';
import { type Nullable } from '@vben/types';
export default defineComponent({
components: { BasicTable },
setup() {
const tableRef = ref<Nullable<TableActionType>>(null);
const { createMessage } = useMessage();
const tableRef = ref<Nullable<TableActionType>>(null);
const { createMessage } = useMessage();
function getTableAction() {
const tableAction = unref(tableRef);
if (!tableAction) {
throw new Error('tableAction is null');
}
return tableAction;
}
function changeLoading() {
getTableAction().setLoading(true);
setTimeout(() => {
getTableAction().setLoading(false);
}, 1000);
}
function changeColumns() {
getTableAction().setProps({
columns: getBasicShortColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
}
function reloadTable() {
getTableAction().setProps({
columns: getBasicColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
const columns = getBasicColumns();
getTableAction().reload({
page: 1,
});
}
function getColumn() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getColumns());
}
function getTableAction() {
const tableAction = unref(tableRef);
if (!tableAction) {
throw new Error('tableAction is null');
}
return tableAction;
}
function changeLoading() {
getTableAction().setLoading(true);
setTimeout(() => {
getTableAction().setLoading(false);
}, 1000);
}
function changeColumns() {
getTableAction().setProps({
columns: getBasicShortColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
}
function reloadTable() {
getTableAction().setProps({
columns: getBasicColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
function getTableData() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getDataSource());
}
function getTableRawData() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getRawDataSource());
}
getTableAction().reload({
page: 1,
});
}
function getColumn() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getColumns());
}
function getPagination() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getPaginationRef());
}
function getTableData() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getDataSource());
}
function getTableRawData() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getRawDataSource());
}
function setPaginationInfo() {
getTableAction().setPagination({
current: 2,
});
getTableAction().reload();
}
function getSelectRowList() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getSelectRows());
}
function getSelectRowKeyList() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getSelectRowKeys());
}
function setSelectedRowKeyList() {
getTableAction().setSelectedRowKeys(['0', '1', '2']);
}
function clearSelect() {
getTableAction().clearSelectedRowKeys();
}
function getPagination() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getPaginationRef());
}
return {
tableRef,
api: demoListApi,
columns: getBasicColumns(),
changeLoading,
changeColumns,
reloadTable,
getColumn,
getTableData,
getTableRawData,
getPagination,
setPaginationInfo,
getSelectRowList,
getSelectRowKeyList,
setSelectedRowKeyList,
clearSelect,
};
},
});
function setPaginationInfo() {
getTableAction().setPagination({
current: 2,
});
getTableAction().reload();
}
function getSelectRowList() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getSelectRows());
}
function getSelectRowKeyList() {
createMessage.info('请在控制台查看!');
console.log(getTableAction().getSelectRowKeys());
}
function setSelectedRowKeyList() {
getTableAction().setSelectedRowKeys(['0', '1', '2']);
}
function clearSelect() {
getTableAction().clearSelectedRowKeys();
}
</script>

View File

@ -22,58 +22,46 @@
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns, getFormConfig } from './tableData';
import { demoListApi } from '/@/api/demo/table';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup(_) {
const [registerTable] = useTable({
api: demoListApi,
columns: getBasicColumns(),
useSearchForm: false,
formConfig: getFormConfig(),
showTableSetting: false,
tableSetting: { fullScreen: true },
showIndexColumn: false,
isCanResizeParent: true,
rowKey: 'id',
});
const [registerTable] = useTable({
api: demoListApi,
columns: getBasicColumns(),
useSearchForm: false,
formConfig: getFormConfig(),
showTableSetting: false,
tableSetting: { fullScreen: true },
showIndexColumn: false,
isCanResizeParent: true,
rowKey: 'id',
});
const [registerTable1] = useTable({
api: demoListApi,
columns: getBasicColumns(),
formConfig: getFormConfig(),
showTableSetting: false,
tableSetting: { fullScreen: true },
showIndexColumn: false,
isCanResizeParent: true,
useSearchForm: false,
rowKey: 'id',
});
const [registerTable1] = useTable({
api: demoListApi,
columns: getBasicColumns(),
formConfig: getFormConfig(),
showTableSetting: false,
tableSetting: { fullScreen: true },
showIndexColumn: false,
isCanResizeParent: true,
useSearchForm: false,
rowKey: 'id',
});
const [registerTable2] = useTable({
api: demoListApi,
columns: getBasicColumns(),
formConfig: getFormConfig(),
showTableSetting: false,
tableSetting: { fullScreen: true },
showIndexColumn: false,
isCanResizeParent: true,
useSearchForm: false,
pagination: false,
rowKey: 'id',
});
return {
registerTable,
registerTable1,
registerTable2,
};
},
const [registerTable2] = useTable({
api: demoListApi,
columns: getBasicColumns(),
formConfig: getFormConfig(),
showTableSetting: false,
tableSetting: { fullScreen: true },
showIndexColumn: false,
isCanResizeParent: true,
useSearchForm: false,
pagination: false,
rowKey: 'id',
});
</script>

View File

@ -8,34 +8,27 @@
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns, getTreeTableData } from './tableData';
export default defineComponent({
components: { BasicTable },
setup() {
const [register, { expandAll, collapseAll }] = useTable({
title: '树形表格',
isTreeTable: true,
rowSelection: {
type: 'checkbox',
getCheckboxProps(record: Recordable) {
// Demo: id0
if (record.id === '0') {
return { disabled: true };
} else {
return { disabled: false };
}
},
},
titleHelpMessage: '树形组件不能和序列号列同时存在',
columns: getBasicColumns(),
dataSource: getTreeTableData(),
rowKey: 'id',
});
return { register, expandAll, collapseAll };
const [register, { expandAll, collapseAll }] = useTable({
title: '树形表格',
isTreeTable: true,
rowSelection: {
type: 'checkbox',
getCheckboxProps(record: Recordable) {
// Demo: id0
if (record.id === '0') {
return { disabled: true };
} else {
return { disabled: false };
}
},
},
titleHelpMessage: '树形组件不能和序列号列同时存在',
columns: getBasicColumns(),
dataSource: getTreeTableData(),
rowKey: 'id',
});
</script>

View File

@ -19,141 +19,118 @@
<BasicTable @register="registerTable" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, ColumnChangeParam, useTable } from '/@/components/Table';
<script lang="ts" setup>
import { BasicTable, ColumnChangeParam, useTable } from '@/components/Table';
import { getBasicColumns, getBasicShortColumns } from './tableData';
import { useMessage } from '/@/hooks/web/useMessage';
import { demoListApi } from '/@/api/demo/table';
import { useMessage } from '@/hooks/web/useMessage';
import { demoListApi } from '@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup() {
const { createMessage } = useMessage();
function onChange() {
console.log('onChange', arguments);
}
const [
registerTable,
{
setLoading,
setProps,
getColumns,
getDataSource,
getRawDataSource,
reload,
getPaginationRef,
setPagination,
getSelectRows,
getSelectRowKeys,
setSelectedRowKeys,
clearSelectedRowKeys,
},
] = useTable({
canResize: true,
title: 'useTable示例',
titleHelpMessage: '使用useTable调用表格内方法',
api: demoListApi,
columns: getBasicColumns(),
defSort: {
field: 'name',
order: 'ascend',
},
rowKey: 'id',
showTableSetting: true,
onChange,
rowSelection: {
type: 'checkbox',
},
onColumnsChange: (data: ColumnChangeParam[]) => {
console.log('ColumnsChanged', data);
},
});
function changeLoading() {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 1000);
}
function changeColumns() {
setProps({
columns: getBasicShortColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
}
function reloadTable() {
setProps({
columns: getBasicColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
reload({
page: 1,
});
}
function getColumn() {
createMessage.info('请在控制台查看!');
console.log(getColumns());
}
function getTableData() {
createMessage.info('请在控制台查看!');
console.log(getDataSource());
}
function getTableRawData() {
createMessage.info('请在控制台查看!');
console.log(getRawDataSource());
}
function getPagination() {
createMessage.info('请在控制台查看!');
console.log(getPaginationRef());
}
function setPaginationInfo() {
setPagination({
current: 2,
});
reload();
}
function getSelectRowList() {
createMessage.info('请在控制台查看!');
console.log(getSelectRows());
}
function getSelectRowKeyList() {
createMessage.info('请在控制台查看!');
console.log(getSelectRowKeys());
}
function setSelectedRowKeyList() {
setSelectedRowKeys(['0', '1', '2']);
}
function clearSelect() {
clearSelectedRowKeys();
}
return {
registerTable,
changeLoading,
changeColumns,
reloadTable,
getColumn,
getTableData,
getTableRawData,
getPagination,
setPaginationInfo,
getSelectRowList,
getSelectRowKeyList,
setSelectedRowKeyList,
clearSelect,
onChange,
};
const { createMessage } = useMessage();
function onChange() {
console.log('onChange', arguments);
}
const [
registerTable,
{
setLoading,
setProps,
getColumns,
getDataSource,
getRawDataSource,
reload,
getPaginationRef,
setPagination,
getSelectRows,
getSelectRowKeys,
setSelectedRowKeys,
clearSelectedRowKeys,
},
] = useTable({
canResize: true,
title: 'useTable示例',
titleHelpMessage: '使用useTable调用表格内方法',
api: demoListApi,
columns: getBasicColumns(),
defSort: {
field: 'name',
order: 'ascend',
},
rowKey: 'id',
showTableSetting: true,
onChange,
rowSelection: {
type: 'checkbox',
},
onColumnsChange: (data: ColumnChangeParam[]) => {
console.log('ColumnsChanged', data);
},
});
function changeLoading() {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 1000);
}
function changeColumns() {
setProps({
columns: getBasicShortColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
}
function reloadTable() {
setProps({
columns: getBasicColumns(),
rowSelection: {
type: 'checkbox',
},
showIndexColumn: true,
});
reload({
page: 1,
});
}
function getColumn() {
createMessage.info('请在控制台查看!');
console.log(getColumns());
}
function getTableData() {
createMessage.info('请在控制台查看!');
console.log(getDataSource());
}
function getTableRawData() {
createMessage.info('请在控制台查看!');
console.log(getRawDataSource());
}
function getPagination() {
createMessage.info('请在控制台查看!');
console.log(getPaginationRef());
}
function setPaginationInfo() {
setPagination({
current: 2,
});
reload();
}
function getSelectRowList() {
createMessage.info('请在控制台查看!');
console.log(getSelectRows());
}
function getSelectRowKeyList() {
createMessage.info('请在控制台查看!');
console.log(getSelectRowKeys());
}
function setSelectedRowKeyList() {
setSelectedRowKeys(['0', '1', '2']);
}
function clearSelect() {
clearSelectedRowKeys();
}
</script>

View File

@ -14,12 +14,12 @@
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ActionItem, TableAction } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { ActionItem, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { vxeTableColumns, vxeTableFormSchema } from './tableData';
import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
import { demoListApi } from '/@/api/demo/table';
import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '@/components/VxeTable';
import { demoListApi } from '@/api/demo/table';
const { createMessage } = useMessage();

View File

@ -1,7 +1,6 @@
import { optionsListApi } from '/@/api/demo/select';
import { FormProps, FormSchema } from '/@/components/Table';
import { BasicColumn } from '/@/components/Table/src/types/table';
import { VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable';
import { optionsListApi } from '@/api/demo/select';
import { FormProps, FormSchema, BasicColumn } from '@/components/Table';
import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';
import { ref } from 'vue';
import { Input } from 'ant-design-vue';

View File

@ -27,120 +27,96 @@
<BasicTree :treeData="treeData" title="函数操作" ref="treeRef" :checkable="true" />
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicTree, TreeActionType } from '/@/components/Tree/index';
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { BasicTree, TreeActionType } from '@/components/Tree/index';
import { treeData } from './data';
import { useMessage } from '/@/hooks/web/useMessage';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '@/components/Page';
import { type Nullable } from '@vben/types';
export default defineComponent({
components: { BasicTree, PageWrapper },
setup() {
const treeRef = ref<Nullable<TreeActionType>>(null);
const { createMessage } = useMessage();
const treeRef = ref<Nullable<TreeActionType>>(null);
const { createMessage } = useMessage();
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
function handleLevel(level: number) {
getTree().filterByLevel(level);
}
function handleLevel(level: number) {
getTree().filterByLevel(level);
}
function handleSetCheckData() {
getTree().setCheckedKeys(['0-0']);
}
function handleSetCheckData() {
getTree().setCheckedKeys(['0-0']);
}
function handleGetCheckData() {
const keys = getTree().getCheckedKeys();
createMessage.success(JSON.stringify(keys));
}
function handleGetCheckData() {
const keys = getTree().getCheckedKeys();
createMessage.success(JSON.stringify(keys));
}
function handleSetSelectData() {
getTree().setSelectedKeys(['0-0']);
}
function handleSetSelectData() {
getTree().setSelectedKeys(['0-0']);
}
function handleGetSelectData() {
const keys = getTree().getSelectedKeys();
createMessage.success(JSON.stringify(keys));
}
function handleGetSelectData() {
const keys = getTree().getSelectedKeys();
createMessage.success(JSON.stringify(keys));
}
function handleGetSelectNode() {
const keys = getTree().getSelectedKeys();
const node = getTree().getSelectedNode(keys[0]);
createMessage.success(node !== null ? JSON.stringify(node) : null);
}
function handleGetSelectNode() {
const keys = getTree().getSelectedKeys();
const node = getTree().getSelectedNode(keys[0]);
createMessage.success(node !== null ? JSON.stringify(node) : null);
}
function handleSetExpandData() {
getTree().setExpandedKeys(['0-0']);
}
function handleSetExpandData() {
getTree().setExpandedKeys(['0-0']);
}
function handleGetExpandData() {
const keys = getTree().getExpandedKeys();
createMessage.success(JSON.stringify(keys));
}
function handleGetExpandData() {
const keys = getTree().getExpandedKeys();
createMessage.success(JSON.stringify(keys));
}
function checkAll(checkAll: boolean) {
getTree().checkAll(checkAll);
}
function checkAll(checkAll: boolean) {
getTree().checkAll(checkAll);
}
function expandAll(checkAll: boolean) {
getTree().expandAll(checkAll);
}
function expandAll(checkAll: boolean) {
getTree().expandAll(checkAll);
}
function appendNodeByKey(parentKey: string | null = null) {
getTree().insertNodeByKey({
parentKey: parentKey,
node: {
title: '新增节点',
key: '2-2-2',
},
//
push: 'push',
//
// push:'unshift'
});
}
function appendNodeByKey(parentKey: string | null = null) {
getTree().insertNodeByKey({
parentKey: parentKey,
node: {
title: '新增节点',
key: '2-2-2',
},
//
push: 'push',
//
// push:'unshift'
});
}
function deleteNodeByKey(key: string) {
getTree().deleteNodeByKey(key);
}
function deleteNodeByKey(key: string) {
getTree().deleteNodeByKey(key);
}
function updateNodeByKey(key: string) {
getTree().updateNodeByKey(key, {
title: 'parent2-new',
});
}
function updateNodeByKey(key: string) {
getTree().updateNodeByKey(key, {
title: 'parent2-new',
});
}
function handleGetTreeData() {
const treeDataRef = getTree().getTreeData();
createMessage.success(JSON.stringify(treeDataRef.value));
}
return {
treeData,
treeRef,
handleLevel,
handleSetCheckData,
handleGetCheckData,
handleSetSelectData,
handleGetSelectData,
handleSetExpandData,
handleGetExpandData,
handleGetSelectNode,
appendNodeByKey,
deleteNodeByKey,
updateNodeByKey,
checkAll,
expandAll,
handleGetTreeData,
};
},
});
function handleGetTreeData() {
const treeDataRef = getTree().getTreeData();
createMessage.success(JSON.stringify(treeDataRef.value));
}
</script>

View File

@ -50,76 +50,70 @@
</Row>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, h } from 'vue';
<script lang="ts" setup>
import { h } from 'vue';
import { Row, Col } from 'ant-design-vue';
import { BasicTree, TreeActionItem, ContextMenuItem } from '/@/components/Tree/index';
import { BasicTree, TreeActionItem, ContextMenuItem } from '@/components/Tree';
import { treeData, treeData2, treeData3 } from './data';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { PageWrapper } from '/@/components/Page';
import { PageWrapper } from '@/components/Page';
import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
export default defineComponent({
components: { BasicTree, PageWrapper, Row, Col },
setup() {
function handlePlus(node: any) {
console.log(node);
}
function handlePlus(node: any) {
console.log(node);
}
function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
const menu = [
{
label: '新增',
handler: () => {
console.log('点击了新增', node);
},
icon: 'bi:plus',
function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
const menu = [
{
label: '新增',
handler: () => {
console.log('点击了新增', node);
},
icon: 'bi:plus',
},
{
label: '删除',
handler: () => {
console.log('点击了删除', node);
},
icon: 'bx:bxs-folder-open',
},
];
return new Promise((resolve) => {
resolve(menu);
});
}
const actionList: TreeActionItem[] = [
{
// show:()=>boolean;
render: (node) => {
return h(PlusOutlined, {
class: 'ml-2',
onClick: () => {
handlePlus(node);
},
{
label: '删除',
handler: () => {
console.log('点击了删除', node);
},
icon: 'bx:bxs-folder-open',
},
];
return new Promise((resolve) => {
resolve(menu);
});
}
const actionList: TreeActionItem[] = [
{
// show:()=>boolean;
render: (node) => {
return h(PlusOutlined, {
class: 'ml-2',
onClick: () => {
handlePlus(node);
},
});
},
},
{
render: () => {
return h(DeleteOutlined);
},
},
];
function createIcon({ level }) {
if (level === 1) {
return 'ion:git-compare-outline';
}
if (level === 2) {
return 'ion:home';
}
if (level === 3) {
return 'ion:airplane';
}
return '';
}
return { treeData, treeData2, treeData3, actionList, getRightMenuList, createIcon };
},
},
});
{
render: () => {
return h(DeleteOutlined);
},
},
];
function createIcon({ level }) {
if (level === 1) {
return 'ion:git-compare-outline';
}
if (level === 2) {
return 'ion:home';
}
if (level === 3) {
return 'ion:airplane';
}
return '';
}
</script>

View File

@ -1,4 +1,4 @@
import { TreeItem } from '/@/components/Tree/index';
import { TreeItem } from '@/components/Tree';
export const treeData: TreeItem[] = [
{

View File

@ -57,12 +57,12 @@
</template>
<script lang="ts" setup>
import { nextTick, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { treeData } from './data';
import { PageWrapper } from '/@/components/Page';
import { PageWrapper } from '@/components/Page';
import { Card, Row, Col, Spin } from 'ant-design-vue';
import { cloneDeep, uniq } from 'lodash-es';
import { isArray } from '/@/utils/is';
import { isArray } from '@/utils/is';
import { type Nullable } from '@vben/types';
import { SmileTwoTone, CarryOutOutlined } from '@ant-design/icons-vue';

View File

@ -17,9 +17,9 @@
<script lang="ts" setup>
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page';
import { Description, DescItem, useDescription } from '/@/components/Description/index';
import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
import { PageWrapper } from '@/components/Page';
import { Description, DescItem, useDescription } from '@/components/Description';
import { GITHUB_URL, SITE_URL, DOC_URL } from '@/settings/siteSetting';
const { pkg, lastBuildTime } = __APP_INFO__;

View File

@ -6,9 +6,9 @@
<script lang="ts" setup>
import type { PropType } from 'vue';
import type { ErrorLogInfo } from '/#/store';
import { BasicModal } from '/@/components/Modal/index';
import { Description, useDescription } from '/@/components/Description/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { BasicModal } from '@/components/Modal';
import { Description, useDescription } from '@/components/Description';
import { useI18n } from '@/hooks/web/useI18n';
import { getDescSchema } from './data';
defineProps({

View File

@ -1,7 +1,7 @@
import { Tag } from 'ant-design-vue';
import { BasicColumn } from '/@/components/Table/index';
import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
import { useI18n } from '/@/hooks/web/useI18n';
import { BasicColumn } from '@/components/Table';
import { ErrorTypeEnum } from '@/enums/exceptionEnum';
import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n();

View File

@ -36,12 +36,12 @@
import type { ErrorLogInfo } from '/#/store';
import { watch, ref, nextTick } from 'vue';
import DetailModal from './DetailModal.vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useErrorLogStore } from '/@/store/modules/errorLog';
import { fireErrorApi } from '/@/api/demo/error';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { useI18n } from '@/hooks/web/useI18n';
import { useErrorLogStore } from '@/store/modules/errorLog';
import { fireErrorApi } from '@/api/demo/error';
import { getColumns } from './data';
import { cloneDeep } from 'lodash-es';

View File

@ -2,14 +2,14 @@
import type { PropType } from 'vue';
import { Result, Button } from 'ant-design-vue';
import { defineComponent, ref, computed, unref } from 'vue';
import { ExceptionEnum } from '/@/enums/exceptionEnum';
import notDataSvg from '/@/assets/svg/no-data.svg';
import netWorkSvg from '/@/assets/svg/net-error.svg';
import { ExceptionEnum } from '@/enums/exceptionEnum';
import notDataSvg from '@/assets/svg/no-data.svg';
import netWorkSvg from '@/assets/svg/net-error.svg';
import { useRoute } from 'vue-router';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGo, useRedo } from '/@/hooks/web/usePage';
import { PageEnum } from '/@/enums/pageEnum';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useGo, useRedo } from '@/hooks/web/usePage';
import { PageEnum } from '@/enums/pageEnum';
interface MapValue {
title: string;

View File

@ -15,9 +15,9 @@
import { ref, unref, computed } from 'vue';
import { Spin } from 'ant-design-vue';
import { useWindowSizeFn } from '@vben/hooks';
import { propTypes } from '/@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
import { propTypes } from '@/utils/propTypes';
import { useDesign } from '@/hooks/web/useDesign';
import { useLayoutHeight } from '@/layouts/default/content/useContentViewHeight';
defineProps({
frameSrc: propTypes.string.def(''),

View File

@ -79,13 +79,13 @@
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { Input } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import { useLockStore } from '/@/store/modules/lock';
import { useI18n } from '/@/hooks/web/useI18n';
import { useUserStore } from '@/store/modules/user';
import { useLockStore } from '@/store/modules/lock';
import { useI18n } from '@/hooks/web/useI18n';
import { useNow } from './useNow';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { LockOutlined } from '@ant-design/icons-vue';
import headerImg from '/@/assets/images/header.jpg';
import headerImg from '@/assets/images/header.jpg';
const InputPassword = Input.Password;

View File

@ -6,7 +6,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import LockPage from './LockPage.vue';
import { useLockStore } from '/@/store/modules/lock';
import { useLockStore } from '@/store/modules/lock';
const lockStore = useLockStore();
const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);

View File

@ -1,4 +1,4 @@
import { dateUtil } from '/@/utils/dateUtil';
import { dateUtil } from '@/utils/dateUtil';
import { reactive, toRefs } from 'vue';
import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';

View File

@ -36,8 +36,8 @@
import { reactive, ref, computed, unref } from 'vue';
import LoginFormTitle from './LoginFormTitle.vue';
import { Form, Input, Button } from 'ant-design-vue';
import { CountdownInput } from '/@/components/CountDown';
import { useI18n } from '/@/hooks/web/useI18n';
import { CountdownInput } from '@/components/CountDown';
import { useI18n } from '@/hooks/web/useI18n';
import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
const FormItem = Form.Item;

View File

@ -49,16 +49,16 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { AppLogo, AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import { AppLogo, AppLocalePicker, AppDarkModeToggle } from '@/components/Application';
import LoginForm from './LoginForm.vue';
import ForgetPasswordForm from './ForgetPasswordForm.vue';
import RegisterForm from './RegisterForm.vue';
import MobileForm from './MobileForm.vue';
import QrCodeForm from './QrCodeForm.vue';
import { useGlobSetting } from '/@/hooks/setting';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { useLocaleStore } from '/@/store/modules/locale';
import { useGlobSetting } from '@/hooks/setting';
import { useI18n } from '@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { useLocaleStore } from '@/store/modules/locale';
defineProps({
sessionTimeout: {

View File

@ -94,12 +94,12 @@
} from '@ant-design/icons-vue';
import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '@/hooks/web/useI18n';
import { useMessage } from '@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user';
import { useUserStore } from '@/store/modules/user';
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
//import { onKeyStroke } from '@vueuse/core';
const ACol = Col;

View File

@ -5,7 +5,7 @@
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
import { LoginStateEnum, useLoginState } from './useLogin';
const { t } = useI18n();

View File

@ -33,9 +33,9 @@
<script lang="ts" setup>
import { reactive, ref, computed, unref } from 'vue';
import { Form, Input, Button } from 'ant-design-vue';
import { CountdownInput } from '/@/components/CountDown';
import { CountdownInput } from '@/components/CountDown';
import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
const FormItem = Form.Item;

View File

@ -18,8 +18,8 @@
import { computed, unref } from 'vue';
import LoginFormTitle from './LoginFormTitle.vue';
import { Button, Divider } from 'ant-design-vue';
import { QrCode } from '/@/components/Qrcode/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { QrCode } from '@/components/Qrcode';
import { useI18n } from '@/hooks/web/useI18n';
import { useLoginState, LoginStateEnum } from './useLogin';
const qrCodeUrl = 'https://vben.vvbin.cn/login';

View File

@ -69,9 +69,9 @@
import { reactive, ref, unref, computed } from 'vue';
import LoginFormTitle from './LoginFormTitle.vue';
import { Form, Input, Button, Checkbox } from 'ant-design-vue';
import { StrengthMeter } from '/@/components/StrengthMeter';
import { CountdownInput } from '/@/components/CountDown';
import { useI18n } from '/@/hooks/web/useI18n';
import { StrengthMeter } from '@/components/StrengthMeter';
import { CountdownInput } from '@/components/CountDown';
import { useI18n } from '@/hooks/web/useI18n';
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
const FormItem = Form.Item;

View File

@ -8,11 +8,11 @@
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import Login from './Login.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useUserStore } from '/@/store/modules/user';
import { usePermissionStore } from '/@/store/modules/permission';
import { useAppStore } from '/@/store/modules/app';
import { PermissionModeEnum } from '/@/enums/appEnum';
import { useDesign } from '@/hooks/web/useDesign';
import { useUserStore } from '@/store/modules/user';
import { usePermissionStore } from '@/store/modules/permission';
import { useAppStore } from '@/store/modules/app';
import { PermissionModeEnum } from '@/enums/appEnum';
import { type Nullable } from '@vben/types';
const { prefixCls } = useDesign('st-login');

View File

@ -5,7 +5,7 @@ import type {
Rule as ValidationRule,
} from 'ant-design-vue/lib/form/interface';
import { ref, computed, unref, Ref } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
export enum LoginStateEnum {
LOGIN,