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

<template>
  <LjDetail
    name="bedNetAreaListDetail"
    ref="LjDetailRef"
    v-bind="detailProps"
    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"
    :if-basic-editable="false"
  >
    <!-- :action="orderStatus ? orderEditAction : orderDefaultAction" -->
  </LjDetail>
</template>

<script setup lang="tsx" name="bedNetAreaListDetail">
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";

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, columns } = useHooks(t);
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const mainData = ref([{}]);

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

const detailProps = reactive<DetailProp>({
  dwname: DwnameEnum.bednetarealist,
  columns: columns,
  // addPower: 5,
  // editPower: 4359,
  header: {
    icon: "iconuser-01",
    tabsProp: {
      scrollspy: false,
      sticky: true
    }
  },
  mould: []
});

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

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