JLH/JLHWEB/src/components/LjHeaderMenu/index.vue

<template>
  <RenderHeaderDefault />
</template>

<script setup lang="tsx" name="LjHeaderMenu">
import { ref, reactive, computed, watch, nextTick, useSlots, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { convertStrToObj } from "@/utils";
import ButtonGroup from "@/components/LjDetail/components/ButtonGroup.vue";
import { detailAction } from "@/components/LjDetail/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useGlobalStore } from "@/stores/modules/global";
// import { useDesign } from "@/hooks/useDesign";

const { t } = useI18n();
const slots = useSlots();
// const { prefixCls } = useDesign("header-menu");

interface LjHeaderMenuProps {
  /**
   * @argument 业务动作列表
   * @example 支持二维数组嵌套，会以下拉菜单形式渲染，结构允许：[{},{},...] [[{},{},..], {}]
   */
  action?: detailAction[][] | detailAction[];
  /**
   * @description ButtonGroup组件：update
   */
  update?: any;
  /**
   * @description ButtonGroup组件：data
   */
  data?: any;
  groupCls?: string;
}

const { assemblySize } = useGlobalStore();
const { CheckPower, funcFilterPower, funcRightActionPower } = useAuthButtons(t);

const orderBtnGroup = ref([]);
const props = withDefaults(defineProps<LjHeaderMenuProps>(), {
  action: () => [],
  groupCls: ""
});

onMounted(() => {
  // props.action && (orderBtnGroup.value = funcFilterPower(props.action));
});
/**
 * @deascription 渲染：默认头部render
 * @param rProp prop
 */
const RenderHeaderDefault = (rProp: any) => {
  console.log("RenderHeaderDefault rProp :>> ", rProp);
  // let nameValue = convertStrToObj(_mainData.value, props.header.fieldNames?.name);
  // let _params =
  //   orderStatus.value == "new" ? infoParam.value : orderStatus.value == "edit" ? reactive(_mainData.value) : _mainData.value;
  let _assemblySize = assemblySize == "small" ? "default" : "large";
  let _height = assemblySize == "small" ? "32px" : "40px";

  // let allowPowerAction = orderBtnGroup.value;

  /**
   * @description 折叠的单据功能菜单
   */
  let _render_right_action: any = [];
  // let hasRightAction = rProp?.rightAction && rProp.rightAction.length;
  // if (hasRightAction) {
  //   orderOtherFunc.value.map((item: any) => {
  //     _render_right_action.push(
  //       <DropdownList
  //         target="detail-button-group"
  //         buttons={item}
  //         data={_params}
  //         assemblySize={_assemblySize}
  //       />
  //     );
  //   });
  // }

  // /**
  //  * @description 右侧固定下拉菜单
  //  */
  // let _render_right_fixed_action: any = [];
  // let hasRightFixedAction = rProp?.rightFixedAction && rProp.rightFixedAction.length;
  // if (hasRightFixedAction) {
  //   rProp.rightFixedAction.map((itemAction: any) => {
  //     if (!getRightActionPower(itemAction)) return;

  //     switch (itemAction) {
  //       case "print":
  //         // 订单打印
  //         let _render_dd_item = getRenderRightFixedAction();
  //         let hasPrinterList = Boolean(printerTpList.value.length);
  //         let _slotsRightFixedAction = {
  //           dropdown: () => {
  //             return (
  //               <>
  //                 <el-dropdown-menu>
  //                   <>
  //                     {hasPrinterList && _render_dd_item}
  //                     <el-dropdown-item divided={hasPrinterList} onClick={() => openPrint("")}>
  //                       <div class="flx-center">
  //                         <el-icon>
  //                           <Setting />
  //                         </el-icon>
  //                         {t("common.setText")}
  //                       </div>
  //                     </el-dropdown-item>
  //                   </>
  //                 </el-dropdown-menu>
  //               </>
  //             );
  //           }
  //         };

  //         _render_right_fixed_action.push(
  //           <el-dropdown
  //             trigger="contextmenu"
  //             placement="bottom-end"
  //             ref={printerListTpDropdownRef}
  //             v-slots={_slotsRightFixedAction}
  //           >
  //             <el-button icon={Printer} circle onClick={handleCheckPrintTemplateList}></el-button>
  //           </el-dropdown>
  //         );
  //         break;
  //       case "printMx":
  //         // 明细打印

  //         break;
  //       default:
  //         break;
  //     }
  //   });
  // }

  return (
    <>
      <div class={["flx w-full flx-justify-between", "lj-header-menu"]} style={{ height: _height }}>
        <div id="detail-button-group" class={`flx-1 ${props.groupCls ? props.groupCls : "flx-start"}`}>
          {props.action.length > 0 && (
            <ButtonGroup
              update={props.update}
              target="detail-button-group"
              buttons={props.action}
              data={props.data}
              assemblySize={_assemblySize}
            ></ButtonGroup>
          )}
        </div>
        <div class="flx-end flx-shrink mr-12">
          {/* {nameValue && (
            <>
              <span class={["text-h4-r", "text-disable", hasRightAction ? "mr-8" : ""]}>{nameValue}</span>
            </>
          )} */}
          {_render_right_action}
          {/* {_render_right_fixed_action} */}
          {/* {(nameValue || hasRightAction) && <el-divider direction="vertical" />} */}
          <div class="setting-part">
            {/* {<el-button circle icon={Operation} onClick={handleShowDetailSetting}></el-button>} */}
            {slots.rightBtn && slots.rightBtn?.()}
          </div>
        </div>
      </div>
    </>
  );
};
</script>