vue-insagent-pc/src/views/Sys/User.vue

<template>
  <div>
    <el-main ref="elMain" style="padding: 0px;">
      <Split :gutterSize="2" style="height: calc(100vh - 120px);">
        <!-- 左侧树Start -->
        <SplitArea :size="leftSplitWidth" :minSize="240">
          <div>
            <el-checkbox v-model="containsSubDeptChecked">包含下级机构</el-checkbox>
            <el-divider></el-divider>
            <tree :setting="ztreeSetting" :nodes="ztreeNodes" @onClick="onZTreeClick" @onCreated="onZTreeCreated"/>
          </div>
        </SplitArea>
        <!-- 左侧树End -->

        <!-- 右侧列表页面Start -->
        <SplitArea :size="rightSplitWidth">
            <!-- 筛选区域Start -->
            <el-row class="queryFrom" >
              <el-form ref="queryFormRef" :model="queryFrom" label-width="80px">
                  <el-row>
                  <!-- <el-col :span="5">
                    <el-form-item label="工号">
                      <el-input clearable size="small" placeholder="工号" v-model="queryFrom.id" ></el-input>
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="5">
                    <el-form-item label="姓名">
                      <el-input clearable size="small" placeholder="姓名" v-model="queryFrom.name" ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="手机号">
                      <el-input clearable size="small" placeholder="手机号" v-model="queryFrom.tel" ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
                    <el-button size="small" @click="queryStaffInfo">查询</el-button>
                  </el-col>
                  </el-row>
              </el-form>
            </el-row>
            <!-- 筛选区域End -->

            <!-- 审核通过 -->
            <!-- <template v-if="pageRequest.columnFilters.status.value == '1'"> -->
              <kt-common-table permsEdit="sys:user:edit" :data="pageResult" :columns="columns" editButtonName="配置角色"  :showBatchDelete="false" @findPage="findPage" @handleEdit="handleTableEdit">
              </kt-common-table>
            <!-- </template> -->

        </SplitArea>
        <!-- 右侧列表页面End -->
      </Split>
    </el-main>

    <!-- 新增修改界面 -->
    <el-dialog title="角色配置" width="800px" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="handleDialogBefore" @close="closeDialog" v-dialogDrag>
      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="submitForm()" label-width="120px" size="small" style="text-align:left;">
        <el-tabs>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门编码" prop="name">
                <el-input disabled v-model="dataForm.deptId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门名称" prop="name">
                <el-input disabled v-model="dataForm.deptName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="员工工号" prop="id">
                <el-input disabled v-model="dataForm.id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input disabled v-model="dataForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input disabled v-model="dataForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="mobile">
                <el-input disabled v-model="dataForm.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色权限" prop="email">
                <el-select size="small"  v-model="dataForm.remark" placeholder="请选择" @change="changeRole($event)" >
                  <el-option :label="roleItem.name" :value="roleItem.id" v-for="(roleItem,roleIndex) in roleoptions" :key="roleIndex"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tabs>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import Cookies from "js-cookie"
  import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
  import tree from "@/components/ztree.vue";  // 机构树组件
  import KtCommonTable from "@/views/Core/KtCommonTable.vue";//表格组件
  import CommonUtil from "@/utils/comutil.js"
  export default {
    components: {
      KtButton,
      tree,
      KtCommonTable
    },
    data() {
      return {
        peopleid:"",
        peopledeptid:"",

        /**Split 开始 */
        leftSplitWidth: 20,
        rightSplitWidth: 80,
        /**Split 结束 */

        //----ztreeLeft begin---------
        containsSubDeptChecked: true, //是否包含下级机构
        ztreeObj: null,
        ztreeSetting: {
          check: {
            enable: false
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: "parentId"
            }
          },
          view: {
            showIcon: false
          }
        },
        ztreeNodes: [],
        currentTreeNode: null,
        //----ztreeLeft end---------


        // 右侧列表查询数据Start
        queryFrom:{},
        pageResult: {},
        pageRequest: {  //查询的默认条件
          pageNum: 1,
          pageSize: 20,
          columnFilters: {
            "deptid": {
              "name": "deptid",
              "value": ''
            },
            "containsSubDept": {
              "name": "containsSubDept",
              "value": 1
            },
            "usertype": {
              "name": "usertype",
              "value": "A"
            },
            "status":{
              "name":"status",
              "value":"1"
            },
            "id":{
              "name":"id",
              "value":""
            },
            "name":{
              "name":"name",
              "value":""
            },
            "mobile":{
              "name":"mobile",
              "value":""
            }
          }
        },
        columns: [  // 数据列
          { prop: "deptId",label: "部门编码",minWidth: 80,sortable: false},
          { prop: "deptName",label: "部门名称",minWidth: 80,sortable: false},
          // { prop: "jobCode",label: "岗位",minWidth: 80,sortable: false,formatter: this.jobcodeFormatter},
          { prop: "id",label: "工号",minWidth: 80,sortable: false},
          { prop: "name",label: "姓名",minWidth: 80,sortable: false},
          // { prop: "sex",label: "性别",minWidth: 80,sortable: false,formatter: this.sexFormatter},
          { prop: "mobile",label: "联系电话",minWidth: 100,sortable: false},
          { prop: "email",label: "邮箱",minWidth: 100,sortable: false},
          { prop: "remark",label: "角色",minWidth: 100,sortable: false}
        ],
        // 右侧列表查询数据End


        // 新增或修改的弹出框Start
        dialogVisible: false, // 新增编辑界面是否显示
        dataForm:{  // 人员个人信息
          remark:""
        },
        // 新增或修改的弹出框End
        roleoptions: [],

      }
    },
    created() {
      this.peopleid = Cookies.get('user');
      if(this.peopleid!='admin'){
        this.peopledeptid = Cookies.get('user').split('D')[0];
        this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
      }else{
        this.peopledeptid = '9';
        this.pageRequest.columnFilters.deptid.value = this.peopledeptid;
      }
      //获取所有下拉框数据(字典)
      this.getRoles();
    },
    mounted() {
      this.findLeftTreeData();// 获取机构树的数据
      //用像素初始化左边的split的宽度
      this.changeTreeWidth(240);// 初始化树的宽度
    },
    watch:{
      containsSubDeptChecked(){ // 监听是否包含下级
        this.pageRequest.columnFilters.containsSubDept.value = this.containsSubDeptChecked ? "1" : "0";
        this.findPage();
      }
    },
    methods: {
      getRoles(){
        this.$api.role.findAll().then((res) => {
          console.log(res.data)
        	this.roleoptions = res.data
        }).catch((error)=>{
          this.roleoptions = [];
        })
      },
      changeRole(roleid){
        this.dataForm.roleId =roleid;
      },
      /**Split 开始 */
      changeTreeWidth(widthVal){
        // 初始化树的宽度
        this.leftSplitWidth = Math.ceil(widthVal/this.$refs.elMain.$el.clientWidth*100);
        this.rightSplitWidth = 100-(this.leftSplitWidth)
      },
      /**Split 结束 */

      //--left tree start-------
      findLeftTreeData: function() {
        // 获取数据
        this.$api.dept.findLeftDeptTree(this.peopledeptid).then(res => {
          this.ztreeNodes = res.data;
        });
      },
      onZTreeCreated: function(ztreeObj) {
        this.ztreeObj = ztreeObj;
        // onCreated 中操作ztreeObj对象展开第一个节点
        ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
        this.currentTreeNode=ztreeObj.getNodes()[0];
      },
      onZTreeClick: function(evt, treeId, treeNode) {
        // 点击事件
        this.currentTreeNode = treeNode;
        this.pageRequest.columnFilters.deptid.value = this.currentTreeNode.id;
        this.findPage();
      },
      //--left tree end-------

      // 查询Start
      queryStaffInfo(val){
        this.pageRequest.columnFilters.id.value = this.queryFrom.id;
        this.pageRequest.columnFilters.name.value = this.queryFrom.name;
        this.pageRequest.columnFilters.mobile.value = this.queryFrom.tel;
        this.pageRequest.pageNum = 1;
        this.findPage();
      },
      // 查询End

      // 右侧列表的方法Start
      findPage(data) {
      // 获取分页数据
        if(data && data.pageRequest){
          this.pageRequest.pageNum = data.pageRequest.pageNum;
          this.pageRequest.pageSize = data.pageRequest.pageSize;
        }
         this.$api.user.userQueryPage(this.pageRequest).then((res) => {
           console.log(res.data)
          this.pageResult = res.data;
        }).then(data != null ? data.callback : '')
      },

      handleTableEdit(params) {
        // 编辑后线人员
        console.log(params.row)
        Object.assign(this.dataForm, params.row);
        this.dialogVisible = true
      },
      // 右侧列表的方法End

      // 新增或修改的弹出框Start
      getDictItems(typeName) {
      //--数据字典--
        this.$api.dict.findByLableName(typeName).then((response)=>{
          this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
        }).catch((error)=>{
          this[typeName + "options"] = [];
        })
      },
      handleDialogBefore(done) {
        // 退出对话框之前确认提示
        var that = this;
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      closeDialog(){
        // 清空数据
        this.$refs['dataForm'].resetFields()
        for (let key in this.dataForm) {
          this.dataForm[key] = "";
        }
        this.dialogVisible=false
      },
      // 提交
      submitForm() {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            let params = {
              roleId:this.dataForm.roleId,
              userId:this.dataForm.id,
            }
            this.$api.user.saveUserRole(params).then((res)=>{
              if(res.code == 200){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.findPage(null);
                this.dialogVisible = false
              }else{
                this.$message({
                  message: '操作失败',
                  type: 'error'
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
      },
      // 新增或修改的弹出框End

    }
  }
</script>

<style scoped>
  .el-divider--horizontal {
    margin: 4px 0;
  }

  /* 顶部查询条件样式Start */
  .queryFrom .el-row {
    margin: 10px 0px;
  }
  .queryFrom .el-form-item {
    margin-bottom: 0px;
  }
  .queryFrom .queryButton .el-form-item__content {
    margin-left: 0px !important;
  }
  /* 顶部查询条件样式End */
</style>