vue 表格及增删改查页面

标准表格页面

<template>
  <div class="menu">
    <div class="top">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="addMenu()"
        >新增菜单</el-button
      >
    </div>
    <div class="bottom">
      <el-table
        :data="menuList"
        height="100%"
        stripe
        v-loading="!menuList.length"
        element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <el-table-column prop="id" label="id" width="180"> </el-table-column
        ><el-table-column prop="name" label="菜单名称" width="220">
        </el-table-column>
        <el-table-column prop="parentId" label="parentId" width="180">
        </el-table-column>
        <el-table-column prop="path" label="路径"> </el-table-column>
        <el-table-column prop="action" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="detail(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button @click="edit(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button @click="del(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增及修改弹框 -->
    <el-dialog
      :title="
        dialogType === 'add'
          ? '新增菜单'
          : dialogType === 'update'
          ? '更新菜单'
          : '菜单详情'
      "
      :visible.sync="dialogVisible"
      center
      width="30%"
    >
      <MenuForm
        :type="dialogType"
        :info="editMenu"
        :menuList="menuList"
        @cancel="dialogVisible = false"
        @confirm="confirm"
      />
    </el-dialog>
  </div>
</template>

<script>
// api
import { getAllMenus, addMenu, delMenu, editMenu } from "@/api/menu";
// components
import MenuForm from "./components/MenuForm.vue";
import { flatMenus } from "@/utils/tool";
export default {
  name: "Menu",
  components: {
    MenuForm
  },
  data() {
    return {
      menuList: [],
      dialogType: 'add', // add 新增 update 更新
      dialogVisible: false,
      editMenu: null,
    }
  },
  methods: {
    /**
     * 新增菜单
     */
    addMenu() {
      this.dialogType = 'add';
      this.dialogVisible = true;
    },
    /**
     * 获取菜单数据
     */
    getData() {
      getAllMenus().then(res => {
        if (res.obj.length) {
          this.menuList = [];
          this.menuList = flatMenus(res.obj);
        }
      })
    },
    /**
     * 将菜单扁平化，并按 id 升序
     */
    // flatMenus(menus) {
    //   const res = []
    //   function recursive(arr) {
    //     if (!arr || !arr.length) {
    //       // 结束递归
    //     } else {
    //       arr.forEach(item => {
    //         res.push({
    //           name: item.menuName,
    //           path: item.menuPath,
    //           id: item.menuId,
    //           parentId: item.parentId,
    //         })
    //         recursive(item.children)
    //       })
    //     }
    //   }
    //   recursive(menus)
    //   return res.sort((a, b) => a.id > b.id ? 1 : -1);
    // },
    /**
     * 详情
     */
    detail(row) {
      console.log(row);
      this.dialogType = 'detail';
      this.editMenu = row;
      this.dialogVisible = true;
    },
    /**
     * 修改
     */
    edit(row) {
      this.dialogType = 'update';
      this.editMenu = row;
      this.dialogVisible = true;
    },
    /**
     * 删除
     */
    del(data) {
      console.log(data);
      let value = {
        "id": data.id
      }
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMenu(data.id).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getData();
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    confirm(data) {
	if (this.dialogType == 'update') {
        editMenu(data).then(res => {
          if (res.code == 200) {
            this.dialogVisible = false;
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.getData();
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      }
      else if (this.dialogType == 'add') {
        addMenu(data).then(res => {
          if (res.code == 200) {
            this.dialogVisible = false;
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.getData();
          }
          else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      }
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    margin-bottom: 20px;
  }

  .bottom {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>

增删改查弹窗

<template>
  <el-form v-if="menu" size="small" ref="form" :model="menu" label-width="80px">
    <el-form-item label="菜单名称">
      <el-input v-model="menu.name" placeholder="菜单名称" clearable></el-input>
    </el-form-item>
    <el-form-item v-if="menu.parentId !== 0" label="父级菜单">
      <el-select
        @change="parentIdChange"
        v-model="menu.parentId"
        placeholder="父级菜单"
        clearable
      >
        <el-option
          v-for="item in menuList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="菜单路径">
      <el-input
        v-model="menu.path"
        placeholder="例：/example"
        clearable
      ></el-input>
    </el-form-item>
    <span
      style="width: 100%; display: flex; justify-content: center"
      v-if="this.type != 'detail'"
    >
      <el-button size="small" type="primary" @click="confirm">确 定</el-button
      ><el-button size="small" @click="cancel">取 消</el-button>
    </span>
  </el-form>
</template>

<script>
export default {
  name: "MenuForm",
  props: {
    type: {
      type: String,
      default: '' // add 新增 update 更新
    },
    info: {
      type: Object,
      default: {}
    },
    menuList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      menu: {
        name: '',
        path: '',
        id: '',
        parentId: ''
      }
    }
  },
  watch: {
    type(newVal) {
      if (newVal === "add") {
        this.menu = {
          name: '',
          path: '',
          id: '',
          parentId: ''
        }
      }
    },
    info: {
      handler: function (newVal) {
        if (this.type === "update") {
          this.menu = JSON.parse(JSON.stringify(newVal));
        }
        if (this.type === "detail") {
          this.menu = JSON.parse(JSON.stringify(newVal));
        }

      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * parentId 值改变
     */
    parentIdChange(val) {
      console.log(val);
    },
    /**
     * 点击取消按钮
     */
    cancel() {
      this.$emit('cancel');
    },
    /**
     * 点击确定按钮
     */
    confirm() {
      this.$emit('confirm', this.menu);
      this.menu = {
        name: '',
        path: '',
        id: '',
        parentId: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>