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;">
                  <kt-button label="查询" perms="sys:role:query" @click="queryStaffInfo" />
                </el-col>
              </el-row>
            </el-form>
          </el-row>
          <!-- 筛选区域End -->

          <!-- 审核通过 -->
          <!-- <template v-if="pageRequest.columnFilters.status.value == '1'"> -->
          <kt-common-table permsEdit="sys:role:update" :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="roleId">
                <el-select size="small" clearable  v-model="dataForm.roleId" 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-col :span="12">
              <el-form-item label="树权限" prop="showLevel">
                <el-select size="small" clearable  v-model="dataForm.showLevel" placeholder="请选择">
                  <el-option v-for="(val, index) in treeOptions" :label="val.dictTag" :value="val.dictValue"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拨号权限" prop="isDial">
                <el-select size="small" clearable  v-model="dataForm.isDial" placeholder="请选择" @change="refreshData">
                  <el-option v-for="(val, index) in isDialOptions" :label="val.label" :value="val.value"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拨号权限账号" prop="dialUserName">
                <el-input  v-model="dataForm.dialUserName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拨号权限密码" prop="dialPassWord">
                <el-input  v-model="dataForm.dialPassWord"></el-input>
              </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: "roleName", label: "角色", minWidth: 100, sortable: false }
      ],
      // 右侧列表查询数据End


      // 新增或修改的弹出框Start
      dialogVisible: false, // 新增编辑界面是否显示
      dataForm: {  // 人员个人信息
        remark: "",
        roleId: "",
        dialUserName:"",
        dialPassWord:"",
        isDial:"0",
      },
      // 新增或修改的弹出框End
      roleoptions: [],
      treeOptions:[],
      isDialOptions:[
        {
          label:'关闭',
          value:'0'
        },{
          label:'开启',
          value:'1'
        },
      ]
    }
  },
  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();
    this.dictList()

  },
  mounted() {
    this.findLeftTreeData();// 获取机构树的数据
    //用像素初始化左边的split的宽度
    this.changeTreeWidth(240);// 初始化树的宽度
  },
  watch: {
    containsSubDeptChecked() { // 监听是否包含下级
      this.pageRequest.columnFilters.containsSubDept.value = this.containsSubDeptChecked ? "1" : "0";
      this.findPage();
    }
  },
  methods: {
    refreshData (val) {
      this.$forceUpdate()
    },
    dictList(data) {
      this.$api.dict
        .dictList()
        .then((res) => {
          let dataArr = res.filter((item) => {
            return item.dictType == "treeShowLevelEnum";
          });
          dataArr.length > 0 ? (this.treeOptions = dataArr[0].ddList) : "";
        })
        .then(data != null ? data.callback : "");
    },
    getRoles() {
      this.$api.role.findAll().then((res) => {
        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.findTree().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) => {
        if(res.code==200){
          //角色权限过滤转换
          res.data.content.forEach(item => {
            item.roleId=Number(item.roleId)
          })
          this.pageResult = res.data;
        }
          else{
          this.$message.error(res.msg)
        }

      }).then(data != null ? data.callback : '')
    },

    handleTableEdit(params) {
      this.dataForm = Object.assign({}, params.row)
      this.dataForm.isDial=this.dataForm.isDial==null?'0':'1';
      this.dataForm.showLevel=this.dataForm.showLevel=='null' || this.dataForm.showLevel==null?'subordinate':this.dataForm.showLevel
      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(() => {
        this.$api.user.saveUserRole({
          roleId: this.dataForm.roleId,
          userId: this.dataForm.id,
          showLevel: this.dataForm.showLevel,
          isDial: this.dataForm.isDial,
          dialUserName:this.dataForm.dialUserName,
          dialPassWord:this.dataForm.dialPassWord,
        }).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>