77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<template>
|
|
<!-- 面包屑 -->
|
|
<el-breadcrumb>
|
|
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
|
|
<el-breadcrumb-item to="/system/menu">菜单管理接口</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<!-- 数据表格 -->
|
|
<DataTable
|
|
ref="tableRef"
|
|
style="width: 100%"
|
|
row-key="menu_guid"
|
|
:onSelectionChange="data => (selectionData = data)"
|
|
:column="column"
|
|
:params="params"
|
|
:pagination="false"
|
|
:request="params => getMenuApiTree(params)"
|
|
>
|
|
<template #menu_api_url="scope">
|
|
<template v-for="(item, index) in scope.row.menu_api_url" :key="item">
|
|
<el-tag v-if="index <= 2">
|
|
{{ item }}
|
|
</el-tag>
|
|
</template>
|
|
</template>
|
|
<template #chaoz="scope">
|
|
<el-button
|
|
size="small"
|
|
@click="(currentData = scope.row), (viewApiDialogVisible = true)"
|
|
>
|
|
绑定接口
|
|
</el-button>
|
|
</template>
|
|
</DataTable>
|
|
<!-- 查看接口 -->
|
|
<ViewApiDialog
|
|
v-model="viewApiDialogVisible"
|
|
:data="currentData"
|
|
:done="() => tableRef.reload()"
|
|
></ViewApiDialog>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { getMenuApiTree } from '~/service/menu';
|
|
import ViewApiDialog from './components/ViewApiDialog.vue';
|
|
|
|
const tableRef = ref();
|
|
const viewApiDialogVisible = ref(false);
|
|
const currentData = ref({});
|
|
const params = reactive({});
|
|
const column = [
|
|
{
|
|
fixed: true,
|
|
type: 'selection'
|
|
},
|
|
{
|
|
prop: 'menu_name',
|
|
label: '名称',
|
|
width: '250'
|
|
},
|
|
{
|
|
prop: 'menu_url',
|
|
label: '路由',
|
|
width: '250'
|
|
},
|
|
{
|
|
prop: 'menu_api_url',
|
|
label: '接口',
|
|
width: '300'
|
|
},
|
|
{
|
|
label: '操作',
|
|
prop: 'chaoz',
|
|
width: '150'
|
|
}
|
|
];
|
|
</script>
|