|
|
@@ -1,9 +1,114 @@
|
|
|
<template>
|
|
|
- <div>11</div>
|
|
|
+ <hc-new-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="w-40">
|
|
|
+ <el-select v-model="searchForm.sysId" filterable clearable block placeholder="选择所属系统">
|
|
|
+ <el-option v-for="item in clinets" :key="item.id" :label="item.clientId" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="ml-3 w-60">
|
|
|
+ <hc-search-input v-model="searchForm.name" placeholder="请输入菜单名称" @search="searchClick" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #extra>
|
|
|
+ <el-button hc-btn type="primary">新增</el-button>
|
|
|
+ <el-button hc-btn type="danger">删除</el-button>
|
|
|
+ </template>
|
|
|
+ <hc-table
|
|
|
+ ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
|
|
|
+ :is-index="false" is-new is-check :check-style="{ width: 29 }" lazy :load="tableLoad"
|
|
|
+ @selection-change="tableCheckChange"
|
|
|
+ >
|
|
|
+ <template #sysId="{ row }">
|
|
|
+ {{ getSystemNmae(row.sysId) }}
|
|
|
+ </template>
|
|
|
+ <template #category="{ row }">
|
|
|
+ {{ row.category === 1 ? '菜单' : '按钮' }}
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-link type="warning">修改</el-link>
|
|
|
+ <el-link type="success">新增子项</el-link>
|
|
|
+ <el-link type="primary">复制</el-link>
|
|
|
+ <el-link type="danger">删除</el-link>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ </hc-new-card>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { onActivated, ref } from 'vue'
|
|
|
+import mainApi from '~api/system/menu'
|
|
|
+import { getArrValue } from 'js-fast-way'
|
|
|
+import { getClinetAll } from '~api/other'
|
|
|
|
|
|
+//激活
|
|
|
+onActivated(() => {
|
|
|
+ getClinetAllApi()
|
|
|
+ getTableData()
|
|
|
+})
|
|
|
+
|
|
|
+//获取所有系统
|
|
|
+const clinets = ref([])
|
|
|
+const getClinetAllApi = async () => {
|
|
|
+ const { data } = await getClinetAll()
|
|
|
+ clinets.value = getArrValue(data)
|
|
|
+}
|
|
|
+
|
|
|
+//获取系统名称
|
|
|
+const getSystemNmae = (id) => {
|
|
|
+ const item = clinets.value.find((item) => item.id === id)
|
|
|
+ return item ? item.clientId : ''
|
|
|
+}
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({
|
|
|
+ sysId: null, name: null,
|
|
|
+})
|
|
|
+
|
|
|
+//搜索
|
|
|
+const searchClick = () => {
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+
|
|
|
+//表格数据
|
|
|
+const tableRef = ref(null)
|
|
|
+const tableColumn = ref([
|
|
|
+ { key: 'name', name: '菜单名称' },
|
|
|
+ { key: 'sysId', name: '所属系统' },
|
|
|
+ { key: 'path', name: '路由地址' },
|
|
|
+ { key: 'code', name: '菜单编号' },
|
|
|
+ { key: 'category', name: '菜单类型', width: 90, align: 'center' },
|
|
|
+ { key: 'sort', name: '排序', width: 80, align: 'center' },
|
|
|
+ { key: 'action', name: '操作', width: 200, align: 'center' },
|
|
|
+])
|
|
|
+
|
|
|
+//获取表格数据
|
|
|
+const tableLoading = ref(false)
|
|
|
+const tableData = ref([{}])
|
|
|
+const getTableData = async () => {
|
|
|
+ tableData.value = []
|
|
|
+ tableLoading.value = true
|
|
|
+ const { data } = await mainApi.getLazyList({
|
|
|
+ ...searchForm.value,
|
|
|
+ parentId: 0,
|
|
|
+ })
|
|
|
+ tableData.value = getArrValue(data)
|
|
|
+ tableLoading.value = false
|
|
|
+}
|
|
|
+
|
|
|
+//懒加载表格
|
|
|
+const tableLoad = async (row, node, resolve) => {
|
|
|
+ const { data } = await mainApi.getLazyList({
|
|
|
+ ...searchForm.value,
|
|
|
+ parentId: row.id,
|
|
|
+ })
|
|
|
+ resolve(getArrValue(data))
|
|
|
+}
|
|
|
+
|
|
|
+//表格被选择
|
|
|
+const tableCheckChange = () => {
|
|
|
+
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
