starfish-form-custom 1.0.0

package/src/common/listConfig.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="starfish-formitem starfish-formitem-nomiddle" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist }">
+    <div class="label" :class="'label_' + labelalign" :style="{ width: labelWidth + 'px' }">
+      <label>{{ item.data.label }}{{ suffix }}</label>
+    </div>
+    <div class="control" :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }">
+      <el-row v-for="(items, index) in data[item.data.fieldName]" :key="index" :gutter="10" style="margin-bottom: 10px;">
+          <el-input-number v-model="items.span" :min="0" size="small" controls-position="right" />
+          <el-button type="danger" circle size="small" @click="onDelete(index)" style="margin-left: 5px;">
+            <el-icon><Delete /></el-icon>
+          </el-button>
+      </el-row>
+      <el-button plain @click="onAdd" size="small">添加</el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import fieldProps from "../utils/fieldProps";
+  import { Delete } from "@element-plus/icons-vue";
+  export default defineComponent({
+    ControlType: "ListConfig", // 必须与文件名匹配
+    nameCn: "栅格列表配置",
+    isHide: true,
+    props: {
+      ...fieldProps,
+    },
+    components: {
+      Delete,
+    },
+    setup(props: any) {
+      return {
+        onAdd() {
+          props.data[props.item.data.fieldName].push({
+            span: 12,
+            list: [],
+          });
+        },
+        onDelete(index: number) {
+          props.data[props.item.data.fieldName].splice(index, 1);
+        },
+      };
+    },
+  });
+</script>

package/src/common/panel.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="starfish-formitem starfish-formitem-nomiddle" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist }">
+    <div class="label" :class="'label_' + labelalign" :style="{ width: labelWidth + 'px' }">
+      <label>{{ item.data.label }}{{ suffix }}</label>
+      <el-tooltip class="item" effect="dark" content="可拖拽调整顺序" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }">
+      <el-row>
+        <el-col :span="24">
+          <draggable :list="data[item.data.fieldName]" class="list-group" handle=".handle" item-key="name" ghostClass="itemGhost">
+            <template #item="{ element, index }">
+              <el-row :gutter="10">
+                <el-col :span="1.5">
+                  <i class="iconfontui icon-bars handle"></i>
+                </el-col>
+                <el-col class="list-group-item" :span="14">
+                  <el-input size="small" v-model="element.name" clearable />
+                </el-col>
+                <el-col :span="2">
+                  <el-button type="danger" circle size="small" @click="removeAt(index)">
+                    <el-icon><Delete /></el-icon>
+                  </el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </draggable>
+        </el-col>
+        <el-button type="primary" text @click="add" size="small">添加面板</el-button>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import fieldProps from "../utils/fieldProps";
+  import { Delete } from "@element-plus/icons-vue";
+  export default defineComponent({
+    ControlType: "Panel", // 必须与文件名匹配
+    isHide: true,
+    components: {
+      Delete,
+    },
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      return {
+        removeAt(idx: number) {
+          props.data[props.item.data.fieldName].splice(idx, 1);
+        },
+        add: function () {
+          debugger;
+          const len = props.data[props.item.data.fieldName].length + 1;
+          props.data[props.item.data.fieldName].push({ name: props.data.name + len, list: [] });
+        },
+      };
+    },
+  });
+</script>

package/src/common/radiogroup.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="starfish-formitem" :class="drag ? 'formCover' : ''">
+    <div class="label">
+      <label>{{ item.data.label }}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control">
+      <el-radio-group v-model="data[item.data.fieldName]" size="mini">
+        <el-radio-button v-for="(sitem, sindex) in item.data.itemConfig.items" :key="sindex" :label="sitem.value"></el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import fieldProps from "../utils/fieldProps";
+  import { useWatch } from "../utils/customHooks";
+  export default defineComponent({
+    ControlType: "RadioGroup", // 必须与文件名匹配
+    isHide: true,
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/components/CheckBox/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
+    <div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
+      <label>{{ item.data.label }}{{suffix}}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
+      <el-checkbox-group v-model="data[item.data.fieldName]" v-if="!drag && data[item.data.fieldName]" :size="size">
+        <el-checkbox v-for="(sitem, sindex) in item.data.itemConfig.items" :key="sindex" :label="sitem.value">{{ sitem.label }}</el-checkbox>
+      </el-checkbox-group>
+      <el-checkbox-group v-model="item.data.itemConfig.value" v-if="drag" :size="size">
+        <el-checkbox v-for="(sitem, sindex) in item.data.itemConfig.items" :key="sindex" :label="sitem.value">{{ sitem.label }}</el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "CheckBox", // 必须与文件名匹配
+    nameCn: "复选框",
+    icon: "icon-fuxuankuang_xuanzhong",
+    formConfig: getFormConfig("CheckBox", [
+      { fieldName: "itemConfig", component: "KeyValueConfigMult" }, 
+      { fieldName: "arrangeMent", component: "Radio" },
+      { fieldName: "state", component: "Radio" },
+    ]),
+    props: {
+      ...fieldProps,
+    },
+    actionType: ["onChange"],
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/components/ColorSelect/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
+    <div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
+      <label>{{ item.data.label }}{{suffix}}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
+      <div v-if="drag">
+        <el-input v-model="item.data.default" :placeholder="item.data.placeholder" size="small" style="width: 150px;"/>
+        <el-color-picker v-model="item.data.default" show-alpha :size="size"></el-color-picker>
+      </div>
+      <div v-if="!drag">
+        <el-input v-model="data[item.data.fieldName]" :placeholder="item.data.placeholder" size="small" style="width: 150px;"/>
+        <el-color-picker v-model="data[item.data.fieldName]" show-alpha :size="size"></el-color-picker>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "ColorSelect", // 必须与文件名匹配
+    nameCn: "颜色选择",
+    icon: "icon-sen103",
+    formConfig: getFormConfig("ColorSelect", [{ fieldName: "default", component: "ColorSelect" }]),
+    props: {
+      ...fieldProps,
+    },
+    actionType: ["onChange"],
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>
+<style scoped lang="scss">
+  .control {
+    width: 240px;
+    > div {
+      display: flex;
+      align-items: center;
+    }
+  }
+</style>

package/src/components/Date/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
+    <div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
+      <label>{{ item.data.label }}{{suffix}}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
+      <el-date-picker v-model="item.data.default" type="date" :placeholder="item.data.placeholder" v-if="drag" :size="size"> </el-date-picker>
+      <el-date-picker v-model="data[item.data.fieldName]" type="date" :placeholder="item.data.placeholder" v-if="!drag" :size="size"> </el-date-picker>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "Date", // 必须与文件名匹配
+    nameCn: "日期选择",
+    icon: "icon-24gl-calendar",
+    formConfig: getFormConfig("Date", [
+      { fieldName: "default", component: "Date" },
+      { fieldName: "placeholder", component: "Text" },
+      { fieldName: "format", component: "Selected" },
+      { fieldName: "state", component: "Radio" },
+    ]),
+    actionType: ["onChange"],
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/components/DateTime/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
+    <div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
+      <label>{{ item.data.label }}{{suffix}}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
+      <el-date-picker v-model="item.data.default" type="datetime" :placeholder="item.data.placeholder" v-if="drag" :size="size"> </el-date-picker>
+      <el-date-picker v-model="data[item.data.fieldName]" type="datetime" :placeholder="item.data.placeholder" v-if="!drag" :size="size"> </el-date-picker>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "DateTime", // 必须与文件名匹配
+    nameCn: "日期时间选择",
+    icon: "icon-riqishijian",
+    formConfig: getFormConfig("DateTime", [
+      { fieldName: "default", component: "DateTime" },
+      { fieldName: "placeholder", component: "Text" },
+      { fieldName: "format", component: "Selected" },
+      { fieldName: "state", component: "Radio" },
+    ]),
+    actionType: ["onChange"],
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/components/InputNumber/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist }">
+    <div class="label" :class="'label_' + labelalign" :style="{ width: labelWidth + 'px' }">
+      <label>{{ item.data.label }}{{ suffix }}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }">
+      <el-input-number v-model="item.data.default" :controls-position="item.data.type == 2 ? 'right' : ''" :size="item.data.size" v-if="drag" />
+      <el-input-number v-model="data[item.data.fieldName]" v-if="!drag" :controls-position="item.data.type == 2 ? 'right' : ''" :size="item.data.size" @focus="execFunc('onFocus')" @blur="execFunc('onBlur')" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, getCurrentInstance, ComponentInternalInstance } from "vue";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "InputNumber", // 必须与文件名匹配
+    nameCn: "计数器",
+    icon: "icon-jishuqi",
+    formConfig: getFormConfig("InputNumber", [
+      { fieldName: "default", component: "InputNumber" },
+      { fieldName: "type", component: "Radio" },
+      { fieldName: "size", component: "Radio" },
+      { fieldName: "precision", component: "InputNumber" },
+      { fieldName: "state", component: "Radio" },
+    ]),
+    props: {
+      ...fieldProps,
+    },
+    actionType: ["onChange", "onFocus", "onBlur"],
+    setup(props) {
+      const vm = getCurrentInstance() as ComponentInternalInstance;
+      useWatch(props);
+      return {
+        execFunc(type: string) {
+          if (props.item.data.action && props.item.data.action[type]) {
+            window.VApp.$Flex.funcExec(props.item.data.action[type], vm.proxy, [props.item.data.fieldName]);
+          }
+        },
+      };
+    },
+  });
+</script>

package/src/components/JsonEditor/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div
+    class="starfish-formitem"
+    :class="{
+      formCover: drag,
+      'starfish-vertical': labelalign != 'top',
+      [item.data.csslist?.join(' ')]: !!item.data.csslist,
+    }"
+  >
+    <div
+      class="label"
+      :class="'label_' + labelalign"
+      :style="{ width: labelWidth + 'px' }"
+    >
+      <label>{{ item.data.label }}{{ suffix }}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip
+        v-if="item.data.tip"
+        class="item"
+        effect="dark"
+        :content="item.data.tip"
+        placement="top"
+      >
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div
+      class="control"
+      :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }"
+    >
+      <div id="jsoneditor" ref="jsoneditor">
+        <div class="fullScreen" @click="showCustomDialog">
+          <i class="iconfontui icon-quanping"></i>
+        </div>
+      </div>
+    </div>
+    <CustomDialog ref="myDialog" :width="'60%'">
+      <el-main style="padding: 0">
+        <el-container style="height: 100%">
+          <el-main class="my-pageMain">
+            <div
+              ref="JsonViewerDialogDom"
+              style="height: calc(100% - 24px)"
+            ></div>
+          </el-main>
+          <el-footer
+            class="my-Footer"
+            style="height: 60px; padding-top: 10px; text-align: right"
+          >
+            <el-button type="primary" @click="saveJson">保存</el-button>
+            <el-button @click="closeDialog">关闭</el-button>
+          </el-footer>
+        </el-container>
+      </el-main>
+    </CustomDialog>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, watch, ref, nextTick, onMounted } from "vue";
+import { getFormConfig } from "../../utils/fieldConfig";
+import fieldProps from "../../utils/fieldProps";
+import { useWatch } from "../../utils/customHooks";
+import JSONEditor from 'jsoneditor'
+import _ from "@/utils/_";
+interface jsonEditor {
+  [key: string]: any;
+}
+export default defineComponent({
+  ControlType: "JsonEditor", // 必须与文件名匹配
+  nameCn: "JSON编辑",
+  icon: "icon-json-full",
+  rule: _.getJsonValidate(),
+  formConfig: getFormConfig("JsonEditor", [
+    { fieldName: "default", component: "JsonEditor" },
+  ]),
+  props: {
+    ...fieldProps,
+  },
+  actionType: ["onChange"],
+  setup(props) {
+    /**
+     * json dom
+     */
+    const jsoneditor = ref<jsonEditor>({});
+    /**
+     * dialog 初始化jsoneditor对象
+     */
+    let jsonEditorDialog: any = null;
+    /**
+     * jsoneditor对象
+     */
+    let jsonEditors: any = null;
+    /**
+     * dialog dom
+     */
+    const JsonViewerDialogDom = ref<any>();
+    const myDialog = ref<any>();
+    useWatch(props);
+    function initJson() {
+      const container = jsoneditor.value;
+      const data: any = props.data;
+      const item: any = props.item;
+      const fieldName = item.data.fieldName;
+      const options = {
+        modes: ["text", "code", "view"],
+        mode: "code",
+        search: false,
+        onChange() {
+          data[fieldName] = jsonEditors?.getText();
+        },
+      };
+      jsonEditors = new JSONEditor(container, options);
+      if (props.drag) {
+        jsonEditors?.set(_.tryParseJson(item.data.default));
+      } else {
+        jsonEditors?.set(_.tryParseJson(data[item.data.fieldName]));
+      }
+    }
+    onMounted(() => {
+      initJson();
+    });
+    watch(
+      () => props.item,
+      (newValue: any) => {
+        if (props.drag) {
+          jsonEditors?.set(_.tryParseJson(newValue.data.default));
+        } else {
+          const data: any = props.data;
+          const item: any = props.item;
+          jsonEditors?.set(_.tryParseJson(data[item.data.fieldName]));
+        }
+      }
+    );
+    return {
+      myDialog,
+      jsoneditor,
+      JsonViewerDialogDom,
+      async showCustomDialog() {
+        const myDialogDom: any = myDialog.value;
+        myDialogDom.show();
+        myDialogDom.init("JSON编辑", "icon-json-full");
+        await nextTick();
+        const container = JsonViewerDialogDom.value;
+        const options = {
+          modes: ["text", "code", "view"],
+          mode: "code",
+          search: false,
+        };
+        jsonEditorDialog = new JSONEditor(container, options);
+        jsonEditorDialog?.set(_.tryParseJson(jsonEditors.getText()));
+      },
+      closeDialog() {
+        myDialog.value.close();
+      },
+      saveJson() {
+        jsonEditors?.set(_.tryParseJson(jsonEditorDialog.getText()));
+        const data: any = props.data;
+        const item: any = props.item;
+        const fieldName = item.data.fieldName;
+        data[fieldName] = jsonEditors?.getText();
+        myDialog.value.close();
+      },
+    };
+  },
+});
+</script>
+

package/src/components/Radio/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist }">
+    <div class="label" :class="'label_' + labelalign" :style="{ width: labelWidth + 'px' }">
+      <label>{{ item.data.label }}{{ suffix }}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }">
+      <el-radio-group v-if="!drag" v-model="data[item.data.fieldName]" :size="size">
+        <el-radio v-for="(sitem, sindex) in item.data.itemConfig.items" :key="sindex" :label="sitem.value">{{ sitem.label }}</el-radio>
+      </el-radio-group>
+      <el-radio-group v-if="drag" v-model="item.data.itemConfig.value" :size="size">
+        <el-radio v-for="(sitem, sindex) in item.data.itemConfig.items" :key="sindex" :label="sitem.value">{{ sitem.label }}</el-radio>
+      </el-radio-group>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "Radio", // 必须与文件名匹配
+    nameCn: "单选框",
+    icon: "icon-danxuankuang",
+    formConfig: getFormConfig("Radio", [
+      { fieldName: "itemConfig", component: "KeyValueConfig" },
+      { fieldName: "arrangeMent", component: "Radio" },
+      { fieldName: "state", component: "Radio" },
+    ]),
+    props: {
+      ...fieldProps,
+    },
+    actionType: ["onChange"],
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/components/RichText/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top', [item.data.csslist?.join(' ')]: !!item.data.csslist}">
+    <div class="label" :class="'label_' + labelalign" :style="{width: labelWidth + 'px'}">
+      <label>{{ item.data.label }}{{suffix}}</label>
+      <span v-if="item.data.required" class="item_require">*</span>
+      <el-tooltip v-if="item.data.tip" class="item" effect="dark" :content="item.data.tip" placement="top">
+        <span class="tip iconfontui icon-tishi"></span>
+      </el-tooltip>
+    </div>
+    <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
+      <div ref="richText" v-if="drag" ></div>
+      <div ref="richText" v-if="!drag" ></div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, ref, onUnmounted } from "vue";
+  import E from "wangeditor";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "RichText", // 必须与文件名匹配
+    nameCn: "富文本",
+    icon: "icon-textEdit",
+    formConfig: getFormConfig("RichText", [{ fieldName: "state", component: "Radio" }]),
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      const richText = ref();
+      let editor: any = null;
+      useWatch(props);
+      onMounted(() => {
+        if (props.drag) {
+          editor = new E(richText.value);
+          editor.config.focus = false;
+          editor.create();
+        } else {
+          editor = new E(richText.value);
+          editor.config.focus = false;
+          editor.create();
+          const data: any = props.data;
+          const item: any = props.item;
+          editor.config.onchange = function (newHtml: string) {
+            console.log("onblur", newHtml); // 获取最新的 html 内容
+            data[item.data.fieldName] = newHtml;
+          };
+        }
+      });
+      onUnmounted(() => {
+        editor.destroy();
+        editor = null;
+      });
+      return {
+        richText
+      };
+    },
+  });
+</script>