starfish-form-custom 1.0.0

package/src/common/KeyValueConfig.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="starfish-formitem starfish-formitem-action" :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 class="starfish-keyValueItem" v-for="(items, index) in data[item.data.fieldName].items" :key="index">
+        <div class="keyValueSelect">
+          <el-checkbox v-model="items.select" @change="getChangeSelect(items)"></el-checkbox>
+        </div>
+        <div class="keyValueInput">
+          <div class="inputItem">
+            <span>文本：</span>
+            <div>
+              <el-input v-model="items.label" size="small" @input="getChangeValue(items)" />
+            </div>
+          </div>
+          <div class="inputItem">
+            <span>值：</span>
+            <div>
+              <el-input v-model="items.value" size="small" @input="getChangeValue(items)" />
+            </div>
+          </div>
+        </div>
+        <div class="keyValueControl">
+          <div class="add" @click="addItem(index)">
+            <i class="iconfontui icon-zengjia"></i>
+          </div>
+          <div class="remove" @click="removeItem(index)">
+            <i class="iconfontui icon-shanchu"></i>
+          </div>
+          <div class="top" @click="handleTop(index)">
+            <i class="iconfontui icon-shangyi"></i>
+          </div>
+          <div class="bottom" @click="handleBottom(index)">
+            <i class="iconfontui icon-xiayi"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { getFormConfig } from "../utils/fieldConfig";
+  import fieldProps from "../utils/fieldProps";
+  export default defineComponent({
+    ControlType: "KeyValueConfig", // 必须与文件名匹配
+    nameCn: "键值对匹配",
+    icon: "icon-danxuankuang",
+    isHide: true,
+    formConfig: getFormConfig("KeyValueConfig"),
+    props: {
+      ...fieldProps,
+    },
+    setup(props) {
+      function getMaxId() {
+        let maxId = 0;
+        const data: any = props.data;
+        const item: any = props.item;
+        const allItems = data[item.data.fieldName];
+        allItems.items.forEach((item: any) => {
+          maxId = Math.max(item.id, maxId);
+        });
+        return maxId + 1;
+      }
+      return {
+        getChangeValue(sitem: any) {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          allItems.value = sitem.value;
+          allItems.id = sitem.id;
+        },
+        getChangeSelect(sitem: any) {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          if (sitem.select) {
+            allItems.value = sitem.value;
+            allItems.id = sitem.id;
+            allItems.items.forEach((item: any) => {
+              if (item.id !== sitem.id) {
+                item.select = false;
+              }
+            });
+          } else {
+            let isHave = false;
+            allItems.items.forEach((item: any) => {
+              if (item.select) {
+                isHave = true;
+              }
+            });
+            if (!isHave) {
+              allItems.value = "";
+              allItems.id = "";
+            }
+          }
+        },
+        removeItem(index: number) {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          if (allItems.items.length <= 1) return;
+          allItems.items.splice(index, 1);
+        },
+        handleTop(index: number) {
+          if (index > 0) {
+            const data: any = props.data;
+            const item: any = props.item;
+            const allItem = data[item.data.fieldName].items;
+            const newItem = allItem.splice(index, 1)[0];
+            allItem.splice(index - 1, 0, newItem);
+          }
+        },
+        handleBottom(index: number) {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItem = data[item.data.fieldName].items;
+          if (index < allItem.length - 1) {
+            const newItem = allItem.splice(index, 1)[0];
+            allItem.splice(index + 1, 0, newItem);
+          }
+        },
+        addItem(index: number) {
+          const maxId = getMaxId();
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          allItems.items.splice(index + 1, 0, {
+            label: "选项" + maxId,
+            value: "选项" + maxId,
+            select: false,
+            id: maxId,
+          });
+        },
+      };
+    },
+  });
+</script>
+

package/src/common/KeyValueConfigMult.vue

@@ -0,0 +1,139 @@
+<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 class="starfish-keyValueItem" v-for="(items, index) in data[item.data.fieldName].items" :key="index">
+        <div class="keyValueSelect">
+          <el-checkbox v-model="items.select" @change="getChangeSelect(items)"></el-checkbox>
+        </div>
+        <div class="keyValueInput">
+          <div class="inputItem">
+            <span>文本：</span>
+            <div>
+              <el-input v-model="items.label" size="small" @input="getChangeValue()" />
+            </div>
+          </div>
+          <div class="inputItem">
+            <span>值：</span>
+            <div>
+              <el-input v-model="items.value" size="small" @input="getChangeValue()" />
+            </div>
+          </div>
+        </div>
+        <div class="keyValueControl">
+          <div class="add" @click="addItem(index)">
+            <i class="iconfontui icon-zengjia"></i>
+          </div>
+          <div class="remove" @click="removeItem(index)">
+            <i class="iconfontui icon-shanchu"></i>
+          </div>
+          <div class="top" @click="handleTop(index)">
+            <i class="iconfontui icon-shangyi"></i>
+          </div>
+          <div class="bottom" @click="handleBottom(index)">
+            <i class="iconfontui icon-xiayi"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { getFormConfig } from "../utils/fieldConfig";
+  import fieldProps from "../utils/fieldProps";
+  export default defineComponent({
+    ControlType: "KeyValueConfigMult", // 必须与文件名匹配
+    nameCn: "多选键值对匹配",
+    icon: "icon-danxuankuang",
+    isHide: true,
+    props: {
+      ...fieldProps,
+    },
+    getFormConfig: getFormConfig("KeyValueConfigMult"),
+    setup(props) {
+      function getMaxId() {
+        let maxId = 0;
+        const data: any = props.data;
+        const item: any = props.item;
+        const allItems = data[item.data.fieldName];
+        allItems.items.forEach((item: any) => {
+          maxId = Math.max(item.id, maxId);
+        });
+        return maxId + 1;
+      }
+      return {
+        getChangeValue() {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          allItems.value = [];
+          allItems.items.forEach((item: any) => {
+            if (item.select) {
+              allItems.value.push(item.value);
+            }
+          });
+        },
+        getChangeSelect(sitem: any) {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          if (sitem.select) {
+            allItems.value.push(sitem.value);
+          } else {
+            allItems.value = [];
+            allItems.items.forEach((item: any) => {
+              if (item.select) {
+                allItems.value.push(item.value);
+              }
+            });
+          }
+        },
+
+        removeItem(index: number) {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          if (allItems.items.length <= 1) return;
+          allItems.items.splice(index, 1);
+        },
+        handleTop(index: number) {
+          if (index > 0) {
+            const data: any = props.data;
+            const item: any = props.item;
+            const allItem = data[item.data.fieldName].items;
+            const newItem = allItem.splice(index, 1)[0];
+            allItem.splice(index - 1, 0, newItem);
+          }
+        },
+        handleBottom(index: number) {
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItem = data[item.data.fieldName].items;
+          if (index < allItem.length - 1) {
+            const newItem = allItem.splice(index, 1)[0];
+            allItem.splice(index + 1, 0, newItem);
+          }
+        },
+        addItem(index: number) {
+          const maxId = getMaxId();
+          const data: any = props.data;
+          const item: any = props.item;
+          const allItems = data[item.data.fieldName];
+          allItems.items.splice(index + 1, 0, {
+            label: "选项" + maxId,
+            value: "选项" + maxId,
+            select: false,
+            id: maxId,
+          });
+        },
+      };
+    },
+  });
+</script>

package/src/common/Loading.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="loading" v-loading="true"></div>
+</template>
+<style lang="scss" scoped>
+.loading {
+  width: 100%;
+  height: 100%;
+  min-height: 40px;
+  ::v-deep .el-loading-spinner .circular {
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>

package/src/common/action.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="starfish-formitem starfish-formitem-action" :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-collapse v-if="data[item.data.fieldName]">
+        <el-collapse-item :title="key" name="1" v-for="(configItem, key) in data[item.data.fieldName]" :key="key">
+          <el-row :gutter="10">
+            <el-col class="list-group-item" :span="16">
+              <el-select v-model="data[item.data.fieldName][key]" class="m-2" placeholder="Select" :size="size" style="width: 100%">
+                <el-option v-for="item in action" :key="item.type" :label="item.funcName" :value="JSON.stringify(item)" />
+              </el-select>
+            </el-col>
+            <el-col :span="6" style="white-space: nowrap">
+              <el-button type="primary" circle :size="size" @click="onEditAction(configItem, key)">
+                <el-icon><Edit /></el-icon>
+              </el-button>
+              <el-button type="danger" circle :size="size" @click="onRemoveAction(key)">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
+      <el-dropdown style="width: 100%">
+        <el-button style="width: 100%" :size="size"> 新建动作+ </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(actionItem, index) in item.data.formConfig.items" :key="index" @click="addAction(actionItem.value)" :disabled="data[item.data.fieldName] && data[item.data.fieldName][actionItem.value]">{{ actionItem.label }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <formAction :isForm="true" :item="item" :data="data" ref="formAction"> </formAction>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, inject, computed } from "vue";
+  import { Delete, Edit } from "@element-plus/icons-vue";
+  import fieldProps from "../utils/fieldProps";
+  export default defineComponent({
+    ControlType: "Action", // 必须与文件名匹配
+    isHide: true,
+    props: {
+      ...fieldProps,
+    },
+    components: {
+      Delete,
+      Edit,
+    },
+    setup(props) {
+      const { actionContrl } = inject<any>("control") || {};
+      const action = computed(() => actionContrl?.get("action"));
+      const formAction = ref();
+      return {
+        action,
+        formAction,
+        addAction(type: string) {
+          formAction.value.onAction(type);
+        },
+        onEditAction(actionItem: string, key: any) {
+          const type = (JSON.parse(actionItem || "{}") || {}).type;
+          formAction.value.onEditAction(key, type);
+        },
+        onRemoveAction(key: any) {
+          delete props.data[props.item.data.fieldName][key];
+        },
+      };
+    },
+  });
+</script>

package/src/common/formAction.vue

@@ -0,0 +1,298 @@
+<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' }"
+      v-if="!isForm"
+    >
+      <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 style="width: 100%" @click="onAction" v-if="!isForm">
+        设置
+      </el-button>
+      <CustomDialog ref="actionRef">
+        <div class="common-layout">
+          <el-container
+            style="height: 100%; border: 1px solid rgb(238, 238, 238)"
+          >
+            <el-container>
+              <el-aside width="300px" class="event-script-aside">
+                <el-container class="is-vertical">
+                  <header class="action-header">
+                    <el-button type="text" :size="size" @click="addAction">
+                      +添加动作</el-button
+                    >
+                  </header>
+                  <el-main>
+                    <el-scrollbar>
+                      <div class="action-list">
+                        <div
+                          class="action"
+                          v-for="(item, index) in action"
+                          :key="index"
+                          @click="handleAction(item)"
+                          :class="
+                            currentAction && item.type == currentAction.type
+                              ? 'selectAction'
+                              : ''
+                          "
+                        >
+                          <span class="event-script-menu-i">Function</span>
+                          <div class="event-script-menu-label">
+                            {{ item.funcName }}
+                          </div>
+                          <div
+                            class="event-script-menu-action"
+                            v-if="!item.disabled"
+                          >
+                            <i
+                              title="复制"
+                              class="iconfontui icon-fuzhi"
+                              @click.stop="copyAction(item)"
+                            ></i>
+                            <i
+                              title="删除"
+                              class="iconfontui icon-shanchu1"
+                              @click.stop="deleteAction(item)"
+                            ></i>
+                          </div>
+                        </div>
+                      </div>
+                    </el-scrollbar>
+                  </el-main>
+                </el-container>
+              </el-aside>
+              <el-main class="event-script-main">
+                <el-container class="is-vertical">
+                  <header class="action-header event-script-main-header">
+                    <el-button type="primary" @click="onConfirm" size="small"
+                      >确定</el-button
+                    >
+                    <el-button type="primary" @click="onSave" size="small"
+                      >保存</el-button
+                    >
+                    <el-button @click="onCancel" size="small">取消</el-button>
+                  </header>
+                  <el-main v-if="currentAction" class="func_main">
+                    <el-scrollbar>
+                      <el-form :model="currentAction" :rules="rules">
+                        <el-form-item label="Function Name" prop="funcName">
+                          <el-input
+                            v-model="currentAction.funcName"
+                            :disabled="currentAction.disabled"
+                          />
+                        </el-form-item>
+                        <el-form-item prop="funcStr">
+                          <div class="coding">
+                            <div class="header">
+                              function {{ currentAction.funcName }}({{
+                                getField(currentAction.methods)
+                              }}){
+                            </div>
+                            <codemirror
+                              v-model="currentAction.funcStr"
+                              placeholder=""
+                              :style="{ height: '400px' }"
+                              mode="text/javascript"
+                              :autofocus="true"
+                              :indent-with-tab="true"
+                              :tab-size="2"
+                            />
+                            <div class="footer">}</div>
+                          </div>
+                        </el-form-item>
+                      </el-form>
+                    </el-scrollbar>
+                  </el-main>
+                </el-container>
+              </el-main>
+            </el-container>
+          </el-container>
+        </div>
+      </CustomDialog>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  reactive,
+  onMounted,
+  inject,
+  getCurrentInstance,
+} from "vue";
+// import { javascript } from "@codemirror/lang-javascript";
+import { Codemirror } from "vue-codemirror";
+export default defineComponent({
+  ControlType: "FormAction",
+  isHide: true,
+  components: {
+    Codemirror,
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    drag: {
+      type: Boolean,
+      default: false,
+    },
+    labelalign: {
+      type: String,
+      default: "top",
+    },
+    labelWidth: {
+      type: Number,
+    },
+    size: {
+      type: String,
+    },
+    isForm: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const { actionContrl: actionStore } = inject<any>("control") || {};
+    const actionRef = ref();
+    const { proxy } = getCurrentInstance() as any;
+    const action = ref(window.VApp.$Flex.deepClone(actionStore?.get("action")));
+    const currentAction = ref(
+      window.VApp.$Flex.deepClone(actionStore?.get("currentAction"))
+    );
+    // const extensions = [javascript()];
+    let actionType = "";
+    const rules = reactive({
+      funcName: [
+        {
+          required: true,
+          message: "函数名称必填",
+          trigger: "change",
+        },
+      ],
+    });
+    console.log(props);
+    onMounted(() => {
+      // props.data[props.item.data.fieldName] = action.value;
+    });
+    return {
+      rules,
+      actionRef,
+      action,
+      currentAction,
+      getField(methods: string) {
+        return window.VApp.$Flex.getField(methods);
+      },
+      // extensions,
+      onAction(type?: string) {
+        action.value = window.VApp.$Flex.deepClone(actionStore?.get("action"));
+        actionRef.value.init("动作设置", "icon-icon-bianji");
+        actionRef.value.show();
+        if (type) {
+          actionType = type;
+          const item = action.value.find((item: any) => {
+            if (item.type == type) {
+              return item;
+            }
+          });
+          if (item) {
+            currentAction.value = item;
+          } else {
+            proxy.addAction(type);
+          }
+        }
+      },
+      onEditAction(key: any, type: string) {
+        actionType = key;
+        action.value = window.VApp.$Flex.deepClone(actionStore?.get("action"));
+        actionRef.value.init("动作设置", "icon-icon-bianji");
+        actionRef.value.show();
+        const item = action.value.find((item: any) => {
+          if (item.type == type) {
+            return item;
+          }
+        });
+        if (item) {
+          currentAction.value = item;
+        }
+      },
+      handleAction(item: any) {
+        currentAction.value = item;
+      },
+      onSave() {
+        actionStore?.set("action", action.value);
+        actionRef.value.close();
+      },
+      onCancel() {
+        actionRef.value.close();
+      },
+      copyAction(item: any) {
+        const newAction = window.VApp.$Flex.deepClone(item);
+        newAction.funcName = newAction.funcName + "_copy";
+        newAction.type = window.VApp.$Flex.generateMixed(5);
+        action.value.push(newAction);
+        currentAction.value = newAction;
+      },
+      deleteAction(item: any) {
+        action.value = action.value.filter((actionItem: any) => {
+          if (actionItem.type !== item.type) {
+            return actionItem;
+          }
+        });
+        if (currentAction.value && item.type == currentAction.value.type) {
+          currentAction.value = null;
+        }
+      },
+      addAction(type?: string) {
+        const addAction = {
+          funcName: (type || "func") + "_" + window.VApp.$Flex.generateMixed(5),
+          type: window.VApp.$Flex.generateMixed(5),
+          funcStr: "",
+          methods: type,
+        };
+        action.value.push(addAction);
+        if (type) {
+          currentAction.value = addAction;
+        }
+      },
+      onConfirm() {
+        if (!props.data[props.item.data.fieldName]) {
+          props.data[props.item.data.fieldName] = {};
+        }
+        props.data[props.item.data.fieldName][actionType] = JSON.stringify(
+          currentAction.value
+        );
+        proxy.onSave();
+      },
+    };
+  },
+});
+</script>