Browse Source

失去焦点和保存按钮先后问题

hella_online_20240829
张立 6 months ago
parent
commit
f499241e76
  1. 317
      src/api/wms/business/inputBlur.ts
  2. 109
      src/components/BasicForm/src/BasicForm.vue
  3. 14
      src/components/Form/src/Form.vue
  4. 8
      src/components/TableForm/src/TableForm.vue

317
src/api/wms/business/inputBlur.ts

@ -23,7 +23,9 @@ const { t } = useI18n() // 国际化
* FormBlur * FormBlur
*/ */
export const tableFormBlurVer = async (headerItem, val, row, index, routeName, formRef, detailData, tableData, callback) => { export const tableFormBlurVer = async (headerItem, val, row, index, routeName, formRef, detailData, tableData, callback) => {
if (headerItem.tableForm.searchPage && headerItem.tableForm.verificationParams) {
try {
if (headerItem?.tableForm?.searchPage && headerItem?.tableForm?.verificationParams) {
if (val && isString(val)) { if (val && isString(val)) {
if (val.indexOf(',') > -1) { if (val.indexOf(',') > -1) {
message.alert('该输入框只能输入一条数据') message.alert('该输入框只能输入一条数据')
@ -202,97 +204,111 @@ export const tableFormBlurVer = async (headerItem, val, row, index, routeName, f
} }
callback(list.value) callback(list.value)
}) })
}
} }
} catch {
message.warning('暂无数据')
row[headerItem.field] = ''
return
} }
} }
export const FormBlur = async (field, val, routeName, formRef, detailData, formSchema, callback) => { export const FormBlur = async (field, val, routeName, formRef, detailData, formSchema, callback) => {
if (formSchema.searchPage && formSchema.verificationParams) { const setV = {}
//获取data.ts参数信息 setV[field] = ''
const searchCondition = formSchema?.searchCondition || [] try {
//获取失去焦点参数信息 if (formSchema.searchPage && formSchema.verificationParams) {
const verificationParams = formSchema?.verificationParams || //获取data.ts参数信息
[] const searchCondition = formSchema?.searchCondition || []
console.log('走新方法啦') //获取失去焦点参数信息
// searchCondition = [...searchCondition, ...verificationParams] const verificationParams = formSchema?.verificationParams ||
[]
console.log('走新方法啦')
// searchCondition = [...searchCondition, ...verificationParams]
if (val && isString(val)) { if (val && isString(val)) {
const setV = {}
setV[field] = '' let params = {}
let params = {} const _searchCondition = {}
const _searchCondition = {} const filters: any[] = []
const filters: any[] = [] if (searchCondition && searchCondition.length > 0) {
if (searchCondition && searchCondition.length > 0) { // 转换筛选条件所需
// 转换筛选条件所需 for (let i = 0; i < searchCondition.length; i++) {
for (let i = 0; i < searchCondition.length; i++) { // searchCondition.forEach((item) => {
// searchCondition.forEach((item) => { // 查询条件为主表某字段,需要赋值主表数据,数据来源是详情的,赋值需要从row中获取
// 查询条件为主表某字段,需要赋值主表数据,数据来源是详情的,赋值需要从row中获取 if (searchCondition[i].isMainValue) {
if (searchCondition[i].isMainValue) { _searchCondition[searchCondition[i].key] = formRef.formModel[
_searchCondition[searchCondition[i].key] = formRef.formModel[ searchCondition[i].value
searchCondition[i].value ]
] ? formRef.formModel[searchCondition[i].value]
? formRef.formModel[searchCondition[i].value] : detailData
: detailData ? detailData[searchCondition[i].value]
? detailData[searchCondition[i].value] : // : row
: // : row // ? row[searchCondition[i].value]
// ? row[searchCondition[i].value] ''
'' // 是否含有空参数情况
// 是否含有空参数情况 let isNull = false
let isNull = false if (
if ( _searchCondition[searchCondition[i].key] == '' ||
_searchCondition[searchCondition[i].key] == '' || _searchCondition[searchCondition[i].key] == undefined
_searchCondition[searchCondition[i].key] == undefined ) {
) { isNull = true
isNull = true }
} if (isNull) {
if (isNull) { message.warning(
message.warning( searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!'
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!' )
) formRef.setValues(setV)
formRef.setValues(setV) return
return }
filters.push({
action: searchCondition[i].action || '==',
column: searchCondition[i].key,
value: formRef.formModel[searchCondition[i].value]
})
} }
filters.push({
action: searchCondition[i].action || '==',
column: searchCondition[i].key,
value: formRef.formModel[searchCondition[i].value]
})
}
// else if (searchCondition[i].isTableRowValue) { // else if (searchCondition[i].isTableRowValue) {
// if (searchCondition[i].required) { // if (searchCondition[i].required) {
// if (row[searchCondition[i].value] == '' || row[searchCondition[i].value] == undefined) { // if (row[searchCondition[i].value] == '' || row[searchCondition[i].value] == undefined) {
// message.warning( // message.warning(
// searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!' // searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!'
// ) // )
// return // return
// } // }
// } // }
// row[searchCondition[i].value] // row[searchCondition[i].value]
// //查询当前table表数据的值 // //查询当前table表数据的值
// _searchCondition[searchCondition[i].key] = row[searchCondition[i].value] // _searchCondition[searchCondition[i].key] = row[searchCondition[i].value]
// } // }
else { else {
// 扩展 转换为筛选条件进行查询 // 扩展 转换为筛选条件进行查询
if (searchCondition[i].isSearch) { if (searchCondition[i].isSearch) {
if (searchCondition[i].isFormModel) { if (searchCondition[i].isFormModel) {
//用formModel中的值 //用formModel中的值
if (searchCondition[i].required) { if (searchCondition[i].required) {
if ( if (
formRef.formModel[searchCondition[i].value] == '' || formRef.formModel[searchCondition[i].value] == '' ||
formRef.formModel[searchCondition[i].value] == undefined formRef.formModel[searchCondition[i].value] == undefined
) { ) {
message.warning( message.warning(
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!' searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!'
) )
formRef.setValues(setV) formRef.setValues(setV)
return return
}
} }
filters.push({
action: searchCondition[i].action || '==',
column: searchCondition[i].key,
value: formRef.formModel[searchCondition[i].value]
})
} else {
filters.push({
action: searchCondition[i].action || '==',
column: searchCondition[i].key,
value: searchCondition[i].value
})
} }
filters.push({
action: searchCondition[i].action || '==',
column: searchCondition[i].key,
value: formRef.formModel[searchCondition[i].value]
})
} else { } else {
filters.push({ filters.push({
action: searchCondition[i].action || '==', action: searchCondition[i].action || '==',
@ -300,88 +316,87 @@ export const FormBlur = async (field, val, routeName, formRef, detailData, formS
value: searchCondition[i].value value: searchCondition[i].value
}) })
} }
} else {
filters.push({
action: searchCondition[i].action || '==',
column: searchCondition[i].key,
value: searchCondition[i].value
})
} }
} }
} }
} if (verificationParams && verificationParams.length > 0) {
if (verificationParams && verificationParams.length > 0) { // 转换筛选条件所需
// 转换筛选条件所需 for (let i = 0; i < verificationParams.length; i++) {
for (let i = 0; i < verificationParams.length; i++) { // 扩展 转换为筛选条件进行查询
// 扩展 转换为筛选条件进行查询 if (verificationParams[i].isSearch) {
if (verificationParams[i].isSearch) { if (verificationParams[i].isFormModel) {
if (verificationParams[i].isFormModel) { filters.push({
filters.push({ action: verificationParams[i].action,
action: verificationParams[i].action, column: verificationParams[i].key,
column: verificationParams[i].key, value: formRef.formModel[verificationParams[i].value]
value: formRef.formModel[verificationParams[i].value] ? formRef.formModel[verificationParams[i].value]
? formRef.formModel[verificationParams[i].value] : val.trim()
: val.trim() })
}) } else {
filters.push({
action: verificationParams[i].action,
column: verificationParams[i].key,
value: verificationParams[i].value
})
}
} else { } else {
filters.push({ _searchCondition[verificationParams[i].key] = verificationParams[i].value
action: verificationParams[i].action,
column: verificationParams[i].key,
value: verificationParams[i].value
})
} }
} else {
_searchCondition[verificationParams[i].key] = verificationParams[i].value
} }
} }
} console.log(filters)
console.log(filters) if (filters.length > 0) {
if (filters.length > 0) { _searchCondition.isSearch = true
_searchCondition.isSearch = true _searchCondition.filters = filters
_searchCondition.filters = filters
}
console.log(4545, _searchCondition)
const obj = {
by: 'ASC',
pageNo: 1,
pageSize: 20
}
console.log(888, _searchCondition)
params = {
isSearch: _searchCondition.isSearch,
filters: _searchCondition.filters,
...obj
}
// console.log(333,params)
if (!formSchema?.multiple && val.indexOf(',') > -1) {
message.alert('该输入框只能输入一条数据')
formRef.setValues(setV)
return
}
await formSchema.searchPage(params).then((res) => {
const arr1 = val.split(',')
const list = ref([])
list.value = res?.list?.length > 0 ? res.list.slice(0, 1) : []
if (list.value?.length == 0) {
message.alert('暂无数据')
formRef.setValues(setV)
return
} }
if (arr1.length != list.value.length) { console.log(4545, _searchCondition)
const arr2 = list.value.map((item) => item.code) const obj = {
const str = [ by: 'ASC',
...arr1.filter((item) => !arr2.includes(item)), pageNo: 1,
...arr2.filter((item) => !arr1.includes(item)) pageSize: 20
].join(',') }
message.alert('代码' + str + '没有找到对应数据') console.log(888, _searchCondition)
params = {
isSearch: _searchCondition.isSearch,
filters: _searchCondition.filters,
...obj
}
// console.log(333,params)
if (!formSchema?.multiple && val.indexOf(',') > -1) {
message.alert('该输入框只能输入一条数据')
formRef.setValues(setV) formRef.setValues(setV)
return return
} }
callback(list.value) await formSchema.searchPage(params).then((res) => {
}) const arr1 = val.split(',')
const list = ref([])
list.value = res?.list?.length > 0 ? res.list.slice(0, 1) : []
if (list.value?.length == 0) {
message.alert('暂无数据')
formRef.setValues(setV)
return
}
if (arr1.length != list.value.length) {
const arr2 = list.value.map((item) => item.code)
const str = [
...arr1.filter((item) => !arr2.includes(item)),
...arr2.filter((item) => !arr1.includes(item))
].join(',')
message.alert('代码' + str + '没有找到对应数据')
formRef.setValues(setV)
return
}
callback(list.value)
})
}
} }
} catch {
message.alert('暂无数据')
formRef.setValues(setV)
return
} }
} }
// 根据下方输入框失去焦点校验信息 // 根据下方输入框失去焦点校验信息

109
src/components/BasicForm/src/BasicForm.vue

@ -20,6 +20,7 @@
@onChange="onChange" @onChange="onChange"
@onBlur="onBlur" @onBlur="onBlur"
@onEnter="onEnter" @onEnter="onEnter"
@onFocus="onFocus"
> >
<template #crontab="formSchema1" v-if="fromeWhere == 'countPlan'"> <template #crontab="formSchema1" v-if="fromeWhere == 'countPlan'">
<crontab <crontab
@ -105,6 +106,7 @@
@batchAdd="batchAdd" @batchAdd="batchAdd"
:routeName="routeName" :routeName="routeName"
@visibleChange="visibleChange" @visibleChange="visibleChange"
@inputStringFcous='inputStringFcous'
> >
<template v-slot="{ row }"> <template v-slot="{ row }">
<slot :row="row"></slot> <slot :row="row"></slot>
@ -126,7 +128,7 @@
</div> </div>
<template #footer> <template #footer>
<slot name="foorter"></slot> <slot name="foorter"></slot>
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" /> <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" :key="count" />
</template> </template>
</Dialog> </Dialog>
<SearchTable <SearchTable
@ -148,6 +150,7 @@ import TableFormCountPlan from '@/components/TableFormCountPlan/src/TableFormCou
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { tableFormBlurVer, FormBlur, getListByBottonInput } from '@/api/wms/business/inputBlur' import { tableFormBlurVer, FormBlur, getListByBottonInput } from '@/api/wms/business/inputBlur'
import { isString } from 'min-dash' import { isString } from 'min-dash'
const count = ref(0)
const props = defineProps({ const props = defineProps({
// //
@ -365,7 +368,6 @@ const tableFormRules = ref(props.tableFormRules)
const route = useRoute() // const route = useRoute() //
const routeName = ref('') const routeName = ref('')
routeName.value = route.name routeName.value = route.name
const isExecute = ref(true) //true
// - // -
// const buttondata = [ // const buttondata = [
@ -410,7 +412,7 @@ const opensearchTable = (
// searchCondition.forEach((item) => { // searchCondition.forEach((item) => {
// row // row
if (searchCondition[i].isMainValue) { if (searchCondition[i].isMainValue) {
if(searchCondition[i].isFilterValue){ if (searchCondition[i].isFilterValue) {
//filters //filters
filters.push({ filters.push({
action: searchCondition[i].action, action: searchCondition[i].action,
@ -423,31 +425,31 @@ const opensearchTable = (
? row[searchCondition[i].value] ? row[searchCondition[i].value]
: '' : ''
}) })
}else{ } else {
_searchCondition[searchCondition[i].key] = formRef.value.formModel[
_searchCondition[searchCondition[i].key] = formRef.value.formModel[searchCondition[i].value] searchCondition[i].value
? formRef.value.formModel[searchCondition[i].value] ]
: props.detailData ? formRef.value.formModel[searchCondition[i].value]
? props.detailData[searchCondition[i].value] : props.detailData
: row ? props.detailData[searchCondition[i].value]
? row[searchCondition[i].value] : row
: '' ? row[searchCondition[i].value]
// : ''
let isNull = false //
if ( let isNull = false
_searchCondition[searchCondition[i].key] == '' || if (
_searchCondition[searchCondition[i].key] == undefined _searchCondition[searchCondition[i].key] == '' ||
) { _searchCondition[searchCondition[i].key] == undefined
isNull = true ) {
} isNull = true
if (isNull) { }
message.warning( if (isNull) {
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!' message.warning(
) searchCondition[i].message ? searchCondition[i].message : '前置条件未选择!'
return )
} return
}
} }
} else if (searchCondition[i].isTableRowValue) { } else if (searchCondition[i].isTableRowValue) {
if (searchCondition[i].required) { if (searchCondition[i].required) {
if (row[searchCondition[i].value] == '' || row[searchCondition[i].value] == undefined) { if (row[searchCondition[i].value] == '' || row[searchCondition[i].value] == undefined) {
@ -613,6 +615,7 @@ const open = async (
} }
formType.value = type formType.value = type
resetForm() resetForm()
count.value = 0
// //
// masterIdnumber // masterIdnumber
if (masterParmas) { if (masterParmas) {
@ -856,10 +859,9 @@ const onChange = (field, cur) => {
* @param field 当前操作字段 * @param field 当前操作字段
* @param e * @param e
*/ */
const onBlur = async (field, e) => { const onBlur = async (field, e) => {
isExecute.value = false
let formSchemaObj = formSchema.value.find((item) => item.field == field)?.componentProps let formSchemaObj = formSchema.value.find((item) => item.field == field)?.componentProps
if (formSchemaObj?.enterSearch) { if (formSchemaObj?.enterSearch) {
await FormBlur( await FormBlur(
field, field,
@ -872,10 +874,17 @@ const onBlur = async (field, e) => {
emit('searchTableSuccess', field, formSchemaObj.searchField, list, formRef.value, 'form') emit('searchTableSuccess', field, formSchemaObj.searchField, list, formRef.value, 'form')
} }
) )
console.log(22222)
if (props.isShowFooterButtton && !props.footButttondata) {
Butttondata = [
defaultButtons.formSaveBtn(null), //
defaultButtons.formCloseBtn(null) //
]
count.value++
}
} else { } else {
emit('onBlur', field, e) emit('onBlur', field, e)
} }
isExecute.value = true
} }
// //
@ -908,10 +917,10 @@ const batchAdd = async (val) => {
) )
} }
) )
} }
const inputStringBlur = async (headerItem, val, row, index) => { const inputStringBlur = async (headerItem, val, row, index) => {
// isExecute.value = false
await tableFormBlurVer( await tableFormBlurVer(
headerItem, headerItem,
val, val,
@ -921,7 +930,7 @@ const inputStringBlur = async (headerItem, val, row, index) => {
formRef.value, formRef.value,
props.detailData, props.detailData,
props.tableData, props.tableData,
( list) => { (list) => {
emit( emit(
'searchTableSuccess', 'searchTableSuccess',
headerItem.field, headerItem.field,
@ -935,10 +944,38 @@ const inputStringBlur = async (headerItem, val, row, index) => {
) )
} }
) )
if (props.isShowFooterButtton && !props.footButttondata) {
// isExecute.value = true Butttondata = [
defaultButtons.formSaveBtn(null), //
defaultButtons.formCloseBtn(null) //
]
count.value++
}
}
//
const onFocus = (field) => {
let formSchemaObj = formSchema.value.find((item) => item.field == field)?.componentProps
if (formSchemaObj?.enterSearch) {
if (props.isShowFooterButtton && !props.footButttondata) {
Butttondata = [
defaultButtons.formSaveBtn({ disabled: true }), //
defaultButtons.formCloseBtn(null) //
]
}
count.value++
}
}
const inputStringFcous= (headerItem) => {
if (headerItem?.tableForm?.searchPage && headerItem?.tableForm?.verificationParams) {
if (props.isShowFooterButtton && !props.footButttondata) {
Butttondata = [
defaultButtons.formSaveBtn({ disabled: true }), //
defaultButtons.formCloseBtn(null) //
]
}
count.value++
}
} }
/** /**
* 回车事件 * 回车事件
* @param field 当前操作字段 * @param field 当前操作字段
@ -946,7 +983,7 @@ const inputStringBlur = async (headerItem, val, row, index) => {
*/ */
const onEnter = async (field, value, e) => { const onEnter = async (field, value, e) => {
let formSchemaObj = formSchema.value.find((item) => item.field == field)?.componentProps let formSchemaObj = formSchema.value.find((item) => item.field == field)?.componentProps
if (formSchemaObj?.enterSearch && formSchemaObj?.isEnter ) { if (formSchemaObj?.enterSearch && formSchemaObj?.isEnter) {
await FormBlur( await FormBlur(
field, field,
value, value,

14
src/components/Form/src/Form.vue

@ -55,7 +55,7 @@ export default defineComponent({
vLoading: propTypes.bool.def(false), vLoading: propTypes.bool.def(false),
labelPosition: propTypes.string.def('left'), labelPosition: propTypes.string.def('left'),
}, },
emits: ['register','opensearchTable','clearSearchInput', 'onChange', 'onBlur','onEnter','hiddenFilterButton','changeDialogWidth','onInput'], emits: ['register','opensearchTable','clearSearchInput', 'onChange', 'onBlur','onFocus','onEnter','hiddenFilterButton','changeDialogWidth','onInput'],
setup(props, { slots, expose, emit }) { setup(props, { slots, expose, emit }) {
// element form // element form
const elFormRef = ref<ComponentRef<typeof ElForm>>() const elFormRef = ref<ComponentRef<typeof ElForm>>()
@ -204,6 +204,10 @@ export default defineComponent({
const onBlur = (field, e) => { const onBlur = (field, e) => {
emit('onBlur', field, e) emit('onBlur', field, e)
} }
const onFocus = (field) => {
emit('onFocus', field)
}
const onInput = (field,value) => { const onInput = (field,value) => {
emit('onInput', field,value) emit('onInput', field,value)
} }
@ -270,8 +274,8 @@ export default defineComponent({
emit('onEnter',item.field,formModel.value[item.field],event) emit('onEnter',item.field,formModel.value[item.field],event)
} }
}} }}
onBlur={(e) => { onBlur(item.field, e) }}
onBlur={(e)=>{onBlur(item.field, e)}} onFocus={(e) => { onFocus(item.field) }}
onChange={(e)=>{onChange(item.field, e)}} onChange={(e)=>{onChange(item.field, e)}}
v-slots={{ v-slots={{
suffix: () => ( suffix: () => (
@ -325,6 +329,7 @@ export default defineComponent({
}} }}
onBlur={(e)=>{onBlur(item.field,formModel.value[item.field])}} onBlur={(e)=>{onBlur(item.field,formModel.value[item.field])}}
onFocus={(e) => { onFocus(item.field)}}
onChange={(e)=>{onChange(item.field,formModel.value[item.field])}} onChange={(e)=>{onChange(item.field,formModel.value[item.field])}}
disabled={item?.componentProps?.enterSearch?false:true} v-slots={{ disabled={item?.componentProps?.enterSearch?false:true} v-slots={{
suffix: () => ( suffix: () => (
@ -392,7 +397,8 @@ export default defineComponent({
{...setComponentProps(item)} {...setComponentProps(item)}
style={item.componentProps?.style} style={item.componentProps?.style}
onChange={(e)=>{onChange(item.field, e)}} onChange={(e)=>{onChange(item.field, e)}}
onBlur={(e)=>{onBlur(item.field, e)}} onBlur={(e) => { onBlur(item.field, e) }}
onFocus={(e) => { onFocus(item.field) }}
onInput={(value)=>{onInput(item.field,value)}} onInput={(value)=>{onInput(item.field,value)}}
{...(notRenderOptions.includes(item?.component as string) && {...(notRenderOptions.includes(item?.component as string) &&
item?.componentProps?.options item?.componentProps?.options

8
src/components/TableForm/src/TableForm.vue

@ -93,6 +93,7 @@
style="flex: 1" style="flex: 1"
@blur="inputStringBlur(headerItem, row[headerItem.field], row, index)" @blur="inputStringBlur(headerItem, row[headerItem.field], row, index)"
@clear='clearInput(headerItem.field, row, index)' @clear='clearInput(headerItem.field, row, index)'
@focus="inputStringFcous(headerItem)"
/> />
<Icon <Icon
icon="ep:circle-close" icon="ep:circle-close"
@ -526,7 +527,8 @@ const emit = defineEmits([
'formFormDateChange', 'formFormDateChange',
'clearInput', 'clearInput',
'batchAdd', 'batchAdd',
'visibleChange' 'visibleChange',
'inputStringFcous'
]) ])
// | type = radio | type = select // | type = radio | type = select
const initSelectOptions = (headerItem,row) => { const initSelectOptions = (headerItem,row) => {
@ -653,6 +655,10 @@ const inpuFocus = (headerItem, row, index) => {
const inputStringBlur = (headerItem, val, row, index) => { const inputStringBlur = (headerItem, val, row, index) => {
emit('inputStringBlur', headerItem, val, row, index) emit('inputStringBlur', headerItem, val, row, index)
} }
//
const inputStringFcous = (headerItem) => {
emit('inputStringFcous', headerItem)
}
const clearInput = (field, row, index) => { const clearInput = (field, row, index) => {
emit('clearInput', field, row, index) emit('clearInput', field, row, index)
} }

Loading…
Cancel
Save