github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 10:33:50 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(demo): 重构demo页面组件为 script setup 语法 (#3293)

Browse Source 
* refactor: charts demo use setup refactor

* refactor: demo use script setup refactor

* refactor: demo feat use script setup refactor

* fix: tab-params

* revert: settings.json

* style(demo->Modal1): loading text line height

* Update index.vue

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>
This commit is contained in:
xingyu 2023-11-18 11:43:18 +08:00 committed by GitHub
parent cb907165ec
commit 35751068c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
133 changed files with 2861 additions and 3967 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
src/views/demo/charts/Line.vue
View File

@ -1,117 +1,113 @@
<template> <template>
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'; import { PropType, ref, Ref, onMounted } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { useECharts } from '/@/hooks/web/useECharts';
import { getLineData } from './data'; import { getLineData } from './data';
export default defineComponent({ defineProps({
props: { width: {
width: { type: String as PropType<string>,
type: String as PropType<string>, default: '100%',
default: '100%',
},
height: {
type: String as PropType<string>,
default: 'calc(100vh - 78px)',
},
}, },
setup() { height: {
const chartRef = ref<HTMLDivElement | null>(null); type: String as PropType<string>,
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>); default: 'calc(100vh - 78px)',
const { barData, lineData, category } = getLineData;
onMounted(() => {
setOptions({
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333',
},
},
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc',
},
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc',
},
},
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc',
},
},
},
series: [
{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: 'auto',
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData,
},
{
name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' },
]),
},
data: barData,
},
{
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
{ offset: 1, color: 'rgba(20,200,212,0)' },
]),
},
z: -12,
data: lineData,
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f375f',
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData,
},
],
});
});
return { chartRef };
}, },
}); });
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
const { barData, lineData, category } = getLineData;
onMounted(() => {
setOptions({
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333',
},
},
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc',
},
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc',
},
},
},
yAxis: {
splitLine: { show: false },
axisLine: {
lineStyle: {
color: '#ccc',
},
},
},
series: [
{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: 'auto',
symbol: 'emptyCircle',
symbolSize: 15,
data: lineData,
},
{
name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' },
]),
},
data: barData,
},
{
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
{ offset: 1, color: 'rgba(20,200,212,0)' },
]),
},
z: -12,
data: lineData,
},
{
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f375f',
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData,
},
],
});
});
</script> </script>

125
src/views/demo/charts/Map.vue
View File

@ -1,75 +1,70 @@
<template> <template>
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'; import { PropType, ref, Ref, onMounted } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { useECharts } from '/@/hooks/web/useECharts';
import { mapData } from './data'; import { mapData } from './data';
import { registerMap } from 'echarts'; import { registerMap } from 'echarts';
export default defineComponent({ defineProps({
props: { width: {
width: { type: String as PropType<string>,
type: String as PropType<string>, default: '100%',
default: '100%',
},
height: {
type: String as PropType<string>,
default: 'calc(100vh - 78px)',
},
}, },
setup() { height: {
const chartRef = ref<HTMLDivElement | null>(null); type: String as PropType<string>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: 'calc(100vh - 78px)',
onMounted(async () => {
const json = (await (await import('./china.json')).default) as any;
registerMap('china', json);
setOptions({
visualMap: [
{
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#e0ffff', '#006edd'],
symbolSize: [30, 100],
},
},
],
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, .6)',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
series: [
{
name: 'iphone4',
type: 'map',
map: 'china',
label: {
show: true,
color: 'rgb(249, 249, 249)',
fontSize: 10,
},
itemStyle: {
areaColor: '#2f82ce',
borderColor: '#0DAAC1',
},
data: mapData,
},
],
});
});
return { chartRef };
}, },
}); });
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(async () => {
const json = (await (await import('./china.json')).default) as any;
registerMap('china', json);
setOptions({
visualMap: [
{
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: false,
orient: 'horizontal',
inRange: {
color: ['#e0ffff', '#006edd'],
symbolSize: [30, 100],
},
},
],
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, .6)',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
series: [
{
name: 'iphone4',
type: 'map',
map: 'china',
label: {
show: true,
color: 'rgb(249, 249, 249)',
fontSize: 10,
},
itemStyle: {
areaColor: '#2f82ce',
borderColor: '#0DAAC1',
},
data: mapData,
},
],
});
});
</script> </script>

271
src/views/demo/charts/Pie.vue
View File

@ -1,146 +1,141 @@
<template> <template>
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'; import { PropType, ref, Ref, onMounted } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { useECharts } from '/@/hooks/web/useECharts'; defineProps({
width: {
export default defineComponent({ type: String as PropType<string>,
props: { default: '100%',
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: 'calc(100vh - 78px)',
},
}, },
setup() { height: {
const chartRef = ref<HTMLDivElement | null>(null); type: String as PropType<string>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: 'calc(100vh - 78px)',
const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
const yAxisData = [
'原因1',
'原因2',
'原因3',
'原因4',
'原因5',
'原因6',
'原因7',
'原因8',
'原因9',
'原因10',
];
onMounted(() => {
setOptions({
backgroundColor: '#0f375f',
title: [
{
text: '各渠道投诉占比',
left: '2%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
{
text: '投诉原因TOP10',
left: '40%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
{
text: '各级别投诉占比',
left: '2%',
top: '50%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
],
grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
tooltip: {
formatter: '{b} ({c})',
},
xAxis: [
{
gridIndex: 0,
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
axisLine: { show: false },
},
],
yAxis: [
{
gridIndex: 0,
interval: 0,
data: yAxisData.reverse(),
axisTick: { show: false },
axisLabel: { show: true },
splitLine: { show: false },
axisLine: { show: true, lineStyle: { color: '#6173a3' } },
},
],
series: [
{
name: '各渠道投诉占比',
type: 'pie',
radius: '30%',
center: ['22%', '25%'],
data: [
{ value: 335, name: '客服电话' },
{ value: 310, name: '奥迪官网' },
{ value: 234, name: '媒体曝光' },
{ value: 135, name: '质检总局' },
{ value: 105, name: '其他' },
],
labelLine: { show: false },
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
},
},
{
name: '各级别投诉占比',
type: 'pie',
radius: '30%',
center: ['22%', '75%'],
labelLine: { show: false },
data: [
{ value: 335, name: 'A级' },
{ value: 310, name: 'B级' },
{ value: 234, name: 'C级' },
{ value: 135, name: 'D级' },
],
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
},
},
{
name: '投诉原因TOP10',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: '45%',
itemStyle: { color: '#86c9f4' },
label: { show: true, position: 'right', color: '#9EA7C4' },
data: dataAll.sort(),
},
],
});
});
return { chartRef };
}, },
}); });
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
const yAxisData = [
'原因1',
'原因2',
'原因3',
'原因4',
'原因5',
'原因6',
'原因7',
'原因8',
'原因9',
'原因10',
];
onMounted(() => {
setOptions({
backgroundColor: '#0f375f',
title: [
{
text: '各渠道投诉占比',
left: '2%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
{
text: '投诉原因TOP10',
left: '40%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
{
text: '各级别投诉占比',
left: '2%',
top: '50%',
textStyle: {
color: '#fff',
fontSize: 14,
},
},
],
grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
tooltip: {
formatter: '{b} ({c})',
},
xAxis: [
{
gridIndex: 0,
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
axisLine: { show: false },
},
],
yAxis: [
{
gridIndex: 0,
interval: 0,
data: yAxisData.reverse(),
axisTick: { show: false },
axisLabel: { show: true },
splitLine: { show: false },
axisLine: { show: true, lineStyle: { color: '#6173a3' } },
},
],
series: [
{
name: '各渠道投诉占比',
type: 'pie',
radius: '30%',
center: ['22%', '25%'],
data: [
{ value: 335, name: '客服电话' },
{ value: 310, name: '奥迪官网' },
{ value: 234, name: '媒体曝光' },
{ value: 135, name: '质检总局' },
{ value: 105, name: '其他' },
],
labelLine: { show: false },
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
},
},
{
name: '各级别投诉占比',
type: 'pie',
radius: '30%',
center: ['22%', '75%'],
labelLine: { show: false },
data: [
{ value: 335, name: 'A级' },
{ value: 310, name: 'B级' },
{ value: 234, name: 'C级' },
{ value: 135, name: 'D级' },
],
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
},
},
{
name: '投诉原因TOP10',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: '45%',
itemStyle: { color: '#86c9f4' },
label: { show: true, position: 'right', color: '#9EA7C4' },
data: dataAll.sort(),
},
],
});
});
</script> </script>

172
src/views/demo/charts/SaleRadar.vue
View File

@ -3,99 +3,93 @@
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { ref, watch } from 'vue';
import { defineComponent, 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';
export default defineComponent({ const props = defineProps({
components: { Card }, loading: Boolean,
props: { width: {
loading: Boolean, type: String as PropType<string>,
width: { default: '100%',
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '400px',
},
}, },
setup(props) { height: {
const chartRef = ref<HTMLDivElement | null>(null); type: String as PropType<string>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: '400px',
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
legend: {
bottom: 0,
data: ['Visits', 'Sales'],
},
tooltip: {},
radar: {
radius: '60%',
splitNumber: 8,
indicator: [
{
name: '2017',
},
{
name: '2017',
},
{
name: '2018',
},
{
name: '2019',
},
{
name: '2020',
},
{
name: '2021',
},
],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{
value: [90, 50, 86, 40, 50, 20],
name: 'Visits',
itemStyle: {
color: '#9f8ed7',
},
},
{
value: [70, 75, 70, 76, 20, 85],
name: 'Sales',
itemStyle: {
color: '#1edec5',
},
},
],
},
],
});
},
{ immediate: true },
);
return { chartRef };
}, },
}); });
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
legend: {
bottom: 0,
data: ['Visits', 'Sales'],
},
tooltip: {},
radar: {
radius: '60%',
splitNumber: 8,
indicator: [
{
name: '2017',
},
{
name: '2017',
},
{
name: '2018',
},
{
name: '2019',
},
{
name: '2020',
},
{
name: '2021',
},
],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{
value: [90, 50, 86, 40, 50, 20],
name: 'Visits',
itemStyle: {
color: '#9f8ed7',
},
},
{
value: [70, 75, 70, 76, 20, 85],
name: 'Sales',
itemStyle: {
color: '#1edec5',
},
},
],
},
],
});
},
{ immediate: true },
);
</script> </script>

64
src/views/demo/charts/map/Baidu.vue
View File

@ -1,46 +1,42 @@
<template> <template>
<div ref="wrapRef" :style="{ height, width }"></div> <div ref="wrapRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue'; import { ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '@/hooks/web/useScript';
import { useScript } from '/@/hooks/web/useScript'; defineOptions({ name: 'BaiduMap' });
defineProps({
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
});
const BAI_DU_MAP_URL = const BAI_DU_MAP_URL =
'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1'; 'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1';
export default defineComponent({
name: 'BaiduMap',
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
},
setup() {
const wrapRef = ref<HTMLDivElement | null>(null);
const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
async function initMap() { const wrapRef = ref<HTMLDivElement | null>(null);
await toPromise(); const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
await nextTick();
const wrapEl = unref(wrapRef);
if (!wrapEl) return;
const BMap = (window as any).BMap;
const map = new BMap.Map(wrapEl);
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
}
onMounted(() => { async function initMap() {
initMap(); await toPromise();
}); await nextTick();
const wrapEl = unref(wrapRef);
if (!wrapEl) return;
const BMap = (window as any).BMap;
const map = new BMap.Map(wrapEl);
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
}
return { wrapRef }; onMounted(async () => {
}, await initMap();
}); });
</script> </script>

67
src/views/demo/charts/map/Gaode.vue
View File

@ -1,47 +1,42 @@
<template> <template>
<div ref="wrapRef" :style="{ height, width }"></div> <div ref="wrapRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue'; import { ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '@/hooks/web/useScript';
import { useScript } from '/@/hooks/web/useScript'; defineOptions({ name: 'AMap' });
defineProps({
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
});
const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b'; const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b';
export default defineComponent({ const wrapRef = ref<HTMLDivElement | null>(null);
name: 'AMap', const { toPromise } = useScript({ src: A_MAP_URL });
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
},
setup() {
const wrapRef = ref<HTMLDivElement | null>(null);
const { toPromise } = useScript({ src: A_MAP_URL });
async function initMap() { async function initMap() {
await toPromise(); await toPromise();
await nextTick(); await nextTick();
const wrapEl = unref(wrapRef); const wrapEl = unref(wrapRef);
if (!wrapEl) return; if (!wrapEl) return;
const AMap = (window as any).AMap; const AMap = (window as any).AMap;
new AMap.Map(wrapEl, { new AMap.Map(wrapEl, {
zoom: 11, zoom: 11,
center: [116.397428, 39.90923], center: [116.397428, 39.90923],
viewMode: '3D', viewMode: '3D',
}); });
} }
onMounted(() => { onMounted(async () => {
initMap(); await initMap();
});
return { wrapRef };
},
}); });
</script> </script>

77
src/views/demo/charts/map/Google.vue
View File

@ -1,53 +1,48 @@
<template> <template>
<div ref="wrapRef" :style="{ height, width }"></div> <div ref="wrapRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue'; import { ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '@/hooks/web/useScript';
import { useScript } from '/@/hooks/web/useScript'; defineOptions({ name: 'GoogleMap' });
defineProps({
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
});
const MAP_URL = const MAP_URL =
'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true'; 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true';
export default defineComponent({ const wrapRef = ref<HTMLDivElement | null>(null);
name: 'GoogleMap', const { toPromise } = useScript({ src: MAP_URL });
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
},
setup() {
const wrapRef = ref<HTMLDivElement | null>(null);
const { toPromise } = useScript({ src: MAP_URL });
async function initMap() { async function initMap() {
await toPromise(); await toPromise();
await nextTick(); await nextTick();
const wrapEl = unref(wrapRef); const wrapEl = unref(wrapRef);
if (!wrapEl) return; if (!wrapEl) return;
const google = (window as any).google; const google = (window as any).google;
const latLng = { lat: 116.404, lng: 39.915 }; const latLng = { lat: 116.404, lng: 39.915 };
const map = new google.maps.Map(wrapEl, { const map = new google.maps.Map(wrapEl, {
zoom: 4, zoom: 4,
center: latLng, center: latLng,
}); });
new google.maps.Marker({ new google.maps.Marker({
position: latLng, position: latLng,
map: map, map: map,
title: 'Hello World!', title: 'Hello World!',
}); });
} }
onMounted(() => { onMounted(async () => {
initMap(); await initMap();
});
return { wrapRef };
},
}); });
</script> </script>

29
src/views/demo/comp/button/index.vue
View File

@ -4,9 +4,9 @@
title="基础组件" title="基础组件"
content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）" content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）"
> >
<a-row :gutter="[20, 20]"> <Row :gutter="[20, 20]">
<a-col :xl="10" :lg="24"> <Col :xl="10" :lg="24">
<a-card title="BasicButton Color"> <Card title="BasicButton Color">
<div class="my-2"> <div class="my-2">
<h3>success</h3> <h3>success</h3>
<div class="py-2"> <div class="py-2">
@ -47,10 +47,10 @@
<a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button> <a-button ghost type="dashed" color="warning" class="ml-2"> 幽灵警告dashed </a-button>
<a-button ghost danger class="ml-2"> 幽灵危险 </a-button> <a-button ghost danger class="ml-2"> 幽灵危险 </a-button>
</div> </div>
</a-card> </Card>
</a-col> </Col>
<a-col :xl="14" :lg="24"> <Col :xl="14" :lg="24">
<a-card title="BasicButton Types"> <Card title="BasicButton Types">
<div class="my-2"> <div class="my-2">
<h3>primary</h3> <h3>primary</h3>
<a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button> <a-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </a-button>
@ -97,17 +97,12 @@
<!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>--> <!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
<!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>--> <!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
</div> </div>
</a-card> </Card>
</a-col> </Col>
</a-row> </Row>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
import { Card, Row, Col } from 'ant-design-vue'; import { Card, Row, Col } from 'ant-design-vue';
export default defineComponent({
components: { PageWrapper, ACard: Card, ARow: Row, ACol: Col },
});
</script> </script>

13
src/views/demo/comp/card-list/index.vue
View File

@ -2,18 +2,17 @@
<PageWrapper title="卡片列表示例" content="基础封装"> <PageWrapper title="卡片列表示例" content="基础封装">
<CardList :params="params" :api="demoListApi" @get-method="getMethod" @delete="handleDel"> <CardList :params="params" :api="demoListApi" @get-method="getMethod" @delete="handleDel">
<template #header> <template #header>
<Button type="primary" color="error"> 按钮1 </Button> <a-button type="primary" color="error"> 按钮1 </a-button>
<Button type="primary" color="success"> 按钮2 </Button> <a-button type="primary" color="success"> 按钮2 </a-button>
</template> </template>
</CardList> </CardList>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { CardList } from '/@/components/CardList'; import { CardList } from '@/components/CardList';
import { Button } from '/@/components/Button'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page'; import { demoListApi } from '@/api/demo/table';
import { demoListApi } from '/@/api/demo/table'; import { useMessage } from '@/hooks/web/useMessage';
import { useMessage } from '/@/hooks/web/useMessage';
const { notification } = useMessage(); const { notification } = useMessage();
// 请求api时附带参数 // 请求api时附带参数

16
src/views/demo/comp/count-to/index.vue
View File

@ -35,20 +35,12 @@
</Card> </Card>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { CountTo } from '/@/components/CountTo/index'; import { CountTo } from '@/components/CountTo/index';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
export default defineComponent({ const CardGrid = Card.Grid;
components: {
Card,
CardGrid: Card.Grid,
CountTo,
PageWrapper,
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.count-to-demo { .count-to-demo {

68
src/views/demo/comp/cropper/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试！"> <PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试！">
<CollapseContainer title="头像裁剪"> <CollapseContainer title="头像裁剪">
<CropperAvatar :uploadApi="uploadApi" :value="avatar" /> <CropperAvatar :uploadApi="uploadApi as any" :value="avatar" />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="矩形裁剪" class="my-4"> <CollapseContainer title="矩形裁剪" class="my-4">
@ -31,52 +31,30 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '@/components/Container';
import { CropperImage, CropperAvatar } from '/@/components/Cropper'; import { CropperImage, CropperAvatar } from '@/components/Cropper';
import { uploadApi } from '/@/api/sys/upload'; import { uploadApi } from '@/api/sys/upload';
import img from '/@/assets/images/header.jpg'; import img from '@/assets/images/header.jpg';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
export default defineComponent({ const info = ref('');
components: { const cropperImg = ref('');
PageWrapper, const circleInfo = ref('');
CropperImage, const circleImg = ref('');
CollapseContainer, const userStore = useUserStore();
CropperAvatar, const avatar = ref(userStore.getUserInfo?.avatar || '');
}, function handleCropend({ imgBase64, imgInfo }) {
setup() { info.value = imgInfo;
const info = ref(''); cropperImg.value = imgBase64;
const cropperImg = ref(''); }
const circleInfo = ref('');
const circleImg = ref('');
const userStore = useUserStore();
const avatar = ref(userStore.getUserInfo?.avatar || '');
function handleCropend({ imgBase64, imgInfo }) {
info.value = imgInfo;
cropperImg.value = imgBase64;
}
function handleCircleCropend({ imgBase64, imgInfo }) { function handleCircleCropend({ imgBase64, imgInfo }) {
circleInfo.value = imgInfo; circleInfo.value = imgInfo;
circleImg.value = imgBase64; circleImg.value = imgBase64;
} }
return {
img,
info,
circleInfo,
cropperImg,
circleImg,
handleCropend,
handleCircleCropend,
avatar,
uploadApi: uploadApi as any,
};
},
});
</script> </script>
<style scoped> <style scoped>

34
src/views/demo/comp/desc/index.vue
View File

@ -22,10 +22,9 @@
<Description @register="register1" class="mt-4" /> <Description @register="register1" class="mt-4" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { Description, DescItem, useDescription } from '@/components/Description';
import { Description, DescItem, useDescription } from '/@/components/Description/index'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
const mockData: Recordable = { const mockData: Recordable = {
username: 'test', username: 'test',
@ -63,23 +62,16 @@
label: '地址', label: '地址',
}, },
]; ];
export default defineComponent({ const [register] = useDescription({
components: { Description, PageWrapper }, title: 'useDescription',
setup() { data: mockData,
const [register] = useDescription({ schema: schema,
title: 'useDescription', });
data: mockData,
schema: schema,
});
const [register1] = useDescription({ const [register1] = useDescription({
title: '无边框', title: '无边框',
bordered: false, bordered: false,
data: mockData, data: mockData,
schema: schema, schema: schema,
});
return { mockData, schema, register, register1 };
},
}); });
</script> </script>

12
src/views/demo/comp/drawer/Drawer1.vue
View File

@ -1,14 +1,6 @@
<template> <template>
<BasicDrawer v-bind="$attrs" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer> <BasicDrawer v-bind="$attrs" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicDrawer } from '@/components/Drawer';
import { BasicDrawer } from '/@/components/Drawer';
export default defineComponent({
components: { BasicDrawer },
setup() {
return {};
},
});
</script> </script>

13
src/views/demo/comp/drawer/Drawer2.vue
View File

@ -4,15 +4,8 @@
<a-button type="primary" @click="closeDrawer"> 内部关闭drawer </a-button> <a-button type="primary" @click="closeDrawer"> 内部关闭drawer </a-button>
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
export default defineComponent({ const [register, { closeDrawer }] = useDrawerInner();
components: { BasicDrawer },
setup() {
const [register, { closeDrawer }] = useDrawerInner();
return { register, closeDrawer };
},
});
</script> </script>

22
src/views/demo/comp/drawer/Drawer3.vue
View File

@ -17,20 +17,12 @@
</template> --> </template> -->
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicDrawer } from '@/components/Drawer';
import { BasicDrawer } from '/@/components/Drawer';
export default defineComponent({ function handleOk() {
components: { BasicDrawer }, console.log('=====================');
setup() { console.log('ok');
return { console.log('======================');
handleOk: () => { }
console.log('=====================');
console.log('ok');
console.log('======================');
},
};
},
});
</script> </script>

40
src/views/demo/comp/drawer/Drawer4.vue
View File

@ -5,11 +5,9 @@
</div> </div>
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
{ {
@ -30,25 +28,19 @@
}, },
}, },
]; ];
export default defineComponent({ const [registerForm, { setFieldsValue }] = useForm({
components: { BasicDrawer, BasicForm }, labelWidth: 120,
setup() { schemas,
const [registerForm, { setFieldsValue }] = useForm({ showActionButtonGroup: false,
labelWidth: 120, actionColOptions: {
schemas, span: 24,
showActionButtonGroup: false,
actionColOptions: {
span: 24,
},
});
const [register] = useDrawerInner((data) => {
// 方式1
setFieldsValue({
field2: data.data,
field1: data.info,
});
});
return { register, schemas, registerForm };
}, },
}); });
const [register] = useDrawerInner((data) => {
// 方式1
setFieldsValue({
field2: data.data,
field1: data.info,
});
});
</script> </script>

9
src/views/demo/comp/drawer/Drawer5.vue
View File

@ -4,11 +4,6 @@
<template #titleToolbar> toolbar </template> <template #titleToolbar> toolbar </template>
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicDrawer } from '@/components/Drawer';
import { BasicDrawer } from '/@/components/Drawer';
export default defineComponent({
components: { BasicDrawer },
});
</script> </script>

61
src/views/demo/comp/drawer/index.vue
View File

@ -19,51 +19,32 @@
<Drawer5 @register="register5" /> <Drawer5 @register="register5" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { Alert } from 'ant-design-vue'; import { Alert } from 'ant-design-vue';
import { useDrawer } from '/@/components/Drawer'; import { useDrawer } from '@/components/Drawer';
import Drawer1 from './Drawer1.vue'; import Drawer1 from './Drawer1.vue';
import Drawer2 from './Drawer2.vue'; import Drawer2 from './Drawer2.vue';
import Drawer3 from './Drawer3.vue'; import Drawer3 from './Drawer3.vue';
import Drawer4 from './Drawer4.vue'; import Drawer4 from './Drawer4.vue';
import Drawer5 from './Drawer5.vue'; import Drawer5 from './Drawer5.vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
export default defineComponent({ const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
components: { Alert, PageWrapper, Drawer1, Drawer2, Drawer3, Drawer4, Drawer5 }, const [register2, { openDrawer: openDrawer2 }] = useDrawer();
setup() { const [register3, { openDrawer: openDrawer3 }] = useDrawer();
const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer(); const [register4, { openDrawer: openDrawer4 }] = useDrawer();
const [register2, { openDrawer: openDrawer2 }] = useDrawer(); const [register5, { openDrawer: openDrawer5 }] = useDrawer();
const [register3, { openDrawer: openDrawer3 }] = useDrawer(); function send() {
const [register4, { openDrawer: openDrawer4 }] = useDrawer(); openDrawer4(true, {
const [register5, { openDrawer: openDrawer5 }] = useDrawer(); data: 'content',
function send() { info: 'Info',
openDrawer4(true, { });
data: 'content', }
info: 'Info', function openDrawerLoading() {
}); openDrawer1();
} setDrawerProps({ loading: true });
function openDrawerLoading() { setTimeout(() => {
openDrawer1(); setDrawerProps({ loading: false });
setDrawerProps({ loading: true }); }, 2000);
setTimeout(() => { }
setDrawerProps({ loading: false });
}, 2000);
}
return {
register1,
openDrawer1,
register2,
openDrawer2,
register3,
openDrawer3,
register4,
register5,
openDrawer5,
send,
openDrawerLoading,
};
},
});
</script> </script>

14
src/views/demo/comp/flow-chart/index.vue
View File

@ -9,16 +9,8 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { FlowChart } from '/@/components/FlowChart'; import { FlowChart } from '@/components/FlowChart';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import demoData from './dataTurbo.json'; import demoData from './dataTurbo.json';
export default {
components: { FlowChart, PageWrapper },
setup() {
return { demoData };
},
};
</script> </script>

164
src/views/demo/comp/loading/index.vue
View File

@ -1,119 +1,103 @@
<template> <template>
<PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例"> <PageWrapper v-loading="loadingRef" loading-tip="加载中..." title="Loading组件示例">
<div ref="wrapEl"> <div ref="wrapEl">
<a-alert message="组件方式" /> <Alert message="组件方式" />
<a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading"> <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">
全屏 Loading 全屏 Loading
</a-button> </a-button>
<a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button> <a-button class="my-4" type="primary" @click="openCompAbsolute"> 容器内 Loading </a-button>
<Loading <Loading
:loading="loading" :loading="compState.loading"
:absolute="absolute" :absolute="compState.absolute"
:theme="theme" :theme="compState.theme"
:background="background" :background="compState.background"
:tip="tip" :tip="compState.tip"
/> />
<a-alert message="函数方式" /> <Alert message="函数方式" />
<a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading"> <a-button class="my-4 mr-4" type="primary" @click="openFnFullLoading">
全屏 Loading 全屏 Loading
</a-button> </a-button>
<a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button> <a-button class="my-4" type="primary" @click="openFnWrapLoading"> 容器内 Loading </a-button>
<a-alert message="指令方式" /> <Alert message="指令方式" />
<a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading"> <a-button class="my-4 mr-4" type="primary" @click="openDirectiveLoading">
打开指令Loading 打开指令Loading
</a-button> </a-button>
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, toRefs, ref } from 'vue'; import { reactive, ref } from 'vue';
import { Loading, useLoading } from '/@/components/Loading'; import { Loading, useLoading } from '@/components/Loading';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { Alert } from 'ant-design-vue'; import { Alert } from 'ant-design-vue';
export default defineComponent({ const wrapEl = ref<ElRef>(null);
components: { Loading, PageWrapper, [Alert.name]: Alert },
setup() {
const wrapEl = ref<ElRef>(null);
const loadingRef = ref(false); const loadingRef = ref(false);
const compState = reactive<{ const compState = reactive<{
absolute?: boolean; absolute?: boolean;
loading?: boolean; loading?: boolean;
theme?: 'dark' | 'light'; theme?: 'dark' | 'light';
background?: string; background?: string;
tip?: string; tip?: string;
}>({ }>({
absolute: false, absolute: false,
loading: false, loading: false,
theme: 'dark', theme: 'dark',
background: 'rgba(111,111,111,.7)', background: 'rgba(111,111,111,.7)',
tip: '加载中...', tip: '加载中...',
}); });
const [openFullLoading, closeFullLoading] = useLoading({ const [openFullLoading, closeFullLoading] = useLoading({
tip: '加载中...', tip: '加载中...',
}); });
const [openWrapLoading, closeWrapLoading] = useLoading({ const [openWrapLoading, closeWrapLoading] = useLoading({
target: wrapEl, target: wrapEl,
props: { props: {
tip: '加载中...', tip: '加载中...',
absolute: true, absolute: true,
},
});
function openLoading(absolute: boolean) {
compState.absolute = absolute;
compState.loading = true;
setTimeout(() => {
compState.loading = false;
}, 2000);
}
function openCompFullLoading() {
openLoading(false);
}
function openCompAbsolute() {
openLoading(true);
}
function openFnFullLoading() {
openFullLoading();
setTimeout(() => {
closeFullLoading();
}, 2000);
}
function openFnWrapLoading() {
openWrapLoading();
setTimeout(() => {
closeWrapLoading();
}, 2000);
}
function openDirectiveLoading() {
loadingRef.value = true;
setTimeout(() => {
loadingRef.value = false;
}, 2000);
}
return {
openCompFullLoading,
openFnFullLoading,
openFnWrapLoading,
openCompAbsolute,
wrapEl,
loadingRef,
openDirectiveLoading,
...toRefs(compState),
};
}, },
}); });
function openLoading(absolute: boolean) {
compState.absolute = absolute;
compState.loading = true;
setTimeout(() => {
compState.loading = false;
}, 2000);
}
function openCompFullLoading() {
openLoading(false);
}
function openCompAbsolute() {
openLoading(true);
}
function openFnFullLoading() {
openFullLoading();
setTimeout(() => {
closeFullLoading();
}, 2000);
}
function openFnWrapLoading() {
openWrapLoading();
setTimeout(() => {
closeWrapLoading();
}, 2000);
}
function openDirectiveLoading() {
loadingRef.value = true;
setTimeout(() => {
loadingRef.value = false;
}, 2000);
}
</script> </script>

69
src/views/demo/comp/modal/Modal1.vue
View File

@ -11,7 +11,7 @@
<a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button> <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button>
</template> </template>
<template v-if="loading"> <template v-if="loading">
<div class="empty-tips">加载中，稍等3秒……</div> <div class="h-full text-center line-height-100px">加载中，稍等3秒……</div>
</template> </template>
<template v-if="!loading"> <template v-if="!loading">
<ul> <ul>
@ -20,47 +20,34 @@
</template> </template>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal'; import { BasicModal, useModalInner } from '@/components/Modal';
export default defineComponent({ const loading = ref(true);
components: { BasicModal }, const lines = ref(10);
setup() { const [register, { setModalProps, redoModalHeight }] = useModalInner();
const loading = ref(true);
const lines = ref(10);
const [register, { setModalProps, redoModalHeight }] = useModalInner();
watch( watch(
() => lines.value, () => lines.value,
() => { () => {
redoModalHeight(); redoModalHeight();
},
);
function handleShow(open: boolean) {
if (open) {
loading.value = true;
setModalProps({ loading: true, confirmLoading: true });
setTimeout(() => {
lines.value = Math.round(Math.random() * 30 + 5);
loading.value = false;
setModalProps({ loading: false, confirmLoading: false });
}, 3000);
}
}
function setLines() {
lines.value = Math.round(Math.random() * 20 + 10);
}
return { register, loading, handleShow, lines, setLines };
}, },
}); );
</script>
<style scoped> function handleShow(open: boolean) {
.empty-tips { if (open) {
height: 100px; loading.value = true;
line-height: 100px; setModalProps({ loading: true, confirmLoading: true });
text-align: center; setTimeout(() => {
lines.value = Math.round(Math.random() * 30 + 5);
loading.value = false;
setModalProps({ loading: false, confirmLoading: false });
}, 3000);
}
} }
</style>
function setLines() {
lines.value = Math.round(Math.random() * 20 + 10);
}
</script>

23
src/views/demo/comp/modal/Modal2.vue
View File

@ -6,24 +6,13 @@
:okButtonProps="{ disabled: true }" :okButtonProps="{ disabled: true }"
> >
<a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button> <a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button>
<a-button type="primary" @click="setModalProps"> 从内部修改title </a-button> <a-button type="primary" @click="setModalProps({ title: 'Modal New Title' })">
从内部修改title
</a-button>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicModal, useModalInner } from '/@/components/Modal';
export default defineComponent({ const [register, { closeModal, setModalProps }] = useModalInner();
components: { BasicModal },
setup() {
const [register, { closeModal, setModalProps }] = useModalInner();
return {
register,
closeModal,
setModalProps: () => {
setModalProps({ title: 'Modal New Title' });
},
};
},
});
</script> </script>

12
src/views/demo/comp/modal/Modal3.vue
View File

@ -3,14 +3,6 @@
<p class="h-20" v-for="index in 20" :key="index">根据屏幕高度自适应</p> <p class="h-20" v-for="index in 20" :key="index">根据屏幕高度自适应</p>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicModal } from '@/components/Modal';
import { BasicModal } from '/@/components/Modal';
export default defineComponent({
components: { BasicModal },
setup() {
return {};
},
});
</script> </script>

92
src/views/demo/comp/modal/Modal4.vue
View File

@ -6,12 +6,12 @@
@visible-change="handleVisibleChange" @visible-change="handleVisibleChange"
> >
<div class="pt-3px pr-3px"> <div class="pt-3px pr-3px">
<BasicForm @register="registerForm" :model="model" /> <BasicForm @register="registerForm" :model="modelRef" />
</div> </div>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, nextTick } from 'vue'; import { ref, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal'; import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
@ -34,53 +34,47 @@
}, },
}, },
]; ];
export default defineComponent({
components: { BasicModal, BasicForm },
props: {
userData: { type: Object },
},
setup(props) {
const modelRef = ref({});
const [
registerForm,
// {
// // setFieldsValue,
// // setProps
// },
] = useForm({
labelWidth: 120,
schemas,
showActionButtonGroup: false,
actionColOptions: {
span: 24,
},
});
const [register] = useModalInner((data) => { const props = defineProps({
data && onDataReceive(data); userData: { type: Object },
}); });
const modelRef = ref({});
function onDataReceive(data) { const [
console.log('Data Received', data); registerForm,
// 方式1; // {
// setFieldsValue({ // // setFieldsValue,
// field2: data.data, // // setProps
// field1: data.info, // },
// }); ] = useForm({
labelWidth: 120,
// // 方式2 schemas,
modelRef.value = { field2: data.data, field1: data.info }; showActionButtonGroup: false,
actionColOptions: {
// setProps({ span: 24,
// model:{ field2: data.data, field1: data.info }
// })
}
function handleVisibleChange(v) {
v && props.userData && nextTick(() => onDataReceive(props.userData));
}
return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
}, },
}); });
const [register] = useModalInner((data) => {
data && onDataReceive(data);
});
function onDataReceive(data) {
console.log('Data Received', data);
// 方式1;
// setFieldsValue({
// field2: data.data,
// field1: data.info,
// });
// // 方式2
modelRef.value = { field2: data.data, field1: data.info };
// setProps({
// model:{ field2: data.data, field1: data.info }
// })
}
function handleVisibleChange(v) {
v && props.userData && nextTick(() => onDataReceive(props.userData));
}
</script> </script>

147
src/views/demo/comp/modal/index.vue
View File

@ -18,12 +18,12 @@
<a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button> <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>
<Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon /> <Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
<a-space> <Space>
<a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1 </a-button> <a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1 </a-button>
<a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2 </a-button> <a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2 </a-button>
<a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3 </a-button> <a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3 </a-button>
<a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4 </a-button> <a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4 </a-button>
</a-space> </Space>
<Alert <Alert
message="使用函数方式创建Prompt，适合较为简单的表单内容，如果需要弹出较为复杂的内容，请使用 Modal." message="使用函数方式创建Prompt，适合较为简单的表单内容，如果需要弹出较为复杂的内容，请使用 Modal."
@ -44,97 +44,74 @@
<Modal4 @register="register4" /> <Modal4 @register="register4" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, shallowRef, ComponentOptions, ref, nextTick } from 'vue'; import { shallowRef, ComponentOptions, ref, nextTick } from 'vue';
import { Alert, Space, message } from 'ant-design-vue'; import { Alert, Space, message } from 'ant-design-vue';
import { useModal } from '/@/components/Modal'; import { useModal } from '@/components/Modal';
import Modal1 from './Modal1.vue'; import Modal1 from './Modal1.vue';
import Modal2 from './Modal2.vue'; import Modal2 from './Modal2.vue';
import Modal3 from './Modal3.vue'; import Modal3 from './Modal3.vue';
import Modal4 from './Modal4.vue'; import Modal4 from './Modal4.vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { type Nullable } from '@vben/types'; import { type Nullable } from '@vben/types';
import { createPrompt } from '/@/components/Prompt'; import { createPrompt } from '@/components/Prompt';
export default defineComponent({ const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space }, const [register1, { openModal: openModal1 }] = useModal();
setup() { const [register2, { openModal: openModal2 }] = useModal();
const currentModal = shallowRef<Nullable<ComponentOptions>>(null); const [register3, { openModal: openModal3 }] = useModal();
const [register1, { openModal: openModal1 }] = useModal(); const [register4, { openModal: openModal4 }] = useModal();
const [register2, { openModal: openModal2 }] = useModal(); const modalOpen = ref<Boolean>(false);
const [register3, { openModal: openModal3 }] = useModal(); const userData = ref<any>(null);
const [register4, { openModal: openModal4 }] = useModal();
const modalOpen = ref<Boolean>(false);
const userData = ref<any>(null);
function send() { function send() {
openModal4(true, { openModal4(true, {
data: 'content', data: 'content',
info: 'Info', info: 'Info',
}); });
} }
function openModalLoading() { function openModalLoading() {
openModal1(true); openModal1(true);
// setModalProps({ loading: true }); // setModalProps({ loading: true });
// setTimeout(() => { // setTimeout(() => {
// setModalProps({ loading: false }); // setModalProps({ loading: false });
// }, 2000); // }, 2000);
} }
function openTargetModal(index: number) { function openTargetModal(index: number) {
switch (index) { switch (index) {
case 1: case 1:
currentModal.value = Modal1 as ComponentOptions; currentModal.value = Modal1 as ComponentOptions;
break; break;
case 2: case 2:
currentModal.value = Modal2 as ComponentOptions; currentModal.value = Modal2 as ComponentOptions;
break; break;
case 3: case 3:
currentModal.value = Modal3 as ComponentOptions; currentModal.value = Modal3 as ComponentOptions;
break; break;
default: default:
currentModal.value = Modal4 as ComponentOptions; currentModal.value = Modal4 as ComponentOptions;
break; break;
} }
nextTick(() => { nextTick(() => {
// `useModal` not working with dynamic component // `useModal` not working with dynamic component
// passing data through `userData` prop // passing data through `userData` prop
userData.value = { data: Math.random(), info: 'Info222' }; userData.value = { data: Math.random(), info: 'Info222' };
// open the target modal // open the target modal
modalOpen.value = true; modalOpen.value = true;
}); });
} }
function handleCreatePrompt() { function handleCreatePrompt() {
createPrompt({ createPrompt({
title: '请输入邮箱', title: '请输入邮箱',
required: true, required: true,
label: '邮箱', label: '邮箱',
defaultValue: '默认邮箱', defaultValue: '默认邮箱',
onOK: async (email: string) => { onOK: async (email: string) => {
message.success('填写的邮箱地址为' + email); message.success('填写的邮箱地址为' + email);
}, },
inputType: 'Input', inputType: 'Input',
}); });
} }
return {
register1,
openModal1,
register2,
openModal2,
register3,
openModal3,
register4,
openModal4,
modalOpen,
userData,
openTargetModal,
send,
currentModal,
openModalLoading,
handleCreatePrompt,
};
},
});
</script> </script>

100
src/views/demo/comp/qrcode/index.vue
View File

@ -1,19 +1,15 @@
<template> <template>
<PageWrapper title="二维码组件使用示例"> <PageWrapper title="二维码组件使用示例">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<CollapseContainer <CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 w-1/4 mr-6">
title="基础示例"
:canExpan="true"
class="text-center mb-6 qrcode-demo-item"
>
<QrCode :value="qrCodeUrl" /> <QrCode :value="qrCodeUrl" />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="渲染成img标签示例" class="text-center mb-6 qrcode-demo-item"> <CollapseContainer title="渲染成img标签示例" class="text-center mb-6 w-1/4 mr-6">
<QrCode :value="qrCodeUrl" tag="img" /> <QrCode :value="qrCodeUrl" tag="img" />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="配置样式示例" class="text-center mb-6 qrcode-demo-item"> <CollapseContainer title="配置样式示例" class="text-center mb-6 w-1/4 mr-6">
<QrCode <QrCode
:value="qrCodeUrl" :value="qrCodeUrl"
:options="{ :options="{
@ -22,11 +18,11 @@
/> />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="本地logo示例" class="text-center mb-6 qrcode-demo-item"> <CollapseContainer title="本地logo示例" class="text-center mb-6 w-1/4 mr-6">
<QrCode :value="qrCodeUrl" :logo="LogoImg" /> <QrCode :value="qrCodeUrl" :logo="LogoImg" />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="在线logo示例" class="text-center mb-6 qrcode-demo-item"> <CollapseContainer title="在线logo示例" class="text-center mb-6 w-1/4 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"
@ -36,7 +32,7 @@
/> />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="logo配置示例" class="text-center mb-6 qrcode-demo-item"> <CollapseContainer title="logo配置示例" class="text-center mb-6 w-1/4 mr-6">
<QrCode <QrCode
:value="qrCodeUrl" :value="qrCodeUrl"
:logo="{ :logo="{
@ -49,17 +45,17 @@
/> />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="下载示例" class="text-center qrcode-demo-item"> <CollapseContainer title="下载示例" class="text-center w-1/4 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 qrcode-demo-item"> <CollapseContainer title="配置大小示例" class="text-center w-1/4 mr-6">
<QrCode :value="qrCodeUrl" :width="300" /> <QrCode :value="qrCodeUrl" :width="300" />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="扩展绘制示例" class="text-center qrcode-demo-item"> <CollapseContainer title="扩展绘制示例" class="text-center w-1/4 mr-6">
<QrCode <QrCode
:value="qrCodeUrl" :value="qrCodeUrl"
:width="200" :width="200"
@ -74,56 +70,36 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, unref } from 'vue'; import { ref, unref } from 'vue';
import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index'; import { QrCode, QrCodeActionType } from '@/components/Qrcode';
import LogoImg from '/@/assets/images/logo.png'; import LogoImg from '@/assets/images/logo.png';
import { CollapseContainer } from '/@/components/Container/index'; 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';
const qrCodeUrl = 'https://www.vvbin.cn'; const qrCodeUrl = 'https://www.vvbin.cn';
export default defineComponent({ const qrRef = ref<Nullable<QrCodeActionType>>(null);
components: { CollapseContainer, QrCode, PageWrapper }, const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
setup() { function download() {
const qrRef = ref<Nullable<QrCodeActionType>>(null); const qrEl = unref(qrRef);
const qrDiyRef = ref<Nullable<QrCodeActionType>>(null); if (!qrEl) return;
function download() { qrEl.download('文件名');
const qrEl = unref(qrRef);
if (!qrEl) return;
qrEl.download('文件名');
}
function downloadDiy() {
const qrEl = unref(qrDiyRef);
if (!qrEl) return;
qrEl.download('Qrcode');
}
function onQrcodeDone({ ctx }: any) {
if (ctx instanceof CanvasRenderingContext2D) {
// 额外绘制
ctx.fillStyle = 'black';
ctx.font = '16px "微软雅黑"';
ctx.textBaseline = 'bottom';
ctx.textAlign = 'center';
ctx.fillText('你帅你先扫', 100, 195, 200);
}
}
return {
onQrcodeDone,
qrCodeUrl,
LogoImg,
download,
downloadDiy,
qrRef,
qrDiyRef,
};
},
});
</script>
<style scoped>
.qrcode-demo-item {
width: 30%;
margin-right: 1%;
} }
</style> function downloadDiy() {
const qrEl = unref(qrDiyRef);
if (!qrEl) return;
qrEl.download('Qrcode');
}
function onQrcodeDone({ ctx }: any) {
if (ctx instanceof CanvasRenderingContext2D) {
// 额外绘制
ctx.fillStyle = 'black';
ctx.font = '16px "微软雅黑"';
ctx.textBaseline = 'bottom';
ctx.textAlign = 'center';
ctx.fillText('你帅你先扫', 100, 195, 200);
}
}
</script>

42
src/views/demo/comp/scroll/Action.vue
View File

@ -19,37 +19,27 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, unref } from 'vue'; import { ref, unref } from 'vue';
import { ScrollContainer, ScrollActionType } from '/@/components/Container/index'; import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
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 scrollRef = ref<Nullable<ScrollActionType>>(null);
components: { ScrollContainer, PageWrapper }, const getScroll = () => {
setup() { const scroll = unref(scrollRef);
const scrollRef = ref<Nullable<ScrollActionType>>(null); if (!scroll) {
const getScroll = () => { throw new Error('scroll is Null');
const scroll = unref(scrollRef); }
if (!scroll) { return scroll;
throw new Error('scroll is Null'); };
}
return scroll;
};
function scrollTo(top: number) { function scrollTo(top: number) {
getScroll().scrollTo(top); getScroll().scrollTo(top);
} }
function scrollBottom() { function scrollBottom() {
getScroll().scrollBottom(); getScroll().scrollBottom();
} }
return {
scrollTo,
scrollRef,
scrollBottom,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.scroll-wrap { .scroll-wrap {

14
src/views/demo/comp/scroll/VirtualScroll.vue
View File

@ -23,12 +23,10 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { VScroll } from '@/components/VirtualScroll/index';
import { VScroll } from '/@/components/VirtualScroll/index';
import { Divider } from 'ant-design-vue'; import { Divider } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
const data = (() => { const data = (() => {
const arr: any[] = []; const arr: any[] = [];
@ -39,12 +37,6 @@
} }
return arr; return arr;
})(); })();
export default defineComponent({
components: { VScroll: VScroll, Divider, PageWrapper },
setup() {
return { data: data };
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.virtual-scroll-demo { .virtual-scroll-demo {

11
src/views/demo/comp/scroll/index.vue
View File

@ -13,14 +13,9 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { ScrollContainer } from '@/components/Container/index';
import { ScrollContainer } from '/@/components/Container/index'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
export default defineComponent({
components: { ScrollContainer, PageWrapper },
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.scroll-wrap { .scroll-wrap {

14
src/views/demo/comp/strength-meter/index.vue
View File

@ -11,17 +11,9 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { StrengthMeter } from '@/components/StrengthMeter';
import { StrengthMeter } from '/@/components/StrengthMeter'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
export default defineComponent({
components: {
StrengthMeter,
PageWrapper,
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.demo-wrap { .demo-wrap {

31
src/views/demo/comp/time/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<PageWrapper title="时间组件示例"> <PageWrapper title="时间组件示例">
<CollapseContainer title="基础示例"> <CollapseContainer title="基础示例">
<Time :value="time1" /> <Time :value="state.time1" />
<br /> <br />
<Time :value="time2" /> <Time :value="state.time2" />
</CollapseContainer> </CollapseContainer>
<CollapseContainer title="定时更新" class="my-4"> <CollapseContainer title="定时更新" class="my-4">
@ -21,24 +21,15 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, toRefs } from 'vue'; import { reactive } from 'vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { Time } from '/@/components/Time'; import { Time } from '@/components/Time';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
export default defineComponent({ const now = new Date().getTime();
components: { PageWrapper, Time, CollapseContainer }, const state = reactive({
setup() { time1: now - 60 * 3 * 1000,
const now = new Date().getTime(); time2: now - 86400 * 3 * 1000,
const state = reactive({
time1: now - 60 * 3 * 1000,
time2: now - 86400 * 3 * 1000,
});
return {
...toRefs(state),
now,
};
},
}); });
</script> </script>

45
src/views/demo/comp/upload/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<PageWrapper title="上传组件示例"> <PageWrapper title="上传组件示例">
<a-alert message="基础示例" /> <Alert message="基础示例" />
<BasicUpload <BasicUpload
:maxSize="20" :maxSize="20"
:maxNumber="10" :maxNumber="10"
@ -10,19 +10,18 @@
:accept="['image/*']" :accept="['image/*']"
/> />
<a-alert message="嵌入表单,加入表单校验" /> <Alert message="嵌入表单,加入表单校验" />
<BasicForm @register="register" class="my-5" /> <BasicForm @register="register" class="my-5" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicUpload } from '@/components/Upload';
import { BasicUpload } from '/@/components/Upload'; import { useMessage } from '@/hooks/web/useMessage';
import { useMessage } from '/@/hooks/web/useMessage'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
import { Alert } from 'ant-design-vue'; import { Alert } from 'ant-design-vue';
import { uploadApi } from '/@/api/sys/upload'; import { uploadApi } from '@/api/sys/upload';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
{ {
@ -38,24 +37,16 @@
}, },
}, },
]; ];
export default defineComponent({ const { createMessage } = useMessage();
components: { BasicUpload, BasicForm, PageWrapper, [Alert.name]: Alert }, const [register] = useForm({
setup() { labelWidth: 120,
const { createMessage } = useMessage(); schemas,
const [register] = useForm({ actionColOptions: {
labelWidth: 120, span: 16,
schemas,
actionColOptions: {
span: 16,
},
});
return {
handleChange: (list: string[]) => {
createMessage.info(`已上传文件${JSON.stringify(list)}`);
},
uploadApi,
register,
};
}, },
}); });
function handleChange(list: string[]) {
createMessage.info(`已上传文件${JSON.stringify(list)}`);
}
</script> </script>

29
src/views/demo/comp/verify/Rotate.vue
View File

@ -5,29 +5,14 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { RotateDragVerify } from '@/components/Verify';
import { RotateDragVerify } from '/@/components/Verify/index';
import img from '/@/assets/images/header.jpg'; import img from '@/assets/images/header.jpg';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
export default defineComponent({ function handleSuccess() {
components: { RotateDragVerify, PageWrapper }, console.log('success!');
setup() {
const handleSuccess = () => {
console.log('success!');
};
return {
handleSuccess,
img,
};
},
});
</script>
<style lang="less" scoped>
.bg-gray-700 {
background-color: #4a5568;
} }
</style> </script>

63
src/views/demo/comp/verify/index.vue
View File

@ -50,49 +50,30 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { BasicDragVerify, DragVerifyActionType, PassingData } from '/@/components/Verify/index'; import { BasicDragVerify, DragVerifyActionType, PassingData } from '@/components/Verify';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { BugOutlined, RightOutlined } from '@ant-design/icons-vue'; import { BugOutlined, RightOutlined } from '@ant-design/icons-vue';
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 { createMessage } = useMessage();
components: { BasicDragVerify, BugOutlined, RightOutlined, PageWrapper }, const el1 = ref<Nullable<DragVerifyActionType>>(null);
setup() { const el2 = ref<Nullable<DragVerifyActionType>>(null);
const { createMessage } = useMessage(); const el3 = ref<Nullable<DragVerifyActionType>>(null);
const el1 = ref<Nullable<DragVerifyActionType>>(null); const el4 = ref<Nullable<DragVerifyActionType>>(null);
const el2 = ref<Nullable<DragVerifyActionType>>(null); const el5 = ref<Nullable<DragVerifyActionType>>(null);
const el3 = ref<Nullable<DragVerifyActionType>>(null);
const el4 = ref<Nullable<DragVerifyActionType>>(null);
const el5 = ref<Nullable<DragVerifyActionType>>(null);
function handleSuccess(data: PassingData) { function handleSuccess(data: PassingData) {
const { time } = data; const { time } = data;
createMessage.success(`校验成功,耗时${time}秒`); createMessage.success(`校验成功,耗时${time}秒`);
}
function handleBtnClick(elRef: Nullable<DragVerifyActionType>) {
if (!elRef) {
return;
}
elRef.resume();
}
return {
handleSuccess,
el1,
el2,
el3,
el4,
el5,
handleBtnClick,
};
},
});
</script>
<style lang="less" scoped>
.bg-gray-700 {
background-color: #4a5568;
} }
</style>
function handleBtnClick(elRef: Nullable<DragVerifyActionType>) {
if (!elRef) {
return;
}
elRef.resume();
}
</script>

99
src/views/demo/editor/json/index.vue
View File

@ -1,40 +1,40 @@
<template> <template>
<PageWrapper title="代码编辑器组件示例" contentFullHeight fixedHeight contentBackground> <PageWrapper title="代码编辑器组件示例" contentFullHeight fixedHeight contentBackground>
<template #extra> <template #extra>
<a-space size="middle"> <Space size="middle">
<a-button @click="showData" type="primary">获取数据</a-button> <a-button @click="showData" type="primary">获取数据</a-button>
<RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange"> <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
<RadioButton value="application/json"> json数据 </RadioButton> <RadioButton value="application/json"> json数据 </RadioButton>
<RadioButton value="htmlmixed"> html代码 </RadioButton> <RadioButton value="htmlmixed"> html代码 </RadioButton>
<RadioButton value="javascript"> javascript代码 </RadioButton> <RadioButton value="javascript"> javascript代码 </RadioButton>
</RadioGroup> </RadioGroup>
</a-space> </Space>
</template> </template>
<CodeEditor v-model:value="value" :mode="modeValue" /> <CodeEditor v-model:value="value" :mode="modeValue" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, unref, h } from 'vue'; import { ref, unref, h } from 'vue';
import { CodeEditor, JsonPreview, MODE } from '/@/components/CodeEditor'; import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { Radio, Space, Modal, type RadioGroupProps } from 'ant-design-vue'; import { Radio, Space, Modal, type RadioGroupProps } from 'ant-design-vue';
const jsonData = const jsonData =
'{"name":"BeJson","url":"http://www.xxx.com","page":88,"isNonProfit":true,"address":{"street":"科技园路.","city":"江苏苏州","country":"中国"},"links":[{"name":"Google","url":"http://www.xxx.com"},{"name":"Baidu","url":"http://www.xxx.com"},{"name":"SoSo","url":"http://www.xxx.com"}]}'; '{"name":"BeJson","url":"http://www.xxx.com","page":88,"isNonProfit":true,"address":{"street":"科技园路.","city":"江苏苏州","country":"中国"},"links":[{"name":"Google","url":"http://www.xxx.com"},{"name":"Baidu","url":"http://www.xxx.com"},{"name":"SoSo","url":"http://www.xxx.com"}]}';
const jsData = ` const jsData = `
(() => { (() => {
var htmlRoot = document.getElementById('htmlRoot'); var htmlRoot = document.getElementById('htmlRoot');
var theme = window.localStorage.getItem('__APP__DARK__MODE__'); var theme = window.localStorage.getItem('__APP__DARK__MODE__');
if (htmlRoot && theme) { if (htmlRoot && theme) {
htmlRoot.setAttribute('data-theme', theme); htmlRoot.setAttribute('data-theme', theme);
theme = htmlRoot = null; theme = htmlRoot = null;
} }
})(); })();
`; `;
const htmlData = ` const htmlData = `
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" id="htmlRoot"> <html lang="en" id="htmlRoot">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -53,46 +53,37 @@
</body> </body>
</html> </html>
`; `;
export default defineComponent({
components: {
CodeEditor,
PageWrapper,
RadioButton: Radio.Button,
RadioGroup: Radio.Group,
ASpace: Space,
},
setup() {
const modeValue = ref<MODE>(MODE.JSON);
const value = ref(jsonData);
const handleModeChange: RadioGroupProps['onChange'] = (e) => { const RadioButton = Radio.Button;
const mode = e.target.value; const RadioGroup = Radio.Group;
if (mode === MODE.JSON) {
value.value = jsonData;
return;
}
if (mode === MODE.HTML) {
value.value = htmlData;
return;
}
if (mode === MODE.JS) {
value.value = jsData;
return;
}
};
function showData() { const modeValue = ref<MODE>(MODE.JSON);
if (unref(modeValue) === 'application/json') { const value = ref(jsonData);
Modal.info({
title: '编辑器当前值',
content: h(JsonPreview, { data: JSON.parse(value.value) }),
});
} else {
Modal.info({ title: '编辑器当前值', content: value.value });
}
}
return { value, modeValue, handleModeChange, showData }; const handleModeChange: RadioGroupProps['onChange'] = (e) => {
}, const mode = e.target.value;
}); if (mode === MODE.JSON) {
value.value = jsonData;
return;
}
if (mode === MODE.HTML) {
value.value = htmlData;
return;
}
if (mode === MODE.JS) {
value.value = jsData;
return;
}
};
function showData() {
if (unref(modeValue) === 'application/json') {
Modal.info({
title: '编辑器当前值',
content: h(JsonPreview, { data: JSON.parse(value.value) }),
});
} else {
Modal.info({ title: '编辑器当前值', content: value.value });
}
}
</script> </script>

30
src/views/demo/editor/markdown/Editor.vue
View File

@ -11,13 +11,13 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, h } from 'vue'; import { h } from 'vue';
import { BasicForm, FormSchema } from '/@/components/Form/index'; import { BasicForm, FormSchema } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { MarkDown } from '/@/components/Markdown'; import { MarkDown } from '@/components/Markdown';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
{ {
@ -43,17 +43,9 @@
}, },
}, },
]; ];
export default defineComponent({ const { createMessage } = useMessage();
components: { BasicForm, CollapseContainer, PageWrapper },
setup() {
const { createMessage } = useMessage();
return { function handleSubmit(values: any) {
schemas, createMessage.success('click search,values:' + JSON.stringify(values));
handleSubmit: (values: any) => { }
createMessage.success('click search,values:' + JSON.stringify(values));
},
};
},
});
</script> </script>

53
src/views/demo/editor/markdown/index.vue
View File

@ -4,31 +4,28 @@
<a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button> <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
<a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button> <a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button>
<MarkDown <MarkDown
v-model:value="value" v-model:value="valueRef"
@change="handleChange" @change="handleChange"
ref="markDownRef" ref="markDownRef"
placeholder="这是占位文本" placeholder="这是占位文本"
/> />
</div> </div>
<div class="mt-2"> <div class="mt-2">
<a-card title="Markdown Viewer 组件演示"> <Card title="Markdown Viewer 组件演示">
<MarkdownViewer :value="value" /> <MarkdownViewer :value="valueRef" />
</a-card> </Card>
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, unref } from 'vue'; import { ref, unref } from 'vue';
import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown'; import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { type Nullable } from '@vben/types'; import { type Nullable } from '@vben/types';
export default defineComponent({ const markDownRef = ref<Nullable<MarkDownActionType>>(null);
components: { MarkDown, PageWrapper, MarkdownViewer, ACard: Card }, const valueRef = ref(`
setup() {
const markDownRef = ref<Nullable<MarkDownActionType>>(null);
const valueRef = ref(`
# 标题h1 # 标题h1
##### 标题h5 ##### 标题h5
@ -71,28 +68,18 @@
| 4 | 5 | 6 | | 4 | 5 | 6 |
`); `);
function toggleTheme() { function toggleTheme() {
const markDown = unref(markDownRef); const markDown = unref(markDownRef);
if (!markDown) return; if (!markDown) return;
const vditor = markDown.getVditor(); const vditor = markDown.getVditor();
vditor.setTheme('dark', 'dark', 'dracula'); vditor.setTheme('dark', 'dark', 'dracula');
} }
function handleChange(v: string) { function handleChange(v: string) {
valueRef.value = v; valueRef.value = v;
} }
function clearValue() { function clearValue() {
valueRef.value = ''; valueRef.value = '';
} }
return {
value: valueRef,
toggleTheme,
markDownRef,
handleChange,
clearValue,
};
},
});
</script> </script>

30
src/views/demo/editor/tinymce/Editor.vue
View File

@ -11,13 +11,13 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, h } from 'vue'; import { h } from 'vue';
import { BasicForm, FormSchema } from '/@/components/Form/index'; import { BasicForm, FormSchema } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { Tinymce } from '/@/components/Tinymce/index'; import { Tinymce } from '@/components/Tinymce';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
{ {
@ -43,17 +43,9 @@
}, },
}, },
]; ];
export default defineComponent({ const { createMessage } = useMessage();
components: { BasicForm, CollapseContainer, PageWrapper },
setup() {
const { createMessage } = useMessage();
return { function handleSubmit(values: any) {
schemas, createMessage.success('click search,values:' + JSON.stringify(values));
handleSubmit: (values: any) => { }
createMessage.success('click search,values:' + JSON.stringify(values));
},
};
},
});
</script> </script>

22
src/views/demo/editor/tinymce/index.vue
View File

@ -3,19 +3,13 @@
<Tinymce v-model="value" @change="handleChange" width="100%" /> <Tinymce v-model="value" @change="handleChange" width="100%" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { Tinymce } from '/@/components/Tinymce/index'; import { Tinymce } from '@/components/Tinymce';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
export default defineComponent({ const value = ref('hello world!');
components: { Tinymce, PageWrapper }, function handleChange(value: string) {
setup() { console.log(value);
const value = ref('hello world!'); }
function handleChange(value: string) {
console.log(value);
}
return { handleChange, value };
},
});
</script> </script>

71
src/views/demo/excel/ArrayExport.vue
View File

@ -9,50 +9,37 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicTable } from '@/components/Table';
import { BasicTable } from '/@/components/Table'; import { aoaToSheetXlsx } from '@/components/Excel';
import { aoaToSheetXlsx } from '/@/components/Excel';
import { arrHeader, arrData, columns, data } from './data'; import { arrHeader, arrData, columns, data } from './data';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { aoaToMultipleSheetXlsx } from '/@/components/Excel/src/Export2Excel'; import { aoaToMultipleSheetXlsx } from '@/components/Excel/src/Export2Excel';
export default defineComponent({ function aoaToExcel() {
components: { BasicTable, PageWrapper }, // 保证data顺序与header一致
setup() { aoaToSheetXlsx({
function aoaToExcel() { data: arrData,
// 保证data顺序与header一致 header: arrHeader,
aoaToSheetXlsx({ filename: '二维数组方式导出excel.xlsx',
});
}
function aoaToMultipleSheet() {
// 保证data顺序与header一致
aoaToMultipleSheetXlsx({
sheetList: [
{
data: arrData, data: arrData,
header: arrHeader, header: arrHeader,
filename: '二维数组方式导出excel.xlsx', sheetName: 'Sheet1',
}); },
} {
function aoaToMultipleSheet() { data: arrData,
// 保证data顺序与header一致 header: arrHeader,
aoaToMultipleSheetXlsx({ sheetName: 'Sheet2',
sheetList: [ },
{ ],
data: arrData, filename: '二维数组方式导出excel-多Sheet示例.xlsx',
header: arrHeader, });
sheetName: 'Sheet1', }
},
{
data: arrData,
header: arrHeader,
sheetName: 'Sheet2',
},
],
filename: '二维数组方式导出excel-多Sheet示例.xlsx',
});
}
return {
aoaToExcel,
aoaToMultipleSheet,
columns,
data,
};
},
});
</script> </script>

46
src/views/demo/excel/CustomExport.vue
View File

@ -9,36 +9,22 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicTable } from '@/components/Table';
import { BasicTable } from '/@/components/Table'; import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '@/components/Excel';
import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
import { columns, data } from './data'; import { columns, data } from './data';
import { useModal } from '/@/components/Modal'; import { useModal } from '@/components/Modal';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
export default defineComponent({ function defaultHeader({ filename, bookType }: ExportModalResult) {
components: { BasicTable, ExpExcelModal, PageWrapper }, // 默认Object.keys(data[0])作为header
setup() { jsonToSheetXlsx({
function defaultHeader({ filename, bookType }: ExportModalResult) { data,
// 默认Object.keys(data[0])作为header filename,
jsonToSheetXlsx({ write2excelOpts: {
data, bookType,
filename, },
write2excelOpts: { });
bookType, }
}, const [register, { openModal }] = useModal();
});
}
const [register, { openModal }] = useModal();
return {
defaultHeader,
columns,
data,
register,
openModal,
};
},
});
</script> </script>

65
src/views/demo/excel/ImportExcel.vue
View File

@ -12,46 +12,35 @@
/> />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { ImpExcel, ExcelData } from '/@/components/Excel'; import { ImpExcel, ExcelData } from '@/components/Excel';
import { BasicTable, BasicColumn } from '/@/components/Table'; import { BasicTable, BasicColumn } from '@/components/Table';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
export default defineComponent({ const tableListRef = ref<
components: { BasicTable, ImpExcel, PageWrapper }, {
title: string;
columns?: any[];
dataSource?: any[];
}[]
>([]);
setup() { function loadDataSuccess(excelDataList: ExcelData[]) {
const tableListRef = ref< tableListRef.value = [];
{ console.log(excelDataList);
title: string; for (const excelData of excelDataList) {
columns?: any[]; const {
dataSource?: any[]; header,
}[] results,
>([]); meta: { sheetName },
} = excelData;
function loadDataSuccess(excelDataList: ExcelData[]) { const columns: BasicColumn[] = [];
tableListRef.value = []; for (const title of header) {
console.log(excelDataList); columns.push({ title, dataIndex: title });
for (const excelData of excelDataList) {
const {
header,
results,
meta: { sheetName },
} = excelData;
const columns: BasicColumn[] = [];
for (const title of header) {
columns.push({ title, dataIndex: title });
}
tableListRef.value.push({ title: sheetName, dataSource: results, columns });
}
} }
tableListRef.value.push({ title: sheetName, dataSource: results, columns });
return { }
loadDataSuccess, }
tableListRef,
};
},
});
</script> </script>

105
src/views/demo/excel/JsonExport.vue
View File

@ -10,27 +10,49 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicTable } from '@/components/Table';
import { BasicTable } from '/@/components/Table'; import { jsonToSheetXlsx } from '@/components/Excel';
import { jsonToSheetXlsx } from '/@/components/Excel';
import { columns, data } from './data'; import { columns, data } from './data';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { jsonToMultipleSheetXlsx } from '/@/components/Excel/src/Export2Excel'; import { jsonToMultipleSheetXlsx } from '@/components/Excel/src/Export2Excel';
export default defineComponent({ function defaultHeader() {
components: { BasicTable, PageWrapper }, // 默认Object.keys(data[0])作为header
setup() { jsonToSheetXlsx({
function defaultHeader() { data,
// 默认Object.keys(data[0])作为header filename: '使用key作为默认头部.xlsx',
jsonToSheetXlsx({ });
}
function customHeader() {
jsonToSheetXlsx({
data,
header: {
id: 'ID',
name: '姓名',
age: '年龄',
no: '编号',
address: '地址',
beginTime: '开始时间',
endTime: '结束时间',
},
filename: '自定义头部.xlsx',
json2sheetOpts: {
// 指定顺序
header: ['name', 'id'],
},
});
}
function handleMultipleSheet() {
jsonToMultipleSheetXlsx({
sheetList: [
{
data, data,
filename: '使用key作为默认头部.xlsx', sheetName: '使用key作为默认头部',
}); },
} {
function customHeader() {
jsonToSheetXlsx({
data, data,
header: { header: {
id: 'ID', id: 'ID',
@ -41,49 +63,14 @@
beginTime: '开始时间', beginTime: '开始时间',
endTime: '结束时间', endTime: '结束时间',
}, },
filename: '自定义头部.xlsx',
json2sheetOpts: { json2sheetOpts: {
// 指定顺序 // 指定顺序
header: ['name', 'id'], header: ['name', 'id'],
}, },
}); sheetName: '自定义头部',
} },
],
function handleMultipleSheet() { filename: '多Sheet导出示例.xlsx',
jsonToMultipleSheetXlsx({ });
sheetList: [ }
{
data,
sheetName: '使用key作为默认头部',
},
{
data,
header: {
id: 'ID',
name: '姓名',
age: '年龄',
no: '编号',
address: '地址',
beginTime: '开始时间',
endTime: '结束时间',
},
json2sheetOpts: {
// 指定顺序
header: ['name', 'id'],
},
sheetName: '自定义头部',
},
],
filename: '多Sheet导出示例.xlsx',
});
}
return {
defaultHeader,
customHeader,
handleMultipleSheet,
columns,
data,
};
},
});
</script> </script>

2
src/views/demo/excel/data.ts
View File

@ -1,4 +1,4 @@
import { BasicColumn } from '/@/components/Table'; import { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {

3
src/views/demo/feat/breadcrumb/ChildrenList.vue
View File

@ -3,7 +3,6 @@
<router-link to="/feat/breadcrumb/children/childrenDetail"> 进入子级详情页 </router-link> <router-link to="/feat/breadcrumb/children/childrenDetail"> 进入子级详情页 </router-link>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
</script> </script>

3
src/views/demo/feat/breadcrumb/ChildrenListDetail.vue
View File

@ -3,7 +3,6 @@
<div>子级详情页内容在此</div> <div>子级详情页内容在此</div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
</script> </script>

2
src/views/demo/feat/breadcrumb/FlatList.vue
View File

@ -4,5 +4,5 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
</script> </script>

24
src/views/demo/feat/click-out-side/index.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<PageWrapper title="点内外部触发事件"> <PageWrapper title="点内外部触发事件">
<ClickOutSide @click-outside="handleClickOutside" class="flex justify-center"> <ClickOutSide @click-outside="handleClickOutside" class="flex justify-center">
<div @click="innerClick" class="demo-box"> <div
@click="innerClick"
class="flex items-center justify-center w-full h-300px border-10px bg-blue-500 text-white text-24px"
>
{{ text }} {{ text }}
</div> </div>
</ClickOutSide> </ClickOutSide>
@ -9,9 +12,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { ClickOutSide } from '@/components/ClickOutSide';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { ClickOutSide } from '/@/components/ClickOutSide';
const text = ref('Click'); const text = ref('Click');
@ -23,17 +25,3 @@
text.value = 'Click Inner'; text.value = 'Click Inner';
} }
</script> </script>
<style lang="less" scoped>
.demo-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 300px;
border-radius: 10px;
background-color: #408ede;
color: #fff;
font-size: 24px;
}
</style>

11
src/views/demo/feat/context-menu/index.vue
View File

@ -10,14 +10,13 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '/@/hooks/web/useMessage'; import { useContextMenu } from '@/hooks/web/useContextMenu';
import { useContextMenu } from '/@/hooks/web/useContextMenu'; import { CollapseContainer } from '@/components/Container';
import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
import { CollapseContainer } from '/@/components/Container';
const { createMessage } = useMessage();
const [createContextMenu] = useContextMenu(); const [createContextMenu] = useContextMenu();
const { createMessage } = useMessage();
function handleContext(e: MouseEvent) { function handleContext(e: MouseEvent) {
createContextMenu({ createContextMenu({

15
src/views/demo/feat/copy/index.vue
View File

@ -2,7 +2,7 @@
<PageWrapper title="文本复制示例"> <PageWrapper title="文本复制示例">
<CollapseContainer class="w-full h-32 bg-white rounded-md" title="Copy Example"> <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Copy Example">
<div class="flex justify-center"> <div class="flex justify-center">
<a-input placeholder="请输入" v-model:value="copyValue" /> <a-input placeholder="请输入" v-model:value="valueRef" />
<a-button type="primary" @click="handleCopy"> Copy </a-button> <a-button type="primary" @click="handleCopy"> Copy </a-button>
</div> </div>
</CollapseContainer> </CollapseContainer>
@ -10,17 +10,16 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { unref, ref } from 'vue'; import { unref, ref } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage'; import { CollapseContainer } from '@/components/Container/index';
import { copyText } from '/@/utils/copyTextToClipboard'; import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '@/components/Page';
import { copyText } from '@/utils/copyTextToClipboard';
import { PageWrapper } from '/@/components/Page'; const valueRef = ref('');
import { CollapseContainer } from '/@/components/Container/index';
const copyValue = ref('');
const { createMessage } = useMessage(); const { createMessage } = useMessage();
function handleCopy() { function handleCopy() {
const value = unref(copyValue); const value = unref(valueRef);
if (!value) { if (!value) {
createMessage.warning('请输入要拷贝的内容！'); createMessage.warning('请输入要拷贝的内容！');
return; return;

15
src/views/demo/feat/download/index.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<PageWrapper title="文件下载示例"> <PageWrapper title="文件下载示例">
<a-alert message="根据后台接口文件流下载" /> <Alert message="根据后台接口文件流下载" />
<a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button> <a-button type="primary" class="my-4" @click="handleDownByData"> 文件流下载 </a-button>
<a-alert message="根据文件地址下载文件" /> <Alert message="根据文件地址下载文件" />
<a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button> <a-button type="primary" class="my-4" @click="handleDownloadByUrl"> 文件地址下载 </a-button>
<a-alert message="base64流下载" /> <Alert message="base64流下载" />
<a-button type="primary" class="my-4" @click="handleDownloadByBase64"> base64流下载 </a-button> <a-button type="primary" class="my-4" @click="handleDownloadByBase64"> base64流下载 </a-button>
<a-alert message="图片Url下载,如果有跨域问题，需要处理图片跨域" /> <Alert message="图片Url下载,如果有跨域问题，需要处理图片跨域" />
<a-button type="primary" class="my-4" @click="handleDownloadByOnlineUrl"> <a-button type="primary" class="my-4" @click="handleDownloadByOnlineUrl">
图片Url下载 图片Url下载
</a-button> </a-button>
@ -21,17 +21,14 @@
downloadByData, downloadByData,
downloadByBase64, downloadByBase64,
downloadByOnlineUrl, downloadByOnlineUrl,
} from '/@/utils/file/download'; } from '@/utils/file/download';
import imgBase64 from './imgBase64'; import imgBase64 from './imgBase64';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { Alert } from 'ant-design-vue'; import { Alert } from 'ant-design-vue';
const AAlert = Alert;
function handleDownByData() { function handleDownByData() {
downloadByData('text content', 'testName.txt'); downloadByData('text content', 'testName.txt');
} }
function handleDownloadByUrl() { function handleDownloadByUrl() {
downloadByUrl({ downloadByUrl({
url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master', url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master',

14
src/views/demo/feat/ellipsis/index.vue
View File

@ -23,15 +23,19 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { ref } from 'vue';
import { EllipsisText } from '@/components/EllipsisText'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container/index'; import { PageWrapper } from '@/components/Page';
const text = `Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。 const text = ref(
`
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。 也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。 也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。 包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`; 也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
`,
);
</script> </script>

7
src/views/demo/feat/full-screen/index.vue
View File

@ -27,12 +27,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { CollapseContainer } from '@/components/Container';
import { useFullscreen } from '@vueuse/core'; import { useFullscreen } from '@vueuse/core';
import { CollapseContainer } from '/@/components/Container/index'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page'; import { type Nullable } from '@vben/types';
import type { Nullable } from '@vben/types';
const domRef = ref<Nullable<HTMLElement>>(null); const domRef = ref<Nullable<HTMLElement>>(null);

19
src/views/demo/feat/icon/index.vue
View File

@ -47,11 +47,13 @@
message="推荐使用Iconify组件" message="推荐使用Iconify组件"
description="Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。" description="Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。"
/> />
<a-button type="link" @click="toIconify"> Iconify 图标大全 </a-button> <a-button type="link" @click="openWindow('https://iconify.design/')">
Iconify 图标大全
</a-button>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
import { Alert } from 'ant-design-vue'; import { Alert } from 'ant-design-vue';
import { import {
QqCircleFilled, QqCircleFilled,
@ -62,14 +64,9 @@
TaobaoCircleFilled, TaobaoCircleFilled,
CodepenCircleFilled, CodepenCircleFilled,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import { IconPicker, SvgIcon } from '@/components/Icon';
import Icon from '@/components/Icon/Icon.vue';
import { openWindow } from '@/utils';
import { PageWrapper } from '@/components/Page';
import { IconPicker, SvgIcon } from '/@/components/Icon/index';
import Icon from '/@/components/Icon/Icon.vue';
import { openWindow } from '/@/utils';
import { PageWrapper } from '/@/components/Page';
const toIconify = () => {
openWindow('https://iconify.design/');
};
</script> </script>

5
src/views/demo/feat/img-preview/index.vue
View File

@ -4,10 +4,9 @@
<a-button @click="openImg" type="primary">无预览图</a-button> <a-button @click="openImg" type="primary">无预览图</a-button>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { createImgPreview, ImagePreview } from '@/components/Preview';
import { createImgPreview, ImagePreview } from '/@/components/Preview/index'; import { PageWrapper } from '@/components/Page';
const imgList = [ const imgList = [
'https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/66/346/216',

6
src/views/demo/feat/menu-params/index.vue
View File

@ -3,8 +3,8 @@
当前参数：{{ computedParams }} 当前参数：{{ computedParams }}
<br /> <br />
输入参数切换路由： 输入参数切换路由：
<Input v-model:value="value" placeholder="建议为url标准字符，输入后点击切换" /> <a-input v-model:value="value" placeholder="建议为url标准字符，输入后点击切换" />
<a-button type="primary" @click="handleClickGo">切换路由</a-button> <a-button type="primary" class="my-2" @click="handleClickGo">切换路由</a-button>
<br /> <br />
切换路由后 切换路由后
<ul> <ul>
@ -18,7 +18,7 @@
import { computed, ref, unref } from 'vue'; import { computed, ref, unref } from 'vue';
import { Input } from 'ant-design-vue'; import { Input } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
const value = ref(''); const value = ref('');

28
src/views/demo/feat/msg/index.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<PageWrapper title="消息示例"> <PageWrapper title="消息示例">
<CollapseContainer class="w-full h-32 bg-white rounded-md" title="Message"> <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Message">
<a-button @click="infoMsg('Info message')" class="mr-2"> Info </a-button> <a-button @click="info('Info message')" class="mr-2"> Info </a-button>
<a-button @click="successMsg('Success message')" class="mr-2" color="success"> <a-button @click="success('Success message')" class="mr-2" color="success">
Success Success
</a-button> </a-button>
<a-button @click="warningMsg('Warning message')" class="mr-2" color="warning"> <a-button @click="warning('Warning message')" class="mr-2" color="warning">
Warning Warning
</a-button> </a-button>
<a-button @click="errorMsg('Error message')" class="mr-2" color="error"> Error </a-button> <a-button @click="error('Error message')" class="mr-2" color="error"> Error </a-button>
<a-button @click="handleLoading" class="mr-2" type="primary"> Loading </a-button> <a-button @click="handleLoading" class="mr-2" type="primary"> Loading </a-button>
</CollapseContainer> </CollapseContainer>
@ -35,10 +35,9 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container/index'; import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
const { const {
createMessage, createMessage,
@ -50,17 +49,11 @@
notification, notification,
} = useMessage(); } = useMessage();
const { const { info, success, warning, error } = createMessage;
info: infoMsg,
success: successMsg,
warning: warningMsg,
error: errorMsg,
} = createMessage;
function handleLoading() { function handleLoading() {
createMessage.loading('Loading...'); createMessage.loading('Loading...');
} }
function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') { function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') {
createConfirm({ createConfirm({
iconType: type, iconType: type,
@ -68,23 +61,18 @@
content: 'content message...', content: 'content message...',
}); });
} }
function handleSuccessModal() { function handleSuccessModal() {
createSuccessModal({ title: 'Tip', content: 'content message...' }); createSuccessModal({ title: 'Tip', content: 'content message...' });
} }
function handleErrorModal() { function handleErrorModal() {
createErrorModal({ title: 'Tip', content: 'content message...' }); createErrorModal({ title: 'Tip', content: 'content message...' });
} }
function handleWarningModal() { function handleWarningModal() {
createWarningModal({ title: 'Tip', content: 'content message...' }); createWarningModal({ title: 'Tip', content: 'content message...' });
} }
function handleInfoModal() { function handleInfoModal() {
createInfoModal({ title: 'Tip', content: 'content message...' }); createInfoModal({ title: 'Tip', content: 'content message...' });
} }
function handleNotify() { function handleNotify() {
notification.success({ notification.success({
message: 'Tip', message: 'Tip',

6
src/views/demo/feat/print/index.vue
View File

@ -8,11 +8,13 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
import printJS from 'print-js'; import printJS from 'print-js';
defineOptions({ name: 'AppLogo' });
function jsonPrint() { function jsonPrint() {
printJS({ printJS({
printable: [ printable: [

16
src/views/demo/feat/request-demo/index.vue
View File

@ -1,23 +1,13 @@
<template> <template>
<div class="request-box"> <div class="m-10">
<a-button @click="handleClick" type="primary"> 点击会重新发起请求5次 </a-button> <a-button @click="handleClick" type="primary"> 点击会重新发起请求5次 </a-button>
<p>打开浏览器的network面板，可以看到发出了六次请求</p> <p class="mt-4">打开浏览器的network面板，可以看到发出了六次请求</p>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { testRetry } from '/@/api/sys/user'; import { testRetry } from '@/api/sys/user';
// @ts-ignore // @ts-ignore
const handleClick = async () => { const handleClick = async () => {
await testRetry(); await testRetry();
}; };
</script> </script>
<style lang="less">
.request-box {
margin: 50px;
}
p {
margin-top: 10px;
}
</style>

35
src/views/demo/feat/ripple/index.vue
View File

@ -1,31 +1,16 @@
<template> <template>
<PageWrapper title="Ripple示例"> <PageWrapper title="Ripple示例">
<div class="demo-box" v-ripple>content</div> <div
class="flex item-center justify-center w-75 h-75 border-2 bg-blue-500 text-white text-24px"
v-ripple
>
content
</div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import RippleDirective from '@/directives/ripple';
import RippleDirective from '/@/directives/ripple'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
export default defineComponent({ const vRipple = RippleDirective;
components: { PageWrapper },
directives: {
Ripple: RippleDirective,
},
});
</script> </script>
<style lang="less" scoped>
.demo-box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
border-radius: 10px;
background-color: #408ede;
color: #fff;
font-size: 24px;
}
</style>

24
src/views/demo/feat/session-timeout/index.vue
View File

@ -3,26 +3,26 @@
title="登录过期示例" title="登录过期示例"
content="用户登录过期示例，不再跳转登录页，直接生成页面覆盖当前页面，方便保持过期前的用户状态！" content="用户登录过期示例，不再跳转登录页，直接生成页面覆盖当前页面，方便保持过期前的用户状态！"
> >
<a-card title="请点击下面的按钮访问测试接口" extra="所访问的接口会返回Token过期响应"> <Card title="请点击下面的按钮访问测试接口" extra="所访问的接口会返回Token过期响应">
<a-card-grid style="width: 50%; text-align: center"> <CardGrid style="width: 50%; text-align: center">
<a-button type="primary" @click="test1">HttpStatus == 401</a-button> <a-button type="primary" @click="test1">HttpStatus == 401</a-button>
</a-card-grid> </CardGrid>
<a-card-grid style="width: 50%; text-align: center"> <CardGrid style="width: 50%; text-align: center">
<span></span> <span></span>
<a-button class="ml-4" type="primary" @click="test2">Response.code == 401</a-button> <a-button class="ml-4" type="primary" @click="test2">Response.code == 401</a-button>
</a-card-grid> </CardGrid>
</a-card> </Card>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { sessionTimeoutApi, tokenExpiredApi } from '@/api/demo/account';
import { sessionTimeoutApi, tokenExpiredApi } from '/@/api/demo/account';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
const ACardGrid = Card.Grid; defineOptions({ name: 'TestSessionTimeout' });
const ACard = Card;
const CardGrid = Card.Grid;
const userStore = useUserStore(); const userStore = useUserStore();
async function test1() { async function test1() {

7
src/views/demo/feat/tabs/TabDetail.vue
View File

@ -5,15 +5,16 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { useTabs } from '@/hooks/web/useTabs';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useTabs } from '/@/hooks/web/useTabs';
import { PageWrapper } from '/@/components/Page'; defineOptions({ name: 'TabDetail' });
const route = useRoute(); const route = useRoute();
const index = route.params?.id ?? -1; const index = route.params?.id ?? -1;
const { setTitle } = useTabs(); const { setTitle } = useTabs();
// 设置标识 // 设置标识
setTitle(`No.${index} - 详情信息`); setTitle(`No.${index} - 详情信息`);
</script> </script>

26
src/views/demo/feat/tabs/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<PageWrapper title="标签页操作示例"> <PageWrapper title="标签页操作示例">
<CollapseContainer title="在下面输入框输入文本,切换后回来内容会保存"> <CollapseContainer title="在下面输入框输入文本,切换后回来内容会保存">
<a-alert banner message="该操作不会影响页面标题，仅修改Tab标题" /> <Alert banner message="该操作不会影响页面标题，仅修改Tab标题" />
<div class="mt-2 flex flex-grow-0"> <div class="mt-2 flex flex-grow-0">
<a-button class="mr-2" @click="setTabTitle" type="primary"> 设置Tab标题 </a-button> <a-button class="mr-2" @click="setTabTitle" type="primary"> 设置Tab标题 </a-button>
<a-input placeholder="请输入" v-model:value="title" class="mr-4 w-12" /> <a-input placeholder="请输入" v-model:value="title" class="mr-4 w-50" />
</div> </div>
</CollapseContainer> </CollapseContainer>
@ -26,24 +26,18 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useGo } from '/@/hooks/web/usePage';
import { useTabs } from '/@/hooks/web/useTabs';
import { useMessage } from '/@/hooks/web/useMessage';
import { Input, Alert } from 'ant-design-vue'; import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '/@/components/Page'; import { useTabs } from '@/hooks/web/useTabs';
import { CollapseContainer } from '/@/components/Container'; import { PageWrapper } from '@/components/Page';
import { Alert } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
import { useGo } from '@/hooks/web/usePage';
const AInput = Input; defineOptions({ name: 'TabsDemo' });
const AAlert = Alert;
defineOptions({
name: 'TabsDemo',
});
const go = useGo(); const go = useGo();
const title = ref(''); const title = ref<string>('');
const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } = const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
useTabs(); useTabs();
const { createMessage } = useMessage(); const { createMessage } = useMessage();

6
src/views/demo/feat/watermark/index.vue
View File

@ -17,9 +17,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onUnmounted } from 'vue'; import { onUnmounted } from 'vue';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
import { useWatermark } from '/@/hooks/web/useWatermark'; import { useWatermark } from '@/hooks/web/useWatermark';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
const { setWatermark, clear, clearAll } = useWatermark(); const { setWatermark, clear, clearAll } = useWatermark();
const { setWatermark: setWatermark2 } = useWatermark(); const { setWatermark: setWatermark2 } = useWatermark();

120
src/views/demo/feat/ws/index.vue
View File

@ -9,7 +9,7 @@
<hr class="my-4" /> <hr class="my-4" />
<div class="flex"> <div class="flex">
<a-input v-model:value="server" addon-before="服务地址" disabled /> <a-input v-model:value="state.server" addon-before="服务地址" disabled />
<a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle"> <a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
{{ getIsOpen ? '关闭连接' : '开启连接' }} {{ getIsOpen ? '关闭连接' : '开启连接' }}
</a-button> </a-button>
@ -20,7 +20,7 @@
<InputTextArea <InputTextArea
placeholder="需要发送到服务器的内容" placeholder="需要发送到服务器的内容"
:disabled="!getIsOpen" :disabled="!getIsOpen"
v-model:value="sendValue" v-model:value="state.sendValue"
allowClear allowClear
/> />
@ -50,76 +50,58 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, reactive, watchEffect, computed, toRefs } from 'vue'; import { reactive, watchEffect, computed } from 'vue';
import { Tag, Input } from 'ant-design-vue'; import { Tag, Input } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useWebSocket } from '@vueuse/core'; import { useWebSocket } from '@vueuse/core';
import { formatToDateTime } from '/@/utils/dateUtil'; import { formatToDateTime } from '@/utils/dateUtil';
export default defineComponent({ const InputTextArea = Input.TextArea;
components: {
PageWrapper,
[Input.name]: Input,
InputTextArea: Input.TextArea,
Tag,
},
setup() {
const state = reactive({
server: 'ws://localhost:3300/test',
sendValue: '',
recordList: [] as { id: number; time: number; res: string }[],
});
const { status, data, send, close, open } = useWebSocket(state.server, { const state = reactive({
autoReconnect: false, server: 'ws://localhost:3300/test',
heartbeat: true, sendValue: '',
}); recordList: [] as { id: number; time: number; res: string }[],
watchEffect(() => {
if (data.value) {
try {
const res = JSON.parse(data.value);
state.recordList.push(res);
} catch (error) {
state.recordList.push({
res: data.value,
id: Math.ceil(Math.random() * 1000),
time: new Date().getTime(),
});
}
}
});
const getIsOpen = computed(() => status.value === 'OPEN');
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'));
const getList = computed(() => {
return [...state.recordList].reverse();
});
function handlerSend() {
send(state.sendValue);
state.sendValue = '';
}
function toggle() {
if (getIsOpen.value) {
close();
} else {
open();
}
}
return {
status,
formatToDateTime,
...toRefs(state),
handlerSend,
getList,
toggle,
getIsOpen,
getTagColor,
};
},
}); });
const { status, data, send, close, open } = useWebSocket(state.server, {
autoReconnect: false,
heartbeat: true,
});
watchEffect(() => {
if (data.value) {
try {
const res = JSON.parse(data.value);
state.recordList.push(res);
} catch (error) {
state.recordList.push({
res: data.value,
id: Math.ceil(Math.random() * 1000),
time: new Date().getTime(),
});
}
}
});
const getIsOpen = computed(() => status.value === 'OPEN');
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'));
const getList = computed(() => {
return [...state.recordList].reverse();
});
function handlerSend() {
send(state.sendValue);
state.sendValue = '';
}
function toggle() {
if (getIsOpen.value) {
close();
} else {
open();
}
}
</script> </script>

84
src/views/demo/form/AdvancedForm.vue
View File

@ -9,11 +9,10 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
const getSchamas = (): FormSchema[] => { const getSchamas = (): FormSchema[] => {
return [ return [
@ -148,48 +147,39 @@
}, },
]; ];
} }
export default defineComponent({ const [register] = useForm({
components: { BasicForm, CollapseContainer, PageWrapper }, labelWidth: 120,
setup() { schemas: getSchamas(),
const [register] = useForm({ actionColOptions: {
labelWidth: 120, span: 24,
schemas: getSchamas(),
actionColOptions: {
span: 24,
},
compact: true,
showAdvancedButton: true,
});
const extraSchemas: FormSchema[] = [];
for (let i = 14; i < 30; i++) {
extraSchemas.push({
field: 'field' + i,
component: 'Input',
label: '字段' + i,
colProps: {
span: 8,
},
});
}
const [register1] = useForm({
labelWidth: 120,
schemas: [
...getSchamas(),
...getAppendSchemas(),
{ field: '', component: 'Divider', label: '更多字段' },
...extraSchemas,
],
actionColOptions: {
span: 24,
},
compact: true,
showAdvancedButton: true,
alwaysShowLines: 2,
});
return {
register,
register1,
};
}, },
compact: true,
showAdvancedButton: true,
});
const extraSchemas: FormSchema[] = [];
for (let i = 14; i < 30; i++) {
extraSchemas.push({
field: 'field' + i,
component: 'Input',
label: '字段' + i,
colProps: {
span: 8,
},
});
}
const [register1] = useForm({
labelWidth: 120,
schemas: [
...getSchamas(),
...getAppendSchemas(),
{ field: '', component: 'Divider', label: '更多字段' },
...extraSchemas,
],
actionColOptions: {
span: 24,
},
compact: true,
showAdvancedButton: true,
alwaysShowLines: 2,
}); });
</script> </script>

229
src/views/demo/form/AppendForm.vue
View File

@ -3,131 +3,122 @@
<CollapseContainer title="表单增删"> <CollapseContainer title="表单增删">
<BasicForm @register="register" @submit="handleSubmit"> <BasicForm @register="register" @submit="handleSubmit">
<template #add="{ field }"> <template #add="{ field }">
<Button v-if="Number(field) === 0" @click="add">+</Button> <a-button v-if="Number(field) === 0" @click="add">+</a-button>
<Button class="ml-2" v-if="Number(field) === 0" @click="batchAdd"> <a-button class="ml-2" v-if="Number(field) === 0" @click="batchAdd">
批量添加表单配置 批量添加表单配置
</Button> </a-button>
<Button v-if="Number(field) > 0" @click="() => del(field)">-</Button> <a-button v-if="Number(field) > 0" @click="() => del(field)">-</a-button>
</template> </template>
</BasicForm> </BasicForm>
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index'; import { BasicForm, useForm } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '@/components/Container';
import { Input } from 'ant-design-vue'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
import { Button } from '/@/components/Button';
export default defineComponent({ const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input, Button }, schemas: [
setup() { {
const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({ field: 'field0a',
schemas: [ component: 'Input',
{ label: '字段0',
field: 'field0a', required: true,
component: 'Input', },
label: '字段0', {
required: true, field: 'field0b',
}, component: 'Input',
{ label: '字段0',
field: 'field0b', required: true,
component: 'Input', },
label: '字段0', {
required: true, field: '0',
}, component: 'Input',
{ label: ' ',
field: '0', slot: 'add',
component: 'Input', },
label: ' ', ],
slot: 'add', labelWidth: 100,
}, actionColOptions: { span: 24 },
], baseColProps: { span: 8 },
labelWidth: 100,
actionColOptions: { span: 24 },
baseColProps: { span: 8 },
});
async function handleSubmit() {
try {
const data = await validate();
console.log(data);
} catch (e) {
console.log(e);
}
}
const n = ref(1);
function add() {
appendSchemaByField(
{
field: `field${n.value}a`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
'',
);
appendSchemaByField(
{
field: `field${n.value}b`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
'',
);
appendSchemaByField(
{
field: `${n.value}`,
component: 'Input',
label: ' ',
slot: 'add',
},
'',
);
n.value++;
}
/**
* @description: 批量添加
*/
function batchAdd() {
appendSchemaByField(
[
{
field: `field${n.value}a`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
{
field: `field${n.value}b`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
{
field: `${n.value}`,
component: 'Input',
label: ' ',
slot: 'add',
},
],
'',
);
n.value++;
}
function del(field: string) {
removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
n.value--;
}
return { register, handleSubmit, add, del, batchAdd };
},
}); });
async function handleSubmit() {
try {
const data = await validate();
console.log(data);
} catch (e) {
console.log(e);
}
}
const n = ref(1);
function add() {
appendSchemaByField(
{
field: `field${n.value}a`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
'',
);
appendSchemaByField(
{
field: `field${n.value}b`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
'',
);
appendSchemaByField(
{
field: `${n.value}`,
component: 'Input',
label: ' ',
slot: 'add',
},
'',
);
n.value++;
}
/**
* @description: 批量添加
*/
function batchAdd() {
appendSchemaByField(
[
{
field: `field${n.value}a`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
{
field: `field${n.value}b`,
component: 'Input',
label: '字段' + n.value,
required: true,
},
{
field: `${n.value}`,
component: 'Input',
label: ' ',
slot: 'add',
},
],
'',
);
n.value++;
}
function del(field: string) {
removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
n.value--;
}
</script> </script>

44
src/views/demo/form/CustomerForm.vue
View File

@ -18,13 +18,13 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="tsx"> <script lang="tsx" setup>
import { defineComponent, h } from 'vue'; import { h } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { Input, FormItem, FormItemRest, Select } from 'ant-design-vue'; import { Input, FormItem, FormItemRest, Select } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
const custom_typeKey2typeValueRules = (model) => { const custom_typeKey2typeValueRules = (model) => {
return [ return [
@ -218,28 +218,20 @@
labelWidth: 200, labelWidth: 200,
}, },
]; ];
export default defineComponent({ const { createMessage } = useMessage();
components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input, FormItem },
setup() { const [register] = useForm({
const { createMessage } = useMessage(); labelWidth: 120,
const [register, { setProps }] = useForm({ schemas,
labelWidth: 120, actionColOptions: {
schemas, span: 24,
actionColOptions: {
span: 24,
},
});
return {
register,
schemas,
handleSubmit: (values: any) => {
console.log('submit values', values);
createMessage.success('click search,values:' + JSON.stringify(values));
},
setProps,
};
}, },
}); });
function handleSubmit(values: any) {
console.log('submit values', values);
createMessage.success('click search,values:' + JSON.stringify(values));
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.local_form) .local_typeValue { :deep(.local_form) .local_typeValue {

119
src/views/demo/form/DynamicForm.vue
View File

@ -15,11 +15,10 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container/index'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
{ {
@ -178,69 +177,53 @@
}, },
]; ];
export default defineComponent({ const [register, { updateSchema, appendSchemaByField, removeSchemaByField }] = useForm({
components: { BasicForm, CollapseContainer, PageWrapper }, labelWidth: 120,
setup() { schemas,
const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByField }] = actionColOptions: {
useForm({ span: 24,
labelWidth: 120,
schemas,
actionColOptions: {
span: 24,
},
});
const [register1] = useForm({
labelWidth: 120,
schemas: schemas1,
actionColOptions: {
span: 24,
},
});
function changeLabel3() {
updateSchema({
field: 'field3',
label: '字段3 New',
});
}
function changeLabel34() {
updateSchema([
{
field: 'field3',
label: '字段3 New++',
},
{
field: 'field4',
label: '字段4 New++',
},
]);
}
function appendField() {
appendSchemaByField(
{
field: 'field10',
label: '字段10',
component: 'Input',
colProps: {
span: 8,
},
},
'field3',
);
}
function deleteField() {
removeSchemaByField('field11');
}
return {
register,
register1,
schemas,
setProps,
changeLabel3,
changeLabel34,
appendField,
deleteField,
};
}, },
}); });
const [register1] = useForm({
labelWidth: 120,
schemas: schemas1,
actionColOptions: {
span: 24,
},
});
function changeLabel3() {
updateSchema({
field: 'field3',
label: '字段3 New',
});
}
function changeLabel34() {
updateSchema([
{
field: 'field3',
label: '字段3 New++',
},
{
field: 'field4',
label: '字段4 New++',
},
]);
}
function appendField() {
appendSchemaByField(
{
field: 'field10',
label: '字段10',
component: 'Input',
colProps: {
span: 8,
},
},
'field3',
);
}
function deleteField() {
removeSchemaByField('field11');
}
</script> </script>

43
src/views/demo/form/RefForm.vue
View File

@ -64,12 +64,12 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { BasicForm, FormSchema, FormActionType, FormProps } from '/@/components/Form/index'; import { BasicForm, FormSchema, FormActionType, FormProps } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
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';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
@ -167,23 +167,16 @@
}, },
]; ];
export default defineComponent({ const formElRef = ref<Nullable<FormActionType>>(null);
components: { BasicForm, CollapseContainer, PageWrapper }, const { createMessage } = useMessage();
setup() {
const formElRef = ref<Nullable<FormActionType>>(null); function handleSubmit(values: any) {
const { createMessage } = useMessage(); createMessage.success('click search,values:' + JSON.stringify(values));
return { }
formElRef,
schemas, function setProps(props: FormProps) {
handleSubmit: (values: any) => { const formEl = formElRef.value;
createMessage.success('click search,values:' + JSON.stringify(values)); if (!formEl) return;
}, formEl.setProps(props);
setProps(props: FormProps) { }
const formEl = formElRef.value;
if (!formEl) return;
formEl.setProps(props);
},
};
},
});
</script> </script>

104
src/views/demo/form/RuleForm.vue
View File

@ -12,13 +12,12 @@
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container'; import { useMessage } from '@/hooks/web/useMessage';
import { useMessage } from '/@/hooks/web/useMessage'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page'; import { isAccountExist } from '@/api/demo/system';
import { isAccountExist } from '/@/api/demo/system';
const schemas: FormSchema[] = [ const schemas: FormSchema[] = [
{ {
@ -208,57 +207,42 @@
}, },
]; ];
export default defineComponent({ const { createMessage } = useMessage();
components: { BasicForm, CollapseContainer, PageWrapper }, const [register, { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }] =
setup() { useForm({
const { createMessage } = useMessage(); labelWidth: 120,
const [ schemas,
register, actionColOptions: {
{ validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue }, span: 24,
] = useForm({ },
labelWidth: 120, });
schemas, async function validateForm() {
actionColOptions: { try {
span: 24, const res = await validateFields();
}, console.log('passing', res);
}); } catch (error) {
async function validateForm() { console.log('not passing', error);
try { }
const res = await validateFields(); }
console.log('passing', res); async function resetValidate() {
} catch (error) { clearValidate();
console.log('not passing', error); }
} function getFormValues() {
} const values = getFieldsValue();
async function resetValidate() { createMessage.success('values:' + JSON.stringify(values));
clearValidate(); }
} function setFormValues() {
function getFormValues() { setFieldsValue({
const values = getFieldsValue(); field1: 1111,
createMessage.success('values:' + JSON.stringify(values)); field4: ['1'],
} field5: ['1'],
function setFormValues() { field7: '1',
setFieldsValue({ field33: '2020-12-12',
field1: 1111, field3: '2020-12-12',
field4: ['1'], });
field5: ['1'], }
field7: '1',
field33: '2020-12-12', function handleSubmit(values: any) {
field3: '2020-12-12', createMessage.success('click search,values:' + JSON.stringify(values));
}); }
}
return {
register,
schemas,
handleSubmit: (values: any) => {
createMessage.success('click search,values:' + JSON.stringify(values));
},
getFormValues,
setFormValues,
validateForm,
resetValidate,
resetFields,
};
},
});
</script> </script>

186
src/views/demo/form/TabsForm.vue
View File

@ -19,118 +19,104 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { ref, defineComponent } from 'vue'; import { ref } from 'vue';
import { Tabs } from 'ant-design-vue'; import { Tabs } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { omit } from 'lodash-es'; import { omit } from 'lodash-es';
import { deepMerge } from '/@/utils'; import { deepMerge } from '@/utils';
import { BasicForm, FormSchema, useForm, FormProps, UseFormReturnType } from '/@/components/Form'; import { BasicForm, FormSchema, useForm, FormProps, UseFormReturnType } from '@/components/Form';
export default defineComponent({ defineOptions({ name: 'TabsFormDemo' });
name: 'TabsFormDemo',
components: { Tabs, TabPane: Tabs.TabPane, PageWrapper, CollapseContainer, BasicForm },
setup() {
type TabsFormType = {
key: string;
tab: string;
forceRender?: boolean;
Form: UseFormReturnType;
};
const { createMessage } = useMessage(); const TabPane = Tabs.TabPane;
const activeKey = ref('tabs2'); type TabsFormType = {
const loading = ref(false); key: string;
const tabsFormSchema: TabsFormType[] = []; tab: string;
forceRender?: boolean;
Form: UseFormReturnType;
};
// 公共属性 const { createMessage } = useMessage();
const baseFormConfig: Partial<FormProps> = { const activeKey = ref('tabs2');
showActionButtonGroup: false, const loading = ref(false);
labelWidth: 100, const tabsFormSchema: TabsFormType[] = [];
};
// 为每个字段模拟默认值, { tabs1: { field1: '', field2: '' }, tabs2: { field1: '' }, ... } // 公共属性
const mockDefaultValue: Recordable = {}; const baseFormConfig: Partial<FormProps> = {
showActionButtonGroup: false,
labelWidth: 100,
};
// 模拟5个标签页 // 为每个字段模拟默认值, { tabs1: { field1: '', field2: '' }, tabs2: { field1: '' }, ... }
for (let i = 1; i <= 5; ++i) { const mockDefaultValue: Recordable = {};
const tabsKey = `tabs${i}`;
// 每个标签页8个字段 // 模拟5个标签页
const schemas: FormSchema[] = []; for (let i = 1; i <= 5; ++i) {
const row: Recordable = {}; const tabsKey = `tabs${i}`;
for (let j = 1; j <= 8; ++j) { // 每个标签页8个字段
schemas.push({ const schemas: FormSchema[] = [];
field: `${tabsKey}.field${j}`, const row: Recordable = {};
label: `${tabsKey}-field${j}`,
component: 'Input',
colProps: { span: 24 },
});
row[`field${j}`] = `field: ${tabsKey}.field${j}, default value`;
}
mockDefaultValue[tabsKey] = row; for (let j = 1; j <= 8; ++j) {
schemas.push({
field: `${tabsKey}.field${j}`,
label: `${tabsKey}-field${j}`,
component: 'Input',
colProps: { span: 24 },
});
row[`field${j}`] = `field: ${tabsKey}.field${j}, default value`;
}
tabsFormSchema.push({ mockDefaultValue[tabsKey] = row;
key: tabsKey,
tab: tabsKey, tabsFormSchema.push({
forceRender: true, key: tabsKey,
Form: useForm(Object.assign({ schemas }, baseFormConfig) as FormProps), tab: tabsKey,
}); forceRender: true,
Form: useForm(Object.assign({ schemas }, baseFormConfig) as FormProps),
});
}
async function handleReset() {
for (const item of tabsFormSchema) {
const { resetFields } = item.Form[1];
await resetFields();
}
}
async function handleSubmit() {
let lastKey = '';
loading.value = true;
try {
const values: Recordable = {};
for (const item of tabsFormSchema) {
lastKey = item.key;
const { validate, getFieldsValue } = item.Form[1];
await validate();
// 表单已支持多级key
deepMerge(values, getFieldsValue());
} }
async function handleReset() { console.log('submit values: ', values);
for (const item of tabsFormSchema) { createMessage.success('提交成功！请打开控制台查看');
const { resetFields } = item.Form[1]; } catch (e) {
await resetFields(); // 验证失败或出错，切换到对应标签页
} activeKey.value = lastKey;
} console.log(e);
} finally {
loading.value = false;
}
}
async function handleSubmit() { async function handleSetValues() {
let lastKey = ''; console.log('默认值为: ', mockDefaultValue);
loading.value = true; for (const item of tabsFormSchema) {
try { const { setFieldsValue } = item.Form[1];
const values: Recordable = {}; await setFieldsValue(mockDefaultValue);
for (const item of tabsFormSchema) { }
lastKey = item.key; }
const { validate, getFieldsValue } = item.Form[1];
await validate();
// 表单已支持多级key
deepMerge(values, getFieldsValue());
}
console.log('submit values: ', values);
createMessage.success('提交成功！请打开控制台查看');
} catch (e) {
// 验证失败或出错，切换到对应标签页
activeKey.value = lastKey;
console.log(e);
} finally {
loading.value = false;
}
}
async function handleSetValues() {
console.log('默认值为: ', mockDefaultValue);
for (const item of tabsFormSchema) {
const { setFieldsValue } = item.Form[1];
await setFieldsValue(mockDefaultValue);
}
}
return {
omit,
loading,
activeKey,
tabsFormSchema,
handleReset,
handleSubmit,
handleSetValues,
};
},
});
</script> </script>
<style scoped></style>

165
src/views/demo/form/UseForm.vue
View File

@ -2,7 +2,7 @@
<PageWrapper title="UseForm操作示例"> <PageWrapper title="UseForm操作示例">
<a-button class="mb-4" type="primary" @click="showDrawer"> 更改设置 </a-button> <a-button class="mb-4" type="primary" @click="showDrawer"> 更改设置 </a-button>
<Drawer v-model:open="visible" title="更改设置" placement="right"> <Drawer v-model:open="open" title="更改设置" placement="right">
<BasicForm ref="settingFormRef" @register="registerSetting" @submit="handleSubmitSetting"> <BasicForm ref="settingFormRef" @register="registerSetting" @submit="handleSubmitSetting">
<template #other> <template #other>
<Space> <Space>
@ -34,13 +34,13 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { Drawer, Space } from 'ant-design-vue'; import { Drawer, Space } from 'ant-design-vue';
import { BasicForm, FormSchema, useForm, type FormProps } from '/@/components/Form'; import { BasicForm, FormSchema, useForm, type FormProps } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { areaRecord } from '/@/api/demo/cascader'; import { areaRecord } from '@/api/demo/cascader';
const sizeList = [ const sizeList = [
{ value: 'large', label: 'large' }, { value: 'large', label: 'large' },
@ -426,93 +426,68 @@
}, },
]; ];
export default defineComponent({ const open = ref<boolean>(false);
components: { const settingFormRef = ref();
BasicForm, const [registerSetting] = useForm({
CollapseContainer, size: 'small',
PageWrapper, schemas: formSchemas,
Drawer, compact: true,
Space, actionColOptions: { span: 24 },
}, showActionButtonGroup: false,
setup() {
const visible = ref<boolean>(false);
const settingFormRef = ref();
const [registerSetting] = useForm({
size: 'small',
schemas: formSchemas,
compact: true,
actionColOptions: { span: 24 },
showActionButtonGroup: false,
});
const resetSettings = async () => {
setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
setProps({ submitButtonOptions: { disabled: false, loading: false } });
await setFieldsValue({ field9: [] });
await settingFormRef.value?.resetFields();
};
const handleSubmitSetting = async (values) => {
console.log(values);
await setProps(values);
visible.value = false;
};
const [register, { setProps, setFieldsValue, updateSchema }] = useForm({
labelWidth: 120,
schemas,
actionColOptions: { span: 24 },
fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
});
async function handleLoad() {
const promiseFn = function () {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
field9: ['430000', '430100', '430102'],
province: '湖南省',
city: '长沙市',
district: '岳麓区',
});
}, 1000);
});
};
const item = await promiseFn();
const { field9, province, city, district } = item as any;
await updateSchema({
field: 'field9',
componentProps: {
displayRenderArray: [province, city, district],
},
});
await setFieldsValue({ field9 });
visible.value = false;
}
const showDrawer = () => {
visible.value = true;
};
const onSettings = () => {
settingFormRef.value?.submit();
};
const withClose = (formProps: Partial<FormProps>) => {
setProps(formProps);
visible.value = false;
};
return {
register,
schemas,
handleSubmit: (values) => {
console.log(values);
},
setProps,
handleLoad,
visible,
showDrawer,
settingFormRef,
withClose,
onSettings,
resetSettings,
registerSetting,
handleSubmitSetting,
};
},
}); });
const resetSettings = async () => {
setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
setProps({ submitButtonOptions: { disabled: false, loading: false } });
await setFieldsValue({ field9: [] });
await settingFormRef.value?.resetFields();
};
const handleSubmitSetting = async (values) => {
console.log(values);
await setProps(values);
open.value = false;
};
const [register, { setProps, setFieldsValue, updateSchema }] = useForm({
labelWidth: 120,
schemas,
actionColOptions: { span: 24 },
fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
});
async function handleLoad() {
const promiseFn = function () {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
field9: ['430000', '430100', '430102'],
province: '湖南省',
city: '长沙市',
district: '岳麓区',
});
}, 1000);
});
};
const item = await promiseFn();
const { field9, province, city, district } = item as any;
await updateSchema({
field: 'field9',
componentProps: {
displayRenderArray: [province, city, district],
},
});
await setFieldsValue({ field9 });
open.value = false;
}
const showDrawer = () => {
open.value = true;
};
const onSettings = () => {
settingFormRef.value?.submit();
};
const withClose = (formProps: Partial<FormProps>) => {
setProps(formProps);
open.value = false;
};
function handleSubmit(values) {
console.log(values);
}
</script> </script>

76
src/views/demo/form/index.vue
View File

@ -10,7 +10,7 @@
@reset="handleReset" @reset="handleReset"
> >
<template #selectA="{ model, field }"> <template #selectA="{ model, field }">
<a-select <Select
:options="optionsA" :options="optionsA"
mode="multiple" mode="multiple"
v-model:value="model[field]" v-model:value="model[field]"
@ -19,7 +19,7 @@
/> />
</template> </template>
<template #selectB="{ model, field }"> <template #selectB="{ model, field }">
<a-select <Select
:options="optionsB" :options="optionsB"
mode="multiple" mode="multiple"
v-model:value="model[field]" v-model:value="model[field]"
@ -48,29 +48,28 @@
labelField="name" labelField="name"
valueField="id" valueField="id"
:params="searchParams" :params="searchParams"
@search="onSearch" @search="useDebounceFn(onSearch, 300)"
/> />
</template> </template>
</BasicForm> </BasicForm>
</CollapseContainer> </CollapseContainer>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { type Recordable } from '@vben/types'; import { type Recordable } from '@vben/types';
import { computed, defineComponent, unref, ref } from 'vue'; import { computed, unref, ref } from 'vue';
import { BasicForm, FormSchema, ApiSelect } from '/@/components/Form/index'; import { BasicForm, FormSchema, ApiSelect } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { optionsListApi } from '/@/api/demo/select'; import { optionsListApi } from '@/api/demo/select';
import { useDebounceFn } from '@vueuse/core'; import { useDebounceFn } from '@vueuse/core';
import { treeOptionsListApi } from '/@/api/demo/tree'; import { treeOptionsListApi } from '@/api/demo/tree';
import { Select, type SelectProps } from 'ant-design-vue'; import { Select, type SelectProps } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { areaRecord } from '/@/api/demo/cascader'; import { areaRecord } from '@/api/demo/cascader';
import { uploadApi } from '/@/api/sys/upload'; import { uploadApi } from '@/api/sys/upload';
// import { isArray } from '/@/utils/is';
const valueSelectA = ref<string[]>([]); const valueSelectA = ref<string[]>([]);
const valueSelectB = ref<string[]>([]); const valueSelectB = ref<string[]>([]);
@ -784,37 +783,22 @@
}, },
]; ];
export default defineComponent({ const { createMessage } = useMessage();
components: { BasicForm, CollapseContainer, PageWrapper, ApiSelect, ASelect: Select }, const keyword = ref<string>('');
setup() { const searchParams = computed<Recordable<string>>(() => {
const check = ref(null); return { keyword: unref(keyword) };
const { createMessage } = useMessage();
const keyword = ref<string>('');
const searchParams = computed<Recordable<string>>(() => {
return { keyword: unref(keyword) };
});
function onSearch(value: string) {
keyword.value = value;
}
return {
schemas,
optionsListApi,
optionsA,
optionsB,
valueSelectA,
valueSelectB,
onSearch: useDebounceFn(onSearch, 300),
searchParams,
handleReset: () => {
keyword.value = '';
},
handleSubmit: (values: any) => {
console.log('values', values);
createMessage.success('click search,values:' + JSON.stringify(values));
},
check,
};
},
}); });
function onSearch(value: string) {
keyword.value = value;
}
function handleReset() {
keyword.value = '';
}
function handleSubmit(values: any) {
console.log('values', values);
createMessage.success('click search,values:' + JSON.stringify(values));
}
</script> </script>

9
src/views/demo/level/Menu111.vue
View File

@ -2,12 +2,9 @@
<div class="p-5"> <div class="p-5">
多层级缓存-页面1-1-1 多层级缓存-页面1-1-1
<br /> <br />
<Input /> <a-input />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; defineOptions({ name: 'Menu111Demo' });
import { Input } from 'ant-design-vue';
export default defineComponent({ name: 'Menu111Demo', components: { Input } });
</script> </script>

9
src/views/demo/level/Menu12.vue
View File

@ -2,12 +2,9 @@
<div class="p-5"> <div class="p-5">
多层级缓存-页面1-2 多层级缓存-页面1-2
<br /> <br />
<Input /> <a-input />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; defineOptions({ name: 'Menu12Demo' });
import { Input } from 'ant-design-vue';
export default defineComponent({ name: 'Menu12Demo', components: { Input } });
</script> </script>

12
src/views/demo/level/Menu2.vue
View File

@ -2,15 +2,9 @@
<div class="p-5"> <div class="p-5">
多层级缓存-页面2 多层级缓存-页面2
<br /> <br />
<Input /> <a-input />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; defineOptions({ name: 'Menu2Demo' });
import { Input } from 'ant-design-vue';
export default defineComponent({
name: 'Menu2Demo',
components: { Input },
});
</script> </script>

32
src/views/demo/page/account/center/Application.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<List :class="prefixCls"> <List :class="prefixCls">
<a-row :gutter="16"> <Row :gutter="16">
<template v-for="item in list" :key="item.title"> <template v-for="item in applicationList" :key="item.title">
<a-col :span="6"> <Col :span="6">
<ListItem> <ListItem>
<Card :hoverable="true" :class="`${prefixCls}__card`"> <Card :hoverable="true" :class="`${prefixCls}__card`">
<div :class="`${prefixCls}__card-title`"> <div :class="`${prefixCls}__card-title`">
@ -22,33 +22,19 @@
/> />
</Card> </Card>
</ListItem> </ListItem>
</a-col> </Col>
</template> </template>
</a-row> </Row>
</List> </List>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { List, Card, Row, Col } from 'ant-design-vue'; import { List, Card, Row, Col } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { applicationList } from './data'; import { applicationList } from './data';
export default defineComponent({ const ListItem = List.Item;
components: {
List, const prefixCls = 'account-center-application';
ListItem: List.Item,
Card,
Icon,
[Row.name]: Row,
[Col.name]: Col,
},
setup() {
return {
prefixCls: 'account-center-application',
list: applicationList,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
.account-center-application { .account-center-application {

25
src/views/demo/page/account/center/Article.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<List item-layout="vertical" :class="prefixCls"> <List item-layout="vertical" :class="prefixCls">
<template v-for="item in list" :key="item.title"> <template v-for="item in articleList" :key="item.title">
<ListItem> <ListItem>
<ListItemMeta> <ListItemMeta>
<template #description> <template #description>
@ -39,28 +39,15 @@
</template> </template>
</List> </List>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { List, Tag } from 'ant-design-vue'; import { List, Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { actions, articleList } from './data'; import { actions, articleList } from './data';
export default defineComponent({ const ListItem = List.Item;
components: { const ListItemMeta = List.Item.Meta;
List,
ListItem: List.Item, const prefixCls = 'account-center-article';
ListItemMeta: List.Item.Meta,
Tag,
Icon,
},
setup() {
return {
prefixCls: 'account-center-article',
list: articleList,
actions,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.account-center-article { .account-center-article {

34
src/views/demo/page/account/center/Project.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<List :class="prefixCls"> <List :class="prefixCls">
<a-row :gutter="16"> <Row :gutter="16">
<template v-for="item in list" :key="item.title"> <template v-for="item in projectList" :key="item.title">
<a-col :span="6"> <Col :span="6">
<ListItem> <ListItem>
<Card :hoverable="true" :class="`${prefixCls}__card`"> <Card :hoverable="true" :class="`${prefixCls}__card`">
<img :src="demoImg" /> <img :src="demoImg" />
@ -14,33 +14,19 @@
</div> </div>
</Card> </Card>
</ListItem> </ListItem>
</a-col> </Col>
</template> </template>
</a-row> </Row>
</List> </List>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { List, Card, Row, Col } from 'ant-design-vue'; import { List, Card, Row, Col } from 'ant-design-vue';
import demoImg from '/@/assets/images/demo.png'; import demoImg from '@/assets/images/demo.png';
import { projectList } from './data'; import { projectList } from './data';
export default defineComponent({ const ListItem = List.Item;
components: {
List, const prefixCls = 'account-center-project';
ListItem: List.Item,
Card,
[Row.name]: Row,
[Col.name]: Col,
},
setup() {
return {
prefixCls: 'account-center-project',
list: projectList,
demoImg,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
.account-center-project { .account-center-project {

6
src/views/demo/page/account/center/index.vue
View File

@ -55,15 +55,15 @@
<script lang="ts"> <script lang="ts">
import { Tag, Tabs, Row, Col } from 'ant-design-vue'; import { Tag, Tabs, Row, Col } from 'ant-design-vue';
import { defineComponent, computed } from 'vue'; import { defineComponent, computed } from 'vue';
import { CollapseContainer } from '/@/components/Container/index'; import { CollapseContainer } from '@/components/Container';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import Article from './Article.vue'; import Article from './Article.vue';
import Application from './Application.vue'; import Application from './Application.vue';
import Project from './Project.vue'; import Project from './Project.vue';
import headerImg from '/@/assets/images/header.jpg'; import headerImg from '@/assets/images/header.jpg';
import { tags, teams, details, achieveList } from './data'; import { tags, teams, details, achieveList } from './data';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
export default defineComponent({ export default defineComponent({
components: { components: {

23
src/views/demo/page/account/setting/AccountBind.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<CollapseContainer title="账号绑定" :canExpan="false"> <CollapseContainer title="账号绑定" :canExpan="false">
<List> <List>
<template v-for="item in list" :key="item.key"> <template v-for="item in accountBindList" :key="item.key">
<ListItem> <ListItem>
<ListItemMeta> <ListItemMeta>
<template #avatar> <template #avatar>
@ -22,28 +22,15 @@
</List> </List>
</CollapseContainer> </CollapseContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { List } from 'ant-design-vue'; import { List } from 'ant-design-vue';
import { defineComponent } from 'vue'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container/index';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { accountBindList } from './data'; import { accountBindList } from './data';
export default defineComponent({ const ListItem = List.Item;
components: { const ListItemMeta = List.Item.Meta;
CollapseContainer,
List,
ListItem: List.Item,
ListItemMeta: List.Item.Meta,
Icon,
},
setup() {
return {
list: accountBindList,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.avatar { .avatar {

112
src/views/demo/page/account/setting/BaseSetting.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<CollapseContainer title="基本设置" :canExpan="false"> <CollapseContainer title="基本设置" :canExpan="false">
<a-row :gutter="24"> <Row :gutter="24">
<a-col :span="14"> <Col :span="14">
<BasicForm @register="register" /> <BasicForm @register="register" />
</a-col> </Col>
<a-col :span="10"> <Col :span="10">
<div class="change-avatar"> <div class="change-avatar">
<div class="mb-2">头像</div> <div class="mb-2">头像</div>
<CropperAvatar <CropperAvatar
:uploadApi="uploadApi" :uploadApi="uploadApi as any"
:value="avatar" :value="avatar"
btnText="更换头像" btnText="更换头像"
:btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }" :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
@ -16,74 +16,56 @@
width="150" width="150"
/> />
</div> </div>
</a-col> </Col>
</a-row> </Row>
<Button type="primary" @click="handleSubmit"> 更新基本信息 </Button> <a-button type="primary" @click="handleSubmit"> 更新基本信息 </a-button>
</CollapseContainer> </CollapseContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { Button, Row, Col } from 'ant-design-vue'; import { Row, Col } from 'ant-design-vue';
import { computed, defineComponent, onMounted } from 'vue'; import { computed, onMounted } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index'; import { BasicForm, useForm } from '@/components/Form';
import { CollapseContainer } from '/@/components/Container'; import { CollapseContainer } from '@/components/Container';
import { CropperAvatar } from '/@/components/Cropper'; import { CropperAvatar } from '@/components/Cropper';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import headerImg from '/@/assets/images/header.jpg'; import headerImg from '@/assets/images/header.jpg';
import { accountInfoApi } from '/@/api/demo/account'; import { accountInfoApi } from '@/api/demo/account';
import { baseSetschemas } from './data'; import { baseSetschemas } from './data';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { uploadApi } from '/@/api/sys/upload'; import { uploadApi } from '@/api/sys/upload';
export default defineComponent({ const { createMessage } = useMessage();
components: { const userStore = useUserStore();
BasicForm,
CollapseContainer,
Button,
ARow: Row,
ACol: Col,
CropperAvatar,
},
setup() {
const { createMessage } = useMessage();
const userStore = useUserStore();
const [register, { setFieldsValue }] = useForm({ const [register, { setFieldsValue }] = useForm({
labelWidth: 120, labelWidth: 120,
schemas: baseSetschemas, schemas: baseSetschemas,
showActionButtonGroup: false, showActionButtonGroup: false,
});
onMounted(async () => {
const data = await accountInfoApi();
setFieldsValue(data);
});
const avatar = computed(() => {
const { avatar } = userStore.getUserInfo;
console.log(avatar);
return avatar || headerImg;
});
function updateAvatar({ src, data }) {
const userinfo = userStore.getUserInfo;
userinfo.avatar = src;
userStore.setUserInfo(userinfo);
console.log('data', data);
}
return {
avatar,
register,
uploadApi: uploadApi as any,
updateAvatar,
handleSubmit: () => {
createMessage.success('更新成功！');
},
};
},
}); });
onMounted(async () => {
const data = await accountInfoApi();
setFieldsValue(data);
});
const avatar = computed(() => {
const { avatar } = userStore.getUserInfo;
console.log(avatar);
return avatar || headerImg;
});
function updateAvatar({ src, data }) {
const userinfo = userStore.getUserInfo;
userinfo.avatar = src;
userStore.setUserInfo(userinfo);
console.log('data', data);
}
function handleSubmit() {
createMessage.success('更新成功！');
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

33
src/views/demo/page/account/setting/MsgNotify.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<CollapseContainer title="新消息通知" :canExpan="false"> <CollapseContainer title="新消息通知" :canExpan="false">
<List> <List>
<template v-for="item in list" :key="item.key"> <template v-for="item in msgNotifyList" :key="item.key">
<ListItem> <ListItem>
<ListItemMeta> <ListItemMeta>
<template #title> <template #title>
{{ item.title }} {{ item.title }}
<Switch <Switch
class="extra" class="float-right mt-10px mr-30px"
checked-children="开" checked-children="开"
un-checked-children="关" un-checked-children="关"
default-checked default-checked
@ -22,32 +22,11 @@
</List> </List>
</CollapseContainer> </CollapseContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { List, Switch } from 'ant-design-vue'; import { List, Switch } from 'ant-design-vue';
import { defineComponent } from 'vue'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container/index';
import { msgNotifyList } from './data'; import { msgNotifyList } from './data';
export default defineComponent({ const ListItem = List.Item;
components: { const ListItemMeta = List.Item.Meta;
CollapseContainer,
List,
ListItem: List.Item,
ListItemMeta: List.Item.Meta,
Switch,
},
setup() {
return {
list: msgNotifyList,
};
},
});
</script> </script>
<style lang="less" scoped>
.extra {
margin-top: 10px;
margin-right: 30px;
float: right;
}
</style>

33
src/views/demo/page/account/setting/SecureSetting.vue
View File

@ -1,12 +1,15 @@
<template> <template>
<CollapseContainer title="安全设置" :canExpan="false"> <CollapseContainer title="安全设置" :canExpan="false">
<List> <List>
<template v-for="item in list" :key="item.key"> <template v-for="item in secureSettingList" :key="item.key">
<ListItem> <ListItem>
<ListItemMeta> <ListItemMeta>
<template #title> <template #title>
{{ item.title }} {{ item.title }}
<div class="extra" v-if="item.extra"> <div
class="float-right mt-10px mr-30px text-blue-500 text-font-normal cursor-pointer"
v-if="item.extra"
>
{{ item.extra }} {{ item.extra }}
</div> </div>
</template> </template>
@ -19,29 +22,11 @@
</List> </List>
</CollapseContainer> </CollapseContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { List } from 'ant-design-vue'; import { List } from 'ant-design-vue';
import { defineComponent } from 'vue'; import { CollapseContainer } from '@/components/Container';
import { CollapseContainer } from '/@/components/Container/index';
import { secureSettingList } from './data'; import { secureSettingList } from './data';
export default defineComponent({ const ListItem = List.Item;
components: { CollapseContainer, List, ListItem: List.Item, ListItemMeta: List.Item.Meta }, const ListItemMeta = List.Item.Meta;
setup() {
return {
list: secureSettingList,
};
},
});
</script> </script>
<style lang="less" scoped>
.extra {
margin-top: 10px;
margin-right: 30px;
float: right;
color: #1890ff;
font-weight: normal;
cursor: pointer;
}
</style>

2
src/views/demo/page/account/setting/data.ts
View File

@ -1,4 +1,4 @@
import { FormSchema } from '/@/components/Form/index'; import { FormSchema } from '@/components/Form';
export interface ListItem { export interface ListItem {
key: string; key: string;

2
src/views/demo/page/account/setting/index.vue
View File

@ -16,7 +16,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { Tabs } from 'ant-design-vue'; import { Tabs } from 'ant-design-vue';
import { ScrollContainer } from '/@/components/Container/index'; import { ScrollContainer } from '@/components/Container';
import { settingList } from './data'; import { settingList } from './data';
import BaseSetting from './BaseSetting.vue'; import BaseSetting from './BaseSetting.vue';

6
src/views/demo/page/desc/basic/data.tsx
View File

@ -1,6 +1,6 @@
import { DescItem } from '/@/components/Description/index'; import { DescItem } from '@/components/Description';
import { BasicColumn } from '/@/components/Table/src/types/table'; import { BasicColumn } from '@/components/Table/src/types/table';
import { Button } from '/@/components/Button'; import { Button } from '@/components/Button';
import { Badge } from 'ant-design-vue'; import { Badge } from 'ant-design-vue';

96
src/views/demo/page/desc/basic/index.vue
View File

@ -8,7 +8,7 @@
:data="refundData" :data="refundData"
:schema="refundSchema" :schema="refundSchema"
/> />
<a-divider /> <Divider />
<Description <Description
size="middle" size="middle"
title="用户信息" title="用户信息"
@ -17,18 +17,17 @@
:data="personData" :data="personData"
:schema="personSchema" :schema="personSchema"
/> />
<a-divider /> <Divider />
<BasicTable @register="registerRefundTable" /> <BasicTable @register="registerRefundTable" />
<a-divider /> <Divider />
<BasicTable @register="registerTimeTable" /> <BasicTable @register="registerTimeTable" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { Description } from '@/components/Description';
import { Description } from '/@/components/Description/index'; import { BasicTable, useTable } from '@/components/Table';
import { BasicTable, useTable } from '/@/components/Table'; import { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
import { Divider } from 'ant-design-vue'; import { Divider } from 'ant-design-vue';
import { import {
@ -42,54 +41,41 @@
refundTimeTableData, refundTimeTableData,
} from './data'; } from './data';
export default defineComponent({ const [registerRefundTable] = useTable({
components: { Description, BasicTable, PageWrapper, [Divider.name]: Divider }, title: '退货商品',
setup() { dataSource: refundTableData,
const [registerRefundTable] = useTable({ columns: refundTableSchema,
title: '退货商品', pagination: false,
dataSource: refundTableData, showIndexColumn: false,
columns: refundTableSchema, scroll: { y: 300 },
pagination: false, showSummary: true,
showIndexColumn: false, summaryFunc: handleSummary,
scroll: { y: 300 },
showSummary: true,
summaryFunc: handleSummary,
});
const [registerTimeTable] = useTable({
title: '退货进度',
columns: refundTimeTableSchema,
pagination: false,
dataSource: refundTimeTableData,
showIndexColumn: false,
scroll: { y: 300 },
});
function handleSummary(tableData: any[]) {
let totalT5 = 0;
let totalT6 = 0;
tableData.forEach((item) => {
totalT5 += item.t5;
totalT6 += item.t6;
});
return [
{
t1: '总计',
t5: totalT5,
t6: totalT6,
},
];
}
return {
registerRefundTable,
registerTimeTable,
refundSchema,
refundData,
personSchema,
personData,
};
},
}); });
const [registerTimeTable] = useTable({
title: '退货进度',
columns: refundTimeTableSchema,
pagination: false,
dataSource: refundTimeTableData,
showIndexColumn: false,
scroll: { y: 300 },
});
function handleSummary(tableData: any[]) {
let totalT5 = 0;
let totalT6 = 0;
tableData.forEach((item) => {
totalT5 += item.t5;
totalT6 += item.t6;
});
return [
{
t1: '总计',
t5: totalT5,
t6: totalT6,
},
];
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.desc-wrap { .desc-wrap {

2
src/views/demo/page/desc/high/data.tsx
View File

@ -1,4 +1,4 @@
import { BasicColumn } from '/@/components/Table/src/types/table'; import { BasicColumn } from '@/components/Table/src/types/table';
import { Badge } from 'ant-design-vue'; import { Badge } from 'ant-design-vue';

164
src/views/demo/page/desc/high/index.vue
View File

@ -7,126 +7,104 @@
</template> </template>
<template #footer> <template #footer>
<a-tabs default-active-key="1"> <Tabs default-active-key="1">
<a-tab-pane key="1" tab="详情" /> <Tabs.TabPane key="1" tab="详情" />
<a-tab-pane key="2" tab="规则" /> <Tabs.TabPane key="2" tab="规则" />
</a-tabs> </Tabs>
</template> </template>
<div class="pt-4 m-4 desc-wrap"> <div class="pt-4 m-4 desc-wrap">
<a-descriptions size="small" :column="2"> <Descriptions size="small" :column="2">
<a-descriptions-item label="创建人"> 曲丽丽 </a-descriptions-item> <Descriptions.Item label="创建人"> 曲丽丽 </Descriptions.Item>
<a-descriptions-item label="订购产品"> XX 服务 </a-descriptions-item> <Descriptions.Item label="订购产品"> XX 服务 </Descriptions.Item>
<a-descriptions-item label="创建时间"> 2017-01-10 </a-descriptions-item> <Descriptions.Item label="创建时间"> 2017-01-10 </Descriptions.Item>
<a-descriptions-item label="关联单据"> <Descriptions.Item label="关联单据">
<a>12421</a> <a>12421</a>
</a-descriptions-item> </Descriptions.Item>
<a-descriptions-item label="生效日期"> 2017-07-07 ~ 2017-08-08 </a-descriptions-item> <Descriptions.Item label="生效日期"> 2017-07-07 ~ 2017-08-08 </Descriptions.Item>
<a-descriptions-item label="备注"> 请于两个工作日内确认 </a-descriptions-item> <Descriptions.Item label="备注"> 请于两个工作日内确认 </Descriptions.Item>
</a-descriptions> </Descriptions>
<a-card title="流程进度" :bordered="false"> <Card title="流程进度" :bordered="false">
<a-steps :current="1" progress-dot size="small"> <Steps :current="1" progress-dot size="small">
<a-step title="创建项目"> <Steps.Step title="创建项目">
<template #description> <template #description>
<div>Vben</div> <div>Vben</div>
<p>2016-12-12 12:32</p> <p>2016-12-12 12:32</p>
</template> </template>
</a-step> </Steps.Step>
<a-step title="部门初审"> <Steps.Step title="部门初审">
<template #description> <template #description>
<p>Chad</p> <p>Chad</p>
</template> </template>
</a-step> </Steps.Step>
<a-step title="财务复核" /> <Steps.Step title="财务复核" />
<a-step title="完成" /> <Steps.Step title="完成" />
</a-steps> </Steps>
</a-card> </Card>
<a-card title="用户信息" :bordered="false" class="mt-5"> <Card title="用户信息" :bordered="false" class="mt-5">
<a-descriptions :column="3"> <Descriptions :column="3">
<a-descriptions-item label="用户姓名"> 付小小 </a-descriptions-item> <Descriptions.Item label="用户姓名"> 付小小 </Descriptions.Item>
<a-descriptions-item label="会员卡号"> XX 32943898021309809423 </a-descriptions-item> <Descriptions.Item label="会员卡号"> XX 32943898021309809423 </Descriptions.Item>
<a-descriptions-item label="身份证"> 3321944288191034921 </a-descriptions-item> <Descriptions.Item label="身份证"> 3321944288191034921 </Descriptions.Item>
<a-descriptions-item label="联系方式"> 18112345678 </a-descriptions-item> <Descriptions.Item label="联系方式"> 18112345678 </Descriptions.Item>
<a-descriptions-item label="联系地址" :span="2"> <Descriptions.Item label="联系地址" :span="2">
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口 曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
</a-descriptions-item> </Descriptions.Item>
</a-descriptions> </Descriptions>
<a-descriptions title="信息组" :column="3"> <Descriptions title="信息组" :column="3">
<a-descriptions-item label="某某数据"> 111 </a-descriptions-item> <Descriptions.Item label="某某数据"> 111 </Descriptions.Item>
<a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item> <Descriptions.Item label="该数据更新时间"> 2017-08-08 </Descriptions.Item>
<a-descriptions-item label="某某数据"> 725 </a-descriptions-item> <Descriptions.Item label="某某数据"> 725 </Descriptions.Item>
<a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item> <Descriptions.Item label="该数据更新时间"> 2017-08-08 </Descriptions.Item>
</a-descriptions> </Descriptions>
<h4>信息组</h4> <h4>信息组</h4>
<a-card title="多层级信息组"> <Card title="多层级信息组">
<a-descriptions title="组名称" :column="3"> <Descriptions title="组名称" :column="3">
<a-descriptions-item label="负责人"> 林东东 </a-descriptions-item> <Descriptions.Item label="负责人"> 林东东 </Descriptions.Item>
<a-descriptions-item label="角色码"> 1234567 </a-descriptions-item> <Descriptions.Item label="角色码"> 1234567 </Descriptions.Item>
<a-descriptions-item label="所属部门"> XX公司 - YY部 </a-descriptions-item> <Descriptions.Item label="所属部门"> XX公司 - YY部 </Descriptions.Item>
<a-descriptions-item label="过期时间"> 2017-08-08 </a-descriptions-item> <Descriptions.Item label="过期时间"> 2017-08-08 </Descriptions.Item>
<a-descriptions-item label="描述" :span="2"> <Descriptions.Item label="描述" :span="2">
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长... 这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
</a-descriptions-item> </Descriptions.Item>
</a-descriptions> </Descriptions>
<a-divider /> <Divider />
<a-descriptions title="组名称" :column="1"> <Descriptions title="组名称" :column="1">
<a-descriptions-item label="学名"> <Descriptions.Item label="学名">
Citrullus lanatus (Thunb.) Matsum. et Citrullus lanatus (Thunb.) Matsum. et
Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗.. Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
</a-descriptions-item> </Descriptions.Item>
</a-descriptions> </Descriptions>
<a-divider /> <Divider />
<a-descriptions title="组名称" :column="1"> <Descriptions title="组名称" :column="1">
<a-descriptions-item label="负责人"> 付小小 </a-descriptions-item> <Descriptions.Item label="负责人"> 付小小 </Descriptions.Item>
<a-descriptions-item label="角色码"> 1234568 </a-descriptions-item> <Descriptions.Item label="角色码"> 1234568 </Descriptions.Item>
</a-descriptions> </Descriptions>
</a-card> </Card>
</a-card> </Card>
<a-card title="用户近半年来电记录" class="my-5"> <Card title="用户近半年来电记录" class="my-5">
<Empty /> <Empty />
</a-card> </Card>
<BasicTable @register="registerTimeTable" /> <BasicTable @register="registerTimeTable" />
</div> </div>
</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 { PageWrapper } from '@/components/Page';
import { PageWrapper } from '/@/components/Page';
import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue'; import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
import { refundTimeTableSchema, refundTimeTableData } from './data'; import { refundTimeTableSchema, refundTimeTableData } from './data';
export default defineComponent({ const [registerTimeTable] = useTable({
components: { title: '退货进度',
BasicTable, columns: refundTimeTableSchema,
PageWrapper, pagination: false,
[Divider.name]: Divider, dataSource: refundTimeTableData,
[Card.name]: Card, showIndexColumn: false,
Empty, scroll: { y: 300 },
[Descriptions.name]: Descriptions,
[Descriptions.Item.name]: Descriptions.Item,
[Steps.name]: Steps,
[Steps.Step.name]: Steps.Step,
[Tabs.name]: Tabs,
[Tabs.TabPane.name]: Tabs.TabPane,
},
setup() {
const [registerTimeTable] = useTable({
title: '退货进度',
columns: refundTimeTableSchema,
pagination: false,
dataSource: refundTimeTableData,
showIndexColumn: false,
scroll: { y: 300 },
});
return {
registerTimeTable,
};
},
}); });
</script> </script>

2
src/views/demo/page/form/basic/data.ts
View File

@ -1,4 +1,4 @@
import { FormSchema } from '/@/components/Form'; import { FormSchema } from '@/components/Form';
const colProps = { const colProps = {
span: 8, span: 8,

89
src/views/demo/page/form/basic/index.vue
View File

@ -8,58 +8,53 @@
<BasicForm @register="register" /> <BasicForm @register="register" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { BasicForm, useForm } from '/@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { defineComponent } from 'vue';
import { schemas } from './data'; import { schemas } from './data';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
export default defineComponent({ defineOptions({ name: 'FormBasicPage' });
name: 'FormBasicPage',
components: { BasicForm, PageWrapper },
setup() {
const { createMessage } = useMessage();
const [register, { validate, setProps }] = useForm({
labelCol: {
span: 8,
},
wrapperCol: {
span: 15,
},
schemas: schemas,
actionColOptions: {
offset: 8,
span: 23,
},
submitButtonOptions: {
text: '提交',
},
submitFunc: customSubmitFunc,
});
async function customSubmitFunc() { const { createMessage } = useMessage();
try { const [register, { validate, setProps }] = useForm({
await validate(); labelCol: {
setProps({ span: 8,
submitButtonOptions: {
loading: true,
},
});
setTimeout(() => {
setProps({
submitButtonOptions: {
loading: false,
},
});
createMessage.success('提交成功！');
}, 2000);
} catch (error) {}
}
return { register };
}, },
wrapperCol: {
span: 15,
},
schemas: schemas,
actionColOptions: {
offset: 8,
span: 23,
},
submitButtonOptions: {
text: '提交',
},
submitFunc: customSubmitFunc,
}); });
async function customSubmitFunc() {
try {
await validate();
setProps({
submitButtonOptions: {
loading: true,
},
});
setTimeout(() => {
setProps({
submitButtonOptions: {
loading: false,
},
});
createMessage.success('提交成功！');
}, 2000);
} catch (error) {
console.error(error);
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.form-wrap { .form-wrap {

163
src/views/demo/page/form/high/PersonTable.vue
View File

@ -10,8 +10,7 @@
<a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button> <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { import {
BasicTable, BasicTable,
useTable, useTable,
@ -19,7 +18,7 @@
BasicColumn, BasicColumn,
ActionItem, ActionItem,
EditRecordRow, EditRecordRow,
} from '/@/components/Table'; } from '@/components/Table';
const columns: BasicColumn[] = [ const columns: BasicColumn[] = [
{ {
@ -56,92 +55,78 @@
dept: 'New York No. 3Lake Park', dept: 'New York No. 3Lake Park',
}, },
]; ];
export default defineComponent({ const [registerTable, { getDataSource }] = useTable({
components: { BasicTable, TableAction }, columns: columns,
setup() { showIndexColumn: false,
const [registerTable, { getDataSource }] = useTable({ dataSource: data,
columns: columns, actionColumn: {
showIndexColumn: false, width: 160,
dataSource: data, title: '操作',
actionColumn: { dataIndex: 'action',
width: 160, // slots: { customRender: 'action' },
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
scroll: { y: '100%' },
pagination: false,
});
function handleEdit(record: EditRecordRow) {
record.onEdit?.(true);
}
function handleCancel(record: EditRecordRow) {
record.onEdit?.(false);
if (record.isNew) {
const data = getDataSource();
const index = data.findIndex((item) => item.key === record.key);
data.splice(index, 1);
}
}
function handleSave(record: EditRecordRow) {
record.onEdit?.(false, true);
}
function handleEditChange(data: Recordable) {
console.log(data);
}
function handleAdd() {
const data = getDataSource();
const addRow: EditRecordRow = {
name: '',
no: '',
dept: '',
editable: true,
isNew: true,
key: `${Date.now()}`,
};
data.push(addRow);
}
function createActions(record: EditRecordRow): ActionItem[] {
if (!record.editable) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
label: '删除',
},
];
}
return [
{
label: '保存',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
popConfirm: {
title: '是否取消编辑',
confirm: handleCancel.bind(null, record),
},
},
];
}
return {
registerTable,
handleEdit,
createActions,
handleAdd,
getDataSource,
handleEditChange,
};
}, },
scroll: { y: '100%' },
pagination: false,
}); });
function handleEdit(record: EditRecordRow) {
record.onEdit?.(true);
}
function handleCancel(record: EditRecordRow) {
record.onEdit?.(false);
if (record.isNew) {
const data = getDataSource();
const index = data.findIndex((item) => item.key === record.key);
data.splice(index, 1);
}
}
function handleSave(record: EditRecordRow) {
record.onEdit?.(false, true);
}
function handleEditChange(data: Recordable) {
console.log(data);
}
function handleAdd() {
const data = getDataSource();
const addRow: EditRecordRow = {
name: '',
no: '',
dept: '',
editable: true,
isNew: true,
key: `${Date.now()}`,
};
data.push(addRow);
}
function createActions(record: EditRecordRow): ActionItem[] {
if (!record.editable) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
label: '删除',
},
];
}
return [
{
label: '保存',
onClick: handleSave.bind(null, record),
},
{
label: '取消',
popConfirm: {
title: '是否取消编辑',
confirm: handleCancel.bind(null, record),
},
},
];
}
</script> </script>

2
src/views/demo/page/form/high/data.ts
View File

@ -1,4 +1,4 @@
import { FormSchema } from '/@/components/Form'; import { FormSchema } from '@/components/Form';
const basicOptions: LabelValueOptions = [ const basicOptions: LabelValueOptions = [
{ {

80
src/views/demo/page/form/high/index.vue
View File

@ -4,67 +4,63 @@
title="高级表单" title="高级表单"
content=" 高级表单常见于一次性输入和提交大批量数据的场景。" content=" 高级表单常见于一次性输入和提交大批量数据的场景。"
> >
<a-card title="仓库管理" :bordered="false"> <Card title="仓库管理" :bordered="false">
<BasicForm @register="register" /> <BasicForm @register="register" />
</a-card> </Card>
<a-card title="任务管理" :bordered="false" class="!mt-5"> <Card title="任务管理" :bordered="false" class="!mt-5">
<BasicForm @register="registerTask" /> <BasicForm @register="registerTask" />
</a-card> </Card>
<a-card title="成员管理" :bordered="false" class="!mt-5"> <Card title="成员管理" :bordered="false" class="!mt-5">
<PersonTable ref="tableRef" /> <PersonTable ref="tableRef" />
</a-card> </Card>
<template #rightFooter> <template #rightFooter>
<a-button type="primary" @click="submitAll"> 提交 </a-button> <a-button type="primary" @click="submitAll"> 提交 </a-button>
</template> </template>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { BasicForm, useForm } from '/@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import PersonTable from './PersonTable.vue'; import PersonTable from './PersonTable.vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '@/components/Page';
import { schemas, taskSchemas } from './data'; import { schemas, taskSchemas } from './data';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
export default defineComponent({ defineOptions({ name: 'FormHightPage' });
name: 'FormHightPage',
components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
setup() {
const tableRef = ref<{ getDataSource: () => any } | null>(null);
const [register, { validate }] = useForm({ const tableRef = ref<{ getDataSource: () => any } | null>(null);
layout: 'vertical',
baseColProps: {
span: 6,
},
schemas: schemas,
showActionButtonGroup: false,
});
const [registerTask, { validate: validateTaskForm }] = useForm({ const [register, { validate }] = useForm({
layout: 'vertical', layout: 'vertical',
baseColProps: { baseColProps: {
span: 6, span: 6,
}, },
schemas: taskSchemas, schemas: schemas,
showActionButtonGroup: false, showActionButtonGroup: false,
}); });
async function submitAll() { const [registerTask, { validate: validateTaskForm }] = useForm({
try { layout: 'vertical',
if (tableRef.value) { baseColProps: {
console.log('table data:', tableRef.value.getDataSource()); span: 6,
} },
schemas: taskSchemas,
showActionButtonGroup: false,
});
const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]); async function submitAll() {
console.log('form data:', values, taskValues); try {
} catch (error) {} if (tableRef.value) {
console.log('table data:', tableRef.value.getDataSource());
} }
return { register, registerTask, submitAll, tableRef }; const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
}, console.log('form data:', values, taskValues);
}); } catch (error) {
console.log(error);
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.high-form { .high-form {

72
src/views/demo/page/form/step/Step1.vue
View File

@ -3,17 +3,17 @@
<div class="step1-form"> <div class="step1-form">
<BasicForm @register="register"> <BasicForm @register="register">
<template #fac="{ model, field }"> <template #fac="{ model, field }">
<a-input-group compact> <Input.Group compact>
<a-select v-model:value="model['pay']" class="pay-select"> <Select v-model:value="model['pay']" class="pay-select">
<a-select-option value="zfb"> 支付宝 </a-select-option> <Select.Option value="zfb"> 支付宝 </Select.Option>
<a-select-option value="yl"> 银联 </a-select-option> <Select.Option value="yl"> 银联 </Select.Option>
</a-select> </Select>
<a-input class="pay-input" v-model:value="model[field]" /> <a-input class="pay-input" v-model:value="model[field]" />
</a-input-group> </Input.Group>
</template> </template>
</BasicForm> </BasicForm>
</div> </div>
<a-divider /> <Divider />
<h3>说明</h3> <h3>说明</h3>
<h4>转账到支付宝账户</h4> <h4>转账到支付宝账户</h4>
<p> <p>
@ -26,49 +26,35 @@
</p> </p>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicForm, useForm } from '@/components/Form';
import { BasicForm, useForm } from '/@/components/Form';
import { step1Schemas } from './data'; import { step1Schemas } from './data';
import { Select, Input, Divider } from 'ant-design-vue'; import { Select, Input, Divider } from 'ant-design-vue';
export default defineComponent({ const emit = defineEmits(['next']);
components: {
BasicForm,
[Select.name]: Select,
ASelectOption: Select.Option,
[Input.name]: Input,
[Input.Group.name]: Input.Group,
[Divider.name]: Divider,
},
emits: ['next'],
setup(_, { emit }) {
const [register, { validate }] = useForm({
labelWidth: 100,
schemas: step1Schemas,
actionColOptions: {
span: 14,
},
showResetButton: false,
submitButtonOptions: {
text: '下一步',
},
submitFunc: customSubmitFunc,
});
async function customSubmitFunc() { const [register, { validate }] = useForm({
try { labelWidth: 100,
const values = await validate(); schemas: step1Schemas,
emit('next', values); actionColOptions: {
} catch (error) { span: 14,
//
}
}
return { register };
}, },
showResetButton: false,
submitButtonOptions: {
text: '下一步',
},
submitFunc: customSubmitFunc,
}); });
async function customSubmitFunc() {
try {
const values = await validate();
emit('next', values);
} catch (error) {
//
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.step1 { .step1 {

117
src/views/demo/page/form/step/Step2.vue
View File

@ -1,78 +1,61 @@
<template> <template>
<div class="step2"> <div class="w-120 m-auto">
<a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon /> <Alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
<a-descriptions :column="1" class="mt-5"> <Descriptions :column="1" class="mt-5">
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item> <Descriptions.Item label="付款账户"> ant-design@alipay.com </Descriptions.Item>
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item> <Descriptions.Item label="收款账户"> test@example.com </Descriptions.Item>
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item> <Descriptions.Item label="收款人姓名"> Vben </Descriptions.Item>
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item> <Descriptions.Item label="转账金额"> 500元 </Descriptions.Item>
</a-descriptions> </Descriptions>
<a-divider /> <Divider />
<BasicForm @register="register" /> <BasicForm @register="register" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { BasicForm, useForm } from '@/components/Form';
import { BasicForm, useForm } from '/@/components/Form';
import { step2Schemas } from './data'; import { step2Schemas } from './data';
import { Alert, Divider, Descriptions } from 'ant-design-vue'; import { Alert, Divider, Descriptions } from 'ant-design-vue';
export default defineComponent({ const emit = defineEmits(['next', 'prev']);
components: {
BasicForm, const [register, { validate, setProps }] = useForm({
[Alert.name]: Alert, labelWidth: 80,
[Divider.name]: Divider, schemas: step2Schemas,
[Descriptions.name]: Descriptions, actionColOptions: {
[Descriptions.Item.name]: Descriptions.Item, span: 14,
}, },
emits: ['next', 'prev'], resetButtonOptions: {
setup(_, { emit }) { text: '上一步',
const [register, { validate, setProps }] = useForm({
labelWidth: 80,
schemas: step2Schemas,
actionColOptions: {
span: 14,
},
resetButtonOptions: {
text: '上一步',
},
submitButtonOptions: {
text: '提交',
},
resetFunc: customResetFunc,
submitFunc: customSubmitFunc,
});
async function customResetFunc() {
emit('prev');
}
async function customSubmitFunc() {
try {
const values = await validate();
setProps({
submitButtonOptions: {
loading: true,
},
});
setTimeout(() => {
setProps({
submitButtonOptions: {
loading: false,
},
});
emit('next', values);
}, 1500);
} catch (error) {}
}
return { register };
}, },
submitButtonOptions: {
text: '提交',
},
resetFunc: customResetFunc,
submitFunc: customSubmitFunc,
}); });
</script>
<style lang="less" scoped> async function customResetFunc() {
.step2 { emit('prev');
width: 450px;
margin: 0 auto;
} }
</style>
async function customSubmitFunc() {
try {
const values = await validate();
setProps({
submitButtonOptions: {
loading: true,
},
});
setTimeout(() => {
setProps({
submitButtonOptions: {
loading: false,
},
});
emit('next', values);
}, 1500);
} catch (error) {
console.error(error);
}
}
</script>

53
src/views/demo/page/form/step/Step3.vue
View File

@ -1,50 +1,23 @@
<template> <template>
<div class="step3"> <div class="w-150 m-auto">
<a-result status="success" title="操作成功" sub-title="预计两小时内到账"> <Result status="success" title="操作成功" sub-title="预计两小时内到账">
<template #extra> <template #extra>
<a-button type="primary" @click="redo"> 再转一笔 </a-button> <a-button type="primary" @click="emit('redo')"> 再转一笔 </a-button>
<a-button> 查看账单 </a-button> <a-button> 查看账单 </a-button>
</template> </template>
</a-result> </Result>
<div class="desc-wrap"> <div class="mt-6 px-6 py-8 bg-white">
<a-descriptions :column="1" class="mt-5"> <Descriptions :column="1" class="mt-5">
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item> <Descriptions.Item label="付款账户"> ant-design@alipay.com </Descriptions.Item>
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item> <Descriptions.Item label="收款账户"> test@example.com </Descriptions.Item>
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item> <Descriptions.Item label="收款人姓名"> Vben </Descriptions.Item>
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item> <Descriptions.Item label="转账金额"> 500元 </Descriptions.Item>
</a-descriptions> </Descriptions>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { Result, Descriptions } from 'ant-design-vue'; import { Result, Descriptions } from 'ant-design-vue';
export default defineComponent({ const emit = defineEmits(['redo']);
components: {
[Result.name]: Result,
[Descriptions.name]: Descriptions,
[Descriptions.Item.name]: Descriptions.Item,
},
emits: ['redo'],
setup(_, { emit }) {
return {
redo: () => {
emit('redo');
},
};
},
});
</script> </script>
<style lang="less" scoped>
.step3 {
width: 600px;
margin: 0 auto;
}
.desc-wrap {
margin-top: 24px;
padding: 24px 40px;
background-color: @background-color-light;
}
</style>

2
src/views/demo/page/form/step/data.tsx
View File

@ -1,4 +1,4 @@
import { FormSchema } from '/@/components/Form'; import { FormSchema } from '@/components/Form';
export const step1Schemas: FormSchema[] = [ export const step1Schemas: FormSchema[] = [
{ {

Some files were not shown because too many files have changed in this diff Show More