| | |
| | | <view class="uni-page-modal-3018-2"> |
| | | <view class="view-content"> |
| | | <!-- 表头样式 --> |
| | | <uni-forms ref="baseForm" label-align="right"> |
| | | <view class="v-headStyle" v-for="(item,index) in head_styledef.form.items"> |
| | | <!-- 普通布局 --> |
| | | <uni-forms-item v-if="item.name != 'Layout'&& item.show==true" |
| | | :label="item.label ? item.label +':':'' " :label-width="item.labelWidth+'px'"> |
| | | <!-- <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'" |
| | | :style="'width: calc(100% - '+item.labelWidth-10+'px);'" |
| | | :class="item.disabled?'input-disabled':''" v-model="item.value" :localdata="item.dict" |
| | | @change="onEnterChange(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="classAttr_extButton(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="{'padding-left':item.setting.prefix?0 : '8rpx','right':item.setting.suffix?0 : '8rpx'}" |
| | | :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> |
| | | <!-- 多行文本 --> |
| | | <view class="input-wrapper" v-if="item.name=='Textarea' "> |
| | | <textarea class="uni-input" :class="item.disabled?'input-disabled':''" v-model="item.value" |
| | | :focus="focusFieldId == item.fieldId" :placeholder="item.placeholder" |
| | | @blur="onEnterChange(item)" @click="onClick(item)" :data-index="index" |
| | | style="height:60px;" :style="{'width':'96%'}" :disabled="item.disabled"></textarea> |
| | | <OIForm ref="refBaseForm" class="v-headStyle" :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> |
| | | <!-- 复选框 --> |
| | | <checkbox-group class="check_rememberPwd" 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 class="check_rememberPwd" 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="onModelValue(item)" /> |
| | | <!-- 日期时间 --> |
| | | <!-- <view class="input-wrapper" v-if="(item.name=='TimePicker' || item.name=='DatePicker')"> |
| | | <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> --> |
| | | <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="onModelValue(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="onModelValue(item)" /> |
| | | <OITimePicker v-if="item.name=='TimePicker'" :class="item.disabled?'input-disabled':''" |
| | | :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder" |
| | | @change="onModelValue(item)" /> |
| | | </uni-forms-item> |
| | | <!-- 栅格布局 --> |
| | | <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"> |
| | | <uni-forms-item v-if="cols!=null && cols.show==true" |
| | | :label="cols.label? cols.label +':':''" :label-width="cols.labelWidth+'px'"> |
| | | <view class="input-wrapper" v-if="(cols.name=='Input' || cols.name=='InputNumber') "> |
| | | <text v-if="cols.setting.prefix" class="uni-icon" :class="[cols.setting.prefix]" |
| | | @click="classAttr_extButton(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="{'padding-left':cols.setting.prefix?0 : '8px','right':cols.setting.suffix?0 : '8px'}" |
| | | :focus="focusFieldId == cols.fieldId" @focus="ontap(cols)" |
| | | @click="onClick(cols)" @keyup.enter="onEnterChange(cols)" |
| | | @blur="onEnterChange(cols)" :maxlength="-1" /> |
| | | <text v-if="cols.setting.suffix" class="uni-icon" :class="[cols.setting.suffix]" |
| | | @click="classAttr_extButton(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="onEnterChange(cols)" :disabled="cols.disabled" |
| | | :clear="false"></uni-data-select> |
| | | <!-- 多行文本 --> |
| | | <view class="input-wrapper" v-if="cols.name=='Textarea' "> |
| | | <textarea class="uni-input" v-model="cols.value" |
| | | :class="cols.disabled?'input-disabled':''" :placeholder="cols.placeholder" |
| | | :focus="focusFieldId == cols.fieldId" @blur="onEnterChange(cols)" |
| | | @click="onClick(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" :data-index="index" |
| | | :data-iindex="key"> |
| | | <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" |
| | | @change="onRadioBoxValue" :data-attr="cols.fieldId" :data-index="index" |
| | | :data-iindex="key"> |
| | | <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="cols.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="cols.disabled" :value="cols.value" @change="onModelValue(cols)"> |
| | | <view class="picker">{{cols.value}}</view> |
| | | </picker> |
| | | </view> --> |
| | | <OIDatePicker v-if="cols.name=='DatePicker'" :class="cols.disabled?'input-disabled':''" |
| | | :disabled="cols.disabled" v-model="cols.value" :placeholder="cols.placeholder" |
| | | :defaultToday="cols.setting.defaultToday" :format="cols.setting.format" |
| | | @change="onModelValue(cols)" /> |
| | | <OIDatePickerRange v-if="cols.name=='DatePickerRange'" |
| | | :rangeSeparator="cols.setting.separator" :format="cols.setting.format" |
| | | :class="cols.disabled?'input-disabled':''" :disabled="cols.disabled" |
| | | v-model="cols.value" :placeholder="cols.placeholder" @change="onModelValue(cols)" /> |
| | | <OITimePicker v-if="cols.name=='TimePicker'" :class="cols.disabled?'input-disabled':''" |
| | | :disabled="cols.disabled" v-model="cols.value" :placeholder="cols.placeholder" |
| | | @change="onModelValue(cols)" /> |
| | | </uni-forms-item> |
| | | <uni-forms-item v-else label=""></uni-forms-item> |
| | | |
| | | </uni-col> |
| | | </uni-row> |
| | | </view> |
| | | </uni-forms> |
| | | </view> |
| | | <view class="view-bottom"> |
| | | <view class="uni-padding-wrap" v-if="dropdownBtns.length>0"> |
| | |
| | | import Base64 from '../../components/js-base64/base64.js' |
| | | import utils from "@/js/utils.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' |
| | | import { |
| | | appGetInfo, |
| | | dictGetInfo |
| | |
| | | Base64, |
| | | }, |
| | | components: { |
| | | OIDatePicker, |
| | | OIDatePickerRange, |
| | | OITimePicker |
| | | OIForm, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | onScanValue(item, value) { |
| | | const $this = this; |
| | | //console.log("onScanValue", item); |
| | | if (item.oldvalue != value) { |
| | | item.oldvalue = value; |
| | | item.value = value; |
| | | item.value = 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] = value; |
| | | $this.head_styledef.form.model[attr] = newVal; |
| | | var eventid = item.bind.onChangeEvent.id; //内容变化后事件 |
| | | if (eventid) { |
| | | var obj_attr = this.head_styledef.form.model; |
| | |
| | | } |
| | | this.DataObjRunCustomEvent(info, ''); |
| | | } |
| | | 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 |
| | | } |
| | | |
| | | } |
| | | |
| | | } |
| | | } else { |
| | | if (findd) { |
| | | let curIndex = ele.setting.colList.findIndex((col, index2, arr) => { |
| | | return (col.name == 'Input' || col.name == 'InputNumber'); |
| | | }) |
| | | if (curIndex > -1) { |
| | | if (ele.name != "Layout") { |
| | | if (ele.name == 'Input' || ele.name == 'InputNumber') { |
| | | if (attr == ele.fieldId) { |
| | | findd = true |
| | | } else { |
| | | if (findd) { |
| | | $this.setData({ |
| | | focusFieldId: ele.setting.colList[curIndex] |
| | | .fieldId |
| | | focusFieldId: ele.fieldId |
| | | }) |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } 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 |
| | | }) |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | |
| | | this.focusFieldId = item.fieldId |
| | | }, |
| | | onEnterChange(item) { |
| | | console.log("onEnterChange", 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; //内容变化后事件 |
| | | // this.onScanValue(this.head_styledef.form.items[2].setting.colList[0], "test") |
| | | 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); |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | }, |
| | | onModelValue(item) { |
| | | var attr = item.fieldId; |
| | | this.head_styledef.form.model[attr] = item.value; |
| | | }, |
| | | classAttr_extButton(item) { |
| | | var onSuffixClickCallbackEvent = item.bind.onSuffixClickCallbackEvent; //后图标点击事件 |
| | | var onSuffixClickEvent = item.bind.onSuffixClickEvent; //后图标点击回调 |
| | |
| | | |
| | | if (data.result) { |
| | | var result = data.result; |
| | | $this.setFormValues(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) { |
| | |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | var length = 0; |
| | | if (!$this.$data.refdatastore.filter(function(s) { |
| | | return data[i].attr == s.attr |
| | | }).length) { |
| | | length = 1; |
| | | $this.$data.refdatastore.push(data[i]); |
| | | } |
| | | if (length == 0) { |
| | | for (var j = 0; j < $this.$data.refdatastore |
| | | .length; j++) { |
| | | if ($this.$data.refdatastore[j].attr == data[ |
| | | i] |
| | | .attr) { |
| | | $this.$data.refdatastore[j].value = data[ |
| | | i] |
| | | .value; |
| | | } |
| | | } |
| | | } |
| | | } |