删除121.vue

src/views/121.vue

-<template>
-  <div class="router">
-    <el-form>
-      <el-form-item>
-        <el-button type="primary" @click="handleAdd">新增</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table :data="tableData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
-      <el-table-column type="selection"></el-table-column>
-      <el-table-column v-for="i in tableColumn" :label="i.label" :prop="i.prop"></el-table-column>
-      <el-table-column label="操作">
-        <template #default="scope">
-          <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
-          <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope)">
-            <template #reference>
-              <el-button type="text">删除</el-button>
-            </template>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <MenuManageFormModules ref="formModules" :show="showDrawer" :title="title" @close-drawer="closeDrawer" @init="init"></MenuManageFormModules>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { getMenuTree, deleteMenu } from '@/services/api/menu/menuAPI'
-import useInstance from '@/hooks/useInstance';
-import MenuManageFormModules from './modules/menuManageFormModules.vue'
-//全局挂载global
-const { global } = useInstance();
-interface MenuTableColumns {
-  label: string;
-  prop: string;
-}
-const formModules = ref()
-const tableColumn = reactive<Array<MenuTableColumns>>([
-  {
-    label: '菜单名称',
-    prop: 'title',
-  },
-  {
-    label: '上级菜单',
-    prop: 'parentId',
-  },
-  {
-    label: '菜单类型',
-    prop: 'type',
-  },
-  {
-    label: 'icon',
-    prop: 'icon',
-  },
-  {
-    label: '组件',
-    prop: 'component',
-  },
-  {
-    label: '路径',
-    prop: 'path',
-  },
-  {
-    label: '排序',
-    prop: 'sortNo'
-  }
-])
-let tableData = reactive<Array<object>>([])
-let showDrawer = ref(false)
-let title = ref('')
-
-function init() {
-  getMenuTree().then((res) => {
-    if (res.code == 200) {
-      tableData.length = 0
-      for (let i in res.data) {
-        tableData.push(res.data[i])
-      }
-    }
-  })
-}
-
-//点击新增按钮
-function handleAdd() {
-  formModules.value.radio = 0
-  Object.keys(formModules.value.formData).forEach((item) => {
-    global.$objCoppy(formModules.value.formData, {}, item)
-  })
-  title.value = '新增'
-  showDrawer.value = true
-}
-
-//点击编辑按钮
-function handleEdit(scope:any) {
-  if(scope.row.parentId != '0'){
-    formModules.value.radio = 1
-  }else{
-    formModules.value.radio = 0
-  }
-  Object.keys(scope.row).forEach((item) => {
-    global.$objCoppy(formModules.value.formData, scope.row, item)
-  })
-  title.value = '编辑'
-  showDrawer.value = true
-}
-
-//点击删除按钮
-function handleDelete(scope:any) {
-  let param = {
-    id: scope.row.id
-  }
-  deleteMenu(param).then((res) => {
-    if (res.code == 200) {
-      init()
-    }
-  })
-}
-
-function closeDrawer(){
-  showDrawer.value = false
-}
-
-init()
-</script>
-<style>
-</style>
\ No newline at end of file