|
@@ -2,128 +2,88 @@
|
|
|
<div>
|
|
|
<a-modal
|
|
|
centered
|
|
|
- class="modalBox"
|
|
|
+ class="userEdit-modal"
|
|
|
+ :footer="null"
|
|
|
+ :maskClosable="false"
|
|
|
:title="titleText"
|
|
|
v-model="isshow"
|
|
|
- @cancle="cancel"
|
|
|
- width="45%"
|
|
|
- :maskClosable="false">
|
|
|
- <a-form :form="form" @submit="handleSubmit">
|
|
|
+ @cancle="isshow=false"
|
|
|
+ :width="800">
|
|
|
+ <a-form-model
|
|
|
+ id="userEdit-form"
|
|
|
+ ref="ruleForm"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ :label-col="formItemLayout.labelCol"
|
|
|
+ :wrapper-col="formItemLayout.wrapperCol"
|
|
|
+ >
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="12">
|
|
|
- <!-- 用户名称 -->
|
|
|
- <a-form-item label="用户名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-form-model-item label="用户名称" prop="name">
|
|
|
<a-input
|
|
|
- placeholder="请输入用户名称(最多30个字符)"
|
|
|
+ id="userEdit-name"
|
|
|
+ v-model.trim="form.name"
|
|
|
+ @change="filterEmpty"
|
|
|
:maxLength="30"
|
|
|
- v-decorator="['formData.name', {
|
|
|
- initialValue: formData.name,
|
|
|
- rules: [{ required: true, message: '请输入用户名称(30个字以内)!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符,最多30个字符'}] }]"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
+ allowClear
|
|
|
+ placeholder="请输入用户名称(最多30个字符)"/>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <!-- 手机号码 -->
|
|
|
- <a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
- <a-input
|
|
|
- placeholder="请输入手机号码"
|
|
|
- :maxLength="11"
|
|
|
- v-decorator="['formData.phone', {
|
|
|
- initialValue: formData.phone,
|
|
|
- rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
+ <a-form-model-item label="手机号码" prop="phone">
|
|
|
+ <a-input id="userEdit-phone" v-model.trim="form.phone":maxLength="11" allowClear placeholder="请输入手机号码"/>
|
|
|
+ </a-form-model-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 }">
|
|
|
+ <a-form-model-item label="性别" prop="sex">
|
|
|
<v-select
|
|
|
+ ref="sex"
|
|
|
+ id="userEdit-sex"
|
|
|
code="SEX"
|
|
|
- v-decorator="[
|
|
|
- 'formData.sex',
|
|
|
- {
|
|
|
- initialValue: formData.sex,
|
|
|
- rules: [{ required: true, message: '请选择性别!' }] },
|
|
|
- ]"
|
|
|
+ v-model="form.sex"
|
|
|
+ placeholder="请选择性别"
|
|
|
allowClear ></v-select>
|
|
|
-
|
|
|
- </a-form-item>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
<!-- 状态 -->
|
|
|
<a-col :span="12">
|
|
|
- <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
|
- <a-radio-group
|
|
|
- name="radioGroup"
|
|
|
- v-decorator="[
|
|
|
- 'formData.loginFlag',
|
|
|
- {
|
|
|
- initialValue: formData.loginFlag,
|
|
|
- rules: [{ required: true, message: '请选择状态!' }] },
|
|
|
- ]"
|
|
|
- >
|
|
|
+ <a-form-model-item label="状态" prop="loginFlag">
|
|
|
+ <a-radio-group name="radioGroup" v-model="form.loginFlag" placeholder="请选择状态">
|
|
|
<a-radio :value="1">是</a-radio>
|
|
|
<a-radio :value="0">否</a-radio>
|
|
|
</a-radio-group>
|
|
|
-
|
|
|
- </a-form-item>
|
|
|
+ </a-form-model-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-form-model-item label="角色" prop="roleNames" :label-col="{span: 3}" :wrapper-col="{span: 20}">
|
|
|
<a-select
|
|
|
- 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
|
|
|
- >
|
|
|
+ id="userSyncEdit-roleNames"
|
|
|
+ allowClear
|
|
|
+ v-model="form.roleNames"
|
|
|
+ mode="multiple">
|
|
|
+ <a-select-option v-for="item in roleList" :key="item.id" :value="item.id" :disabled="item.isEnable == '0' ? true : false">{{ item.name }}</a-select-option>
|
|
|
</a-select>
|
|
|
- </a-form-item>
|
|
|
+ </a-form-model-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
|
|
|
- v-decorator="[
|
|
|
- 'formData.remarks',
|
|
|
- {
|
|
|
- initialValue: formData.remarks,
|
|
|
- rules: [] },
|
|
|
- ]"
|
|
|
- style="min-height: 50px;"
|
|
|
- :maxLength="500"
|
|
|
- placeholder="请输入备注(最多500个字符)"
|
|
|
- autosize />
|
|
|
- </a-form-item>
|
|
|
+ <a-form-model-item label="备注" prop="remarks" :label-col="{span: 3}" :wrapper-col="{span: 20}">
|
|
|
+ <a-textarea id="userEdit-remarks" v-model.trim="form.remarks":maxLength="500" allowClear placeholder="请输入备注(最多500个字符)"/>
|
|
|
+ </a-form-model-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
-
|
|
|
- <a-form-item :wrapper-col="{ span: 24, offset: 12 }">
|
|
|
- <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }">
|
|
|
- 保存
|
|
|
- </a-button>
|
|
|
- <a-button :style="{ marginLeft: '8px' }" @click="cancel">
|
|
|
- 取消
|
|
|
- </a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
-
|
|
|
+ <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
|
|
|
+ <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
|
|
|
+ <a-button :style="{ marginLeft: '8px' }" @click="isshow=false">取消</a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-form-model>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -141,7 +101,7 @@ export default {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- data: {
|
|
|
+ nowData: {
|
|
|
type: Object,
|
|
|
default: function () {
|
|
|
return {}
|
|
@@ -150,60 +110,64 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- titleText: '添加用户',
|
|
|
+ titleText: '新增用户',
|
|
|
isshow: this.visible,
|
|
|
- formLayout: 'horizontal',
|
|
|
- form: this.$form.createForm(this, { name: 'miniForm' }),
|
|
|
roleList: [],
|
|
|
- formData: {
|
|
|
- roleNames: undefined, // 角色
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 6 },
|
|
|
+ wrapperCol: { span: 16 }
|
|
|
+ },
|
|
|
+ form: {
|
|
|
name: '',
|
|
|
- loginFlag: '', // 活动状态
|
|
|
phone: '',
|
|
|
sex: undefined,
|
|
|
+ loginFlag: '', // 状态
|
|
|
+ roleNames: undefined, // 角色
|
|
|
remarks: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [ { required: true, message: '请输入用户名称', trigger: 'blur' }, { pattern: '^[^<|>]{1,30}$', message: '请输入不含<或>的字符,最多30个字符' } ],
|
|
|
+ phone: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号码!' } ],
|
|
|
+ sex: [ { required: true, message: '请选择性别', trigger: 'change' } ],
|
|
|
+ loginFlag: [ { required: true, message: '请选择状态', trigger: 'change' } ],
|
|
|
+ roleNames: [ { required: true, message: '请选择角色', trigger: 'change' } ]
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- cancel (e) {
|
|
|
- this.clear()
|
|
|
- this.$emit('close')
|
|
|
+ // 过滤空格
|
|
|
+ filterEmpty () {
|
|
|
+ let str = this.form.name
|
|
|
+ str = str.replace(/\ +/g, '')
|
|
|
+ str = str.replace(/[ ]/g, '')
|
|
|
+ str = str.replace(/[\r\n]/g, '')
|
|
|
+ this.form.name = str
|
|
|
},
|
|
|
// 保存提交
|
|
|
handleSubmit () {
|
|
|
const _this = this
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
- console.log(values, 'values222')
|
|
|
- if (!err) {
|
|
|
- values.formData.roleNames = values.formData.roleNames.join(',')
|
|
|
-
|
|
|
- console.log(values.formData, ' formData.type222222222')
|
|
|
- console.log(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData))
|
|
|
- saveUserPower(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
|
|
|
- console.log(res, 'res--save')
|
|
|
- if (res.status + '' === '200') {
|
|
|
- this.$message.success(res.message ? res.message : '保存成功')
|
|
|
- this.$emit('refresh')
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ const params = JSON.parse(JSON.stringify(_this.form))
|
|
|
+ params.roleNames = _this.form.roleNames.join(',')
|
|
|
+ params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
|
|
|
+ saveUserPower(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ _this.$emit('refresh')
|
|
|
setTimeout(function () {
|
|
|
- _this.cancel()
|
|
|
+ _this.isshow = false
|
|
|
}, 300)
|
|
|
+ } else {
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- clear () {
|
|
|
- this.form.resetFields()
|
|
|
- delete this.formData.id
|
|
|
- this.formData.roleNames = []
|
|
|
- this.formData.name = ''
|
|
|
- this.formData.loginFlag = ''
|
|
|
- this.formData.phone = ''
|
|
|
- this.formData.sex = undefined
|
|
|
- this.formData.remarks = ''
|
|
|
- },
|
|
|
// 获取角色列表接口
|
|
|
getRoleList () {
|
|
|
getRoleList().then(res => {
|
|
@@ -215,61 +179,40 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- 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
|
|
|
- console.log(roleNames, 'roleNames')
|
|
|
- if (roleNames) {
|
|
|
- roleNames = roleNames.split(',')
|
|
|
- console.log(roleNames, 'roleNames22')
|
|
|
- const arr = []
|
|
|
- console.log(this.roleList, 'this.roleList')
|
|
|
-
|
|
|
- roleNames.map(item => {
|
|
|
- const row = this.roleList.find(a => {
|
|
|
- return a.name == item
|
|
|
- })
|
|
|
- if (row) {
|
|
|
- arr.push(row.id)
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- console.log(arr, 'arrs')
|
|
|
- this.formData.roleNames = arr
|
|
|
- } else {
|
|
|
- this.formData.roleNames = []
|
|
|
- }
|
|
|
-
|
|
|
- this.formData.loginFlag = Number(this.formData.loginFlag)
|
|
|
- // this.formData.sex = Number(this.formData.sex)
|
|
|
- console.log(this.formData, 'this.formData')
|
|
|
- } else {
|
|
|
- this.titleText = '添加用户'
|
|
|
- }
|
|
|
+ if (!newValue) {
|
|
|
+ this.$emit('close')
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
+ this.form.name = ''
|
|
|
+ this.form.phone = ''
|
|
|
+ this.form.sex = undefined
|
|
|
+ this.form.loginFlag = ''
|
|
|
+ this.form.roleNames = undefined
|
|
|
+ this.form.remarks = ''
|
|
|
+ this.titleText = '新增用户'
|
|
|
} else {
|
|
|
- this.cancel()
|
|
|
+ this.getRoleList()
|
|
|
}
|
|
|
+ },
|
|
|
+ nowData: {
|
|
|
+ handler (newValue, oldValue) {
|
|
|
+ if (this.isshow && newValue) {
|
|
|
+ if (this.nowData.id) { // 编辑
|
|
|
+ this.titleText = '编辑用户'
|
|
|
+ this.form = Object.assign({}, this.nowData)
|
|
|
+ if (this.nowData.roleIds) {
|
|
|
+ this.form.roleNames = this.nowData.roleIds.split(',')
|
|
|
+ }
|
|
|
+ this.form.loginFlag = Number(this.nowData.loginFlag)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style>
|
|
|
- .ant-modal-footer {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-</style>
|