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

<template>
  <LjDetail
    name="bednetvarListDetail"
    ref="LjDetailRef"
    v-bind="detailProps"
    v-model:order-status="orderStatus"
    :data="mainData"
    :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"
    :if-basic-editable="false"
  >
    <!-- :action="orderStatus ? orderEditAction : orderDefaultAction" -->
    <template #mxList="scope">
      <!-- {{ scope }}
      {{ LjDetailRef?._mainData.varclass }}
      {{ LjDetailRef?._mainData?.varclass != "2" }} -->
      <LjVxeTable
        v-if="scope?.data?.varclass != '2'"
        ref="VxeTableMxRef"
        row-key="varmxid"
        table-cls=""
        :request-api="getMxData"
        :data-callback="dataCallback"
        :init-param="initParams_mx"
        :columns="columns_mx"
        :dwname="dwname_mx"
        :table-props="tableProps"
        :auto-load-layout="false"
        :collapse-buttons="true"
        :table-buttons="[]"
      >
      </LjVxeTable>
    </template>
  </LjDetail>
</template>

<script setup lang="tsx" name="bednetvarListDetail">
import { ref, watch, reactive, inject, onMounted } from "vue";
import { DwnameEnum } from "@/enums/dwnameEnum";
import LjDetail from "@/components/LjDetail/index.vue";
import { DetailProp, detailModelItemProp } from "@/components/LjDetail/interface";
import { useI18n } from "vue-i18n";
import { useHooks } from "./hooks/index";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { getBedNetVarMxList, getBedNetVarMxNewList } from "@/api/modules/basicinfo";
import { cloneDeep } from "lodash-es";

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 handleSelVarclass = (value: number) => {
  initParams_mx.value.varclass = value;

  // detailProps.mould.forEach((item: any) => {
  //   item.value.isHidden = value > 1;
  // });
  detailProps.mould = [];
};

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

const mainData = ref([{}]);
const initParams_mx = ref({ varid: 0, varclass: 0 });

/**
 * @description 是否可编辑
 */
const orderStatus = ref("");

const detailProps = reactive<DetailProp>({
  dwname: DwnameEnum.bednetvarlist,
  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: "变量明细定义"
      // limited: (params: any) => {
      //   console.log("mxList params?.if_w_butao :>> ", params);
      //   if (!params) return true;
      //   console.log("params?.varclass :>> ", params?.varclass);
      //   return Number(params?.varclass) == 2;
      //   // return true;
      // }
    }
  ]
});

const dwname_mx = "web_bednetvarmxlist";
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 getMxData = (params: any) => {
  if (orderStatus.value === "new") {
    return getBedNetVarMxNewList(params);
  }
  return getBedNetVarMxList(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_mx.value.varid = parseInt(val.varid);
    initParams_mx.value.varclass = parseInt(val.varclass);
    fChangeBedNetType(parseInt(val.varclass));
  },
  { immediate: true }
);

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