@logwire/logwire-wms-pda-ui 1.1.19 → 1.2.0

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

@@ -1,378 +1,495 @@
-<!--
-  车牌号输入组件
-  @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>
+<!--
+  车牌号输入组件
+  @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',...carPlate.class]"
+          >{{ carPlate.plate }}</div>
+
+        </div>
+
+      </template>
+
+    </lw-cell>
+
+    <!-- 弹出框 -->
+    <lw-popup
+      :title="titleText"
+      v-model="showPopup"
+      height="370px"
+    >
+      <!-- 车牌类型 -->
+      <div style="font-size: 14px;">
+        <van-radio-group
+          v-model="carType"
+          direction="horizontal"
+          @change="carTypeChange"
+        >
+
+          <van-radio
+            style="margin-bottom: 8px"
+            name="old"
+          >{{ $lwLanguage.get('wms_project.pda.components.ui.CarPlate.rnmtzvrt','普通车牌') }}</van-radio>
+
+          <van-radio
+            :disabled="carPlateList[6]==='挂'"
+            name="new"
+            style="margin-bottom: 8px"
+          >{{ $lwLanguage.get('wms_project.pda.components.ui.CarPlate.rvwizyjh','新能源车牌') }}</van-radio>
+
+          <van-radio
+            v-if="!hiddenHandInput"
+            style="margin-bottom: 8px"
+            name="handInput"
+          >{{ $lwLanguage.get('wms_project.pda.components.ui.CarPlate.phheorwz','手动输入') }}</van-radio>
+
+        </van-radio-group>
+      </div>
+
+      <template v-if="carType === 'handInput'">
+        <lw-input
+          :title="$lwLanguage.get('wms_project.pda.components.ui.CarPlate.natiejjr','车牌号')"
+          v-model="handInput.value"
+          :get-focus.sync="handInput.focus"
+          :not-keyboard="false"
+          @confirm="handInputConfirm"
+        />
+      </template>
+      <template v-else>
+        <!-- 车牌显示部分 -->
+        <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>
+
+
+      <!-- 按钮操作区 -->
+      <template #button>
+        <lw-button
+          v-if="carType !== 'handInput'"
+          type="last"
+          @click="del"
+        >
+          {{ $lwLanguage.get('wms_project.pda.components.ui.CarPlate.del', '删除') }}
+        </lw-button>
+        <lw-button @click="confirm">
+          {{ $lwLanguage.get('wms_project.pda.components.ui.CarPlate.confirm', '确定') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCarPlate",
+  props: {
+    // 标题
+    title: String,
+
+    // 车牌号
+    value: String,
+
+    // 是否可编辑
+    isEdit:{
+      type: Boolean,
+      default: true
+    },
+
+    // 是否隐藏手动输入选项
+    hiddenHandInput:{
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    // 触发input事件的计算值
+    num: {
+      get() {
+        return this.value
+      },
+      set(v) {
+        this.$emit('input', v)
+      }
+    },
+    // 标题
+    titleText() {
+      return this.title || this.$lwLanguage.get('wms_project.pda.components.ui.CarPlate.natiejjr', '车牌号')
+    },
+    // 用于显示的车牌号
+    carPlate() {
+      const data = {
+        plate: this.num,
+        class: []
+      }
+
+      const length = this.num.length
+
+      if (length === 7 || length === 8){
+        data.class.push('lw-car-plate-old')
+        data.plate = this.num.replace(/(^[\u4e00-\u9fa5][A-Z])/, "$1·")
+      }
+      if (length === 8){
+        data.class.push('lw-car-plate-new')
+      }
+      if (this.num[6] === '挂'){
+        data.class.push('lw-car-plate-big')
+      }
+
+      return data
+    }
+  },
+  data() {
+    return {
+      // 手动输入
+      handInput:{
+        value: '',
+        focus: false
+      },
+
+      // 弹框显示的车牌
+      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',
+      ],
+
+      // 显示车牌的样式
+      valClass: []
+    }
+  },
+  methods: {
+    // 打开弹出框
+    openPopup() {
+
+      // 根据预设语言或系统语言判断是否是国内，不是国内的就默认为输入框
+      const lang = this.$lwLocalStorag.get('lwLanguage') || this.$lwLanguage.getKey() || navigator.language
+      const isChina = /zh|zH|Zh|ZH/.test(lang)
+
+      // 如果语言是国内就判断当前车牌是否符合国内车牌规则
+      if (isChina){
+        // 根据车牌长度确定时否是新能源或燃油车
+        switch (this.num.length) {
+          case 0:
+          case 7:
+            this.carType = 'old'
+            break;
+          case 8 :
+            this.carType = 'new'
+            break;
+          default:
+            if (this.hiddenHandInput){
+              this.carType = 'old'
+            }else {
+              this.carType = 'handInput'
+            }
+        }
+      }else {
+        this.carType = 'handInput'
+      }
+
+
+
+      if (this.carType === 'handInput'){
+        this.handInput.value = this.num
+      }else {
+        this.carPlateList = this.num.split('')
+        this.carPlateItemIndex = 0
+      }
+
+      this.showPopup = true
+    },
+
+    // 车牌类型改变
+    carTypeChange(){
+
+      // 切换到手动输入就要清空输入框 同时清空预设键盘输入框
+      if(this.carType === 'handInput'){
+        this.handInput.focus = true
+        this.handInput.value = this.carPlateList.join('')
+        this.carPlateList = []
+        this.carPlateItemIndex = 0
+        return
+      }
+
+      // 如果不是手动输入，就判断车牌列表是否为空，且输入框是否满足回填条件，满足就回填车牌
+      if(
+        this.carPlateList.length === 0 &&
+        /^[\u4e00-\u9fa5][A-Z][A-Z|0-9]{5,6}/.test(this.handInput.value)
+      ){
+        this.carPlateList = this.handInput.value.split('')
+      }
+
+
+      // 判断是否是燃油车牌，如果是就把第8为字符设为空
+      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(){
+      let num = this.carPlateList.join('')
+      if (this.carType === 'old' && num.length !== 7){
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.components.ui.CarPlate.mzlqxuiq','车牌输入不正确，请核对')
+        )
+        return
+      }
+
+      if (this.carType === 'new' && num.length !== 8){
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.components.ui.CarPlate.mzlqxuiq','车牌输入不正确，请核对')
+        )
+        return
+      }
+
+      if (this.carType === 'handInput') num = this.handInput.value
+
+      this.num = num
+      this.showPopup = false
+    },
+
+    // 手动输入确认
+    handInputConfirm(){
+      this.confirm()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "./../../../assets/css/var.less";
+
+.lw-car-plate{
+  text-align: center;
+  padding: 3px 5px;
+}
+
+.lw-car-plate-old{
+  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>