@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,132 @@
+<!--
+  切换卡片
+  @author: 张文
+  @date: 2022-05-19
+-->
+<template>
+  <div
+    class="lw-global-flex-between"
+    style="padding-top: 8px"
+  >
+    <!-- 左边按钮 -->
+    <div
+      class="lw-global-flex-center lw-global-click-style lw-cut-card-btn"
+      @click="cut('left')"
+    >
+      <van-icon name="arrow-left"/>
+    </div>
+
+    <!-- 任务数据 -->
+    <div>
+      <span style="color: #D50000">{{ index + 1 }}</span>
+      <span> / {{ length }}</span>
+    </div>
+
+    <slot name="numLast"></slot>
+
+    <!-- 右边按钮 -->
+    <div
+      class="lw-global-flex-center lw-global-click-style lw-cut-card-btn"
+      @click="cut('right')"
+    >
+      <van-icon name="arrow" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCutCard",
+  props:{
+    // 当前激活项
+    value:{
+      type: Number,
+      default: 0
+    },
+    // 总长度
+    length:{
+      type: Number,
+      default: 1
+    },
+    // 切换前的回调
+    cutStart: Function,
+    // 切换成功后的回调
+    cutEnd: Function
+  },
+  computed:{
+    index:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+
+    // 左右切换
+    async cut(type){
+      try{
+
+        // 判断是点击的左边还是右边
+        if (type === 'left'){
+          if (this.index === 0){
+            this.$lwShowErrorMsg(
+              this.$lwLanguage.get('wms_project.pda.ui.cutCard.one','已是第一条')
+            )
+            return
+          }
+        }else {
+          if ((this.index + 1) >= this.length){
+            this.$lwShowErrorMsg(
+              this.$lwLanguage.get('wms_project.pda.ui.cutCard.last','已是最后一条')
+            )
+            return
+          }
+        }
+
+        // 判断是否传入了触发前的事件
+        if (this.cutStart){
+          const back = await this.cutStart()
+
+          if (back === false) return
+        }
+
+        // 根据不同按钮触发不同事件
+        type === 'left' ? this.index-- : this.index++
+
+        // 提示成功
+        this.$nextTick(()=>{
+          this.$lwToast.toast({
+            forbidClick:false,
+            message:this.$lwLanguage.get('wms_project.pda.ui.cutCard.cut','已切换至行数：') + (this.index + 1)
+          })
+        })
+
+        // 调用触发结束后的回调
+        this.cutEnd && this.cutEnd()
+      }catch(e){
+        console.warn('切换组件异常捕获：', e)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-cut-card-btn{
+  padding: 5px;
+  border: solid 1px @titleColor;
+  border-radius: 5px;
+}
+
+</style>

package/src/components/ui/CutCard//345/215/241/347/211/207/351/241/265/351/235/242/345/210/207/346/215/242.md

@@ -0,0 +1 @@
+# 卡片页面切换 [查看文档](https://www.yuque.com/docs/share/488610d6-33b7-4ea8-a3a4-67441e7b62b0)

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

@@ -0,0 +1,11 @@
+/*
+* 数据看板背景图
+* @author: 张文
+* @date  2022-05-16
+* */
+
+import lwDataLookBg from "./index.vue";
+
+lwDataLookBg.install = Vue => Vue.component(lwDataLookBg.name, lwDataLookBg)
+
+export default lwDataLookBg

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

@@ -0,0 +1,104 @@
+<!--
+  看板背景图
+  @author: 张文
+  @date: 2022-05-06
+-->
+<template>
+  <div
+    :class="[
+      'lw-global-flex-center',
+      clickStyle ? 'lw-global-click-style' : '',
+      'lw-look-img-bg'
+    ]"
+    @click="$emit('click')"
+  >
+    <img :src="imgSrc" alt="" class="lw-look-img">
+
+    <div class="lw-global-flex-around lw-look-box">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwDataLookBg",
+  props:{
+    // 背景图样式 all - 全圆角，bottom - 底部圆角，not - 没有圆角
+    type:{
+      type: String,
+      default: 'all'
+    },
+    // 是否需要点击样式
+    clickStyle: Boolean
+  },
+  computed:{
+    imgSrc(){
+      switch (this.type){
+        case 'all':
+          return require('./../../../assets/img/datalookBg/backgroundImg.png')
+        case 'bottom':
+          return require('./../../../assets/img/datalookBg/backgroundBottomRadius.png')
+        case 'not':
+          return require('./../../../assets/img/datalookBg/backgroundImgAngle.png')
+        default:
+          return require('./../../../assets/img/datalookBg/backgroundImg.png')
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+
+
+.lw-look-img-bg{
+  position: relative;
+
+  .lw-look-img{
+    width: 100%;
+  }
+
+  .lw-look-box{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    text-align: center;
+
+    .lw-data-look-bg-title{
+      font-size: 12px;
+      margin-top: 3px;
+    }
+
+    >div{
+      text-align: center;
+      flex-grow: 1;
+
+    }
+
+    .lw-data-last-item {
+      position: relative;
+
+      &::before {
+        content: ' ';
+        display: inline-block;
+        width: 1px;
+        height: 50%;
+        background: #fff;
+        position: absolute;
+        top: 25%;
+        left: 0;
+      }
+    }
+  }
+}
+
+</style>

package/src/components/ui/DataLookBg//346/225/260/346/215/256/347/234/213/346/235/277/350/203/214/346/231/257/345/233/276.md

@@ -0,0 +1 @@
+# 数据看板背景图 [查看文档](https://www.yuque.com/docs/share/771b5926-1878-43b9-970c-a2c8b3c136ff)

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

@@ -0,0 +1,59 @@
+import Vue from "vue";
+import lwErrorMsg from './index.vue'
+
+import {AppPower} from "../../../utils/AppPower";
+
+/*lwErrorMsg.install = Vue => Vue.component(lwErrorMsg.name, lwErrorMsg)
+
+export default lwErrorMsg*/
+
+
+// 手动挂载加载框
+const errorMsg = Vue.extend(lwErrorMsg)
+let errorMsgNew = null
+// 挂载加载框
+const lwErrorMsgDom = ({message,background,color}) => {
+  errorMsgNew = new errorMsg({
+    el: document.createElement('div')
+  });
+  errorMsgNew.show = true
+  errorMsgNew.message = message
+  errorMsgNew.background = background
+  errorMsgNew.color = color
+  AppPower.speak(message)
+  AppPower.shortVibrate(1500)
+  document.body.appendChild(errorMsgNew.$el)
+}
+
+/**
+ * 打开错误提示弹框
+ * @param {Object|String} obj {message-错误信息，background-背景颜色，color-字体颜色}
+ */
+export const lwShowErrorMsg = (obj) => {
+  let data = {}
+  if (typeof obj === 'object'){
+    data = obj
+  }else {
+    data.message = obj
+  }
+
+
+  if (errorMsgNew){
+    errorMsgNew.message = data.message
+
+    if (typeof obj === 'object'){
+      errorMsgNew.background = data.background
+      errorMsgNew.color = data.color
+    }
+
+    return
+  }
+
+  lwErrorMsgDom(data)
+}
+
+// 关闭错误提示弹框
+export const lwCloseErrorMsg = () => {
+  errorMsgNew.close()
+  errorMsgNew = null
+}

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

@@ -0,0 +1,141 @@
+<!--
+  @name: 错误提示框
+  @description: -
+  @author 张文
+  @date: 2022-01-25
+-->
+<template>
+  <div
+    v-if="show"
+    :style="{height:height}"
+    class="lw-error-msg-box"
+  >
+
+    <div
+      :style="{
+        background:background,
+        color:color
+      }"
+      class="lw-error-msg-body"
+    >
+      <div class="lw-error-msg-content">{{ message }}</div>
+    </div>
+
+    <div class="lw-global-flex-center lw-error-msg-close" @click="offError">
+      <img :src="require('../../../assets/img/off.png')" alt="">
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {lwCloseErrorMsg} from "./index";
+
+/* 注意此组件不能使用 this.$XXX 的方法，因为没有注册组件是通过指令调用的 */
+
+export default {
+  name: "lwErrorMsg",
+  /*props:{
+    message:[String,Number]
+  },*/
+  data() {
+    return {
+      show:false,
+      height:0,
+      message:'',
+      background:'',
+      color:''
+    }
+  },
+  watch:{
+    show(n){
+      if (n){
+        // 让当前获取焦点的输入框失去焦点
+        this.getInput('blur')
+      }
+    }
+  },
+  mounted() {
+    setTimeout(()=>{
+      this.height = '100vh'
+    },5)
+  },
+  methods: {
+    // 通过点击关闭按钮关闭弹窗
+    offError(){
+      lwCloseErrorMsg()
+    },
+
+    // 关闭弹框
+    close(){
+      this.height=0
+      const dom = document.getElementsByClassName('lw-error-msg-box')[0]
+      dom.addEventListener('transitionend', ()=>{
+        // 让原输入框获取焦点
+        this.getInput('focus')
+        this.show=false
+      })
+      this.$emit('close')
+    },
+
+    // 获取当前存放的输入框
+    getInput(fn){
+      const inp = window.lwWindowGlobalData.get('input').dom
+      inp && inp[fn]()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-error-msg-box{
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100vw;
+  height: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 2147483584;
+  transition: all .3s;
+  overflow: hidden;
+}
+
+.lw-error-msg-body{
+  width: 100%;
+  height: 50%;
+  padding: 10px;
+  box-sizing: border-box;
+  color: @errorMsgColor;
+  background: @errorMsgBackgroundColor;
+  overflow: hidden;
+}
+
+.lw-error-msg-content{
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.lw-error-msg-close{
+  position: absolute;
+  top: 70%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  >img{
+    width: 40px;
+  }
+}
+
+.err-msg-btn{
+  opacity: 0;
+}
+
+</style>

package/src/components/ui/ErrorMsg//351/224/231/350/257/257/346/217/220/347/244/272/346/241/206.md

@@ -0,0 +1 @@
+# 错误提示框 [查看文档](https://www.yuque.com/docs/share/b61caffa-95c7-41a2-b434-4ca54df978fc)

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

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

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

@@ -0,0 +1,36 @@
+<!--
+  @name: 表单
+  @description: -
+  @author 张文
+  @date: 2022-01-25
+-->
+<template>
+  <form @submit="submit">
+    <slot></slot>
+  </form>
+</template>
+
+<script>
+
+export default {
+  name: "lwForm",
+  data() {
+    return {}
+  },
+  methods: {
+    submit(ev){
+      const form = ev.target.getElementsByTagName('input')
+      let data={}
+      for (let i=0;i<form.length;i++){
+        data[form[i].name] = form[i].value
+      }
+      ev.preventDefault();
+      this.$emit('submit', data)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/ui/Form//350/241/250/345/215/225.md

@@ -0,0 +1 @@
+# 表单 [查看文档](https://www.yuque.com/docs/share/04cc09e4-0688-4153-8391-5137585a91fe)

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

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

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

@@ -0,0 +1,96 @@
+<!--
+  @name: 图片预览
+  @description: 图片预览
+  @author 张文
+  @date: 2022-01-19
+  -->
+<template>
+  <div :style="{justifyContent: justifyContent}" class="lw-img-look">
+    <van-image
+      v-for="(i,k) in imgArr"
+      :key="k"
+      style="margin:0 10px 10px 0"
+      fit="contain"
+      :src="i"
+      @click="showBig(k)"
+    />
+  </div>
+</template>
+
+<script>
+// 全局图片预览
+import { ImagePreview } from 'vant';
+import {GetImgSrc} from '../../../utils/GetImgSrc'
+
+export default {
+  name: "lwImgLook",
+  props:{
+    // 显示的原始文件
+    imgList:{
+      type:Array,
+      default:()=>[]
+    },
+    // 对齐方式
+    justifyContent:{
+      type:String,
+      default:'flex-start'
+    },
+    // 是否开启点击图片展示大图，默认开启
+    showBigImg:{
+      type:Boolean,
+      default:true
+    }
+  },
+  watch:{
+    imgList:{
+      handler(l,n){
+        if (!l || !n ||l.toString()!==n.toString()){
+          this.getUrl()
+        }
+      },
+      immediate:true,
+      deep:true
+    }
+  },
+  data(){
+    return {
+      imgArr:[]
+    }
+  },
+  methods:{
+    showBig(index){
+      this.$emit('click', index, this.imgArr[index])
+      if(!this.showBigImg)return
+      ImagePreview({
+        images: this.imgArr,
+        startPosition: index,
+        closeable: true,
+      });
+    },
+
+    getUrl(){
+      this.imgArr=[]
+      GetImgSrc.asyncGet(this.imgList.join('|')).then(arr=>{
+        this.imgArr=arr
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.lw-img-look{
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  flex-wrap: wrap;
+
+  /deep/.van-image{
+    max-width: 100px;
+    max-height: 100px;
+  }
+}
+
+
+</style>

package/src/components/ui/ImgLook//345/233/276/347/211/207/346/237/245/347/234/213.md

@@ -0,0 +1 @@
+# 图片查看 [查看文档](https://www.yuque.com/docs/share/80720954-a6a4-42c9-9697-ace3142c99ac)

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

@@ -0,0 +1,37 @@
+// 获取图片上传路径
+import axios from "../../../utils/Axios";
+import service from "./request";
+
+
+// 获取图片上传路径
+export function getUploadUrl(data){
+  return axios.action({
+    url:'commonWmsGetOssUploadUrl',
+    data
+  })
+}
+
+
+// 上传图片
+export function uploadFile({url, file, uploadMethod='put', uploadContentType}){
+  service.setBaseUrl(url)
+
+  if (uploadMethod.toLowerCase() === 'put'){
+    return service({
+      url:'',
+      method: 'put',
+      headers: { 'Content-Type': file.type },
+      data:file
+    })
+  }
+
+  let formData = new FormData()
+  formData.append('file', file)
+
+  return service({
+    url:'',
+    method: uploadMethod,
+    headers: { 'Content-Type': uploadContentType },
+    data: formData
+  })
+}

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

@@ -0,0 +1,12 @@
+/*
+* 图片上传组件的暴露出口
+* @author 张文
+* @date  2022-01-19
+* */
+
+import lwImgUpload from './index.vue'
+
+lwImgUpload.install = Vue => Vue.component(lwImgUpload.name, lwImgUpload)
+
+export default lwImgUpload
+