From 7b15bbf1363982a03dd33c95f3ccdfdcfb7c1d47 Mon Sep 17 00:00:00 2001 From: cuiqian2004 <cuiqian2004@163.com> Date: 星期五, 14 三月 2025 18:20:31 +0800 Subject: [PATCH] oi-form --- pages/modal/form/index.vue | 378 +++++++++++++++++------------------------------------ 1 files changed, 125 insertions(+), 253 deletions(-) diff --git a/pages/modal/form/index.vue b/pages/modal/form/index.vue index d2c24d3..55c95e5 100644 --- a/pages/modal/form/index.vue +++ b/pages/modal/form/index.vue @@ -2,97 +2,9 @@ <view class="uni-page-modal-form"> <view class="view-content"> <!-- 琛ㄥご鏍峰紡 --> - <uni-forms ref="baseForm" label-align="right"> - <view v-for="(item,index) in head_styledef.form.items" :key="index" class="v-head-style"> - <!-- 鏅�甯冨眬 --> - <uni-forms-item v-if="item.name != 'Layout'" :label="item.label ?item.label +'锛�:'' " - :label-width="item.labelWidth+'px'"> - <uni-data-picker v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''" - v-model="item.value" :localdata="item.useDict ? item.dict : item.selections" @change="onEnterChange(item)" - :readonly="item.disabled" :clear-icon="false" :popup-title="item.label"></uni-data-picker> - <view class="input-wrapper" v-if="item.name=='Input' || item.name=='InputNumber'"> - <text v-if="item.setting.prefix" class="uni-icon" :class="[item.setting.prefix]" - @click="classAttr_extButton(item)"></text> - <input class="uni-input" :class="item.disabled?'input-disabled':''" - :style="{'padding-left':item.setting.prefix?0 : '8rpx','right':item.setting.suffix?0 : '8rpx'}" - :type="item.name=='Input'?'text':'number'" v-model="item.value" - :disabled="item.disabled" :placeholder="item.placeholder" - :focus="focusFieldId == item.fieldId" @focus="ontap(item)" @click="onClick(item)" - @keyup.enter="onEnterChange(item)" @blur="onEnterChange(item)" :maxlength="-1" /> - <text v-if="item.setting.suffix" class="uni-icon" :class="[item.setting.suffix]" - @click="classAttr_extButton(item)"></text> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group v-if="item.name=='Checkbox'" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" @change="onCheckBoxValue" :data-attr="item.fieldId" - :data-index="index"> - <label v-for="(item2) in item.selections" :key="item2.value"> - <checkbox :value="item2.value" :checked="item.value.includes(item2.value)" /> - <text>{{item2.label}}</text> - </label> - </checkbox-group> - <!-- 鍗曢�妗�--> - <radio-group v-if="item.name=='Radio'" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" @change="onRadioBoxValue" :data-attr="item.fieldId" - :data-index="index"> - <label v-for="(item2) in item.selections" :key="item2.value"> - <radio :value="item2.value" :checked="item2.value === item.value" /> - <text>{{item2.label}}</text> - </label> - </radio-group> - <!-- Switch寮�叧 --> - <switch class="input-switch" v-if="item.name=='Switch'" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" v-model="item.value" - @change="onEnterChange(item)" /> - </uni-forms-item> - <!-- 鏍呮牸甯冨眬 --> - <uni-row v-else :gutter="item.setting.gutter"> - <uni-col - :span=" item.setting.spanList && item.setting.spanList[key]? item.setting.spanList[key] : 24 / item.setting.col" - v-for="(col,key) in item.setting.colList"> - <uni-forms-item v-if="col!=null" :label="col.label ? col.label +'锛�:''" :label-width="col.labelWidth+'px'"> - <uni-data-picker v-if="col.name=='Select'" :class="col.disabled?'input-disabled':''" - v-model="col.value" :localdata="col.useDict ? col.dict : col.selections" @change="onEnterChange(col)" - :readonly="col.disabled" :clear-icon="false" - :popup-title="col.label"></uni-data-picker> - <view class="input-wrapper" v-if="col.name=='Input' || col.name=='InputNumber'"> - <text v-if="col.setting.prefix" class="uni-icon" :class="[col.setting.prefix]" - @click="classAttr_extButton(col)"></text> - <input class="uni-input" :class="col.disabled?'input-disabled':''" - :style="{'padding-left':col.setting.prefix?0 : '8px','right':col.setting.suffix?0 : '8px'}" - :type="col.name=='Input'?'text':'number'" v-model="col.value" - :disabled="col.disabled" :placeholder="col.placeholder" - :focus="focusFieldId == col.fieldId" @focus="ontap(col)" @click="onClick(col)" - @keyup.enter="onEnterChange(col)" @blur="onEnterChange(col)" :maxlength="-1" /> - <text v-if="col.setting.suffix" class="uni-icon" :class="[col.setting.suffix]" - @click="classAttr_extButton(col)"></text> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group v-if="col.name=='Checkbox'" :class="col.disabled?'input-disabled':''" - :disabled="col.disabled" @change="onCheckBoxValue" :data-attr="col.fieldId" - :data-index="index" :data-iindex="key"> - <label v-for="(col2) in col.selections" :key="col2.value"> - <checkbox :value="col2.value" :checked="col.value.includes(col2.value)" /> - <text>{{col2.label}}</text> - </label> - </checkbox-group> - <!-- 鍗曢�妗�--> - <radio-group v-if="col.name=='Radio'" :class="col.disabled?'input-disabled':''" - :disabled="col.disabled" @change="onRadioBoxValue" :data-attr="col.fieldId" - :data-index="index" :data-iindex="key"> - <label v-for="(col2) in col.selections" :key="col2.value"> - <radio :value="col2.value" :checked="col2.value === col.value" /> - <text>{{col2.label}}</text> - </label> - </radio-group> - <!-- Switch寮�叧 --> - <switch v-if="col.name=='Switch'" :class="col.disabled?'input-disabled':''" - :disabled="col.disabled" v-model="col.value" @change="onEnterChange(col)" /> - </uni-forms-item> - </uni-col> - </uni-row> - </view> - </uni-forms> + <OIForm ref="refBaseForm" class="v-head-style" :form="head_styledef.form" :focusId="focusFieldId" + @click="onClick" @focus="ontap" @change="onEnterChange" @click-prefix="classAttr_extButton" + @click-suffix="classAttr_extButton"></OIForm> </view> <view class="view-bottom"> <button type="primary" @tap="ok" class="btn_add" :class="okLoading?'btn_disabled':''" @@ -104,8 +16,9 @@ <uni-popup class="view-popup" ref="popup" background-color="#fff" @change="popupChange"> <view class="popup-header">{{check_list.title}}</view> <view class="popup-content" :class="{ 'popup-height': popupType === 'left' || popupType === 'right' }" - :style="{'width':check_list.width?check_list.width+'px':'200px','height':check_list.height?check_list.height+'px':'88%'}"> - <view class="popup-cont" :style="{'height':check_list.height?check_list.height-45+'px':'415px'}"> + :style="{'width':check_list.width?check_list.width+'px':'375rpx','height':check_list.height?check_list.height+'px':popupType =='center'?'60vh':'88vh'}"> + <view class="popup-cont" + :style="{'height':check_list.height?check_list.height-45+'px':popupType =='center'?'50vh':'80vh'}"> <view class="view_popup_CheckList" v-for="(item,index) in check_list.items"> <checkbox-group class="check_list" @change="checkChange" :data-ischeck="item.check" :data-index="index" :style="{'margin-left': '10rpx'}"> @@ -117,7 +30,7 @@ </view> </view> <view class="popup-footer"> - <button type="default" @tap="popup_sava" class="btn_popup_add">{{translateSys('ok')}}</button> + <button type="primary" @tap="popup_sava" class="btn_popup_add">{{translateSys('ok')}}</button> <button type="default" @tap="popup_cancel" class="btn_popup_cancel">{{translateSys('cancel')}}</button> </view> @@ -139,11 +52,16 @@ updateDataObj, dataObjInfo } from "@/api/data.js" + import dayjs from "dayjs"; + import OIForm from '@/components/oi-form/index.vue' export default { name: "PageModalForm", modules: { Base64, + }, + components: { + OIForm }, data() { return { @@ -231,7 +149,7 @@ this.ext_info = JSON.parse(options.extInfo); if (options.dataJson) this.data_json = JSON.parse(options.dataJson); - this.title = options.titlename ? options.titlename : this.param.ShowName; //璁剧疆鎸夐挳鏂囧瓧 + this.title = options.titlename ? options.titlename : this.param.ShowName; //璁剧疆鎸夐挳鏂囧瓧 // console.log(options) uni.setNavigationBarTitle({ title: this.title @@ -244,7 +162,7 @@ title: this.translateSys("error"), content: this.translate("tip_no_master_class"), showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); } }, @@ -394,7 +312,7 @@ title: $this.translateSys('tip') + "1", content: exStr, showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); } @@ -432,14 +350,14 @@ title: this.translateSys("error") + "3", content: ex.errMsg, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); } }, async loadFormData(objAttr) { let attrs = [] - + if (this.objId) { let info = await dataObjInfo({ class_id: this.clsId, @@ -518,7 +436,7 @@ content: tip, showCancel: false, confirmText: this.translateSys( - "cancel") + 'close') }); } else uni.showModal({ title: this.translateSys('tip'), @@ -528,7 +446,7 @@ .ret, showCancel: false, confirmText: this.translateSys( - "cancel") + 'close') }); return false; } else { @@ -540,7 +458,7 @@ content: tip, showCancel: false, confirmText: this.translateSys( - "cancel") + 'close') }); if (result.result_type == 0 && result.action) { @@ -584,7 +502,7 @@ content: result.info, showCancel: false, confirmText: this - .translateSys("cancel") + .translateSys('close') }); } } @@ -601,7 +519,7 @@ title: $this.translateSys('tip') + "2", content: exStr, showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); } }, @@ -616,10 +534,13 @@ console.log(result.decodedata); item.value = result.decodedata; var $this = this; - if (item.oldvalue != item.value && item.value.trim() != "") { - item.oldvalue = item.value; + let newVal = item.value.trim() + if (!newVal) + return + if (item.oldvalue != newVal) { + item.oldvalue = newVal; var attr = item.fieldId; - this.head_styledef.form.model[attr] = item.value; + this.head_styledef.form.model[attr] = newVal; var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠� var onSuffixClickCallbackEvent = item.bind .onSuffixClickCallbackEvent; //鍚庡浘鏍囩偣鍑讳簨浠�@@ -630,36 +551,59 @@ if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠� $this.onChange(onChangeEvent); } - if (item.value) { //绗竴涓緭鍏ユ涓嶄负绌�- //鍒濆鍖栵紝涓嬩釜杈撳叆妗唂ocus灞炴� - var findd = false - for (let i in $this.head_styledef.form.items) { - const ele = $this.head_styledef.form.items[i] + //鍒濆鍖栵紝涓嬩釜杈撳叆妗唂ocus灞炴� + var findd = false + for (let i in $this.head_styledef.form.items) { + const ele = $this.head_styledef.form.items[i] - if (ele.name != "Layout") { - if (ele.name == 'Input' || ele.name == - 'InputNumber') { - if (attr == ele.fieldId) { - findd = true - } else { - if (findd) { - $this.setData({ - focusFieldId: ele.fieldId - }) - break - } - + if (ele.name != "Layout") { + if (ele.name == 'Input' || ele.name == + 'InputNumber') { + if (attr == ele.fieldId) { + findd = true + } else { + if (findd) { + $this.setData({ + focusFieldId: ele.fieldId + }) + break } } - } else { - if (findd) { - let curIndex = ele.setting.colList.findIndex(( - col, index2, arr) => { - return (col.name == 'Input' || col - .name == 'InputNumber'); + + } + } else { + if (findd) { + let curIndex = ele.setting.colList.findIndex(( + col, index2, arr) => { + return (col.name == 'Input' || col + .name == 'InputNumber'); + }) + if (curIndex > -1) { + $this.setData({ + focusFieldId: ele.setting + .colList[curIndex] + .fieldId }) - if (curIndex > -1) { + break + } + + } else { + let curIndex = ele.setting.colList.findIndex(( + col, index2, arr) => { + return attr == col.fieldId; + }) + if (curIndex > -1) { + findd = true + let curIndex2 = ele.setting.colList + .findIndex((col, index2, arr) => { + return (col.name == 'Input' || + col.name == + 'InputNumber') && + index2 > + curIndex; + }) + if (curIndex2 > -1) { $this.setData({ focusFieldId: ele.setting .colList[curIndex] @@ -667,34 +611,9 @@ }) break } - - } else { - let curIndex = ele.setting.colList.findIndex(( - col, index2, arr) => { - return attr == col.fieldId; - }) - if (curIndex > -1) { - findd = true - let curIndex2 = ele.setting.colList - .findIndex((col, index2, arr) => { - return (col.name == 'Input' || - col.name == - 'InputNumber') && - index2 > - curIndex; - }) - if (curIndex2 > -1) { - $this.setData({ - focusFieldId: ele.setting - .colList[curIndex] - .fieldId - }) - break - } - } } - } + } } @@ -704,74 +623,22 @@ onEnterChange(item) { //鍥炶溅锛岀偣鍑绘寜閽紝鍙栨秷鑺傜偣浜嬩欢 console.log(item); - if (item.oldvalue != item.value && item.value.trim() != "") { - item.oldvalue = item.value; + let newVal = item.value + if (typeof item.value == "string") { + newVal = item.value.trim() + if (!newVal) + return + } + if (item.oldvalue != newVal) { + item.oldvalue = newVal; var attr = item.fieldId; - this.head_styledef.form.model[attr] = item.value; + this.head_styledef.form.model[attr] = newVal; var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�- if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠� this.onChange(onChangeEvent); } } - }, - onCheckBoxValue(e) { //缁戝畾Model鍊�- let values = e.detail.value || [] - const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] - if (item?.setting?.colList) { - const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] - if (col) { - col.value = values - let attr = col.fieldId; - this.head_styledef.form.model[attr] = col.value; - var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�- if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�- this.onChange(onChangeEvent); - } - return - } - } else { - if (item) { - item.value = values - let attr = item.fieldId; - this.head_styledef.form.model[attr] = item.value; - var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�- if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�- this.onChange(onChangeEvent); - } - } - } - - }, - onRadioBoxValue(e) { //缁戝畾Model鍊�- let values = e.detail.value || "" - const item = this.head_styledef.form.items[e.currentTarget?.dataset?.index || 0] - if (item?.setting?.colList) { - const col = item.setting.colList[e.currentTarget?.dataset?.iindex || 0] - if (col) { - col.value = values - let attr = col.fieldId; - this.head_styledef.form.model[attr] = col.value; - var onChangeEvent = col.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�- if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�- this.onChange(onChangeEvent); - } - return - } - } else { - if (item) { - item.value = values - let attr = item.fieldId; - this.head_styledef.form.model[attr] = item.value; - var onChangeEvent = item.bind.onChangeEvent; //鍐呭鍙樺寲鍚庝簨浠�- if (onChangeEvent?.id) { //鍐呭鍙樺寲鍚庝簨浠�- this.onChange(onChangeEvent); - } - } - - } - }, classAttr_extButton(item) { var onSuffixClickCallbackEvent = item.bind.onSuffixClickCallbackEvent; //鍚庡浘鏍囩偣鍑讳簨浠�@@ -782,7 +649,7 @@ title: this.translateSys("tip"), content: this.translate('icon_click_callback_empty'), showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return; } @@ -791,7 +658,7 @@ title: this.translateSys("tip"), content: this.translate('icon_click_event_empty'), showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return; } @@ -872,7 +739,7 @@ content: tip, showCancel: false, confirmText: this.translateSys( - "cancel") + 'close') }); } else uni.showModal({ title: this.translateSys('tip'), @@ -882,7 +749,7 @@ .ret, showCancel: false, confirmText: this.translateSys( - "cancel") + 'close') }); return false; } else { @@ -894,7 +761,7 @@ content: tip, showCancel: false, confirmText: this.translateSys( - "cancel") + 'close') }); if (result.result_type == 0 && result.action) { @@ -938,7 +805,7 @@ content: result.info, showCancel: false, confirmText: this - .translateSys("cancel") + .translateSys('close') }); } } @@ -952,7 +819,7 @@ title: this.translateSys("error") + "4.1", content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); }); } @@ -967,7 +834,7 @@ this.translate('reason') + this.translateSys("colon") + tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); } }, @@ -1080,7 +947,7 @@ title: this.translateSys("tip"), content: "popupParam涓虹┖锛�, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return; } @@ -1089,7 +956,7 @@ title: this.translateSys("tip"), content: this.translate("tip_no_select_data"), showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return; } @@ -1188,14 +1055,14 @@ title: this.translateSys("tip"), content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); } else uni.showModal({ title: this.translateSys("tip"), content: tip + ',' + this.translateSys('tip') + ':' + data .ret, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return false } else { @@ -1207,7 +1074,7 @@ title: this.translateSys("tip"), content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); var actionlist = data.action; @@ -1270,7 +1137,7 @@ .translate( "tip_action_unprocessed"), showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); } } @@ -1347,7 +1214,7 @@ title: this.translateSys("error") + "3.1", content: exStr, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); }); }, @@ -1435,14 +1302,14 @@ title: $this.translateSys("tip"), content: tip, showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); } else uni.showModal({ title: $this.translateSys("tip"), content: tip + ',' + $this.translateSys('tip') + ':' + data .ret, showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); return false } else { @@ -1454,7 +1321,7 @@ title: $this.translateSys("tip"), content: tip, showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); if (data != "") { @@ -1628,7 +1495,7 @@ .translate( "tip_action_unprocessed"), showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); } } @@ -1641,7 +1508,7 @@ "quotation_mark_right") + $this.translateSys( "comma") + 'event_id' + eventid, showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); } } @@ -1656,7 +1523,7 @@ title: $this.translateSys('tip') + "5.1", content: exStr, showCancel: false, - confirmText: $this.translateSys("cancel") + confirmText: $this.translateSys('close') }); }); }, @@ -1769,7 +1636,7 @@ title: this.translateSys('tip') + "7.1", content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return false } @@ -1796,7 +1663,7 @@ title: this.translateSys("tip") + "6.1", content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return false } @@ -1823,7 +1690,7 @@ title: this.translateSys("tip") + "6.2", content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return false } @@ -1874,7 +1741,7 @@ title: this.translateSys('tip') + "7.2", content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return false } @@ -1943,7 +1810,7 @@ title: this.translateSys("tip") + "8.1", content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return false } @@ -1991,7 +1858,7 @@ title: this.translateSys("tip") + "8.2", content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return false } @@ -2047,7 +1914,8 @@ } .uni-icon { - padding: 8rpx; + + padding: 10rpx 5rpx; font-size: 32rpx; color: rgb(192, 196, 204); } @@ -2095,8 +1963,10 @@ .btn_cancel { width: 45%; margin: 0 10rpx; + // background: #fff; + // border: none; + // color: #000; background: #fff; - border: none; color: #000; font-size: 38rpx; float: right; @@ -2116,7 +1986,7 @@ .uni-icon { /* border: 1px solid red; */ - width: 8%; + width: 30rpx; font-family: uniicons; font-size: 40rpx; font-weight: 400; @@ -2154,7 +2024,7 @@ .popup-footer { float: right; position: absolute; - bottom: 0; + bottom: 10rpx; right: 20rpx; } @@ -2178,9 +2048,11 @@ margin-top: 50rpx; padding: 15rpx; line-height: 1.5; - background: #27A6E1; - border: none; - color: #fff; + // background: #27A6E1; + // border: none; + // color: #fff; + background: #fff; + color: #000; font-size: 38rpx; font-weight: bold; /* float: right; */ -- Gitblit v1.9.1