sys-news-web/src/views/navigation/navigation.vue

<template>
  <div class="navigation">
    <!-- 头部细节部分 -->
    <div class="title">
        <el-row>
          <el-col :span="24">
            <div class="top">
              <el-button type="success" style="margin-left: 1%;" @click="addNew">新增</el-button>
              <el-button type="success" style="margin-left: 1%;" @click="openChange">修改</el-button>
              <el-button type="success" style="margin-left: 1%;" @click="DeleteMenu">删除</el-button>
            </div>
          </el-col>
        </el-row>
    </div>

    <!-- 头部细节部分结束 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-tree
            v-loading="loading"
            :data="menuList"
            show-checkbox
            default-expand-all
            check-strictly
            node-key="id"
            ref="tree"
            highlight-current
            @check="handleCheckChange"
            :props="defaultProps">
          </el-tree>
        </div>
      </el-col>
    </el-row>
    <!-- 新增菜单 -->
    <el-dialog
      @close="handleEditDialogClose"
      :visible.sync="addUserList">
      <div class="tou">导航--添加</div>
      <div class="line"></div>
      <el-form
        label-position="right"
        label-width="100px"
        :model="formMenuList">
        <el-form-item label="导航名称">
          <el-input v-model.string="formMenuList.name" auto-complete="off" placeholder="请输入导航名称"></el-input>
        </el-form-item>

        <el-form-item label="父级id">
          <el-input v-model.string="formMenuList.parentId" auto-complete="off" placeholder="请输入父级节点id"></el-input>
        </el-form-item>

        <el-form-item label="导航级数">
          <el-input v-model.string="formMenuList.level" auto-complete="off" placeholder="请输入导航级数"></el-input>
        </el-form-item>

        <el-form-item label="路由路径">
          <el-input v-model.string="formMenuList.goPageUrl" auto-complete="off" placeholder="请输入路由路径"></el-input>
        </el-form-item>

        <el-form-item label="是否首页展示">
          <el-select v-model="formMenuList.homePageFlag" placeholder="是否首页展示" style="width: 100%">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单排序">
            <el-input v-model="formMenuList.homePageOrder" auto-complete="off" placeholder="请输入菜单排序"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserList = false" type="info">取 消</el-button>
        <el-button type="primary" @click="addData">新 增</el-button>
      </div>
    </el-dialog>
    <!-- 修改菜单 -->
    <el-dialog
        @close="handleEditDialogClose"
        :visible.sync="changeUser">
        <div class="tou">导航--修改</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="100px"
          :model="formMenuchangeList">
          <el-form-item label="导航名称">
            <el-input v-model.string="formMenuchangeList.name" auto-complete="off" placeholder="请输入导航名称"></el-input>
          </el-form-item>

          <el-form-item label="本级导航id">
            <el-input v-model.string="formMenuchangeList.id" auto-complete="off" placeholder="  请输入父级节点id"></el-input>
          </el-form-item>

          <el-form-item label="路由路径">
            <el-input v-model.string="formMenuchangeList.goPageUrl" auto-complete="off" placeholder="请输入路由路径"></el-input>
          </el-form-item>

          <el-form-item label="是否首页展示">
            <el-select v-model="formMenuchangeList.homePageFlag" placeholder="是否首页展示" style="width:   100%">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜单排序">
              <el-input v-model="formMenuchangeList.homePageOrder" auto-complete="off" placeholder="请输入菜单排序"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="changeUser = false" type="info">取 消</el-button>
          <el-button type="primary" @click="changeData">修 改</el-button>
        </div>
      </el-dialog>
  </div>

</template>

<script type="text/javascript">
export default{
  data() {
    return {
      // loading: true,
      option: [{
          value: '1',
          label: '首页不展示'
        }, {
          value: '2',
          label: '首页展示'
        }],
      formMenuList: {
        "name": "",
        "parentId": "",
        "level": "",
        "goPageUrl": "",
        "homePageFlag": "",
        "homePageOrder": ""
      },
      formMenuchangeList: {
        "id": "",
        "name": "",
        "goPageUrl": "",
        "homePageFlag": "",
        "homePageOrder": ""
      },
      menuList: [],
      dataList: '',
      addUserList: false,
      changeUser: false,
      defaultProps: {
        children: 'childList',
        label: 'name'
      },
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const response = await this.$http.get(`app/menu`);
      if (response.data.code === 1) {
        // console.log(response.data.responseData)
        this.menuList = response.data.responseData;
        this.loading = false;
      }
    },
    // 选择中的时候获取当前Id
    handleCheckChange(data, checked, indeterminate) {
      this.dataList = data;
    },
    // 增加菜单
    addNew() {
      this.addUserList = true;
      this.formMenuList.parentId = this.dataList.id;
    },
    // 新增导航
    async addData() {
      const formData = new FormData();
      formData.append('name', this.formMenuList.name);
      formData.append('parentId', this.formMenuList.parentId);
      formData.append('level', this.formMenuList.level);
      formData.append('goPageUrl', this.formMenuList.goPageUrl);
      formData.append('homePageFlag', this.formMenuList.homePageFlag);
      formData.append('homePageOrder', this.formMenuList.homePageOrder);
      const response = await this.$http.post(`app/menu`,formData);
      if(response.data.code === 1) {
        this.loadData();
        this.addUserList = false;
        this.$message({
          type: 'success',
          message: '添加成功'
        });
      }else {
        this.$message({
          type: 'error',
          message: '添加失败'
        });
      }
    },

    // 修改前判断
    openChange() {
      if(this.dataList == '') {
        this.$message.error('请选择要修改的单条数据');
        this.changeUser = false;
        return;
      };
      if(this.dataList.homePageFlag == 1) {
        this.formMenuchangeList.homePageFlag = '首页不展示'
      };
      if(this.dataList.homePageFlag == 2) {
        this.formMenuchangeList.homePageFlag = '首页展示'
      };
      this.changeUser = true;
      this.formMenuchangeList.id = this.dataList.id;
      this.formMenuchangeList.name = this.dataList.name;
      this.formMenuchangeList.goPageUrl = this.dataList.goPageUrl;
      if(this.dataList.homePageOrder == null) {
        this.formMenuchangeList.homePageOrder = '';
      }else {
        this.formMenuchangeList.homePageOrder = this.dataList.homePageOrder;
      }
      // this.formMenuchangeList.homePageFlag = this.dataList.homePageFlag;

      console.log(this.formMenuchangeList.homePageOrder)
    },
    // 修改导航
    async changeData () {
      if(this.formMenuchangeList.homePageFlag == '首页不展示') {
        this.formMenuchangeList.homePageFlag = 1
      };
      if(this.formMenuchangeList.homePageFlag == '首页展示') {
        this.formMenuchangeList.homePageFlag = 2
      };
      const formData = new FormData();
      formData.append('name', this.formMenuchangeList.name);
      formData.append('id', this.formMenuchangeList.id);
      formData.append('goPageUrl', this.formMenuchangeList.goPageUrl);
      formData.append('homePageFlag', this.formMenuchangeList.homePageFlag);
      formData.append('homePageOrder', this.formMenuchangeList.homePageOrder);
      const response = await this.$http.put(`app/menu`,formData);
      if(response.data.code === 1) {
        this.loadData();
         this.changeUser = false;
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      }else {
        this.$message({
          type: 'error',
          message: '修改失败'
        });
      }
    },
    // 删除导航
    DeleteMenu() {
      if(this.dataList == '') {
        this.$message.error('请选择要删除的单条数据');
        return;
      }
      this.formMenuchangeList.menuId = this.dataList.id;
      this.$confirm('是否删除该分类', '提示' ,{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const response = await this.$http.put(`app/menu/${this.formMenuchangeList.menuId}`);
          if(response.data.code === 1) {
            this.loadData();
            this.dataList = '';
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          }else {
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        }).catch(() => {
           this.$message({ type: 'info', message: '已取消删除'});
      });
    },

    // 清空表单数据
    handleEditDialogClose() {

      for (var key in this.formMenuchangeList) {
        this.formMenuchangeList[key] = '';
      }
      for (var key in this.formMenuList) {
          this.formMenuList[key] = "";
      }
      this.$refs.tree.setCheckedKeys([]);
      this.dataList = '';
    },
  }
};
</script>

<style>
.navigation {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}
.navigation .title {
  font-size: 5px;
  margin-bottom: 20px;
}
.navigation .top {
  padding-top: 20px;
  padding-left: 20px;
}
.navigation .text {
  display: inline-block;
  color: #000;
  font-size: 16px ;
  margin-left: 1%;
}
.navigation .input-demo {
  display: inline-block;
  width: 20%;
  margin-left: 1%;
}
.navigation .block {
  font-size: 5px;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
}
.navigation .el-dialog {
  width: 60%;
}
.navigation .el-dialog__header, .el-dialog__body {
  padding: 0 20px;
}
.navigation .tou {
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  padding-top: 15px;
}
.navigation .line {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
}
.navigation .xinxi {
  text-align: center;
  margin: 15px auto;
  font-size: 18px;
}
</style>