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

<template>
  <RenderFoldDoult v-bind="props"></RenderFoldDoult>
</template>

<script setup lang="tsx" name="WidgetLjFoldLayoutDouble">
import { ref, onMounted, nextTick, computed, useSlots } from "vue";
import LjFoldLayout from "@/components/LjFoldLayout/index.vue";
// import { useI18n } from "vue-i18n";
import { useLayoutLocalStore } from "@/stores/modules/layoutLocal";
import { cloneDeep, pick, defaultsDeep } from "lodash-es";
import { getDifference, setDifference } from "@/utils";

interface LjFoldLayoutDoubleProp {
  dwname?: string;
  first: any;
  second?: any;
  /**
   * @description 布局读取/保存时，其他自定义属性
   */
  params?: any;
  /**
   * @argument string[] 布局读取/保存时，赋值的属性
   */
  detailLayoutAttr?: string[];
}

const props = withDefaults(defineProps<LjFoldLayoutDoubleProp>(), {
  dwname: "",
  first: () => ({}),
  second: () => ({}),
  detailLayoutAttr: () => ["first.left", "first.right", "second.left", "second.right"]
});

// const { t } = useI18n();
const layoutLocalStore = useLayoutLocalStore();
const FoldLayoutFilterAttr = ["width", "hidden", "lastWidth"];
const DOUBLE_FOLD_ATTR = ["first", "second", "params"];
const firstFoldLayoutRef = ref();
const secondFoldLayoutRef = ref();
const layoutSaved = ref<any>({});

const layoutDefault: any = {
  first: {},
  second: {}
};

const currentLayout: any = ref({
  first: {},
  second: {}
});

/**
 * @description 当前布局
 */
const dwnameLayout = computed(() => {
  return props.dwname + "__layout-fold";
});

/**
 * @description 读取布局
 */
const getLayout = async () => {
  let res: any = {};
  if (props.dwname !== "") {
    res = await layoutLocalStore.getLayoutAttr(dwnameLayout.value);
  }
  console.log("LJgetLayout getLayout res :>> ", res);
  layoutSaved.value = res;
  // console.log("LJgetLayout props :>> ", props);
  let _props = pick(props, DOUBLE_FOLD_ATTR);
  // console.log("LJgetLayout _props :>> ", _props);
  let _define = defaultsDeep(_props, layoutDefault);

  console.log("LJgetLayout _define :>> ", _define);
  currentLayout.value = setDifference(_define, res);
  console.log("LJgetLayout currentLayout.value :>> ", currentLayout.value);

  // // 加载主表-基础信息布局
  // await init();
};

/**
 * @description 监听框架属性变化
 */
const toSaveFoldLayout = (layout: any, saveAttr: string, readAttr: string) => {
  let diff = getDifference(currentLayout.value[saveAttr][readAttr], layout[readAttr], FoldLayoutFilterAttr);
  console.log("toSetDetailBase diff :>> ", diff);

  console.log("layoutSaved.value :>> ", layoutSaved.value, saveAttr, readAttr);
  layoutSaved.value = Object.assign(layoutSaved.value, { [saveAttr]: { [readAttr]: diff } });
  // layoutSaved.value[saveAttr][readAttr] = diff;
  console.log("save _layout :>> ", layoutSaved.value);

  // 保存布局
  props.dwname !== "" && layoutLocalStore.setDwLayout(dwnameLayout.value, layoutSaved.value, false).then(() => {});
};

/**
 * @description 保存布局：其他参数
 */
const setDLayoutParams = (params: any) => {
  layoutSaved.value.params = params;
  // 保存布局
  props.dwname !== "" && layoutLocalStore.setDwLayout(dwnameLayout.value, layoutSaved.value, false).then(() => {});
};

onMounted(async () => {
  await getLayout();
});

const slots: any = useSlots();

const RenderFoldDoult = (rProps: any) => {
  let firstSlot: any = {};
  if (slots.firstLeft) {
    firstSlot.left = () => slots.firstLeft();
  }
  if (slots.firstRihght) {
    firstSlot.right = () => slots.firstRihght();
  }

  let secondSlot: any = {};
  if (slots.secondLeft) {
    secondSlot.left = () => slots.secondLeft();
  }
  if (slots.secondMain) {
    secondSlot.default = () => slots.secondMain();
  }
  if (slots.secondRight) {
    secondSlot.right = () => slots.secondRight();
  }

  return (
    <>
      <div class="main-box" {...rProps}>
        <LjFoldLayout
          ref={firstFoldLayoutRef}
          {...currentLayout.value.first}
          onFoldLeft={(layout: any) => toSaveFoldLayout(layout, "first", "left")}
          onFoldRight={(layout: any) => toSaveFoldLayout(layout, "first", "right")}
          v-slots={firstSlot}
        >
          <LjFoldLayout
            ref={secondFoldLayoutRef}
            {...currentLayout.value.second}
            onFoldLeft={(layout: any) => toSaveFoldLayout(layout, "second", "left")}
            onFoldRight={(layout: any) => toSaveFoldLayout(layout, "second", "right")}
            v-slots={secondSlot}
          ></LjFoldLayout>
        </LjFoldLayout>
      </div>
    </>
  );
};

defineExpose({
  firstFoldLayoutRef,
  secondFoldLayoutRef,
  currentLayout,
  setDLayoutParams
});
</script>