eyb：注销登录到职位管理批量删除功能实现（二）

---

目录：

【*】项目运行启动过程：

（1）注销登录功能实现

（2）首页面包屑效果

（3）未登录菜单Bug解决

（4）基础信息设置

（5）职位管理页面设计

（6）职位管理接口调用

（7）职位管路编辑功能实现

（8）职位管理批量删除功能实现

---

【*】项目运行启动过程：

由于自己的redis和stracker 和storage分被状态两个虚拟机上所以需要先启动两台虚拟机：

首先启动Redis：

启动命令：指定配置文件的启动命令：

redis-server redis6379P.conf &

redis-cli -h 192.168.23.128 -a root  

启动Redis可视化客户端：

 

在启动tracker 和storage：

 启动命令：这里是在根目录下的启动方式，如果进入到目录下直接局就可以启动

tracker:启动命令

/etc/init.d/fdfs_trackerd start

storage启动命令：

/etc/init.d/fdfs_storaged start

nginx启动命令：

cd /usr/local/nginx/sbin

./nginx

上面启动nginx出现了占用端口，先关闭nginx在重新运行nginx

如果启动nginx出现下面的情况：解决方式：

 以上连接过程，如果连接不上，尝试一个暂时关闭Linux的防火墙：

systemctl stop firewalld

（1）注销登录功能实现

下面处理头像左边的下拉框的功能实现，首先实现注销登录

 这个下拉框是elementUi的下拉框，有专门的事件处理方式

Home.vue:添加：

<template>
  <div>
   <el-container>
     <el-header class="homeHeader">
       <div class="title">云E办</div>

       <el-dropdown class="userInfo" @command="commandHandler">
         <span class="el-dropdown-link">
           {{user.name}}
           <i><img :src="user.userFace"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
           <el-dropdown-item command="setting">设置中心</el-dropdown-item>
           <el-dropdown-item command="logout">注销</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </el-header>
     <el-container>
       <el-aside width="200px">
         <!--router使用router模式，路由进行跳转：把路由数据进行渲染-->
         <el-menu router unique-opened>
           <!--循环路由，v-if当循环的item是hidden时候不显示-->
           <el-submenu :index="index+''" v-for="(item,index) in routes" :key="index" v-if="!item.hidden">
             <template slot="title">
               <i :class="item.iconCls" style="color: #1accff;margin-right: 5px"></i>
               <span>{{item.name}}</span>
             </template>
             <!--子路由循环 -->
             <el-menu-item :index="children.path" v-for="(children,index) in item.children" :key="index">
               {{children.name}}
             </el-menu-item>
           </el-submenu>
         </el-menu>
       </el-aside>
       <el-main>
         <router-view class="homeRouterView"/>
       </el-main>
     </el-container>
   </el-container>
  </div>
</template>

<script>
export  default{
  name:"Home",
  data() {
    return {
      //拿到用户对象
      user: JSON.parse(window.sessionStorage.getItem("user"))
    }
  },
  //计算属性
  computed: {
    routes() {
      return this.$store.state.routes;
    }
  },
  methods:{
    //头像的下拉框功能
    commandHandler(cmd) {
      //判断command是否为logout，是的话退出
      if (cmd == 'logout') {
        this.$confirm('此操作将注销登录，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //注销,调用后端接口：/logout
          this.postRequest("/logout");
          //清除用户信息
          window.sessionStorage.removeItem("user");
          window.sessionStorage.removeItem("tokenStr");
          //清空菜单
          this.$store.commit('initRoutes', []);
          //跳转登录页
          this.$router.replace("/")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    }
  }
}

</script>

<style>
  .homeHeader {
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
    box-sizing: border-box;
  }

  .homeHeader .title {
    font-size: 30px;
    font-family: 华文行楷;
    color: #ffffff;
  }

  .homeHeader .userInfo {
    cursor: pointer;
  }

  .homeWelcome {
    text-align: center;
    font-size: 30px;
    font-family: 华文行楷;
    color: #409eff;
    padding-top: 50px;
  }

  .homeRouterView {
    margin-top: 10px;
  }

  .el-dropdown-link img {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    margin-left: 8px;
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
  }
</style>

 

 点击注销：

点取消的话：

点确定的话

（2）首页面包屑效果

在Home.vue添加：

 

点击首页：

 

（3）未登录菜单Bug解决

 

 当没有登录直接访问登录后的一个页面，会出现空白页面。解决办法：我们需要判断用户是否登录，登录之后才能跳转到这个页面，没有登录，跳转登录页面，进行登录，登录后才能跳转目的页面

在mian.js：中添加：

在Login.vue：

添加登录时候判断：是否在地址栏输入了目的地址

 

 如果输入目的地址：回车

首先让你登录： 

 跳到了这个页面：

（4）基础信息设置

接下来实现菜单的功能了，首先实现基础信息设置，对基础信息进行响应的设置，这些基础信息不能只是一个或两个肯定会非常多，比如部门管理、职位管理、职称管理、奖惩规则、权限组 这些都可以称为基础信息设置，接下来我们将在这一个页面，进行相应的展示，展示这么多，怎么去管理呢，使用ElementUI的对应的组件，类似于标签页：

 

 上面已经设置了router了，现在可以删除路由配置里面的：

 

 现在在基础信息设置里面可以写内容了：

每个里面都写的话，内容都放在SysBasic.vue内容非常的多，很难去管理，这时候我们可以把它们分别写在一个组件里面

在component里面创建sys/basic目录，创建组件： 

 在SysBasic.vue引入创建的组件：

<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="部门管理" name="depmana">
        <DepMana></DepMana>
      </el-tab-pane>
      <el-tab-pane label="职位管理" name="posmana">
        <PosMana></PosMana>
      </el-tab-pane>
      <el-tab-pane label="职称管理" name="JoblevelMana">
        <JoblevelMana>
        </JoblevelMana>
      </el-tab-pane>
      <el-tab-pane label="奖惩规则" name="ecmana">
        <EcMana></EcMana>
      </el-tab-pane>
      <el-tab-pane label="权限组" name="permissmana">
        <PermissMana>
        </PermissMana>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
//引入创建的组件
import DepMana from '../../components/sys/basic/DepMana'
import EcMana from '../../components/sys/basic/EcMana'
import JoblevelMana from '../../components/sys/basic/JoblevelMana'
import PermissMana from '../../components/sys/basic/PermissMana'
import PosMana from '../../components/sys/basic/PosMana'

export default {
  name: "SysBasic",
  data(){
    return{
      activeName: 'posmana'
    }
  },
  //引入对应的组件，变成这个页面的组件
  components:{
    DepMana,
    EcMana,
    JoblevelMana,
    PermissMana,
    PosMana
  }
}
</script>

<style scoped>

</style>

 

 

点击职位管理：

 

 （5）职位管理页面设计

大概页面： 

 PosManan.vue：简单样式：

<template>
  <div>
    <div>
      <el-input
              size="small"
              class="addPosInput"
              placeholder="添加职位"
              suffix-icon="el-icon-plus"
              v-model="pos.name">
      </el-input>
      <el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
    </div>
    <div class="posManaMain">
      <el-table
          :data="positions"
          border
          stripe
          size="small"
          @selection-change="handleSelectionChange"
          style="width: 70%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="编号" width="55"></el-table-column>
        <el-table-column prop="name" label="职位名称" width="120"></el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "PosMana",
  data() {
    return {
      pos: {
        name: ''
      },
      positions:[]
    }
  }
}
</script>

<style scoped>

.addPosInput {
  width: 300px;
  margin-right: 8px;
}
.posManaMain {
  margin-top: 10px;
}

.updatePosInput {
  width: 200px;
  margin-left: 8px;
}
</style>

 

（6）职位管理接口调用

 调用后端的接口，实现相应的功能，首先调用查询接口，进行数据显示

 在PosMan.vue中添加：操作一行

添加方法调用后端接口：

显示职位信息列表： 

 

 

 

 添加职位的方法：

 

 输入名字直接回车就可以添加进来

 删除方法：

 

 

（7）职位管路编辑功能实现

 当点击编辑，弹出来一个编辑框，进行修改

PosMana.vue：添加弹出框

 

 

 

 

（8）职位管理批量删除功能实现

 添加批量删除按钮：

 

 

 PosManan.vue：

<template>
  <div>
    <div>
      <!-- @keydown.enter.native="addPosition"这是键盘点击事件，回车之后执行添加职位的方法-->
      <el-input
              size="small"
              class="addPosInput"
              placeholder="添加职位"
              suffix-icon="el-icon-plus"
              @keydown.enter.native="addPosition"
              v-model="pos.name">
      </el-input>
      <el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
    </div>
    <!-- @selection-change="handleSelectionChange"：表单选项改变的事件 去获取勾选的对象-->
    <div class="posManaMain">
      <el-table
          :data="positions"
          border
          stripe
          size="small"
          @selection-change="handleSelectionChange"
          style="width: 70%">
        <el-table-column type="selection" width="55"></el-table-column><!--这个是多选框-->
        <el-table-column prop="id" label="编号" width="55"></el-table-column>
        <el-table-column prop="name" label="职位名称" width="120"></el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="showEditView(scope.$index,scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--更新弹出框-->
    <el-dialog title="编辑职位" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-tag>职位名称</el-tag>
        <el-input v-model="updatePos.name" size="small" class="updatePosInput"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="doUpdate">确定</el-button>
      </span>
    </el-dialog>
    <!--:disabled：判断数组是否为0，不是0的时候启用-->
    <el-button type="danger" size="small" style="margin-top: 8px" :disabled="multipleSelection.length == 0"
               @click="deleteMany">批量删除
    </el-button>
  </div>
</template>

<script>
export default {
  name: "PosMana",
  data() {
    return {
      //添加的名字
      pos: {
        name: ''
      },
      positions:[],
      dialogVisible:false,
      //编辑的名字
      updatePos: {
        name: ''
      },
      multipleSelection: []
    }
  },
  //当页面刚加载的时候调用initPositions方法调用后端接口，获取所有职位信息
  mounted() {
    this.initPositions();
  },
  methods:{
    //批量删除方法
    deleteMany() {
      this.$confirm('此操作将永久删除【' + this.multipleSelection.length
          + '】条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?';
        this.multipleSelection.forEach(item => {
          ids += 'ids=' + item.id + '&';
        })
        this.deleteRequest('/system/basic/pos/' + ids).then(resp => {
          if (resp) {
            this.initPositions();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //表单勾选的对象，放到multipleSelection数组里面
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    //添加职位方法
    addPosition() {
      //添加职位
      if (this.pos.name) {
        //调用后端接口/system/basic/pos
        this.postRequest('/system/basic/pos/', this.pos).then(resp => {
          if (resp) {
            //添加成功后直接再次调用initPositions方法，刷新职位列表信息让他显示出来
            this.initPositions();
            //添加成功后把输入框设置为空
            this.pos.name = '';
          }
        })
      } else {
        this.$message.error("职位名称不可以为空！");
      }
    },
    //显示编辑框
    showEditView(index, data) {
      //在编辑框里显示名字，采用Object.assign（）这个方式
      Object.assign(this.updatePos, data);
      //把日期传过去，否则更改的时候会报错
      this.updatePos.createDate = '';
      //显示编辑框
      this.dialogVisible = true;
    },
    //编辑框的更新职位方法
    doUpdate() {
      //修改职位 调用后端接口：/system/basic/pos
      this.putRequest('/system/basic/pos/', this.updatePos).then(resp => {
        if (resp) {
          //更新成功，去刷新职位信息列表
          this.initPositions();

          this.updatePos.name = '';
          //编辑框隐藏
          this.dialogVisible = false;
        }
      })
    },
    //删除方法
    handleDelete(index, data) {
      //删除职位 使用elementUI的提示删除确认框
      this.$confirm('此操作将永久删除该【' + data.name + '】职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用后端接口/system/basic/pos
        this.deleteRequest('/system/basic/pos/' + data.id).then(resp => {
          if (resp) {
            //删除完之后，调用获取信息列表的方法，进行刷新
            this.initPositions();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取职位信息列表
    initPositions(){
      this.getRequest('/system/basic/pos/').then(resp => {
        if (resp) {
          this.positions = resp;
        }
      })
    }
  }
}
</script>

<style scoped>

.addPosInput {
  width: 300px;
  margin-right: 8px;
}
.posManaMain {
  margin-top: 10px;
}

.updatePosInput {
  width: 200px;
  margin-left: 8px;
}
</style>

 添加几条数据：

 

 

以上整个职位管理的增删改查，就处理完了，职位管理功能实现完成！！