ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/aceDrawerPage.vue

<!--
@ 作者: 秦东
@ 时间: 2023-07-19 08:39:34
@ 备注: 抽屉
-->
<script lang="ts" setup>
import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
import { aceEdit } from "@/api/DesignForm/utils";

const props = withDefaults(
  defineProps<{
    data?: object;
    modelValue: boolean;
    // eslint-disable-next-line vue/require-default-prop
    title?: string;
    direction?: "rtl" | "ltr";
    content: string;
    id?: string;
    // eslint-disable-next-line vue/require-default-prop
    codeType?: string;
  }>(),
  {
    id: "editJson",
    content: "",
    direction: "ltr",
  }
);
const emits = defineEmits<{
  (e: "beforeClose"): void;
  (e: "confirm", content: string): void;
  (e: "update:modelValue", val: boolean): void;
}>();
const editor = ref<any>({});
const visible = ref(false);
watch(
  () => props.modelValue,
  (val: boolean) => {
    visible.value = val;
    if (val) {
      initEditor();
    }
  }
);
const initEditor = () => {
  nextTick(() => {
    editor.value = aceEdit(props.content, props.id, props.codeType);
  });
};
const dialogConfirm = () => {
  const editVal = editor.value.getValue();
  emits("confirm", editVal);
};
const drawerBeforeClose = () => {
  emits("update:modelValue", false);
  emits("beforeClose");
};
onMounted(() => {});
onUnmounted(() => {
  if (Object.keys(editor.value).length !== 0) {
    editor.value.destroy();
    editor.value.container.remove();
  }
});
</script>
<template>
  <el-drawer
    v-model="visible"
    size="60%"
    :title="title"
    :direction="direction as any"
    class="ace-dialog"
    :append-to-body="true"
    :before-close="drawerBeforeClose"
  >
    <template #header>
      <div v-html="title"></div>
    </template>
    <div>{{ props.data }}</div>
    <div v-if="visible" :id="id"></div>
    <div class="dialog-footer">
      <el-button type="primary" size="small" @click="dialogConfirm"> 确定 </el-button>
    </div>
  </el-drawer>
</template>
<style lang="scss" scoped>
#editJson,
#editJsonCopy {
  width: 100%;
  height: calc(100vh - 90px);
}
</style>