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

<template>
  <Page :title="`${currentRoutingInformation?.name}${addOrEdit ? '编辑' : '新增'}`">
    <template v-slot:body>
      <div class="w-full h-full">
        <van-skeleton title :row="10" v-if="pageLoading" class="w-full h-full" />
        <template v-if="!pageLoading">
          <!-- 商机 -->
          <template v-if="currentRoutingInformation?.key == 'business'">
            <Business :formJson="formJson" :formValue="formValue" />
          </template>
          <!-- 线索 -->
          <template v-if="currentRoutingInformation?.key == 'thread'">
            <Thread :formJson="formJson" :formValue="formValue" />
          </template>
          <!-- 客户 -->
          <template v-if="currentRoutingInformation?.key == 'customer'">
            <Customer :formJson="formJson" :formValue="formValue" />
          </template>
          <!-- 联系人 -->
          <template v-if="currentRoutingInformation?.key == 'contacts'">
            <Contacts :formJson="formJson" :formValue="formValue" />
          </template>
          <!-- 任务 -->
          <template v-if="currentRoutingInformation?.key == 'tasks'">
            <Tasks :formJson="formJson" :formValue="formValue" />
          </template>
          <!-- 产品管理 -->
          <template v-if="currentRoutingInformation?.key == 'product'">
            <Product :formJson="formJson" :formValue="formValue" />
          </template>
          <!-- 合同管理 -->
          <template v-if="currentRoutingInformation?.key == 'contract'">
            <Contract :formJson="formJson" :formValue="formValue" />
          </template>
          <!-- 销售订单 -->
          <template v-if="currentRoutingInformation?.key == 'order'">
            <Order :formJson="formJson" :formValue="formValue" />
          </template>
        </template>
      </div>
    </template>
  </Page>
</template>

<script setup>
import { ref } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { GET_CUSTOM_FORM_JSON } from '@hooks/useApi.js';
import requests from "@common/requests";
import useRouterStore from "@store/useRouterStore.js";
import useFixedData from "@store/useFixedData.js";

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

const router = useRouterStore()
const fixedData = useFixedData()
const currentRoutingInformation = ref({})
const formJson = ref({})
const formValue = ref({})
const addOrEdit = ref(false)
const pageLoading = ref(true)
function reloadListData(data) {
  const { routerInfo = '', filedValue = '' } = data
  const info = JSON.parse(routerInfo)
  currentRoutingInformation.value = JSON.parse(routerInfo)
  pageLoading.value = true
  formValue.value = (filedValue && Object.keys(JSON.parse(filedValue)).length)
    ? JSON.parse(filedValue)
    : {}
  addOrEdit.value = (filedValue && Object.keys(JSON.parse(filedValue)).length) ? true : false
  if (fixedData.formJson[info.key]) {
    formJson.value = fixedData.formJson[info.key]
    closeLoading()
    return
  } else {
    getCustomFormJson(info)
  }
}

function getCustomFormJson(info) {
  requests.get(`${GET_CUSTOM_FORM_JSON}/${info.key}`).then(res => {
    const { data = [] } = res
    formJson.value = JSON.parse(data[0].config)
    fixedData.updateState({
      formJson: {
        ...fixedData.formJson,
        [info.key]: JSON.parse(data[0].config)
      }
    })
  }).finally(() => {
    closeLoading()
  })
}

function closeLoading() {
  setTimeout(() => {
    pageLoading.value = false
  }, 500)
}

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

<style lang='scss' scoped>
/* 样式代码 */
</style>