创新服务、解决方案

src/components/SiteOptions/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-cascader
+    :size="size"
+    :style="{ width: limitWidth ? '240px' : '100%' }"
+    v-model="modelValue.tenantId"
+    clearable
+    separator="-"
+    placeholder="请选择，支持搜索"
+    :options="tenantOptions"
+    filterable
+    :props="{ emitPath: false, value: 'id', label: 'name' }"
+  ></el-cascader>
+</template>
+
+<script setup name="SiteOptions">
+import { tenantSelect } from "@/api/subPlatform/tenant";
+import { toRefs } from "vue";
+
+const tenantOptions = ref([]);
+const props = defineProps({
+  modelValue: Object,
+  size: {
+    type: String,
+    default: "small",
+  },
+  limitWidth: {
+    type: Boolean,
+    default: true,
+  },
+});
+const { limitWidth, size, modelValue } = toRefs(props);
+
+tenantSelect().then((res) => {
+  for (const key in res.rows) {
+    if (Object.hasOwnProperty.call(res.rows, key)) {
+      const item = res.rows[key];
+      tenantOptions.value.push(item);
+    }
+  }
+});
+</script>
+<!-- <script>
+import { tenantSelect } from "@/api/subPlatform/tenant";
+export default {
+  props: {
+    value: Object,
+    size: {
+      type: String,
+      default: "small",
+    },
+    limitWidth: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      tenantOptions: [],
+    };
+  },
+  // watch: {
+  //   value: {
+  //     handler(newVal, oldVal) {
+  //       if (newVal == "" || newVal == null) {
+  //         this.tenant_id = undefined;
+  //       } else {
+  //         this.tenant_id = newVal;
+  //       }
+  //     },
+  //     immediate: true,
+  //   },
+  //   tenant_id(newVal, oldVal) {
+  //     this.$emit("handleChange", newVal);
+  //   },
+  // },
+  created() {
+    tenantSelect().then((res) => {
+      for (const key in res.data) {
+        if (Object.hasOwnProperty.call(res.data, key)) {
+          const item = res.data[key];
+          this.tenantOptions.push(item);
+        }
+      }
+    });
+  },
+};
+</script> -->

src/components/WangEditor/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div :style="`border: 1px solid #ccc; width: ${width}`">
+    <Toolbar
+      style="border-bottom: 1px solid #ccc"
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      :style="`min-height: ${minHeight}; height: ${height} overflow-y: hidden`"
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      @onCreated="handleCreated"
+      @onChange="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+import { onBeforeUnmount, ref, shallowRef, toRefs, watch } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+
+export default {
+  components: { Editor, Toolbar },
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    minHeight: {
+      type: String,
+      default: "150px",
+    },
+    height: {
+      type: String,
+      default: "320px",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    focus: {
+      type: Boolean,
+      default: false,
+    },
+    mode: {
+      type: String,
+      default: "default",
+    },
+  },
+  setup(props, context) {
+    // 编辑器实例，必须用 shallowRef
+    const editorRef = shallowRef();
+    // console.log(editorRef.value.getAllMenuKeys());
+    // 内容 HTML
+    const valueHtml = ref("");
+    watch(
+      () => props.modelValue,
+      (val) => {
+        valueHtml.value = val;
+      },
+      { immediate: true }
+    );
+    const { height } = toRefs(props);
+    const toolbarConfig = {
+      toolbarKeys: [
+        "bold",
+        "underline",
+        "italic",
+        "through",
+        "color",
+        "bgColor",
+        "fontSize",
+        "fontFamily",
+        "lineHeight",
+        // "emotion",
+        // "redo",
+        // "undo",
+      ],
+    };
+    const editorConfig = {
+      placeholder: "请输入内容...",
+      autoFocus: props.focus,
+      maxLength: 140,
+    };
+
+    // 组件销毁时，也及时销毁编辑器
+    onBeforeUnmount(() => {
+      const editor = editorRef.value;
+      if (editor == null) return;
+      editor.destroy();
+    });
+
+    const handleCreated = (editor) => {
+      editorRef.value = editor; // 记录 editor 实例，重要！
+    };
+
+    const handleChange = (editor) => {
+      if (editor.getHtml() === "<p><br></p>") {
+        context.emit("update:modelValue", "");
+      } else {
+        context.emit("update:modelValue", editor.getHtml());
+      }
+    };
+
+    return {
+      editorRef,
+      valueHtml,
+      mode: "default", // 或 'simple'
+      toolbarConfig,
+      editorConfig,
+      height,
+      handleCreated,
+      handleChange,
+    };
+  },
+};
+</script>