@logwire/logwire-wms-pda-ui 1.1.15

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

@@ -0,0 +1,183 @@
+<!--
+  @name: 按钮
+  @description: -
+  @author 张文
+  @date: 2022-01-12
+-->
+<template>
+  <button
+    ref="lwButton"
+    :type="nativeType"
+    :class="[
+      'lw-button',
+      'lw-global-click-style',
+      `lw-button-${type}`,
+      mini?'lw-mini-button':'',
+      round?'lw-button-round':'',
+      disabled?'lw-button-disabled':'',
+      plain?`lw-button-plain-${type}`:'',
+      autoBlurClass
+    ]"
+    :style="[
+      block?{display:'block',width:'100%',marginLeft:'0'}:{},
+      color?{background:color,border:'none'}:{}
+    ]"
+    :disabled="disabled"
+    @click="click"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+
+export default {
+  name: "lwButton",
+  props: {
+    // 按钮类型 main、normal、last
+    type: {
+      type: String,
+      default: 'main'
+    },
+    // 是否是mini按钮
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    // 是否是圆角按钮
+    round: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否点击后立刻失焦
+    autoBlur: {
+      type: Boolean,
+      default: true
+    },
+    // 是否是块级元素
+    block: {
+      type: Boolean,
+      default: false
+    },
+    // 是否是朴素按钮
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    // 自定义按钮颜色
+    color: String,
+    // 原生的type属性
+    nativeType: String
+  },
+  data() {
+    return {
+      autoBlurClass:''
+    }
+  },
+  methods: {
+    // 按钮被点击
+    click(ev) {
+      if (this.autoBlur) {
+        this.$refs.lwButton.blur()
+
+        // 用于解决自动失焦后没有点击效果的问题
+        this.autoBlurClass = 'lw-button-auto-blur-action'
+        setTimeout(()=>{
+          this.autoBlurClass = ''
+        },200)
+      }
+      this.$emit('click', ev)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+@import "../../../assets/css/var.less";
+
+// 常规按钮
+.lw-button {
+  border-radius: @buttonBorderRadius;
+  font-weight: 400;
+  padding: 0 10px;
+  border: none;
+  transition: opacity 0.2s;
+  position: relative;
+  min-height: @buttonHeight;
+  font-size: @buttonFontSize;
+
+  &+.lw-button{
+    margin-left: 5px;
+  }
+}
+
+// 自动失焦后的点击动画
+.lw-button-auto-blur-action:before{
+  opacity: 0.1;
+}
+
+// mini按钮
+.lw-mini-button{
+  min-height: @miniButtonHeight;
+  font-size: @miniButtonFontSize;
+}
+
+// 圆角样式
+.lw-button-round {
+  border-radius: 999px;
+}
+
+// 主要按钮样式
+.lw-button-main {
+  background: @mainButtonBackgroundColor;
+  color: @mainButtonFontColor;
+  border: 1px solid @mainButtonBackgroundColor;
+}
+
+// 主要按钮朴素样式
+.lw-button-plain-main {
+  background: @plainButtonBackgroundColor;
+  color: @baseColor;
+  border: 1px solid @baseColor;
+}
+
+// 正常按钮样式
+.lw-button-normal {
+  background: @normalButtonBackgroundColor;
+  color: @normalButtonFontColor;
+  border: 1px solid @normalButtonBackgroundColor;
+}
+
+// 正常按钮朴素样式
+.lw-button-plain-normal {
+  background: @plainButtonBackgroundColor;
+  color: @normalButtonBackgroundColor;
+}
+
+// 次要按钮样式
+.lw-button-last {
+  background: @lastButtonBackgroundColor;
+  color: @lastButtonFontColor;
+  border: 1px solid @lastButtonBackgroundColor;
+}
+
+// 次要按钮朴素样式
+.lw-button-plain-last {
+  background: @plainButtonBackgroundColor;
+  color: @lastButtonBackgroundColor;
+}
+
+// 禁用
+.lw-button-disabled{
+  cursor: no-drop;
+  opacity: 0.5;
+}
+
+
+</style>

package/src/components/ui/Button//346/214/211/351/222/256.md

@@ -0,0 +1 @@
+# 按钮[查看文档](https://www.yuque.com/docs/share/89032e22-82f9-4b40-b905-01f7a1deb410)

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

@@ -0,0 +1,11 @@
+/*
+* 车牌号输入组件
+* @author: 张文
+* @date  2022-06-06
+* */
+
+import lwCarPlate from "./index.vue";
+
+lwCarPlate.install = Vue => Vue.component(lwCarPlate.name, lwCarPlate)
+
+export default lwCarPlate

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

@@ -0,0 +1,378 @@
+<!--
+  车牌号输入组件
+  @author: 张文
+  @date: 2022-06-06
+-->
+<template>
+  <div>
+    <lw-cell
+      :style="{padding: num ? '1px' : ''}"
+      :title="titleText"
+      v-model="num"
+      :is-edit="isEdit"
+      :is-link="isEdit"
+      @click="openPopup"
+    >
+
+      <template #value>
+
+        <div
+          style="justify-content: flex-end"
+          class="lw-global-flex-between"
+        >
+
+          <!-- 车牌 -->
+          <div
+            v-if="num"
+            :class="[
+                'lw-car-plate',
+                num.length===8 ? 'lw-car-plate-new' : '',
+                num[6]==='挂' ? 'lw-car-plate-big' : ''
+              ]"
+          >{{ carPlate }}</div>
+
+        </div>
+
+      </template>
+
+    </lw-cell>
+
+    <!-- 弹出框 -->
+    <lw-popup
+      :title="titleText"
+      v-model="showPopup"
+      height="330px"
+    >
+      <!-- 车牌类型 -->
+      <div style="font-size: 14px;">
+        <van-radio-group
+          v-model="carType"
+          direction="horizontal"
+          @change="carTypeChange"
+        >
+          <van-radio name="old">普通车牌</van-radio>
+          <van-radio
+            :disabled="carPlateList[6]==='挂'"
+            name="new"
+          >新能源车牌</van-radio>
+        </van-radio-group>
+      </div>
+
+      <!-- 车牌显示部分 -->
+      <div class="lw-global-flex-around lw-car-plate-box">
+
+        <!-- 省份和市区 -->
+        <div
+          v-for="i in 2"
+          :key="i-1"
+          :class="[
+            'lw-car-plate-num-item',
+            carPlateItemIndex === (i-1) ? 'lw-car-plat-num-item-action' : ''
+          ]"
+          @click="carPlateItemClick(i-1)"
+        >{{ carPlateList[i - 1] || '' }}
+        </div>
+
+        <!-- 分割点 -->
+        <div class="lw-car-plate-num-dot"></div>
+
+        <!-- 车牌号 -->
+        <div
+          v-for="i in 5"
+          :key="i+1"
+          :class="[
+            'lw-car-plate-num-item',
+            carPlateItemIndex === (i+1) ? 'lw-car-plat-num-item-action' : ''
+          ]"
+          @click="carPlateItemClick(i+1)"
+        >{{ carPlateList[i + 1] || '' }}
+        </div>
+
+        <!-- 新能源 -->
+        <div
+          v-if="carType==='new'"
+          :class="[
+            'lw-car-plate-num-item',
+            carPlateItemIndex === 7 ? 'lw-car-plat-num-item-action' : ''
+          ]"
+          @click="carPlateItemClick(7)"
+        >{{ carPlateList[7] || '' }}
+        </div>
+      </div>
+
+      <!-- 省份输入键盘 -->
+      <div
+        v-if="carPlateItemIndex===0"
+        class="lw-global-flex-between lw-global-animation-rotate lw-car-plate-keyboard-box"
+      >
+        <div
+          class="lw-car-plate-keyboard"
+          v-for="(i,k) in province"
+          :key="k"
+          @click="inputClick(i)"
+        >{{ i }}
+        </div>
+      </div>
+
+      <!-- 数字输入键盘 -->
+      <div
+        v-if="carPlateItemIndex > 1"
+        class="lw-global-flex-between lw-global-animation-rotate lw-car-plate-keyboard-box"
+      >
+        <div
+          class="lw-car-plate-keyboard"
+          v-for="(i,k) in number"
+          :key="k"
+          @click="inputClick(i)"
+        >{{ i }}
+        </div>
+      </div>
+
+      <!-- 字母键盘 -->
+      <div
+        v-if="carPlateItemIndex !==0"
+        class="lw-global-flex-between lw-global-animation-rotate lw-car-plate-keyboard-box"
+      >
+        <div
+          class="lw-global-click-style lw-car-plate-keyboard"
+          v-for="(i,k) in letter"
+          :key="k"
+          @click="inputClick(i)"
+        >{{ i }}
+        </div>
+        <div
+          :style="
+            carType==='old' && carPlateItemIndex===6 ?
+            {} :
+            {background:'#f0f0f0',color:'#ccc'}
+          "
+          class="lw-global-click-style lw-car-plate-keyboard"
+          @click="carType==='old' && carPlateItemIndex===6 ? inputClick('挂') : '' "
+        >挂
+        </div>
+      </div>
+
+
+      <!-- 按钮操作区 -->
+      <template #button>
+        <lw-button
+          type="last"
+          @click="del"
+        >
+          {{ $lwLanguage.get('', '删除') }}
+        </lw-button>
+        <lw-button @click="confirm">
+          {{ $lwLanguage.get('', '确定') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCarPlate",
+  props: {
+    // 标题
+    title: String,
+
+    // 车牌号
+    value: String,
+
+    // 是否可编辑
+    isEdit:{
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    // 触发input事件的计算值
+    num: {
+      get() {
+        return this.value
+      },
+      set(v) {
+        this.$emit('input', v)
+      }
+    },
+    // 标题
+    titleText() {
+      return this.title || this.$lwLanguage.get('', '车牌号')
+    },
+    // 用于显示的车牌号
+    carPlate() {
+      return this.num.replace(/(^[\u4e00-\u9fa5][A-Z])/, "$1·")
+    }
+  },
+  data() {
+    return {
+      // 弹框显示的车牌
+      carPlateList: [],
+
+      // 车牌类型
+      carType: 'old',
+
+      // 当前输入的车牌号索引
+      carPlateItemIndex: 0,
+
+      // 弹出层
+      showPopup: false,
+
+      // 省份
+      province: [
+        '京', '津', '冀', '晋', '蒙', '辽', '吉',
+        '黑', '沪', '苏', '浙', '皖', '闽', '赣',
+        '鲁', '豫', '鄂', '湘', '粤', '桂', '琼',
+        '渝', '川', '贵', '云', '藏', '陕', '甘',
+        '青', '宁', '新', '港', '澳',
+      ],
+
+      // 数字
+      number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+
+      // 字母
+      letter: [
+        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
+        'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
+        'W', 'X', 'Y', 'Z',
+      ],
+    }
+  },
+  methods: {
+    // 打开弹出框
+    openPopup() {
+      this.carType = this.num.length === 8 ? 'new' : 'old'
+      this.carPlateList = this.num.split('')
+      this.carPlateItemIndex = 0
+      this.showPopup = true
+    },
+
+    // 车牌类型改变
+    carTypeChange(){
+      if (this.carType === 'old'){
+        this.carPlateList[7] = ''
+      }
+    },
+
+    // 车牌项被点击
+    carPlateItemClick(k) {
+      this.carPlateItemIndex = k
+    },
+
+    // 输入车牌
+    inputClick(i) {
+
+      this.$set(this.carPlateList, this.carPlateItemIndex, i)
+
+      if (this.carType === 'old' && this.carPlateItemIndex >= 6) return
+
+      if (this.carType === 'new' && this.carPlateItemIndex >= 7) return
+
+      this.carPlateItemIndex++
+    },
+
+    // 删除
+    del() {
+      if (!this.carPlateList[this.carPlateItemIndex]) this.carPlateItemIndex--
+
+      if (this.carPlateItemIndex <= 0) this.carPlateItemIndex = 0
+
+      this.$set(this.carPlateList, this.carPlateItemIndex, '')
+
+    },
+
+    // 确认
+    confirm(){
+      const num = this.carPlateList.join('')
+      if (this.carType === 'old' && num.length !== 7){
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','车牌输入不正确，请核对')
+        )
+        return
+      }
+
+      if (this.carType === 'new' && num.length !== 8){
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('','车牌输入不正确，请核对')
+        )
+        return
+      }
+
+      this.num = num
+      this.showPopup = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "./../../../assets/css/var.less";
+
+.lw-car-plate{
+  text-align: center;
+  padding: 3px 5px;
+  border-radius: 3px;
+  letter-spacing: 1px;
+  background: #052fc2;
+  color: #fff;
+  border: solid 1px #052fc2;
+}
+
+.lw-car-plate-new{
+  background: linear-gradient(#ffffff 0% , rgb(8, 178, 24) 100%);
+  color: #232323;
+  border-color: #232323;
+}
+
+.lw-car-plate-big{
+  background: #f8f81b;
+  color: #232323;
+  border-color: #232323;
+}
+
+.lw-car-plate-box{
+  margin: 15px 0 10px;
+  border-bottom: solid 1px #f0f0f0;
+  padding-bottom: 10px;
+}
+.lw-car-plate-num-item{
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  border: solid 1px #cccccc;
+  border-radius: 3px;
+  text-align: center;
+  transition: all .3s;
+}
+
+.lw-car-plate-num-dot{
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #232323;
+}
+
+.lw-car-plat-num-item-action{
+  border-color: @baseColor;
+  box-shadow: 0 0 6px 0 @baseColor;
+}
+
+.lw-car-plate-keyboard-box{
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  text-align: center;
+}
+.lw-car-plate-keyboard{
+  width: 24px;
+  height: 25px;
+  line-height: 25px;
+  text-align: center;
+  font-size: 14px;
+  border: solid 1px #cccccc;
+  border-radius: 5px;
+  margin: 3px 2px;
+}
+
+</style>

package/src/components/ui/CarPlate//350/275/246/347/211/214/345/217/267.md

@@ -0,0 +1 @@
+# 按钮[查看文档](https://www.yuque.com/docs/share/5e6c1f5b-41ac-426c-917d-066604373c9e)

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

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