@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,186 @@
+<!--
+  @name: 分页
+  @description: -
+  @author 张文
+  @date: 2022-01-20
+-->
+<template>
+  <div v-if="show" class="lw-global-flex-center lw-page-num-box">
+    <van-pagination
+      v-model="pageNum"
+      :total-items="pageTotal"
+      :items-per-page="pageSize"
+      :show-page-size="showPageSize"
+      :mode="mode"
+      :force-ellipses="forceEllipses"
+      :prev-text="prevText"
+      :next-text="nextText"
+      :page-count="pageCount"
+      @change="pageChange"
+    >
+      <template #prev-text>
+        <slot name="prev-text">
+          <van-icon v-if="!prevText" name="arrow-left" />
+        </slot>
+      </template>
+      <template #next-text>
+        <slot name="next-text">
+          <van-icon v-if="!nextText" name="arrow" />
+        </slot>
+      </template>
+    </van-pagination>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwPages",
+  props:{
+    // 当前页码
+    value: {
+      type:Number,
+      default:1
+    },
+    // 数据总条数
+    pageTotal: {
+      type:Number,
+      default: 0
+    },
+    // 每页条数
+    pageSize: {
+      type:Number,
+      default:10
+    },
+    // 底部显示的分页数量
+    showPageSize: {
+      type:Number,
+      default:4
+    },
+    //显示模式
+    mode:{
+      type:String,
+      default: 'multi'
+    },
+    // 上一页的文字
+    prevText:String,
+    // 下一页的文字
+    nextText:String,
+    // 总页数
+    pageCount:[String,Number],
+    // 是否显示省略号
+    forceEllipses:{
+      type:Boolean,
+      default:true
+    },
+    // 点击分页切换时，是否滚动到页面顶部，默认滚动到顶部
+    scrollTop:{
+      type:Boolean,
+      default:true
+    },
+    // 滚动到顶部的元素
+    scrollElement:{
+      type:String,
+      default:'#app'
+    },
+
+    // 当内容小于一页时是否显示分页组件
+    hide:{
+      type: Boolean,
+      default: true
+    }
+  },
+  computed:{
+    pageNum:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input',v)
+      }
+    },
+    show(){
+
+      if (this.pageCount){
+        return this.pageCount > 1  || !this.hide
+      }
+
+      return this.pageTotal > this.pageSize  || !this.hide
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 页码发生改变
+    pageChange(){
+      this.$emit('change',this.pageNum)
+
+      if (this.scrollTop){
+        const dom = document.querySelector(this.scrollElement)
+        dom && dom.scrollIntoView({
+          behavior: "smooth",
+          block:'start',
+        });
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+
+
+.lw-page-num-box{
+  margin: 20px 0 10px;
+
+  /deep/.van-pagination__item{
+    color: @baseColor;
+    background: #fff;
+    height: 30px;
+    min-width: 30px;
+    border-radius: 6px;
+    border: solid 1px @baseColor;
+    flex-basis: 0;
+
+    &+.van-pagination__item{
+      margin-left: 10px;
+    }
+
+    &::after{
+      border-width: 0;
+    }
+
+    &:active{
+      background: #c8c9cc;
+    }
+
+
+  }
+
+  /deep/.van-pagination__item--disabled{
+    color: #646566;
+    background-color: #e5e7eb;
+    cursor: not-allowed;
+    opacity: 0.5;
+    border-color: #ccc;
+  }
+
+  /deep/.van-pagination__item--active{
+    background-color: @baseColor;
+    color: #fff;
+    font-weight: bold;
+  }
+
+  /deep/.van-pagination__page-desc{
+    height: 30px;
+    border-bottom: solid 1px @baseColor;
+    box-sizing: border-box;
+    margin: 0 10px;
+  }
+}
+
+</style>

package/src/components/ui/Pages//345/210/206/351/241/265/351/241/265/347/240/201.md

@@ -0,0 +1 @@
+# 分页 [查看文档](https://www.yuque.com/docs/share/1084a885-477c-4fce-ab4b-33e76516c07b)

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

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

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

@@ -0,0 +1,245 @@
+<!--
+  @name: 底部弹出层
+  @description: -
+  @author 张文
+  @date: 2022-01-21
+-->
+<template>
+  <van-popup
+    class="lw-global-flex-between lw-bottom-popup-box"
+    v-model="showPopup"
+    :get-container="getContainer"
+    :round="round"
+    :close-on-click-overlay="(allowOff && closeOnClickOverlay)"
+    :position="position"
+    :style="{ height: height,width:width }"
+    @click="ev=>$emit('click', ev)"
+    @click-overlay="$emit('clickOverlay')"
+    @open="$emit('open')"
+    @opened="$emit('opened')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <div class="lw-global-flex-center lw-bottom-popup-title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+
+    <div
+      class="lw-bottom-content"
+      :style="{ background: background }"
+    >
+
+      <div style="height: 10px" :id="anchor"><!-- 滚动到页面顶部的锚点 --></div>
+      <slot></slot>
+    </div>
+
+
+    <div
+      v-if="showBottomBar"
+      class="lw-global-flex-around lw-bottom-popup-btn-box"
+    >
+      <slot name="bottomInfo"></slot>
+      <lw-button
+        v-if="allowOff && showOffBtn"
+        :type="btnType"
+        :mini="btnMini"
+        :round="btnRound"
+        :color="btnColor"
+        :plain="btnPlain"
+        @click="offBtnClick"
+      >{{ offBtnText }}</lw-button>
+      <slot name="button"></slot>
+    </div>
+
+  </van-popup>
+</template>
+
+<script>
+
+export default {
+  name: "lwPopup",
+  props:{
+    // 显示隐藏
+    value:{
+      type:Boolean,
+      default:false
+    },
+    // 挂载到指定节点
+    getContainer:{
+      type:String,
+      default:'body'
+    },
+    // 弹出位置
+    position:{
+      type:String,
+      default:'bottom'
+    },
+    // 是否显示圆角
+    round:{
+      type:Boolean,
+      default:true
+    },
+    // 是否点击遮罩层后关闭弹窗
+    closeOnClickOverlay:{
+      type:Boolean,
+      default:true
+    },
+
+    // 高度
+    height:{
+      type:[Number, String],
+      default: 'auto'
+    },
+    // 宽度
+    width:{
+      type:[Number, String],
+      default: '100%'
+    },
+    // 标题
+    title:String,
+    // 是否显示关闭按钮
+    showOffBtn:{
+      type:Boolean,
+      default:true
+    },
+    // 关闭按钮的文字
+    offBtnText:{
+      type:String,
+      default:'关闭'
+    },
+    // 关闭按钮点击后触发的方法
+    offBtnFn:Function,
+    // 关闭按钮是否mini
+    btnMini:{
+      type:Boolean,
+      default:false
+    },
+    // 关闭按钮是否圆角
+    btnRound:{
+      type:Boolean,
+      default:false
+    },
+    // 关闭按钮颜色
+    btnColor:String,
+    // 是否是朴素按钮
+    btnPlain:{
+      type:Boolean,
+      default:true
+    },
+    // 关闭按钮类型
+    btnType:{
+      type:String,
+      default:'last'
+    },
+    // 允许关闭，为false时将不显示关闭按钮且不允许点击遮罩层关闭弹框
+    allowOff:{
+      type:Boolean,
+      default:true
+    },
+    // 每次打开是否自动滚动到内容顶部
+    autoTop:{
+      type: Boolean,
+      default: true
+    },
+
+    // 显示区主题背景颜色
+    background: String,
+
+
+    // 是否显示底部操作栏
+    showBottomBar:{
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      anchor:''
+    }
+  },
+  watch:{
+    showPopup:{
+      handler(n){
+        if(n && this.autoTop){
+          this.anchor = new Date().getTime().toString()
+          this.$nextTick(()=>{
+            document.getElementById(this.anchor).scrollIntoView({
+              behavior: "instant",
+              block:'start',
+            })
+          })
+        }
+      }
+    }
+  },
+  computed:{
+    showPopup:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    }
+  },
+  methods: {
+    // 关闭按钮点击
+    offBtnClick(){
+      if (typeof this.offBtnFn === 'function'){
+        this.offBtnFn()
+      }else {
+        this.showPopup = false
+        this.$emit('clickCloseBtn')
+      }
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-bottom-popup-box{
+  flex-direction: column;
+  max-height: 90%;
+}
+
+
+.lw-bottom-popup-title{
+  text-align: center;
+  height: @bottomPopupTitleHeight;
+  width: 100%;
+  font-weight: bold;
+  border-bottom: solid 1px @borderColor;
+  overflow: hidden;
+  box-shadow: 0 2px 4px 1px @borderColor;
+  //color: @baseColor;
+  flex-shrink: 0;
+}
+
+.lw-bottom-content{
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 10px 10px;
+  overflow: auto;
+}
+
+.lw-bottom-popup-btn-box{
+  height: 50px;
+  width: 100%;
+  border-top: solid 1px @borderColor;
+  overflow: hidden;
+  box-shadow: 0 -2px 4px 1px @borderColor;
+  padding: 10px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+
+  /deep/*{
+    flex: 1;
+  }
+}
+
+</style>

package/src/components/ui/Popup//345/274/271/345/207/272/345/261/202.md

@@ -0,0 +1 @@
+# 弹出层 [查看文档](https://www.yuque.com/docs/share/631f96b9-a483-4a9e-ba1b-da8f120d9b91)

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

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

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

@@ -0,0 +1,207 @@
+<!--
+  @name: 弹出复选框
+  @description: -
+  @author 张文
+  @date: 2022-01-21
+  TODO 超过最大可选量后的提示待优化
+-->
+<template>
+  <lw-popup
+    v-model="show"
+    :title="title"
+    :off-btn-text="$lwLanguage.get('wms_project.pda.common.cancel', '取消')"
+  >
+
+
+    <div class="lw-popup-checkbox-body">
+      <!-- 搜索 -->
+      <lw-input
+        v-model="search"
+        :placeholder="$lwLanguage.get('wms_project.pda.component.popupCheckbox.searchKeyword', '搜索关键字')"
+        @confirm="searchFn"
+      >
+        <template #button>
+          <lw-button
+            mini
+            round
+            plain
+            type="last"
+            @click="clearInp"
+          >{{ $lwLanguage.get('wms_project.pda.common.clear', '重置') }}</lw-button>
+          <lw-button
+            mini
+            round
+            @click="searchFn"
+          >{{ $lwLanguage.get('wms_project.pda.common.search', '搜索') }}</lw-button>
+        </template>
+      </lw-input>
+
+      <div v-if="selectDataList.length">
+
+        <van-checkbox-group v-model="result" :max="max">
+          <van-checkbox
+            v-for="i in selectDataList"
+            :key="i[valueKey]"
+            :name="i[valueKey]"
+          >{{ i[labelKey] }}</van-checkbox>
+        </van-checkbox-group>
+      </div>
+
+      <div
+        v-else style="margin-top: 10px"
+        class="lw-global-flex-center lw-radio-not-data"
+      >{{ $lwLanguage.get('wms_project.pda.component.popupCheckbox.notData', '没有可供选择的数据') }}</div>
+    </div>
+
+    <template #button>
+      <lw-button
+        v-if="selectDataInfo.length"
+        @click="confirm"
+      >{{ $lwLanguage.get('wms_project.pda.common.confirm', '确定') }}</lw-button>
+    </template>
+  </lw-popup>
+</template>
+
+<script>
+
+export default {
+  name: "lwPopupCheckbox",
+  props:{
+    // 弹框显示
+    value:{
+      type:Boolean,
+      default:false
+    },
+    // 标题
+    title:String,
+    // 提供选择的数据
+    columns:Array,
+    // 字典键值
+    dictKey:String,
+    // 显示的键值名
+    labelKey:{
+      type:String,
+      default: 'label'
+    },
+    // 取值的键值名
+    valueKey:{
+      type:String,
+      default: 'value'
+    },
+    // 最大可选数
+    max:{
+      type:Number,
+      default:0
+    },
+    // 已选中的值
+    selected:{
+      type:Array,
+      default:()=>[]
+    }
+  },
+  computed:{
+    show:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    }
+  },
+  watch:{
+    show: {
+      handler(n) {
+        if (!n) return
+
+        this.search = ''
+        this.result = (this.selected && this.selected.map(i=>i)) || []
+
+        if (Array.isArray(this.columns)) {
+          this.selectDataInfo = this.columns
+        } else {
+          const list = this.$lwDict.get(this.dictKey)
+
+          if (!list || !list.length){
+            console.error('获取字典数据失败，请检查字典数据是否正确写入')
+            this.selectDataInfo = []
+            this.selectDataList = []
+            return
+          }
+          this.selectDataInfo = list
+        }
+
+        this.searchFn()
+      }
+    }
+  },
+  data() {
+    return {
+      // 提供选择的初始数据
+      selectDataInfo:[],
+      // 有可供选择的数据
+      selectDataList:[],
+      // 选中的值
+      result:[],
+
+      // 搜索输入框
+      search:''
+    }
+  },
+  methods: {
+
+    // 重置
+    clearInp(){
+      this.search = ''
+      this.searchFn()
+    },
+
+    // 搜索
+    searchFn(){
+      this.selectDataList = this.selectDataInfo.filter(item=>item[this.labelKey].includes(this.search))
+    },
+
+    // 弹框确认
+    confirm(){
+      this.show=false
+
+      const resultObj = this.result.map(item=>{
+        const obj = this.selectDataInfo.filter(inItem=>{
+          return inItem[this.valueKey] === item
+        })
+        if (obj.length){
+          return obj[0]
+        }
+      })
+
+      const resultLabel = resultObj.map(item=>item[this.labelKey]).join(',')
+
+      this.$emit('confirm', this.result.join(','), resultLabel, resultObj )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-popup-checkbox-body{
+
+
+  .lw-global-row{
+    padding: 5px 0;
+  }
+
+  /deep/.van-checkbox{
+    padding: 5px;
+    font-size: 14px;
+
+    &+.van-checkbox{
+      //margin-top: 5px;
+      border-top: solid 1px @borderColor;
+    }
+  }
+}
+
+</style>

package/src/components/ui/PopupCheckbox//345/244/232/351/200/211/345/274/271/346/241/206.md

@@ -0,0 +1 @@
+# 多选弹框 [查看文档](https://www.yuque.com/docs/share/a906a9ec-2c35-4602-b33c-284850c817ad)

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

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