kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(AppSystemAccount): 优化账号管理功能

Browse Source 
- 添加禁用/启用账号功能
- 编辑账号信息
- 优化账号列表展示
- 移除不必要的功能
- 调整表单验证规则
This commit is contained in:
aixianling
2024-12-18 12:01:46 +08:00
parent e789570a1b
commit d40830188d
1 changed files with 54 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
project/xumu/AppSystemAccount/AppSystemAccount.vue
View File

@@ -1,7 +1,7 @@
<template>
<section class="AppSystemAccount">
<ai-page title="账号管理">
<ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3" />
<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>
@@ -9,15 +9,15 @@
</template>
<template #right>
<el-input size="small" placeholder="搜索姓名、手机号" v-model="search.condition" clearable
@change="page.pageNum = 1, getTableData()" />
@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)">
@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 slot="error" src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt=""/>
</el-image>
<div>{{ row.name }}</div>
</el-row>
@@ -25,8 +25,8 @@
<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="appAllot(row)">功能分配</el-button>
<el-button type="text" @click="chooseWechat(row.id)">公众号</el-button>
<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>
@@ -34,35 +34,36 @@
</ai-table>
</ai-page>
<!--添加账号、功能分配-->
<ai-dialog :title="dialogTitle" :visible.sync="dialog" width="600px" @open="initDialogData"
@onConfirm="updateAccount" @closed="dialogForm = {}">
<el-form ref="updateAccountForm" :model="dialogForm" :rules="rules" size="small" label-width="120px">
<el-form-item required label="姓名" prop="name">
<el-input v-model.trim="dialogForm.name" placeholder="请输入..." clearable :maxLength="15" />
<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="phone">
<el-input v-model.trim="dialogForm.phone" placeholder="请输入..." clearable :maxLength="11" :disabled="isEdit" />
<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="unitName" :rules="[{ required: true, message: '请输入所属单位' }]">
<el-input v-model.trim="dialogForm.unitName" placeholder="请输入所属单位" clearable />
<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 size="small" 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 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";
import {mapState} from "vuex";
export default {
name: "AppSystemAccount",
@@ -90,21 +91,24 @@ export default {
colConfigs() {
return [
// {type: 'selection', align: 'center'},
{ label: "姓名", slot: "name" },
{ label: "手机号", prop: "phone", align: 'center' },
{ label: "所属单位", prop: "unitName", align: 'center' },
{ label: "公众号", prop: "wxMpNames", align: 'center' },
{ label: "角色", prop: "roleName", align: 'center' },
{ slot: "options" }
{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 {
name: [{ required: true, message: "请填写姓名" }],
password: [{ required: true, message: '请输入密码' }],
unitName: [{ required: true, message: "请选择所属单位" }],
roleId: [{ required: true, message: "请选择角色" }],
phone: [{ required: true, message: "请输入手机号码" }]
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
@@ -112,13 +116,12 @@ export default {
data() {
return {
accountRoles: [],
page: { pageNum: 1, pageSize: 10, total: 0 },
page: {pageNum: 1, pageSize: 10, total: 0},
dialog: false,
dialogForm: {},
tableData: [],
search: { condition: "" },
search: {condition: ""},
ids: [],
isShow: false,
form: {
appids: [],
userId: ''
@@ -128,7 +131,7 @@ export default {
methods: {
getTableData() {
this.instance.post("/admin/user/page", null, {
params: { ...this.page, ...this.search }
params: {...this.page, ...this.search}
}).then(res => {
if (res?.data) {
this.tableData = res.data?.records
@@ -136,18 +139,6 @@ export default {
}
})
},
chooseWechat(id) {
this.form.userId = id
this.instance.post(`/api/sysuserwxmp/list?size=1000&userId=${id}`).then(res => {
if (res.code == 0) {
this.form.appids = res.data.records.map(v => v.appId)
}
})
this.isShow = true
},
onConfirm() {
this.$refs.form.validate((valid) => {
if (valid) {
@@ -157,7 +148,6 @@ export default {
if (res.code == 0) {
this.getTableData()
this.$message.success('提交成功！')
this.isShow = false
this.getList()
}
@@ -178,7 +168,7 @@ export default {
},
batchAllot() {
this.dialog = true
this.dialogForm = { areaId: this.user.info.areaId, ids: this.ids }
this.dialogForm = {areaId: this.user.info.areaId, ids: this.ids}
},
appAllot(row) {
this.dialog = true
@@ -206,7 +196,7 @@ export default {
handleDelete(ids) {
this.$confirm("是否要删除该账号?").then(() => {
this.instance.post("/admin/user/del", null, {
params: { ids }
params: {ids}
}).then(res => {
if (res?.code == 0) {
this.getTableData();
@@ -215,11 +205,20 @@ export default {
})
}).catch(() => 0)
},
handleAreaSelect(v) {
this.dialogForm.areaName = v?.[0]?.label
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()
}
}