| | |
| | | <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':''" |
| | |
| | | <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':'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'}"> |
| | | :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'}"> |
| | |
| | | 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 { |
| | |
| | | global_attr: [], |
| | | ext_info: {}, |
| | | data_json: [], |
| | | refdatastore: [], //引用数据存储区// {attr:'G_PRJ_' + bindattr + '_ID', value:info.id} |
| | | popupType: "center", |
| | | check_list: {}, |
| | | popupParam: {}, |
| | |
| | | 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 |
| | |
| | | }, |
| | | async loadFormData(objAttr) { |
| | | let attrs = [] |
| | | |
| | | |
| | | if (this.objId) { |
| | | let info = await dataObjInfo({ |
| | | class_id: this.clsId, |
| | |
| | | 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; //后图标点击事件 |
| | |
| | | if (onChangeEvent?.id) { //内容变化后事件 |
| | | $this.onChange(onChangeEvent); |
| | | } |
| | | if (item.value) { //第一个输入框不为空 |
| | | //初始化,下个输入框focus属性 |
| | | var findd = false |
| | | for (let i in $this.head_styledef.form.items) { |
| | | const ele = $this.head_styledef.form.items[i] |
| | | //初始化,下个输入框focus属性 |
| | | 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] |
| | |
| | | }) |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | 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; //后图标点击事件 |
| | |
| | | } |
| | | 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]; |
| | | //判断表单里是否有返回字段,没有就装载到model里,点击确定提交的时候带上这些数据 |
| | | 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) |
| | | } |
| | | } |
| | | |
| | |
| | | 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)) |
| | |
| | | } |
| | | |
| | | .uni-icon { |
| | | padding: 8rpx; |
| | | |
| | | padding: 10rpx 5rpx; |
| | | font-size: 32rpx; |
| | | color: rgb(192, 196, 204); |
| | | } |
| | |
| | | |
| | | .uni-icon { |
| | | /* border: 1px solid red; */ |
| | | width: 8%; |
| | | width: 30rpx; |
| | | font-family: uniicons; |
| | | font-size: 40rpx; |
| | | font-weight: 400; |
| | |
| | | .popup-footer { |
| | | float: right; |
| | | position: absolute; |
| | | bottom:10rpx; |
| | | bottom: 10rpx; |
| | | right: 20rpx; |
| | | } |
| | | |