1、床垫报价，计算时生成大小散标四个结果及过程

2、床网报价新增大小单系数

JLHWEB/src/api/interface/index.ts

@@ -1239,7 +1239,7 @@ export namespace Mattress {
     mattress: any;
     mattressMx?: any[];
     subspecs?: any[];
-    check_original?: int;
+    check_original?: number;
   }
   export interface ResSaveMattress {
     mattressid: number;
@@ -1285,6 +1285,8 @@ export namespace Mattress {
     replace: any;
     formulas: any;
     message: string;
+    formulas_origin: any;
+    differ?: any;
   }
   export interface ReqRefreshMattressInterface {
     mattressid: number;

JLHWEB/src/components/LjDetail/index.vue

@@ -518,9 +518,10 @@ const enumMap = ref(new Map<string, { [key: string]: any }[]>());
 watch(
   () => props.enum,
   (val: any) => {
-    val.forEach((val: any, key: any) => {
-      enumMap.value.set(key, val);
-    });
+    val &&
+      val.forEach((val: any, key: any) => {
+        enumMap.value.set(key, val);
+      });
   },
   { immediate: true, deep: true }
 );

JLHWEB/src/config/index.ts

@@ -65,7 +65,7 @@ export const TABLE_LAYOUT_BASICINFO_ATTR = ["labelPosition", "labelWidth", "basi
 export const TABLE_LAYOUT_ATTR_DEFINE = {
   visible: true,
   width: 200,
-  align: "center",
+  align: "left",
   sortable: true,
   order: "",
   sortTime: 0,

JLHWEB/src/main.ts

@@ -75,6 +75,7 @@ import {
   ElRadioGroup,
   ElResult,
   ElSpace,
+  ElSegmented,
   ElText,
   ElTag,
   ElCheckTag,
@@ -255,6 +256,7 @@ app.use(ElRadioButton);
 app.use(ElRadioGroup);
 app.use(ElResult);
 app.use(ElSpace);
+app.use(ElSegmented);
 app.use(ElText);
 app.use(ElTag);
 app.use(ElCheckTag);

JLHWEB/src/views/quote/bednetQuote/components/AllFormula.vue

@@ -4,7 +4,7 @@
     ref="LjDrawerRef"
     :class="`${prefixCls}`"
     :id="prefixCls"
-    direction="rtl"
+    direction="btt"
     size="60%"
     destroy-on-close
     append-to-body
@@ -77,6 +77,7 @@ import { useGlobalStore } from "@/stores/modules/global";
 import { Close, Search } from "@element-plus/icons-vue";
 import FormulaGroup from "./FormulaGroup.vue";
 import LjHeader from "@/components/LjHeader/index.vue";
+import { cloneDeep } from "lodash-es";
 
 const { t } = useI18n();
 const { prefixCls } = useDesign("bednet-formal-detail");
@@ -89,8 +90,52 @@ const fieldsReplace = ref<any>([]);
 const mainData = ref<any>({});
 const formulaMxList = ref<any>([]);
 
+const buildTreeArr = (items, parentId = null) => {
+  return items
+    .filter(item => item.parentId === parentId)
+    .map(item => ({
+      ...item,
+      children: buildTreeArr(items, item.label)
+    }));
+};
+
 const isNormalFormulas = computed(() => {
-  return formulaList.value.filter((item: any) => item.type == 0);
+  // return formulaList.value.filter((item: any) => item.type == 0);
+
+  // let _formula = formulaList.value.filter((item: any) => item.type == 0);
+  let _formula = cloneDeep(formulaList.value);
+  _formula = _formula.map((item: any) => {
+    let _val = fieldsReplace.value.find((_item: any) => _item.label == item.label);
+    if (!_val) {
+      let tgItem = formulaList.value.find(_item => _item.value.indexOf(item.label) > -1);
+      if (tgItem) {
+        item.parentId = tgItem.label;
+      } else {
+        item.parentId = null;
+      }
+    } else {
+      item.parentId = null;
+    }
+    return item;
+  });
+
+  // let replaceFormula = cloneDeep(_formula.filter((item: any) => item.ifnotreplace == true));
+
+  // _formula = cloneDeep(_formula.filter((item: any) => !item.ifnotreplace));
+
+  // replaceFormula.map((item: any) => {
+  //   let index = _formula.findIndex((_item: any) => _item.value.indexOf(item.label) > -1);
+  //   if (index > -1) {
+  //     if (!Object.keys(_formula[index]).includes("children")) {
+  //       _formula[index].children = [];
+  //     }
+  //     item.ifnotreplace = null;
+  //     _formula[index].children.push(item);
+  //   }
+  // });
+  console.log("isNormalFormulas: >>> ", buildTreeArr(_formula));
+
+  return buildTreeArr(_formula).filter((item: any) => item.type == 0);
 });
 
 const isMxFormulas = computed(() => {

JLHWEB/src/views/quote/bednetQuote/components/FormulaGroup.vue

@@ -19,7 +19,7 @@
         </div>
       </div>
     </div> -->
-    <div class="summary-wrapper__label-item flx-start-end" :style="{ width: width + 'px' }">
+    <div class="summary-wrapper__label-item flx-end-end" :style="{ width: width + 'px' }">
       <div class="summary-box_item flx-col mt-4">
         <div class="flx-1 text-secondary-text text-body-c text-right">
           {{ isFilterLabel(item.label) }}

JLHWEB/src/views/quote/bednetQuote/components/FormulaItem.vue

@@ -53,7 +53,6 @@ const funcFormulaToArray = (formula: string) => {
 };
 
 const RenderVariable = (data: any, rprops: any) => {
-  console.log("RenderVariable :>> ", data, rprops.data);
   let fieldName = data.slice(1, -1); // 去掉方括号
 
   let sumVal = props.fields.find(f => {
@@ -92,6 +91,15 @@ const RenderVariable = (data: any, rprops: any) => {
             </div>
           </>
         );
+      } else {
+        return (
+          <>
+            <div class="flx-col flx-end formula-wrapper__item">
+              <span class="label text-secondary-text text-body-c">{fieldName}</span>
+              <span class="value text-primary-text text-h5-b">0</span>
+            </div>
+          </>
+        );
       }
     }
   }
@@ -150,14 +158,15 @@ const RenderFormulaItem = (rprops: any) => {
   user-select: none;
 
   display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
+  // flex-wrap: wrap;
+  // align-content: flex-start;
+  white-space: nowrap;
 
   & > * {
     // display: table-cell;
     margin-top: 4px;
     margin-left: 4px;
-    margin-bottom: 4px;
+    // margin-bottom: 4px;
   }
 
   &__item {

JLHWEB/src/views/quote/bednetQuote/components/Statistic.vue

@@ -10,7 +10,7 @@
 
 <script setup lang="ts" name="mattressQuoteDetail_statistic">
 import { ref, watch } from "vue";
-import StatisticItem from "@/views/quote/mattressQuote/components/StatisticItem.vue";
+import StatisticItem from "./StatisticItem.vue";
 import { useUserStore } from "@/stores/modules/user";
 
 interface WidgetProps {
@@ -61,7 +61,7 @@ const statisticData = ref<statisticDataProps[]>([
     }
   },
   {
-    label: "【总人力成本】",
+    label: "【总人力费用】",
     value: 0,
     power: () => {
       return userInfo.usermode === 0;
@@ -87,7 +87,7 @@ const statisticData = ref<statisticDataProps[]>([
     value: 0
   },
   {
-    label: "【总成本】",
+    label: "【车间成本】",
     value: 0,
     power: () => {
       return userInfo.usermode === 0;

JLHWEB/src/views/quote/bednetQuote/components/StatisticItem.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="statistic-card">
+    <el-statistic :value="outputValue" v-bind="$attrs">
+      <template #title>
+        {{ isFilterLabel(data.label) }}
+      </template>
+    </el-statistic>
+    <div class="statistic-footer" v-if="iforigin">
+      <div class="footer-item">
+        <div class="flx-center">
+          <i class="iconfont iconjiu"></i>
+          <span>{{ isFilterPrice(data.origin) }}</span>
+        </div>
+        <span v-if="getDiscrepancy !== 0" :class="getDiscrepancy > 0 ? 'green' : 'red'" style="text-align: right">
+          {{ getDiscrepancy }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="mattressQuoteDetail_statistic-item">
+import { ref, watch, computed } from "vue";
+import { useTransition } from "@vueuse/core";
+// import { CaretTop, CaretBottom } from "@element-plus/icons-vue";
+import { floatSub, formatAmount3 } from "@/utils/index";
+
+interface WidgetProps {
+  data: any;
+  iforigin?: any;
+}
+
+const props = withDefaults(defineProps<WidgetProps>(), {
+  iforigin: false
+});
+
+const source = ref(0);
+const outputValue = useTransition(source, {
+  duration: 800
+});
+
+const isFilterLabel = val => {
+  return val.replace(/【/g, "").replace(/】/g, "");
+};
+
+const getDiscrepancy = computed(() => {
+  return Number(Math.trunc(floatSub(props.data.value, props.data.origin)));
+});
+
+const isFilterPrice = data => {
+  let val = formatAmount3({ val: Math.trunc(data * 100) / 100 });
+  // 过滤掉末尾的0
+  let arr = val.split("");
+  while (arr[arr.length - 1] === "0") {
+    arr.pop();
+  }
+  return arr.join("");
+};
+
+watch(
+  () => props.data,
+  val => {
+    console.log("mattressQuoteDetail_statistic-item val :>> ", val);
+    source.value = val.value;
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+// :global(h2#card-usage ~ .example .example-showcase) {
+//   background-color: var(--el-fill-color) !important;
+// }
+
+.el-statistic {
+  --el-statistic-content-font-size: 22px;
+}
+
+.statistic-card {
+  // height: 100%;
+  // padding: 20px;
+  // border-radius: 4px;
+  // background-color: $color-gray-3;
+  // text-align: center;
+  padding: 0 8px;
+
+  :deep(.el-statistic) {
+    .el-statistic__head {
+      color: $color-primary-000 !important;
+      // color: var(--lj-color-text-secondary-text) !important;
+      margin-bottom: 0;
+    }
+    .el-statistic__number {
+      color: $color-gray-1 !important;
+      font-weight: 600;
+    }
+  }
+
+  .statistic-footer .footer-item {
+    font-size: 14px;
+    color: $color-primary-100 !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+  }
+
+  .statistic-footer .footer-item > span:last-child {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+  }
+
+  .green {
+    color: var(--lj-color-polar-green-6);
+  }
+  .red {
+    color: var(--lj-color-dust-red-7);
+  }
+}
+</style>

JLHWEB/src/views/quote/mattressQuote/components/AllFormula.vue

@@ -4,8 +4,8 @@
     ref="LjDrawerRef"
     :class="`${prefixCls}`"
     :id="prefixCls"
-    direction="rtl"
-    size="60%"
+    direction="btt"
+    size="70%"
     destroy-on-close
     append-to-body
     :show-close="false"
@@ -13,7 +13,10 @@
   >
     <template #header>
       <div class="flx-justify-between">
-        <div class="">详细报价</div>
+        <div class="">
+          详细报价
+          <el-segmented v-model="dannumValue" :options="dannumOptions" class="ml-32" size="default" />
+        </div>
         <div class="flx-shrink">
           <el-button type="danger" :icon="Close" text circle @click="cancelClick"></el-button>
         </div>
@@ -23,17 +26,17 @@
       <template v-if="iforigin">
         <el-tabs v-model="activeName">
           <el-tab-pane label="新公式" name="first">
-            <LjHeader class="flx-1" title="单据统计" />
-            <FormulaGroup :data="isNormalFormulas" :fields="fieldsReplace" />
+            <!-- <LjHeader class="flx-1" title="单据统计" /> -->
+            <FormulaGroup :data="isNormalFormulas" :fields="isFieldsReplace" />
           </el-tab-pane>
           <el-tab-pane label="旧公式" name="second">
-            <LjHeader class="flx-1" title="单据统计" />
-            <FormulaGroup :data="isNormalFormulasOri" :fields="fieldsReplaceOri" />
+            <!-- <LjHeader class="flx-1" title="单据统计" /> -->
+            <FormulaGroup :data="isNormalFormulasOri" :fields="isFieldsReplaceOri" />
           </el-tab-pane>
         </el-tabs>
       </template>
       <template v-else>
-        <LjHeader class="flx-1" title="单据统计" />
+        <!-- <LjHeader class="flx-1" title="单据统计" /> -->
         <FormulaGroup :data="isNormalFormulas" :fields="fieldsReplace" />
       </template>
     </template>
@@ -47,6 +50,7 @@ import { useI18n } from "vue-i18n";
 import { useDesign } from "@/hooks/useDesign";
 import { useGlobalStore } from "@/stores/modules/global";
 import { Close, Search } from "@element-plus/icons-vue";
+import { ElSegmented } from "element-plus";
 import FormulaGroup from "./FormulaGroup.vue";
 import LjHeader from "@/components/LjHeader/index.vue";
 import { cloneDeep } from "lodash-es";
@@ -68,10 +72,14 @@ const LjDrawerRef = ref();
 const formulaList = ref<any>([]);
 const fieldsReplace = ref<any>([]);
 const formulaListOri = ref<any>([]);
-const fieldsReplaceOri = ref<any>([]);
+const differ = ref<any>([]);
 // const mainData = ref<any>({});
 const formulaMxList = ref<any>([]);
 
+const dannumValue = ref("标准");
+
+const dannumOptions = ["标准", "散单", "大单", "小单"];
+
 const isNormalFormulas = computed(() => {
   let _formula = formulaList.value.filter((item: any) => item.type == 0);
   _formula = _formula.map((item: any) => {
@@ -103,7 +111,7 @@ const isNormalFormulas = computed(() => {
   //     _formula[index].children.push(item);
   //   }
   // });
-  console.log("isNormalFormulas: >>> ", buildTreeArr(_formula));
+  // console.log("isNormalFormulas: >>> ", buildTreeArr(_formula));
 
   return buildTreeArr(_formula);
 });
@@ -111,6 +119,34 @@ const isNormalFormulasOri = computed(() => {
   return formulaListOri.value.filter((item: any) => item.type == 0);
 });
 
+const getDannumType = computed(() => {
+  let _type = 1;
+  switch (dannumValue.value) {
+    case "标准":
+      _type = 2;
+      break;
+    case "散单":
+      _type = 1;
+      break;
+    case "大单":
+      _type = 3;
+      break;
+    case "小单":
+      _type = 4;
+      break;
+  }
+  return _type;
+});
+
+const isFieldsReplace = computed(() => {
+  let tg = differ.value.find((item: any) => item.type == getDannumType.value);
+  return tg.replace;
+});
+const isFieldsReplaceOri = computed(() => {
+  let tg = differ.value.find((item: any) => item.type == getDannumType.value);
+  return tg.replace_origin;
+});
+
 const isMxFormulas = computed(() => {
   return formulaList.value.filter((item: any) => item.type == 2);
 });
@@ -146,11 +182,26 @@ const cancelClick = () => {
  * @description 显示组件
  */
 const open = (data: any) => {
+  switch (data.dannum_type) {
+    case 2:
+      dannumValue.value = "标准";
+      break;
+    case 1:
+      dannumValue.value = "散单";
+      break;
+    case 3:
+      dannumValue.value = "大单";
+      break;
+    case 4:
+      dannumValue.value = "小单";
+      break;
+  }
+
   visible.value = true;
   formulaList.value = data.formula;
   fieldsReplace.value = data.replace;
   formulaListOri.value = data.formula_ori;
-  fieldsReplaceOri.value = data.replace_ori;
+  differ.value = data.differ;
   // mainData.value = data;
 
   // formulaMxList.value;

JLHWEB/src/views/quote/mattressQuote/components/QuoteList.vue

@@ -5,7 +5,7 @@
         {{ $t("business.detail.quoteList") }}
 
         <el-button v-if="iforigin" type="primary" size="small" @click="handleOpenOriginQuote">
-          {{ ifShowOrigin ? "返回新报价清单" : "查看旧报价清单" }}
+          {{ !ifShowOrigin ? "返回新报价清单" : "查看旧报价清单" }}
         </el-button>
       </div>
     </template>
@@ -124,9 +124,9 @@ const handleOpenOriginQuote = () => {
   setOriginData();
 };
 
-const show = (params: any, originReplace: any) => {
+const show = (params: any, originReplace?: any) => {
   console.log("show>>>>>  ", params, originReplace);
-  originData.value = originReplace;
+  originData.value = [];
   if (ifShowOrigin.value) {
     setOriginData();
   }

JLHWEB/src/views/quote/mattressQuote/components/QuoteListNew.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
+      <el-table-column prop="date" label="Date" sortable />
+      <el-table-column prop="name" label="Name" sortable />
+      <el-table-column prop="address" label="Address" sortable />
+    </el-table>
+
+    <el-table
+      :data="tableData1"
+      style="width: 100%"
+      row-key="id"
+      border
+      lazy
+      :load="load"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column prop="date" label="Date" />
+      <el-table-column prop="name" label="Name" />
+      <el-table-column prop="address" label="Address" />
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface User {
+  id: number;
+  date: string;
+  name: string;
+  address: string;
+  hasChildren?: boolean;
+  children?: User[];
+}
+
+const load = (row: User, treeNode: unknown, resolve: (data: User[]) => void) => {
+  setTimeout(() => {
+    resolve([
+      {
+        id: 31,
+        date: "2016-05-01",
+        name: "wangxiaohu",
+        address: "No. 189, Grove St, Los Angeles"
+      },
+      {
+        id: 32,
+        date: "2016-05-01",
+        name: "wangxiaohu",
+        address: "No. 189, Grove St, Los Angeles"
+      }
+    ]);
+  }, 1000);
+};
+
+const tableData: User[] = [
+  {
+    id: 1,
+    date: "2016-05-02",
+    name: "wangxiaohu",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    id: 2,
+    date: "2016-05-04",
+    name: "wangxiaohu",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    id: 3,
+    date: "2016-05-01",
+    name: "wangxiaohu",
+    address: "No. 189, Grove St, Los Angeles",
+    children: [
+      {
+        id: 31,
+        date: "2016-05-01",
+        name: "wangxiaohu",
+        address: "No. 189, Grove St, Los Angeles"
+      },
+      {
+        id: 32,
+        date: "2016-05-01",
+        name: "wangxiaohu",
+        address: "No. 189, Grove St, Los Angeles"
+      }
+    ]
+  },
+  {
+    id: 4,
+    date: "2016-05-03",
+    name: "wangxiaohu",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+
+const tableData1: User[] = [
+  {
+    id: 1,
+    date: "2016-05-02",
+    name: "wangxiaohu",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    id: 2,
+    date: "2016-05-04",
+    name: "wangxiaohu",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    id: 3,
+    date: "2016-05-01",
+    name: "wangxiaohu",
+    hasChildren: true,
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    id: 4,
+    date: "2016-05-03",
+    name: "wangxiaohu",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+</script>

JLHWEB/src/views/quote/mattressQuote/components/Statistic.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="display: table" @click="handleClick">
-    <el-row class="statistic-row h-full" :gutter="8" style="width: 320px" :class="{ 'is-admin': userInfo.usermode === 0 }">
-      <el-col :span="12" v-for="(item, index) in statisticData" :key="index">
+    <el-row class="statistic-row h-full" :gutter="8" style="width: 180px" :class="{ 'is-admin': userInfo.usermode === 0 }">
+      <el-col :span="24" v-for="(item, index) in statisticData" :key="index">
         <StatisticItem :data="item" v-bind="$attrs" :iforigin="props.iforigin" />
       </el-col>
     </el-row>
@@ -15,14 +15,23 @@ import { useUserStore } from "@/stores/modules/user";
 
 interface WidgetProps {
   data: any;
-  dataorigin?: any;
+  differ?: any;
   iforigin?: any;
 }
 
 interface statisticDataProps {
+  /**
+   * @desciption: replace关键字
+   */
+  key: string;
   label: string;
   subtitle?: string;
   value: number;
+  origin?: number;
+  /**
+   * @desciption: 大小单类型
+   */
+  type?: number;
   power?: () => boolean;
 }
 
@@ -34,67 +43,97 @@ const emit = defineEmits(["click"]);
 
 const { userInfo } = useUserStore();
 
+// const statisticData = ref<statisticDataProps[]>([
+//   {
+//     label: "【标准金额】",
+//     value: 0,
+//     origin: 0
+//   },
+//   {
+//     label: "【大单金额】",
+//     value: 0,
+//     origin: 0
+//   },
+//   {
+//     label: "【车间成本】",
+//     value: 0,
+//     origin: 0,
+//     power: () => {
+//       console.log("userInfo.usermode342 :>> ", userInfo.usermode);
+//       return userInfo.usermode === 0;
+//     }
+//   },
+//   {
+//     label: "【不含税出厂价】",
+//     value: 0,
+//     origin: 0,
+//     power: () => {
+//       return userInfo.usermode === 0;
+//     }
+//   },
+//   {
+//     label: "【部门含税价】",
+//     value: 0,
+//     origin: 0,
+//     subtitle: "财务底价",
+//     power: () => {
+//       return userInfo.usermode === 0;
+//     }
+//   },
+//   {
+//     label: "【税金】",
+//     value: 0,
+//     origin: 0,
+//     power: () => {
+//       return userInfo.usermode === 0;
+//     }
+//   },
+//   {
+//     label: "【部门含税价】",
+//     value: 0,
+//     origin: 0,
+//     power: () => {
+//       return userInfo.usermode === 0;
+//     }
+//   },
+//   {
+//     label: "【外币价】",
+//     value: 0,
+//     origin: 0,
+//     subtitle: "报价金额",
+//     power: () => {
+//       return userInfo.usermode === 0;
+//     }
+//   }
+// ]);
 const statisticData = ref<statisticDataProps[]>([
   {
     label: "【标准金额】",
     value: 0,
-    origin: 0
-  },
-  {
-    label: "【大单金额】",
-    value: 0,
-    origin: 0
-  },
-  {
-    label: "【车间成本】",
-    value: 0,
     origin: 0,
-    power: () => {
-      console.log("userInfo.usermode342 :>> ", userInfo.usermode);
-      return userInfo.usermode === 0;
-    }
+    key: "【部门含税价】",
+    type: 2
   },
   {
-    label: "【不含税出厂价】",
+    label: "【散单金额】",
     value: 0,
     origin: 0,
-    power: () => {
-      return userInfo.usermode === 0;
-    }
+    key: "【部门含税价】",
+    type: 1
   },
   {
-    label: "【部门不含税价】",
-    value: 0,
-    origin: 0,
-    subtitle: "财务底价",
-    power: () => {
-      return userInfo.usermode === 0;
-    }
-  },
-  {
-    label: "【税金】",
-    value: 0,
-    origin: 0,
-    power: () => {
-      return userInfo.usermode === 0;
-    }
-  },
-  {
-    label: "【部门含税价】",
+    label: "【大单金额】",
     value: 0,
     origin: 0,
-    power: () => {
-      return userInfo.usermode === 0;
-    }
+    key: "【部门含税价】",
+    type: 3
   },
   {
-    label: "【外币价】",
+    label: "【小单金额】",
     value: 0,
     origin: 0,
-    subtitle: "报价金额",
-    power: () => {
-      return userInfo.usermode === 0;
-    }
+    key: "【部门含税价】",
+    type: 4
   }
 ]);
 
@@ -102,11 +141,16 @@ watch(
   () => props.data,
   val => {
     statisticData.value = statisticData.value.filter(o => {
-      let tg = val.find(item => item.label === o.label);
-      o.value = tg ? tg.value : 0;
-      if (props.iforigin) {
-        let tgori = props.dataorigin.find(item => item.label === o.label);
-        o.origin = tgori ? tgori.value : 0;
+      // let tg = val.find(item => item.label === o.key);
+
+      let tg = props.differ.find(item => item.type === o.type);
+      if (tg) {
+        let tgRl = tg.replace.find(item => item.label === o.key);
+        o.value = tgRl ? tgRl.value : 0;
+        if (props.iforigin) {
+          let tgori = tg.replace_origin.find(item => item.label === o.key);
+          o.origin = tgori ? tgori.value : 0;
+        }
       }
       if (o?.power) {
         return o.power();
@@ -130,15 +174,20 @@ const handleClick = () => {
 .statistic-row {
   border-radius: 8px;
   // background-color: $color-gray-3;
-  padding: 8px 0;
-  background-color: $color-primary-400;
+  padding: 8px 12px;
+  // background-color: $color-primary-400;
+  background-color: $color-primary-000;
 
   &.is-admin {
     cursor: pointer;
   }
 
-  > .el-col:not(:nth-child(-n + 2)) {
+  > .el-col:not(:nth-child(1)) {
     margin-top: 8px;
+
+    .statistic-card {
+      border-top: 0.5px solid var(--lj-color-text-border) !important;
+    }
   }
 }
 </style>

JLHWEB/src/views/quote/mattressQuote/components/StatisticItem.vue

@@ -3,7 +3,21 @@
     <el-statistic :value="outputValue" v-bind="$attrs">
       <template #title>
         {{ isFilterLabel(data.label) }}
+        <!-- <div class="footer-item">
+          <i class="iconfont iconjiu"></i>
+          <span>{{ isFilterPrice(data.origin) }}</span>
+        </div> -->
       </template>
+      <!-- <template #suffix>
+        <span
+          v-if="getDiscrepancy !== 0"
+          class="statistic-suffix"
+          :class="getDiscrepancy > 0 ? 'green' : 'red'"
+          style="text-align: right"
+        >
+          {{ getDiscrepancy }}
+        </span>
+      </template> -->
     </el-statistic>
     <div class="statistic-footer" v-if="iforigin">
       <div class="footer-item">
@@ -12,6 +26,7 @@
           <span>{{ isFilterPrice(data.origin) }}</span>
         </div>
         <span v-if="getDiscrepancy !== 0" :class="getDiscrepancy > 0 ? 'green' : 'red'" style="text-align: right">
+          {{ getDiscrepancy > 0 ? "+" : "" }}
           {{ getDiscrepancy }}
         </span>
       </div>
@@ -86,19 +101,24 @@ watch(
 
   :deep(.el-statistic) {
     .el-statistic__head {
-      color: $color-primary-000 !important;
+      // color: $color-primary-000 !important;
       // color: var(--lj-color-text-secondary-text) !important;
+      color: var(--lj-color-text-primary-text) !important;
       margin-bottom: 0;
     }
     .el-statistic__number {
-      color: $color-gray-1 !important;
+      // color: $color-gray-1 !important;
+      color: $color-primary-600 !important;
       font-weight: 600;
     }
   }
 
-  .statistic-footer .footer-item {
+  .statistic-footer .footer-item,
+  .statistic-suffix {
     font-size: 14px;
-    color: $color-primary-100 !important;
+    // color: $color-primary-100 !important;
+    color: $color-primary-400 !important;
+    // color: var(--lj-color-text-primary-text) !important;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -111,11 +131,20 @@ watch(
     margin-left: 4px;
   }
 
-  .green {
-    color: var(--lj-color-polar-green-6);
+  .green,
+  .statistic-suffix.green {
+    color: var(--lj-color-polar-green-7) !important;
+  }
+  .red,
+  .statistic-suffix.red {
+    color: var(--lj-color-dust-red-7) !important;
   }
-  .red {
-    color: var(--lj-color-dust-red-7);
+
+  :deep(.el-statistic__head),
+  :deep(.el-statistic__content) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 </style>

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

@@ -21,7 +21,7 @@
           size="small"
           @change="showOriginFormulaMattress"
         />
-        <el-select v-model="scope.data.dannum_rate" placeholder="大小单" style="width: 80px">
+        <el-select v-model="scope.data.dannum_type" placeholder="大小单" style="width: 80px">
           <el-option label="散单" :value="1" />
           <el-option label="标准" :value="2" />
           <el-option label="大单" :value="3" />
@@ -32,7 +32,7 @@
     <template #headerSuffix>
       <Statistic
         :data="cmpFormulaReplace"
-        :dataorigin="cmpFormulaReplaceOri"
+        :differ="cmpDiffer"
         :iforigin="isShowOriginFormulaMattress"
         :precision="2"
         @click="gotoShowFormula"
@@ -900,7 +900,7 @@ const {
   cmpFormulas,
   cmpFormulaReplace,
   cmpFormulasOri,
-  cmpFormulaReplaceOri,
+  cmpDiffer,
   subSpecsRef,
   columnsMx_subSpecs,
   diancengAreaEnum,
@@ -1561,10 +1561,11 @@ const getData = (params: any) => {
 
 const gotoShowFormula = () => {
   AllFormulaRef.value.open({
+    dannum_type: LjDetailRef.value._mainData.dannum_type,
     formula: cmpFormulas.value,
     replace: cmpFormulaReplace.value,
     formula_ori: cmpFormulasOri.value,
-    replace_ori: cmpFormulaReplaceOri.value
+    differ: cmpDiffer.value
   });
 };
 
@@ -2049,7 +2050,7 @@ const orderDefaultAction = [
         fabricMx: fabricMxTabList.value,
         formulakindenum: formulaKindEnum.value
       };
-      QuoteListDrawerRef.value.show(_data, cmpFormulaReplaceOri.value);
+      QuoteListDrawerRef.value.show(_data);
     }
   }),
   buttonDefault({
@@ -2109,6 +2110,7 @@ onMounted(() => {
   // defaultColumnsValue.value.nottax_dept_cost = 0;
   // defaultColumnsValue.value.foreign_cost = 0;
   // defaultColumnsValue.value.fob = 0;
+  defaultColumnsValue.value.dannum_type = 2;
   defaultColumnsValue.value.dannum_rate = 1;
   defaultColumnsValue.value.if_moneyrate = "0";
   defaultColumnsValue.value.moneyrate = "1";

JLHWEB/src/views/quote/mattressQuote/hooks/index.tsx

@@ -123,7 +123,7 @@ interface defaultState {
   cmpFormulas: any;
   cmpFormulaReplace: any;
   cmpFormulasOri: any;
-  cmpFormulaReplaceOri: any;
+  cmpDiffer: any;
   specialProcessesMxRef: any;
   additionalCostsMxRef: any;
   specialProcessesMxData: any;
@@ -378,7 +378,7 @@ export const useHooks = (t?: any) => {
     cmpFormulas: [],
     cmpFormulaReplace: [],
     cmpFormulasOri: [],
-    cmpFormulaReplaceOri: [],
+    cmpDiffer: [],
     specialProcessesMxRef: null,
     additionalCostsMxRef: null,
     specialProcessesMxData: [],
@@ -2580,12 +2580,13 @@ export const useHooks = (t?: any) => {
       // fieldParams = res.replace;
       state.cmpFormulas = res.formulas;
       state.cmpFormulaReplace = res.replace;
+      // state.
       if (state.isShowOriginFormulaMattress) {
         state.cmpFormulasOri = res.formulas_origin;
-        state.cmpFormulaReplaceOri = res.replace_origin;
+        state.cmpDiffer = res.differ;
       } else {
         state.cmpFormulasOri = [];
-        state.cmpFormulaReplaceOri = [];
+        state.cmpDiffer = [];
       }
     } else {
       setTimeout(() => {