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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,14 +8,14 @@
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, h } from 'vue'; import { h } from 'vue';
import { BasicTable, useTable, BasicColumn } from '/@/components/Table'; import { BasicTable, useTable, BasicColumn } from '@/components/Table';
import { optionsListApi } from '/@/api/demo/select'; import { optionsListApi } from '@/api/demo/select';
import { demoListApi } from '/@/api/demo/table'; import { demoListApi } from '@/api/demo/table';
import { treeOptionsListApi } from '/@/api/demo/tree'; import { treeOptionsListApi } from '@/api/demo/tree';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { Progress } from 'ant-design-vue'; import { Progress } from 'ant-design-vue';
const columns: BasicColumn[] = [ const columns: BasicColumn[] = [
@ -210,67 +210,56 @@
width: 200, width: 200,
}, },
]; ];
export default defineComponent({
components: { BasicTable },
setup() {
const [registerTable] = useTable({
title: '可编辑单元格示例',
api: demoListApi,
columns: columns,
showIndexColumn: false,
bordered: true,
});
const { createMessage } = useMessage(); const [registerTable] = useTable({
title: '可编辑单元格示例',
function handleEditEnd({ record, index, key, value }: Recordable) { api: demoListApi,
console.log(record, index, key, value); columns: columns,
return false; showIndexColumn: false,
} bordered: true,
//
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 { 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> </script>

View File

@ -9,8 +9,8 @@
</BasicTable> </BasicTable>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { import {
BasicTable, BasicTable,
useTable, useTable,
@ -18,13 +18,13 @@
BasicColumn, BasicColumn,
ActionItem, ActionItem,
EditRecordRow, EditRecordRow,
} from '/@/components/Table'; } from '@/components/Table';
import { optionsListApi } from '/@/api/demo/select'; import { optionsListApi } from '@/api/demo/select';
import { demoListApi } from '/@/api/demo/table'; import { demoListApi } from '@/api/demo/table';
import { treeOptionsListApi } from '/@/api/demo/tree'; import { treeOptionsListApi } from '@/api/demo/tree';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const columns: BasicColumn[] = [ const columns: BasicColumn[] = [
{ {
@ -221,102 +221,91 @@
width: 200, 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) { const { createMessage: msg } = useMessage();
currentEditKeyRef.value = record.key; const currentEditKeyRef = ref('');
record.onEdit?.(true); const [registerTable] = useTable({
} title: '可编辑行示例',
titleHelpMessage: [
function handleCancel(record: EditRecordRow) { '本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
currentEditKeyRef.value = ''; ],
record.onEdit?.(false, false); api: demoListApi,
} columns: columns,
showIndexColumn: false,
async function handleSave(record: EditRecordRow) { showTableSetting: true,
// tableSetting: { fullScreen: true },
msg.loading({ content: '正在保存...', duration: 0, key: 'saving' }); actionColumn: {
const valid = await record.onValid?.(); width: 160,
if (valid) { title: 'Action',
try { dataIndex: 'action',
const data = cloneDeep(record.editValueRefs); // slots: { customRender: 'action' },
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,
};
}, },
}); });
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> </script>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -19,141 +19,118 @@
<BasicTable @register="registerTable" /> <BasicTable @register="registerTable" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicTable, ColumnChangeParam, useTable } from '@/components/Table';
import { BasicTable, ColumnChangeParam, useTable } from '/@/components/Table';
import { getBasicColumns, getBasicShortColumns } from './tableData'; import { getBasicColumns, getBasicShortColumns } from './tableData';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { demoListApi } from '/@/api/demo/table'; import { demoListApi } from '@/api/demo/table';
export default defineComponent({ const { createMessage } = useMessage();
components: { BasicTable }, function onChange() {
setup() { console.log('onChange', arguments);
const { createMessage } = useMessage(); }
function onChange() { const [
console.log('onChange', arguments); registerTable,
} {
const [ setLoading,
registerTable, setProps,
{ getColumns,
setLoading, getDataSource,
setProps, getRawDataSource,
getColumns, reload,
getDataSource, getPaginationRef,
getRawDataSource, setPagination,
reload, getSelectRows,
getPaginationRef, getSelectRowKeys,
setPagination, setSelectedRowKeys,
getSelectRows, clearSelectedRowKeys,
getSelectRowKeys, },
setSelectedRowKeys, ] = useTable({
clearSelectedRowKeys, canResize: true,
}, title: 'useTable示例',
] = useTable({ titleHelpMessage: '使用useTable调用表格内方法',
canResize: true, api: demoListApi,
title: 'useTable示例', columns: getBasicColumns(),
titleHelpMessage: '使用useTable调用表格内方法', defSort: {
api: demoListApi, field: 'name',
columns: getBasicColumns(), order: 'ascend',
defSort: { },
field: 'name', rowKey: 'id',
order: 'ascend', showTableSetting: true,
}, onChange,
rowKey: 'id', rowSelection: {
showTableSetting: true, type: 'checkbox',
onChange, },
rowSelection: { onColumnsChange: (data: ColumnChangeParam[]) => {
type: 'checkbox', console.log('ColumnsChanged', data);
},
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,
};
}, },
}); });
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> </script>

View File

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

View File

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

View File

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

View File

@ -50,76 +50,70 @@
</Row> </Row>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, h } from 'vue'; import { h } from 'vue';
import { Row, Col } from 'ant-design-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 { treeData, treeData2, treeData3 } from './data';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'; 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'; import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
export default defineComponent({ function handlePlus(node: any) {
components: { BasicTree, PageWrapper, Row, Col }, console.log(node);
setup() { }
function handlePlus(node: any) {
console.log(node);
}
function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> { function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
const menu = [ const menu = [
{ {
label: '新增', label: '新增',
handler: () => { handler: () => {
console.log('点击了新增', node); console.log('点击了新增', node);
}, },
icon: 'bi:plus', 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> </script>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -6,7 +6,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { computed } from 'vue';
import LockPage from './LockPage.vue'; import LockPage from './LockPage.vue';
import { useLockStore } from '/@/store/modules/lock'; import { useLockStore } from '@/store/modules/lock';
const lockStore = useLockStore(); const lockStore = useLockStore();
const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false); 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 { reactive, toRefs } from 'vue';
import { tryOnMounted, tryOnUnmounted } from '@vueuse/core'; import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';

View File

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

View File

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

View File

@ -94,12 +94,12 @@
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import LoginFormTitle from './LoginFormTitle.vue'; import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage'; 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 { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
//import { onKeyStroke } from '@vueuse/core'; //import { onKeyStroke } from '@vueuse/core';
const ACol = Col; const ACol = Col;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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