账号界面
This commit is contained in:
aixianling
@@ -1,4 +1,4 @@
|
||||
VUE_APP_SCOPE=xumu
|
||||
VUE_APP_API=http://192.168.1.87:12413
|
||||
VUE_APP_API=http://192.168.1.87:19897
|
||||
VUE_APP_IS_SIMPLE_SERVER=1
|
||||
VUE_APP_PORT=12413
|
||||
|
||||
247
project/xumu/AppSystemAccount/AppSystemAccount.vue
Normal file
247
project/xumu/AppSystemAccount/AppSystemAccount.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<section class="AppSystemAccount">
|
||||
<ai-page title="账号管理">
|
||||
<ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3"/>
|
||||
<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="appAllot(row)">功能分配</el-button>
|
||||
<el-button type="text" @click="chooseWechat(row.id)">公众号</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="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"/>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
</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: "name"},
|
||||
{label: "手机号", prop: "phone", align: 'center'},
|
||||
{label: "所属单位", prop: "unitName", align: 'center'},
|
||||
{label: "公众号", prop: "wxMpNames", align: 'center'},
|
||||
{label: "角色", prop: "roleName", align: 'center'},
|
||||
{slot: "options"}
|
||||
]
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
name: [{required: true, message: "请填写姓名"}],
|
||||
password: [{required: true, message: '请输入密码'}],
|
||||
unitName: [{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: [],
|
||||
isShow: false,
|
||||
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
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
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) {
|
||||
this.instance.post(`/api/sysuserwxmp/addOrUpdate`, {
|
||||
...this.form
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.getTableData()
|
||||
this.$message.success('提交成功！')
|
||||
this.isShow = false
|
||||
|
||||
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)
|
||||
},
|
||||
handleAreaSelect(v) {
|
||||
this.dialogForm.areaName = v?.[0]?.label
|
||||
}
|
||||
},
|
||||
created() {
|
||||
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>
|
||||
@@ -38,13 +38,11 @@
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import AiHighlight from "../layout/AiHighlight";
|
||||
import instance from "../../lib/js/request";
|
||||
import Area from "../../lib/js/area";
|
||||
import instance from "../../../lib/js/request";
|
||||
import Area from "../../../lib/js/area";
|
||||
|
||||
export default {
|
||||
name: 'AiArea',
|
||||
components: {AiHighlight},
|
||||
inject: {
|
||||
elFormItem: {default: ""},
|
||||
elForm: {default: ''},
|
||||
67
ui/packages/common/area/AiAreaTree.vue
Normal file
67
ui/packages/common/area/AiAreaTree.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script>
|
||||
import instance from "dui/lib/js/request";
|
||||
|
||||
export default {
|
||||
name: "AiAreaTree",
|
||||
props: {
|
||||
instance: {default: () => instance},
|
||||
action: {default: "/admin/area/queryAreaByParentId"},
|
||||
rootId: String,
|
||||
value: String,
|
||||
range: {default: 5} //可选最小级别地区
|
||||
},
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "input"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaProps: {
|
||||
label: "name",
|
||||
isLeaf: "isLeaf"
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAreas(node, resolve) {
|
||||
let id = node.data?.id
|
||||
if (node.level == 0) {
|
||||
id = this.rootId
|
||||
}
|
||||
this.getAreasByParent(id).then(resolve)
|
||||
},
|
||||
handleClick(data) {
|
||||
this.$emit("input", data.id)
|
||||
},
|
||||
getAreasByParent(id) {
|
||||
return this.instance.post(this.action, null, {
|
||||
withoutToken: !0,
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
return res.data?.map(e => ({...e, isLeaf: e.type == this.range})) || []
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar class="AiAreaTree">
|
||||
<el-tree :load="getAreas" @node-click="handleClick" lazy :props="areaProps"/>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AiAreaTree {
|
||||
min-width: 200px;
|
||||
height: 100%;
|
||||
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-tree) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
ui/packages/layout/AiPage.vue
Normal file
58
ui/packages/layout/AiPage.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import AiTitle from "dui/packages/basic/AiTitle.vue";
|
||||
|
||||
export default {
|
||||
name: "AiPage",
|
||||
components: {AiTitle},
|
||||
props: {
|
||||
contentString: {default: "card"}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="AiPage">
|
||||
<slot v-if="$slots.title" name="title"/>
|
||||
<ai-title v-else-if="$attrs.title" :title="$attrs.title" isShowBottomBorder/>
|
||||
<div class="fill main">
|
||||
<div class="left">
|
||||
<slot name="left"/>
|
||||
</div>
|
||||
<div class="fill" :class="[contentString]">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AiPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
overflow: hidden;
|
||||
background: #f3f6f9;
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 12px 16px 12px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||
}
|
||||
|
||||
.left {
|
||||
max-width: 50%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user