From 01fa158740467ca0db83b131249beeeb515a73c2 Mon Sep 17 00:00:00 2001 From: cuiqian2004 <cuiqian2004@163.com> Date: 星期二, 01 四月 2025 16:03:57 +0800 Subject: [PATCH] test --- pages/modal/form/index.vue | 477 +++++++++++++---------------------------------------------- 1 files changed, 109 insertions(+), 368 deletions(-) diff --git a/pages/modal/form/index.vue b/pages/modal/form/index.vue index a1acb6d..bc51570 100644 --- a/pages/modal/form/index.vue +++ b/pages/modal/form/index.vue @@ -2,122 +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)" /> - <OIDatePicker v-if="item.name=='DatePicker'" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" - :defaultToday="item.setting.defaultToday" :format="item.setting.format" - @change="onDatetimePickerChange(item)" /> - <OIDatePickerRange v-if="item.name=='DatePickerRange'" :rangeSeparator="item.setting.separator" - :format="item.setting.format" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" - @change="onDatetimePickerChange(item)" /> - <OITimePicker v-if="item.name=='TimePicker'" :class="item.disabled?'input-disabled':''" - :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" - @change="onDatetimePickerChange(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)" /> - <OIDatePicker v-if="col.name=='DatePicker'" :class="col.disabled?'input-disabled':''" - :disabled="col.disabled" v-model="col.value" :placeholder="col.placeholder" - :defaultToday="col.setting.defaultToday" :format="col.setting.format" - @change="onDatetimePickerChange(col)" /> - <OIDatePickerRange v-if="col.name=='DatePickerRange'" - :rangeSeparator="col.setting.separator" :format="col.setting.format" - :class="col.disabled?'input-disabled':''" :disabled="col.disabled" - v-model="col.value" :placeholder="col.placeholder" - @change="onDatetimePickerChange(col)" /> - <OITimePicker v-if="col.name=='TimePicker'" :class="col.disabled?'input-disabled':''" - :disabled="col.disabled" v-model="col.value" :placeholder="col.placeholder" - @change="onDatetimePickerChange(col)" /> - </uni-forms-item> - </uni-col> - </uni-row> - </view> - </uni-forms> + <OIForm ref="refBaseForm" class="v-head-style" :form="head_styledef.form" :focusId="focusFieldId" + @on-click="onClick" @on-focus="ontap" @on-change="onEnterChange" @on-click-prefix="classAttr_extButton" + @on-click-suffix="classAttr_extButton"></OIForm> </view> <view class="view-bottom"> <button type="primary" @tap="ok" class="btn_add" :class="okLoading?'btn_disabled':''" @@ -154,7 +41,9 @@ </template> <script> - import Base64 from '../../../components/js-base64/base64.js' + import { + Base64 + } from '@/js/Base64.js'; import { dictGetInfo } from "@/api/mobox.js" @@ -166,18 +55,12 @@ dataObjInfo } from "@/api/data.js" import dayjs from "dayjs"; - import OIDatePicker from '@/components/oi-date-time-picker/oi-date-picker.vue' - import OIDatePickerRange from '@/components/oi-date-time-picker/oi-date-picker-range.vue' - import OITimePicker from '@/components/oi-date-time-picker/oi-time-picker.vue' + import OIForm from '@/components/oi-form/index.vue' + export default { name: "PageModalForm", - modules: { - Base64, - }, components: { - OIDatePicker, - OIDatePickerRange, - OITimePicker + OIForm }, data() { return { @@ -199,7 +82,6 @@ global_attr: [], ext_info: {}, data_json: [], - refdatastore: [], //寮曠敤鏁版嵁瀛樺偍鍖�/ {attr:'G_PRJ_' + bindattr + '_ID', value:info.id} popupType: "center", check_list: {}, popupParam: {}, @@ -650,10 +532,11 @@ 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) { + 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; //鍚庡浘鏍囩偣鍑讳簨浠�@@ -664,36 +547,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] @@ -701,34 +607,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 - } - } } - } + } } @@ -738,79 +619,26 @@ 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) { + item.oldvalue = newVal; + var attr = item.fieldId; + this.head_styledef.form.model[attr] = 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); - } - } - - } - - }, - onDatetimePickerChange(e) { - var attr = item.fieldId; - this.head_styledef.form.model[attr] = item.value; - }, classAttr_extButton(item) { var onSuffixClickCallbackEvent = item.bind.onSuffixClickCallbackEvent; //鍚庡浘鏍囩偣鍑讳簨浠�@@ -834,7 +662,7 @@ }); return; } - this.$data.popupType = 'right' + this.popupType = 'right' // open 鏂规硶浼犲叆鍙傛暟 绛夊悓鍦�uni-popup 缁勪欢涓婄粦瀹�type灞炴� this.$refs.popup.open(this.popupType); @@ -1084,15 +912,15 @@ // console.log(e.target.dataset); var index = e.target.dataset.index; var ischeck = e.target.dataset.ischeck; - var data = this.$data.check_list.items; - // this.$data.check_list.items=[]; - if (this.$data.check_list.multiple_choice == "0") { //鍒ゆ柇鏃跺崟閫夎繕鏄閫�+ var data = this.check_list.items; + // this.check_list.items=[]; + if (this.check_list.multiple_choice == "0") { //鍒ゆ柇鏃跺崟閫夎繕鏄閫� for (var i in data) { data[i].check = false; } } data[index].check = ischeck ? false : true; - this.$data.check_list.items = data; + this.check_list.items = data; }, popup_cancel(e) { //寮规鍙栨秷 @@ -1100,7 +928,7 @@ }, popup_sava(e) { //寮规纭畾 var $this = this; - var items = $this.$data.check_list.items; + var items = $this.check_list.items; var data = []; var name = ""; for (var i = 0; i < items.length; i++) { @@ -1114,7 +942,7 @@ }); } } - if (!$this.$data.popupParam) { + if (!$this.popupParam) { uni.showModal({ title: this.translateSys("tip"), content: "popupParam涓虹┖锛�, @@ -1135,7 +963,7 @@ let global_attr = Base64.encode(JSON.stringify(this.global_attr)) let data_json = Base64.encode(JSON.stringify(this.data_json)) let ext_info = Base64.encode(JSON.stringify(this.ext_info)) - var callback_eventid = $this.$data.popupParam.button_callback.trim(); + var callback_eventid = $this.popupParam.button_callback.trim(); var info = { eventid: callback_eventid, edtype: "0", @@ -1145,10 +973,10 @@ userlogin: '', clsid: $this.clsId, objid: "", - attr: $this.$data.popupParam.req, + attr: $this.popupParam.req, dataJson: data } - $this.DataObjRunCustomEvent(info, $this.$data.popupParam.data_attr); + $this.DataObjRunCustomEvent(info, $this.popupParam.data_attr); this.$refs.popup.close(); }, @@ -1260,7 +1088,7 @@ } else if (action.action_type == 'set_dlg_attr_show') { var result = action.value; result.forEach(async (attr, key) => { - $this.$data.head_styledef.form.items + $this.head_styledef.form.items .forEach( async (ele, index) => { @@ -1293,11 +1121,11 @@ }); var head_styledef = JSON.parse(JSON.stringify($this.$data .head_styledef)); - $this.$data.head_styledef = []; - $this.$data.head_styledef = head_styledef; - // console.log($this.$data.head_styledef); + $this.head_styledef = []; + $this.head_styledef = head_styledef; + // console.log($this.head_styledef); } else if (action.action_type == 'set_global_attr') { - $this.$data.global_attr = action.value || []; + $this.global_attr = action.value || []; } else { uni.showModal({ title: this.translateSys("tip"), @@ -1316,63 +1144,7 @@ } console.log($this.head_styledef); if (data.result) { - var result = data.result; - for (var i = 0; i < result.length; i++) { - for (var c = 0; c < $this.$data.head_styledef.form.items - .length; c++) { - var attr = $this.$data.head_styledef.form.items[c]; - //鍒ゆ柇琛ㄥ崟閲屾槸鍚︽湁杩斿洖瀛楁锛屾病鏈夊氨瑁呰浇鍒癿odel閲岋紝鐐瑰嚮纭畾鎻愪氦鐨勬椂鍊欏甫涓婅繖浜涙暟鎹�- if ($this.head_styledef.form.model[result[i].attr] == - undefined) { - $this.head_styledef.form.model[result[i].attr] = - result[i] - .value; - } - //鍒ゆ柇鏄惁鏄爡鏍艰〃鍗�- if (attr.name != 'Layout') { - if (attr.fieldId == result[i].attr) { - attr.value = ''; - attr.oldvalue = ''; - attr.value = result[i].value; - attr.oldvalue = result[i].value; - $this.head_styledef.form.model[attr.fieldId] = - result[i] - .value; - } - } else if (attr.name == 'Layout') { - attr.setting.colList.forEach(col => { - if (col) { - if (col.fieldId == result[i].attr) { - col.value = ''; - col.oldvalue = ''; - col.value = result[i].value; - col.oldvalue = result[i].value; - $this.head_styledef.form.model[col - .fieldId] = - result[i].value; - } - } - }); - } - } - - var length = 0; - if (!$this.$data.refdatastore.filter(function(s) { - return result[i].attr == s.attr - }).length) { - length = 1; - $this.$data.refdatastore.push(result[i]); - } - if (length == 0) { - for (var j = 0; j < $this.$data.refdatastore.length; j++) { - if ($this.$data.refdatastore[j].attr == result[i] - .attr) { - $this.$data.refdatastore[j].value = result[i] - .value; - } - } - } - } + $this.setFormValues(data.result) } } @@ -1409,18 +1181,6 @@ attr: a, value: obj_attr[a] || "", })); - if ($this.refdatastore.length > 0) { - for (var i = 0; i < $this.refdatastore.length; i++) { - if (!req.filter(function(s) { - return $this.refdatastore[i].attr == s.name - }).length) { - req.push({ - 'attr': $this.refdatastore[i].attr, - 'value': $this.refdatastore[i].value - }); - } - } - } let global_attr = Base64.encode(JSON.stringify(this.global_attr)) let data_json = Base64.encode(JSON.stringify(this.data_json)) let ext_info = Base64.encode(JSON.stringify(this.ext_info)) @@ -1632,8 +1392,8 @@ data[0].ID + ';' + data[0].Name; - // $this.$data.classAttrList[param.index].Attr[param.iindex].Value=data[0].Name; - // $this.$data.classAttrList[param.index].Attr[param.iindex].ValID=data[0].ID+';'+data[0].Name; + // $this.classAttrList[param.index].Attr[param.iindex].Value=data[0].Name; + // $this.classAttrList[param.index].Attr[param.iindex].ValID=data[0].ID+';'+data[0].Name; var callback_eventid = param .button_callback .trim(); @@ -1707,19 +1467,23 @@ mask: true }); this.okLoading = true + console.log(obj_attr) var obj_attr = this.head_styledef.form.model || {}; console.log(obj_attr) let ret = await this.sava(); + this.okLoading = false uni.hideLoading(); if (!ret) return; obj_attr.id = this.objId || ""; - const eventChannel = this.$scope.eventChannel; + console.log(this.$scope) + const eventChannel = this.getOpenerEventChannel(); // const eventChannel = this.getOpenerEventChannel(); eventChannel.emit(this.type, obj_attr); uni.navigateBack() } catch (ex) { + this.okLoading = true return false; } }, @@ -1755,6 +1519,8 @@ } return true; } catch (ex) { + console.log("sava", ex) + this.showError(ex) return false; } @@ -2035,6 +1801,14 @@ return false } }, + showError(ex) { + uni.showModal({ + title: this.translateSys('error'), + content: typeof ex == "string" ? ex : typeof ex.errMsg == "string" ? ex.errMsg : "", + showCancel: false, + confirmText: this.translateSys('cancel') + }) + }, translate(t) { if (typeof this.$t == "function") return this.$t( `page.${t}`) @@ -2064,40 +1838,7 @@ flex-direction: column; } - .v-head-style { - width: 98%; - - .uni-forms-item { - margin-bottom: 11rpx; - } - - .input-wrapper { - border: 1px solid #d5d5d5; - width: 100%; - display: flex; - flex-direction: row; - - .uni-input { - flex: 1; - padding: 12rpx 8rpx; - color: #2d8cf0; - // height: 40rpx; - // line-height: 40rpx; - } - - .uni-icon { - - padding: 10rpx 5rpx; - font-size: 32rpx; - color: rgb(192, 196, 204); - } - } - - .input-wrapper:hover { - border: 1px solid rgb(41, 121, 255); - } - } - + .view-content { display: flex; flex: 1; -- Gitblit v1.9.1