star-horse-lowcode 2.7.63 → 2.7.65

package/src/components/system/ContentMenu.vue

@@ -0,0 +1,260 @@
+<script lang="ts" setup>
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+} from "vue";
+import { compKey, useZIndex } from "@/api/system";
+import StarHorseIcon from "@/components/comp/StarHorseIcon.vue";
+
+defineOptions({
+  name: "PageEditorContentMenu",
+});
+
+const props = defineProps({
+  menuData: { type: Array as PropType<any>, default: () => [] },
+  isSubMenu: { type: Boolean, default: false },
+  autoHide: { type: Boolean, default: true },
+  active: { type: [String, Number], default: "" },
+});
+const emit = defineEmits<{
+  hide: [];
+  show: [];
+  mouseenter: [];
+}>();
+
+const menu = ref<HTMLDivElement>();
+const buttons = ref<Array<any>>();
+const subMenu = ref<any>();
+const visible = ref(false);
+const subMenuData = ref<Array<any>>([]);
+const zIndex = useZIndex();
+const curZIndex = ref<number>(0);
+
+const menuPosition = ref({
+  left: 0,
+  top: 0,
+});
+
+const menuStyle = computed(() => ({
+  top: `${menuPosition.value.top}px`,
+  left: `${menuPosition.value.left}px`,
+  zIndex: curZIndex.value,
+}));
+
+const contains = (el: HTMLElement) =>
+  menu.value?.contains(el) || subMenu.value?.contains(el);
+
+const hide = () => {
+  if (!visible.value) return;
+  visible.value = false;
+  subMenu.value?.hide();
+  emit("hide");
+};
+
+const clickHandler = (item: any) => {
+  if (!props.autoHide) return;
+  item.handler();
+  hide();
+};
+
+const outsideClickHideHandler = (e: MouseEvent) => {
+  if (!props.autoHide) return;
+  const target = e.target as HTMLElement | undefined;
+  if (!visible.value || !target) {
+    return;
+  }
+  if (contains(target)) {
+    return;
+  }
+  hide();
+};
+
+const setPosition = (e: MouseEvent) => {
+  const menuHeight = menu.value?.clientHeight || 0;
+  let top = e.clientY;
+  if (menuHeight + e.clientY > document.body.clientHeight) {
+    top = document.body.clientHeight - menuHeight;
+  }
+  let left = e.clientX;
+  menuPosition.value = {
+    top,
+    left,
+  };
+};
+
+const show = (e?: MouseEvent) => {
+  // 加setTimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+  setTimeout(() => {
+    visible.value = true;
+    nextTick(() => {
+      e && setPosition(e);
+      curZIndex.value = zIndex.nextZIndex();
+      emit("show");
+    });
+  }, 300);
+};
+const showSubMenu = (item: any, index: number) => {
+  const menuItem = item;
+  if (typeof item !== "object") {
+    return;
+  }
+  subMenuData.value = menuItem.items || [];
+  setTimeout(() => {
+    if (!visible.value) {
+      return;
+    }
+
+    if (menu.value) {
+      // 将子菜单放置在按钮右侧，与按钮齐平
+      let y = menu.value.offsetTop;
+      if (buttons.value?.[index]?.$el) {
+        const rect = buttons.value?.[index].$el.getBoundingClientRect();
+        y = rect.top;
+      }
+      subMenu.value?.show({
+        clientX: menu.value.offsetLeft + menu.value.clientWidth,
+        clientY: y,
+      });
+    }
+  }, 0);
+};
+
+const mouseenterHandler = () => {
+  emit("mouseenter");
+};
+
+onMounted(() => {
+  if (props.isSubMenu) return;
+  globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
+});
+
+onBeforeUnmount(() => {
+  if (props.isSubMenu) return;
+  globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
+});
+
+defineExpose({
+  menu,
+  menuPosition,
+  hide,
+  show,
+  contains,
+  setPosition,
+});
+</script>
+<template>
+  <transition name="fade">
+    <div
+      v-show="visible"
+      class="content-menu"
+      ref="menu"
+      :style="menuStyle"
+      @mouseenter="mouseenterHandler()"
+    >
+      <slot name="title"></slot>
+
+      <template v-for="(item, index) in menuData" :key="compKey(item, index)">
+        <el-divider v-if="item.type == 'divider'" :direction="item.direction" />
+        <div
+          v-if="item.type == 'button' && item.display"
+          ref="buttons"
+          class="menu-item button"
+          :class="{ active: active && item.id === active }"
+          :data="item"
+          :key="index"
+          @mouseup="clickHandler(item)"
+          @mouseenter="showSubMenu(item, index)"
+        >
+          <star-horse-icon :icon-class="item.icon" />
+          {{ item.text }}
+        </div>
+      </template>
+      <teleport to="body">
+        <content-menu
+          v-if="subMenuData.length"
+          class="sub-menu"
+          ref="subMenu"
+          :active="active"
+          :menu-data="subMenuData"
+          :is-sub-menu="true"
+          @hide="hide"
+        ></content-menu>
+      </teleport>
+    </div>
+  </transition>
+</template>
+<style lang="scss" scoped>
+:deep(.el-divider) {
+  margin: 5px auto;
+}
+
+.content-menu {
+  position: fixed;
+  font-size: 12px;
+  background: #fff;
+  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
+  z-index: 999999;
+  transform-origin: 0 0;
+  font-weight: 600;
+  padding: 4px 0;
+  overflow: auto;
+  max-height: 80%;
+  min-width: 180px;
+
+  .menu-item {
+    color: #333;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    flex-direction: row;
+    vertical-align: middle;
+    cursor: pointer;
+    line-height: 35px;
+    min-width: 140px;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+    border-left: 2px solid transparent;
+
+    .button {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .el-button--text,
+    i {
+      color: var(--star-horse-style);
+    }
+
+    svg {
+      margin-right: 5px;
+    }
+
+    &.divider {
+      padding: 0 14px;
+
+      .el-divider {
+        margin: 0;
+      }
+    }
+    &.button {
+      &:hover {
+        background-color: #6b778c;
+
+        &.menu-item i {
+          color: var(--star-horse-style);
+        }
+      }
+      &.active {
+        background-color: #6b778c;
+        &.menu-item i {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/system/StarHorseButtonList.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts" name="StarHorseButtonList">
+import {Config} from "@/api/settings";
+import {download} from "@/api/star_horse_apis";
+import {compKey} from "@/api/system";
+import Help from "@/components/help.vue";
+import {ApiUrls} from "@/components/types/ApiUrls";
+import {PreValid} from "@/components/types/BtnAuth";
+import {DialogProps} from "@/components/types/DialogProps";
+import {UserFuncInfo} from "@/components/types/PageFieldInfo";
+import piniaInstance from "@/store";
+import {useGlobalConfigStore} from "@/store/GlobalConfig";
+import {getToken} from "@/utils/auth";
+import {error, warning} from "@/utils/message";
+import {computed, onMounted, PropType, ref} from "vue";
+
+const props = defineProps({
+  dialogProps: {type: Object as PropType<DialogProps>, required: true},
+  compUrl: {type: Object as PropType<ApiUrls>, required: true},
+  viewFlag: {type: Boolean, default: false},
+  //自定义按钮
+  extendBtns: {type: Array as PropType<UserFuncInfo[]>},
+  //预检查方法,如果设置了预检查方法，必须要检查通过后，按钮事件才能继续往下执行
+  preValidFunc: {type: Object as PropType<Array<PreValid>>},
+  btnPermissions: {type: Object as PropType<any>, required: false},
+});
+const emits = defineEmits([
+  "upload",
+  "uploadProcess",
+  "uploadError",
+  "uploadSuccess",
+  "btnOperation",
+  "tableCompFunc",
+]);
+let configStore = useGlobalConfigStore(piniaInstance);
+let compSize = computed(
+    () => configStore.configFormInfo?.buttonSize || Config.compSize,
+);
+let showType = computed(
+    () => configStore.configFormInfo?.buttonShowType || "dropdown",
+);
+let permissions = computed(() => props.btnPermissions);
+const dataForm = ref<any>({});
+/**
+ * 向往抛出事件
+ * @param funcName
+ */
+const tableCompFunc = (funcName: string) => {
+  emits("tableCompFunc", funcName);
+};
+const btnOperation = (funcName: string) => {
+  //检查前置条件
+  if (props.preValidFunc?.length > 0 && Array.isArray(props.preValidFunc)) {
+    const preFunc = props.preValidFunc.find(
+        (item: PreValid) => item.authority == funcName,
+    );
+    if (preFunc) {
+      const result = preFunc.valid?.();
+      if (!result) {
+        if (preFunc.msg?.length > 1) {
+          warning(preFunc.msg);
+        }
+        return;
+      }
+    }
+  }
+  //？表示判断是否为空 ！表示断言not null
+  if (funcName == "add") {
+    //  dataForm.value = {};
+    props.dialogProps!.ids = -1;
+    props.dialogProps!.editVisible = true;
+    props.dialogProps!.dialogTitle = "新增数据";
+  } else if (funcName == "batchAdd") {
+    props.dialogProps!.batchEditVisible = true;
+    props.dialogProps!.batchDialogTitle = "批量新增数据";
+  } else if (funcName == "download") {
+    downloadTemplate();
+  } else {
+    tableCompFunc(funcName);
+  }
+};
+/**
+ * 刷新数据
+ * @param file
+ * @param fileList
+ */
+const downloadTemplate = () => {
+  download(props.compUrl?.downloadTemplateUrl!, {}).catch((err) => {
+    error("接口不存在或网络异常:" + err);
+  });
+};
+const upload = (file: any, fileList: any) => {
+  emits("upload", file, fileList);
+};
+const beforeUpload = (_file: any, _fileList: any) => {
+  //load("数据导入中");
+};
+/**
+ * 上传过程
+ */
+const uploadProcess = (_event: any, _file: any, _fileList: any) => {
+};
+/**
+ * 上传失败
+ */
+const uploadError = (_err: any, _file: any, _fileList: any) => {
+  // closeLoad();
+  tableCompFunc("refresh");
+};
+/**
+ * 上传成功
+ */
+const uploadSuccess = (_response: any, _file: any, _fileList: any) => {
+  //closeLoad();
+  tableCompFunc("refresh");
+};
+const buttonList = computed(() => {
+  return extendBtnFunction();
+});
+/**
+ * 扩展按钮
+ */
+const extendBtnFunction = (): Array<UserFuncInfo> | any => {
+  let arr: Array<UserFuncInfo | any> = [];
+  if (props.viewFlag) {
+    return arr;
+  }
+  arr.push({
+    btnName: "新增",
+    icon: "add",
+    authority: "add",
+    priority: 100,
+    funcName: (actionName: string) => btnOperation(actionName),
+  });
+  arr.push({
+    btnName: "批量新增",
+    icon: "batch-add",
+    authority: "batchAdd",
+    priority: 110,
+    funcName: (actionName: string) => btnOperation(actionName),
+  });
+  arr.push({
+    btnName: "下载模板",
+    icon: "download",
+    authority: "download",
+    priority: 120,
+    funcName: (actionName: string) => btnOperation(actionName),
+  });
+  arr.push({
+    btnName: "执行",
+    icon: "run",
+    authority: "execution",
+    priority: 130,
+    funcName: (actionName: string) => btnOperation(actionName),
+  });
+  arr.push({
+    btnName: "导入数据",
+    icon: "excel-upload",
+    authority: "upload",
+    priority: 140,
+    funcName: (actionName: string) => btnOperation(actionName),
+  });
+  arr.push({
+    btnName: "导出数据",
+    icon: "excel-export",
+    authority: "export",
+    helpMsg:
+        "如果选择了数据，则按选择数据导出;\n没有选择数据，则根据查询条件导出",
+    priority: 150,
+    funcName: (actionName: string) => btnOperation(actionName),
+  });
+  arr.push({
+    btnName: "批量删除",
+    icon: "batch_delete1",
+    authority: "batchDelete",
+    priority: 160,
+    funcName: (actionName: string) => btnOperation(actionName),
+  });
+  //自定义按钮，如果时自定义按钮，则覆盖原有的按钮
+  if (props.extendBtns?.length > 0) {
+    let extBtns: UserFuncInfo[] =
+        props.extendBtns.filter((item) => item.position == "toolbar") || [];
+    if (extBtns?.length > 0) {
+      for (let i = 0; i < arr.length; i++) {
+        let temp: UserFuncInfo = arr[i];
+        if (
+            extBtns.find(
+                (item: UserFuncInfo) =>
+                    item.btnName == temp.btnName && item.authority == temp.authority,
+            )
+        ) {
+          arr.splice(i, 1);
+        }
+      }
+      arr.push(...extBtns);
+    }
+  }
+  arr.sort(
+      (a: UserFuncInfo, b: UserFuncInfo) =>
+          (a.priority || 100) - (b.priority || 100),
+  );
+  return arr;
+};
+const setFormData = (val: any) => {
+  dataForm.value = {...val};
+};
+/**
+ * 获取授权按钮长度
+ */
+const authBtnLength = () => {
+  const result = buttonList.value.filter((item) => permissions.value[item.authority]) || [];
+  return result.length;
+};
+const init = async () => {
+};
+onMounted(() => {
+  init();
+});
+defineExpose({
+  setFormData,
+});
+</script>
+<template>
+  <template v-if="showType == 'dropdown' && Object.keys(permissions || {}).length > 0&&authBtnLength()>3">
+    <el-menu mode="horizontal" :ellipsis="false">
+      <el-sub-menu index="1">
+        <template #title>
+          <el-tooltip content="操作" placement="top">
+            <star-horse-icon icon-class="operation" size="16px" cursor="pointer"/>
+          </el-tooltip>
+        </template>
+        <template v-for="(item, index) in buttonList" :key="compKey(item, index)">
+          <template v-if="item.children?.length > 0">
+            <el-sub-menu :index="'2-' + index" v-if="permissions[item.authority]">
+              <template #title>
+                {{ item.btnName }}
+              </template>
+              <template v-for="(sitem, sindex) in item.children" :key="compKey(sitem, sindex)">
+                <el-menu-item :index="'3-' + index + '-' + sindex" @click="sitem.funcName(sitem.authority)"
+                              v-if="permissions[sitem.authority]">
+                  <star-horse-icon :icon-class="item.icon || 'edit'" :color="item.authority == 'delete' ||
+                  item.authority == 'batchDelete'
+                  ? 'var(--el-style-danger)'
+                  : 'var(--star-horse-style)'
+                  " size="14px"/>
+                  {{ sitem.btnName }}
+                  <help :message="sitem.helpMsg" v-if="sitem.helpMsg"/>
+                </el-menu-item>
+              </template>
+            </el-sub-menu>
+          </template>
+          <template v-else>
+            <el-menu-item :index="'1-' + index" v-if="permissions[item.authority]">
+              <el-upload :auto-upload="true" :on-change="upload" :on-error="uploadError" :on-progress="uploadProcess"
+                         :on-success="uploadSuccess" :show-file-list="false" accept=".xls,.xlsx"
+                         :before-upload="beforeUpload"
+                         :action="compUrl?.importUrl" :headers="{ token: getToken() }"
+                         class="upload flex items-center w-[100%]"
+                         name="file" v-if="item.authority == 'upload'">
+                <div class="flex items-center w-[100%]">
+                  <star-horse-icon icon-class="excel-upload" size="14px"/>
+                  {{ item.btnName }}
+                </div>
+              </el-upload>
+              <div class="flex items-center w-[100%]" @click="item.funcName(item.authority)" v-else>
+                <star-horse-icon :icon-class="item.icon || 'edit'" :color="item.authority == 'delete' || item.authority == 'batchDelete'
+                ? 'var(--el-color-danger)'
+                : 'var(--star-horse-style)'
+                " size="14px"/>
+                {{ item.btnName }}
+                <help :message="item.helpMsg" v-if="item.helpMsg"/>
+              </div>
+            </el-menu-item>
+          </template>
+        </template>
+      </el-sub-menu>
+    </el-menu>
+  </template>
+  <template v-else-if="Object.keys(permissions || {}).length > 0">
+    <ul class="inner_button">
+      <template v-for="(item, key) in buttonList" :key="compKey(item, key)">
+        <template v-if="item.children?.length > 0">
+          <el-dropdown :size="compSize" split-button style="
+            background: var(--star-horse-style);
+            color: var(--star-horse-white);
+          " placement="top-start" v-if="permissions[item.authority]">
+            <star-horse-icon :icon-class="item.icon" size="18px"/>
+            {{ item.btnName }}
+            <template #dropdown>
+              <el-dropdown-menu>
+                <template v-for="(sitem, skey) in item.children" :key="compKey(sitem, skey)">
+                  <el-dropdown-item v-if="permissions[sitem.authority]" @click="sitem.funcName(sitem.btnName)">
+                    <star-horse-icon :icon-class="item.icon || 'edit'" size="18px" :color="item.authority == 'delete' ||
+                    item.authority == 'batchDelete'
+                    ? '#f56c6c'
+                    : 'var(--star-horse-style)'
+                    "/>
+                    {{ sitem.btnName }}
+                    <help :message="sitem.helpMsg" v-if="sitem.helpMsg"/>
+                  </el-dropdown-item>
+                </template>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+        <template v-else>
+          <li v-if="permissions[item.authority] && item.authority == 'upload'">
+            <el-upload :auto-upload="true" :on-change="upload" :on-error="uploadError" :on-progress="uploadProcess"
+                       :on-success="uploadSuccess" :show-file-list="false" accept=".xls,.xlsx"
+                       :before-upload="beforeUpload"
+                       :action="compUrl?.importUrl" :headers="{ token: getToken() }" class="upload" name="file"
+                       title="导入">
+              <star-horse-icon title="导入" width="27px" size="18px" icon-class="excel-upload"/>
+            </el-upload>
+          </li>
+          <li v-else-if="permissions[item.authority]" @click="item.funcName(item.authority)" :title="item.btnName">
+            <star-horse-icon :icon-class="item.icon || 'edit'" :title="item.btnName" size="18px" width="27px" :color="item.authority == 'delete' || item.authority == 'batchDelete'
+            ? '#f56c6c'
+            : 'var(--star-horse-style)'
+            "/>
+            <help :message="item.helpMsg" v-if="item.helpMsg"/>
+          </li>
+        </template>
+      </template>
+    </ul>
+  </template>
+</template>
+<style lang="scss" scoped>
+:deep(.el-tooltip__trigger:focus-visible) {
+  outline: unset;
+}
+
+.el-menu {
+  background: none;
+  border-bottom: none;
+}
+
+:deep(.el-sub-menu) {
+  background: none;
+}
+
+.el-menu--horizontal {
+  height: 30px;
+}
+</style>

package/src/components/system/StarHorseMenu.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts" name="StarHorseHmenu">
+import { ModelRef, onMounted, PropType } from "vue";
+import MenuItem from "@/components/menu/MenuItem.vue";
+import { compKey } from "@/api/system";
+defineProps({
+  preps: {
+    type: Object as PropType<any>,
+    default: () => {
+      return {
+        id: "id",
+        value: "value",
+        icon: "icon",
+        label: "name",
+        children: "children",
+      };
+    },
+  },
+});
+const emits = defineEmits(["selectItem"]);
+let dataList: ModelRef<any> = defineModel("dataList");
+const initData = async () => {};
+const selectItem = (item: any) => {
+  emits("selectItem", item);
+};
+onMounted(() => {
+  initData();
+});
+</script>
+<template>
+  <el-menu class="system-menu" v-bind="$attrs">
+    <MenuItem
+      v-for="(sitem, key) in dataList"
+      :key="compKey(sitem, key)"
+      :item="sitem"
+      @selectItem="selectItem"
+      :preps="preps"
+    />
+  </el-menu>
+</template>
+<style lang="scss" scoped>
+.el-menu--horizontal {
+  .el-menu-item {
+    height: inherit;
+  }
+
+  .el-menu-item.is-active,
+  .el-menu-item:hover,
+  .el-submenu__title:hover,
+  .el-submenu__title.is-opened {
+    background-color: unset !important;
+  }
+}
+
+:deep(.el-submenu__title:hover),
+:deep(.el-sub-menu:hover),
+.el-tooltip__trigger:hover,
+.el-submenu__title.is-opened {
+  background-color: unset !important;
+}
+
+.sub-class:hover {
+  background-color: unset !important;
+}
+
+.system-menu {
+  --el-menu-bg-color: #fff;
+  --el-menu-text-color: #eee;
+  --el-menu-active-color: #ffd04b;
+  --el-menu-hover-bg-color: rgb(245, 235, 255, 0.5);
+  max-height: 50px;
+  background-color: unset !important;
+  width: 100% !important;
+  border-bottom: unset !important;
+  color: var(--star-horse-white);
+  font-weight: bold;
+  font-size: 16px;
+  align-items: center;
+}
+
+:deep(.el-sub-menu) {
+  box-sizing: border-box;
+  background-color: unset !important;
+}
+
+.star-icon {
+  font-size: 26px;
+  color: var(--star-horse-white);
+}
+
+:deep(.el-icon) {
+  svg {
+    height: 1.5em;
+    width: 1.5em;
+    color: var(--star-horse-white) !important;
+  }
+}
+</style>