<template>
|
<div class="v-service-user">
|
<el-row :gutter="5">
|
<el-col :span="5">
|
<div class="fa-card-a" style="margin-right: 5px;height: calc(100vh - 123px)">
|
<zt-dept-tree @on-selected="onDeptSelected"/>
|
</div>
|
</el-col>
|
<el-col :span="19">
|
<div class="fa-card-a" style="margin-left: 5px;">
|
<zt-table-wraper ref="tableObj" v-slot="{ table }" delete-url="/sys/user"
|
export-url="/sys/user/export" query-url="/sys/userEx/page">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
|
<el-form-item prop="username" style="margin-top: 2px;margin-left: 10px">
|
<el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
|
</el-form-item>
|
<el-form-item prop="username" style="width: 100px;">
|
<zt-dict v-model="dataForm.status" clearable dict="user_status" placeholder="状态"></zt-dict>
|
</el-form-item>
|
|
<!--<zt-form-item prop="status">-->
|
<!--<el-select v-model="dataForm.status" size="small" clearable :placeholder="$t('user.status')"-->
|
<!--@keyup.enter.native="search()">-->
|
<!--<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>-->
|
<!--</el-select>-->
|
<!--</zt-form-item>-->
|
<el-form-item class="message-btn">
|
<zt-button type="query" @click="table.query()"/>
|
<zt-button perm="sys:user" type="add" @click="table.editHandle()"/>
|
<zt-button perm="sys:user:delete" type="delete" @click="table.deleteHandle()"/>
|
</el-form-item>
|
</el-form>
|
<el-table v-adaptive="{bottomOffset:70}" v-loading="table.dataLoading"
|
:cell-style="cellStyle"
|
:data="table.dataList"
|
border
|
height="650px"
|
@selection-change="table.selectionChangeHandle" @sort-change="table.sortChangeHandle">
|
<el-table-column align="center" type="selection" width="40"/>
|
<el-table-column align="center" :label="$t('user.username')" prop="username" sortable="custom"
|
width="120"/>
|
<el-table-column align="center" :label="$t('user.realName')" prop="realName" width="120"/>
|
<el-table-column align="center" :label="$t('user.deptName')" prop="deptName"/>
|
<el-table-column align="center" :label="$t('user.mobile')" prop="mobile" width="120"/>
|
<el-table-column align="center" label="角色" prop="roles"/>
|
<zt-table-column-dict :label="$t('user.status')" dict="user_status" prop="status" width="70"/>
|
<zt-table-column-handle :has-delete="false" :has-edit="false" :has-view="false" :table="table"
|
width="260">
|
<template v-slot="{ row }">
|
<zt-table-button perm="sys:user:update" @click="table.editHandle(row)">修改</zt-table-button>
|
<zt-table-button perm="sys:user:delete" type="danger" @click="table.deleteHandle(row)">删除
|
</zt-table-button>
|
<zt-table-button v-if="row.status === 0" perm="sys:user:status" @click="cut(row)">授权
|
</zt-table-button>
|
<zt-table-button v-if="row.status === 1" perm="sys:user:status" @click="cut(row)">取消授权
|
</zt-table-button>
|
<zt-table-button perm="sys:user:role" @click="setRole(row)">{{
|
$t('user.setRole')
|
}}
|
</zt-table-button>
|
<zt-table-button perm="sys:user:password" @click="resetPassword(row)">{{
|
$t('user.resetPassword')
|
}}
|
</zt-table-button>
|
</template>
|
</zt-table-column-handle>
|
</el-table>
|
<!-- 弹窗, 新增 / 修改 -->
|
<add-or-update @refreshDataList="table.query"/>
|
<user-role ref="userRole" @renovate="renovate()"></user-role>
|
</zt-table-wraper>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import AddOrUpdate from './user-add-or-update'
|
import UserRole from './user-role'
|
|
export default {
|
data() {
|
return {
|
selectDeptFlag: false,
|
dataForm: {
|
username: '',
|
deptId: '',
|
companyId: ''
|
},
|
options: [{value: 1, label: '有效'}, {value: 0, label: '无效'}]
|
}
|
},
|
watch: {
|
filterCompany(val) {
|
this.$refs.companyTree.filter(val)
|
}
|
},
|
methods: {
|
cellStyle({column}) {
|
if (column.label === "用户名" || column.label === '真实姓名' || column.label === '所属部门' || column.label === '角色') {
|
return 'text-align: left !important;'
|
}
|
},
|
onDeptSelected(data) {
|
if (!data.company) {
|
this.dataForm.deptId = data.id
|
this.dataForm.companyId = data.companyId
|
this.selectDeptFlag = true
|
} else {
|
this.dataForm.deptId = ''
|
this.dataForm.companyId = data.id
|
this.selectDeptFlag = false
|
}
|
this.$refs.tableObj.query()
|
},
|
// 设置角色
|
async setRole(user) {
|
this.$refs['userRole'].$refs['dialog'].init(user.id, user)
|
},
|
renovate() {
|
this.$refs.tableObj.query()
|
},
|
async cut(row) {
|
let res
|
if (row.status === 1) {
|
res = await this.$tip.confirm('确定要将该用户的状态有效=>无效吗?')
|
} else {
|
res = await this.$tip.confirm('确定要将该用户的状态无效=>有效吗?')
|
}
|
if (res) {
|
if (row.status === 1) {
|
row.status = 0
|
} else {
|
row.status = 1
|
}
|
let resUrl = await this.$http.put('/sys/userEx', row)
|
if (resUrl.success) {
|
await this.$tip.success()
|
this.$refs.tableObj.query()
|
}
|
}
|
},
|
// 重置用户密码
|
async resetPassword(row) {
|
let res = await this.$tip.confirm('确定要重置用户密码吗?')
|
if (res) {
|
let resUrl = await this.$http.get('/sys/user/resetPassword?id=' + row.id)
|
if (resUrl.success) {
|
await this.$tip.success()
|
}
|
}
|
}
|
},
|
mounted() {
|
},
|
components: {
|
AddOrUpdate,
|
UserRole
|
}
|
}
|
</script>
|
