boyue2025/dbd-meeting-html
3
0
Fork 0
mirror of https://gitee.com/elegant_wings/dbd-meeting-html.git synced 2025-06-21 06:49:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

描述：用户管理选择用户

Browse Source
This commit is contained in:
SelfRidicule 2024-03-25 11:01:45 +08:00
parent cd3fc1f20a
commit 0113927f92
1 changed files with 76 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
src/views/system/modules/UserModal.vue
View File

@ -1,95 +1,97 @@
<template> <template>
<a-modal <a-modal
title="操作" title='操作'
style="top: 20px;" style='top: 20px;'
:width="800" :width='800'
v-model="visible" v-model='visible'
:confirmLoading="confirmLoading" :confirmLoading='confirmLoading'
@ok="handleSubmit" @ok='handleSubmit'
> >
<a-spin :spinning="spinning"> <a-spin :spinning='spinning'>
<a-form :form="form"> <a-form :form='form'>
<a-form-item style="display:none"> <a-form-item style='display:none'>
<a-input v-decorator="['id']"/> <a-input v-decorator="['id']" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户名" > <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='用户名'>
<a-input placeholder="用户名" v-decorator="['username', {rules: [{ required: true, message: '请输入用户名' }]}]" /> <a-input placeholder='用户名'
v-decorator="['username', {rules: [{ required: true, message: '请输入用户名' }]}]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="昵称"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='昵称'>
<a-input v-decorator="['nickname', {rules: [{ required: true, message: '请输入昵称' }]}] "placeholder="起一个名字"/> <a-input v-decorator="['nickname', {rules: [{ required: true, message: '请输入昵称' }]}] "
placeholder='起一个名字' />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机" > <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='手机'>
<a-input placeholder="手机" v-decorator="['mobile', {rules: [{ required: true, message: '请输入手机' }]}]" /> <a-input placeholder='手机' v-decorator="['mobile', {rules: [{ required: true, message: '请输入手机' }]}]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='状态'>
<a-select v-decorator="['status', {initialValue:'0',rules: [{ required: true, message: '请选择状态' }]}]"> <a-select v-decorator="['status', {initialValue:'0',rules: [{ required: true, message: '请选择状态' }]}]">
<a-select-option :value="'0'">正常</a-select-option> <a-select-option :value="'0'">正常</a-select-option>
<a-select-option :value="'1'">禁用</a-select-option> <a-select-option :value="'1'">禁用</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item v-if="tenantId !== null" :labelCol="labelCol" :wrapperCol="wrapperCol" label="部门"> <a-form-item v-if='tenantId !== null' :labelCol='labelCol' :wrapperCol='wrapperCol' label='部门'>
<a-tree-select <a-tree-select
v-decorator="['deptId', {rules: [{ required: true, message: '请选择部门' }]}]" v-decorator="['deptId', {rules: [{ required: true, message: '请选择部门' }]}]"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:treeData="deptTree" :treeData='deptTree'
@change="onChange" @change='onChange'
placeholder="部门" placeholder='部门'
treeDefaultExpandAll treeDefaultExpandAll
> >
</a-tree-select> </a-tree-select>
</a-form-item> </a-form-item>
<a-form-item v-if="tenantId === null" :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属租户"> <a-form-item v-if='tenantId === null' :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属租户'>
<a-select v-decorator="['tenantId', {rules: [{ required: true, message: '请选择所属租户' }]}]"> <a-select v-decorator="['tenantId', {rules: [{ required: true, message: '请选择所属租户' }]}]">
<a-select-option v-for="item in tenantData" :key="item.value">{{ item.text }}</a-select-option> <a-select-option v-for='item in tenantData' :key='item.value'>{{ item.text }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item v-if="tenantId !== null" :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属园区"> <a-form-item v-if='tenantId !== null' :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属园区'>
<a-select v-decorator="['parkId', {rules: [{ required: true, message: '请选择所属园区' }]}]"> <a-select v-decorator="['parkId', {rules: [{ required: true, message: '请选择所属园区' }]}]">
<a-select-option v-for="item in parkData" :key="item.value">{{ item.text }}</a-select-option> <a-select-option v-for='item in parkData' :key='item.value'>{{ item.text }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拥有角色" hasFeedback> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='拥有角色' hasFeedback>
<a-select <a-select
style="width: 100%" style='width: 100%'
mode="multiple" mode='multiple'
v-decorator="['roleIds', {rules: [{ required: true, message: '请选择角色' }]}]" v-decorator="['roleIds', {rules: [{ required: true, message: '请选择角色' }]}]"
:allowClear="true" :allowClear='true'
> >
<a-select-option v-for="(action) in roleAll" :key="action.id" >{{ action.roleName }}</a-select-option> <a-select-option v-for='(action) in roleAll' :key='action.id'>{{ action.roleName }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择企业"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='选择企业'>
<a-select v-decorator="['customerId', {rules: [{ required: true, message: '请选择企业' }]}]"> <a-select v-decorator="['customerId', {rules: [{ required: true, message: '请选择企业' }]}]">
<a-select-option v-for="item in customerList" :key="item.value" >{{ item.text }}</a-select-option> <a-select-option v-for='item in customerList' :key='item.value'>{{ item.text }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择用户"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='选择用户'>
<a-select <a-select
show-search show-search
v-decorator="['staffId', {rules: [{required: true, message: '请选择手机号码'}]}]" v-decorator="['staffId', {rules: [{required: true, message: '请选择手机号码'}]}]"
placeholder="请选择手机号码" placeholder='请选择手机号码'
style="width: 200px" style='width: 200px'
:default-active-first-option="false" :default-active-first-option='false'
:show-arrow="false" :show-arrow='false'
:filter-option="false" :filter-option='false'
:not-found-content="null" :not-found-content='null'
@search="handleSearch" @search='handleSearch'
@change="handleChange" @change='handleChange'
> >
<a-select-option v-for="item in data" :key="item.id"> <a-select-option v-for='item in data' :value='item.id' :key='item.id'>
{{item-username}} -{{ item.mobile }} {{ item.username }} -{{ item.mobile }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='描述'>
<a-textarea :rows="3" placeholder="..." v-decorator="['remark']"/> <a-textarea :rows='3' placeholder='...' v-decorator="['remark']" />
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-spin> </a-spin>
@ -97,7 +99,7 @@
</template> </template>
<script> <script>
import { getRoleAll, saveUser, getUser } from '@/api/system' import { getRoleAll, saveUser, getUser } from '@/api/system'
import { saveCustomerContacts,getStaffList,updateStaff,getStaffListByUser } from '@/api/admin/customer' import { saveCustomerContacts, getStaffList, updateStaff, getStaffListByUser } from '@/api/admin/customer'
import { import {
getCustomerList getCustomerList
@ -106,6 +108,7 @@ import { getTenantList } from '@/api/tenant'
import { getParkList } from '@/api/admin/park' import { getParkList } from '@/api/admin/park'
import pick from 'lodash.pick' import pick from 'lodash.pick'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'UserModal', name: 'UserModal',
props: { props: {
@ -117,7 +120,7 @@ export default {
computed: { computed: {
...mapGetters(['parkId', 'tenantId']) ...mapGetters(['parkId', 'tenantId'])
}, },
data () { data() {
return { return {
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。', description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
visible: false, visible: false,
@ -132,8 +135,8 @@ export default {
confirmLoading: false, confirmLoading: false,
roleAll: [], roleAll: [],
mdl: {}, mdl: {},
data:[], data: [],
customerList:[], customerList: [],
deptCheck: true, deptCheck: true,
spinning: false, spinning: false,
tenantData: [], tenantData: [],
@ -141,10 +144,10 @@ export default {
form: this.$form.createForm(this) form: this.$form.createForm(this)
} }
}, },
beforeCreate () { beforeCreate() {
}, },
created () { created() {
getCustomerList().then(res =>{ getCustomerList().then(res => {
res.rows.forEach(r => { res.rows.forEach(r => {
this.customerList.push({ value: r.id, text: r.name }) this.customerList.push({ value: r.id, text: r.name })
}) })
@ -169,56 +172,54 @@ export default {
this.loadRoleAll() this.loadRoleAll()
}, },
methods: { methods: {
handleSearch(value){ handleSearch(value) {
let param = { let param = {
mobile:value mobile: value
} }
getStaffList(param).then(res =>{ getStaffList(param).then(res => {
this.data = res.rows this.data = res.rows
}) })
}, },
handleChange(){ handleChange() {
}, },
add () { add() {
this.form.resetFields() this.form.resetFields()
this.mdl = Object.assign({}, { id: 0, deptId: '' }) this.mdl = Object.assign({}, { id: 0, deptId: '' })
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue(pick(this.mdl, 'id', 'username', 'nickname', 'status', 'mobile', 'roleIds','staffId','customerId', 'remark', 'deptId', 'parkId', 'tenantId')) this.form.setFieldsValue(pick(this.mdl, 'id', 'username', 'nickname', 'status', 'mobile', 'roleIds', 'staffId', 'customerId', 'remark', 'deptId', 'parkId', 'tenantId'))
}) })
let param = { let param = {}
} getStaffListByUser(param).then(res => {
getStaffListByUser(param).then(res =>{
this.data = res.rows this.data = res.rows
}) })
}, },
edit (record) { edit(record) {
if (record.id > 0) { if (record.id > 0) {
let param = { //
}
getStaffListByUser(param).then(res => {
this.data = res.rows
})
this.spinning = true this.spinning = true
getUser(record.id).then(res => { getUser(record.id).then(res => {
this.mdl = Object.assign({}, res) this.mdl = Object.assign({}, res)
this.visible = true this.visible = true
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue(pick(this.mdl, 'id', 'username', 'nickname', 'status', 'mobile', 'roleIds','customerId','staffId', 'remark', 'deptId', 'parkId', 'tenantId')) this.form.setFieldsValue(pick(this.mdl, 'id', 'username', 'nickname', 'status', 'mobile', 'roleIds', 'customerId', 'staffId', 'remark', 'deptId', 'parkId', 'tenantId'))
this.spinning = false this.spinning = false
// this.form.setFieldsValue({ ...record }) // this.form.setFieldsValue({ ...record })
// 查询 选择用户
getStaffListByUser({
staffId: this.mdl.staffId
}).then(res => {
console.log('edit getStaffListByUser', res)
this.data = res.rows
})
}) })
}) })
} }
}, },
onChange (value, label, extra) { onChange(value, label, extra) {
if (extra.triggerNode.$children.length > 0) { if (extra.triggerNode.$children.length > 0) {
this.$message.error('不能选择父节点' + `${label}`) this.$message.error('不能选择父节点' + `${label}`)
this.deptCheck = false this.deptCheck = false
@ -226,12 +227,12 @@ export default {
this.deptCheck = true this.deptCheck = true
} }
}, },
loadRoleAll () { loadRoleAll() {
getRoleAll().then(res => { getRoleAll().then(res => {
this.roleAll = res.rows this.roleAll = res.rows
}) })
}, },
handleSubmit (e) { handleSubmit(e) {
e.preventDefault() e.preventDefault()
if (!this.deptCheck) { if (!this.deptCheck) {
this.$message.error('不能选择父节点') this.$message.error('不能选择父节点')