'保安项目提交'

src/components/MyComponents/CarNumber/index.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="zj-carnumber-box form-item-box" :style="{ width: width }">
+    <el-select
+      :class="{ 'error-input': carProvinceError }"
+      class="carnumber-select"
+      v-model="editForm.carProvince"
+      clearable
+      :placeholder="placeholder"
+      @change="carProvinceSelect"
+      popper-class="carnumber-select"
+    >
+      <el-option
+        v-for="item in allKeyWord.province"
+        :key="item"
+        :label="item"
+        :value="item"
+      >
+      </el-option>
+    </el-select>
+
+    <el-popover placement="bottom" popper-class="alphabet-select-wrap" trigger="click">
+      <template #reference>
+        <el-input
+          :class="{ 'error-input': carAlphabetError }"
+          class="carnumber-input"
+          style="text-transform:uppercase; "
+          :maxlength="maxlength"
+          @input="inputNumber"
+          onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
+          @clear="clearCarAlphabet"
+          v-model="editForm.carAlphabet"
+          placeholder="请输入车牌号"
+        />
+      </template>
+
+      <div class="alphabet"   >
+        <ul>
+          <li
+            @click="chooseNumber(item)"
+            v-for="item in allKeyWord.alphabet"
+            :key="item"
+          >
+            {{ item }}
+          </li>
+        </ul>
+      </div>
+    </el-popover>
+    <div class="error-tips" v-if="showErrorTips">{{ errorTips }}</div>
+    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
+    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, reactive, nextTick } from "vue";
+const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
+const props = defineProps({
+  //获取组件传值
+  carnumber: {
+    default: "",
+    type: String
+  },
+  nationOption: {
+    default: () => [],
+    type: Array
+  },
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const maxlength = 7;
+const showErrorTips = ref(false);
+const carProvinceError = ref(false);
+const carAlphabetError = ref(false);
+const errorTips = ref("");
+const editForm = reactive({
+  carProvince: "",
+  carAlphabet: ""
+});
+nextTick(() => {
+  if (props.carnumber) {
+    editForm.carProvince = props.carnumber.substr(0, 1);
+    editForm.carAlphabet = props.carnumber.slice(1);
+    numberList.value = editForm.carAlphabet.split("");
+  }
+});
+const carNumber = ref("");
+const numberList = ref([]);
+const allKeyWord = {
+  province: [
+    "京",
+    "津",
+    "沪",
+    "渝",
+    "川",
+    "新",
+    "藏",
+    "宁",
+    "贵",
+    "桂",
+    "云",
+    "黑",
+    "吉",
+    "辽",
+    "晋",
+    "翼",
+    "青",
+    "鲁",
+    "豫",
+    "苏",
+    "皖",
+    "浙",
+    "闽",
+    "赣",
+    "湘",
+    "鄂",
+    "琼",
+    "甘",
+    "陕",
+    "蒙",
+    "粤"
+    // '港',
+    // '澳',
+    // '台',
+    // '使',
+    // '领',
+    // '警',
+    // '学'
+  ],
+  alphabet: [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    0,
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z"
+  ]
+};
+const carProvinceSelect = (data) => {
+  carNumber.value = editForm.carProvince + editForm.carAlphabet;
+  emits("handleChange", carNumber.value.toUpperCase());
+};
+const clearCarAlphabet = () => {
+  editForm.carAlphabet = "";
+  numberList.value = [];
+  emits("handleChange", "");
+};
+const inputNumber = () => {
+  carNumber.value = editForm.carProvince + editForm.carAlphabet;
+  emits("handleChange", carNumber.value.toUpperCase());
+};
+const chooseNumber = (e) => {
+  numberList.value = editForm.carAlphabet.split(",");
+  numberList.value.push(e);
+  editForm.carAlphabet = numberList.value.toString().replace(/,/g, "");
+  carNumber.value = editForm.carProvince + editForm.carAlphabet;
+  emits("handleChange", carNumber.value.toUpperCase());
+};
+</script>
+
+<style lang="scss" scoped>
+.zj-carnumber-box {
+  display: flex;
+  justify-content: flex-start;
+  ::v-deep .carnumber-select {
+    width: 88px !important;
+    .el-input {
+      width: 88px !important;
+      min-width: 88px !important;
+    }
+  }
+  .carnumber-input {
+    width: 100%;
+    ::v-deep .el-input__inner{
+      width: 100%;
+      text-transform: uppercase ;
+    }
+  }
+}
+</style>