starfish-form-custom 1.0.0

package/src/components/Rule/rules.js

@@ -0,0 +1,91 @@
+/* eslint-disable no-useless-escape */
+// 数字校验规则
+const validateNumber = `(rule, value, callback) => {
+  console.log(rule);
+  
+  if (value === "" || value == null) {
+    callback(new Error("请输入"));
+  } else if (!/^[0-9]*$/.test(value)) {
+    callback(new Error("必须为数字"));
+  }
+  callback();
+}`;
+// 数字校验规则（小数点保留两位）
+const validateNumberD2 = `(rule, value, callback) => {
+    if (value === "" || value == null) {
+      callback(new Error("请输入"));
+    } else if (!/^([1-9]+[\d]*(.[0-9]{1,2})?)$/.test(value)) {
+      callback(new Error("必须为数字,且小数点最多两位"));
+    }
+    callback();
+  }`;
+
+// 电话号码校验规则
+const validatePhone = `(rule, value, callback) => {
+    if (value === "" || value == null) {
+      callback(new Error("请输入"));
+    } else if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)) {
+      callback(new Error("请输入正确的值"));
+    }
+    callback();
+  }`;
+
+// 身份证校验规则
+const validateIdCard = `(rule, value, callback) => {
+    if (value === "" || value == null) {
+      callback(new Error("请输入"));
+    } else if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
+      callback(new Error("请输入正确的"));
+    }
+    callback();
+  }`;
+
+// 邮箱校验规则
+const validateEmail = `
+  (rule, value, callback) => {
+    if (value === "" || value == null) {
+      callback(new Error("请输入"));
+    } else if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
+      callback(new Error("请输入正确的值"));
+    }
+    callback();
+  }`;
+
+// 大写字母单个校验
+const validateBigEn = `
+  (rule, value, callback) => {
+    if (value === "" || value == null) {
+      callback(new Error("请输入"));
+    } else if (!/^[A-Z]$/.test(value)) {
+      callback(new Error("只能是大写字母"));
+    }
+    callback();
+  }`;
+
+const ruleList = [
+  {
+    label: "数字校验规则",
+    validator: validateNumber,
+  },
+  {
+    label: "数字校验规则（小数点保留两位）",
+    validator: validateNumberD2,
+  },
+  {
+    label: "身份证校验规则",
+    validator: validateIdCard,
+  },
+  {
+    label: "电话号码校验规则",
+    validator: validatePhone,
+  },
+  {
+    label: "邮箱校验规则",
+    validator: validateEmail,
+  },
+  {
+    label: "大写字母单个校验",
+    validator: validateBigEn,
+  },
+];
+export default ruleList;

package/src/components/Selected/index.vue

@@ -0,0 +1,50 @@
+<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-select v-model="item.data.itemConfig.value" :placeholder="item.data.placeholder" v-if="drag" :size="size">
+        <el-option v-for="items in item.data.itemConfig.items" :key="items.value" :label="items.label" :value="items.value" />
+      </el-select>
+      <el-select v-model="data[item.data.fieldName]" :placeholder="item.data.placeholder" v-if="!drag" :size="size" @focus="execFunc('onFocus')" @blur="execFunc('onBlur')">
+        <el-option v-for="items in item.data.itemConfig.items" :key="items.value" :label="items.label" :value="items.value" />
+      </el-select>
+    </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: "Selected", // 必须与文件名匹配
+    nameCn: "选择器",
+    icon: "icon-xuanzeqi",
+    formConfig: getFormConfig("Selected", [
+      { fieldName: "placeholder", component: "Text" },
+      { fieldName: "itemConfig", component: "KeyValueConfig" },
+      { 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/Selecteds/index.vue

@@ -0,0 +1,50 @@
+<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-select v-model="item.data.itemConfig.value" :placeholder="item.data.placeholder" v-if="drag" multiple :size="size">
+        <el-option v-for="items in item.data.itemConfig.items" :key="items.value" :label="items.label" :value="items.value" />
+      </el-select>
+      <el-select v-model="data[item.data.fieldName]" :placeholder="item.data.placeholder" v-if="!drag" multiple :size="size" @focus="execFunc('onFocus')" @blur="execFunc('onBlur')">
+        <el-option v-for="items in item.data.itemConfig.items" :key="items.value" :label="items.label" :value="items.value" />
+      </el-select>
+    </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: "Selecteds", // 必须与文件名匹配
+    nameCn: "选择器多选",
+    icon: "icon-xuanzeqi",
+    formConfig: getFormConfig("Selecteds", [
+      { fieldName: "placeholder", component: "Text" },
+      { fieldName: "itemConfig", component: "KeyValueConfigMult" },
+      { fieldName: "state", component: "Radio" },
+    ]),
+    actionType: ["onChange", "onFocus", "onBlur"],
+    props: {
+      ...fieldProps,
+    },
+    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/ShowRule/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="starfish-formitem starfish-editor-showrule" :class="{ formCover: drag, 'starfish-vertical': labelalign != 'top' }">
+    <div class="label" :class="'label_' + labelalign" :style="{ width: labelWidth + 'px' }">
+      <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" :style="{ marginLeft: labelalign != 'top' ? labelWidth + 'px' : '' }">
+      <el-button text type="primary" v-if="data.showRule != '{}'" :size="size">已设置</el-button>
+      <el-button text type="primary" v-else :size="size">未设置</el-button>
+      <div>
+        <el-button type="primary" :size="size" @click="onConditionSet">普通设置</el-button>
+        <el-button type="primary" :size="size" @click="onHighConditionSet">高级设置</el-button>
+        <ConditionSelect ref="ConditionSelect" :data="data" :item="item" @change="dataChange"></ConditionSelect>
+        <HighConditionSelect ref="highSelect" :data="data" :item="item" @change="dataChange"></HighConditionSelect>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from "vue";
+  import fieldProps from "../../utils/fieldProps";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "ShowRule", // 必须与文件名匹配
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      const ConditionSelect = ref();
+      const highSelect = ref();
+      useWatch(props);
+      return {
+        ConditionSelect,
+        highSelect,
+        onConditionSet() {
+          ConditionSelect.value?.show();
+        },
+        onHighConditionSet() {
+          highSelect.value?.show();
+        },
+        dataChange(result: any) {
+          (props.data as any)[props.item?.data.fieldName] = result;
+        },
+      };
+    },
+  });
+</script>

package/src/components/Slider/index.vue

@@ -0,0 +1,38 @@
+<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-slider v-model="item.data.default" v-if="drag" :min="Number(item.data.min)" :max="Number(item.data.max)" :size="size"></el-slider>
+      <el-slider v-model="data[item.data.fieldName]" v-if="!drag" :min="Number(item.data.min)" :max="Number(item.data.max)" :size="size"></el-slider>
+    </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: "Slider", // 必须与文件名匹配
+    nameCn: "滑块",
+    icon: "icon-icon_huakuai",
+    formConfig: getFormConfig("Slider", [
+      { fieldName: "default", component: "InputNumber" },
+      { fieldName: "min", component: "Text" },
+      { fieldName: "max", component: "Text" },
+    ]),
+    props: {
+      ...fieldProps,
+    },
+    actionType: ["onChange"],
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/components/Switch/index.vue

@@ -0,0 +1,61 @@
+<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-switch v-model="item.data.default" v-if="drag" :size="size" />
+      <el-switch
+        v-model="data[item.data.fieldName]"
+        v-if="!drag"
+        :size="size"
+      />
+    </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: "Switch", // 必须与文件名匹配
+  nameCn: "开关",
+  icon: "icon-kaiguanguan",
+  formConfig: getFormConfig("Switch", [
+    { fieldName: "default", component: "Switch" },
+    { fieldName: "state", component: "Radio" },
+  ]),
+  props: {
+    ...fieldProps,
+  },
+  actionType: ["onChange"],
+  setup(props) {
+    useWatch(props);
+  },
+});
+</script>

package/src/components/Text/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 v-model="item.data.default" :placeholder="item.data.placeholder" v-if="drag" :size="size" clearable />
+      <el-input v-model="data[item.data.fieldName]" :placeholder="item.data.placeholder" v-if="!drag" :size="size" clearable @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: "Text", // 必须与文件名匹配
+    nameCn: "文本框",
+    icon: "icon-wenbenkuang",
+    formConfig: getFormConfig("Text", [
+      { fieldName: "default", component: "Text" },
+      { fieldName: "placeholder", component: "Text" },
+      { fieldName: 'maxLength', component: 'InputNumber' },
+      { fieldName: 'minLength', component: 'InputNumber' },
+      { fieldName: 'state', component: 'Radio' },
+    ]),
+    actionType: ["onChange", "onFocus", "onBlur"],
+    props: {
+      ...fieldProps,
+    },
+    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/TextArea/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' : '' }">
+      <el-input type="textarea" v-model="item.data.default" :placeholder="item.data.placeholder" v-if="drag" :size="size" />
+      <el-input type="textarea" v-model="data[item.data.fieldName]" :placeholder="item.data.placeholder" v-if="!drag" :size="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: "TextArea", // 必须与文件名匹配
+    nameCn: "文本域",
+    icon: "icon-textarea",
+    formConfig: getFormConfig("TextArea", [
+      { fieldName: "default", component: "Text" },
+      { fieldName: "placeholder", component: "Text" },
+      { fieldName: 'maxLength', component: 'InputNumber' },
+      { fieldName: 'minLength', component: 'InputNumber' },
+      { fieldName: 'autoHeight', component: 'Switch' },
+      { fieldName: 'state', component: 'Radio' },
+    ]),
+    actionType: ["onChange", "onFocus", "onBlur"],
+    props: {
+      ...fieldProps,
+    },
+    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/Time/index.vue

@@ -0,0 +1,36 @@
+<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-time-select v-model="item.data.default" start="08:30" step="00:15" end="18:30" :size="size" :placeholder="item.data.placeholder" v-if="drag"></el-time-select>
+      <el-time-select v-model="data[item.data.fieldName]" start="08:30" step="00:15" end="18:30" :size="size" :placeholder="item.data.placeholder" v-if="!drag"></el-time-select>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import fieldProps from "../../utils/fieldProps";
+  import { getFormConfig } from "../../utils/fieldConfig";
+  import { useWatch } from "../../utils/customHooks";
+  export default defineComponent({
+    ControlType: "Time", // 必须与文件名匹配
+    nameCn: "时间选择",
+    icon: "icon-shijian",
+    formConfig: getFormConfig("DateTime", [
+      { fieldName: "default", component: "Time" },
+      { fieldName: "placeholder", component: "Text" },
+    ]),
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "@codemirror/lang-javascript";
+
+interface Window {
+  JSONEditor: any;
+  VApp: any;
+}

package/src/layout/Divider.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="starfish-formitem starfish-form-divider" :class="drag ? 'formCover' : ''">
+    <div class="control">
+      <div :style="{ color: item.data.color }">{{ item.data.label }}</div>
+      <el-divider class="divider" :style="{ background: item.data.dividerColor }"></el-divider>
+    </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: "Divider", // 必须与文件名匹配
+    nameCn: "分割标题",
+    icon: "icon-fengexian1",
+    layout: true,
+    formConfig: getFormConfig("Divider", [
+      { fieldName: "color", component: "ColorSelect", label: "颜色设置" },
+      { fieldName: "dividerColor", component: "ColorSelect", label: "线条颜色设置" },
+    ], ['required', 'tip', 'rule']),
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      useWatch(props);
+    },
+  });
+</script>

package/src/layout/Info.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="starfish-formitem" :class="{ formCover: drag }">
+    <div class="label" v-if="!item.data.labelShow">
+      <label>{{ item.data.label }}</label>
+      <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-alert
+        :title="item.data.title"
+        :type="item.data.infotype"
+        :effect="item.data.effect"
+        :show-icon="item.data.showIcon"
+        :closable="item.data.closable"
+        :center="item.data.center"
+        :description="item.data.desc"
+        @close="execFunc('onClose')"
+      />
+    </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: "Info", // 必须与文件名匹配
+  nameCn: "提示",
+  icon: "icon-jinggao",
+  layout: true,
+  formConfig: getFormConfig(
+    "Info",
+    [
+      { fieldName: "title", component: "Text", label: "标题" },
+      { fieldName: "desc", component: "Text", label: "文字描述" },
+      { fieldName: "labelShow", component: "Switch", label: "标签隐藏" },
+      { fieldName: "center", component: "Switch", label: "文字是否居中" },
+      { fieldName: "closable", component: "Switch", label: "是否可关闭" },
+      { fieldName: "showIcon", component: "Switch", label: "	是否显示类型图标" },
+      { fieldName: "effect", component: "Selected" },
+      { fieldName: "infotype", component: "Selected" },
+    ],
+    ["required", "tip", "rule"]
+  ),
+  actionType: ["onClose"],
+  props: {
+    ...fieldProps,
+  },
+  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>