mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-24 10:33:50 +08:00
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:
parent
003a951bef
commit
9fad2ab631
@ -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';
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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: 第一行(id为0)的选择框禁用
|
||||
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: 第一行(id为0)的选择框禁用
|
||||
if (record.id === '0') {
|
||||
return { disabled: true };
|
||||
} else {
|
||||
return { disabled: false };
|
||||
}
|
||||
},
|
||||
},
|
||||
titleHelpMessage: '树形组件不能和序列号列同时存在',
|
||||
columns: getBasicColumns(),
|
||||
dataSource: getTreeTableData(),
|
||||
rowKey: 'id',
|
||||
});
|
||||
</script>
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { TreeItem } from '/@/components/Tree/index';
|
||||
import { TreeItem } from '@/components/Tree';
|
||||
|
||||
export const treeData: TreeItem[] = [
|
||||
{
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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__;
|
||||
|
||||
|
@ -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({
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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(''),
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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: {
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
@ -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;
|
||||
|
@ -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');
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user