odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁: 表单校验

Browse Source
This commit is contained in:
邓洁
2024-01-03 21:07:45 +08:00
parent 53cdb854a3
commit c9d84979d9
3 changed files with 71 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/site/index.vue
View File

@@ -62,8 +62,8 @@
<div class="siteId">
<span>{{ title }}</span>
</div>
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
<el-form-item label="站点名称">
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="190px">
<el-form-item label="站点名称" prop="siteName">
<el-input v-model="form.siteName" placeholder="请输入站点名称"/>
</el-form-item>
<el-form-item label="是否默认">
@@ -108,35 +108,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
const router = useRouter()
const userId = reactive(router.currentRoute.value.params.userId)
const siteList = ref([
// {
// siteName: '松江站',
// info:{
// tunnelNum: 1,
// tunnelName: '一号隧道',
// constructionLength: 500,
// implementationLength: 10
// }
// },
// {
// siteName: '松江站',
// info:{
// tunnelNum: 1,
// tunnelName: '二号隧道',
// constructionLength: 500,
// implementationLength: 10
// }
// },
// {
// siteName: '松江站',
// info:{
// tunnelNum: 1,
// tunnelName: '三号隧道',
// constructionLength: 500,
// implementationLength: 10
// }
// }
])
const siteList = ref([])
const siteIds = ref([])
const siteNameList = ref([])
const info = ref({
@@ -160,7 +132,7 @@ const form = ref({
isDefault: false
});
const formRules = ref({
siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
})
const formInstance = ref()
const getList = () => {
@@ -235,7 +207,7 @@ const handleAdd = () => {
}
const handleSubmit = (instance) => {
if (!instance) return
instance.validate(async (valid) => {
instance.validate(valid => {
if (!valid) return
if (title.value === '编辑站点') {
editSite(form.value).then((res) => {
@@ -328,6 +300,9 @@ const handleCurrentChange = (val) => {
</script>
<style scoped lang="scss">
:deep(.el-form-item__error){
font-size: 35px;
}
:deep(.el-radio-group) {
margin-top: 10px;
}

52
src/views/tunnel-manage/index.vue
View File

@@ -67,13 +67,13 @@
<span>{{ title }}</span>
</div>
<el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
<el-form-item label="隧道名称" required>
<el-form-item label="隧道名称" prop="tunnelName">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
</el-form-item>
<el-form-item label="序列号" required>
<el-form-item label="序列号" prop="serialNumber">
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
</el-form-item>
<el-form-item label="隧道长度" required>
<el-form-item label="隧道长度" prop="totalLength">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item>
<el-form-item label="是否默认">
@@ -117,9 +117,17 @@ const params = router.currentRoute.value.params;
const siteId = reactive(params.siteId)
const userId = reactive(params.userId)
const type = reactive(params.type)
const validateNumber = (rule, value) => {
const reg = /^[A-Za-z0-9]+$/;
return reg.test(value);
}
const formRules = ref({
tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
serialNumber: [
{required: true, message: '请输入序列号', trigger: ['blur', 'change']},
{validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
],
totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}]
})
const showFirst = ref(true)
const showOperation = ref(true)
@@ -193,7 +201,7 @@ const pageInfo = reactive({
pageSize: 12
});
const total = ref(10);
onMounted(()=>{
onMounted(() => {
showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
})
const handleGoSiteOrIndex = () => {
@@ -232,16 +240,13 @@ const handleCurrentChange = (val) => {
getList()
}
const handleSubmit = (instance) => {
// if (!instance) return
// console.log('instance',instance)
// instance.validate(async (valid) => {
// console.log('valid',valid)
// if (!valid) return
const data = {
siteId: siteId,
...form.value
}
if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
if (!instance) return
instance.validate(async (valid) => {
if (!valid) return
const data = {
siteId: siteId,
...form.value
}
addTunnel(data).then(res => {
if (res.code === 1000) {
ElMessage.success('新增成功')
@@ -251,16 +256,13 @@ const handleSubmit = (instance) => {
ElMessage.warning(res.msg)
}
})
} else {
ElMessage.warning('请先完善信息再新增')
}
// })
})
}
//预览隧道
const handlePreview=(id)=>{
const handlePreview = (id) => {
console.log('预览')
if(id){
router.push('/'+id)
if (id) {
router.push('/' + id)
}
}
const handleGoToEditTunnel = (tunnelId) => {
@@ -353,6 +355,10 @@ const handleMoreDelete = () => {
</script>
<style scoped lang="scss">
:deep(.el-form-item__error) {
font-size: 35px;
}
.site-name {
position: absolute;
left: 250px;

55
src/views/user/index.vue
View File

@@ -72,16 +72,16 @@
<el-form-item label="当前站点">
<div class="current-site">{{ currentSite }}<span v-if="showAdmin">如果需要切换站点,请返回首屏切换</span></div>
</el-form-item>
<el-form-item label="输入用户名">
<el-form-item label="输入用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item label="输入密码" v-if="title==='添加用户'">
<el-form-item label="输入密码" v-if="title==='添加用户'" prop="password">
<el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="输入昵称">
<el-form-item label="输入昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入昵称"/>
</el-form-item>
<el-form-item label="输入电话号码">
<el-form-item label="输入电话号码" prop="phoneNumber">
<el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
</el-form-item>
<el-form-item label="是否启用">
@@ -90,7 +90,7 @@
<el-radio label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择身份">
<el-form-item label="选择身份" prop="roleId">
<el-radio-group v-model="form.roleId" @change="(val) => {
if (val >3){
getTunnel()
@@ -98,7 +98,7 @@
<el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择隧道" v-if="form.roleId>3">
<el-form-item label="选择隧道" v-if="form.roleId>3" prop="tunnelList">
<div class="user-select">
<el-select
v-model="form.tunnelList"
@@ -172,20 +172,27 @@ const form = ref({
roleId: [],
tunnelList: [1]
});
const validateName = (rule, value) => {
const reg = /^[A-Za-z0-9]+$/;
return reg.test(value);
}
const formRules = ref({
userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}]
userName: [
{required: true, message: '请输入用户名', trigger: ['blur', 'change']},
{validator: validateName, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
],
password: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}],
nickName: [{required: true, message: '请输入昵称', trigger: ['blur', 'change']}],
roleId: [{required: true, message: '请选择身份', trigger: ['blur', 'change']}],
tunnelList: [{required: true, message: '请选择隧道', trigger: ['blur', 'change']}]
})
const radioList = ref([])
const tunnelList = ref([])
const multipleTable = ref()
onMounted(() => {
if (localStorage.getItem('userId') == 2) {
showAdmin.value = true
} else {
showAdmin.value = false
}
showAdmin.value = localStorage.getItem('userId') == 2;
})
const getTunnel = () => {
getTunnelOption(siteId).then(res => {
if (res.code === 1000) {
@@ -280,9 +287,9 @@ const handleCurrentChange = (val) => {
pageInfo.pageNum = val
getInfo()
}
const handleSubmit = async (formInstance) => {
const handleSubmit = (formInstance) => {
if (!formInstance) return;
formInstance.validate(async (valid) => {
formInstance.validate((valid) => {
if (!valid) return;
const data = {
siteId: siteId,
@@ -295,7 +302,7 @@ const handleSubmit = async (formInstance) => {
tunnelList: form.value.tunnelList
}
if (title.value === '添加用户') {
await addUser(data).then(res => {
addUser(data).then(res => {
if (res.code === 1000) {
getInfo()
isVisited.value = false
@@ -309,7 +316,7 @@ const handleSubmit = async (formInstance) => {
userId: form.value.userId,
...data
}
await editUser(editData).then(res => {
editUser(editData).then(res => {
if (res.code === 1000) {
getInfo()
isVisited.value = false
@@ -335,11 +342,13 @@ const handleSelect = async (selection, row) => {
}
</script>
<style lang="scss">
.user-select {
.el-input{
.el-input {
min-height: 75px;
height: auto!important;
height: auto !important;
}
.el-select__popper {
margin-top: -12px !important;
background: #072247 !important;
@@ -357,7 +366,8 @@ const handleSelect = async (selection, row) => {
.el-select-dropdown__item {
font-size: 38px !important;
height: 60px !important;
line-height:60px !important;
line-height: 60px !important;
> span {
color: #FFFFFF;
}
@@ -390,6 +400,10 @@ const handleSelect = async (selection, row) => {
}
</style>
<style scoped lang="scss">
:deep(.el-form-item__error) {
font-size: 35px;
}
:deep(.el-input .el-input__password) {
font-size: 60px;
}
@@ -415,7 +429,6 @@ const handleSelect = async (selection, row) => {
}
:deep(.el-radio-group) {
margin-top: 10px;
}