JLH/JLHWEB/src/views/baseinfo/configure/detail.vue

<template>
  <LjDetail
    name="configureTypeListLeftDetail"
    ref="LjDetailLeftRef"
    v-bind="detailProps_left"
    v-model:order-status="orderStatus"
    :data="mainData"
    :init-param="mainData[0]"
    :if-fold-layout="false"
    :if-layout-editable="false"
    :search-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :basic-group-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :enum="props.enum"
    v-if="props.type === 0"
  >
  </LjDetail>
  <LjDetail
    name="configureCodeListMidDetail"
    ref="LjDetailMidRef"
    v-bind="detailProps_mid"
    v-model:order-status="orderStatus"
    :data="mainData"
    :init-param="mainData[0]"
    :if-fold-layout="false"
    :if-layout-editable="false"
    :search-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :basic-group-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :enum="props.enum"
    v-if="props.type === 1"
  >
  </LjDetail>
  <LjDetail
    name="configureCodeMxListRightDetail"
    ref="LjDetailRightRef"
    v-bind="detailProps_right"
    v-model:order-status="orderStatus"
    :data="mainData"
    :init-param="mainData[0]"
    :if-fold-layout="false"
    :if-layout-editable="false"
    :search-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :basic-group-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :enum="props.enum"
    v-if="props.type === 2"
  >
  </LjDetail>
  <LjDetail
    name="configureCodeMxBomListRightDetail"
    ref="LjDetailBottomRef"
    v-bind="detailProps_bottom"
    v-model:order-status="orderStatus"
    :data="mainData"
    :init-param="mainData[0]"
    :if-fold-layout="false"
    :if-layout-editable="false"
    :search-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :basic-group-col="{ xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }"
    :enum="props.enum"
    v-if="props.type === 3"
  >
  </LjDetail>

  <ErpMtrldefDialog ref="MtrldefDialogRef" v-bind="MtrldefDialogProps" />
</template>

<script setup lang="tsx" name="configureTypeListDetail">
import { ref, watch, reactive, inject, onMounted } from "vue";
import { DwnameEnum } from "@/enums/dwnameEnum";
import LjDetail from "@/components/LjDetail/index.vue";
import { DetailProp } from "@/components/LjDetail/interface";
import { useI18n } from "vue-i18n";
import { useHooks } from "./hooks/index";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import ErpMtrldefDialog from "@/views/system/selector/erpMtrlPrice/index.vue";

interface detailProp {
  /**
   * @argument any 页面数据
   */
  data?: any;
  /**
   * @argument string 请求数据的api ==> 非必传
   */
  requestApi?: (params: any) => Promise<any>;
  /**
   * @argument any 基础信息，表格展示数据
   */
  // columns?: any;
  /**
   * @description 是否可编辑
   */
  status: "edit" | "new" | string;
  enum?: any;
  type: Number; // 0-left 1-mid 2-right
}

const props = withDefaults(defineProps<detailProp>(), {});
const { t } = useI18n();
const {
  LjDetailLeftRef,
  LjDetailMidRef,
  LjDetailRightRef,
  LjDetailBottomRef,
  columns_left,
  columns_mid,
  columns_right,
  columns_bottom,
  MtrldefDialogRef,
  MtrldefDialogProps
} = useHooks(t);
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const mainData = ref([{}]);
/**
 * @description 是否可编辑
 */
const orderStatus = ref("");

const detailProps_left = reactive<DetailProp>({
  dwname: DwnameEnum.configuretypelist,
  columns: columns_left,
  // addPower: 5,
  // editPower: 4359,
  header: {
    fieldNames: {
      code: "deptname",
      codeLabel: t("table.u_cust.cuscode") + "：",
      name: "name"
    },
    icon: "iconuser-01",
    tabsProp: {
      scrollspy: false,
      sticky: true
    }
  },
  mould: []
});

const detailProps_mid = reactive<DetailProp>({
  dwname: DwnameEnum.configurecodelist,
  columns: columns_mid,
  // addPower: 5,
  // editPower: 4359,
  header: {
    fieldNames: {
      code: "deptname",
      codeLabel: t("table.u_cust.cuscode") + "：",
      name: "name"
    },
    icon: "iconuser-01",
    tabsProp: {
      scrollspy: false,
      sticky: true
    }
  },
  mould: []
});

const detailProps_right = reactive<DetailProp>({
  dwname: DwnameEnum.configurecodemxlist,
  columns: columns_right,
  // addPower: 5,
  // editPower: 4359,
  header: {
    fieldNames: {
      code: "deptname",
      codeLabel: t("table.u_cust.cuscode") + "：",
      name: "name"
    },
    icon: "iconuser-01",
    tabsProp: {
      scrollspy: false,
      sticky: true
    }
  },
  mould: []
});

const detailProps_bottom = reactive<DetailProp>({
  dwname: DwnameEnum.configurecodemxbomlist,
  columns: columns_bottom,
  // addPower: 5,
  // editPower: 4359,
  header: {
    fieldNames: {
      code: "deptname",
      codeLabel: t("table.u_cust.cuscode") + "：",
      name: "name"
    },
    icon: "iconuser-01",
    tabsProp: {
      scrollspy: false,
      sticky: true
    }
  },
  mould: []
});

watch(
  () => props.data,
  val => {
    console.log("props.data, val :>> ", val);
    mainData.value = [val];
    // getDetailData(val).then(res => {
    //   detailData.value = res;
    // });
  },
  { immediate: true }
);

watch(
  () => props.status,
  val => {
    console.log("props.status val :>> ", val);
    orderStatus.value = val;
  },
  { immediate: true, deep: true }
);
</script>