manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/quanx/quanx.vue

<template>
  <div>
      <!-- 表头 -->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true">
              <el-form-item label="角色权限">
              </el-form-item>
              <el-form-item >
                  <div>
                  <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入关键字查询" clearable="true">
                      <el-button slot="append" @click="mohu" @clear="mohus" icon="el-icon-search"></el-button>
                  </el-input>
                  </div>
              </el-form-item>
              <el-form-item>
                  <el-link type="primary" :underline="false" @click="handleAdd('添加角色', '立即添加')">添加角色</el-link>
              </el-form-item>
          </el-form>
      </el-col>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" height="615">
        <el-table-column prop="rolename" label="角色"></el-table-column>
        <el-table-column prop="roleDescribe" label="描述"></el-table-column>
        <el-table-column prop="date" label="操作">
            <template slot-scope="scope">
                <div>
                    <el-button type="primary" size="small" @click="handleAdd('编辑角色', '立即修改', scope.row)">编辑角色</el-button>
                    <el-button type="primary" size="small" @click="shisha(scope.row.id)">分配权限</el-button>
                    <el-button type="danger" size="small" @click="deteHand(scope.row)">删除</el-button>
                </div>
            </template>
        </el-table-column>
      </el-table>
      <!--工具条-->
        <!-- <el-col :span="24" class="toolbar">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[20 , 50 , 80 , 100]"
                :page-size="20"
                layout="total, sizes, prev, pager, next"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col> -->
        <!-- 分配权限弹窗 -->
        <el-dialog title="分配权限" :visible.sync="dialogVisible" width="600" :before-close="handleClose">
            <div class="quanxians">
                <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
                <!-- <el-tree :data="data" show-checkbox node-key="id" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"> </el-tree> -->
                <el-form ref="form" :model="form" label-width="0px">
                <!-- 分模块展示功能项 -->
                <el-form-item>
                  <ul>
                    <li v-for="mainMenu in moduleList" :key="mainMenu.id">
                      <div style="width: 20px; display: inline-block;height: 10px">
                        <span v-if="mainMenu.children.length > 0" @click="dianji(mainMenu)" style="cursor:pointer;"><i :class="mainMenu.useState ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i></span>
                      </div>
                      <el-checkbox :label="mainMenu.name" name="type" v-model="mainMenu.checked" style="font-weight:bold;" @change="mainChange(mainMenu)"></el-checkbox>
                      <span v-if="mainMenu.functionList && mainMenu.functionList.length > 0" style="margin-right:10px;margin-left:10px;">(功能:  
                              <el-checkbox v-for="fun in mainMenu.functionList" :key="fun.id" :label="fun.name" name="type" v-model="fun.checked" @change="subChanges(fun, mainMenu.id)"></el-checkbox>)</span>
                      <ul v-if="mainMenu.children && mainMenu.useState">
                        <li v-for="subMenu in mainMenu.children" :key="subMenu.id">
                        <el-checkbox :label="subMenu.name" name="type" v-model="subMenu.checked" style="font-weight:bold;" @change="subChange(subMenu)"></el-checkbox>
                            <span v-if="subMenu.functionList && subMenu.functionList.length > 0" style="margin-right:10px;margin-left:10px;">(功能:  
                              <el-checkbox v-for="fun in subMenu.functionList" :key="fun.id" :label="fun.name" name="type" v-model="fun.checked" @change="funChange(fun)"></el-checkbox>)</span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" size="small" @click="saveList()">保存</el-button>
            </span>
        </el-dialog>
        <!-- 添加角色弹窗 -->
        <el-dialog :title="titles" :visible.sync="addDialogVisible" width="600px" :before-close="handleClose">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="角色名称">
                        <el-input v-model="form.rolename" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input type="textarea" v-model="form.roleDescribe" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="float: right" type="primary" @click="onSubmit()">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
  },
  data() {
    return {
        user: JSON.parse(sessionStorage.getItem("user")),
        tableData: [],
        total: 0,
        dialogVisible: false,
        filterText: '',
        addDialogVisible: false,
        form: {
            rolename: '',
            roleDescribe: '',
            id: ''
        },
        moduleList: [],
        roles: '',
        titles: '',
        addTil: '立即添加',
        keyword: '',
        auseList: []
    };
  },
  computed: {},
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      keyword(val) {
        if(val == '') {
          this.mohu()
        }
      }
  },
  created() {},
  mounted() {
    this.getRole()
    // this.shisha()
  },
  methods: {
      // 模糊匹配
      mohu() {
        console.log(this.keyword)
        if(this.keyword == '') {
          this.tableData = this.auseList
          return
        }
        var len = this.auseList.length;
        var arr = []
        for(var i = 0; i < len; i++){
            if(this.auseList[i].rolename.indexOf(this.keyword)>=0){
                arr.push(this.auseList[i]);
            }
        }
        this.tableData = arr
      },
      // 还不知道是啥
      shisha(id) {
        this.roles = id
        this.http.post('/permission/getAuthority', {
          companyId: this.user.companyId,
          role: id
        },
        res => {
            if (res.code == "ok") {
              console.log(res.data, '数据来源(990)')
              this.moduleList = res.data
              this.dialogVisible = true
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
      },
      // 获取权限列表
      getRole() {
        this.http.post('/permission/getRoleList', {
          companyId: this.user.companyId
        },
        res => {
            if (res.code == "ok") {
              console.log(res.data, '数据来源')
              this.tableData = res.data
              this.auseList = res.data
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        error => {
            this.$message({
                message: error,
                type: "error"
            });
        });
      },
      handleSizeChange() {},
      handleCurrentChange() {},
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
        handleAdd(tex, tel, id) {
          this.titles = tex
          this.addTil = tel
          this.addDialogVisible = true
          // var ss = {rolename: '', roleDescribe: '',id: ''}
          var ss = {}
          id ? ss.id = id.id : ss.id = ''
          id ? ss.rolename = id.rolename : ss.rolename = ''
          id ? ss.roleDescribe = id.roleDescribe : ss.roleDescribe = ''
          this.form = ss
      },
      // 添加角色
      onSubmit() {
          // var ss = this.form
          this.http.post('/permission/editRole', {
            id: this.form.id,
            name: this.form.rolename,
            description: this.form.roleDescribe,
            companyId: this.user.companyId
          },
          res => {
              if (res.code == "ok") {
                console.log(res.data, '数据来源(123)')
                this.addDialogVisible = false
                this.getRole()
              } else {
                  this.$message({
                      message: res.msg,
                      type: "error"
                  });
              }
          },
          error => {
              this.$message({
                  message: error,
                  type: "error"
              });
          });
      },
      deteHand(item) {
        this.$confirm('此操作将删除('+item.rolename+')角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.http.post('/permission/deleteRole', {
            id: item.id,
          },
          res => {
              if (res.code == "ok") {
                this.$message({
                      message: '删除成功',
                      type: "success"
                  });
                this.getRole()
              } else {
                  this.$message({
                      message: res.msg,
                      type: "error"
                  });
              }
          },
          error => {
              this.$message({
                  message: error,
                  type: "error"
              });
          });
        }).catch(() => {});
      },
      mainChange(mainMenu) {
        //一级选中，全部选中,一级取消全部取消
        console.log(mainMenu);
        mainMenu.children.forEach(c=>{
            c.checked = mainMenu.checked;
            c.functionList.forEach(f=>{
                f.checked = mainMenu.checked;
            });
        });
        if(mainMenu.functionList) {
          mainMenu.functionList.forEach(c=>{
            c.checked = mainMenu.checked;
          })
        }
      },
      subChange(subMenu) {
        //二级选中，自动勾选对应的一级
        console.log(subMenu);
        let mainMenuList = this.moduleList;
        mainMenuList.forEach(m=>{
          //检测子菜单
          if (m.id == subMenu.parentId) {
            //找到父菜单了
            var hasChecked = false;
            m.children.forEach(c=>{
                if (c.checked) {
                    hasChecked = true;
                }
            })
            //当前点击的子菜单所有同级菜单是否有点中的，如果没有需要把父级取消勾选
            m.checked = hasChecked;
          }
        });

        //子功能全部勾上，取消
        subMenu.functionList.forEach(f=>{
          f.checked = subMenu.checked;
        })
      },
      subChanges(subMenu, id) {
        let mainMenuList = this.moduleList
        mainMenuList.forEach(m=>{
          if(m.id == id) {
            //找到父菜单了
            var hasChecked = false;
            m.functionList.forEach(c=>{
                if (c.checked) {
                    hasChecked = true;
                }
            })
            //当前点击的子菜单所有同级菜单是否有点中的，如果没有需要把父级取消勾选
            m.checked = hasChecked;
          }
        });
      },
      dianji(item) {
        console.log(item)
        let mainMenuList = this.moduleList
        mainMenuList.forEach(m=>{
          if(m.id == item.id) {
            m.useState = !m.useState
          }
        });
      },
      saveList() {
        this.dialogVisible = false
        console.log(this.moduleList)
        this.http.post('/permission/savePermission', {
            role: this.roles,
            moduleList: JSON.stringify(this.moduleList),
          },
          res => {
              if (res.code == "ok") {
                this.$message({
                      message: '操作成功',
                      type: "success"
                  });
                this.getRole()
              } else {
                  this.$message({
                      message: res.msg,
                      type: "error"
                  });
              }
          },
          error => {
              this.$message({
                  message: error,
                  type: "error"
              });
          });
      }
  },
};
</script>

<style scoped>
  ul {
    padding: 0 0 0 30px;
    margin: 0;
  }
  li {
    list-style: none;
  }
  .quanxians {
    height: 400px;
    width: 100%;
    overflow: auto;
  }
</style>