xpz2018
8 months ago
9 changed files with 123 additions and 123 deletions
Split View
Diff Options
-
4src/components/Icon/Icon.vue
-
2src/components/OssUpload/src/index.vue
-
6src/views/clue/components/modal.vue
-
42src/views/clue/customer/data.ts
-
6src/views/clue/customer/index.vue
-
39src/views/sys/workbench/components/GrowCard.vue
-
4src/views/sys/workbench/components/WorkbenchHeader.vue
-
132src/views/sys/workbench/data.ts
-
11src/views/sys/workbench/index.vue
@ -0,0 +1,39 @@ |
|||
<template> |
|||
<div class="md:flex"> |
|||
<template v-for="(item, index) in growCardList" :key="item.title"> |
|||
<Card |
|||
size="small" |
|||
:loading="loading" |
|||
:title="item.title" |
|||
class="md:w-1/4 w-full !md:mt-0" |
|||
:class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }" |
|||
> |
|||
<template #extra> |
|||
<Tag :color="item.color">{{ item.action }}</Tag> |
|||
</template> |
|||
|
|||
<div class="py-4 px-4 flex justify-between items-center"> |
|||
<CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" /> |
|||
<Icon :icon="item.icon" :size="40" /> |
|||
</div> |
|||
|
|||
<div class="p-2 px-4 flex justify-between"> |
|||
<span>总{{ item.title }}</span> |
|||
<CountTo prefix="$" :startVal="1" :endVal="item.total" /> |
|||
</div> |
|||
</Card> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { CountTo } from '/@/components/CountTo' |
|||
import Icon from '/@/components/Icon/Icon.vue' |
|||
import { Tag, Card } from 'ant-design-vue' |
|||
import { growCardList } from '../data' |
|||
|
|||
defineProps({ |
|||
loading: { |
|||
type: Boolean, |
|||
}, |
|||
}) |
|||
</script> |
|||
@ -1,109 +1,43 @@ |
|||
import { BasicColumn, FormSchema } from '/@/components/Table'; |
|||
export interface GrowCardItem { |
|||
icon: string; |
|||
title: string; |
|||
value: number; |
|||
total: number; |
|||
color: string; |
|||
action: string; |
|||
} |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
export const growCardList: GrowCardItem[] = [ |
|||
{ |
|||
title: '菜单名称', |
|||
dataIndex: 'name', |
|||
width: 300, |
|||
align: 'left', |
|||
title: '访问数', |
|||
icon: 'visit-count|svg', |
|||
value: 2000, |
|||
total: 120000, |
|||
color: 'green', |
|||
action: '月', |
|||
}, |
|||
{ |
|||
title: '权限标识', |
|||
dataIndex: 'permission', |
|||
width: 180, |
|||
title: '成交额', |
|||
icon: 'total-sales|svg', |
|||
value: 20000, |
|||
total: 500000, |
|||
color: 'blue', |
|||
action: '月', |
|||
}, |
|||
{ |
|||
title: '路由地址', |
|||
dataIndex: 'path', |
|||
title: '下载数', |
|||
icon: 'download-count|svg', |
|||
value: 8000, |
|||
total: 120000, |
|||
color: 'orange', |
|||
action: '周', |
|||
}, |
|||
{ |
|||
title: '组件', |
|||
dataIndex: 'component', |
|||
}, |
|||
{ |
|||
title: '创建时间', |
|||
dataIndex: 'createTime', |
|||
width: 240, |
|||
title: '成交数', |
|||
icon: 'transaction|svg', |
|||
value: 5000, |
|||
total: 50000, |
|||
color: 'purple', |
|||
action: '年', |
|||
}, |
|||
]; |
|||
|
|||
const isDir = (type: string) => type === '1'; |
|||
const isMenu = (type: string) => type === '2'; |
|||
const isButton = (type: number) => type === 3; |
|||
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
// {
|
|||
// field: 'menuName',
|
|||
// label: '菜单名称',
|
|||
// component: 'Input',
|
|||
// colProps: { span: 8 },
|
|||
// },
|
|||
{ |
|||
field: 'status', |
|||
label: '状态', |
|||
component: 'Select', |
|||
componentProps: { |
|||
options: [ |
|||
{ label: '启用', value: '0' }, |
|||
{ label: '停用', value: '1' }, |
|||
], |
|||
}, |
|||
colProps: { span: 8 }, |
|||
}, |
|||
]; |
|||
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'type', |
|||
label: '菜单类型', |
|||
component: 'RadioButtonGroup', |
|||
defaultValue: 1, |
|||
componentProps: { |
|||
options: [ |
|||
{ label: '目录', value: 1 }, |
|||
{ label: '菜单', value: 2 }, |
|||
// { label: '按钮', value: '3' },
|
|||
], |
|||
}, |
|||
colProps: { lg: 24, md: 24 }, |
|||
}, |
|||
{ |
|||
field: 'name', |
|||
label: '菜单名称', |
|||
component: 'Input', |
|||
required: true, |
|||
}, |
|||
|
|||
{ |
|||
field: 'parentId', |
|||
label: '上级菜单', |
|||
component: 'TreeSelect', |
|||
componentProps: { |
|||
replaceFields: { |
|||
title: 'name', |
|||
value: 'id', |
|||
key: 'id', |
|||
}, |
|||
getPopupContainer: () => document.body, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'path', |
|||
label: '路由地址', |
|||
component: 'Input', |
|||
required: true, |
|||
ifShow: ({ values }) => !isButton(values.type), |
|||
}, |
|||
// {
|
|||
// field: 'component',
|
|||
// label: '组件路径',
|
|||
// component: 'Input',
|
|||
// ifShow: ({ values }) => isMenu(values.type),
|
|||
// },
|
|||
// {
|
|||
// field: 'permission',
|
|||
// label: '权限标识',
|
|||
// component: 'Input',
|
|||
// ifShow: ({ values }) => !isDir(values.type),
|
|||
// },
|
|||
]; |
|||
@ -1,9 +1,18 @@ |
|||
<template> |
|||
<div> |
|||
<WorkbenchHeader /> |
|||
<!-- <div class="p-4"> |
|||
<GrowCard :loading="loading" class="enter-y" /> |
|||
</div> --> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { nextTick } from 'vue'; |
|||
import { nextTick, ref } from 'vue'; |
|||
import WorkbenchHeader from './components/WorkbenchHeader.vue'; |
|||
import GrowCard from './components/GrowCard.vue'; |
|||
|
|||
const loading = ref(true); |
|||
setTimeout(() => { |
|||
loading.value = false; |
|||
}, 1000); |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save