@logwire/logwire-wms-pda-ui 3.1.2 → 3.3.2

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

@@ -1,513 +0,0 @@
-<!--
-  车牌号输入组件
-  @author: 张文
-  @date: 2022-06-06
--->
-<template>
-  <div>
-    <lw-cell
-      :style="{padding: num ? '1px' : ''}"
-      :title="titleText"
-      v-model="num"
-      :is-edit="isEdit"
-      :is-link="isEdit"
-      :required="required"
-      :border="border"
-      @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
-    },
-    // 是否显示必填星号
-    required:{
-      type: Boolean,
-      default: false
-    },
-    // 是否显示下划线
-    border:{
-      type: Boolean,
-      default: true
-    },
-
-    // 是否隐藏手动输入选项
-    hiddenHandInput:{
-      type: Boolean,
-      default: false
-    },
-
-    // 点击确认后的回调函数支持异步，返回false时将不关闭弹框
-    confirmFn: Function
-  },
-  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.$lwLocalStorage.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, '')
-
-    },
-
-    // 确认
-    async 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
-      if (this.confirmFn && typeof this.confirmFn === 'function'){
-        if(!await this.confirmFn(num)) return
-      }
-      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>