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

107
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,45 +57,54 @@
}, },
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false
password: ''
} }
}, },
methods: { methods: {
async confirm() { async confirm() {
await showDialog("确定要" + (this.edit ? '编辑' : '新增') + '吗？', this) //验证
if (this.edit) { this.$refs['userForm'].validate(async (valid) => {
await post('lb/user/updateUser', { if (valid) {
nickname: this.userForm.nickname, //提交
tel: this.userForm.tel, await showDialog("确定要" + (this.edit ? '编辑' : '新增') + '吗？', this)
email: this.userForm.email, //编辑提交
username: this.userForm.username, if (this.edit) {
office: this.userForm.office, await post('lb/user/updateUser', {
position: parseInt(this.userForm.position), nickname: this.userForm.nickname,
uId: this.userForm.uid tel: this.userForm.tel,
}).catch(async e => { email: this.userForm.email,
await showFail(e.msg,this) username: this.userForm.username,
await stop() office: this.userForm.office,
}) position: parseInt(this.userForm.position),
showSuccess('编辑完成', this) uId: this.userForm.uid
} else { }).catch(async e => {
await post('lb/user/addUser', { await showFail(e.msg, this)
nickname: this.userForm.nickname, await stop()
tel: this.userForm.tel, })
email: this.userForm.email, showSuccess('编辑完成', this)
username: this.userForm.username, } else {
office: this.userForm.office, // 新增提交
position: parseInt(this.userForm.position), await post('lb/user/addUser', {
password: this.password nickname: this.userForm.nickname,
}).catch(async e => { tel: this.userForm.tel,
await showFail(e.msg,this) email: this.userForm.email,
await stop() username: this.userForm.username,
}) office: this.userForm.office,
showSuccess('新增完成', this) position: parseInt(this.userForm.position),
} password: this.userForm.password
this.$emit('confirm') }).catch(async e => {
await showFail(e.msg, this)
await stop()
})
showSuccess('新增完成', this)
}
this.$emit('confirm')
}
});
}, },
cancel() { cancel() {
this.$refs['userForm'].resetFields()
this.$emit('cancel') this.$emit('cancel')
} }
}, },

Write Preview
Loading…
Cancel
Save