@logwire/logwire-wms-pda-ui 1.1.15

package/src/components/ui/ImgUpload/index.vue

@@ -0,0 +1,120 @@
+<!--
+  @name: 图片上传及图片预览
+  @description: 图片上传及图片预览
+  @author 张文
+  @date: 2022-01-19
+-->
+<template>
+  <van-uploader
+    v-model="fileListModel"
+    :after-read="fileSelect"
+    :preview-options="{closeable:true}"
+    @delete="deleteFn"
+    multiple />
+</template>
+
+<script>
+import {
+  getUploadUrl,
+  uploadFile,
+} from './imgUploadAxios'
+export default {
+  name: "lwImgUpload",
+  props:{
+    // 已上传的文件
+    value:{
+      type:Array,
+      default:()=>[]
+    }
+  },
+  data(){
+    return {
+      fileListModel:[],
+      fileArr:[]
+    }
+  },
+  computed:{
+    fileListChange:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input',v)
+      }
+    }
+  },
+  mounted() {
+    this.fileListChange.forEach(i=>{
+      const item=i.split('=')[1]
+      this.$lwApi.imgSrc.get({
+        objectName:item,
+        contentType:'image/png'
+      }).then(res=>{
+        this.fileListModel.push({
+          url:res.downloadSignedUrl,
+          objectName:item
+        })
+      })
+    })
+
+  },
+  methods: {
+    // 文件上传选择完成
+    fileSelect(file){
+      if (Array.isArray(file)){
+        file.forEach(item=>this.afterRead(item))
+      }else {
+        this.afterRead(file)
+      }
+    },
+
+    // 文件上传至服务器
+    async afterRead(file) {
+      file.status = 'uploading';
+      file.message = this.$lwLanguage.get('wms_project.pda.component.imgUpload.uploading','上传中') + '...';
+
+      try{
+
+        const res = await getUploadUrl({
+          fileName:file.file.name,
+          contentType:file.file.type,
+          fileSize:file.file.size
+        })
+
+        const img = await uploadFile({
+          url: res.uploadSignedUrl,
+          file: file.file,
+          uploadMethod: res.uploadMethod,
+          uploadContentType: res.uploadContentType
+        })
+
+        this.fileListChange.push(`${file.file.name}=${res.objectName || img.data.objectName}`)
+        file.status = 'none';
+
+      }catch (err){
+
+        console.warn('图片上传异常：', err)
+
+        file.status = 'failed'
+        file.message = this.$lwLanguage.get('wms_project.pda.component.imgUpload.uploadFail', '上传失败');
+
+      }
+    },
+    // 删除文件
+    deleteFn(file){
+      const name = file.objectName || file.file.name
+      const index = file.file?0:1
+      this.fileListChange.forEach((i,k)=>{
+        const item=i.split('=')[index]
+        if (item===name){
+          this.fileListChange.splice(k,1)
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/ui/ImgUpload/request.js

@@ -0,0 +1,39 @@
+import axios from 'axios'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 300000 // request timeout
+})
+service.setBaseUrl = url => service.defaults.baseURL = url
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+
+    // if the custom code is not 0, it is judged as an error.
+    if (res.code && res.code !== '0') {
+      return Promise.reject(new Error(res.msg || '接口code校验失败，返回了非0字符，被接口拦截'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+
+export default service

package/src/components/ui/ImgUpload//345/233/276/347/211/207/344/270/212/344/274/240.md

@@ -0,0 +1 @@
+# 图片上传 [查看文档](https://www.yuque.com/docs/share/9441a8df-d938-46ad-9849-a56f9551f363)

package/src/components/ui/Input/index.js

@@ -0,0 +1,5 @@
+import lwInput from './index.vue'
+
+lwInput.install = Vue => Vue.component(lwInput.name, lwInput)
+
+export default lwInput

package/src/components/ui/Input/index.vue

@@ -0,0 +1,544 @@
+<!--
+  @name:
+  @description: -
+  @author 张文
+  @date: 2022-01-18
+-->
+<template>
+  <div
+    :class="[
+      'lw-global-flex-start',
+      showBottomBorder ? 'lw-global-bottom-border' : '',
+      required?'lw-global-required' : '',
+      'lw-input-box',
+    ]"
+  >
+    <label
+      v-if="title.length || !!$slots.title"
+      :class="[
+        'lw-global-flex-start',
+        'lw-input-title',
+        showColon?'lw-global-show-colon':''
+      ]"
+      :style="{
+        width:titleWidth ? titleWidth + 'px' : 'auto',
+        textAlign: titleAlign || 'left',
+        display:'inline-block'
+      }"
+    >
+      <slot name="title">{{ title }}</slot>
+
+    </label>
+
+    <div class="lw-global-flex-start lw-input-body">
+      <!-- 输入框主体 -->
+      <div class="lw-global-flex-start lw-input-boss">
+
+        <!-- 键盘 -->
+        <img
+          v-if="showKeyboard && !disabled && !readonly"
+          class="lw-input-img"
+          :src="require('../../../assets/img/lwInputIcon/keyboard.png')"
+          alt="键盘"
+          @click="keyboardClick"
+          @dblclick="dblclickKeyboard"
+        >
+
+        <!-- 文本域 -->
+        <textarea
+          v-if="type === 'textarea'"
+          ref="lwInput"
+          class="lw-input-input"
+          v-model="val"
+          :name="name"
+          :disabled="disabled"
+          :readonly="readonly || readonlyInp"
+          :rows="rows"
+          :maxlength="maxlength"
+          :style="{
+            textAlign:inputAlign,
+            resize:'none'
+          }"
+          :placeholder="placeholderData"
+          @focus="inputFocus"
+          @blur="inputBlur"
+          @keydown.enter="confirm"
+        />
+
+        <!-- 输入框 -->
+        <input
+          v-else
+          ref="lwInput"
+          class="lw-input-input"
+          :type="['number','digit'].includes(type) ? 'text' : type"
+          :name="name"
+          :value="val"
+          :maxlength="maxlength"
+          :disabled="disabled"
+          :readonly="readonly || readonlyInp"
+          :style="{
+            textAlign:inputAlign
+          }"
+          :placeholder="placeholderData"
+          @focus="inputFocus"
+          @blur="inputBlur"
+          @keydown.enter="confirm"
+          @input="input"
+        >
+
+        <!-- 字数统计 -->
+        <div
+          v-if="showWordLimit"
+          class="lw-input-word-limit"
+        >
+          <span v-if="maxlength">{{ value.length || 0 }} / {{ maxlength }}</span>
+          <span v-else>{{ value.length }}</span>
+        </div>
+
+        <!-- 清除按钮 -->
+<!--        <img
+          v-if="showClear && (!disabled || !readonly || !readonlyInp ) && val"
+          class="lw-input-img"
+          :src="require('./../../assets/img/lwInputIcon/clear.png')"
+          alt="清除"
+          @click="clearClick"
+        >-->
+
+        <van-icon
+          v-if="showClear && !disabled && !readonly &&!readonlyInp  && val"
+          class="lw-input-clear"
+          name="clear"
+          @click="clearClick"
+        />
+
+        <!-- 获取焦点时划线用的 -->
+        <div class="lw-input-border"></div>
+
+        <!-- 按钮插槽 -->
+        <div v-if="!!$slots.button" class="lw-input-button-box">
+          <slot name="button"></slot>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwInput",
+  props:{
+    // 输入框的值
+    value: [String, Number],
+
+    // 输入框标题
+    title: {
+      type:[String, Number],
+      default: ''
+    },
+
+    // 标题的对齐方式
+    titleAlign:String,
+
+    // 标题的宽度
+    titleWidth: Number,
+
+    // 输入框的名字，form表单使用
+    name: String,
+
+    // 输入类型
+    type:{
+      type: String,
+      default: 'text'
+    },
+
+    // 占位符，默认为：请扫描或输入+传入的title值
+    placeholder: String,
+
+    // 是否禁用，默认false
+    disabled:{
+      type: Boolean,
+      default: false
+    },
+
+    // 是否自读，默认false
+    readonly:{
+      type:Boolean,
+      default:false
+    },
+
+    // 输入内容格式化函数，默认在change事件时触发
+    formatter: Function,
+
+    // 是否显示必填的星号，默认false。仅展示星号不做必填校验
+    required:{
+      type:Boolean,
+      default:false
+    },
+
+    // 输入框文本对齐位置，默认左对齐
+    inputAlign:{
+      type:String,
+      default: 'left'
+    },
+
+    // 文本域时显示的文本行数
+    rows:{
+      type: Number,
+      default: 2
+    },
+
+    // 允许输入的最大字符量
+    maxlength:[Number,String],
+
+    // 是否显示字数统计
+    showWordLimit:{
+      type: Boolean,
+      default :false
+    },
+
+    // 是否显示键盘图标
+    showKeyboard:{
+      type: Boolean,
+      default: true
+    },
+
+    // 是否显示清除图标
+    showClear:{
+      type: Boolean,
+      default: true
+    },
+
+    // 是否显示下边框
+    showBottomBorder:{
+      type: Boolean,
+      default: true
+    },
+
+    // 是否获取输入框焦点，默认false，失去焦点后会改变值为false
+    getFocus:{
+      type:Boolean,
+      default:false
+    },
+
+    // 是否禁止软键盘弹出，默认禁止弹出，可通过双击输入框强制弹出
+    notKeyboard:{
+      type:Boolean,
+      default:true
+    },
+
+    // 获得扫码结果后是否立刻将输入框内容置空，默认false
+    autoClearVal:{
+      type:Boolean,
+      default:false
+    },
+
+    // 扫码解析规则
+    ruleKey:String,
+
+    // 扫码解析后输入框回填字段的key
+    ruleValueKey:String,
+
+    // 解码的额外参数
+    ruleServeQuery:{
+      type: Object,
+      default: ()=>{}
+    },
+
+    // 是否通过双击键盘打开相机扫描功能
+    openCameraScan:{
+      type:Boolean,
+      default:false
+    },
+
+    // 输入完成后是否立刻失去焦点
+    inputOverBlur:{
+      type: Boolean,
+      default: false
+    },
+
+    // 是否显示冒号
+    showColon:{
+      type: Boolean,
+      default: false
+    },
+
+    // 如果输入类型是小数，则小数点接受几位，0表示不限制
+    decimalScale:{
+      type: Number,
+      default: 0
+    }
+  },
+  computed:{
+    // 输入框实际绑定的值
+    val:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    },
+    // 提示文字
+    placeholderData(){
+      if(this.disabled || this.readonly){
+        return ''
+      }
+
+      if (this.placeholder){
+        return this.placeholder
+      }
+
+      return this.$lwLanguage.get('wms_project.pda.common.scanInput', '请扫描或输入') + this.title
+    }
+  },
+  watch:{
+    getFocus:{
+      handler(n){
+        n ? this.setFocusFn() : this.setBlurFn()
+      },
+    }
+  },
+  data() {
+    return {
+      // 用于禁止弹出键盘的零时标识
+      readonlyInp:false,
+      // 是否通过点击键盘
+      isClickKeyboard:false
+    }
+  },
+  mounted() {
+    this.getFocus && this.setFocusFn()
+  },
+  methods: {
+
+    // 键盘单击
+    keyboardClick(){
+      this.inputFocus()
+      this.isClickKeyboard = true
+    },
+
+    // 键盘双击
+    dblclickKeyboard(){
+      if (this.openCameraScan){
+        this.val=this.$lwAppPower.scan() || ''
+
+        setTimeout(()=>{
+          if(this.val){
+            this.confirm()
+          }
+        },1)
+      }
+    },
+
+    // 点击清除按钮
+    clearClick(){
+      this.val=''
+      this.$refs.lwInput.value = ''
+      this.input()
+      this.$refs.lwInput.focus()
+      this.$emit('clear')
+    },
+
+    // 获取焦点
+    setFocusFn(){
+      this.isOpenKeyboard()
+      this.$refs.lwInput.focus()
+    },
+
+    // 失去焦点
+    setBlurFn(){
+      this.$refs.lwInput.blur()
+    },
+
+    // 获取焦点事件
+    inputFocus(){
+      // 全局变量存入当前获取焦点的节点，方便后期获取焦点
+      window.lwWindowGlobalData.set('input.dom',this.$refs.lwInput)
+      this.$emit('update:getFocus', true)
+    },
+
+    // 失去焦点事件
+    inputBlur(){
+      this.$emit('update:getFocus', false)
+    },
+
+    // 是否弹出输入法
+    isOpenKeyboard(){
+      if (this.isClickKeyboard){
+        this.isClickKeyboard = false
+        return
+      }
+      if (this.notKeyboard){
+        this.readonlyInp=true
+        setTimeout(()=>{
+          this.readonlyInp=false
+        },200)
+      }else {
+        this.isKeyboard=false
+      }
+    },
+
+    // 点击回车
+    async confirm(){
+      try{
+        let obj={},val = this.val
+
+        if (this.ruleKey){
+
+          obj = await this.$lwApi.barcode.resolver({
+            componentId: this.$route.path + '/' + this.ruleKey,
+            barcode: this.val,
+            ...this.ruleServeQuery
+          })
+        }
+
+        if (obj && this.ruleValueKey){
+          val = obj.data[this.ruleValueKey] || '-'
+        }
+
+
+        if (this.autoClearVal){
+          this.clearClick()
+        }else {
+          this.val = val
+        }
+
+        if (this.inputOverBlur){
+          this.inputBlur()
+        }
+        this.$lwAppPower.shortVibrate(500)
+        this.$emit('confirm', val, obj)
+      }catch (e){
+        this.$lwShowErrorMsg(e)
+      }
+    },
+
+    input(){
+      let val = this.$refs.lwInput.value
+
+      // 去除空格
+      val = val.trim()
+
+      // 整数
+      if (this.type === 'digit'){
+        val = val.replace(/\D/g, '')
+      }
+
+      // 小数
+      if (this.type === 'number'){
+        const num = val.replace(/[^\d/.]/, '')
+        if (/^\d+/.test(num)){
+          const use = num.includes('.')
+          if(use){
+            const list = num.split('.')
+            const decimal = this.decimalScale ? list[1].substring(0, this.decimalScale) : list[1]
+            val =  list[0] + '.' + decimal
+          }else {
+            val =  num
+          }
+        }else {
+          val = ''
+        }
+      }
+
+      // 是否存在格式化函数
+      if (this.formatter && typeof this.formatter === 'function'){
+        val = this.formatter(val)
+      }
+
+      // 赋值
+      this.$refs.lwInput.value = val
+
+
+      this.$emit('input', val)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/css/var.less";
+
+
+.lw-input-box{
+  font-size: 14px;
+  overflow: hidden;
+  padding: 5px 0;
+}
+
+.lw-input-title{
+  color: @titleColor;
+  flex-shrink: 0;
+  margin-right: 5px;
+}
+
+.lw-input-body{
+  flex: 1;
+  position: relative;
+  transition: all .3s;
+}
+
+.lw-input-boss{
+  flex: 1;
+  position: relative;
+}
+
+.lw-input-img{
+  width: 20px;
+}
+
+.lw-input-clear{
+  font-size: 18px;
+  color: #cdcdcd;
+}
+
+.lw-input-input{
+  width: 100%;
+  border: none;
+  padding: 6px;
+
+  &::-webkit-input-placeholder{
+    color: #ccc;
+  }
+
+
+  &:focus ~ .lw-input-border:after{
+    width: 100%;
+  }
+}
+
+.lw-input-border{
+
+  &:after{
+    content: ' ';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background-color: @baseColor;
+    transform: scaleY(0.5);
+    transition: all .3s;
+  }
+}
+
+.lw-input-word-limit{
+  font-size: 12px;
+  flex-shrink: 0;
+  margin-right: 5px;
+
+  >span{
+    color: #ccc;
+  }
+}
+
+.lw-input-button-box{
+  padding-left: 8px;
+  flex-shrink: 0;
+}
+
+</style>

package/src/components/ui/Input//350/276/223/345/205/245/346/241/206.md

@@ -0,0 +1 @@
+# 输入框 [查看文档](https://www.yuque.com/docs/share/58281a3a-8b0d-4b99-b96a-bb67d9e684b2)