'保安项目提交'

src/components/MyComponents/PackageSelect/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="form-item-box zj-packageSelect-wrap" :style="{ width: width }">
+    <el-select v-bind="$attrs" :model-value="modelValue" @change="hanlderSelect"
+      :popper-class="selectOption.length > 20 ? 'nation-select' : ''" :placeholder="placeholder">
+      <el-option v-for="item in selectOption" :key="item.dm" :label="item.zdmc" :value="item.dm">
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { nextTick, onBeforeMount, ref } from "vue";
+import { getDictInfoByDictEnum } from "@/api/sysDict";
+const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  dictEnum: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const selectOption = ref([]);
+onBeforeMount(async () => {
+  const res = await getDictInfoByDictEnum({ dictElementEnum: props.dictEnum });
+  //正常下拉结构
+  if (res.zdlx === 1) {
+    selectOption.value = [...res.itemList];
+  } else {
+    //树形结构数据
+  }
+});
+const hanlderSelect = (data) => {
+  emits("handleChange", data);
+};
+</script>
+
+<style lang="scss" scoped>
+.zj-packageSelect-wrap {
+  ::v-deep .el-select {
+    width: 100%;
+  }
+}
+</style>