菜单列表迁移

src/mixins/ListMixin.js

@@ -1,6 +1,6 @@
 import { get, deleteData } from "@/server/api.js";
 export const ListMixin = {
-	data () {
+	data() {
 		return {
 			isShowDialog: '',
 			item: null,
@@ -9,43 +9,44 @@ export const ListMixin = {
 				pageSize: 10,
 				total: 0,
 			},
-			dataList: [], // 表格数据
+			queryParams:{},
+			tableData: [], // 表格数据
 			loading: true, // 表格loading加载
 		}
 	},
-	created () {
+	created() {
 		this.getList()
 	},
 	methods: {
 		// 查询分页列表
-		getList () {
+		getList() {
 			this.loading = true
-			get(this.url.queryListUrl, this.pagination)
-			.then((res) => {
-				if (res.code === 200) {
-					this.dataList = res.data.records || []
-					this.pagination.total = res.data.count
+			get(this.queryTableDataUrl, {...this.pagination, ...this.queryParams})
+				.then(({code, data=[], count=0}) => {
+					if (code === 200) {
+						this.tableData = data || []
+						this.pagination.total = count
+						this.loading = false
+					} else {
+						this.loading = false
+					}
+				}).catch(() => {
 					this.loading = false
-				} else {
-					this.loading = false
-				}
-			}).catch (() => {
-				this.loading = false
-			})
+				})
 		},
 		// 监听回调
-		completeCallBack (data) {
+		completeCallBack(data) {
 			this.isShowDialog = ''
 			this.item = null
 			this.getList()
 		},
 		// 新增按钮操作
-		handleAdd () {
+		handleAdd() {
 			this.isShowDialog = 'edit'
 			this.item = null
 		},
 		// 修改按钮操作
-		handleUpdate (row) {
+		handleUpdate(row) {
 			this.isShowDialog = 'edit'
 			this.item = row
 		},
@@ -54,7 +55,7 @@ export const ListMixin = {
 			this.isShowDialog = data
 		},
 		// 删除数据
-		delHanle (keyName, url) {
+		delHanle(keyName, url) {
 			this.$confirm('是否确认删除"' + keyName + '"的数据项?', '警告', {
 				confirmButtonText: '确定',
 				cancelButtonText: '取消',

src/server/system/menu.js

@@ -0,0 +1,7 @@
+import { post, put, get } from "../api";
+// 新增菜单
+export const addMenu = (params) =>post('/admin/menu/addmenu', params);
+// 修改菜单
+export const updateMenu = (params) =>put('/admin/menu/upmenu', params);
+// 查询菜单详情
+export const getMenuDetails = (params) =>get('/admin/menu/menubyid', params);

src/views/system/menu/index.vue

@@ -1,25 +1,142 @@
 <template>
   <div>
     <SearchTemplate>
-      搜索
+      <el-form :inline="true">
+        <el-form-item label="菜单名称">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="请输入菜单名称"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            icon="el-icon-search"
+            size="mini"
+            class="search-button-style"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button
+            class="reset-button-style"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            >新增</el-button
+          >
+        </el-form-item>
+      </el-form>
     </SearchTemplate>
     <ContentContainer>
-      菜单管理界面
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        row-key="menu_id"
+        border
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column
+          prop="title"
+          label="菜单名称"
+          :show-overflow-tooltip="true"
+          width="180px"
+        />
+        <el-table-column prop="icon" label="图标" align="center" width="100px">
+          <template #default="scope">
+            <svg-icon :icon-class="scope.row.icon" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="path" label="路径" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <span v-if="scope.row.menu_type == 'A'">{{ scope.row.path }}</span>
+            <span v-else>{{ scope.row.component }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createtime"
+          width="180"
+        >
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createtime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="180"
+        >
+          <template #default="scope">
+            <el-button
+              class="edit-button-style"
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              >修改</el-button
+            >
+            <el-button
+              class="edit-button-style"
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-show="pagination.total > 0"
+        v-model:pagination="pagination"
+        @change="getList"
+      />
     </ContentContainer>
   </div>
 </template>
 <script>
-import SearchTemplate from "@/components/SearchTemplate.vue"
-import ContentContainer from "@/components/ContentContainer.vue"
+import SearchTemplate from "@/components/SearchTemplate.vue";
+import ContentContainer from "@/components/ContentContainer.vue";
+import { ListMixin } from "@/mixins/ListMixin";
+import { getMenuDetails } from '@/server/system/menu'
 export default {
-  components:{
+  components: {
     SearchTemplate,
-    ContentContainer
+    ContentContainer,
   },
-  data(){
-    return{
-
-    }
+  mixins: [ListMixin],
+  data() {
+    return {
+      queryTableDataUrl:'/admin/menu/menulist',
+      loading: false,
+    };
+  },
+  methods: {
+    // 搜索按钮操作
+    handleQuery() {
+      this.pagination.pageNumber=1;
+      this.getList();
+    },
+    // 新增菜单
+    handleAdd() {},
+    // 修改
+    handleUpdate(item) {},
+    // 删除
+    handleDelete(item) {},
+  },
+  mounted(){
+    getMenuDetails({id:261}).then(res=>{
+      debugger
+    })
   }
+};
+</script>
+<style lang="less" scoped>
+.el-form-item {
+  margin-bottom: 0;
 }
-</script>
+</style>