From b1233b1089142611698e913e565ec232334ba261 Mon Sep 17 00:00:00 2001 From: cuiqian2004 <cuiqian2004@163.com> Date: 星期三, 14 五月 2025 08:37:16 +0800 Subject: [PATCH] form selections --- pages/modal/3200.vue | 397 ++++++++++++-------------------------------------------- 1 files changed, 84 insertions(+), 313 deletions(-) diff --git a/pages/modal/3200.vue b/pages/modal/3200.vue index eb4082f..f07e6d6 100644 --- a/pages/modal/3200.vue +++ b/pages/modal/3200.vue @@ -2,26 +2,8 @@ <view class="uni-page-modal-3200"> <view class="v-content"> <!-- 琛ㄥご鏍峰紡 --> - <view class="v-headStyle" v-for="(item,index) in head_styledef.form.items" v-if="isFilter==true"> - <text class="txt_title" :style="{'width':item.labelWidth+'px'}">{{item.label}}锛�/text> - <!-- 涓嬫媺妗�鍗曢� item.useDict?item.dict:item.selections--> - <uni-data-select id="dv_select" v-if="item.name=='Select'" :class="item.disabled?'input-disabled':''" - v-model="item.value" :localdata="item.dict" @change="onChange(item)" :disabled="item.disabled" - :clear="false"></uni-data-select> - <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="onEnterChange(item)"></text> - <input class="uni-input" :class="item.disabled?'input-disabled':''" - :type="item.name=='Input'?'text':'number'" v-model="item.value" :disabled="item.disabled" - :placeholder="item.placeholder" - :style="{'width':item.setting.prefix && item.setting.suffix?'78%':item.setting.prefix || item.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(item)" @keyup.enter="onEnterChange(item)" - @blur="onEnterChange(item)" :maxlength="-1" /> - <text v-if="item.setting.suffix" class="uni-icon" :class="[item.setting.suffix]" - @click="onEnterChange(item)"></text> - </view> - </view> - + <OIForm ref="refBaseForm" class="v-headStyle" :form="head_styledef.form" @on-focus="ontap" + @on-change="onEnterChange" @on-click-prefix="onEnterChange" @on-click-suffix="onEnterChange"></OIForm> <view class="v-scroll-view"> <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower" @scroll="scroll"> @@ -37,157 +19,14 @@ </checkbox-group> </div> <!-- HTML椤甸潰绫诲瀷鏄剧ず --> - <div class="dv-listHtml-Panel" v-if="ListHtml_Panel" v-html="ListHtml_Panel[ii]" :style="param.ListPage.CheckBox==true && param.ListPage.Click_View==true?'width:85%;': - param.ListPage.CheckBox==false && param.ListPage.Click_View==true?'width:91%;': - param.ListPage.CheckBox==true && param.ListPage.Click_View==false?'width:88%;':'width:100%;'"> + <div class="dv-listHtml-Panel" v-if="ListHtml_Panel" v-html="ListHtml_Panel[ii]" + :style="param.ListPage.CheckBox==true && param.ListPage.Click_View==true?'width:85%;': param.ListPage.CheckBox==false && param.ListPage.Click_View==true?'width:91%;':param.ListPage.CheckBox==true && param.ListPage.Click_View==false?'width:88%;':'width:100%;'"> </div> - <div class="dv-panel-input" v-if="!ListHtml_Panel" :style="param.ListPage.CheckBox==true && param.ListPage.Click_View==true?'width:85%;': - param.ListPage.CheckBox==false && param.ListPage.Click_View==true?'width:91%;': - param.ListPage.CheckBox==true && param.ListPage.Click_View==false?'width:88%;':'width:100%;'"> - <div v-for="(item,index) in style.form.items"> - <!-- 鏅�甯冨眬 --> - <view v-if="item.name!='Layout'"> - <text class="txt_title" - :style="{'width':item.labelWidth+'px'}">{{item.label}}锛�/text> - <!-- 鏂囨湰妗�鏁板瓧妗�--> - <view class="dv_input" v-if="(item.name=='Input' || item.name=='InputNumber')"> - <text v-if="item.setting.prefix" class="uni-icon" - :class="[item.setting.prefix]" @change="onChange(item)"></text> - <input class="uni-input" :class="item.disabled?'input-disabled':''" - :type="item.name=='Input'?'text':item.name=='InputNumber'?'number':'text'" - v-model="item.value" :disabled="item.disabled" - :placeholder="item.placeholder" - :style="{'width':item.setting.prefix && item.setting.suffix?'78%':item.setting.prefix || item.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(item)" @blur="onevent(item)" - :maxlength="-1" /> - <text v-if="item.setting.suffix" class="uni-icon" - :class="[item.setting.suffix]" @click="onChange(item)"></text> - </view> - <!-- 涓嬫媺妗�鍗曢� item.useDict?item.dict:item.selections--> - <uni-data-select id="dv_select" v-if="item.name=='Select'" - :class="item.disabled?'input-disabled':''" v-model="item.value" - :localdata="item.dict" @change="onChange(item)" :disabled="item.disabled" - :clear="false"></uni-data-select> - <!-- 澶氳鏂囨湰 --> - <view class="input-wrapper" v-if="item.name=='Textarea'"> - <textarea class="uni-input" :value="item.value" - :class="item.disabled?'input-disabled':''" - :placeholder="item.placeholder" @blur="onModelValue(item)" - style="height:60px;" :style="{'width':'96%'}" - :disabled="item.disabled"></textarea> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group class="check_rememberPwd" v-if="item.name=='Checkbox'" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - @change="onCheckBoxValue" :data-attr="item.fieldId"> - <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> + <div class="dv-panel-input" v-if="!ListHtml_Panel" + :style="param.ListPage.CheckBox==true && param.ListPage.Click_View==true?'width:85%;':param.ListPage.CheckBox==false && param.ListPage.Click_View==true?'width:91%;':param.ListPage.CheckBox==true && param.ListPage.Click_View==false?'width:88%;':'width:100%;'"> + <OIForm class="v-area dv-panel" :form="style.form.items" viewMode></OIForm> - <!-- 鍗曢�妗�--> - <radio-group class="check_rememberPwd" v-if="item.name=='Radio'" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - :style="{'margin-left':'10rpx'}" @change="onModelValue(item)" - :data-attr="item.fieldId"> - <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 v-if="item.name=='Switch'" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" v-model="item.value" @change="onModelValue(item)" - :style="{'margin-left':'10rpx'}" /> - <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" - v-if="(item.name=='TimePicker' || item.name=='DatePicker') && !item.disabled"> - <picker mode="date" class="date_iput" - :class="item.disabled?'input-disabled':''" :disabled="item.disabled" - :value="item.value" @change="onModelValue(item)"> - <view class="picker">{{item.value}}</view> - </picker> - </view> - </view> - <!-- 鏍呮牸甯冨眬 --> - <uni-row class="demo-uni-row" v-if="item.name=='Layout'"> - <uni-col v-for="(cols,key) in item.setting.colList" - :span="item.setting.spanList?item.setting.spanList[key]:24 / item.setting.col"> - <view v-if="cols!=null"> - <text class="txt_title" - :style="{'width':cols.labelWidth+'px'}">{{cols.label}}锛�/text> - <view class="dv_input" - v-if="(cols.name=='Input' || cols.name=='InputNumber') && !cols.disabled"> - <text v-if="cols.setting.prefix" class="uni-icon" - :class="[cols.setting.prefix]" - @change="onChange(cols)"></text> - <input class="uni-input" :class="cols.disabled?'input-disabled':''" - :type="cols.name=='Input'?'text':cols.name=='InputNumber'?'number':'text'" - v-model="cols.value" :disabled="cols.disabled" - :placeholder="cols.placeholder" - :style="{'width':cols.setting.prefix && cols.setting.suffix?'78%':cols.setting.prefix || cols.setting.suffix?'87%':'96%'}" - :focus="focusMateria" @focus="ontap(cols)" @blur="onevent(cols)" - :maxlength="-1" /> - <text v-if="cols.setting.suffix" class="uni-icon" - :class="[cols.setting.suffix]" - @click="onChange(cols)"></text> - </view> - <!-- 涓嬫媺妗�鍗曢� cols.useDict?cols.dict:cols.selections--> - <uni-data-select id="dv_select" v-if="cols.name=='Select'" - :class="cols.disabled?'input-disabled':''" v-model="cols.value" - :localdata="cols.dict" @change="onChange(cols)" - :disabled="cols.disabled" :clear="false"></uni-data-select> - <!-- 澶氳鏂囨湰 --> - <view class="input-wrapper" v-if="cols.name=='Textarea'"> - <textarea class="uni-input" :value="cols.value" - :class="cols.disabled?'input-disabled':''" - :placeholder="cols.placeholder" @blur="onModelValue(cols)" - style="height:60px;" :style="{'width':'96%'}" - :disabled="cols.disabled"></textarea> - </view> - <!-- 澶嶉�妗�--> - <checkbox-group class="check_rememberPwd" v-if="cols.name=='Checkbox'" - :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - @change="onCheckBoxValue" :data-attr="cols.fieldId"> - <label v-for="(cols2) in cols.selections" :key="cols2.value"> - <checkbox :value="cols2.value" - :checked="cols.value.includes(cols2.value)" /> - <text>{{cols2.label}}</text> - </label> - </checkbox-group> - <!-- 鍗曢�妗�--> - <radio-group class="check_rememberPwd" v-if="cols.name=='Radio'" - :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" - :style="{'margin-left':'10rpx'}" @change="onModelValue(cols)"> - <label v-for="(cols2) in cols.selections" :key="cols2.value"> - <radio :value="cols2.value" - :checked="cols2.value === cols.value" /> - <text>{{cols2.label}}</text> - </label> - </radio-group> - <!-- Switch寮�叧 --> - <switch v-if="cols.name=='Switch'" - :class="cols.disabled?'input-disabled':''" :disabled="item.disabled" - v-model="cols.value" @change="onModelValue(cols)" - :style="{'margin-left':'10rpx'}" /> - <!-- 鏃ユ湡鏃堕棿 --> - <view class="input-wrapper" - v-if="(cols.name=='TimePicker' || cols.name=='DatePicker') && !cols.disabled"> - <picker mode="date" class="date_iput" - :class="cols.disabled?'input-disabled':''" - :disabled="item.disabled" :value="cols.value" - @change="onModelValue(cols)"> - <view class="picker">{{cols.value}}</view> - </picker> - </view> - - </view> - </uni-col> - </uni-row> - </div> </div> <div class="dv-panel-button" v-if="param.ListPage.Click_View==true"> <a @click="onViewPageClick(style)"><i class="mobox-normal-right-arrow" /></a> @@ -216,7 +55,7 @@ <view class="uni-padding-wrap" v-if="param.ListPage.Page_Button.length>0"> <view class="uni-btn-v"> <a @tap="actionSheetTap"> - <Icon class="mobox-normal-more" /> + <text class="mobox-normal-more" /> </a> </view> </view> @@ -225,7 +64,9 @@ </template> <script> - import Base64 from '../../components/js-base64/base64.js' + import { + Base64 + } from '@/js/Base64.js'; import classUtils from "@/js/utils.js" import { appGetInfo, @@ -237,10 +78,14 @@ dataObjQuery, dataObjDel } from "@/api/data.js" + import dayjs from "dayjs"; + import OIForm from '@/components/oi-form/index.vue' + import buttonClickMixin from '@/mixins/button-click.js'; export default { - modules: { - Base64, + mixins: [buttonClickMixin], + components: { + OIForm }, onNavigationBarButtonTap(e) { // console.log(e); @@ -308,8 +153,8 @@ uni.setNavigationBarTitle({ title: options.titlename }); //璁剧疆椤堕儴鏍囬 - this.$data.title = options.titlename; - this.$data.param = JSON.parse(options.param); + this.title = options.titlename; + this.param = JSON.parse(options.param); this.styledef = {}; @@ -367,7 +212,7 @@ // this.query_id = ""; // await this.loadDataGetList(); // } - // console.log(this.$data.param); + // console.log(this.param); //椤甸潰鍒濆鍖栬幏鍙栫劍鐐� // this.focusMateria=true; }, @@ -407,7 +252,7 @@ //浼犲叆鍙傛暟鍊� if (paramValue) { const attrs = paramValue.attrs || []; - (this.$data.head_styledef?.form?.items || []).forEach(async (ele, index) => { + (this.head_styledef?.form?.items || []).forEach(async (ele, index) => { if (ele.name != "Layout") { attrs.forEach(async (ele2, index2) => { if (ele.fieldId == ele2.name) { @@ -479,9 +324,9 @@ if (!result.style_def.includes('"')) styledef = Base64.decode(result .style_def); } - $this.$data.head_styledef = result.style_def ? JSON.parse(styledef) : {}; + $this.head_styledef = result.style_def ? JSON.parse(styledef) : {}; // this.form = this.head_styledef.form.model; - // console.log($this.$data.head_styledef); + // console.log($this.head_styledef); if ($this.head_styledef.form?.items) { $this.head_styledef.form.items.forEach(async (ele, index) => { console.log(ele.useDict); @@ -496,7 +341,7 @@ $this.head_styledef.form .model[ele.fieldId] = itemName; } - $this.head_styledef.form.items[index].dict = selections.map((a) => { + $this.head_styledef.form.items[index].selections = selections.map((a) => { return { value: a.value, text: a.label @@ -538,8 +383,8 @@ if (!result.style_def.includes('"')) styledef = Base64.decode(result .style_def); } - $this.$data.detail1_styledef = result.style_def ? JSON.parse(styledef) : {}; - $this.$data.detail1_styledef.SelBut_Checked = false; + $this.detail1_styledef = result.style_def ? JSON.parse(styledef) : {}; + $this.detail1_styledef.SelBut_Checked = false; } catch (ex) { // console.log(ex); let tip = typeof ex.errMsg == "string" ? ex.errMsg : ex @@ -891,7 +736,7 @@ //鍒锋柊褰撳墠椤甸潰 this.initial(); // uni.redirectTo({ - // url:'../modal/3200?param='+JSON.stringify(this.$data.param)+"&titlename="+this.$data.title, + // url:'../modal/3200?param='+JSON.stringify(this.param)+"&titlename="+this.title, // }); }, //鐐瑰嚮鏄剧ず娴忚瀵硅薄鏄剧ず椤甸潰 @@ -954,15 +799,24 @@ uni.showModal({ title: this.translateSys("tip"), content: btn.PromptContent || this.translate("are_you_sure"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { that.onButtonClicked(btn, style); // } else if (res.cancel) { // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); } } }); - } else that.onButtonClicked(btn, style); + } else { + this.handleButtonClick((done) => { + that.onButtonClicked(btn, style); + setTimeout(() => { + done(); // 閲嶇疆鐘舵� + }, 1000); + }); + } }, //鐐瑰嚮鎸夐挳鍒楄〃 actionSheetTap() { @@ -980,10 +834,11 @@ if (btn.Prompt) { uni.showModal({ title: this.translateSys("tip"), - content: btn.PromptContent || this.translate( - "are_you_sure"), + content: btn.PromptContent || this.translate("are_you_sure"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { that.onButtonClicked(btn); // } else if (res.cancel) { // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷'); @@ -1076,8 +931,10 @@ uni.showModal({ title: this.translateSys("tip"), content: this.translate("confirm_delete_data"), + cancelText: this.translateSys('ok'), + confirmText: this.translateSys('cancel'), success: function(res) { - if (res.confirm) { + if (res.cancel) { var objID = style.form.objId; if (!style.form.objId.includes('{')) objID = '{' + style.form .objId + '}'; @@ -1345,12 +1202,13 @@ item.value = result.decodedata; uni.hideKeyboard(); var $this = this; - console.log(item); - if (item.oldvalue != item.value) { - item.oldvalue = item.value; + let newVal = item.value.trim() + if (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; //鍚庡浘鏍囩偣鍑讳簨浠�@@ -1361,24 +1219,19 @@ if (onChangeEvent.id) { //鍐呭鍙樺寲鍚庝簨浠� $this.onChange(onChangeEvent); } else { - $this.where = ''; - if (item.value) - $this.where = item.fieldId + " like '%" + item - .value + "%'"; + $this.where = item.fieldId + " like '%" + newVal + "%'"; $this.query_id = ''; $this.pageindex = 1; $this.detail1StyleDefList = []; $this.loadDataGetList(); } - if (item.value) { //绗竴涓緭鍏ユ涓嶄负绌�- $this.focusMateria = true; //鍒濆鍖栵紝绗簩涓緭鍏ユfocus灞炴� - // setTimeout(function(){ - // $this.focusMateria=true; //绗簩涓緭鍏ユ鑾峰彇鐒︾偣 - setTimeout(function() { - uni.hideKeyboard(); - }, 1000); - // },500); - } + $this.focusMateria = true; //鍒濆鍖栵紝绗簩涓緭鍏ユfocus灞炴� + // setTimeout(function(){ + // $this.focusMateria=true; //绗簩涓緭鍏ユ鑾峰彇鐒︾偣 + setTimeout(function() { + uni.hideKeyboard(); + }, 1000); + // },500); // if(onSuffixClickCallbackEvent.id){ //鍚庡浘鏍囩偣鍑讳簨浠� // this.onSuffixClick(onSuffixClickCallbackEvent); // } @@ -1388,12 +1241,19 @@ } }) }, + onEnterChange(item) { //鍥炶溅锛岀偣鍑绘寜閽紝鍙栨秷鑺傜偣浜嬩欢 // console.log(item); - if (item.oldvalue != item.value) { - 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; //鍐呭鍙樺寲鍚庝簨浠� var onSuffixClickCallbackEvent = item.bind .onSuffixClickCallbackEvent; //鍚庡浘鏍囩偣鍑讳簨浠�@@ -1403,9 +1263,7 @@ if (onChangeEvent.id) { //鍐呭鍙樺寲鍚庝簨浠� this.onChange(onChangeEvent); } else { - this.where = ''; - if (item.value) - this.where = item.fieldId + " like '%" + item.value + "%'"; + this.where = item.fieldId + " like '%" + item.value + "%'"; this.query_id = ''; this.pageindex = 1; this.detail1StyleDefList = []; @@ -1437,7 +1295,7 @@ var dataInfo = { ed_type: 0, start_transaction: true, - class_id: this.$data.head_styledef.form.clsId, + class_id: this.head_styledef.form.clsId, class_name: '', event_id: event.id, event_name: '', @@ -1580,6 +1438,7 @@ } }, + onDetail1EnterChange() {}, //鐐逛腑琛ㄥ崟 onPanelClick(value) { //鐐瑰嚮闈㈡澘楂樹寒鏄剧ず // console.log(value); @@ -2036,70 +1895,8 @@ height: calc(100vh - 30rpx); padding: 15rpx 0; - .v-headStyle:first-child { - margin-top: 15rpx; - } - - .v-headStyle .txt_title { - font-size: 34rpx; - text-align: right; - display: inline-block; - vertical-align: 24rpx; - } - - .v-headStyle input { - display: inline-block; - /* border: 1px solid #d5d5d5; */ - /* width: 65%; */ - width: 85%; - height: 52rpx; - line-height: 34rpx; - background: #FFF; - border-radius: 0 !important; - color: #2d8cf0; - padding: 10rpx 8rpx 12rpx; - font-size: 34rpx; - font-family: inherit; - box-shadow: none !important; - transition-duration: 0.1s; - margin-top: 4rpx; - } - - .v-headStyle input::-webkit-input-placeholder { - font-size: 12rpx; - } - - .input-wrapper { - border: 1px solid #d5d5d5; - display: inline-block; - width: 65%; - line-height: 22rpx; - } - - [nvue] uni-view { - position: relative; - border: 0 solid #000; - box-sizing: border-box; - } - - .uni-input { - /* border: none; */ - } - - .uni-icon { - /* border: 1px solid red; */ - width: 8%; - font-family: uniicons; - font-size: 40rpx; - font-weight: 400; - font-style: normal; - /* width: 48rpx; */ - height: 48rpx; - line-height: 48rpx; - color: #2d8cf0; - cursor: pointer; - display: inline-block; - vertical-align: 18rpx; + .v-headStyle { + width: 98%; } .v-content { @@ -2138,6 +1935,16 @@ width: 91%; display: inline-block; text-align: left; + + .uni-forms-item { + padding-bottom: 5rpx; + margin-bottom: 0; + + .uni-forms-item__label { + height: 20px !important; + padding: 0 10rpx 0 0 !important; + } + } } .dv-panel-buticon { @@ -2170,42 +1977,6 @@ border-radius: 8rpx; } - .dv-panel .txt_title { - font-size: 34rpx; - text-align: right; - display: inline-block; - } - - .dv-panel input { - vertical-align: middle; - display: inline-block; - border: 2rpx solid #d5d5d5; - width: 68%; - height: 52rpx; - line-height: 34rpx; - background: #FFF; - border-radius: 14rpx !important; - color: #2d8cf0; - padding: 6rpx 8rpx 8rpx; - font-size: 32rpx; - font-family: inherit; - box-shadow: none !important; - transition-duration: 0.1s; - margin-top: 0rpx; - } - - .dv-panel input::-webkit-input-placeholder { - font-size: 10rpx; - } - - .dv-panel .form-item-span { - vertical-align: text-top; - color: #2d8cf0; - white-space: normal; - word-break: break-all; - display: inline-block; - width: calc(100% - 100px); - } .dv-panel-button { display: inline-block; @@ -2257,7 +2028,7 @@ line-height: 1.5; background: #fff; // border: none; - color: #000; + color: #000; font-size: 38rpx; font-weight: bold; float: left; -- Gitblit v1.9.1