index.vue

<template>
  <div class="template-box content_div_main">
    <el-row class="">
      <el-form :inline="true" class="search-form" size="small">
        <el-form-item>
          <el-input type="text" class="bla bra br0" v-model="name" placeholder="姓名"></el-input>
        </el-form-item>
         <el-form-item>
          <el-input type="text" class="bla bra br0" v-model="username" placeholder="登录名"></el-input>
        </el-form-item>
         <el-form-item>
           <el-input type="text" class="bla bra" v-model="mphone" placeholder="电话"></el-input>
        </el-form-item>
         <el-form-item>
          <el-button  class="search-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
          <el-button  class="search-btn ml10"  @click="addGroupUser()" icon="el-icon-plus">添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="systableData" style="width:98%;margin:20px auto;"  class="table_m_type" height="700">
         <div slot="empty">
          <div class="no-data-box">
            <img src="../../../assets/img/nodata.png" alt="暂无数据"/>
            <div>暂无数据</div>
          </div>
        </div>
        <el-table-column type="index" width=""></el-table-column>
        <el-table-column prop="name" label="姓名" width=""></el-table-column>
        <el-table-column prop="username" label="登录名" width=""></el-table-column>
        <el-table-column prop="mphone" label="联系电话" width=""></el-table-column>
        <el-table-column label="操作" align="center" width="">
          <template slot-scope="scope" align="center">
              <div class="tab-btn-box">
                <span class="table-btn"  @click="handleEdit(scope.$index, scope.row)">编辑用户</span>
                <span class="table-btn"   @click="allotRole(scope.$index, scope.row)">分配角色</span>
                <span class="table-btn dengers"   @click="handleDelete(scope.$index, scope.row)">删除用户</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <!-- 添加 -->
      <el-dialog title="添加系统用户" :visible.sync="adduserDialog" width="35%">
        <div>
          <el-form :model="addruleForm" :rules="rules" ref="addruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label=" " prop="username" class="importas">
              <el-input v-model="addruleForm.username" placeholder="登录名"></el-input>
            </el-form-item>
            <el-form-item label="*" class="importas" prop="password">
              <el-input type="password" v-model="addruleForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="*" class="importas" prop="checkPass">
              <el-input type="password" v-model="addruleForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="name">
              <el-input v-model="addruleForm.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="email">
              <el-input v-model="addruleForm.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="mphone">
              <el-input v-model="addruleForm.mphone" placeholder="联系方式"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="mphone">
               <el-select v-model="org" filterable placeholder="请选择" class="el-sel">
                  <el-option
                    v-for="item in orgData"
                    :key="item.org_code"
                    :label="item.org_name"
                    :value="item.unid">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="adduserDialog = false">取 消</el-button>
          <el-button type="primary" @click="adduser">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
    <el-row>
      <el-dialog title="编辑系统用户" :visible.sync="edituserDialog" width="40%">
        <div>
          <el-form :model="editruleForm" :rules="editrules" ref="ruleEditForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label=" " prop="username" class="importas">
              <el-input v-model="editruleForm.username" :disabled="true" placeholder="登录名"></el-input>
            </el-form-item>
            <el-form-item label=" " class="importas" prop="password">
              <el-input type="password" v-model="editruleForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="name">
              <el-input v-model="editruleForm.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="email">
              <el-input v-model="editruleForm.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label=" " prop="mphone">
              <el-input v-model="editruleForm.mphone" placeholder="联系方式"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="edituserDialog = false">取 消</el-button>
          <el-button type="primary" @click="edituser">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
    <el-row>
      <el-dialog title="分配角色" :visible.sync="roledialog" width="40%">
        <div  class="role-box">
          <el-col :span="12">
            <div class="left-box">
              <el-checkbox-group v-model="roleaddsel">
                <el-col v-for="(item,index) in roleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item">{{item.name}}</el-checkbox></el-col>
              </el-checkbox-group>
              <el-col :span="24" class="editrolebtn-box">
                <el-button  type="primary" class="" @click="addRoleToUser">添加角色</el-button>
              </el-col>
              <div class="claer-float"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="right-box">
              <el-checkbox-group v-model="roledeletesel">
                <el-col v-for="(item,index) in usreHasRoleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item">{{item.name}}</el-checkbox></el-col>
              </el-checkbox-group>
              <el-col :span="24" class="editrolebtn-box">
                <el-button  type="primary"  @click="deleteRoleToUser">删除角色</el-button>
              </el-col>
              <div class="claer-float"></div>
            </div>
          </el-col>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="roledialog = false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-row>
    <el-row>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="page.limit"
          :current-page.sync="page.currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    var vthis = this;
    var validatePass = function(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (vthis.addruleForm.checkPass !== "") {
          vthis.$refs.addruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = function(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== vthis.addruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
        selval:null,
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      groupname: "",
      username: "",
      name: "",
      mphone: "",
      groupData: [],
      systableData: [],
      adduserDialog: false,
      edituserDialog: false,
      roledialog: false,
      roleData: [],
      roleaddsel: [],
      roledeletesel:[],
      usreHasRoleData:[],
      curData:'',
      orgData:[],
      org:'',
      page: {
        offset: 0,
        limit: 20,
        total: 0,
        currentPage: 0
      },
      editruleForm: {
        user_type: "user",
        norm_type: "login",
        name: "",
        username: "",
        email: "",
        mphone: "",
        password: "",
        is_active: true,
        user_unid:''
      },
      addruleForm: {
        user_type: "user",
        norm_type: "login",
        name: "",
        username: "",
        email: "",
        mphone: "",
        checkPass: "",
        password: "",
        sex: "",
        is_active: true,
        telephone: "",
        user_unid:"",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      },
      editrules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码1", trigger: "blur" }]
      }
    };
  },
  methods: {
    searchUser(){
      this.getSysUser();
    },
    adduser() {
      this.$refs["addruleForm"].validate(valid => {
        if (valid) {
          this.axios.post(this.API.auth.user, this.addruleForm)
            .then((response)=> {
              this.$message({
                type: "info",
                message: "创建成功!"
              });
              this.adduserDialog = false;
              this.page.currentPage = 1;
              this.page.offset = 0;
              this.getSysUser();
              this.$refs["addruleForm"].resetFields();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    edituser() {
      this.$refs["ruleEditForm"].validate(valid => {
        if (valid) {
          this.axios.post(this.API.auth.edituser(this.editruleForm.user_unid),this.editruleForm)
            .then((response)=> {
              this.$message({
                type: "info",
                message: "修改成功!"
              });
              this.edituserDialog = false;
              this.getSysUser();
              this.$refs["ruleEditForm"].resetFields();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    allotRole(index, row) {
      this.roleData = [];
      this.roledialog = true;
      this.curData = row
      this.axios.get(this.API.auth.role, {
          params: {
            offset: 0,
            limit: 1000,
            is_active:true
          }
        }).then(response => {
          this.roleData = response.data.list_data;
          this.allHasRole(row);
        });
    },
    allHasRole(row){
      this.axios.get(this.API.auth.userRole(row.user_unid), {
          params: {
            offset: 0,
            limit: 1000,
            is_active:true
          }
        }).then(response => {
          this.usreHasRoleData = response.data.list_data;
        });
    },
    handleEdit(index, row) {
      this.axios.get(this.API.auth.edituser(row.user_unid)).then((response)=>{
        this.edituserDialog = true;
        this.editruleForm.username= response.data.username;
        this.editruleForm.name= response.data.name;
        this.editruleForm.mphone= response.data.mphone;
        this.editruleForm.email= response.data.email;
        this.editruleForm.user_unid= response.data.user_unid;
      });

    },
    handleDelete(index, row) {
      var Vthis = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios.post(this.API.auth.edituser(row.user_unid), {
              is_active: false
            }).then(function(response) {
              Vthis.getSysUser();
              Vthis.$message({
                type: "success",
                message: "删除成功!"
              });
            });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addGroupUser() {
      this.adduserDialog = true;
    },
    addRoleToUser(){
      if(this.roleaddsel.length > 0){
        this.roleaddsel.forEach(function(ele,i) {
          this.axios.post(this.API.auth.userRole(this.curData.user_unid),{"role_unid":ele.role_unid}).then((response)=> {
            if(i == this.roleaddsel.length-1){
              this.allHasRole(this.curData);
            }
          });
        }, this);
      }
    },
    deleteRoleToUser(){
      if(this.roledeletesel.length > 0){
        this.roledeletesel.forEach(function(ele,i) {
            this.axios.delete(this.API.auth.deleteuserRole(this.curData.user_unid, ele.role_unid)).then((response)=> {
              if(i == this.roledeletesel.length-1){
                this.roledeletesel = [];
                this.allHasRole(this.curData);
              }
            });
        }, this);
      }
    },
    setSex(row, column, cellValue) {
      var sex = "";
      if (cellValue == "1") sex = "男";
      if (cellValue == "2") sex = "女";
      return sex;
    },

    getSysUser() {
      debugger
      console.log(this.selval)
      var Vthis = this;
      this.axios
        .get(this.API.auth.user, {
          params: {
            limit: 20,
            offset: this.page.offset,
            username__like: this.username,
            mphone__like: this.mphone,
            name__like: this.name,
            is_active: true,
            user_type: "user",
            norm_type: "login"
          }
        }).then(function(response) {
          Vthis.systableData = response.data.list_data;
          Vthis.page.total = response.data.total_num;
        });
    },
    handleCurrentChange(val) {
      this.page.offset = (val - 1) * this.page.limit;
      this.getSysUser();
    },
    handleSizeChange(val) {
      this.getSysUser();
    }
  },
  created() {
    this.getSysUser();
    this.orgData = this.$store.state.initinfo.org;
  },
};
</script>
<style lang="stylus" scoped>
.sysuser{
  background #fff
}
.importas {
  .el-form-item {
    background: red;
  }
}

.el-checkbox {
  color: #fff;
}

.role-box {
  max-height 500px;
  overflow auto;
  padding: 0px 0 60px 0;
}
.left-box,.right-box
  width 90%
  height 300px
  overflow auto
  border 1px solid #999
  position relative
  text-align left
.claer-float
  clear both
.editrolebtn-box
  position absolute
  bottom 5px
  right 10px
  button
    float right
</style>