starfish-form-custom 1.0.0

package/src/layout/Tabs.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="starfish-tabs_box">
+    <el-tabs v-model="activeName">
+      <el-tab-pane :label="colItem.name" :name="colItem.name" v-for="(colItem, index) in item.data.items" :key="index">
+        <template v-if="drag">
+          <draggable class="draggable-box" animation="300" ghostClass="itemGhost" v-model="colItem.list" @add="addControl($event, colItem.list, index)" group="starfish-form" @choose="chooseClick($event, colItem.list)" item-key="id" @update="changePos($event, colItem.list)">
+            <template #item="{ element, index }">
+              <Shape v-if="element.data" :active="currentId == element.id" :currentIndex="index" :currentId="element.id" :len="colItem.list.length" :item="element"> <component :is="element.ControlType" :drag="true" :item="element" :data="{}"></component></Shape>
+            </template>
+          </draggable>
+        </template>
+        <template v-else-if="!drag && colItem.list.length > 0">
+          <template v-for="listItem in colItem.list" >
+            <el-form-item :prop="listItem.data.fieldName" v-if="!listItem.layout" :key="listItem.id">
+              <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false"></component>
+            </el-form-item>
+            <template v-else>
+              <component ref="controlObj" :key="listItem.id" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false"></component>
+            </template>
+          </template>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, inject, getCurrentInstance } from "vue";
+  import { getFormConfig } from "../utils/fieldConfig";
+  import fieldProps from "../utils/fieldProps";
+  import { useWatch } from "../utils/customHooks";
+  export default defineComponent({
+    ControlType: "Tabs", // 必须与文件名匹配
+    nameCn: "标签页",
+    icon: "icon-zhediemianban",
+    layout: true,
+    formConfig: getFormConfig("Tabs", [
+      { fieldName: "items", component: "Panel", label: "折叠面板" },
+      { fieldName: "accordion", component: "Switch", label: "手风琴模式" },
+    ]),
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      const activeName = ref(props.item.data.items[0].name);
+      const { formStore, store } = inject("control") || {};
+      const { proxy } = getCurrentInstance() as any;
+      const currentId = computed(() => {
+        return formStore.get("currentId");
+      });
+      useWatch(props);
+      return {
+        activeName,
+        currentId,
+        addControl(e: any, list: any, index: number) {
+          props.item.data.items[index].list = list.map((item: any) => {
+            return proxy.$Flex.jsonToForm(item);
+          });
+          formStore.setFormCurrentId(props.item.data.items[index].list[e.newIndex].id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", props.item.data.items[index].list);
+        },
+        chooseClick(e: any, list: any) {
+          formStore.setFormCurrentId(list[e.oldIndex].id);
+          formStore.setFormCurrentIndex(e.oldIndex);
+          store.set("curList", list);
+        },
+        changePos(e: any, list: any) {
+          formStore.setFormCurrentId(list[e.newIndex]?.id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", list);
+        },
+      };
+    },
+  });
+</script>

package/src/layout/collapse.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="collapse_box">
+    <div class="control">
+      <el-collapse v-model="activeName" :accordion="item.data.accordion">
+        <el-collapse-item :title="colItem.name" :name="colItem.name" v-for="(colItem, index) in item.data.items" :key="index">
+          <template v-if="drag">
+            <draggable class="draggable-box" animation="300" ghostClass="itemGhost" v-model="colItem.list" @add="addControl($event, colItem.list, index)" group="starfish-form" @choose="chooseClick($event, colItem.list)" item-key="id" @update="changePos($event, colItem.list)">
+              <template #item="{ element, index }">
+                <Shape v-if="element.data" :active="currentId == element.id" :currentIndex="index" :currentId="element.id" :len="colItem.list.length" :item="element"> <component :is="element.ControlType" :drag="true" :item="element" :data="{}"></component></Shape>
+              </template>
+            </draggable>
+          </template>
+          <template v-else-if="!drag && colItem.list.length > 0">
+            <template v-for="listItem in colItem.list" >
+              <el-form-item :prop="listItem.data.fieldName" v-if="!listItem.layout" :key="listItem.id">
+              <!-- v-if="listItem.show" -->
+                <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
+              </el-form-item>
+              <template v-else>
+                <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :key="listItem.id" :drag="false" ></component>
+              </template>
+            </template>
+          </template>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, inject, getCurrentInstance } from "vue";
+  import { getFormConfig } from "../utils/fieldConfig";
+  import fieldProps from "../utils/fieldProps";
+  import { useWatch } from "../utils/customHooks";
+  export default defineComponent({
+    ControlType: "Collapse", // 必须与文件名匹配
+    nameCn: "折叠面板",
+    icon: "icon-zhediemianban",
+    layout: true,
+    formConfig: getFormConfig("Collapse", [
+      { fieldName: "items", component: "Panel", label: "折叠面板" },
+      { fieldName: "accordion", component: "Switch", label: "手风琴模式" },
+    ]),
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      const activeName = ref(props.item.data.items[0].name);
+      const { formStore, store } = inject("control") || {};
+      const { proxy } = getCurrentInstance() as any;
+      const currentId = computed(() => {
+        return formStore.get("currentId");
+      });
+      useWatch(props);
+      return {
+        activeName,
+        currentId,
+        addControl(e: any, list: any, index: number) {
+          props.item.data.items[index].list = list.map((item: any) => {
+            return proxy.$Flex.jsonToForm(item);
+          });
+          formStore.setFormCurrentId(props.item.data.items[index].list[e.newIndex].id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", props.item.data.items[index].list);
+        },
+        chooseClick(e: any, list: any) {
+          formStore.setFormCurrentId(list[e.oldIndex].id);
+          formStore.setFormCurrentIndex(e.oldIndex);
+          store.set("curList", list);
+        },
+        changePos(e: any, list: any) {
+          formStore.setFormCurrentId(list[e.newIndex]?.id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", list);
+        },
+      };
+    },
+  });
+</script>

package/src/layout/grid.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="starfish-grid_box">
+    <el-row :gutter="item.data.gutter">
+      <template v-if="drag">
+        <el-col class="grid-col" v-for="(colItem, index) in gridList" :key="index" :span="colItem.span">
+          <draggable class="draggable-box" animation="300" ghostClass="itemGhost" v-model="colItem.list" @add="addControl($event, index)" group="starfish-form" @choose="chooseClick($event, index)" item-key="id" @update="changePos($event, index)">
+            <template #item="{ element, index }">
+              <Shape v-if="element.data" :active="currentId == element.id" :currentId="element.id" :currentIndex="index" :list="colItem.list">
+                <component :is="element.ControlType" :drag="true" :item="element" :data="{}"></component>
+              </Shape>
+            </template>
+          </draggable>
+        </el-col>
+      </template>
+      <template v-else-if="!drag && item.data.columns.length > 0">
+        <el-col class="grid-col" v-for="(colItem, index) in item.data.columns" :key="index" :span="colItem.span">
+          <template v-for="listItem in colItem.list" >
+            <el-form-item :prop="listItem.data.fieldName" :key="listItem.id" v-if="!listItem.layout">
+              <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false"></component>
+            </el-form-item>
+            <template v-else>
+              <component ref="controlObj" @change="$emit('change')" :key="listItem.id" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false"></component>
+            </template>
+          </template>
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, inject, computed, getCurrentInstance, nextTick } from "vue";
+  import { getFormConfig } from "../utils/fieldConfig";
+  import fieldProps from "../utils/fieldProps";
+  import { useWatch } from "../utils/customHooks";
+  export default defineComponent({
+    ControlType: "Grid", // 必须与文件名匹配
+    nameCn: "栅格布局",
+    icon: "icon-35zhage",
+    layout: true,
+    formConfig: getFormConfig(
+      "Grid",
+      [
+        { fieldName: "gutter", component: "InputNumber" },
+        { fieldName: "columns", component: "ListConfig" },
+      ],
+      ["required", "rule", "tip"]
+    ),
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      console.log(props);
+      const gridList = computed(() => props.item.data.columns);
+      const { proxy } = getCurrentInstance() as any;
+      const { formStore, store } = inject("control") || {};
+      const chooseClick = (e: any, index: number) => {
+        formStore.setFormCurrentId(gridList.value[index].list[e.oldIndex]?.id);
+        formStore.setFormCurrentIndex(e.oldIndex);
+        store.set("curList", gridList.value[index].list);
+      };
+      const currentId = computed(() => {
+        return formStore.get("currentId");
+      });
+      useWatch(props);
+      return {
+        gridList,
+        chooseClick,
+        currentId,
+        changePos(e: any, index: number) {
+          formStore.setFormCurrentId(gridList.value[index].list[e.newIndex]?.id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", gridList.value[index].list);
+        },
+        async addControl(e: any, index: number) {
+          gridList.value.forEach((colItem: any) => {
+            colItem.list = colItem.list.map((item: any) => {
+              return proxy.$Flex.jsonToForm(item);
+            });
+          });
+          await nextTick();
+          formStore.setFormCurrentId(gridList.value[index].list[e.newIndex].id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", gridList.value[index].list);
+        },
+      };
+    },
+  });
+</script>

package/src/layout/table.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="starfish-table_box">
+    <table class="table_layout" :class="item.data.borderShow ? 'table_layout_border' : ''">
+      <tr v-for="(trItem, index) in item.data.trs" :key="index">
+        <td v-for="(tdItem, tdIndex) in trItem.tds" :key="tdIndex">
+          <template v-if="drag">
+            <draggable class="draggable-box" animation="300" ghostClass="itemGhost" v-model="tdItem.list" @add="addControl($event, tdItem.list, index, tdIndex)" group="starfish-form" @choose="chooseClick($event, tdItem.list)" item-key="id" @update="changePos($event, tdItem.list)">
+              <template #item="{ element, index }">
+                <Shape v-if="element.data" :active="currentId == element.id" :currentIndex="index" :currentId="element.id" :len="tdItem.list.length" :item="element"> <component :is="element.ControlType" :drag="true" :item="element" :data="{}"></component></Shape>
+              </template>
+            </draggable>
+          </template>
+          <template v-else-if="!drag && tdItem.list.length > 0">
+            <template v-for="listItem in tdItem.list">
+              <el-form-item :prop="listItem.data.fieldName"  :key="listItem.id" v-if="!listItem.layout">
+                <component ref="controlObj" @change="$emit('change')" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
+              </el-form-item>
+              <template v-else>
+                <component ref="controlObj" @change="$emit('change')"  :key="listItem.id" :is="listItem.ControlType" :item="listItem" :data="data || '{}'" :drag="false" ></component>
+              </template>
+            </template>
+          </template>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, getCurrentInstance, inject, computed } from "vue";
+  import { getFormConfig } from "../utils/fieldConfig";
+  import fieldProps from "../utils/fieldProps";
+  import { useWatch } from "../utils/customHooks";
+  export default defineComponent({
+    ControlType: "TableLayout",
+    nameCn: "表格布局",
+    icon: "icon-biaoge1",
+    layout: true,
+    props: {
+      ...fieldProps,
+    },
+    formConfig: getFormConfig(
+      "TableLayout",
+      [
+        // { fieldName: "borderShow", component: "Switch", label: "是否显示边框" },
+        // {fieldName: 'borderWidth', component: 'InputNumber', label: "边框宽度"}
+      ],
+      ["required", "rule", "tip"]
+    ),
+    setup(props) {
+      const { proxy } = getCurrentInstance() as any;
+      const { formStore, store } = inject("control") || {};
+      const currentId = computed(() => {
+        return formStore.get("currentId");
+      });
+      useWatch(props);
+      return {
+        currentId,
+        chooseClick(e: any, list: any[]) {
+          formStore.setFormCurrentId(list[e.oldIndex].id);
+          formStore.setFormCurrentIndex(e.oldIndex);
+          store.set("curList", list);
+        },
+        changePos(e: any, list: any[]) {
+          formStore.setFormCurrentId(list[e.newIndex]?.id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", list);
+        },
+        addControl(e: any, list: any[], trIndex: number, tdIndex: number) {
+          props.item.data.trs[trIndex].tds[tdIndex].list = list.map((item: any) => {
+            return proxy.$Flex.jsonToForm(item);
+          });
+          formStore.setFormCurrentId(props.item.data.trs[trIndex].tds[tdIndex].list[e.newIndex].id);
+          formStore.setFormCurrentIndex(e.newIndex);
+          store.set("curList", props.item.data.trs[trIndex].tds[tdIndex].list);
+        },
+      };
+    },
+  });
+</script>
+

package/src/main.ts

@@ -0,0 +1,62 @@
+import { App, defineAsyncComponent } from "vue";
+import "./styles/index.scss";
+import { getFormConfig } from "./utils/fieldConfig";
+import _ from "@/utils/_";
+import Loading from "@/common/Loading.vue";
+
+const utilFuns: any = {};
+const files: any = import.meta.glob(["./common/*", "./components/*/*", "./layout/*", "!./components/RichText/index.vue", "!./components/JsonEditor/index.vue", "!./components/Rule/index.vue", "!./common/formAction.vue"], { eager: true });
+Object.keys(files).forEach((fileName) => {
+  const result = files[fileName].default;
+  if (fileName.indexOf(".vue") != -1) {
+    utilFuns[result.ControlType] = result;
+  }
+});
+// 富文本
+const RichText = defineAsyncComponent({
+  loader: () => import("./components/RichText/index.vue"),
+  loadingComponent: Loading,
+});
+RichText.ControlType = "RichText"; // 必须与文件名匹配
+RichText.nameCn = "富文本";
+RichText.icon = "icon-textEdit";
+RichText.formConfig = getFormConfig("RichText");
+utilFuns[RichText.ControlType] = RichText;
+// json编辑器
+const jsonEditor = defineAsyncComponent({
+  loader: () => import("./components/JsonEditor/index.vue"),
+  loadingComponent: Loading,
+});
+jsonEditor.ControlType = "JsonEditor"; // 必须与文件名匹配
+jsonEditor.nameCn = "JSON编辑";
+jsonEditor.icon = "icon-json-full";
+jsonEditor.formConfig = getFormConfig("JsonEditor", [{ fieldName: "default", component: "JsonEditor" }]);
+jsonEditor.rule = _.getJsonValidate();
+utilFuns[jsonEditor.ControlType] = jsonEditor;
+
+const formAction = defineAsyncComponent({
+  loader: () => import("./common/formAction.vue"),
+  loadingComponent: Loading,
+});
+formAction.ControlType = "FormAction"; // 必须与文件名匹配
+formAction.isHide = true;
+utilFuns[formAction.ControlType] = formAction;
+// 规则
+const Rule = defineAsyncComponent({
+  loader: () => import("./components/Rule/index.vue"),
+  loadingComponent: Loading,
+});
+Rule.ControlType = "Rule"; // 必须与文件名匹配
+Rule.rule = _.getJsonValidate();
+utilFuns[Rule.ControlType] = Rule;
+const install = (app: App) => {
+  app.config.globalProperties.$formcomponents = utilFuns;
+  // for (const key in utilFuns) {
+  //   app.component(key, utilFuns[key]);
+  // }
+};
+export const Dynamicform = defineAsyncComponent(() => import("./starfish-form.vue"));
+
+export default {
+  install,
+};

package/src/starfish-form.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="starfish-dynamicform">
+    <el-form ref="ruleForm" :model="formResult" :rules="rules" label-width="120px" class="demo-ruleForm" :size="globalConfig.size || 'large'" :validate-on-rule-change="false">
+      <template v-for="item in allFormList" >
+        <el-form-item :prop="item.data.fieldName" v-if="!item.layout && item.show" :key="item.id">
+          <component ref="controlObj" @change="handleControlChange" :is="item.ControlType" v-bind="globalConfig" :item="item" :data="formResult || '{}'" :drag="false"></component>
+        </el-form-item>
+        <template v-else-if="item.show">
+          <component ref="controlObj" @change="handleControlChange" :is="item.ControlType" :key="item.id" v-bind="globalConfig" :item="item" :data="formResult || '{}'" :drag="false"></component>
+        </template>
+      </template>
+    </el-form>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, onMounted, getCurrentInstance, toRaw, PropType } from "vue";
+  export default defineComponent({
+    name: "Dynamicform",
+    props: {
+      allFormList: {
+        type: Array as PropType<any>,
+        default() {
+          return [];
+        },
+      },
+      formResult: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+      globalConfig: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+    },
+    setup(props: any, { emit }) {
+      const { proxy } = getCurrentInstance() as any;
+      const rules: any = ref({});
+      const ruleForm = ref();
+      const controlObj = ref();
+      props.allFormList?.forEach((item: any) => {
+        getRules(item);
+      });
+
+      function getFormListRules(rules: any[]) {
+        const result: any[] = [];
+        if (Array.isArray(rules) && rules && rules.length > 0) {
+          rules.forEach((item) => {
+            if (item.type == "enum") {
+              const func = eval(`(${item.value})`);
+              result.push({
+                validator: func,
+                trigger: "blur",
+              });
+            } else if (item.type == "func") {
+              const mainData = props.formResult;
+              const func = eval(`((rule, value, callback, mainData = mainData) => {${item.value.func}})`);
+              result.push({
+                validator: func,
+                trigger: "blur",
+              });
+              console.log('mainData', mainData)
+            } else if (item.type == "high") {
+              if (item.value.ruleType == 5) {
+                result.push({
+                  validator: eval(item.value.validor),
+                  trigger: item.value.trigger,
+                });
+                return;
+              }
+              // let high = JSON.parse(JSON.stringify(item.value));
+              // delete high.ruleType;
+              result.push(item.value);
+            }
+          });
+        }
+        return result;
+      }
+
+      function getRules(item: any) {
+        if (!item.layout) {
+          let rule: any[] = [];
+          if (item.data.required) {
+            rule.push({
+              required: true,
+              message: "请输入" + item.data.label,
+              trigger: "blur",
+            });
+          }
+          if (typeof item.data.rule == "string") {
+            rule = rule.concat(proxy.$Flex.tryParseJson(item.data.rule));
+          } else {
+            rule = rule.concat(getFormListRules(item.data.rule));
+          }
+          // 特殊的jsoneditor表单要单独处理
+          if (item.data.json) {
+            rule.push(...proxy.$Flex.getJsonValidate());
+          }
+          rules.value[item.data.fieldName] = rule;
+        } else if (item.layout) {
+          if (item.ControlType == "Grid") {
+            item.data.columns.forEach((colItem: any) => {
+              colItem.list.forEach((listItem: any) => {
+                getRules(listItem);
+              });
+            });
+          } else if (item.ControlType == "TableLayout") {
+            const trs = item.data.trs;
+            trs.forEach((trItem: any) => {
+              trItem.tds.forEach((tdItem: any) => {
+                tdItem.list.forEach((listItem: any) => {
+                  getRules(listItem);
+                });
+              });
+            });
+          } else if (item.ControlType == "Collapse" || item.ControlType == "Tabs") {
+            const items = item.data.items;
+            items.forEach((colItem: any) => {
+              colItem.list.forEach((listItem: any) => {
+                getRules(listItem);
+              });
+            });
+          }
+        }
+      }
+
+      const handleControlChange = () => {
+        const allFormLists: any = props.allFormList;
+        allFormLists.forEach((item: any) => {
+          if (item.data.showRule === "{}") {
+            item.show = true;
+          } else {
+            try {
+              if (Array.isArray(item.data.showRule)) {
+                item.show = conditionChange(transformData(toRaw(item.data.showRule)));
+              } else {
+                item.show = conditionChange(toRaw(item.data.showRule));
+              }
+            } catch (e) {
+              item.show = true;
+            }
+          }
+        });
+        executeFunc("updated");
+        emit("change");
+      };
+      function transformData(data: any) {
+        /**普通模式转为高级模式的数据结构,方便复用 */
+        const r: any = [];
+        data.forEach((item: any) => {
+          r.push({
+            type: "andgroup",
+            result: item.map((d: any) => {
+              return {
+                type: "data",
+                data: d,
+              };
+            }),
+          });
+        });
+        const result = {
+          type: "orgroup",
+          result: r,
+        };
+        return result;
+      }
+      function conditionChange(data: any) {
+        if (data.type == "andgroup") {
+          const result = data.result
+            .map((item: any) => {
+              const r = conditionChange(item);
+              return r;
+            })
+            .find((item: boolean) => {
+              return item == false;
+            });
+          return result === undefined ? true : result;
+        } else if (data.type == "orgroup") {
+          const result = data.result
+            .map((item: any) => {
+              const r = conditionChange(item);
+              return r;
+            })
+            .find((item: boolean) => {
+              return item == true;
+            });
+          return result === undefined ? false : result;
+        } else if (data.type == "data") {
+          const result = data.data;
+          const formResults: any = props.formResult;
+          const value = formResults[result.field];
+          let isShow = false;
+          switch (result.logic) {
+            case "=":
+              isShow = value == result.value;
+              break;
+            case "!=":
+              isShow = value != result.value;
+              break;
+            case "in":
+              if (Array.isArray(value)) {
+                value.find((item) => {
+                  if (result.value.include(item)) {
+                    isShow = result.value.includes(item);
+                    return item;
+                  }
+                });
+              } else {
+                isShow = result.value.includes(value);
+              }
+              break;
+            case "not in":
+              if (Array.isArray(value)) {
+                value.find((item) => {
+                  if (!result.value.include(item)) {
+                    isShow = !result.value.includes(item);
+                    return item;
+                  }
+                });
+              } else {
+                isShow = !result.value.includes(value);
+              }
+              break;
+          }
+          return isShow;
+        }
+      }
+      function reset() {
+        ruleForm.value.resetFields();
+      }
+      function getValidate() {
+        return new Promise((resolve) => {
+          ruleForm.value.validate((valide: boolean) => {
+            resolve(valide);
+          });
+        });
+      }
+      onMounted(() => {
+        handleControlChange();
+        executeFunc("mounted");
+      });
+      function executeFunc(funcName: string) {
+        const mountedAction = props.globalConfig.action?.find((item: any) => {
+          if (item.type == funcName) {
+            return item;
+          }
+        });
+        if (mountedAction) {
+          eval(`(function(){${mountedAction.funcStr}}).call(proxy)`);
+        }
+      }
+      return {
+        rules,
+        ruleForm,
+        controlObj,
+        handleControlChange,
+        reset,
+        getValidate,
+      };
+    },
+  });
+</script>

package/src/styles/action.scss

@@ -0,0 +1,25 @@
+.starfish-formitem-action {
+  .label {
+    align-self: flex-start;
+  }
+  .el-collapse-item {
+    border: 1px solid #ebeef5;
+    border-bottom-color: #e1e1e1;
+    .el-collapse-item__header {
+      background: #ebeef5;
+      height: 20px;
+      line-height: 20px;
+      padding: 5px;
+      font-size: 12px;
+      &.is-active {
+        border-bottom-color: transparent;
+      }
+    }
+    .el-collapse-item__content {
+      padding: 5px;
+      .el-button + .el-button {
+        margin-left: 5px;
+      }
+    }
+  }
+}