little: 一点小修改
This commit is contained in:
wf
parent
7d525c1a19
commit
0af361ea04
@ -1,11 +1,13 @@
|
|||||||
|
import { App } from "vue";
|
||||||
import antiShake from "@/directives/modules/anti-shake";
|
import antiShake from "@/directives/modules/anti-shake";
|
||||||
import throttle from "@/directives/modules/throttle";
|
import throttle from "@/directives/modules/throttle";
|
||||||
|
|
||||||
// 定义安装函数
|
// 定义安装函数
|
||||||
// install 函数是一个对象中的方法，其作用是将一系列指令对象安装到 Vue 应用实例中，它自带两个参数：app 和 options
|
// install 函数是一个对象中的方法，其作用是将一系列指令对象安装到 Vue 应用实例中，它自带两个参数：app 和 options
|
||||||
// app就是vue实例，options则是安装函数的参数(可选)
|
// app就是vue实例，options则是安装函数的参数(可选)
|
||||||
// install 方法的定义就插件对象，install 方法会在引入插件时自动被 vue 调用，并传参 vue 实例和 options
|
// install 方法的定义就插件对象，install 方法会在引入插件时自动被 vue 调用，并传参 vue 实例和 options
|
||||||
const directives = {
|
const directives = {
|
||||||
install(app: any) {
|
install(app: App<Element>) {
|
||||||
// 将一系列自定义指令对象安装到 Vue 应用实例中
|
// 将一系列自定义指令对象安装到 Vue 应用实例中
|
||||||
app.directive("antiShake", antiShake);
|
app.directive("antiShake", antiShake);
|
||||||
app.directive("throttle", throttle);
|
app.directive("throttle", throttle);
|
||||||
|
|||||||
@ -1,135 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dc-page">
|
|
||||||
<a-row :gutter="16" class="bottom-gap">
|
|
||||||
<a-col :span="6">
|
|
||||||
<a-space>
|
|
||||||
<a-button type="primary">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus />
|
|
||||||
</template>
|
|
||||||
<template #default>新增</template>
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" status="danger">
|
|
||||||
<template #icon>
|
|
||||||
<icon-delete />
|
|
||||||
</template>
|
|
||||||
<template #default>删除</template>
|
|
||||||
</a-button>
|
|
||||||
<a-button>
|
|
||||||
<template #icon>
|
|
||||||
<icon-download />
|
|
||||||
</template>
|
|
||||||
<template #default>导出</template>
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="6" :offset="12">
|
|
||||||
<a-form :model="form" :style="{ width: '100%' }" auto-label-width>
|
|
||||||
<a-form-item field="name">
|
|
||||||
<a-space>
|
|
||||||
<a-input v-model="form.name" placeholder="请输入搜索关键词" />
|
|
||||||
<a-button type="primary" status="success">
|
|
||||||
<template #icon>
|
|
||||||
<icon-search />
|
|
||||||
</template>
|
|
||||||
<template #default>搜索</template>
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<a-table
|
|
||||||
row-key="key"
|
|
||||||
size="small"
|
|
||||||
:bordered="{
|
|
||||||
cell: true
|
|
||||||
}"
|
|
||||||
:loading="loading"
|
|
||||||
:data="list"
|
|
||||||
>
|
|
||||||
<template #columns>
|
|
||||||
<a-table-column title="菜单名称" :width="180">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
{{ $t(`language.${record.meta.title}`) }}
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
<a-table-column title="图标" align="center" :width="100">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
<MenuItemIcon :svg-icon="record.meta.svgIcon" :icon="record.meta.icon" />
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
<a-table-column title="排序" align="center" :width="100">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
{{ record.meta.sort }}
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
<a-table-column title="权限标识" />
|
|
||||||
<a-table-column title="组件路径" />
|
|
||||||
<a-table-column title="状态" :width="100">
|
|
||||||
<template #cell="{ record }">
|
|
||||||
<a-space>
|
|
||||||
<a-tag size="small" color="red" v-if="record.hide">禁用</a-tag>
|
|
||||||
<a-tag size="small" color="green" v-else>启用</a-tag>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
<a-table-column title="创建时间" />
|
|
||||||
<a-table-column title="操作" :width="200">
|
|
||||||
<template #cell="cell">
|
|
||||||
<a-space>
|
|
||||||
<a-button size="mini" type="primary">修改</a-button>
|
|
||||||
<a-button size="mini">新增</a-button>
|
|
||||||
<a-popconfirm content="确定删除这条数据吗?" type="warning">
|
|
||||||
<a-button size="mini" type="primary" status="danger" @click="onDelete(cell)">删除</a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
</a-table-column>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { dynamicRoutes } from "@/router/route.ts";
|
|
||||||
import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
|
|
||||||
|
|
||||||
const form = ref({
|
|
||||||
name: ""
|
|
||||||
});
|
|
||||||
|
|
||||||
// const onExpand = (rowKey: string | number) => {
|
|
||||||
// console.log("列展开", rowKey);
|
|
||||||
// };
|
|
||||||
|
|
||||||
const loading = ref(false);
|
|
||||||
const list = computed(() => {
|
|
||||||
if (dynamicRoutes.length > 0) {
|
|
||||||
return dynamicRoutes[0].children;
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const onDelete = (cell: any) => {
|
|
||||||
console.log("删除", cell);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.container-page {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: $padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-gap {
|
|
||||||
margin-bottom: $padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.arco-form-item) {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,193 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dc-page">
|
<div class="dc-page">菜单管理-敬请期待</div>
|
||||||
<a-row :gutter="16" class="bottom-gap">
|
|
||||||
<a-col :span="6">
|
|
||||||
<a-space>
|
|
||||||
<a-button type="primary">
|
|
||||||
<template #icon>
|
|
||||||
<icon-plus />
|
|
||||||
</template>
|
|
||||||
<template #default>新增</template>
|
|
||||||
</a-button>
|
|
||||||
<a-button type="primary" status="danger">
|
|
||||||
<template #icon>
|
|
||||||
<icon-delete />
|
|
||||||
</template>
|
|
||||||
<template #default>删除</template>
|
|
||||||
</a-button>
|
|
||||||
<a-button>
|
|
||||||
<template #icon>
|
|
||||||
<icon-download />
|
|
||||||
</template>
|
|
||||||
<template #default>导出</template>
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="6" :offset="12">
|
|
||||||
<a-form :model="form" :style="{ width: '100%' }" auto-label-width>
|
|
||||||
<a-form-item field="name">
|
|
||||||
<a-space>
|
|
||||||
<a-input v-model="form.name" placeholder="请输入搜索关键词" />
|
|
||||||
<a-button type="primary" status="success">
|
|
||||||
<template #icon>
|
|
||||||
<icon-search />
|
|
||||||
</template>
|
|
||||||
<template #default>搜索</template>
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<a-table :columns="columns" :data="list" :expandable="expandable">
|
|
||||||
<template #operation>
|
|
||||||
<a-space>
|
|
||||||
<a-button size="mini" type="primary">详情</a-button>
|
|
||||||
<a-button size="mini">修改</a-button>
|
|
||||||
<a-popconfirm content="确定删除这条数据吗?" type="warning">
|
|
||||||
<a-button size="mini" type="primary" status="danger">删除</a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
</a-space>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
import { dynamicRoutes } from "@/router/route.ts";
|
|
||||||
// import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
|
|
||||||
const expandable = reactive({
|
|
||||||
title: "展开",
|
|
||||||
width: 80,
|
|
||||||
expandedRowRender: record => {
|
|
||||||
if (record.key === "3") {
|
|
||||||
return `My Name is ${record.name}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const columns = [
|
<style lang="scss" scoped></style>
|
||||||
{
|
|
||||||
title: "菜单名称",
|
|
||||||
dataIndex: "title"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "图标",
|
|
||||||
dataIndex: "icon"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "排序",
|
|
||||||
dataIndex: "sort"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "权限标识",
|
|
||||||
dataIndex: "power"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "路由",
|
|
||||||
dataIndex: "path"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "组件路径",
|
|
||||||
dataIndex: "componentPath"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "组件名称",
|
|
||||||
dataIndex: "name"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "显示状态",
|
|
||||||
dataIndex: "hide"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "是否缓存",
|
|
||||||
dataIndex: "keepAlive"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "是否外链",
|
|
||||||
dataIndex: "link"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "是否内嵌",
|
|
||||||
dataIndex: "iframe"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
dataIndex: "operation",
|
|
||||||
slotName: "operation"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const data = reactive([
|
|
||||||
{
|
|
||||||
key: "1",
|
|
||||||
name: "Jane Doe",
|
|
||||||
salary: 23000,
|
|
||||||
address: "32 Park Road, London",
|
|
||||||
email: "jane.doe@example.com",
|
|
||||||
expand: "Expand Data"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "2",
|
|
||||||
name: "Alisa Ross",
|
|
||||||
salary: 25000,
|
|
||||||
address: "35 Park Road, London",
|
|
||||||
email: "alisa.ross@example.com"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "3",
|
|
||||||
name: "Kevin Sandra",
|
|
||||||
salary: 22000,
|
|
||||||
address: "31 Park Road, London",
|
|
||||||
email: "kevin.sandra@example.com"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "4",
|
|
||||||
name: "Ed Hellen",
|
|
||||||
salary: 17000,
|
|
||||||
address: "42 Park Road, London",
|
|
||||||
email: "ed.hellen@example.com"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "5",
|
|
||||||
name: "William Smith",
|
|
||||||
salary: 27000,
|
|
||||||
address: "62 Park Road, London",
|
|
||||||
email: "william.smith@example.com"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
// const loading = ref(false);
|
|
||||||
const list = computed(() => {
|
|
||||||
if (dynamicRoutes.length > 0) {
|
|
||||||
return dynamicRoutes[0].children;
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const form = ref({
|
|
||||||
name: ""
|
|
||||||
});
|
|
||||||
|
|
||||||
// const onDelete = (cell: any) => {
|
|
||||||
// console.log("删除", cell);
|
|
||||||
// };
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.container-page {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: $padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-gap {
|
|
||||||
margin-bottom: $padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.arco-form-item) {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user