p35z7urxv
/
pqa2fspn3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[feat][V]：加入表单验证器

Browse Source
master
Romesum 5 years ago
parent d776378ecc
commit 0af43b7bd1
1 changed files with 63 additions and 44 deletions
Show Stats Download Patch File Download Diff File

51
element-vue/src/components/supManager/userEditForm.vue
Unescape View File

@ -2,29 +2,39 @@
<!-- 弹出层--> <!-- 弹出层-->
<el-dialog :title="edit ? '编辑用户' : '新增用户'" :visible.sync="dialogVisible" width="40rem" @close="cancel" <el-dialog :title="edit ? '编辑用户' : '新增用户'" :visible.sync="dialogVisible" width="40rem" @close="cancel"
style="text-align: left" :close-on-click-modal="false"> style="text-align: left" :close-on-click-modal="false">
<el-form :model="userForm"> <el-form :model="userForm" ref="userForm">
<el-form-item label="职位" label-width="80px"> <el-form-item prop="position" label="职位" label-width="80px"
:rules="[{ required: true, message: '请选择职位', trigger: 'blur' }]">
<el-select v-model="userForm.position" placeholder="请选择职位"> <el-select v-model="userForm.position" placeholder="请选择职位">
<el-option label="教师" :value="1"></el-option> <el-option label="教师" :value="1"></el-option>
<el-option label="实验室管理员" :value="2"></el-option> <el-option label="实验室管理员" :value="2"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="工号" label-width="80px"> <el-form-item prop="username" label="工号" label-width="80px"
<el-input v-model="userForm.username" autocomplete="off" :disabled="edit"></el-input> :rules="[{ required: true, message: '请输入工号', trigger: 'blur' }]">
<el-input v-model="userForm.username" autocomplete="off" :disabled="edit">
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" label-width="80px" v-if="!edit"> <el-form-item prop="password" label="密码" label-width="80px" v-if="!edit"
<el-input v-model="password" type="password" autocomplete="off" :disabled="edit"></el-input> :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
>
<el-input v-model="userForm.password" type="userForm.password" autocomplete="off" :disabled="edit"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="姓名" label-width="80px"> <el-form-item prop="nickname" label="姓名" label-width="80px"
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
<el-input v-model="userForm.nickname" autocomplete="off"></el-input> <el-input v-model="userForm.nickname" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="联系电话" label-width="80px"> <el-form-item prop="tel" label="联系电话" label-width="80px"
:rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
<el-input v-model="userForm.tel" autocomplete="off"></el-input> <el-input v-model="userForm.tel" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="办公室" label-width="80px"> <el-form-item prop="office" label="办公室" label-width="80px"
:rules="[{ required: true, message: '请输入办公室', trigger: 'blur' }]">
<el-input v-model="userForm.office" autocomplete="off"></el-input> <el-input v-model="userForm.office" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮箱" label-width="80px"> <el-form-item prop="email" label="邮箱" label-width="80px"
:rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
<el-input v-model="userForm.email" autocomplete="off"></el-input> <el-input v-model="userForm.email" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -36,7 +46,7 @@
</template> </template>
<script> <script>
import {get, post,stop} from "~/utils"; import {get, post, stop} from "~/utils";
import {showDialog, showFail, showSuccess} from "~/utils/dialog"; import {showDialog, showFail, showSuccess} from "~/utils/dialog";
export default { export default {
@ -47,13 +57,17 @@
}, },
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false
password: ''
} }
}, },
methods: { methods: {
async confirm() { async confirm() {
//验证
this.$refs['userForm'].validate(async (valid) => {
if (valid) {
//提交
await showDialog("确定要" + (this.edit ? '编辑' : '新增') + '吗？', this) await showDialog("确定要" + (this.edit ? '编辑' : '新增') + '吗？', this)
//编辑提交
if (this.edit) { if (this.edit) {
await post('lb/user/updateUser', { await post('lb/user/updateUser', {
nickname: this.userForm.nickname, nickname: this.userForm.nickname,
@ -64,11 +78,12 @@
position: parseInt(this.userForm.position), position: parseInt(this.userForm.position),
uId: this.userForm.uid uId: this.userForm.uid
}).catch(async e => { }).catch(async e => {
await showFail(e.msg,this) await showFail(e.msg, this)
await stop() await stop()
}) })
showSuccess('编辑完成', this) showSuccess('编辑完成', this)
} else { } else {
// 新增提交
await post('lb/user/addUser', { await post('lb/user/addUser', {
nickname: this.userForm.nickname, nickname: this.userForm.nickname,
tel: this.userForm.tel, tel: this.userForm.tel,
@ -76,16 +91,20 @@
username: this.userForm.username, username: this.userForm.username,
office: this.userForm.office, office: this.userForm.office,
position: parseInt(this.userForm.position), position: parseInt(this.userForm.position),
password: this.password password: this.userForm.password
}).catch(async e => { }).catch(async e => {
await showFail(e.msg,this) await showFail(e.msg, this)
await stop() await stop()
}) })
showSuccess('新增完成', this) showSuccess('新增完成', this)
} }
this.$emit('confirm') this.$emit('confirm')
}
});
}, },
cancel() { cancel() {
this.$refs['userForm'].resetFields()
this.$emit('cancel') this.$emit('cancel')
} }
}, },

Write Preview
Loading…
Cancel
Save