@logwire/logwire-wms-pda-ui 1.1.15 → 1.1.18

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

@@ -1,378 +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>
+<!--
+  车牌号输入组件
+  @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>