JLH/JLHWEB/src/views/quote/mattressQuote/detail.vue

<template>
  <LjDetail
    name="rpMustPayCrmDetail"
    ref="LjDetailRef"
    v-bind="detailProps"
    :data="mainData"
    :request-api="getData"
    :data-callback="dataCallback"
    :init-param="initParams"
    v-model:order-status="orderStatus"
    :action="orderStatus ? orderEditAction : orderDefaultAction"
  >
    <!-- @to-pin-detail="emit('toPinDetail')" -->
    <template #rpMustPayMxList>
      <LjVxeTable
        ref="rpMustPayMxList"
        row-key="key"
        table-cls=""
        :request-api="getData_mx"
        :data-callback="dataCallback"
        :init-param="initParams"
        :columns="columnsMx"
        :dwname="DwnameEnum.mattressQuoteMx"
        :table-props="tableProps_mx"
        :tool-button="['export', 'refresh', 'setting']"
        :auto-load-layout="false"
        pagination
      >
      </LjVxeTable>
    </template>
  </LjDetail>
</template>

<script setup lang="ts" name="mattressQuoteDetail">
import { ref, watch, reactive, inject, nextTick, computed, 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 LjVxeTable from "@/components/LjVxeTable/index.vue";
import { cloneDeep } from "lodash-es";
import { useRoute, useRouter } from "vue-router";
import { CommonDynamicSelect } from "@/api/modules/common";

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

const props = withDefaults(defineProps<detailProp>(), {});
const { t } = useI18n();
const route = useRoute();
const { columns, columnsMx } = useHooks(t);
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const initParams = ref({ arg_mattressid: 0 });
const mainData = ref([]);
const orderStatus = ref("");

const detailProps = reactive<DetailProp>({
  dwname: DwnameEnum.mattressQuote,
  columns: columns,
  // headerstatus: ["status", "ifamt_ok"],
  basicDefault: {
    basicGroup: [
      {
        label: "单据信息",
        span: 1
      },
      {
        label: "床垫信息",
        span: 1
      },
      {
        label: "报价信息",
        span: 1
      },
      {
        label: ""
      }
    ]
  },
  header: {
    fieldNames: {
      code: "sptcode",
      codeLabel: t("table.u_spt.sptcode") + "：",
      name: "name"
    },
    // icon: "iconclipboard",
    tabsProp: {
      scrollspy: true,
      sticky: true
    }
  },
  mould: [
    {
      id: "rpMustPayMxList",
      type: "table",
      label: t("business.takePay.mustPayMx")
    }
  ]
});

const tableProps_mx = {
  // height: "auto",
  height: "",
  minHeight: "300px",
  editConfig: { trigger: "click", mode: "cell" }
  // exportConfig: {
  //   filename: t("menu.saleTaskCrmDetail") + formatToDate(new Date(), "YYYY-MM-DD HH:mm:ss")
  // }
};

const getData = (params: any) => {
  console.log("getData params :>> ", params);
  let newParams: any = {};
  params.pageNum && (newParams.pageindex = params.pageNum);
  params.pageSize && (newParams.pagesize = params.pageSize);
  delete params.pageNum;
  delete params.pageSize;
  newParams.queryParams = params;
  console.log("params :>> ", params);
  newParams.dsname = "web_mattress";
  return CommonDynamicSelect(newParams, DwnameEnum.mattressQuote);
  // return [];
};

const getData_mx = (params: any) => {
  console.log("getData params :>> ", params);
  let newParams: any = {};
  params.pageNum && (newParams.pageindex = params.pageNum);
  params.pageSize && (newParams.pagesize = params.pageSize);
  delete params.pageNum;
  delete params.pageSize;
  newParams.queryParams = params;
  console.log("params :>> ", params);
  newParams.dsname = "web_mattress_mx";
  return CommonDynamicSelect(newParams, DwnameEnum.mattressQuoteMx);
  // return [];
};

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

const orderDefaultAction = [
  buttonDefault({
    label: t("common.add")
  }),
  buttonDefault({
    label: t("common.editText")
  }),
  buttonDefault({
    label: t("common.delText")
  }),
  [
    buttonDefault({
      label: t("common.auditFinance"),
      clickFunc: () => {}
    }),
    buttonDefault({
      label: t("common.withdrawAuditFinance"),
      clickFunc: () => {}
    })
  ],
  buttonDefault({
    label: t("common.copyQuote")
  }),
  buttonDefault({
    label: t("common.showFormula")
  }),
  buttonDefault({
    label: t("common.viewHistoricalQuotes")
  })
];

const orderEditAction = [];

onMounted(async () => {
  console.log("route onMounted:>> ", route);
  console.log("route onMounted:>> ", route.params);
  console.log("route onMounted:>> ", route.params.id);

  if (route.query?.id) {
    // 赋值主表数据
    // mainData.value = res.datatable.length ? res.datatable[0] : {};
    console.log("mainData.value :>> ", mainData.value);
    // 刷新数据
    initParams.value.arg_mattressid = Number(route.query?.id);
    console.log("detail onMounted initParams.value :>> ", initParams.value);
    // } else {
    //   // 直接读取
    //   mainData.value = props.data;
  }
});
</script>

<style lang="scss">
.select-text-right {
  .el-select__wrapper {
    text-align: right;
  }
}
</style>