Skip to content

B
basic-vue-admin
提交 45a8eb97 作者: vben
操作

refactor(dashboard): change to setup syntax

上级 2dd3d854
正在显示 包含 57 行增加 和 162 行删除
package.json
......@@ -74,10 +74,10 @@
"@types/fs-extra": "^9.0.12",
"@types/inquirer": "^7.3.3",
"@types/intro.js": "^3.0.2",
"@types/jest": "^27.0.0",
"@types/jest": "^27.0.1",
"@types/lodash-es": "^4.17.4",
"@types/mockjs": "^1.0.4",
"@types/node": "^16.6.0",
"@types/node": "^16.6.1",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.1",
"@types/qs": "^6.9.7",
......@@ -134,7 +134,7 @@
"vite-plugin-theme": "^0.8.1",
"vite-plugin-windicss": "^1.2.7",
"vue-eslint-parser": "^7.10.0",
"vue-tsc": "^0.2.2"
"vue-tsc": "^0.2.3"
},
"resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
......
src/views/dashboard/analysis/components/GrowCard.vue
......@@ -26,18 +26,9 @@
</template>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { CountTo } from '/@/components/CountTo/index';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';
export default defineComponent({
components: { CountTo, Tag, Card, Icon },
setup() {
return { growCardList };
},
});
</script>
src/views/dashboard/analysis/components/SalesProductPie.vue
......@@ -3,15 +3,12 @@
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
......@@ -21,8 +18,8 @@
type: String as PropType<string>,
default: '300px',
},
},
setup(props) {
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
......@@ -63,7 +60,4 @@
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/SiteAnalysis.vue
......@@ -13,17 +13,12 @@
</p>
</Card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { Card } from 'ant-design-vue';
import VisitAnalysis from './VisitAnalysis.vue';
import VisitAnalysisBar from './VisitAnalysisBar.vue';
export default defineComponent({
components: { Card, VisitAnalysis, VisitAnalysisBar },
setup() {
const activeKey = ref('tab1');
const tabListTitle = [
......@@ -40,7 +35,4 @@
function onTabChange(key) {
activeKey.value = key;
}
return { tabListTitle, activeKey, onTabChange };
},
});
</script>
src/views/dashboard/analysis/components/VisitAnalysis.vue
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
defineProps({
...basicProps,
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
......@@ -80,8 +79,8 @@
{
smooth: true,
data: [
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
22222, 11111, 4000, 2000, 500, 333, 222, 111,
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222,
11111, 4000, 2000, 500, 333, 222, 111,
],
type: 'line',
areaStyle: {},
......@@ -92,8 +91,8 @@
{
smooth: true,
data: [
33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
390, 198, 60, 30, 22, 11,
33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
198, 60, 30, 22, 11,
],
type: 'line',
areaStyle: {},
......@@ -104,7 +103,4 @@
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/VisitAnalysisBar.vue
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
defineProps({
...basicProps,
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
tooltip: {
......@@ -56,7 +55,4 @@
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/VisitRadar.vue
......@@ -3,15 +3,12 @@
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
......@@ -21,8 +18,8 @@
type: String as PropType<string>,
default: '300px',
},
},
setup(props) {
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
......@@ -100,7 +97,4 @@
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/VisitSource.vue
......@@ -3,15 +3,11 @@
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
......@@ -21,8 +17,7 @@
type: String as PropType<string>,
default: '300px',
},
},
setup(props) {
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
......@@ -82,7 +77,4 @@
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/index.vue
......@@ -2,38 +2,24 @@
<div class="p-4">
<GrowCard :loading="loading" class="enter-y" />
<SiteAnalysis class="!my-4 enter-y" :loading="loading" />
<div class="md:flex enter-y">
<VisitRadar class="md:w-1/3 w-full" :loading="loading" />
<VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
<SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import GrowCard from './components/GrowCard.vue';
import SiteAnalysis from './components/SiteAnalysis.vue';
import VisitSource from './components/VisitSource.vue';
import VisitRadar from './components/VisitRadar.vue';
import SalesProductPie from './components/SalesProductPie.vue';
export default defineComponent({
components: {
GrowCard,
SiteAnalysis,
VisitRadar,
VisitSource,
SalesProductPie,
},
setup() {
const loading = ref(true);
setTimeout(() => {
loading.value = false;
}, 1500);
return { loading };
},
});
</script>
src/views/dashboard/workbench/components/DynamicInfo.vue
......@@ -3,7 +3,7 @@
<template #extra>
<a-button type="link" size="small">更多</a-button>
</template>
<List item-layout="horizontal" :data-source="items">
<List item-layout="horizontal" :data-source="dynamicInfoItems">
<template #renderItem="{ item }">
<ListItem>
<ListItemMeta>
......@@ -21,18 +21,11 @@
</List>
</Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { Card, List } from 'ant-design-vue';
import { dynamicInfoItems } from './data';
import headerImg from '/@/assets/images/header.jpg';
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Card, List, ListItem: List.Item, ListItemMeta: List.Item.Meta, Icon },
setup() {
return { items: dynamicInfoItems, headerImg };
},
});
const ListItem = List.Item;
const ListItemMeta = List.Item.Meta;
</script>
src/views/dashboard/workbench/components/ProjectCard.vue
......@@ -21,7 +21,6 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { groupItems } from './data';
......
src/views/dashboard/workbench/components/QuickNav.vue
<template>
<Card title="快捷导航" v-bind="$attrs">
<template v-for="item in items" :key="item">
<template v-for="item in navItems" :key="item">
<CardGrid>
<span class="flex flex-col items-center">
<Icon :icon="item.icon" :color="item.color" size="20" />
......@@ -10,17 +10,10 @@
</template>
</Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { navItems } from './data';
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Card, CardGrid: Card.Grid, Icon },
setup() {
return { items: navItems };
},
});
const CardGrid = Card.Grid;
</script>
src/views/dashboard/workbench/components/SaleRadar.vue
......@@ -3,15 +3,12 @@
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
......@@ -21,8 +18,8 @@
type: String as PropType<string>,
default: '400px',
},
},
setup(props) {
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
......@@ -100,7 +97,4 @@
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/workbench/components/WorkbenchHeader.vue
......@@ -22,19 +22,12 @@
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import { Avatar } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import headerImg from '/@/assets/images/header.jpg';
export default defineComponent({
components: { Avatar },
setup() {
const userStore = useUserStore();
const userinfo = computed(() => userStore.getUserInfo);
return { userinfo, headerImg };
},
});
</script>
src/views/dashboard/workbench/index.vue
......@@ -18,9 +18,8 @@
</div>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { Card } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page';
import WorkbenchHeader from './components/WorkbenchHeader.vue';
......@@ -29,26 +28,9 @@
import DynamicInfo from './components/DynamicInfo.vue';
import SaleRadar from './components/SaleRadar.vue';
export default defineComponent({
components: {
PageWrapper,
WorkbenchHeader,
ProjectCard,
QuickNav,
DynamicInfo,
SaleRadar,
Card,
},
setup() {
const loading = ref(true);
setTimeout(() => {
loading.value = false;
}, 1500);
return {
loading,
};
},
});
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论