star-horse-lowcode 2.7.63 → 2.7.65

package/src/components/formcomp/utils/ItemRelationEventUtils.ts

@@ -0,0 +1,284 @@
+import { error } from "@/utils/message";
+import { userFunction } from "@/api/user_func";
+import { compDynamicData } from "@/api/star_horse_utils";
+import piniaInstance from "@/store";
+import { useSelfOperationStore } from "@/store/SelfOperation";
+import { useDesignFormStore } from "@/store/DesignForm";
+import { computed, isRef, unref, watch } from "vue";
+
+const designForm = useDesignFormStore(piniaInstance);
+const userOperation = useSelfOperationStore(piniaInstance);
+
+const isDesign = computed(() => designForm.isEdit);
+/**
+ * Change 事件
+ * @param context
+ * @param formData
+ */
+const change = (context: any, formData: any) => {
+  const field = context.field as any;
+  const relation = field.preps?.dataRelation;
+  operationRelation(relation, "change", formData, field.fieldName);
+};
+/**
+ * Input 事件
+ * @param context
+ * @param formData
+ */
+const input = (context: any, formData: any) => {
+  const field = context.field as any;
+  const relation = field.preps?.dataRelation;
+  operationRelation(relation, "input", formData, field.fieldName);
+};
+/**
+ * Focus 事件
+ * @param context
+ * @param formData
+ */
+const focus = (context: any, formData: any) => {
+  const field = context.field as any;
+  const relation = field.preps?.dataRelation;
+  operationRelation(relation, "focus", formData, field.fieldName);
+};
+/**
+ * Blur 事件
+ * @param context
+ * @param formData
+ */
+const blur = (context: any, formData: any) => {
+  const field = context.field as any;
+  const relation = field.preps?.dataRelation;
+  operationRelation(relation, "blur", formData, field.fieldName);
+};
+/**
+ * Enter 事件
+ * @param context
+ * @param formData
+ */
+const mouseEnter = (context: any, formData: any) => {
+  const field = context.field as any;
+  const relation = field.preps?.dataRelation;
+  operationRelation(relation, "enter", formData, field.fieldName);
+};
+
+/**
+ * 操作关联关系
+ * @param relation
+ * @param actionName
+ * @param formData
+ * @param currentName
+ */
+const operationRelation = async (
+  relation: any,
+  actionName: string,
+  formData: any,
+  currentName: string,
+) => {
+  if (!relation || actionName != relation.actionName) {
+    return;
+  }
+  const relations: Array<any> = relation?.relationDetails;
+  const currentVal = formData[currentName];
+  if (!relations || relations.length == 0) {
+    return;
+  }
+  for (const index in relations) {
+    const temp = relations[index];
+    const conditon: string = temp.controlCondition;
+    const fieldName: string = temp.relationFields;
+    if (!conditon || !fieldName) {
+      continue;
+    }
+    const field = userOperation.getFormItem(fieldName);
+    const params: any = temp.params;
+    //数据联动
+    if (conditon == "dataLinkage") {
+      formData[fieldName + "OptionList"] = await compDynamicData({
+        preps: temp,
+      });
+    } else if (conditon == "eqDisable" || conditon == "eqDisableOrEditable") {
+      //输入的值等于指定值隐藏否则显示
+      formData["_" + fieldName + "Editable"] = !(currentVal == params);
+    } else if (conditon == "eqEditable" || conditon == "eqEditableOrDisable") {
+      //输入的值等于指定值显示否则隐藏
+      formData["_" + fieldName + "Editable"] = currentVal == params;
+    } else if (conditon == "assignValue") {
+      //输入的值等于指定值时赋予新值
+      if (
+        field.itemType == "select" ||
+        field.itemType == "tselect" ||
+        field.itemType == "autocomplete" ||
+        field.itemType == "cascade"
+      ) {
+        field.preps.values = JSON.parse(params);
+      } else {
+        formData[field.fieldName] = params;
+      }
+    } else if (conditon == "changeType") {
+      //输入的值等于指定值时改变字段类型
+      field.itemType = params;
+    }
+  }
+};
+/**
+ * 所有触发的事件
+ * @param context
+ * @param emits
+ * @param formData
+ * @param actionName
+ * @param isInit
+ */
+const allAction = (
+  context: any,
+  emits: any,
+  formData: any,
+  actionName: string,
+  isInit: boolean = false,
+) => {
+  const currentData = unref(formData);
+  //设计时的初始化不作处理
+  // const field = context.field as any;
+  try {
+    emits("selfFunc", actionName, currentData);
+  } catch (e) {
+    error("事件触发异常：" + e);
+  }
+  if (isDesign.value && isInit) {
+    return;
+  }
+
+  //处理连动
+  switch (actionName) {
+    case "change":
+      change(context, currentData);
+      break;
+    case "input":
+      input(context, currentData);
+      break;
+    case "focus":
+      focus(context, currentData);
+      break;
+    case "blur":
+      blur(context, currentData);
+      break;
+    case "enter":
+    case "keydown.enter":
+      mouseEnter(context, currentData);
+      break;
+    default:
+      console.log("不支持的事件：" + actionName);
+      return;
+  }
+};
+/**
+ * Button 组件的点击事件
+ * @param context
+ * @param emits
+ * @param formData
+ * @param code
+ * @param evtName 时间名称
+ */
+const buttonAction = (
+  context: any,
+  emits: any,
+  formData: any,
+  code: string,
+  evtName: string = "click",
+) => {
+  const currentData = isRef(formData) ? formData.value : formData;
+  if (code) {
+    userFunction(code, context, currentData);
+  } else {
+    const field = context.field as any;
+    currentData["starHorseBtnName"] = field.fieldName;
+    const actions = field.actions;
+    if (actions) {
+      if (typeof actions === "function") {
+        actions(formData);
+      } else {
+        actions[evtName]?.(formData);
+      }
+    } else {
+      emits("selfFunc", currentData);
+    }
+  }
+};
+/**
+ * 检查是否禁用
+ * @param attrs
+ */
+const checkIsDisabled = (attrs: any) => {
+  // const {attrs} = context;
+  const { field } = attrs;
+  const fieldName = field.fieldName;
+  const isExplicitlyDisabled =
+    attrs?.disabled || field.disabled || field.preps?.disabled;
+  const eidtDidsabled =
+    (attrs.editDisabled || field.editDisabled || field.preps?.editDisabled) &&
+    field.preps?.starHorseFieldSource != 1;
+  const isImplicitlyDisabled =
+    !attrs?.formData?.[`_${fieldName}Editable`] && field?.preps?.disabled;
+  return (
+    eidtDidsabled === true ||
+    isExplicitlyDisabled === true ||
+    isImplicitlyDisabled === true
+  );
+};
+const useFormField = (context: any, field: any) => {
+  const fieldName = computed(() => field.fieldName);
+  const updateFormData = (value: any) => {
+    const newData = context.attrs.formData;
+    newData[fieldName.value] = value;
+    // context.emit('form-data-update', newData);
+  };
+
+  return {
+    fieldValue: computed({
+      get: () => context.attrs.formData[fieldName.value],
+      set: updateFormData,
+    }),
+  };
+};
+const initCompCallEvent = (props: any, emits: any, formData: any) => {
+  const events: string[] = Object.keys(props.field.actions || {});
+  // 新增数据检查
+  if (
+    !props.isSearch &&
+    !props.field.preps?.["stopInitCallAction"] &&
+    events?.length > 0
+  ) {
+    if (
+      Object.keys(formData.value || {}).length == 0 ||
+      !formData.value[props.field.fieldName]
+    ) {
+      const stop = watch(
+        () => formData.value[props.field.fieldName],
+        (val) => {
+          if (val) {
+            doInitCallEvent(props, emits, formData);
+            stop();
+          }
+        },
+        { immediate: true },
+      );
+      return;
+    }
+    doInitCallEvent(props, emits, formData);
+  }
+};
+const doInitCallEvent = (props: any, emits: any, formData: any) => {
+  const events: string[] = Object.keys(props.field.actions || {});
+  if (props.field.preps?.["starHorseFieldSource"] == 5) {
+    return;
+  }
+  events?.forEach((event) => {
+    allAction(props, emits, formData, event, true);
+  });
+};
+export {
+  allAction,
+  buttonAction,
+  checkIsDisabled,
+  useFormField,
+  initCompCallEvent,
+};

package/src/components/help.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts" name="help">
+import StarHorseIcon from "@/components/comp/StarHorseIcon.vue";
+
+defineProps({
+  width: { type: Number, default: 340 },
+  message: { type: String, required: true, default: "帮助" },
+});
+</script>
+<template>
+  <el-popover
+    trigger="hover"
+    :popper-style="{ width: 'unset !important' }"
+    placement="bottom-start"
+  >
+    <template #reference>
+      <star-horse-icon
+        icon-class="help"
+        color="var(--star-horse-style)"
+        size="12px"
+        style="cursor: pointer"
+      />
+    </template>
+    <div style="font-size: 12px">
+      <pre
+        >{{ message }}
+  </pre
+      >
+    </div>
+  </el-popover>
+</template>
+<style scoped lang="scss"></style>

package/src/components/menu/MenuItem.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import { compKey } from "@/api/system";
+defineOptions({
+  name: "MenuItem",
+});
+const props = defineProps({
+  item: { type: Object as PropType<any>, required: true },
+  preps: {
+    type: Object as PropType<any>,
+    default: () => {
+      return {
+        id: "id",
+        icon: "icon",
+        value: "value",
+        label: "name",
+        children: "children",
+      };
+    },
+  },
+  level: { type: Number, default: 1 },
+});
+const emits = defineEmits(["selectItem"]);
+const selectItem = (item: any) => {
+  emits("selectItem", item);
+};
+let menuColor = computed(() =>
+  props.level > 1 ? "var(--star-horse-shadow)" : "var(--star-horse-background)",
+);
+</script>
+<template>
+  <el-sub-menu
+    popper-class="popper-class"
+    v-if="item[preps.children ?? 'children']?.length > 0"
+    :index="item[preps.id]"
+    @click="selectItem(item)"
+  >
+    <template #title>
+      <el-icon class="star-icon">
+        <component :is="item[preps.icon] || 'document'" />
+      </el-icon>
+      <span>{{ item[preps.label] }} </span>
+    </template>
+    <MenuItem
+      :item="sitem"
+      :level="level + 1"
+      :preps="preps"
+      @selectItem="selectItem"
+      v-for="(sitem, key) in item[preps.children ?? 'children']"
+      :key="compKey(sitem, key)"
+    />
+  </el-sub-menu>
+  <el-menu-item
+    popper-class="popper-class"
+    v-else
+    :index="item[preps.id]"
+    @click="selectItem(item)"
+  >
+    <el-icon class="star-icon">
+      <component :is="item[preps.icon] || 'document'" />
+    </el-icon>
+    <template #title>
+      <span>{{ item[preps.label] }} </span>
+    </template>
+  </el-menu-item>
+</template>
+<style lang="scss" scoped>
+.star-icon {
+  font-size: 22px;
+}
+
+.popper-class {
+  background: var(--star-horse-white) !important;
+}
+
+.el-sub-menu {
+  background: v-bind(menuColor);
+  margin-top: 1px;
+}
+
+:deep(.el-sub-menu__title) {
+  height: 40px;
+  line-height: 40px;
+}
+
+:deep(.el-scrollbar__view) {
+  height: 100%;
+}
+
+.popers {
+  overflow: auto;
+  height: 100% !important;
+  z-index: 999999;
+}
+</style>

package/src/components/menu/SubMenu.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, ModelRef } from "vue";
+import { compKey } from "@/api/system";
+
+const props = defineProps({
+  level: { type: Number, default: 1 },
+});
+const dataList: ModelRef<any> = defineModel("dataList");
+let menuColor = computed(() =>
+  props.level > 1 ? "var(--star-horse-shadow)" : "var(--star-horse-background)",
+);
+</script>
+<template>
+  <div
+    v-if="level > 1"
+    style="height: 2px; background: var(--star-horse-white)"
+  ></div>
+  <template v-for="(item, key) in dataList" :key="compKey(item, key)">
+    <el-sub-menu v-if="item.children?.length > 0" :index="item.meta.menuId">
+      <template #title>
+        <el-icon class="star-icon">
+          <component :is="item.meta.menuIcon || 'document'" />
+        </el-icon>
+        <span>{{ item.meta.title }} </span>
+      </template>
+      <SubMenu v-model:dataList="item.children" :level="level + 1"></SubMenu>
+    </el-sub-menu>
+    <el-menu-item popper-class="popper-class" v-else :index="item.meta.menuId">
+      <el-icon class="star-icon">
+        <component :is="item.meta.menuIcon || 'document'" />
+      </el-icon>
+      <template #title>
+        <router-link :to="{ path: item.path }">{{
+          item.meta.title
+        }}</router-link>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+<style lang="scss" scoped>
+.star-icon {
+  font-size: 22px;
+}
+
+.popper-class {
+  background: var(--star-horse-style);
+}
+
+.el-sub-menu {
+  background: v-bind(menuColor);
+  margin-top: 1px;
+}
+
+:deep(.el-sub-menu__title) {
+  height: 40px;
+  line-height: 40px;
+}
+
+:deep(.el-scrollbar__view) {
+  height: 100%;
+}
+
+.popers {
+  overflow: auto;
+  height: 100% !important;
+  z-index: 999999;
+}
+</style>

package/src/components/menu/SubSystemMenu.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { PropType, ref } from "vue";
+import StarHorseIcon from "@/components/comp/StarHorseIcon.vue";
+import { compKey } from "@/api/system";
+
+defineProps({
+  dataList: { type: Array<any>, required: true },
+  preps: {
+    type: Object as PropType<any>,
+    default: () => {
+      return {
+        value: "value",
+        label: "name",
+        children: "children",
+      };
+    },
+  },
+  btnTitle: { type: String, default: "添加数据" },
+  rmvTitle: { type: String, default: "删除数据" },
+  btnVisible: { type: Boolean, default: false },
+  rmvVisible: { type: Boolean, default: false },
+});
+const emits = defineEmits(["selectData", "addData", "removeData"]);
+let currentItem = ref<any>({});
+const selectData = (item: any, event: MouseEvent) => {
+  currentItem.value = item;
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  emits("selectData", item);
+};
+/**
+ * 添加数据
+ * @param item
+ */
+const addData = (item: any) => {
+  emits("addData", item);
+};
+const removeData = (item: any) => {
+  emits("removeData", item);
+};
+</script>
+<template>
+  <template v-for="(item, key) in dataList" :key="compKey(item, key)">
+    <el-sub-menu
+      v-if="item?.children?.length > 0"
+      :class="{ 'is-active': item[preps.value] == currentItem[preps.value] }"
+      :index="item[preps.value]"
+    >
+      <template #title>
+        <el-icon class="star-icon">
+          <component is="folder" />
+        </el-icon>
+        <div class="menu-title" @click="selectData(item, $event)">
+          <div class="name">{{ item[preps.label] }}</div>
+          <div v-if="btnVisible || rmvVisible" class="btn">
+            <el-tooltip :content="btnTitle">
+              <star-horse-icon
+                cursor="pointer"
+                v-if="btnVisible"
+                @click.stop="addData(item)"
+                icon-class="plus"
+              />
+            </el-tooltip>
+            <el-tooltip :content="rmvTitle">
+              <star-horse-icon
+                cursor="pointer"
+                v-if="rmvVisible"
+                @click.stop="removeData(item)"
+                color="var(--el-color-danger)"
+                icon-class="minus"
+              />
+            </el-tooltip>
+          </div>
+        </div>
+      </template>
+      <SubSystemMenu
+        :dataList="item.children"
+        :preps="preps"
+        @selectData="selectData"
+        @removeData="removeData"
+        :btnVisible="btnVisible"
+        :btnTitle="btnTitle"
+        :rmvVisible="rmvVisible"
+        :rmvTitle="rmvTitle"
+      />
+    </el-sub-menu>
+    <el-menu-item
+      v-else
+      :index="item[preps.value]"
+      :class="{ 'is-active': item[preps.value] == currentItem[preps.value] }"
+    >
+      <el-icon class="star-icon">
+        <component is="document" />
+      </el-icon>
+      <template #title>
+        <div class="menu-title" @click="selectData(item, $event)">
+          <div class="name">{{ item[preps.label] }}</div>
+          <div v-if="btnVisible || rmvVisible" class="btn">
+            <el-tooltip :content="btnTitle">
+              <star-horse-icon
+                cursor="pointer"
+                v-if="btnVisible"
+                @click.stop="addData(item)"
+                icon-class="plus"
+              />
+            </el-tooltip>
+            <el-tooltip :content="rmvTitle">
+              <star-horse-icon
+                cursor="pointer"
+                v-if="rmvVisible"
+                @click.stop="removeData(item)"
+                color="var(--el-color-danger)"
+                icon-class="minus"
+              />
+            </el-tooltip>
+          </div>
+        </div>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+<style scoped lang="scss">
+.star-icon {
+  font-size: 22px;
+}
+
+.el-sub-menu {
+  justify-content: space-between;
+}
+
+:deep(.el-sub-menu__title) {
+  height: 35px !important;
+  line-height: 35px !important;
+  width: 100%;
+}
+
+:deep(.el-scrollbar__view) {
+  height: 100%;
+}
+</style>

package/src/components/register.ts

@@ -0,0 +1,24 @@
+import { App, defineAsyncComponent } from "vue";
+
+// 动态导入组件路径（保持原有逻辑）
+const items = import.meta.glob([
+  "@/components/comp/*.vue",
+  "@/components/comp/items/*.vue",
+  "@/components/system/*.vue",
+  "@/components/formcomp/items/*.vue",
+  "@/components/formcomp/container/*.vue",
+]);
+
+// 全局组件注册函数
+export const registerGlobalComponents = (app: App<Element>) => {
+  Object.entries(items).forEach(([path, component]) => {
+    const name = path
+      .split("/")
+      .pop() // 获取文件名
+      ?.replace(/\.vue$/, ""); // 移除扩展名
+
+    if (name) {
+      app.component(name, defineAsyncComponent(component as any));
+    }
+  });
+};