cuiqian2004
2025-03-20 c094d4a32180130de0c26c75a5abc414128a5ec1
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)">&#xe568;</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)">&#xe568;</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,9 +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':'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'}">
@@ -140,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 {
@@ -166,7 +83,6 @@
            global_attr: [],
            ext_info: {},
            data_json: [],
            refdatastore: [], //引用数据存储区// {attr:'G_PRJ_' + bindattr + '_ID', value:info.id}
            popupType: "center",
            check_list: {},
            popupParam: {},
@@ -232,7 +148,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
@@ -440,7 +356,7 @@
         },
         async loadFormData(objAttr) {
            let attrs = []
            if (this.objId) {
               let info = await dataObjInfo({
                  class_id: this.clsId,
@@ -617,10 +533,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; //后图标点击事件
@@ -631,36 +548,59 @@
                  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]
@@ -668,34 +608,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
                                 }
                              }
                           }
                        }
                     }
                  }
@@ -705,74 +620,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; //后图标点击事件
@@ -1278,63 +1141,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];
                           //判断表单里是否有返回字段,没有就装载到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)
                  }
               }
@@ -1371,18 +1178,7 @@
               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))
@@ -2048,7 +1844,8 @@
            }
            .uni-icon {
               padding: 8rpx;
               padding: 10rpx 5rpx;
               font-size: 32rpx;
               color: rgb(192, 196, 204);
            }
@@ -2119,7 +1916,7 @@
      .uni-icon {
         /* border: 1px solid red; */
         width: 8%;
         width: 30rpx;
         font-family: uniicons;
         font-size: 40rpx;
         font-weight: 400;
@@ -2157,7 +1954,7 @@
      .popup-footer {
         float: right;
         position: absolute;
         bottom:10rpx;
         bottom: 10rpx;
         right: 20rpx;
      }