246 lines
8.3 KiB
Vue
246 lines
8.3 KiB
Vue
<template>
|
|
<section class="AppSystemAccount">
|
|
<ai-page title="账号管理">
|
|
<ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3" @input="page.pageNum=1,getTableData()"/>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-button type="primary" icon="iconfont iconAdd" @click="dialog = true">添加</el-button>
|
|
<!-- <el-button type="primary" :disabled="!ids.toString()" @click="batchAllot">功能分配</el-button>-->
|
|
</template>
|
|
<template #right>
|
|
<el-input size="small" placeholder="搜索姓名、手机号" v-model="search.condition" clearable
|
|
@change="page.pageNum=1, getTableData()"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.pageNum" :size.sync="page.pageSize"
|
|
@getList="getTableData" :col-configs="colConfigs" :dict="dict" @selection-change="v => ids = v.map(e => e.id)">
|
|
<el-table-column slot="name" label="姓名" width="180px">
|
|
<el-row type="flex" align="middle" slot-scope="{row}">
|
|
<el-image class="avatar" :src="row.avatar" :preview-src-list="[row.avatar]">
|
|
<el-image slot="error" src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt=""/>
|
|
</el-image>
|
|
<div>{{ row.name }}</div>
|
|
</el-row>
|
|
</el-table-column>
|
|
<el-table-column slot="options" align="center" label="操作" fixed="right" width="180px">
|
|
<template slot-scope="{ row }">
|
|
<div class="table-options">
|
|
<el-button type="text" @click="changeEnable(row)">{{ row.status == 1 ? '禁用' : '启用' }}</el-button>
|
|
<el-button type="text" @click="appAllot(row)">编辑</el-button>
|
|
<el-button type="text" @click="handleDelete(row.id)">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</ai-page>
|
|
<!--添加账号、功能分配-->
|
|
<ai-dialog :title="dialogTitle" :visible.sync="dialog" width="60vw" @open="initDialogData"
|
|
@onConfirm="updateAccount" @closed="dialogForm = {}">
|
|
<el-form ref="updateAccountForm" :model="dialogForm" :rules="rules" size="small" label-width="120px" class="grid">
|
|
<el-form-item required label="行政区划" prop="areaId">
|
|
<ai-area-get v-model.trim="dialogForm.areaId" placeholder="请选择" :instance="instance"/>
|
|
</el-form-item>
|
|
<el-form-item required label="账户" prop="username">
|
|
<el-input v-model.trim="dialogForm.username" placeholder="请输入..." clearable :maxLength="15"/>
|
|
</el-form-item>
|
|
<el-form-item required label="账号密码" prop="password" v-if="!isEdit" :rules="[{ required: true, message: '请输入密码' }]">
|
|
<el-input v-model.trim="dialogForm.password" placeholder="请输入密码" clearable :minlength="6"/>
|
|
</el-form-item>
|
|
<el-form-item required label="角色" prop="roleId">
|
|
<el-select placeholder="请选择角色" :value="dialogForm.roleId" filterable v-model="dialogForm.roleId" clearable>
|
|
<el-option v-for="(op, i) in accountRoles" :key="i" :label="op.name" :value="op.id"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item required label="姓名" prop="name">
|
|
<el-input v-model.trim="dialogForm.name" placeholder="请输入..." clearable :maxLength="15"/>
|
|
</el-form-item>
|
|
<el-form-item label="手机号码" prop="phone">
|
|
<el-input v-model.trim="dialogForm.phone" placeholder="请输入..." clearable :maxLength="11"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: "AppSystemAccount",
|
|
label: "账号管理",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
cascaderProps() {
|
|
return {
|
|
value: 'id',
|
|
checkStrictly: true,
|
|
emitPath: false
|
|
}
|
|
},
|
|
isEdit() {
|
|
return !!this.dialogForm.id
|
|
},
|
|
dialogTitle() {
|
|
return this.isEdit ? '功能分配' : '添加账号'
|
|
},
|
|
colConfigs() {
|
|
return [
|
|
// {type: 'selection', align: 'center'},
|
|
{label: "账号", slot: "username"},
|
|
{label: "姓名", slot: "name"},
|
|
{label: "联系方式", prop: "phone", align: 'center'},
|
|
{label: "角色", prop: "roleName", align: 'center'},
|
|
{label: "状态", prop: "status", align: 'center', dict: "enable"},
|
|
{label: "认证状态", prop: "authStatus", align: 'center', dict: "authStatus"},
|
|
{label: "配置状态", prop: "configStatus", align: 'center', dict: "configStatus"},
|
|
{slot: "options"}
|
|
]
|
|
},
|
|
rules() {
|
|
return {
|
|
username: [{required: true, message: "请输入账号"}],
|
|
name: [{required: true, message: "请输入姓名"}],
|
|
password: [{required: true, message: '请输入密码'}],
|
|
areaId: [{required: true, message: "请选择行政区划"}],
|
|
roleId: [{required: true, message: "请选择角色"}],
|
|
// phone: [{required: true, message: "请输入手机号码"}]
|
|
}
|
|
},
|
|
rootArea: v => v.user.info.areaId
|
|
},
|
|
data() {
|
|
return {
|
|
accountRoles: [],
|
|
page: {pageNum: 1, pageSize: 10, total: 0},
|
|
dialog: false,
|
|
dialogForm: {},
|
|
tableData: [],
|
|
search: {condition: ""},
|
|
ids: [],
|
|
form: {
|
|
appids: [],
|
|
userId: ''
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
getTableData() {
|
|
this.instance.post("/admin/user/page", null, {
|
|
params: {...this.page, ...this.search}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data?.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
onConfirm() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
this.instance.post(`/api/sysuserwxmp/addOrUpdate`, {
|
|
...this.form
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.getTableData()
|
|
this.$message.success('提交成功！')
|
|
|
|
this.getList()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
initDialogData() {
|
|
//用于优化初始化数据
|
|
this.getAccountRoles()
|
|
},
|
|
getAccountRoles() {
|
|
this.accountRoles.length == 0 && this.instance.post("/admin/role/list-all").then(res => {
|
|
if (res?.data) {
|
|
this.accountRoles = res.data
|
|
}
|
|
})
|
|
},
|
|
batchAllot() {
|
|
this.dialog = true
|
|
this.dialogForm = {areaId: this.user.info.areaId, ids: this.ids}
|
|
},
|
|
appAllot(row) {
|
|
this.dialog = true
|
|
this.dialogForm = JSON.parse(JSON.stringify({
|
|
...row,
|
|
areaId: row.areaId || this.user.info.areaId
|
|
}));
|
|
},
|
|
// 修改
|
|
updateAccount() {
|
|
this.$refs.updateAccountForm.validate(v => {
|
|
if (v) {
|
|
this.instance.post("/admin/user/addOrEdit", this.dialogForm).then(res => {
|
|
if (res?.code == 0) {
|
|
this.dialog = false;
|
|
this.$message.success("提交成功")
|
|
this.getTableData();
|
|
} else {
|
|
this.$message.error(res?.msg)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleDelete(ids) {
|
|
this.$confirm("是否要删除该账号?").then(() => {
|
|
this.instance.post("/admin/user/del", null, {
|
|
params: {ids}
|
|
}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.getTableData();
|
|
this.$message.success("删除成功!");
|
|
}
|
|
})
|
|
}).catch(() => 0)
|
|
},
|
|
changeEnable(row) {
|
|
const {status, id} = row
|
|
this.$confirm(`是否要${status == 1 ? '禁用' : '启用'}该账号?`).then(() => {
|
|
this.instance.post("/user/update-status", null, {params: {id}}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success(`${status == 1 ? '禁用' : '启用'}成功!`)
|
|
this.getTableData()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.dict.load("enable", "authStatus", "configStatus")
|
|
this.getTableData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppSystemAccount {
|
|
height: 100%;
|
|
|
|
:deep(.avatar) {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
:deep(.el-form) {
|
|
|
|
.el-cascader,
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|