@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,49 @@
+import lwLoading from './index.vue'
+import Vue from "vue";
+
+/*lwLoading.install = Vue => Vue.component(lwLoading.name, lwLoading)
+
+export default lwLoading*/
+
+
+
+
+// 手动挂载加载框
+const toastCom = Vue.extend(lwLoading)
+let toastNew
+// 挂载加载框
+const lwLoadingDom = (msg) => {
+  toastNew = new toastCom({
+    el: document.createElement('div')
+  });
+  toastNew.msg = msg || msg === 0 ? msg : '加载中...'
+  toastNew.loading++
+  document.body.appendChild(toastNew.$el)
+  return toastNew
+}
+
+/**
+* 打开加载框
+* @param {String} msg 加载文字，默认“加载中...”
+* */
+export const lwShowLoading = (msg='加载中...') => {
+  if (toastNew){
+    toastNew.loading++
+    toastNew.msg = msg
+    return toastNew
+  }
+  return lwLoadingDom(msg)
+}
+
+// 关闭加载框
+export const lwCloseLoading = () => {
+  try{
+    if (toastNew){
+      toastNew.loading--
+
+      if (toastNew.loading <=0) toastNew.loading = 0
+    }
+  }catch (err){
+    console.warn('关闭加载框出错', err)
+  }
+}

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

@@ -0,0 +1,61 @@
+<!--
+  @name: 加载框
+  @description: -
+  @author 张文
+  @date: 2022-01-24
+-->
+<template>
+  <div class="lw-global-flex-center lw-loading" v-if="loading > 0">
+    <div class="lw-global-flex-center lw-loading-block">
+      <span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;">
+        <svg viewBox="25 25 50 50" class="van-loading__circular">
+          <circle cx="50" cy="50" r="20" fill="none"></circle>
+        </svg>
+      </span>
+      <div style="margin-top: 5px">{{ msg || $lwLanguage.get('wms_project.pda.common.loading', '加载中') + '...' }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwLoading",
+  data() {
+    return {
+      msg:'',
+      loading:0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+
+@import "../../../assets/css/var.less";
+
+.lw-loading {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2147483583;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #fff;
+  font-size: 12px;
+
+  &-block {
+    padding: 16px;
+    border-radius: 8px;
+    width: 88px;
+    max-width: 70%;
+    min-height: 88px;
+    background-color: #4f4f4f;
+    flex-direction: column;
+  }
+}
+
+
+</style>

package/src/components/ui/Loading//345/212/240/350/275/275/346/241/206.md

@@ -0,0 +1 @@
+# 加载框 [查看文档](https://www.yuque.com/docs/share/f5e6d983-e7ec-44dc-84db-261e9847cf93)

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

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

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

@@ -0,0 +1,170 @@
+<!--
+  @name: 菜单模块
+  @description: -
+  @author 张文
+  @date: 2022-02-24
+-->
+<template>
+  <div
+    :class="[
+      move ? 'lw-global-animation-out' : '',
+      'lw-global-click-style',
+      'lw-menu-item'
+    ]"
+    :style="{ background: background, animationDelay: 50 * time + 'ms' }"
+    v-if="!hidden"
+    v-permissions="permissions"
+    @click="click"
+  >
+    <img
+      class="lw-menu-img"
+      :src="src"
+      alt=""
+    >
+
+    <div class="lw-global-flex-center lw-menu-title" v-html="$lwLanguage.get(titleKey, title)"></div>
+
+    <!-- 角标 -->
+    <div v-if="tip && tip !== '0'" class="lw-global-flex-center lw-menu-tip">{{ strToNum(tip) }}</div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwMenuItem",
+  props: {
+    // 项目的背景颜色
+    background: String,
+
+    // 是否需要进入动画
+    move:{
+      type:Boolean,
+      default: true
+    },
+
+    // 延迟动画时长，50的倍数
+    time: {
+      type: Number,
+      default: 0
+    },
+
+    // 权限
+    permissions: {
+      type: Array,
+      default: () => []
+    },
+
+    // 是否显示
+    hidden: {
+      type: Boolean,
+      default: false
+    },
+
+    // 图片地址
+    src: null,
+
+    // 标题多语言的key，允许使用HTML标签
+    titleKey: String,
+    // 标题，允许使用HTML标签
+    title: null,
+
+    // 角标数据
+    tip: [Number, String],
+
+    // 角标数据最大可显示数
+    tipMax: {
+      type: Number,
+      default: 9
+    },
+
+    // 跳转的路由地址
+    path: String,
+
+    // 跳转时传递的参数
+    query: Object
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 徽标数字转换
+    strToNum(str) {
+      const num = Number(str)
+
+      if (isNaN(num)) return str
+
+      if (this.tipMax === 0) return num
+
+      if (num > this.tipMax) return this.tipMax + '+'
+
+      return num
+    },
+
+
+    // 点击
+    click() {
+      if (this.path){
+        this.$router.push({
+          path: this.path,
+          query: this.query
+        })
+
+        return
+      }
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+/*
+* 菜单项
+*/
+
+.lw-menu-item{
+  width: calc((100% - 20px) / 3);
+  box-sizing: border-box;
+  margin: 0 10px 10px 0;
+  text-align: center;
+  background: #fff;
+  border-radius: 10px;
+  padding: 10px;
+  position: relative;
+
+  &:nth-child(3n){
+    margin-right: 0;
+  }
+
+  .lw-menu-img{
+    width: 40px;
+    height: auto;
+  }
+}
+
+.lw-menu-title{
+  margin-top: 5px;
+  font-size: 12px;
+  height: 24px;
+  flex-direction: column;
+}
+
+.lw-menu-tip{
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 3px;
+  min-width: 16px;
+  min-height: 16px;
+  border-radius: 999px;
+  background: #D50000;
+  color: #fff;
+  font-weight: 500;
+  text-align: center;
+  font-size: 12px;
+  transform: translate(25%,-25%);
+}
+
+</style>

package/src/components/ui/MenuItem//350/217/234/345/215/225/351/241/271.md

@@ -0,0 +1 @@
+# 菜单项 [查看文档](https://www.yuque.com/docs/share/9b057b4a-14b4-468a-a8d8-df8303283da2)

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

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

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

@@ -0,0 +1,143 @@
+<!--
+  @name:
+  @description: -
+  @author 张文
+  @date: 2022-01-19
+-->
+<template>
+  <van-nav-bar
+    class="lw-nav-bar"
+    :title="title"
+    :left-text="leftText"
+    :right-text="rightText"
+    :left-arrow="leftArrow"
+    :border="border"
+    :fixed="fixed"
+    :placeholder="placeholder"
+    :z-index="zIndex"
+    safe-area-inset-top
+    @click-left="goBack"
+    @click-right="clickRight"
+  >
+    <template slot="left">
+      <slot name="left"></slot>
+    </template>
+    <template slot="title">
+      <slot name="title"></slot>
+    </template>
+    <template slot="right">
+      <slot name="right"></slot>
+    </template>
+  </van-nav-bar>
+</template>
+
+<script>
+
+export default {
+  name: "lwNavBar",
+  props:{
+    // 标题
+    title:String,
+    // 左侧按钮文字
+    leftText:String,
+    // 右侧按钮文字
+    rightText:String,
+    // 是否显示左侧箭头，默认显示
+    leftArrow:{
+      type:Boolean,
+      default:true
+    },
+    // 是否显示下边框，默认显示
+    border:{
+      type:Boolean,
+      default:true
+    },
+    // 是否固定在顶部，默认固定
+    fixed:{
+      type:Boolean,
+      default:true
+    },
+    // 是否固定在顶部后插入一个同等高度的元素，默认添加
+    placeholder:{
+      type:Boolean,
+      default:true
+    },
+    // 层级
+    zIndex:{
+      type:Number,
+      default:9
+    },
+    // 点击返回的时候后退几步，默认后退一步
+    backStep:{
+      type:Number,
+      default:1
+    },
+    // 左侧按钮点击事件
+    clickLeft:Function,
+    // 右侧按钮点击事件
+    clickRight:{
+      type:Function,
+      default:()=>{}
+    },
+
+    // 当通过app返回时候到达页面点击退出的路由
+    backRoute:{
+      type: Array,
+      default: () => []
+    }
+  },
+  data(){
+    return{
+      // app点击返回到达页面再次点击退出app的路由
+      initBackRoute:['/', '/lwHome', '/lwLogin', '/lwMy', '/lwInit']
+    }
+  },
+  mounted() {
+    window.appCallBack = this.appCallBack
+  },
+  methods:{
+    // 返回按钮点击
+    goBack(){
+      if (typeof this.clickLeft==='function'){
+        this.clickLeft()
+      }else {
+        history.go(-this.backStep)
+      }
+    },
+
+    // 提供给app的返回按钮
+    appCallBack(){
+      let path = this.$route.path
+
+      if(this.$lwAppBack.getExitRoute().includes(path)){
+        return false
+      }else{
+        this.goBack()
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+
+@import "../../../assets/css/var.less";
+
+.lw-nav-bar{
+
+  /deep/.van-nav-bar{
+    background: @navBarBackgroundColor;
+  }
+
+  /deep/.van-icon{
+    color: @baseColor;
+  }
+  /deep/.van-nav-bar__title{
+    font-weight: bold;
+  }
+}
+
+
+</style>

package/src/components/ui/NavBar//351/241/266/351/203/250/345/257/274/350/210/252/346/240/217.md

@@ -0,0 +1 @@
+# 顶部导航栏 [查看文档](https://www.yuque.com/docs/share/2064f6e2-1eef-4fae-a0d8-8d3c64635e1f)

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

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

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

@@ -0,0 +1,75 @@
+<!--
+  @name: 空状态
+  @description: -
+  @author 张文
+  @date: 2022-01-20
+-->
+<template>
+  <div
+    :class="[
+      'lw-global-flex-center',
+      animation ? 'lw-global-animation-out' : '',
+      'lw-none-data'
+    ]">
+
+    <slot name="image">
+      <img class="lw-not-data-img" :src="src" :alt="content">
+    </slot>
+
+    <slot name="content">
+      <div
+        class="lw-none-data-content"
+      >{{ content || $lwLanguage.get('wms_project.pda.component.notData.null', '空空如也') + '...' }}</div>
+    </slot>
+
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwNotData",
+  props:{
+    // 提示文字信息
+    content: String,
+    // 图片路径
+    src:{
+      type:String,
+      default: require('../../../assets/img/lwNotData/noneData.png')
+    },
+    // 是否需要进入动画
+    animation:{
+      type:Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-none-data{
+  width: 100%;
+  flex-direction: column;
+  padding: 20px 0;
+
+  .lw-not-data-img{
+    width: 35%;
+    max-width: 256px;
+    max-height: 270px;
+  }
+
+  .lw-none-data-content{
+    margin-bottom: 10px;
+    color: @baseColor;
+  }
+}
+
+</style>

package/src/components/ui/NotData//347/251/272/346/225/260/346/215/256/347/212/266/346/200/201.md

@@ -0,0 +1 @@
+# 空状态 [查看文档](https://www.yuque.com/docs/share/533bc22c-9321-4e3e-970b-817e086f478d)

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

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