sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

hella_online_20240829
zhang_li 3 months ago
parent
d04f4b58f9
commit
f499241e76
4 changed files with 256 additions and 192 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. 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
View File

@ -23,7 +23,9 @@ const { t } = useI18n() // 国际化
* FormBlur 表格失去焦点时候获取焦点
*/
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.indexOf(',') > -1) {
message.alert('该输入框只能输入一条数据')
@ -202,97 +204,111 @@ export const tableFormBlurVer = async (headerItem, val, row, index, routeName, f
}
callback(list.value)
})
}
}
} catch {
message.warning('暂无数据')
row[headerItem.field] = ''
return
}
}
export const FormBlur = async (field, val, routeName, formRef, detailData, formSchema, callback) => {
if (formSchema.searchPage && formSchema.verificationParams) {
//获取data.ts参数信息
const searchCondition = formSchema?.searchCondition || []
//获取失去焦点参数信息
const verificationParams = formSchema?.verificationParams ||
[]
console.log('走新方法啦')
// searchCondition = [...searchCondition, ...verificationParams]
const setV = {}
setV[field] = ''
try {
if (formSchema.searchPage && formSchema.verificationParams) {
//获取data.ts参数信息
const searchCondition = formSchema?.searchCondition || []
//获取失去焦点参数信息
const verificationParams = formSchema?.verificationParams ||
[]
console.log('走新方法啦')
// searchCondition = [...searchCondition, ...verificationParams]
if (val && isString(val)) {
const setV = {}
setV[field] = ''
let params = {}
const _searchCondition = {}
const filters: any[] = []
if (searchCondition && searchCondition.length > 0) {
// 转换筛选条件所需
for (let i = 0; i < searchCondition.length; i++) {
// searchCondition.forEach((item) => {
// 查询条件为主表某字段，需要赋值主表数据，数据来源是详情的，赋值需要从row中获取
if (searchCondition[i].isMainValue) {
_searchCondition[searchCondition[i].key] = formRef.formModel[
searchCondition[i].value
]
? formRef.formModel[searchCondition[i].value]
: detailData
? detailData[searchCondition[i].value]
: // : row
// ? row[searchCondition[i].value]
''
// 是否含有空参数情况
let isNull = false
if (
_searchCondition[searchCondition[i].key] == '' ||
_searchCondition[searchCondition[i].key] == undefined
) {
isNull = true
}
if (isNull) {
message.warning(
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
)
formRef.setValues(setV)
return
if (val && isString(val)) {
let params = {}
const _searchCondition = {}
const filters: any[] = []
if (searchCondition && searchCondition.length > 0) {
// 转换筛选条件所需
for (let i = 0; i < searchCondition.length; i++) {
// searchCondition.forEach((item) => {
// 查询条件为主表某字段，需要赋值主表数据，数据来源是详情的，赋值需要从row中获取
if (searchCondition[i].isMainValue) {
_searchCondition[searchCondition[i].key] = formRef.formModel[
searchCondition[i].value
]
? formRef.formModel[searchCondition[i].value]
: detailData
? detailData[searchCondition[i].value]
: // : row
// ? row[searchCondition[i].value]
''
// 是否含有空参数情况
let isNull = false
if (
_searchCondition[searchCondition[i].key] == '' ||
_searchCondition[searchCondition[i].key] == undefined
) {
isNull = true
}
if (isNull) {
message.warning(
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
)
formRef.setValues(setV)
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) {
// if (searchCondition[i].required) {
// if (row[searchCondition[i].value] == '' || row[searchCondition[i].value] == undefined) {
// message.warning(
// searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
// )
// return
// }
// }
// row[searchCondition[i].value]
// //查询当前table表数据的值
// _searchCondition[searchCondition[i].key] = row[searchCondition[i].value]
// }
else {
// 扩展 转换为筛选条件进行查询
if (searchCondition[i].isSearch) {
if (searchCondition[i].isFormModel) {
//用formModel中的值
if (searchCondition[i].required) {
if (
formRef.formModel[searchCondition[i].value] == '' ||
formRef.formModel[searchCondition[i].value] == undefined
) {
message.warning(
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
)
formRef.setValues(setV)
return
// else if (searchCondition[i].isTableRowValue) {
// if (searchCondition[i].required) {
// if (row[searchCondition[i].value] == '' || row[searchCondition[i].value] == undefined) {
// message.warning(
// searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
// )
// return
// }
// }
// row[searchCondition[i].value]
// //查询当前table表数据的值
// _searchCondition[searchCondition[i].key] = row[searchCondition[i].value]
// }
else {
// 扩展 转换为筛选条件进行查询
if (searchCondition[i].isSearch) {
if (searchCondition[i].isFormModel) {
//用formModel中的值
if (searchCondition[i].required) {
if (
formRef.formModel[searchCondition[i].value] == '' ||
formRef.formModel[searchCondition[i].value] == undefined
) {
message.warning(
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
)
formRef.setValues(setV)
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 {
filters.push({
action: searchCondition[i].action || '==',
@ -300,87 +316,86 @@ export const FormBlur = async (field, val, routeName, formRef, detailData, formS
value: searchCondition[i].value
})
}
} else {
filters.push({
action: searchCondition[i].action || '==',
column: searchCondition[i].key,
value: searchCondition[i].value
})
}
}
}
}
if (verificationParams && verificationParams.length > 0) {
// 转换筛选条件所需
for (let i = 0; i < verificationParams.length; i++) {
// 扩展 转换为筛选条件进行查询
if (verificationParams[i].isSearch) {
if (verificationParams[i].isFormModel) {
filters.push({
action: verificationParams[i].action,
column: verificationParams[i].key,
value: formRef.formModel[verificationParams[i].value]
? formRef.formModel[verificationParams[i].value]
: val.trim()
})
if (verificationParams && verificationParams.length > 0) {
// 转换筛选条件所需
for (let i = 0; i < verificationParams.length; i++) {
// 扩展 转换为筛选条件进行查询
if (verificationParams[i].isSearch) {
if (verificationParams[i].isFormModel) {
filters.push({
action: verificationParams[i].action,
column: verificationParams[i].key,
value: formRef.formModel[verificationParams[i].value]
? formRef.formModel[verificationParams[i].value]
: val.trim()
})
} else {
filters.push({
action: verificationParams[i].action,
column: verificationParams[i].key,
value: verificationParams[i].value
})
}
} else {
filters.push({
action: verificationParams[i].action,
column: verificationParams[i].key,
value: verificationParams[i].value
})
_searchCondition[verificationParams[i].key] = verificationParams[i].value
}
} else {
_searchCondition[verificationParams[i].key] = verificationParams[i].value
}
}
}
console.log(filters)
if (filters.length > 0) {
_searchCondition.isSearch = true
_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
console.log(filters)
if (filters.length > 0) {
_searchCondition.isSearch = true
_searchCondition.filters = filters
}
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 + '没有找到对应数据')
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
}
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
View File

@ -20,6 +20,7 @@
@onChange="onChange"
@onBlur="onBlur"
@onEnter="onEnter"
@onFocus="onFocus"
>
<template #crontab="formSchema1" v-if="fromeWhere == 'countPlan'">
<crontab
@ -105,6 +106,7 @@
@batchAdd="batchAdd"
:routeName="routeName"
@visibleChange="visibleChange"
@inputStringFcous='inputStringFcous'
>
<template v-slot="{ row }">
<slot :row="row"></slot>
@ -126,7 +128,7 @@
</div>
<template #footer>
<slot name="foorter"></slot>
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" :key="count" />
</template>
</Dialog>
<SearchTable
@ -148,6 +150,7 @@ import TableFormCountPlan from '@/components/TableFormCountPlan/src/TableFormCou
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { tableFormBlurVer, FormBlur, getListByBottonInput } from '@/api/wms/business/inputBlur'
import { isString } from 'min-dash'
const count = ref(0)
const props = defineProps({
// 显示窗口宽度设置
@ -365,7 +368,6 @@ const tableFormRules = ref(props.tableFormRules)
const route = useRoute() // 路由信息
const routeName = ref('')
routeName.value = route.name
const isExecute = ref(true) //如果走失去焦点的方法只有为true的时候才能进行保存
// 列表-按钮
// const buttondata = [
@ -410,7 +412,7 @@ const opensearchTable = (
// searchCondition.forEach((item) => {
// 查询条件为主表某字段，需要赋值主表数据，数据来源是详情的，赋值需要从row中获取
if (searchCondition[i].isMainValue) {
if(searchCondition[i].isFilterValue){
if (searchCondition[i].isFilterValue) {
//后端接口需要拼入到filters中
filters.push({
action: searchCondition[i].action,
@ -423,31 +425,31 @@ const opensearchTable = (
? row[searchCondition[i].value]
: ''
})
}else{
_searchCondition[searchCondition[i].key] = formRef.value.formModel[searchCondition[i].value]
? formRef.value.formModel[searchCondition[i].value]
: props.detailData
? props.detailData[searchCondition[i].value]
: row
? row[searchCondition[i].value]
: ''
// 是否含有空参数情况
let isNull = false
if (
_searchCondition[searchCondition[i].key] == '' ||
_searchCondition[searchCondition[i].key] == undefined
) {
isNull = true
}
if (isNull) {
message.warning(
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
)
return
}
} else {
_searchCondition[searchCondition[i].key] = formRef.value.formModel[
searchCondition[i].value
]
? formRef.value.formModel[searchCondition[i].value]
: props.detailData
? props.detailData[searchCondition[i].value]
: row
? row[searchCondition[i].value]
: ''
// 是否含有空参数情况
let isNull = false
if (
_searchCondition[searchCondition[i].key] == '' ||
_searchCondition[searchCondition[i].key] == undefined
) {
isNull = true
}
if (isNull) {
message.warning(
searchCondition[i].message ? searchCondition[i].message : '前置条件未选择！'
)
return
}
}
} else if (searchCondition[i].isTableRowValue) {
if (searchCondition[i].required) {
if (row[searchCondition[i].value] == '' || row[searchCondition[i].value] == undefined) {
@ -613,6 +615,7 @@ const open = async (
}
formType.value = type
resetForm()
count.value = 0
// 修改时，设置数据
// 如果是从主表的详情页面进图添加子表，需要添加masterId，number参数
if (masterParmas) {
@ -856,10 +859,9 @@ const onChange = (field, cur) => {
* @param field 当前操作字段
* @param e
*/
const onBlur = async (field, e) => {
isExecute.value = false
let formSchemaObj = formSchema.value.find((item) => item.field == field)?.componentProps
if (formSchemaObj?.enterSearch) {
await FormBlur(
field,
@ -872,10 +874,17 @@ const onBlur = async (field, e) => {
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 {
emit('onBlur', field, e)
}
isExecute.value = true
}
// 批量增加
@ -908,10 +917,10 @@ const batchAdd = async (val) => {
)
}
)
}
const inputStringBlur = async (headerItem, val, row, index) => {
// isExecute.value = false
await tableFormBlurVer(
headerItem,
val,
@ -921,7 +930,7 @@ const inputStringBlur = async (headerItem, val, row, index) => {
formRef.value,
props.detailData,
props.tableData,
( list) => {
(list) => {
emit(
'searchTableSuccess',
headerItem.field,
@ -935,10 +944,38 @@ const inputStringBlur = async (headerItem, val, row, index) => {
)
}
)
// isExecute.value = true
if (props.isShowFooterButtton && !props.footButttondata) {
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 当前操作字段
@ -946,7 +983,7 @@ const inputStringBlur = async (headerItem, val, row, index) => {
*/
const onEnter = async (field, value, e) => {
let formSchemaObj = formSchema.value.find((item) => item.field == field)?.componentProps
if (formSchemaObj?.enterSearch && formSchemaObj?.isEnter ) {
if (formSchemaObj?.enterSearch && formSchemaObj?.isEnter) {
await FormBlur(
field,
value,

14
src/components/Form/src/Form.vue
View File

@ -55,7 +55,7 @@ export default defineComponent({
vLoading: propTypes.bool.def(false),
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 }) {
// element form 实例
const elFormRef = ref<ComponentRef<typeof ElForm>>()
@ -204,6 +204,10 @@ export default defineComponent({
const onBlur = (field, e) => {
emit('onBlur', field, e)
}
const onFocus = (field) => {
emit('onFocus', field)
}
const onInput = (field,value) => {
emit('onInput', field,value)
}
@ -270,8 +274,8 @@ export default defineComponent({
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)}}
v-slots={{
suffix: () => (
@ -325,6 +329,7 @@ export default defineComponent({
}}
onBlur={(e)=>{onBlur(item.field,formModel.value[item.field])}}
onFocus={(e) => { onFocus(item.field)}}
onChange={(e)=>{onChange(item.field,formModel.value[item.field])}}
disabled={item?.componentProps?.enterSearch?false:true} v-slots={{
suffix: () => (
@ -392,7 +397,8 @@ export default defineComponent({
{...setComponentProps(item)}
style={item.componentProps?.style}
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)}}
{...(notRenderOptions.includes(item?.component as string) &&
item?.componentProps?.options

8
src/components/TableForm/src/TableForm.vue
View File

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

Write Preview
Loading…
Cancel
Save