提交相关代码

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/assets/scss/iframe.scss

@@ -37,4 +37,22 @@ $themeColor: #075985;
   :deep(.van-field__label) {
     padding-left: 7.35px;
   }
+}
+
+/**
+ * van-cell 样式重置
+ * 详情页面 cell 展示重置
+ */
+.cellnormall {
+  :deep(.van-cell) {
+    padding: 0 0 14px 0;
+  }
+  :deep(.van-cell:after) {
+    border: 0;
+  }
+
+  :deep(.van-cell__title) {
+    flex: none;
+    width: 80px;
+  }
 }

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/components/common/translationComponent.vue

@@ -20,7 +20,7 @@ import useInfoStore from '@store/useInfoStore'
 
 const props = defineProps({
   openId: {
-    type: [String, Number],
+    type: [String, Number, Array],
     default: () => '',
   },
   type: {

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

@@ -1,38 +1,40 @@
 <template>
-  <Page :title="`${currentRoutingInformation?.name}详情`">
+  <Page :title="`${currentRoutingInformation?.name}详情`" styleReset="backNone">
     <template v-slot:body>
-      <!-- 商机 -->
-      <template v-if="currentRoutingInformation?.key == 'business'">
-        <Business />
-      </template>
-      <!-- 线索 -->
-      <template v-if="currentRoutingInformation?.key == 'thread'">
-        <Thread />
-      </template>
-      <!-- 客户 -->
-      <template v-if="currentRoutingInformation?.key == 'customer'">
-        <Customer />
-      </template>
-      <!-- 联系人 -->
-      <template v-if="currentRoutingInformation?.key == 'contacts'">
-        <Contacts />
-      </template>
-      <!-- 任务 -->
-      <template v-if="currentRoutingInformation?.key == 'tasks'">
-        <Tasks />
-      </template>
-      <!-- 产品管理 -->
-      <template v-if="currentRoutingInformation?.key == 'product'">
-        <Product />
-      </template>
-      <!-- 合同管理 -->
-      <template v-if="currentRoutingInformation?.key == 'contract'">
-        <Contract />
-      </template>
-      <!-- 销售订单 -->
-      <template v-if="currentRoutingInformation?.key == 'order'">
-        <Order />
-      </template>
+      <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>
   </Page>
 </template>
@@ -42,7 +44,7 @@ import { ref } from 'vue';
 import { useLifecycle } from '@hooks/useCommon.js';
 import useRouterStore from "@store/useRouterStore.js";
 
-import Business from "@pages/pageComponents/business/detail.vue" 
+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"
@@ -70,5 +72,29 @@ useLifecycle({
 </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>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/business/businessInfo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex flex-col h-full">
+    <div class="bg-white info flex-1 overflow-y-auto cellnormall">
+      <van-cell title="商机名称" :value="info.name" />
+      <van-cell title="客户名称" :value="info.customerName" />
+      <van-cell title="联系人姓名" :value="info.contactsName" />
+      <van-cell title="商机金额">
+        <template #default>
+          <span class="text-[#FF8B32]" v-if="info.amountOfMoney">¥ {{ info.amountOfMoney }}</span>
+        </template>
+      </van-cell>
+      <van-cell title="预计成交" :value="info.expectedTransactionDate" />
+      <van-cell title="商机阶段" :value="info.stageValue" />
+      <van-cell title="负责人">
+        <template #default>
+          <TranslationComponent :openId="info.inchargerName" />
+        </template>
+      </van-cell>
+      <van-cell title="备注" :value="info.remark" />
+    </div>
+    <div class="bottomButton">
+      <van-button type="primary" class="w-full block">关联联系人</van-button>
+      <van-button type="warning" class="w-full block">转移商机</van-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useLifecycle } from '@hooks/useCommon.js';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+useLifecycle({
+  load: () => {
+    // 添加加载逻辑
+  }
+});
+</script>
+
+<style lang='scss' scoped>
+  .bottomButton {
+    margin: 0 14px;
+    padding-bottom: 30px;
+    :deep(.van-button) {
+      margin-bottom: 20px;
+    }
+  }
+  .info {
+    margin: 8px 14px 30px 14px;
+    padding: 14px;
+  }
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/business/detail.vue

@@ -1,20 +1,69 @@
 <template>
   <div class="w-full h-full">
-    商机详情
+    <van-tabs v-model:active="tabActive">
+      <van-tab title="商机阶段" name="商机阶段">商机阶段 1</van-tab>
+      <van-tab title="商机信息" name="商机信息">
+        <BusinessInfo :info="info" />
+      </van-tab>
+      <van-tab title="相关产品" name="相关产品">
+        <RelatedProducts :infoList="relatedProductsList" :key="componentKey" />
+      </van-tab>
+      <van-tab title="相关任务" name="相关任务">
+        <RelatedTasks :infoList="relatedTasksList" :key="componentKey" />
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onActivated, watch } from 'vue';
 import { useLifecycle } from '@hooks/useCommon.js';
+import { GET_BUSINESS_OPPORTUNITY_DETAILS } from "@hooks/useApi"
+import requests from "@common/requests";
+import RelatedProducts from '../order/relatedProducts.vue';
+import BusinessInfo from './businessInfo.vue';
+import RelatedTasks from '../tasks/relatedTasks.vue';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+const tabActive = ref('商机信息');
+const componentKey = ref(1);
+const relatedProductsList = ref([]);
+const relatedTasksList = ref([]);
+
+watch(() => props.info, (newValue) => {
+  tabActive.value = '商机信息';
+  processingData(newValue.id)
+})
+
+function getBusinessOpportunityDetails(id) {
+  requests.post(GET_BUSINESS_OPPORTUNITY_DETAILS, { id }).then(({ data }) => {
+    relatedProductsList.value = data.businessItemProducts || []
+    relatedTasksList.value = data.taskList || []
+  }).finally(() => {
+    setTimeout(() => {
+      componentKey.value++
+    }, 10)
+  })
+}
+
+function processingData(id) {
+  getBusinessOpportunityDetails(id)
+}
 
 useLifecycle({
-  load: () => {
-    // 添加加载逻辑
+  init: () => {
+    tabActive.value = '商机信息';
+    processingData(props.info.id)
   }
 });
 </script>
 
 <style lang='scss' scoped>
-  /* 样式代码 */
+/* 样式代码 */
 </style>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/order/relatedProducts.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col h-full overflow-y-auto">
+    <div class="info h-full cellnormall" v-if="infoList.length">
+      <div v-for="(item, index) in infoList">
+        <FoldingPanel :title="`相关产品(${item.productName})`">
+          <template #foldContainer>
+            <div class="p-5 bg-white ">
+              <van-cell title="产品名称" :value="item.productName" />
+              <van-cell title="产品类型" :value="item.productType" />
+              <van-cell title="单位" :value="item.unit" />
+              <van-cell title="标准价格" :value="item.price">
+                <template #default>
+                  <span class="text-[#FF8B32]" v-if="item.price">¥ {{ item.price }}</span>
+                </template>
+              </van-cell>
+              <van-cell title="库存" :value="item.inventory" />
+              <van-cell title="售价" :value="item.sellingPrice">
+                <template #default>
+                  <span class="text-[#FF8B32]" v-if="item.sellingPrice">¥ {{ item.sellingPrice }}</span>
+                </template>
+              </van-cell>
+              <van-cell title="数量" :value="item.quantity">
+                <template #default>
+                  <span class="text-[#FF8B32]" v-if="item.quantity">¥ {{ item.quantity }}</span>
+                </template>
+              </van-cell>
+              <van-cell title="折扣(%)" :value="item.discount" />
+              <van-cell title="合计" :value="item.totalPrice" /> 
+            </div>
+          </template>
+        </FoldingPanel>
+      </div>
+    </div>
+    <div v-else class="items-justify-center h-2/3">
+      <van-empty description="暂无产品" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onActivated } from 'vue';
+import { useLifecycle } from '@hooks/useCommon.js';
+import FoldingPanel from '@components/common/foldingPanel.vue';
+
+const props = defineProps({
+  infoList: {
+    type: Array,
+    required: true,
+    default: () => ([])
+  }
+})
+
+useLifecycle({
+  load: () => {
+    
+  },
+  init: () => {
+    
+  }
+});
+
+</script>
+
+<style lang='scss' scoped>
+.info {
+  margin: 8px 14px 30px 14px;
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/pageComponents/tasks/relatedTasks.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col h-full overflow-y-auto">
+    <div class="info h-full cellnormall" v-if="infoList.length">
+      <div v-for="(item, index) in infoList">
+        <FoldingPanel :title="`相关任务(${item.taskName})`">
+          <template #foldContainer>
+            <div class="p-5 bg-white ">
+              <van-cell title="任务名称" :value="item.taskName" />
+              <van-cell title="优先级" :value="retPriorityStr(item.priority)" />
+              <van-cell title="状态" :value="retStatueStr(item.status)" />
+              <van-cell title="执行人">
+                <template #default>
+                  <TranslationComponent :openId="item.executorNames" />
+                </template>
+              </van-cell>
+              <van-cell title="开始时间" :value="item.startDate" />
+              <van-cell title="截至时间" :value="item.endDate" />
+              <van-cell title="备注" :value="item.taskDesc" />
+            </div>
+          </template>
+        </FoldingPanel>
+      </div>
+    </div>
+    <div v-else class="items-justify-center h-2/3">
+      <van-empty description="暂无任务" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useLifecycle } from '@hooks/useCommon.js';
+import { fixedFieldPriority, fixedFieldTaskStatus } from "@utility/defaultData.js"
+import FoldingPanel from '@components/common/foldingPanel.vue';
+
+const props = defineProps({
+  infoList: {
+    type: Array,
+    required: true,
+    default: () => ([])
+  }
+})
+
+function retPriorityStr(value) {
+  return fixedFieldPriority.find(item => item.value == value)?.label
+}
+
+function retStatueStr(value) {
+  return fixedFieldTaskStatus.find(item => item.value == value)?.label
+}
+
+useLifecycle({
+  load: () => {
+    // 添加加载逻辑
+  }
+});
+</script>
+
+<style lang='scss' scoped>
+.info {
+  margin: 8px 14px 30px 14px;
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/utility/defaultData.js

@@ -11,4 +11,27 @@ export const defaultRelatedProductDataFields = {
   quantity: "", // 数量
   discount: "", // 折扣
   totalPrice: "", // 总价
-}
+}
+
+// 任务优先级
+export const fixedFieldPriority = [
+  { label: "高", value: 2 },
+  { label: "中", value: 1 },
+  { label: "低", value: 0 },
+]
+
+// 任务类型
+export const fixedFieldTaskType = [
+  { label: "客户", value: 0, show: true },
+  { label: "商机", value: 1, show: true },
+  { label: "销售订单", value: 2, show: true },
+  { label: "线索", value: 3, show: false },
+]
+
+//任务状态
+export const fixedFieldTaskStatus = [
+  { label: "未开始", value: "0", type: "info" },
+  { label: "进行中", value: "1", type: "primary" },
+  { label: "已完成", value: "2", type: "success" },
+  { label: "已超时", value: "3", type: "danger" },
+];