|
@@ -1,248 +1,271 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
|
|
|
- <a-form :form="form" @submit="handleSubmit">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="12">
|
|
|
- <!-- 用户名称 -->
|
|
|
- <a-form-item label="用户名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
- <a-input placeholder="请输入用户名称" id="userModal-name" v-decorator="['formData.name', {
|
|
|
+ <div>
|
|
|
+ <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel">
|
|
|
+ <a-form :form="form" @submit="handleSubmit">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="12">
|
|
|
+ <!-- 用户名称 -->
|
|
|
+ <a-form-item label="用户名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入用户名称30个字以内"
|
|
|
+ :maxLength="30"
|
|
|
+ id="userModal-name"
|
|
|
+ v-decorator="['formData.name', {
|
|
|
initialValue: formData.name,
|
|
|
- rules: [{ required: true, message: '请输入用户名称!' },{pattern:'^[^<|>]{1,20}$',message:'请输入不含<或>的字符,最多20个字符'}] }]" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="12">
|
|
|
- <!-- 手机号码 -->
|
|
|
- <a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
- <a-input placeholder="请输入手机号码" id="userModal-phone" v-decorator="['formData.phone', {
|
|
|
+ rules: [{ required: true, message: '请输入用户名称30个字以内!' },{pattern:'^[^<|>]{1,20}$',message:'请输入不含<或>的字符,最多20个字符'}] }]" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <!-- 手机号码 -->
|
|
|
+ <a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-input
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ :maxLength="11"
|
|
|
+ id="userModal-phone"
|
|
|
+ v-decorator="['formData.phone', {
|
|
|
initialValue: formData.phone,
|
|
|
rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <!-- 性别 -->
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="性别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
- <v-select code="SEX" id="userModal-sex" v-decorator="[
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <!-- 性别 -->
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="性别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <v-select
|
|
|
+ code="SEX"
|
|
|
+ id="userModal-sex"
|
|
|
+ v-decorator="[
|
|
|
'formData.sex',
|
|
|
{
|
|
|
initialValue: formData.sex,
|
|
|
rules: [{ required: true, message: '请选择性别!' }] },
|
|
|
]"
|
|
|
- allowClear></v-select>
|
|
|
+ allowClear></v-select>
|
|
|
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <!-- 状态 -->
|
|
|
- <a-col :span="12">
|
|
|
- <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
- <a-radio-group name="radioGroup" id="userModal-loginFlag" v-decorator="[
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-radio-group
|
|
|
+ name="radioGroup"
|
|
|
+ id="userModal-loginFlag"
|
|
|
+ v-decorator="[
|
|
|
'formData.loginFlag',
|
|
|
{
|
|
|
initialValue: formData.loginFlag,
|
|
|
rules: [{ required: true, message: '请选择状态!' }] },
|
|
|
]">
|
|
|
- <a-radio :value="1">是</a-radio>
|
|
|
- <a-radio :value="0">否</a-radio>
|
|
|
- </a-radio-group>
|
|
|
+ <a-radio :value="1">是</a-radio>
|
|
|
+ <a-radio :value="0">否</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
- <a-select id="userModal-roleNames" v-decorator="[
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
+ <a-select
|
|
|
+ id="userModal-roleNames"
|
|
|
+ v-decorator="[
|
|
|
'formData.roleNames',
|
|
|
{
|
|
|
initialValue: formData.roleNames,
|
|
|
rules: [{ required: true, message: '请选择状态!' }] },
|
|
|
]"
|
|
|
- mode="multiple" style="width: 100%" placeholder="请选择角色">
|
|
|
- <a-select-option v-for="item in roleList" :key="item.id" :disabled="item.isEnable == '0' ? true : false">{{ item.name }}</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
- <a-textarea id="userModal-remarks" v-decorator="[
|
|
|
+ mode="multiple"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="请选择角色">
|
|
|
+ <a-select-option v-for="item in roleList" :key="item.id" :disabled="item.isEnable == '0' ? true : false">{{ item.name }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
+ <a-textarea
|
|
|
+ id="userModal-remarks"
|
|
|
+ :maxLength="512"
|
|
|
+ v-decorator="[
|
|
|
'formData.remarks',
|
|
|
{
|
|
|
initialValue: formData.remarks,
|
|
|
rules: [] },
|
|
|
]"
|
|
|
- style="min-height: 50px;" placeholder="" autosize />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
|
|
|
- <a-button type="primary" @click="handleSubmit()" id="userModal-handleSubmit">
|
|
|
- 保存
|
|
|
- </a-button>
|
|
|
- <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()" id="userModal-handleCancel">
|
|
|
- 取消
|
|
|
- </a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- </a-modal>
|
|
|
- </div>
|
|
|
+ style="min-height: 50px;"
|
|
|
+ placeholder="输入内容为512个字以内"
|
|
|
+ autosize />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
|
|
|
+ <a-button type="primary" @click="handleSubmit()" id="userModal-handleSubmit">
|
|
|
+ 保存
|
|
|
+ </a-button>
|
|
|
+ <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()" id="userModal-handleCancel">
|
|
|
+ 取消
|
|
|
+ </a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- STable,
|
|
|
- VSelect
|
|
|
- } from '@/components'
|
|
|
- import {
|
|
|
- getRoleList,
|
|
|
- saveUserPower
|
|
|
- } from '@/api/power-user.js'
|
|
|
- export default {
|
|
|
- name: 'UserModal',
|
|
|
- components: {
|
|
|
- STable,
|
|
|
- VSelect
|
|
|
- },
|
|
|
- props: {
|
|
|
- visible: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- data: {
|
|
|
- type: Object,
|
|
|
- default: function() {
|
|
|
- return {}
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- titleText: '添加用户',
|
|
|
- isshow: this.visible,
|
|
|
- formLayout: 'horizontal',
|
|
|
- form: this.$form.createForm(this, {
|
|
|
- name: 'miniForm'
|
|
|
- }),
|
|
|
- roleList: [],
|
|
|
- formData: {
|
|
|
- roleNames: undefined, // 角色
|
|
|
- name: '',
|
|
|
- loginFlag: '', // 活动状态
|
|
|
- phone: '',
|
|
|
- sex: '',
|
|
|
- remarks: ''
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- cancel(e) {
|
|
|
- this.clear()
|
|
|
- this.$emit('close')
|
|
|
- },
|
|
|
- // 保存提交
|
|
|
- handleSubmit() {
|
|
|
- const _this = this
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
- if (!err) {
|
|
|
- values.formData.roleNames = values.formData.roleNames.join(',')
|
|
|
- saveUserPower(Object.assign({
|
|
|
- id: this.data.id ? this.data.id : ''
|
|
|
- }, values.formData)).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- this.$message.success(res.message ? res.message : '保存成功')
|
|
|
- this.$emit('refresh')
|
|
|
- setTimeout(function() {
|
|
|
- _this.cancel()
|
|
|
- }, 300)
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 取消
|
|
|
- handleCancel() {
|
|
|
- const _this = this
|
|
|
- this.$confirm({
|
|
|
- title: '提示',
|
|
|
- content: '确定取消吗?',
|
|
|
- okText: '确定',
|
|
|
- cancelText: '取消',
|
|
|
- onOk() {
|
|
|
- _this.clear()
|
|
|
- _this.cancel()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- clear() {
|
|
|
- this.form.resetFields()
|
|
|
- delete this.formData.id
|
|
|
- this.formData.roleNames = []
|
|
|
- this.formData.name = ''
|
|
|
- this.formData.loginFlag = ''
|
|
|
- this.formData.phone = ''
|
|
|
- this.formData.sex = ''
|
|
|
- this.formData.remarks = ''
|
|
|
- },
|
|
|
- // 获取角色列表接口
|
|
|
- getRoleList() {
|
|
|
- getRoleList().then(res => {
|
|
|
- if (res.status + '' === '200') {
|
|
|
- this.roleList = res.data
|
|
|
- } else {
|
|
|
- this.$message.warning(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getRoleList()
|
|
|
- },
|
|
|
- beforeCreate() {
|
|
|
- this.form = this.$form.createForm(this, {
|
|
|
- name: 'miniForm'
|
|
|
- })
|
|
|
- },
|
|
|
- watch: {
|
|
|
- visible(newValue, oldValue) {
|
|
|
- this.isshow = newValue
|
|
|
- },
|
|
|
- isshow(newValue, oldValue) {
|
|
|
- if (newValue) {
|
|
|
- if (this.data.id) { // 编辑
|
|
|
- this.titleText = '编辑用户'
|
|
|
- this.formData = Object.assign({}, this.data)
|
|
|
- delete this.formData.no
|
|
|
- let roleNames = this.formData.roleNames
|
|
|
- if (roleNames) {
|
|
|
- roleNames = roleNames.split(',')
|
|
|
- const arr = []
|
|
|
- roleNames.map(item => {
|
|
|
- const row = this.roleList.find(a => {
|
|
|
- return a.name == item
|
|
|
- })
|
|
|
- if (row) {
|
|
|
- arr.push(row.id)
|
|
|
- }
|
|
|
- })
|
|
|
- this.formData.roleNames = arr
|
|
|
- } else {
|
|
|
- this.formData.roleNames = []
|
|
|
- }
|
|
|
- this.formData.loginFlag = Number(this.formData.loginFlag)
|
|
|
- } else {
|
|
|
- this.titleText = '添加用户'
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.cancel()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import {
|
|
|
+ STable,
|
|
|
+ VSelect
|
|
|
+} from '@/components'
|
|
|
+import {
|
|
|
+ getRoleList,
|
|
|
+ saveUserPower
|
|
|
+} from '@/api/power-user.js'
|
|
|
+export default {
|
|
|
+ name: 'UserModal',
|
|
|
+ components: {
|
|
|
+ STable,
|
|
|
+ VSelect
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ titleText: '添加用户',
|
|
|
+ isshow: this.visible,
|
|
|
+ formLayout: 'horizontal',
|
|
|
+ form: this.$form.createForm(this, {
|
|
|
+ name: 'miniForm'
|
|
|
+ }),
|
|
|
+ roleList: [],
|
|
|
+ formData: {
|
|
|
+ roleNames: undefined, // 角色
|
|
|
+ name: '',
|
|
|
+ loginFlag: '', // 活动状态
|
|
|
+ phone: '',
|
|
|
+ sex: '',
|
|
|
+ remarks: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cancel (e) {
|
|
|
+ this.clear()
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ // 保存提交
|
|
|
+ handleSubmit () {
|
|
|
+ const _this = this
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ values.formData.roleNames = values.formData.roleNames.join(',')
|
|
|
+ saveUserPower(Object.assign({
|
|
|
+ id: this.data.id ? this.data.id : ''
|
|
|
+ }, values.formData)).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$message.success(res.message ? res.message : '保存成功')
|
|
|
+ this.$emit('refresh')
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.cancel()
|
|
|
+ }, 300)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleCancel () {
|
|
|
+ const _this = this
|
|
|
+ this.$confirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定取消吗?',
|
|
|
+ okText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk () {
|
|
|
+ _this.clear()
|
|
|
+ _this.cancel()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clear () {
|
|
|
+ this.form.resetFields()
|
|
|
+ delete this.formData.id
|
|
|
+ this.formData.roleNames = []
|
|
|
+ this.formData.name = ''
|
|
|
+ this.formData.loginFlag = ''
|
|
|
+ this.formData.phone = ''
|
|
|
+ this.formData.sex = ''
|
|
|
+ this.formData.remarks = ''
|
|
|
+ },
|
|
|
+ // 获取角色列表接口
|
|
|
+ getRoleList () {
|
|
|
+ getRoleList().then(res => {
|
|
|
+ if (res.status + '' === '200') {
|
|
|
+ this.roleList = res.data
|
|
|
+ } else {
|
|
|
+ this.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getRoleList()
|
|
|
+ },
|
|
|
+ beforeCreate () {
|
|
|
+ this.form = this.$form.createForm(this, {
|
|
|
+ name: 'miniForm'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible (newValue, oldValue) {
|
|
|
+ this.isshow = newValue
|
|
|
+ },
|
|
|
+ isshow (newValue, oldValue) {
|
|
|
+ if (newValue) {
|
|
|
+ if (this.data.id) { // 编辑
|
|
|
+ this.titleText = '编辑用户'
|
|
|
+ this.formData = Object.assign({}, this.data)
|
|
|
+ delete this.formData.no
|
|
|
+ let roleNames = this.formData.roleNames
|
|
|
+ if (roleNames) {
|
|
|
+ roleNames = roleNames.split(',')
|
|
|
+ const arr = []
|
|
|
+ roleNames.map(item => {
|
|
|
+ const row = this.roleList.find(a => {
|
|
|
+ return a.name == item
|
|
|
+ })
|
|
|
+ if (row) {
|
|
|
+ arr.push(row.id)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.formData.roleNames = arr
|
|
|
+ } else {
|
|
|
+ this.formData.roleNames = []
|
|
|
+ }
|
|
|
+ this.formData.loginFlag = Number(this.formData.loginFlag)
|
|
|
+ } else {
|
|
|
+ this.titleText = '添加用户'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.cancel()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style>
|