@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,124 @@
+<!--
+  @name: 单选弹框，字典单选
+  @description: -
+  @author 张文
+  @date: 2022-01-21
+-->
+<template>
+  <lw-popup
+    v-model="show"
+    :title="title"
+    height="auto"
+    :off-btn-text="$lwLanguage.get('wms_project.pda.common.cancel', '取消')"
+  >
+    <van-picker
+      ref="picker"
+      v-if="selectData.length"
+      :columns="selectData"
+      :value-key="labelKey"
+      :visible-item-count="3"
+      @confirm="pickerConfirm"
+    />
+    <lw-not-data v-else />
+
+    <template #button>
+      <lw-button
+        v-if="selectData.length"
+        @click="confirm"
+      >{{ $lwLanguage.get('wms_project.pda.common.confirm', '确定') }}</lw-button>
+    </template>
+  </lw-popup>
+</template>
+
+<script>
+
+export default {
+  name: "lwPopupRadio",
+  props:{
+    // 弹框显示
+    value:{
+      type:Boolean,
+      default:false
+    },
+    // 标题
+    title:String,
+    // 提供选择的值
+    columns:Array,
+    // 字典键值
+    dictKey:String,
+    // 显示的键值名
+    labelKey:{
+      type:String,
+      default: 'label'
+    },
+    // 取值的键值名
+    valueKey:{
+      type:String,
+      default: 'value'
+    },
+  },
+  computed:{
+    show:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    }
+  },
+  watch:{
+    show: {
+      handler(n) {
+        if (!n) return
+
+        if (Array.isArray(this.columns)) {
+          this.selectData = this.columns
+        } else {
+          const list = this.$lwDict.get(this.dictKey)
+
+          if (!list || !list.length){
+            console.error('获取字典数据失败，请检查字典数据是否正确写入')
+            this.selectData = []
+            return
+          }
+          this.selectData = list
+        }
+
+      }
+    }
+  },
+  data() {
+    return {
+      // 提供选择的数据
+      selectData:[],
+    }
+  },
+  methods: {
+
+    // 确定按钮点击
+    confirm(){
+      this.$refs.picker.confirm()
+    },
+    // 滑块确认
+    pickerConfirm(item){
+
+      this.$emit('confirm', item)
+
+      this.show=false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-radio-not-data{
+  width: 100%;
+  height: 100%;
+  color: #ccc;
+}
+
+</style>

package/src/components/ui/PopupRadio//345/215/225/351/200/211/345/274/271/346/241/206.md

@@ -0,0 +1 @@
+# 单选弹框 [查看文档](https://www.yuque.com/docs/share/b5ea9e72-8790-4378-a135-de3dbb2ad863)

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

@@ -0,0 +1,11 @@
+/*
+* 底部导航标签栏
+* @author: 张文
+* @date  2022-03-01
+* */
+
+import lwTabBar from "./index.vue";
+
+lwTabBar.install = Vue => Vue.component(lwTabBar.name, lwTabBar)
+
+export default lwTabBar

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

@@ -0,0 +1,132 @@
+<!--
+  底部导航标签栏
+  @author: 张文
+  @date: 2022-03-01
+-->
+<template>
+  <div class="lw-tab-bar-box">
+    <van-tabbar
+      v-model="active"
+      :placeholder="true"
+      @change="doTabChange"
+    >
+      <van-tabbar-item
+        v-for="(i,k) in tabBar.menu"
+        :key="k"
+        :badge="maxBadge(i)"
+        :name="i.name"
+      >
+        <span>{{ i.title }}</span>
+        <template #icon="props">
+          <img :style="{height:i.size || tabBar.size}" :src="props.active ? i.active : i.inactive" alt="" />
+        </template>
+      </van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "lwTabBar",
+  props:{
+    // 渲染的数据
+    tabBarMenu: Object,
+    // 显示角标
+    badge:{
+      type: Array,
+      default: () => []
+    }
+  },
+  /*computed:{
+    tabBar(){
+      return this.updateTabBar()
+    }
+  },*/
+  watch:{
+    badge(){
+      this.updateTabBar()
+    },
+    tabBarMenu(){
+      this.updateTabBar()
+    }
+  },
+  data() {
+    return {
+      active: this.$route.name,
+      tabBar:{}
+    }
+  },
+  mounted() {
+    this.updateTabBar()
+  },
+  methods: {
+    // 底部导航栏图标被点击
+    doTabChange (e) {
+      this.$router.replace({ name: e })
+    },
+
+    // 手动触发更新
+    updateTabBar(){
+      this.tabBar = {}
+      if (Object.keys(this.tabBarMenu || {}).length){
+        this.tabBar = this.tabBarMenu
+      }else {
+        this.tabBar = this.$lwTabBar.get()
+      }
+    },
+
+    // 计算角标数据
+    badgeNum(i){
+      if (!this.badge.length) return i.badge
+
+      const list = this.badge.filter(item=>{
+        if (item.name && item.name === i.name){
+          return item
+        }
+      })
+
+      if (!list.length) return i.badge
+
+      return list[0].badge
+    },
+
+    // 计算角标是否超过最大值
+    maxBadge(i){
+      const badge = this.badgeNum(i)
+
+      const num = Number(badge)
+      const max = Number(this.tabBar.maxBadge || 9)
+
+      if (isNaN(num) || isNaN(max)){
+        return badge
+      }
+
+      if (max === 0) return num
+
+      if (max < num){
+        return max + '+'
+      }
+
+      return num
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/*
+* 顶部导航栏
+*/
+
+.lw-tab-bar-box{
+
+  /deep/.van-hairline--top-bottom{
+
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3);
+  }
+}
+
+</style>

package/src/components/ui/TabBar//345/272/225/351/203/250/345/257/274/350/210/252/346/240/217.md

@@ -0,0 +1 @@
+# 底部导航栏 [查看文档](https://www.yuque.com/docs/share/ceba6163-b6ee-4a51-9553-67b24c84727c)

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

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

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

@@ -0,0 +1,213 @@
+<!--
+  @name: 表格
+  @description: -
+  @author 张文
+  @date: 2022-01-24
+-->
+<template>
+  <div class="lw-table-box">
+    <!-- 表头 -->
+    <div class="lw-global-flex-center lw-table-top">
+      <template v-for="(item,index) in title">
+
+        <!-- 存在复杂表头 -->
+        <div
+          v-if="item.children && item.children.length"
+          :style="item.width?{flexBasis:item.width+'px',flexGrow:0,overflow:'hidden'}:{}"
+          style="padding: 0"
+          class="lw-table-title"
+          :key="index"
+        >
+
+          <!-- 复杂表头的一级表头 -->
+          <div
+            :style="{
+              flexBasis:item.width+'px' || '',
+              flexGrow:item.width?0:'1',
+              background:item.background || '',
+              color:item.color || '',
+              borderRight:'none'
+            }"
+            class="lw-global-flex-center lw-table-title"
+          >{{item.title}}</div>
+
+          <!-- 复杂表头的二级表头 -->
+          <div style="width:100%" class="lw-global-flex-center">
+            <div
+              v-for="(i,k) in item.children"
+              :key="k"
+              :style="{
+                flexBasis:i.width+'px' || '',
+                flexGrow:i.width?0:'1',
+                background:item.background || '',
+                color:item.color || '',
+                borderBottom:'none'
+              }"
+              class="lw-table-title"
+            >{{i.title}}</div>
+          </div>
+        </div>
+
+        <!-- 非复杂表头 -->
+        <div
+          v-else
+          :key="index"
+          :style="{
+            flexBasis:item.width+'px' || '',
+            flexGrow:item.width?0:'',
+            background:item.background || '',
+            color:item.color || ''
+          }"
+          class="lw-global-flex-center lw-table-title lw-table-height-auto"
+        >{{item.title}}</div>
+
+      </template>
+    </div>
+
+    <!-- 数据 -->
+    <div class="lw-table-data-box">
+      <div
+        v-for="(col,key) in data"
+        :key="key"
+        class="lw-global-flex-center lw-global-click-style lw-table-data-body"
+        @click="colClick(col)"
+      >
+        <template v-for="(item,index) in title">
+
+          <div
+            class="lw-global-flex-center lw-table-child-title"
+            v-if="item.children && item.children.length"
+            :style="item.width?{flexBasis:item.width+'px',flexGrow:0,overflow:'hidden'}:{}"
+            :key="index"
+          >
+            <div
+              v-for="(i,k) in item.children"
+              :key="k"
+              :style="{
+                color:i.color || '',
+                flexBasis:i.width+'px' || '',
+                flexGrow:i.width?0:'1'
+              }"
+              class="lw-global-flex-center lw-table-child-title"
+            >{{ colDataFormat(col[i.props]) }}</div>
+          </div>
+
+
+          <div
+            v-else
+            :key="index"
+            :style="item.width?
+              {flexBasis:item.width+'px',flexGrow:0,color:item.color}:
+              {color:item.color}
+            "
+            class="lw-global-flex-center lw-table-child-title"
+          >{{ colDataFormat(col[item.props]) }}</div>
+
+        </template>
+      </div>
+
+      <!-- 空数据状态 -->
+      <lw-not-data v-if="data.length===0"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwTable",
+  props:{
+    // 表头
+    title:Array,
+
+    // 数据
+    data:Array
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 某一列被点击
+    colClick(col){
+      this.$emit('colClick', col)
+    },
+
+    // 格式化数据
+    colDataFormat(data){
+      if (data || data === 0){
+        return data
+      }
+      return '-'
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-table-box{
+  border: solid 1px @borderColor;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.lw-table-top{
+  align-items: stretch;
+}
+
+
+.lw-table-title{
+  padding: 4px 0 ;
+  background-color: @tableTitleBackgroundColor;
+  color: @tableTitleColor;
+  border-bottom: solid 1px @borderColor;
+  border-right: solid 1px @borderColor;
+  flex: 1;
+  box-sizing: border-box;
+
+  &:last-child{
+    border-right: none;
+  }
+}
+
+.lw-table-child-title{
+  color: @tableBodyColor;
+  flex: 1;
+  border-right: solid 1px @borderColor;
+  height: 30px;
+  overflow: auto;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.lw-table-height-auto{
+  height: auto;
+}
+
+.lw-table-data-body{
+  border-bottom: solid 1px @borderColor;
+
+  &:last-child{
+    border-bottom: none;
+  }
+}
+
+.lw-table-none-data{
+  width: 100%;
+  height: 60px;
+  background: @tableBodyBackgroundColor;
+  color: @tableBodyColor;
+}
+
+.lw-table-data-box{
+  overflow: hidden;
+  transition: all .3s;
+}
+
+</style>

package/src/components/ui/Table//350/241/250/346/240/274.md

@@ -0,0 +1 @@
+# 表格 [查看文档](https://www.yuque.com/docs/share/29d012e7-d5db-412a-bd10-01c30a373765)

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

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

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

@@ -0,0 +1,142 @@
+<!--
+  @name: tag标签
+  @description: -
+  @author 张文
+  @date: 2022-01-20
+-->
+<template>
+  <div class="lw-tag-box">
+    <van-tag
+      :type="type"
+      :size="size"
+      :color="color"
+      :plain="plain"
+      :round="round"
+      :mark="mark"
+      :text-color="textColor"
+      :closeable="closeable"
+      @click="ev=>$emit('click',ev)"
+      @close="close"
+    >
+      <slot/>
+    </van-tag>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwTag",
+  props:{
+    // 类型
+    type:{
+      type:String,
+      default:'primary'
+    },
+    // 大小
+    size:String,
+    // 颜色
+    color:String,
+    // 是否空心
+    plain:{
+      type:Boolean,
+      default: false
+    },
+    // 是否圆角
+    round:{
+      type:Boolean,
+      default: false
+    },
+    // 是否为标记样式
+    mark:{
+      type:Boolean,
+      default: false
+    },
+    // 文字颜色
+    textColor:String,
+    // 是否可关闭
+    closeable:{
+      type:Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    close(){
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-tag-box{
+  display: inline-block;
+  margin: 2px 4px;
+
+
+  /deep/.van-tag{
+    padding: 2px 8px;
+    border-radius: 4px;
+  }
+
+  /deep/.van-tag--round {
+    border-radius: 999px;
+  }
+
+  /deep/.van-tag--mark {
+    border-radius: 0 999px 999px 0;
+  }
+
+  /deep/.van-tag--primary{
+    background-color: @tagPrimaryColor;
+    &.van-tag--plain{
+      color: @tagPrimaryColor;
+    }
+  }
+
+  /deep/.van-tag--success {
+    background-color: @tagSuccessColor;
+    &.van-tag--plain{
+      color: @tagSuccessColor;
+    }
+  }
+
+  /deep/.van-tag--danger {
+    background-color: @tagDangerColor;
+    &.van-tag--plain{
+      color: @tagDangerColor;
+    }
+  }
+
+  /deep/.van-tag--warning {
+    background-color: @tagWarningColor;
+    &.van-tag--plain{
+      color: @tagWarningColor;
+    }
+  }
+
+  /deep/.van-tag--large{
+    padding: 6px 12px;
+  }
+
+  /deep/.van-tag--medium{
+    padding: 4px 10px;
+  }
+
+  /deep/.van-tag__close {
+    margin-left: 8px;
+  }
+
+  /deep/.van-tag--plain{
+    background-color: #fff;
+  }
+}
+
+</style>

package/src/components/ui/Tag//346/240/207/347/255/276.md

@@ -0,0 +1 @@
+# 标签 [查看文档](https://www.yuque.com/docs/share/c31e5136-3203-43a6-8c24-571b908c8198)

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

@@ -0,0 +1,11 @@
+/*
+* 标题-值显示组件
+* @author: 张文
+* @date  2022-06-16
+* */
+
+import lwTitleValueCell from "./index.vue";
+
+lwTitleValueCell.install = Vue => Vue.component(lwTitleValueCell.name, lwTitleValueCell)
+
+export default lwTitleValueCell