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> <template>
<section class="AppSystemAccount"> <section class="AppSystemAccount">
<ai-page title="账号管理"> <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> <ai-search-bar>
<template #left> <template #left>
<el-button type="primary" icon="iconfont iconAdd" @click="dialog = true">添加</el-button> <el-button type="primary" icon="iconfont iconAdd" @click="dialog = true">添加</el-button>
@@ -9,15 +9,15 @@
</template> </template>
<template #right> <template #right>
<el-input size="small" placeholder="搜索姓名、手机号" v-model="search.condition" clearable <el-input size="small" placeholder="搜索姓名、手机号" v-model="search.condition" clearable
@change="page.pageNum = 1, getTableData()" /> @change="page.pageNum=1, getTableData()"/>
</template> </template>
</ai-search-bar> </ai-search-bar>
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.pageNum" :size.sync="page.pageSize" <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-table-column slot="name" label="姓名" width="180px">
<el-row type="flex" align="middle" slot-scope="{row}"> <el-row type="flex" align="middle" slot-scope="{row}">
<el-image class="avatar" :src="row.avatar" :preview-src-list="[row.avatar]"> <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> </el-image>
<div>{{ row.name }}</div> <div>{{ row.name }}</div>
</el-row> </el-row>
@@ -25,8 +25,8 @@
<el-table-column slot="options" align="center" label="操作" fixed="right" width="180px"> <el-table-column slot="options" align="center" label="操作" fixed="right" width="180px">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div class="table-options"> <div class="table-options">
<el-button type="text" @click="appAllot(row)">功能分配</el-button> <el-button type="text" @click="changeEnable(row)">{{ row.status == 1 ? '禁用' : '启用' }}</el-button>
<el-button type="text" @click="chooseWechat(row.id)">公众号</el-button> <el-button type="text" @click="appAllot(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row.id)">删除</el-button> <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
</div> </div>
</template> </template>
@@ -34,35 +34,36 @@
</ai-table> </ai-table>
</ai-page> </ai-page>
<!--添加账号、功能分配--> <!--添加账号、功能分配-->
<ai-dialog :title="dialogTitle" :visible.sync="dialog" width="600px" @open="initDialogData" <ai-dialog :title="dialogTitle" :visible.sync="dialog" width="60vw" @open="initDialogData"
@onConfirm="updateAccount" @closed="dialogForm = {}"> @onConfirm="updateAccount" @closed="dialogForm = {}">
<el-form ref="updateAccountForm" :model="dialogForm" :rules="rules" size="small" label-width="120px"> <el-form ref="updateAccountForm" :model="dialogForm" :rules="rules" size="small" label-width="120px" class="grid">
<el-form-item required label="姓名" prop="name"> <el-form-item required label="行政区划" prop="areaId">
<el-input v-model.trim="dialogForm.name" placeholder="请输入..." clearable :maxLength="15" /> <ai-area-get v-model.trim="dialogForm.areaId" placeholder="请选择" :instance="instance"/>
</el-form-item> </el-form-item>
<el-form-item required label="手机号码" prop="phone"> <el-form-item required label="账户" prop="username">
<el-input v-model.trim="dialogForm.phone" placeholder="请输入..." clearable :maxLength="11" :disabled="isEdit" /> <el-input v-model.trim="dialogForm.username" placeholder="请输入..." clearable :maxLength="15"/>
</el-form-item> </el-form-item>
<el-form-item required label="账号密码" prop="password" v-if="!isEdit" <el-form-item required label="账号密码" prop="password" v-if="!isEdit" :rules="[{ required: true, message: '请输入密码' }]">
:rules="[{ required: true, message: '请输入密码' }]"> <el-input v-model.trim="dialogForm.password" placeholder="请输入密码" clearable :minlength="6"/>
<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> </el-form-item>
<el-form-item required label="角色" prop="roleId"> <el-form-item required label="角色" prop="roleId">
<el-select size="small" placeholder="请选择角色" :value="dialogForm.roleId" filterable v-model="dialogForm.roleId" <el-select placeholder="请选择角色" :value="dialogForm.roleId" filterable v-model="dialogForm.roleId" clearable>
clearable> <el-option v-for="(op, i) in accountRoles" :key="i" :label="op.name" :value="op.id"/>
<el-option v-for="(op, i) in accountRoles" :key="i" :label="op.name" :value="op.id" />
</el-select> </el-select>
</el-form-item> </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> </el-form>
</ai-dialog> </ai-dialog>
</section> </section>
</template> </template>
<script> <script>
import { mapState } from "vuex"; import {mapState} from "vuex";
export default { export default {
name: "AppSystemAccount", name: "AppSystemAccount",
@@ -90,21 +91,24 @@ export default {
colConfigs() { colConfigs() {
return [ return [
// {type: 'selection', align: 'center'}, // {type: 'selection', align: 'center'},
{ label: "姓名", slot: "name" }, {label: "账号", slot: "username"},
{ label: "手机号", prop: "phone", align: 'center' }, {label: "姓名", slot: "name"},
{ label: "所属单位", prop: "unitName", align: 'center' }, {label: "联系方式", prop: "phone", align: 'center'},
{ label: "公众号", prop: "wxMpNames", align: 'center' }, {label: "角色", prop: "roleName", align: 'center'},
{ label: "角色", prop: "roleName", align: 'center' }, {label: "状态", prop: "status", align: 'center', dict: "enable"},
{ slot: "options" } {label: "认证状态", prop: "authStatus", align: 'center', dict: "authStatus"},
{label: "配置状态", prop: "configStatus", align: 'center', dict: "configStatus"},
{slot: "options"}
] ]
}, },
rules() { rules() {
return { return {
name: [{ required: true, message: "请填写姓名" }], username: [{required: true, message: "请输入账号"}],
password: [{ required: true, message: '请输入密码' }], name: [{required: true, message: "请输入姓名"}],
unitName: [{ required: true, message: "请选择所属单位" }], password: [{required: true, message: '请输入密码'}],
roleId: [{ required: true, message: "请选择角色" }], areaId: [{required: true, message: "请选择行政区划"}],
phone: [{ required: true, message: "请输入手机号码" }] roleId: [{required: true, message: "请选择角色"}],
// phone: [{required: true, message: "请输入手机号码"}]
} }
}, },
rootArea: v => v.user.info.areaId rootArea: v => v.user.info.areaId
@@ -112,13 +116,12 @@ export default {
data() { data() {
return { return {
accountRoles: [], accountRoles: [],
page: { pageNum: 1, pageSize: 10, total: 0 }, page: {pageNum: 1, pageSize: 10, total: 0},
dialog: false, dialog: false,
dialogForm: {}, dialogForm: {},
tableData: [], tableData: [],
search: { condition: "" }, search: {condition: ""},
ids: [], ids: [],
isShow: false,
form: { form: {
appids: [], appids: [],
userId: '' userId: ''
@@ -128,7 +131,7 @@ export default {
methods: { methods: {
getTableData() { getTableData() {
this.instance.post("/admin/user/page", null, { this.instance.post("/admin/user/page", null, {
params: { ...this.page, ...this.search } params: {...this.page, ...this.search}
}).then(res => { }).then(res => {
if (res?.data) { if (res?.data) {
this.tableData = res.data?.records 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() { onConfirm() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
@@ -157,7 +148,6 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.getTableData() this.getTableData()
this.$message.success('提交成功！') this.$message.success('提交成功！')
this.isShow = false
this.getList() this.getList()
} }
@@ -178,7 +168,7 @@ export default {
}, },
batchAllot() { batchAllot() {
this.dialog = true 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) { appAllot(row) {
this.dialog = true this.dialog = true
@@ -206,7 +196,7 @@ export default {
handleDelete(ids) { handleDelete(ids) {
this.$confirm("是否要删除该账号?").then(() => { this.$confirm("是否要删除该账号?").then(() => {
this.instance.post("/admin/user/del", null, { this.instance.post("/admin/user/del", null, {
params: { ids } params: {ids}
}).then(res => { }).then(res => {
if (res?.code == 0) { if (res?.code == 0) {
this.getTableData(); this.getTableData();
@@ -215,11 +205,20 @@ export default {
}) })
}).catch(() => 0) }).catch(() => 0)
}, },
handleAreaSelect(v) { changeEnable(row) {
this.dialogForm.areaName = v?.[0]?.label 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() { created() {
this.dict.load("enable", "authStatus", "configStatus")
this.getTableData() this.getTableData()
} }
} }