描述:用户管理选择用户

This commit is contained in:
SelfRidicule 2024-03-25 11:01:45 +08:00
parent cd3fc1f20a
commit 0113927f92

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>
@ -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: {
@ -187,8 +190,7 @@ export default {
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
@ -196,23 +198,22 @@ export default {
}, },
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
})
}) })
}) })