提交代码

src/components/MyComponents/FrameWork2/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-cascader
+      class="el-cascader-zj"
+      :placeholder="placeholder"
+      :options="tableData"
+      v-bind="$attrs"
+      v-model="modelValue"
+      @change="handleChange"
+      :props="endProps"
+      :filterable="filterable"
+    />
+    <!-- <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, defineProps, defineEmits, defineExpose,computed } from "vue";
+import { getSystemMeny } from "@/api/user-manage";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  filterable: {
+    default: false,
+    type: Boolean
+  },
+  modelValue: {
+    default: [],
+    type: Array
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const endProps = computed(() => {
+  let re = { children: 'sysMenuList', value: 'id', label: 'menuName' }
+  if (props.multiple === true) {
+    re.multiple = true;
+  }
+  return re;
+})
+const tableData = ref([]);
+const getSysMenuTree = async () => {
+  const params = {
+    menuName: "",
+    current: 1,
+    size: 999
+  }
+  const res = await getSystemMeny(params);
+  tableData.value = res?.records;
+};
+getSysMenuTree();
+
+const emits = defineEmits(["update:modelValue"]);
+const handleChange = (e) => {
+  if (props.multiple === true) {
+    const data = e.map((item) => {
+      return item[item.length - 1];
+    });
+    emits("update:modelValue", data);
+  } else {
+    const data = e ? e[e.length - 1] : ''
+    emits("update:modelValue", data);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .el-cascader-zj{
+    width: 100%;
+
+  }
+</style>