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

<template>
  <LjDetail
    name="mtrldefListDetail"
    ref="LjDetailRef"
    v-bind="detailProps"
    v-model:order-status="orderStatus"
    :data="mainData"
    :init-param="mainData[0]"
    :if-fold-layout="false"
    :if-layout-editable="false"
    :if-basic-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"
  >
    <template #mxList>
      <LjVxeTable
        ref="VxeTableMxRef"
        row-key="pricelistid"
        table-cls=""
        :request-api="getMxData"
        :data-callback="dataCallback"
        :init-param="initParams"
        :columns="columns_mx"
        :dwname="dwname_mx"
        :table-props="tableProps"
        :auto-load-layout="false"
        :collapse-buttons="true"
        :table-button="[]"
      >
      </LjVxeTable>
    </template>
  </LjDetail>

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

<script setup lang="tsx" name="mtrldefListDetail">
import { ref, watch, reactive, inject, onMounted } from "vue";
import { DwnameEnum } from "@/enums/dwnameEnum";
import { getMtrlPriceList, getMtrlPriceNewList } from "@/api/modules/basicinfo";
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;
}

const props = withDefaults(defineProps<detailProp>(), {});
const { t } = useI18n();
const { LjDetailRef, VxeTableMxRef, columns, columns_mx, MtrldefDialogRef, MtrldefDialogProps } = useHooks(t);
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const mainData = ref([{}]);
const initParams = ref({ mtrlid: 0 as Number });
/**
 * @description 是否可编辑
 */
const orderStatus = ref("");

const dwname_mx = "web_mtrl_price_pricelist";
const tableProps = {
  height: "",
  editConfig: { trigger: "click", mode: "cell" }
  // rowClassName: rowClsNameFunc
  // exportConfig: {
  //   filename: t("menu.saletaskmx") + formatToDate(new Date(), "YYYY-MM-DD HH:mm:ss")
  // }
};

const detailProps = reactive<DetailProp>({
  dwname: DwnameEnum.mtrldeflist,
  columns: columns,
  // 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: [
    {
      id: "mxList",
      type: "table",
      label: "变量明细定义",
      isHidden: false
    }
  ]
});

const getMxData = (params: any) => {
  if (orderStatus.value === "new") {
    return getMtrlPriceNewList(params);
  }
  return getMtrlPriceList(params);
};

const dataCallback = (data: any) => {
  return {
    list: data.datatable,
    tableinfo: data.tableinfo,
    total: data.totalcnt,
    pageNum: data.pageindex,
    pageSize: data.pagesize
  };
};

watch(
  () => props.data,
  val => {
    console.log("props.data, val :>> ", val);
    mainData.value = [val];
    initParams.value.mtrlid = val.mtrlid;

    // 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>