manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/moduleDetails/index.vue

<template>
  <Page :title="`${currentRoutingInformation?.name}详情`" styleReset="backNone">
    <template v-slot:body>
      <div class="w-full h-full detailsClass">
        <!-- 商机 -->
        <template v-if="currentRoutingInformation?.key == 'business'">
          <Business :info="queryParameters" />
        </template>
        <!-- 线索 -->
        <template v-if="currentRoutingInformation?.key == 'thread'">
          <Thread :info="queryParameters" />
        </template>
        <!-- 客户 -->
        <template v-if="currentRoutingInformation?.key == 'customer'">
          <Customer :info="queryParameters" />
        </template>
        <!-- 联系人 -->
        <template v-if="currentRoutingInformation?.key == 'contacts'">
          <Contacts :info="queryParameters" />
        </template>
        <!-- 任务 -->
        <template v-if="currentRoutingInformation?.key == 'tasks'">
          <Tasks :info="queryParameters" />
        </template>
        <!-- 产品管理 -->
        <template v-if="currentRoutingInformation?.key == 'product'">
          <Product :info="queryParameters" />
        </template>
        <!-- 合同管理 -->
        <template v-if="currentRoutingInformation?.key == 'contract'">
          <Contract :info="queryParameters" />
        </template>
        <!-- 销售订单 -->
        <template v-if="currentRoutingInformation?.key == 'order'">
          <Order :info="queryParameters" />
        </template>
      </div>
    </template>

    <template v-slot:headerRight>
      <template v-if="currentRoutingInformation?.key == 'tasks'">
        <div class="themeTextColor" @click="jumpEdit()">编辑</div>
      </template>
    </template>
  </Page>
</template>

<script setup>
import { ref } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { resetListData, getListFieldKey } from '@components/common/formForm/formCorrespondenceProcessing'
import useRouterStore from "@store/useRouterStore.js";
import useFixedData from "@store/useFixedData.js"

import Business from "@pages/pageComponents/business/detail.vue"
import Thread from "@pages/pageComponents/thread/detail.vue"
import Customer from "@pages/pageComponents/customer/detail.vue"
import Contacts from "@pages/pageComponents/contacts/detail.vue"
import Tasks from "@pages/pageComponents/tasks/detail.vue"
import Product from "@pages/pageComponents/product/detail.vue"
import Contract from "@pages/pageComponents/contract/detail.vue"
import Order from "@pages/pageComponents/order/detail.vue"

const fixedData = useFixedData()
const router = useRouterStore()
const queryParameters = ref({})
const currentRoutingInformation = ref({})
function reloadListData(data) {
  const { routerInfo = '', parameter = '' } = data
  queryParameters.value = JSON.parse(parameter)
  currentRoutingInformation.value = JSON.parse(routerInfo)
}

function jumpEdit() {
  const formJson = fixedData.formJson[currentRoutingInformation.value.key] || []
  const formList = resetListData(formJson?.list)
  const filedObj = getListFieldKey(formList, queryParameters.value)
  const formVal = { ...queryParameters.value, ...filedObj, id: queryParameters.value.id }
  console.log(formVal, '<=== formVal')
  router.navigateTo({
    pathName: 'addEditor',
    success: () => {
      router.emit('addEditorParameter', {
        routerInfo: JSON.stringify(currentRoutingInformation.value),
        filedValue: JSON.stringify(formVal)
      })
    }
  })
}

useLifecycle({
  load: () => {
    router.on('detailParameter', (data) => {
      reloadListData(data)
    })
  }
});
</script>

<style lang='scss' scoped>
.backNone {
  background: linear-gradient(to bottom, #E0EFFF, #F8F8F8 60%) !important;

  :deep(.van-nav-bar) {
    background: none;
  }
}

.detailsClass {
  :deep(.van-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  :deep(.van-tabs__content) {
    flex: 1;
    overflow: hidden;
  }
  :deep(.van-tab__panel) {
    height: 100%;
  }
  :deep(.van-tabs__nav) {
    background: none;
  }
}
</style>