supplier_system/src/dashoo.cn/frontend_web/src/pages/system/users.vue

<template>
  <div>
     <el-card class="box-card" style="height: calc(100vh - 92px);">
      <div slot="header" style="height: 20px;">
        <span style="float: left;">
          <i class="icon icon-table2"></i>
        </span>
        <el-breadcrumb class="heading" style="float: left; margin-left: 5px">
          <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/system/users' }">用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <span style="float: right;">
          <el-button size="mini" type="primary" style="margin-left:10px; margin-top: -4px;" @click="opendatadialog(1,null,-1);resetForm('organizeform')">新增用户</el-button>
        </span>
        <el-form ref="form" :inline="true" style="float: right; margin-top: -10px">
          <el-form-item label="账号">
            <el-input size="mini" style="width: 165px;" v-model="keyword" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-dropdown split-button type="primary" size="mini" @click="seachdata" @command="searchCommand">
              查询
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="search">高级查询</el-dropdown-item> -->
                <el-dropdown-item command="clear">查询重置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>
        <el-table :data="list" border>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" @click="opendatadialog(2,scope.row,scope.$index);" type="text" icon="el-icon-edit"
                title="编辑"></el-button>
              <el-button size="small" type="text" style="margin-left:3px" icon="el-icon-delete" title="删除" @click="deletedata(scope.row)"></el-button>
              <!-- <el-button size="small" type="text" style="margin-left:1px" title="权限" @click="permission(scope.row)"><i class="icon icon-lock"></i></el-button> -->
              <el-button size="small" type="text" style="margin-left:3px" title="密码重置" @click="resetpwd(scope.row)">
                <i class="icon icon-spinner11"></i>
              </el-button>
              <el-button size="small" type="text" style="margin-left:3px" title="设置角色" @click="roleset(scope.row)">
                <i class="icon icon-users"></i>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="Username" align="center" label="账号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="Realname" align="center" label="用户名"></el-table-column>
          <el-table-column prop="Departmentname" align="center" label="所属组织"></el-table-column>
          <!-- <el-table-column prop="RealnameRole" align="center" label="角色"></el-table-column> -->
          <el-table-column prop="Telephone" align="center" label="手机" show-overflow-tooltip></el-table-column>
          <el-table-column label="座机" align="center" prop="Mobile" show-overflow-tooltip></el-table-column>
          <el-table-column v-if="this.appclient != 'lims'" prop="Description" align="center" label="备注"
            show-overflow-tooltip></el-table-column>
        </el-table>
    </el-card>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20, 25]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="currentItemCount">
    </el-pagination>

    <el-dialog :title="dialogtitle" :visible.sync="datadialogVisible" width="720px">
      <el-form :model="userform" :rules="rulesuser" ref="userform" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="账号/Email" prop="username" required>
              <el-input v-model="userform.username" auto-complete="off" :disabled="disabledserial"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户名" required prop="realname">
              <el-input v-model="userform.realname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属组织" required>
              <el-cascader :options="orgtreelist" :props="orgtreeprops" change-on-select :show-all-levels="false"
                v-model="selectedorg" placeholder="请选择组织"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机" prop="telephone">
              <el-input v-model="userform.telephone" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="座机" prop="mobile">
              <el-input v-model="userform.mobile" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="this.appclient != 'lims'" label="备注">
              <el-input type="textarea" v-model="userform.description" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if=" this.appclient== 'lims'" label="签名">
              <!-- <el-input type="textarea" v-model="userform.description" auto-complete="off"></el-input> -->
              <el-upload style="margin-top: 10px;" class="usersignimg-uploader" :action="imghost + '/api/limsupload/usersignimg'"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="uploadusersignimg">
                <i v-else class="el-icon-plus usersignimg-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="datadialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savedata('userform')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="rolesettitle" :visible.sync="rolesetVisible">
      <el-checkbox :indeterminate="isrolecheckall" v-model="roleCheckAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin-top:20px;">
        <el-checkbox-group v-model="selectedrole">
          <el-checkbox v-for="role in rolelist" @change="handlecheckedrolechange" :label="role.Id" :value="role.Id" :key="role.Id">{{role.Realname}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer">
        <el-button @click="rolesetVisible = false">取消</el-button>
        <el-button type="primary" @click="rolesave()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="permissiondialogtitle" :visible.sync="permissiondatadialogVisible" top="5vh">
      <el-col :span="6" style="margin-right: 10px">
        <div class="userpermisstreediv">
          <el-tree style="border: 0" node-key="id" show-checkbox :data="orgtreelist" :props="orgtreeprops"
            :default-expanded-keys="userdepartment" @check-change="userpermissorgcheckedchange" ref="userpermisstree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="17">
        <el-form ref="alertform">
          <el-form-item>
            <div class="userpermissdiv">
              <el-checkbox-group v-model="userpermissdevicesselects">
                <el-checkbox v-for="item in equipdeviceslist" :label="item.Id+''" :key="item.Id">{{item.Code}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <div slot="footer" class="dialog-footer" style="margin-top:-35px;">
        <el-button @click="permissiondatadialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savepermission()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'users',

    data() {
      var checkusername = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入账号'))
        } else {
          if (this.appclient == 'lims') { //大港油田lims系统不用邮箱
            callback()
          }
          let re = /^([a-zA-Z0-9]+[_|-|.|-]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|-|.|-]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/
          if (!re.test(value)) {
            callback(new Error('请输入正确的邮箱地址'))
          } else {
            callback()
          }
        }
      }
      return {
        downloading: '',
        imghost: "",
        organdialogVisible: false,
        currentItemCount: 0,
        currentItemCount2: 0,
        currentItemCount3: 0,
        currentPage: 1,
        size: 10,
        rolesettitle: '',
        rolesetVisible: false,
        roleCheckAll: false,
        isrolecheckall: false,
        selectedrole: [],
        bossSelect: [],
        list: [],
        rolelist: [],
        mustrolelist: [],
        keyword: '',
        datadialogVisible: false,
        dialogtitle: '',
        disabledserial: false,
        IsInnerOrganize: 1,
        appclient: '',
        userform: {
          username: '',
          realname: '',
          telephone: '',
          mobile: '',
          sign: '',
          description: '',
          id: 0,
          departmentid: '',
          departmentname: '',
          RealnameRole: '',
          GroupId: '',
          GroupName: '',
        },
        rulesuser: {
          username: [{
            validator: checkusername,
            trigger: 'blur'
          }],
          realname: [{
            required: true,
            message: '用户名',
            trigger: 'blur'
          }]
        },
        imageUrl: "",
        operatingitem: 0,
        permissiondialogtitle: '',
        permissiondatadialogVisible: false,
        isfristchecked: false, // 过滤点击树时出现的多次触发选择事件
        userpermisstreedata: [], // 组织tree 数据
        userpermissdevicesselects: [], // 设备批量设置所选设备
        equipdeviceslist: [], // 批量设置设备设备所有数据
        equipalllist: [], // 设备所有数据
        checkedarr: [], // 树形控件多选框
        orgtreelist: [],
        orgtreeprops: {
          value: 'id',
          label: 'Fullname',
          children: 'children'
        },
        rolelistcheckall: [],
        selectedorg: [],
        userdepartment: [],
        ischeckbj: false, // 过滤字段勾选时触发的选中事件
      }
    },
    computed: mapGetters({
      authUser: 'authUser'
    }),
    created() {
      this.appclient = process.env.appclient
      this.imghost = process.env.limsimgserverhost;
      this.getorgtreelist()
      this.initData()
      // this.loadequipsall()
      this.userdepartment.push(parseInt(this.authUser.Profile.DepartmentId))
      this.selectedorg = [parseInt(this.authUser.Profile.DepartmentId)]
    },
    methods: {
      initData() {
        let _this = this
        // paginate
        const params = {
          _currentPage: this.currentPage,
          _size: this.size,
          keyword: this.keyword
        }
        // request
        this.$axios.get('users/list', {
            params
          })
          .then(res => {
            // response
            _this.list = res.data.items
            _this.currentItemCount = res.data.currentItemCount
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
        this.$axios.get('role/list', {})
          .then(res => {
            // response
            _this.rolelist = res.data.items
            _this.roleItemCount = res.data.currentItemCount
            for (var i = 0; i < _this.roleItemCount; i++) {
              _this.rolelistcheckall.push(_this.rolelist[i].Id)
            }
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      handleAvatarSuccess(res, file) {
        this.userform.sign = res
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        console.log(file);
        const isimg = file.type.indexOf("image/") === 0;
        const isLt50k = file.size / 1024 / 50 < 1;
        if (!isimg) {
          this.$message.error("上传图片只能是 图片 格式!");
          return false;
        }
        if (!isLt50k) {
          this.$message.error("上传图片大小不能超过 50kb!");
          return false;
        }
        return true;
      },
      roleset(val) {
        this.rolesettitle = '用户(' + val.Realname + ')-角色管理'
        this.rolesetVisible = true
        this.selecteduserid = val.Id + ''
        this.selectedrole = []
        let _this = this
        // request
        this.$axios.get('users/getuserrole/' + this.selecteduserid, {})
          .then(res => {
            console.log("-------res----",res.data)
            _this.mustrolelist = []
            // response
            for (let i = 0; i < res.data.length; i++) {
              if (_this.roleisexist(parseInt(res.data[i]))) {
                _this.selectedrole.push(parseInt(res.data[i]))
              }

              let flag = false
              let rdx = 0
              for (rdx = 0; rdx < _this.rolelist.length; rdx++) {
                if (parseInt(_this.rolelist[rdx].Id) == parseInt(res.data[i])) {
                  flag = true;
                  break;
                }
              }
              if (!flag) {
                _this.mustrolelist.push(parseInt(res.data[i]))
              }

            }

            let checkedCount = this.selectedrole.length
            this.roleCheckAll = checkedCount === this.rolelist.length
            this.isrolecheckall = checkedCount > 0 && checkedCount < this.rolelist.length
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      rolesave() {
        let _this = this
        for (let mdx in this.mustrolelist) {
          if (this.selectedrole.indexOf(this.mustrolelist[mdx]) == -1) {
            this.selectedrole.push(parseInt(this.mustrolelist[mdx]))
          }
        }
        let rolestring = this.selectedrole.join(',')
        // request
        this.$axios.put('users/setuserrole/' + this.selecteduserid + '_' + rolestring, {})
          .then(res => {
            // response
            if (res.data.code === 0) {
              _this.$message({
                type: 'success',
                message: res.data.message
              })
              // 更新界面
              this.list = []
              this.initData()
              this.rolesetVisible = false
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      handlecheckedrolechange() {
        let checkedCount = this.selectedrole.length
        this.roleCheckAll = checkedCount === this.rolelist.length
        this.isrolecheckall = checkedCount > 0 && checkedCount < this.rolelist.length
      },
      handleCheckAllChange(val) {
        this.selectedrole = val ? this.rolelistcheckall : []
        this.isrolecheckall = false
      },
      roleisexist(val) {
        for (let i = 0; i < this.rolelist.length; i++) {
          if (this.rolelist[i].Id === val) {
            return true
          }
        }
        return false
      },
      // loadequipsall() {
      //   // toggle loading
      //   let _this = this
      //   // request
      //   this.$axios.get('equipment/alllist', null)
      //     .then(res => {
      //       // response
      //       _this.equipalllist = res.data.items
      //       _this.equipdeviceslist = res.data.items
      //     })
      //     .catch(err => {
      //       // handle error
      //       console.error(err)
      //       this.loading = false
      //     })
      // },
      seachdata() {
        this.list = []
        this.currentPage = 1
        this.initData()
      },
      searchCommand(command) {
        if (command == 'clear') {
          this.clearSearch()
        }
      },
      handleSizeChange(value) {
        this.list = []
        this.size = value
        this.currentPage = 1
        this.initData()
      },
      handleCurrentChange(value) {
        this.currentPage = value
        this.list = []
        this.initData()
      },
      jstimehandle(val) {
        val = val.replace('T', ' ')
        return val.substring(0, 19)
      },
      opendatadialog(item, v, index) {
        let _this = this
        this.operatingitem = item
        this.datadialogVisible = true
        this.clearuserForm()
        if (item === 1) {
          this.dialogtitle = '新增用户'
          this.disabledserial = false
        } else if (item === 2) {
          this.$axios.get('organizes/parentlist/' + v.Departmentid, {})
            .then(res => {
              if (res.data.code === 0) {
                _this.dialogtitle = `编辑用户信息（${v.Realname}）`
                _this.disabledserial = true
                _this.userform.username = v.Username
                _this.userform.realname = v.Realname + ''
                _this.userform.telephone = v.Telephone
                _this.userform.mobile = v.Mobile
                _this.userform.description = v.Description
                _this.userform.role = v.Roleid + ''
                _this.userform.id = v.Id
                // 选中状态
                _this.selectedorg = []
                let pidarr = res.data.message.split(',')
                for (var i = pidarr.length - 1; i >= 0; i--) {
                  if (pidarr[i] !== '0') {
                    _this.selectedorg.push(parseInt(pidarr[i]))
                  }
                }
              } else {
                _this.$message({
                  type: 'warning',
                  message: '出现错误！'
                })
                this.datadialogVisible = false
              }
            })
            .catch(err => {
              // handle error
              console.error(err)
            })
        }
      },
      savedata(formName) {
        let _this = this
        if (this.selectedorg.length === 0) {
          _this.$message({
            type: 'warning',
            message: '请选择所属组织！'
          })
          return
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userform.departmentid = this.selectedorg[this.selectedorg.length - 1] + ''
            if (_this.operatingitem === 1) {
              _this.$axios.post('users', _this.userform)
                .then(res => {
                  // response
                  if (res.data.code === 0) {
                    _this.$message({
                      type: 'success',
                      message: res.data.message
                    })
                    this.list = []
                    _this.datadialogVisible = false
                    this.initData()
                  } else {
                    _this.$message({
                      type: 'warning',
                      message: res.data.message
                    })
                  }
                })
                .catch(err => {
                  // handle error
                  console.error(err)
                })
            } else if (_this.operatingitem === 2) {
              _this.$axios.put('users/' + _this.userform.id, _this.userform)
                .then(res => {
                  // response
                  if (res.data.code === 0) {
                    _this.$message({
                      type: 'success',
                      message: res.data.message
                    })
                    this.list = []
                    _this.datadialogVisible = false
                    // 更新界面
                    this.initData()
                  } else {
                    _this.$message({
                      type: 'warning',
                      message: res.data.message
                    })
                  }
                })
                .catch(() => {})
            }
          } else {
            return false
          }
        })
      },
      deletedata(val) {
        let _this = this
        _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$axios.delete('users/' + val.Id, null)
            .then(res => {
              // response
              if (res.data.code === 0) {
                _this.$message({
                  type: 'success',
                  message: res.data.message
                })
                this.list = []
                // 更新界面
                this.initData()
              } else {
                _this.$message({
                  type: 'warning',
                  message: res.data.message
                })
              }
            })
            .catch(() => {})
        }).catch(() => {})
      },
      resetForm(formName) {
        // this.$refs[formName].resetFields()
      },
      clearuserForm() {
        this.userform = {
          username: '',
          realname: '',
          telephone: '',
          mobile: '',
          description: ''
        }
      },
      permission(v) {
        let _this = this
        _this.ischeckbj = true // 过滤字段勾选时触发的选中事件
        this.userpermissdevicesselects = []
        this.permissiondialogtitle = `用户权限设置（${v.Realname}）`
        this.permissiondatadialogVisible = true
        this.userform.id = v.Id
        this.$axios.get('users/permission/' + v.Id, null)
          .then(res => {
            // response
            res.data.forEach((item, k) => {
              this.userpermissdevicesselects.push(item)
            })
            _this.getorgbyeid(res.data + '')
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      getorgbyeid(v) {
        let _this = this
        this.$axios.put('equipment/getorgidsbyeqids', {
            EquipmentIds: v
          })
          .then(res => {
            // response
            setTimeout(function () {
              setTimeout(function () {
                _this.ischeckbj = false
              }, 300)
              // 清空树选择框
              _this.$refs.userpermisstree.setCheckedKeys(res.data)
            }, 100)
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      savepermission() {
        let _this = this
        _this.$axios.put('users/permission/' + this.userform.id, {
            channelids: this.userpermissdevicesselects + ''
          })
          .then(res => {
            // response
            if (res.data.code === 0) {
              _this.$message({
                type: 'success',
                message: res.data.message
              })
              _this.permissiondatadialogVisible = false
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
          .catch(() => {})
      },
      resetpwd(val) {
        let _this = this
        _this.$confirm(`此操作将重置用户（${val.Realname}）的密码为123456, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$axios.put('users/resetpwd/' + val.Id, null)
            .then(res => {
              // response
              if (res.data.code === 0) {
                _this.$message({
                  type: 'success',
                  message: res.data.message
                })
              } else {
                _this.$message({
                  type: 'warning',
                  message: res.data.message
                })
              }
            })
            .catch(() => {})
        }).catch(() => {})
      },
      // 选择组织树时触发
      userpermissorgcheckedchange(data, checked, indeterminate) {
        let _this = this
        if (!_this.ischeckbj) {
          if (!_this.isfristchecked) {
            _this.isfristchecked = true
            setTimeout(function () {
              _this.isfristchecked = false
              _this.checkorgusermanage()
            }, 100)
          }
        }
      },
      checkorgusermanage() {
        let orgids = []
        let selectnodes = this.$refs.userpermisstree.getCheckedNodes()
        selectnodes.forEach(row => {
          orgids.push(row.id)
        })
        const params = {
          orgids: orgids
        }
        let _this = this
        this.$axios.get('equipment/getidsbyoid', {
            params
          })
          .then(res => {
            // response
            _this.userpermissdevicesselects = []
            if (res.data) {
              _this.equipdeviceslist = res.data
              res.data.forEach(row => {
                _this.userpermissdevicesselects.push(row.Id)
              })
            } else {
              _this.equipdeviceslist = _this.equipalllist
            }
          })
          .catch(err => {
            // handle error
            console.error(err)
            this.loading = false
          })
      },
      getorgtreelist() {
        let _this = this
        // request
        let params = {
          IsInnerOrganize: 1
        }
        _this.$axios.get('organizes/list', {
            params
          })
          .then(res => {
            _this.orgtreelist = window.toolfun_gettreejson(res.data.items, 'Id', 'Parentid', 'Id,Fullname')
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      clearSearch() {
        this.keyword = ''
        this.list = []
        this.initData()
      }
    }
  }

</script>

<style lang="scss">
  .el-pagination {
    margin: 1rem 0 2rem;
    text-align: right;
  }

  .triggerone {
    font-size: 13px;
    margin-left: 80px;
  }

  .plab {
    font-size: 13px;
    color: #999;
  }

  .userpermisstreediv {
    border: 1px #CCCCCC solid;
    overflow: auto;
    height: 328px;
    margin-right: 5px;
  }

  .userpermissdiv {
    margin-left: 1px;
    border: 1px #CCCCCC solid;
    overflow: auto;
    height: 320px;
    padding: 4px;
  }

  .userpermissdiv .el-checkbox {
    margin-top: 5px;
    margin-left: 15px;
  }

  .usersignimg-uploader .el-upload {
    border: 1px dashed #63b8ff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .usersignimg-uploader .el-upload:hover {
    border-color: #228b22;
  }

  .usersignimg-uploader-icon {
    font-size: 28px;
    color: #63b8ff;
    width: 66px;
    height: 66px;
    line-height: 66px;
    text-align: center;
  }

  .usersignimg-uploader-icon:hover {
    color: #228b22;
  }

  .uploadusersignimg {
    width: 66px;
    height: 66px;
    display: block;
  }

</style>