Browse Source

添加明细按钮点击的时候失去焦点内容还没有获取到

linshi20240813
zhang_li 3 months ago
parent
commit
a8e6411b02
  1. 9
      src/components/BasicForm/src/BasicForm.vue
  2. 125
      src/components/TableForm/src/TableForm.vue

9
src/components/BasicForm/src/BasicForm.vue

@ -107,6 +107,7 @@
:routeName="routeName" :routeName="routeName"
@visibleChange="visibleChange" @visibleChange="visibleChange"
@inputStringFcous='inputStringFcous' @inputStringFcous='inputStringFcous'
:sureDisabled="sureDisabled"
> >
<template v-slot="{ row }"> <template v-slot="{ row }">
<slot :row="row"></slot> <slot :row="row"></slot>
@ -373,6 +374,7 @@ const tableAllSchemas = ref(props.tableAllSchemas)
const tableFormRules = ref(props.tableFormRules) const tableFormRules = ref(props.tableFormRules)
const route = useRoute() // const route = useRoute() //
const routeName = ref('') const routeName = ref('')
const sureDisabled = ref(false)
routeName.value = route.name routeName.value = route.name
// - // -
@ -888,6 +890,7 @@ const onBlur = async (field, e) => {
] ]
count.value++ count.value++
} }
sureDisabled.value= false
} else { } else {
emit('onBlur', field, e) emit('onBlur', field, e)
} }
@ -956,7 +959,9 @@ const inputStringBlur = async (headerItem, val, row, index) => {
defaultButtons.formCloseBtn(null) // defaultButtons.formCloseBtn(null) //
] ]
count.value++ count.value++
} }
sureDisabled.value= false
} }
// //
const onFocus = (field) => { const onFocus = (field) => {
@ -969,6 +974,7 @@ const onFocus = (field) => {
] ]
} }
count.value++ count.value++
sureDisabled.value= true
} }
} }
const inputStringFcous= (headerItem) => { const inputStringFcous= (headerItem) => {
@ -980,6 +986,7 @@ const inputStringFcous= (headerItem) => {
] ]
} }
count.value++ count.value++
sureDisabled.value= true
} }
} }
/** /**

125
src/components/TableForm/src/TableForm.vue

@ -65,7 +65,8 @@
:width="headerItem?.tableForm?.width" :width="headerItem?.tableForm?.width"
:min-width="headerItem?.tableForm?.minWidth || '200px'" :min-width="headerItem?.tableForm?.minWidth || '200px'"
> >
<el-form @submit.native.prevent <el-form
@submit.native.prevent
ref="TableBaseForm_Ref" ref="TableBaseForm_Ref"
:model="row" :model="row"
style="width: 100%" style="width: 100%"
@ -92,7 +93,7 @@
:disabled="disabledInput(headerItem, row)" :disabled="disabledInput(headerItem, row)"
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)" @focus="inputStringFcous(headerItem)"
/> />
<Icon <Icon
@ -116,7 +117,7 @@
<slot :row="row"></slot> <slot :row="row"></slot>
</el-form-item> </el-form-item>
<!-- 金额输入框 --> <!-- 金额输入框 -->
<el-form-item v-if="headerItem?.tableForm?.type == 'number'" :prop="headerItem.field" > <el-form-item v-if="headerItem?.tableForm?.type == 'number'" :prop="headerItem.field">
<el-input <el-input
:key="headerItem.field + $index" :key="headerItem.field + $index"
v-model="row[headerItem.field]" v-model="row[headerItem.field]"
@ -169,10 +170,10 @@
@visible-change="visibleChange(headerItem.field, $event, row, $index)" @visible-change="visibleChange(headerItem.field, $event, row, $index)"
> >
<el-option <el-option
v-for="op in initSelectOptions(headerItem,row)" v-for="op in initSelectOptions(headerItem, row)"
:label="t(`ts.${initLabel(headerItem,op)}`).replace('ts.', '')" :label="t(`ts.${initLabel(headerItem, op)}`).replace('ts.', '')"
:value="initValue(headerItem,op)" :value="initValue(headerItem, op)"
:key="initValue(headerItem,op)" :key="initValue(headerItem, op)"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -199,7 +200,7 @@
@blur="tableFormSelectOnBlur(headerItem.field, $event, row, $index)" @blur="tableFormSelectOnBlur(headerItem.field, $event, row, $index)"
> >
<el-option-group <el-option-group
v-for="group in initSelectOptions(headerItem,row)" v-for="group in initSelectOptions(headerItem, row)"
:key="group.type" :key="group.type"
:label="t(`ts.${group.name}`).replace('ts.', '')" :label="t(`ts.${group.name}`).replace('ts.', '')"
> >
@ -305,7 +306,7 @@
:id="headerItem?.tableForm?.id" :id="headerItem?.tableForm?.id"
> >
<el-radio <el-radio
v-for="(item, index) in initSelectOptions(headerItem,row)" v-for="(item, index) in initSelectOptions(headerItem, row)"
:key="index" :key="index"
:label="t(`ts.${item.value}`).replace('ts.', '')" :label="t(`ts.${item.value}`).replace('ts.', '')"
:size="headerItem?.tableForm?.size" :size="headerItem?.tableForm?.size"
@ -329,7 +330,7 @@
:fill="headerItem?.tableForm?.fill" :fill="headerItem?.tableForm?.fill"
> >
<el-checkbox <el-checkbox
v-for="(item, index) in initSelectOptions(headerItem,row)" v-for="(item, index) in initSelectOptions(headerItem, row)"
:key="index" :key="index"
:label="t(`ts.${item.value}`).replace('ts.', '')" :label="t(`ts.${item.value}`).replace('ts.', '')"
:disabled="itemIsDisabled(headerItem, row)" :disabled="itemIsDisabled(headerItem, row)"
@ -391,32 +392,34 @@
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="tableData.length" :total="tableData.length"
/> />
<div class="button flex" v-if="isShowButton || isShowReduceButtonSelection"> <div class="button flex" style="padding-top: 10px" v-if="isShowButton || isShowReduceButtonSelection">
<div class="p-12px" v-if="isShowButton" @click.stop="handleAddTable"> <el-button
<Icon icon="ep:circle-plus" color="#409eff" size="26" style="cursor: pointer" /> type="primary"
<div>{{ t('ts.添加明细') }}</div> link
</div> v-if="isShowButton"
<div class="p-12px" v-if="isShowReduceButtonSelection" @click.stop="handleSelectionDelete"> @click.stop="handleAddTable"
<Icon icon="ep:delete" color="#409eff" size="26" style="cursor: pointer" /> :disabled="sureDisabled"
<div>{{ t('ts.批量删除') }}</div> :icon="CirclePlus"
</div> size="large"
<div >
class="p-12px" <span>{{ t('ts.添加明细') }}</span>
v-if=" </el-button>
isShowTableFormSearch?.isShowTableFormSearch|| <el-button
routeName == 'PurchaseMain' || type="primary"
routeName == 'PurchaseMain' || link
routeName == 'ProductionMain' || v-if="isShowReduceButtonSelection"
routeName == 'ZZBJDeliverPlanMain' || @click.stop="handleSelectionDelete"
routeName == 'DeliverPlanMain' || :icon="Remove"
routeName == 'DeliverRequestMain' || size="large"
routeName == 'ZZBJDeliverRequestMain' ||
routeName == 'UnplannedreceiptRequestMain'||
routeName == 'RepleinshRequestMain'
"
> >
<el-input v-model="keyWord" style="width: 240px" :placeholder="`请输入${isShowTableFormSearch?.label},多条数据逗号分隔`" /> <span>{{ t('ts.批量删除') }}</span>
</el-button>
<div class="p-12px" v-if="isShowTableFormSearch?.isShowTableFormSearch">
<el-input
v-model="keyWord"
style="width: 240px"
:placeholder="`请输入${isShowTableFormSearch?.label},多条数据逗号分隔`"
/>
<el-button type="primary" style="margin-left: 10px" @click.stop="batchAdd">{{ <el-button type="primary" style="margin-left: 10px" @click.stop="batchAdd">{{
t('批量添加') t('批量添加')
}}</el-button> }}</el-button>
@ -429,6 +432,7 @@
const { t } = useI18n() // const { t } = useI18n() //
import * as defaultButtons from '@/utils/disposition/defaultButtons' import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { CirclePlus, Remove } from '@element-plus/icons-vue'
const props = defineProps({ const props = defineProps({
// //
isShowButton: { isShowButton: {
@ -502,11 +506,16 @@ const props = defineProps({
type: String, type: String,
required: false, required: false,
default: '' default: ''
},
//
sureDisabled: {
type: Boolean,
default: false
} }
}) })
let isShowTableFormSearch = ref({}) let isShowTableFormSearch = ref({})
console.log(33333,props.tableFields) console.log(33333, props.tableFields)
isShowTableFormSearch.value =props.tableFields.find(item=>item.isShowTableFormSearch) isShowTableFormSearch.value = props.tableFields.find((item) => item.isShowTableFormSearch)
// //
const emit = defineEmits([ const emit = defineEmits([
@ -531,11 +540,13 @@ const emit = defineEmits([
'inputStringFcous' 'inputStringFcous'
]) ])
// | type = radio | type = select // | type = radio | type = select
const initSelectOptions = (headerItem,row) => { const initSelectOptions = (headerItem, row) => {
if(row[headerItem.field+'InitOptions']){ if (row[headerItem.field + 'InitOptions']) {
return row[headerItem.field+'InitOptions'] return row[headerItem.field + 'InitOptions']
}else{ } else {
return headerItem.dictType ? getStrDictOptions(headerItem.dictType) : headerItem.tableForm.initOptions return headerItem.dictType
? getStrDictOptions(headerItem.dictType)
: headerItem.tableForm.initOptions
} }
} }
// //
@ -622,7 +633,7 @@ const TableBaseForm_Ref = ref()
const validateForm = () => { const validateForm = () => {
let _lists = TableBaseForm_Ref.value?.map((v) => v.validate()) let _lists = TableBaseForm_Ref.value?.map((v) => v.validate())
if(!_lists ||_lists.length == 0){ if (!_lists || _lists.length == 0) {
return false return false
} }
return Promise.all(_lists) return Promise.all(_lists)
@ -657,7 +668,7 @@ const inputStringBlur = (headerItem, val, row, index) => {
} }
// //
const inputStringFcous = (headerItem) => { const inputStringFcous = (headerItem) => {
emit('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)
@ -667,7 +678,7 @@ const buttonOperationClick = (row, label, index) => {
emit('buttonOperationClick', row, label, index) emit('buttonOperationClick', row, label, index)
} }
const visibleChange = (field, val, row, index) => { const visibleChange = (field, val, row, index) => {
emit('visibleChange',field, val, row, index) emit('visibleChange', field, val, row, index)
} }
const currentPage = ref(1) const currentPage = ref(1)
const pageSize = ref(10) const pageSize = ref(10)
@ -711,19 +722,19 @@ const disabledInput = (headerItem, row) => {
) )
} }
} }
const initLabel=(headerItem,op)=>{ const initLabel = (headerItem, op) => {
if(headerItem?.tableForm?.labelField){ if (headerItem?.tableForm?.labelField) {
return op[headerItem?.tableForm?.labelField] return op[headerItem?.tableForm?.labelField]
}else{ } else {
return op.label return op.label
} }
}
const initValue=(headerItem,op)=>{
if(headerItem?.tableForm?.valueField){
return op[headerItem?.tableForm?.valueField]
}else{
return op.value
} }
const initValue = (headerItem, op) => {
if (headerItem?.tableForm?.valueField) {
return op[headerItem?.tableForm?.valueField]
} else {
return op.value
}
} }
// setup // setup
defineExpose({ defineExpose({

Loading…
Cancel
Save