star-horse-lowcode 2.7.65 → 2.7.66

package/src/components/system/ContentMenu.vue

@@ -1,260 +0,0 @@
-<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

@@ -1,344 +0,0 @@
-<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

@@ -1,97 +0,0 @@
-<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>