form input pdaScanOnly

cuiqian2004

2025-09-05 09e14592dd06c4c2037e2b172ac77a2e290f9db9

 components/oi-form/list/input/index.vue

@@ -2,18 +2,28 @@
   <view class="oi-form-input">
      <text v-if="data.setting.prefix && !viewMode" class="form-input-icon" :class="[data.setting.prefix]"
         @click="onPrefixButton">&#xe568;</text>
      <input v-if="model" class="oi-input" :class="data.disabled?'input-disabled':''"
         :style="{'padding-left':data.setting.prefix?0 : '8rpx','right':data.setting.suffix?0 : '8rpx'}"
         v-model="model[data.fieldId]" :focus="focus" :placeholder="data.placeholder" @focus="onFocus"
         @blur="onChange" @confirm="onConfirm" @click="onClick" :disabled="data.disabled" :maxlength="-1"></input>
      <input v-else class="oi-input" :class="data.disabled?'input-disabled':''"
         :style="{'padding-left':data.setting.prefix?0 : '8rpx','right':data.setting.suffix?0 : '8rpx'}"
         v-model="data.value" :focus="focus" :placeholder="data.placeholder" @focus="onFocus" @blur="onChange" @confirm="onConfirm"
         @click="onClick" :disabled="data.disabled"></input>
      <template v-if="data.pdaScanOnly">
         <view class="fake-input" :class="data.disabled?'input-disabled':''" @click="onFakeInputClick">
            <text v-if="showPlaceholder" class="placeholder">{{data.placeholder }}</text>
            <text class="input-text">{{model ? model[data.fieldId]:data.value }}</text>
            <text v-if="!data.disabled&& focus" class="cursor">{{cursor}}</text>
         </view>
      </template>
      <template v-else><input v-if="model" class="oi-input" :class="data.disabled?'input-disabled':''"
            :style="{'padding-left':data.setting.prefix?0 : '8rpx','right':data.setting.suffix?0 : '8rpx'}"
            v-model="model[data.fieldId]" :focus="focus" :placeholder="data.placeholder" @focus="onFocus"
            @blur="onChange" @confirm="onConfirm" @click="onClick" :disabled="data.disabled"
            :maxlength="-1"></input>
         <input v-else class="oi-input" :class="data.disabled?'input-disabled':''"
            :style="{'padding-left':data.setting.prefix?0 : '8rpx','right':data.setting.suffix?0 : '8rpx'}"
            v-model="data.value" :focus="focus" :placeholder="data.placeholder" @focus="onFocus" @blur="onChange"
            @confirm="onConfirm" @click="onClick" :disabled="data.disabled"></input></template>

      <text v-if="data.setting.suffix&& !viewMode" class="form-input-icon" :class="[data.setting.suffix]"
         @click="onSuffixButton">&#xe568;</text>

   </view>


</template>

<script>
@@ -41,6 +51,25 @@
      data() {
         return {
            largeMode: getApp().globalData?.largeMode || false,
            cursor: "",
         }
      },
      mounted() {
         setInterval(() => {
            if (this.cursor)
               this.cursor = ""
            else
               this.cursor = "|"
         }, 1000)
      },
      computed: {

         showPlaceholder() {
            const val = this.model ? this.model[data.fieldId] : this.data.value
            if (val)
               return false
            else
               return true
         }
      },
      methods: {
@@ -50,6 +79,12 @@
         onConfirm(e) {
            console.log("onConfirm")
            this.onChange(e)
         },
         onFakeInputClick(e) {
            if (this.data.disabled)
               return
            this.$emit("on-focus", e)
            this.$emit("on-click", e)
         },
         onClick(e) {
            this.$emit("on-click", e)
@@ -63,6 +98,7 @@
            //          this.data.value = result
            //    }
            // })

            this.$emit("on-focus", e)
         },
         onPrefixButton() {
@@ -102,6 +138,36 @@
         background-color: #f3f3f3 !important;
      }

      .fake-input {
         display: flex;
         position: relative;
         padding: 8rpx 8rpx 12rpx 8rpx;
         align-items: center;
         color: #2d8cf0;
         flex: 1;
         height: 20px;
         background: #FFF;
         font-size: 18px;

         // .cursor {
         //    font-weight: bold;
         // }
         .input-text {
            font-size: 14px;
            color: #2d8cf0;
         }

         .placeholder {
            position: absolute;
            left: 4px;
            top: 4px;
            right: 4px;
            bottom: 0;
            font-size: 14px;
            color: #888;
         }
      }

      .oi-input {
         color: #2d8cf0;
         padding: 10rpx 8rpx;
@@ -113,6 +179,7 @@
         font-family: inherit;
         transition-duration: 0.1s;
         vertical-align: middle;

      }

      .form-input-icon {