herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改校验格式

qin_v3
超级管理员 1 year ago
parent
2a8aef3b62
commit
6bcab11fec
2 changed files with 239 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 259
      src/components/DesignForm/formControlPropertiNew.vue
  2. 10
      src/components/DesignForm/validateText.ts

259
src/components/DesignForm/formControlPropertiNew.vue
View File

@ -8,6 +8,8 @@ import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
import { getRequest } from '@/api/DesignForm'
import { useDesignFormStore } from '@/store/DesignForm/designForm'
import validate from './validate'
import validateText from './validateText'
import validateInt from './validateInt'
import { ValidateTextTypes } from '@/components/DesignForm/validateText'
import { ElMessage } from 'element-plus'
import { formatNumber } from '@/api/DesignForm/utils'
@ -72,8 +74,8 @@ const emits = defineEmits<{
const { formConfig, formData } = toRefs(props)
const store = useDesignFormStore() as any
const controlData = computed(() => {
console.log("注册自定义事件----------------->",props.formInfo)
console.log("注册自定义事件--------1--------->",store.controlAttr)
// console.log("注册自定义事件----------------->",props.formInfo)
// console.log("注册自定义事件--------1--------->",store.controlAttr)
// console.log("注册自定义事件---------3-------->",controlData.value.customRules)
return store.controlAttr
})
@ -142,6 +144,21 @@ const ValidateText = reactive<ValidateTextTypes>({
message: '必填项',
checkbox: false
})
/**
@ 作者: 秦东
@ 时间: 2024-08-14 08:41:02
@ 功能: 单选校验
*/
const radioVerify = reactive<ValidateTextTypes>({})
const textUinrVerfy = reactive([
...validateText
])
const numberUinrVerfy = reactive([
...validateInt
])
const formAttr = computed(() => {
const isSearch = state.isSearch
@ -242,6 +259,33 @@ const attrList = computed(() => {
columnIndex = list[0].type === 'index'
}
}
//判断校验规则
// console.log("判断校验规则--->",typeof(controlData.value.customRules))
if(typeof(controlData.value.customRules)=="object"){
if(Array.isArray(controlData.value.customRules)){
let otherPick = []
controlData.value.customRules.forEach((item:any)=>{
// console.log("判断校验规则-1-->",item)
if(item.type == ValidateText.type){
ValidateText.checkbox = true
}else{
otherPick.push(item)
}
})
if(otherPick.length > 0){
otherPick.forEach((item:any)=>{
radioVerify.type = item.type
radioVerify.label = item.label
radioVerify.regExp = item.regExp
radioVerify.message = item.message
radioVerify.checkbox = true
});
}
}
}else{
ValidateText.checkbox = false
radioVerify.type = ""
}
const temp =reactive<PublicAtrr[]>([
{
@ -994,6 +1038,8 @@ const attrList = computed(() => {
])
// 过滤显示对应的值
return temp.filter((item: any) => {
// console.log("过滤显示对应的值--->",item)
// console.log("过滤显示对应的值-1-->",type)
let hasFilter = true
if (item.vShow) {
hasFilter = item.vShow.includes(type)
@ -1011,17 +1057,17 @@ const attrList = computed(() => {
return []
}
})
watch(
() => store.activeKey,
(val: string) => {
if (val) {
watch(
() => store.activeKey,
(val: string) => {
if (val) {
// 有值时自动跳到第一项
state.tabsName = 'first'
cssIsShouw(attrList)
}
}
)
}
)
const fileSignAry = reactive<any>([])
const controlChange = (obj: any, val: any) => {
@ -2519,7 +2565,7 @@ watch(()=>controlData.value.control,(newVal) => {
}
}
}
console.log("同步开关的设置值和开关关联选项设置的值",controlData.value.control)
// console.log("同步开关的设置值和开关关联选项设置的值",controlData.value.control)
},{ deep: true })
@ -2752,19 +2798,151 @@ const disabledIstrue = (val:string) => {
}
}
watch(()=>controlData.value.customRules,(val:any) => {
console.log("啊啊啊啊啊",val,typeof(val));
if(typeof(val)=="object"){
if(Array.isArray(val)){
val.forEach((item:any)=>{
// watch(()=>controlData.value.customRules,(val:any) => {
// // console.log("啊啊啊啊啊",val,typeof(val));
// if(typeof(val)=="object"){
// if(Array.isArray(val)){
// val.forEach((item:any)=>{
// })
// }
// }
// },{
// deep: true
// })
/**
@ 作者: 秦东
@ 时间: 2024-08-14 13:16:26
@ 功能: 必填文本框改变
*/
const requiredText = (val:any) => {
if(typeof(controlData.value.customRules)=="object"){
if(Array.isArray(controlData.value.customRules)){
controlData.value.customRules.forEach((item:any)=>{
if(item.type == ValidateText.type){
item.message = val
}
})
}
}
},{
deep: true
})
console.log("判断校验规则-1-->",controlData.value.customRules)
}
/**
@ 作者: 秦东
@ 时间: 2024-08-14 14:35:07
@ 功能: 校验文本框改变
*/
const requiredTextRadio = (val:any) => {
console.log("校验文本框改变-->",val)
if(val.type == radioVerify.type){
if(typeof(controlData.value.customRules)=="object"){
if(Array.isArray(controlData.value.customRules)){
controlData.value.customRules.forEach((item:any)=>{
if(item.type == radioVerify.type){
item.message = val.message
}
})
}
}
}
}
/**
@ 作者: 秦东
@ 时间: 2024-08-14 13:21:43
@ 功能: 是否选中必填
*/
const requiredChangeSet = (val:boolean) => {
if (!controlData.value?.customRules) {
controlData.value.customRules = []
}
if(val){
if(Array.isArray(controlData.value.customRules) && controlData.value.customRules.length > 0){
let isNewWrite = true
controlData.value.customRules.forEach((item:any)=>{
if(item.type == ValidateText.type){
isNewWrite = false
}
})
if(isNewWrite){
controlData.value.customRules.push({
type: ValidateText.type,
message: ValidateText.message,
trigger: "blur"
})
}
}else{
controlData.value.customRules.push({
type: ValidateText.type,
message: ValidateText.message,
trigger: "blur"
})
}
}else{
if(Array.isArray(controlData.value.customRules) && controlData.value.customRules.length > 0){
controlData.value.customRules.forEach((item:any,index:number)=>{
if(item.type == ValidateText.type){
controlData.value.customRules.splice(index, 1)
}
})
}
// controlData.value.item.rules.splice(0, 1)
}
// console.log("判断校验规则-222-->",controlData.value.customRules)
}
/**
@ 作者: 秦东
@ 时间: 2024-08-14 14:14:42
@ 功能: 单选改变事件
*/
const radioChangeSet = (val:any) => {
console.log("单选改变事件-222-->",val)
let pickRadio = {}
let isTrue = true
textUinrVerfy.forEach((item:any) => {
if(item.type == val){
pickRadio = item
isTrue = false
}
})
if(isTrue){
numberUinrVerfy.forEach((item:any) => {
if(item.type == val){
pickRadio = item
isTrue = false
}
})
}
// console.log("单选改变事件-3333-->",pickRadio)
if (!controlData.value?.customRules) {
controlData.value.customRules = []
}
if(Array.isArray(controlData.value.customRules) && controlData.value.customRules.length > 0){
let isNewWrite = true
controlData.value.customRules.forEach((item:any,index:number)=>{
if(item.type == ValidateText.type){
isNewWrite = false
}else{
controlData.value.customRules.splice(index, 1)
}
})
controlData.value.customRules.push({
type: pickRadio.type,
message: pickRadio.message,
trigger: "blur"
})
}else{
controlData.value.customRules.push({
type: pickRadio.type,
message: pickRadio.message,
trigger: "blur"
})
}
}
</script>
<template>
<div class="sidebar-tools">
@ -3411,21 +3589,44 @@ watch(()=>controlData.value.customRules,(val:any) => {
<!-- <div class="h3"><h3>校验设置</h3></div> -->
<el-divider content-position="left">校验设置</el-divider>
<div v-if="showHide(['input', 'password', 'component'], true)">
{{controlData.customRules}}
<div v-if="showHide(['input', 'password', 'component','digitpage'], true)" class="jiaoYan">
<el-form-item class="form_cont">
<el-input v-model="ValidateText.message" :placeholder="ValidateText.message">
<el-input v-model="ValidateText.message" @input="requiredText" :placeholder="ValidateText.message">
<template #prepend>
必填
</template>
<template #append>
<el-checkbox v-model="ValidateText.checkbox" />
<el-checkbox v-model="ValidateText.checkbox" @change="requiredChangeSet" />
</template>
</el-input>
</el-form-item>
<el-form-item v-if="showHide(['input', 'password', 'component'], true)" class="form_cont">
<el-radio-group v-model="radioVerify.type" @change="radioChangeSet">
<el-input v-for="item in textUinrVerfy" v-model="item.message" @input="requiredTextRadio(item)" :placeholder="item.message" class="radioInput">
<template #prepend>
{{item.label}}
</template>
<template #append>
<el-radio :value="item.type" />
</template>
</el-input>
</el-radio-group>
</el-form-item>
<el-form-item v-else class="form_cont">
<el-radio-group v-model="radioVerify.type" @change="radioChangeSet">
<el-input v-for="item in numberUinrVerfy" v-model="item.message" @input="requiredTextRadio(item)" :placeholder="item.message" class="radioInput">
<template #prepend>
{{item.label}}
</template>
<template #append>
<el-radio :value="item.type" />
</template>
</el-input>
</el-radio-group>
</el-form-item>
<el-form-item
<!-- <el-form-item
v-for="(item, index) in controlData.customRules"
:key="item.type"
class="form_cont"
@ -3478,7 +3679,7 @@ watch(()=>controlData.value.customRules,(val:any) => {
</el-icon>
</el-tooltip>
</el-button>
</el-form-item>
</el-form-item> -->
</div>
<el-form-item class="form_cont" v-else>
@ -4320,6 +4521,9 @@ li::before {
.form_cont{
padding: 0 10px;
.radioInput{
margin-bottom: 10px;
}
}
.avatar-uploader{
width: 100px;
@ -4353,4 +4557,9 @@ li::before {
.el-main{
--el-main-padding: 5px
}
.jiaoYan{
.el-input-group__append, .el-input-group__prepend{
padding: 0 5px;
}
}
</style>

10
src/components/DesignForm/validateText.ts
View File

@ -5,11 +5,11 @@
@ 功能: 文本类校验规则
*/
export interface ValidateTextTypes {
type: string
label: string
regExp: RegExp
message: string
checkbox: boolean
type?: string
label?: string
regExp?: RegExp
message?: string
checkbox?: boolean
}
const validateTextConfig: ValidateTextTypes[] = [
{

Write Preview
Loading…
Cancel
Save