update: 统计中 收货 出货相关接口对接

src/PagesStatistics/components/FilterDialog.vue

@@ -4,7 +4,7 @@
       <view class="title">筛选</view>
       <u-list height="200">
         <u-list-item>
-          <u-cell :title="`${isShipment ? '客户' : '供应商'}`" @click="handleDialog('showSupplier', true)">
+          <u-cell :title="`${isShipment ? '客户' : '供应商'}`" @click="handleDialog('showSupplier', true)" :value="state.user.name">
             <template #right-icon> </template>
           </u-cell>
         </u-list-item>
@@ -12,20 +12,27 @@
           <u-cell
             :title="`${isShipment ? '出货产品' : '收货产品'}`"
             @click="handleDialog('showProduct', true)"
+            :value="state.project.name"
           >
             <template #right-icon> </template>
           </u-cell>
         </u-list-item>
       </u-list>
-      <view class="btn-layout">
+
-        <view class="btn">
+      <view class="btn-box1">
-          <up-button type="primary" text="确定" @click="handleOk()"></up-button>
+        <u-button
-        </view>
+          text="重置"
-      </view>
+          color="#E8E8E8"
-      <view class="btn-layout">
+          :customStyle="{ color: '#999' }"
-        <view class="btn">
+          shape="circle"
-          <u-button>重置</u-button>
+          @click="resetState"
-        </view>
+        ></u-button>
+        <u-button
+          type="primary"
+          text="确定"
+          shape="circle"
+          @click="handleOk()"
+        ></u-button>
       </view>
     </view>
   </u-popup>
@@ -35,6 +42,7 @@
     :show="showDialog.showSupplier"
     @handleDialog="(v:boolean) => {handleDialog('showSupplier', v)}"
     @changeUser="changeUser"
+    :isShipment="isShipment"
   ></SupplierDialog>
   <!-- 收货产品弹框 -->
   <ProductDialog
@@ -72,10 +80,11 @@ const state = <
 >reactive({
   project: {
     id: -1,
-    reProductsName: ''
+    name: ''
   },
   user: {
-    id: -1
+    id: -1,
+    name: ''
   }
 });
 
@@ -86,9 +95,18 @@ const changeUser = (obj:any) => {
   state.user = obj
 }
 const changeProduct = (obj:any) => {
-  state.project = obj
+  state.project = {...obj, name: obj.reProductsName}
+}
+const resetState = () => {
+  state.project = {
+    id: -1,
+    name: ''
+  }
+  state.user = {
+    id: -1,
+    name: ''
+  }
 }
-
 const handleOk = () => {
  emit("changeOther",{userId: state.user.id, productId: state.project.id})
  emit("handleDialog", false);
@@ -112,17 +130,13 @@ const handleOk = () => {
       font-size: 27rpx !important;
     }
   }
-  .btn-layout {
+  .btn-box1 {
-    align-items: center;
+    flex-direction: row;
-    justify-content: center;
     display: flex;
-    margin-top: 35rpx;
+    align-items: center;
-    .btn {
+    margin-top: 30rpx;
-      width: 80%;
+    ::v-deep button + button {
-      text-align: center;
+      margin-left: 50rpx;
-      ::v-deep button {
-        border-radius: 43rpx;
-      }
     }
   }
 }

src/PagesStatistics/components/ProductTypeDialog.vue

@@ -49,6 +49,7 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(["handleDialog", "changeProduct"]);
 const handleClose = () => {
+  debugger
   emit("handleDialog", false);
 };
 
@@ -84,8 +85,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .c-dialog-filter {
   width: 95vw;
-  padding: 25rpx;
+  margin: 25rpx;
-  z-index: 9999999999;
   .title {
     font-weight: 500;
     font-size: 32rpx;

src/PagesStatistics/components/SupplierDialog.vue

@@ -1,9 +1,13 @@
 <template>
   <u-popup :show="show" mode="left" :closeable="true" @close="handleClose">
     <view class="c-dialog-filter">
-      <view class="title">供应商筛选</view>
+      <view class="title">{{isShipment? '客户' : '供应商'}}筛选</view>
       <view class="search">
-        <u-search placeholder=" 请输入供应商名称 / 卡号搜索" v-model="keyword"></u-search>
+        <u-search
+          :placeholder="`请输入${isShipment? '客户' : '供应商'}名称 / 卡号搜索`"
+          v-model="keyword"
+          @search="handleSearch()"
+        ></u-search>
       </view>
       <view class="dialog-product-layout">
         <!-- 自定义索引列表 -->
@@ -19,12 +23,12 @@
               class="address-book"
               v-for="(item, index) in addressBook"
               :key="index"
-              :id="item.id"
+              :id="item.name"
             >
-              <view class="address-book-index">{{ item.id }}</view>
+              <view class="address-book-index">{{ item.name }}</view>
               <view
                 class="contact-container"
-                v-for="(cItem, index) in item.data"
+                v-for="(cItem, index) in item.list"
                 :key="index"
               >
                 <!-- <img
@@ -32,9 +36,12 @@
                   src="http://www.lixia.gov.cn/picture/0/s_97b76c734a6f40f8abba95615cbff1e1.jpg"
                   alt=""
                 /> -->
-                <view class="contact-detail-container">
+                <view
-                  <view class="contact-name">{{ cItem.zh_title }}</view>
+                  class="contact-detail-container"
-                  <view class="contact-address">{{ cItem.address }}</view>
+                  @click="handleClick(cItem)"
+                >
+                  <view class="contact-name">{{ cItem.name }}</view>
+                  <view class="contact-address">{{ cItem.cardCode }}</view>
                   <!-- <view class="contact-phone">{{ item.phone }}</view> -->
                 </view>
               </view>
@@ -58,15 +65,18 @@
   </u-popup>
 </template>
 <script setup lang="ts">
+import { CustomerApi, SupplierApi } from "@/services";
+
 const props = defineProps<{
   show: boolean;
+  isShipment: boolean;
 }>();
-const emit = defineEmits(["handleDialog"]);
+const emit = defineEmits(["handleDialog", "changeUser"]);
 const handleClose = () => {
   emit("handleDialog", false);
 };
 
-const keyword = ref()
+const keyword = ref("");
 
 const indexList = [
   "A",
@@ -95,113 +105,75 @@ const indexList = [
   "X",
   "Y",
   "Z",
+  "#",
 ];
 const toView = ref("");
-const addressBook = [
+const addressBook = ref();
-  {
+// [
-    id: "A",
+//   {
-    data: [
+//     id: "A",
-      {
+//     data: [
-        zh_title: "阿联酋迪拉姆",
+//       {
-        en_title: "aa",
+//         zh_title: "阿联酋迪拉姆",
-        address: "910289591",
+//         en_title: "aa",
-        phone: "111111",
+//         address: "910289591",
-      },
+//         phone: "111111",
-      {
+//       },
-        zh_title: "阿尔巴尼亚列克",
+//       {
-        en_title: "aaaaa",
+//         zh_title: "阿尔巴尼亚列克",
-        address: "ALL",
+//         en_title: "aaaaa",
-        phone: "222222",
+//         address: "ALL",
-      },
+//         phone: "222222",
-    ],
+//       },
-  },
+//     ],
-  {
+//   }
-    id: "B",
+// ];
-    data: [
-      {
-        zh_title: "孟加拉国塔卡",
-        en_title: "bbb",
-        address: "BDT",
-        phone: "111111",
-      },
-      {
-        zh_title: "保加利亚列瓦",
-        en_title: "bbb",
-        address: "BGN",
-        phone: "222222",
-      },
-    ],
-  },
-  {
-    id: "C",
-    data: [
-      {
-        zh_title: "加拿大元",
-        en_title: "ccc",
-        address: "CAD",
-        phone: "111111",
-      },
-      {
-        zh_title: "瑞士法郎",
-        en_title: "ccc",
-        address: "CHF",
-        phone: "222222",
-      },
-    ],
-  },
-  {
-    id: "D",
-    data: [
-      {
-        zh_title: "丹麦克朗",
-        en_title: "ddd",
-        address: "DKK",
-        phone: "111111",
-      },
-      {
-        zh_title: "多米尼加比索",
-        en_title: "ddd",
-        address: "DOP",
-        phone: "222222",
-      },
-      {
-        zh_title: "丹麦克朗",
-        en_title: "ddd",
-        address: "DKK",
-        phone: "111111",
-      },
-      {
-        zh_title: "多米尼加比索",
-        en_title: "ddd",
-        address: "DOP",
-        phone: "222222",
-      },
-      {
-        zh_title: "丹麦克朗",
-        en_title: "ddd",
-        address: "DKK",
-        phone: "111111",
-      },
-      {
-        zh_title: "多米尼加比索",
-        en_title: "ddd",
-        address: "DOP",
-        phone: "222222",
-      },
-    ],
-  },
-  {
-    id: "Z",
-    data: [
-      { zh_title: "z", en_title: "zz", address: "zzz", phone: "111111" },
-      { zh_title: "zzz", en_title: "ddd", address: "ddd", phone: "222222" },
-    ],
-  },
-];
 
 const toSelectIndex = (item: any) => {
   toView.value = item;
 };
+
+const handleClick = (item: any) => {
+  emit("changeUser", item);
+  emit("handleDialog", false);
+};
+
+const handleSearch = () => {
+  getList();
+};
+
+const getList = () => {
+  if (props.isShipment) {
+    CustomerApi.getCustomUserListLettera({ name: keyword.value }).then(
+      (res: any) => {
+        if (res.code === 200) {
+          addressBook.value = res.data.reduce((pre: any, curr: any) => {
+            if (curr.list.length > 0) {
+              pre.push(curr);
+            }
+            return pre;
+          }, []);
+        }
+      }
+    );
+  } else {
+    SupplierApi.getSupplierUserListLettera({ name: keyword.value }).then(
+      (res: any) => {
+        if (res.code === 200) {
+          addressBook.value = res.data.reduce((pre: any, curr: any) => {
+            if (curr.list.length > 0) {
+              pre.push(curr);
+            }
+            return pre;
+          }, []);
+        }
+      }
+    );
+  }
+};
+onMounted(() => {
+  getList();
+});
 </script>
 <style lang="scss" scoped>
 .c-dialog-filter {
@@ -255,7 +227,7 @@ const toSelectIndex = (item: any) => {
     width: 80%;
     font-size: 22rpx;
     .contact-address {
-      color: rgba(0,0,0,0.65);
+      color: rgba(0, 0, 0, 0.65);
     }
   }
 }

src/PagesStatistics/customerRanking.vue

@@ -2,14 +2,14 @@
   <view class="layout-box">
     <view class="filter">
       <u-input
-        v-model="params.startTime"
+        v-model="state.startTime"
         disabled
         disabledColor="#ffffff"
         placeholder="请选择开始时间"
       ></u-input>
       <text>-</text>
       <u-input
-        v-model="params.endTime"
+        v-model="state.endTime"
         disabled
         disabledColor="#ffffff"
         placeholder="请选择结束时间"
@@ -25,7 +25,17 @@
     </view>
   </view>
 
-  <!-- <c-echarts :option="option" :height="'90vh'" /> -->
+  <c-echarts
+    v-if="state.x.length > 0"
+    :option="getOptions(state.x, state.y)"
+    :height="'90vh'"
+  />
+  <u-empty
+    v-else
+    mode="data"
+    icon="http://cdn.uviewui.com/uview/empty/data.png"
+  >
+  </u-empty>
   <!-- 单据弹框 -->
   <ProductTypeDialog
     :isShipment="true"
@@ -48,58 +58,56 @@ import CEcharts from "@/components/Echarts/echarts.vue";
 import ProductTypeDialog from "./components/ProductTypeDialog.vue";
 import { formatDate, getCurrentMonthStartAndEnd } from "@/utils";
 import { ShipmentApi } from "@/services";
-const option = ref({
+import _ from "underscore";
-  tooltip: {
+const getOptions = (x: Array<any>, y: Array<any>) => {
-    trigger: "axis",
+  return {
-    axisPointer: {
+    tooltip: {
-      type: "cross",
+      trigger: "axis",
-    },
+      axisPointer: {
-  },
+        type: "cross",
-  grid: {
-    left: "10px",
-    right: "20px",
-    top: "10px",
-    bottom: "30px",
-    containLabel: true,
-  },
-  xAxis: {
-    type: "value",
-    boundaryGap: [0, 0.01],
-  },
-  yAxis: {
-    type: "category",
-    data: [1, 2, 3, 4, 5],
-    axisLabel: {
-      // inside: true,
-      // color: '#fff'
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: "#83bff6",
       },
     },
-  },
+    grid: {
-  series: [
+      left: "10px",
-    {
+      right: "20px",
-      data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, ,],
+      top: "10px",
-      type: "bar",
+      bottom: "30px",
-      areaStyle: {
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+    },
+    yAxis: {
+      type: "category",
+      data: y,
+      axisLabel: {
+        // inside: true,
+        // color: '#fff'
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
         show: true,
+        lineStyle: {
+          color: "#83bff6",
+        },
       },
-      barWidth: 24,
     },
-  ],
+    series: [
-  color: ["#00D2E3"],
+      {
-});
+        data: x,
-
+        type: "bar",
-const params = reactive({
+        areaStyle: {
-  startTime: "2024-01-01",
+          show: true,
-  endTime: "2024-01-01",
+        },
-});
+        barWidth: 24,
+      },
+    ],
+    color: ["#00D2E3"],
+  };
+};
 const showDialog = <
   {
     [key: string]: boolean;
@@ -114,12 +122,16 @@ const state = reactive<{
   scaleStatus: number;
   userId: number;
   productId: number;
+  x: Array<any>;
+  y: Array<any>;
 }>({
   startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
   endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
   scaleStatus: -1,
   userId: -1,
   productId: -1,
+  x: [],
+  y: [],
 });
 
 const changeTime = (obj: any) => {
@@ -150,6 +162,8 @@ const getList = () => {
   }
   ShipmentApi.getOrderInRanking(params).then((res) => {
     if (res.code === 200) {
+      state.y = _.pluck(res.data, "userName");
+      state.x = _.pluck(res.data, "totalAmount");
     }
   });
 };

src/PagesStatistics/receivePanel.vue

@@ -267,7 +267,7 @@ onMounted(() => {
     }
   }
   .box {
-    padding: 19.23rpx;
+    padding: 28rpx 20rpx;
     // display: flex;
     // justify-content: space-between;
     align-items: center;
@@ -290,7 +290,7 @@ onMounted(() => {
     border-left: 1px solid #e9e9e9;
     .num {
       font-weight: bold;
-      font-size: 27rpx;
+      font-size: 28rpx;
     }
   }
   ::v-deep .uni-table {

src/PagesStatistics/shipmentPanel.vue

@@ -268,7 +268,7 @@ onMounted(() => {
     }
   }
   .box {
-    padding: 19.23rpx;
+    padding: 28rpx 20rpx;
     // display: flex;
     // justify-content: space-between;
     align-items: center;

src/PagesStatistics/supplierRanking.vue

@@ -25,9 +25,11 @@
     </view>
   </view>
 
-  <!-- <view>
+  <view v-if="state.x.length > 0">
-    <c-echarts :option="option" :height="'90vh'" />
+    <c-echarts :option="getOptions(state.x, state.y)" :height="'90vh'" />
-  </view> -->
+  </view>
+  <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+  </u-empty>
 
   <!-- 时间弹框 -->
   <TimeDialog
@@ -48,57 +50,60 @@
 </template>
 <script setup lang="ts">
 import TimeDialog from "./components/TimeDialog.vue";
-import CEcharts from "@/components/Echarts/echarts.vue";
+import CEcharts from "../components/Echarts/echarts.vue";
 import ProductTypeDialog from "./components/ProductTypeDialog.vue";
 import { ReceiveApi } from "@/services";
 import { formatDate, getCurrentMonthStartAndEnd } from "@/utils";
-const option = ref({
+import _ from "underscore";
-  tooltip: {
+const getOptions = (x: Array<any>, y: Array<any>) => {
-    trigger: "axis",
+  return {
-    axisPointer: {
+    tooltip: {
-      type: "cross",
+      trigger: "axis",
-    },
+      axisPointer: {
-  },
+        type: "cross",
-  grid: {
-    left: "10px",
-    right: "20px",
-    top: "10px",
-    bottom: "30px",
-    containLabel: true,
-  },
-  xAxis: {
-    type: "value",
-    boundaryGap: [0, 0.01],
-  },
-  yAxis: {
-    type: "category",
-    data: [1, 2, 3, 4, 5],
-    axisLabel: {
-      // inside: true,
-      // color: '#fff'
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: "#83bff6",
       },
     },
-  },
+    grid: {
-  series: [
+      left: "10px",
-    {
+      right: "20px",
-      data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, ,],
+      top: "10px",
-      type: "bar",
+      bottom: "30px",
-      areaStyle: {
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+    },
+    yAxis: {
+      type: "category",
+      data: y,
+      axisLabel: {
+        // inside: true,
+        // color: '#fff'
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
         show: true,
+        lineStyle: {
+          color: "#83bff6",
+        },
       },
-      barWidth: 24,
     },
-  ],
+    series: [
-  color: ["#00D2E3"],
+      {
-});
+        data: x,
+        type: "bar",
+        areaStyle: {
+          show: true,
+        },
+        barWidth: 24,
+      },
+    ],
+    color: ["#00D2E3"],
+  };
+};
 const changeProduct = (obj: any) => {
   state.productId = obj.productId;
   getList();
@@ -120,12 +125,16 @@ const state = reactive<{
   scaleStatus: number;
   userId: number;
   productId: number;
+  x: Array<any>;
+  y: Array<any>;
 }>({
   startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
   endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
   scaleStatus: -1,
   userId: -1,
   productId: -1,
+  x: [],
+  y: [],
 });
 
 const changeTime = (obj: any) => {
@@ -148,8 +157,10 @@ const getList = () => {
   if (state.productId > -1) {
     params.productId = state.productId;
   }
-  ReceiveApi.OrderInRanking(params).then((res) => {
+  ReceiveApi.OrderInRanking(params).then((res: any) => {
     if (res.code === 200) {
+      state.y = _.pluck(res.data, "userName");
+      state.x = _.pluck(res.data, "totalAmount");
     }
   });
 };

src/components/Echarts/echarts.vue

@@ -1,5 +1,10 @@
 <template>
-  <LEchart class="echart" ref="chart" @finished="init" :customStyle="{height: height, 'z-index': 1}"></LEchart>
+  <LEchart
+    class="echart"
+    ref="chart"
+    @finished="init"
+    :customStyle="{ height: height, 'z-index': 1 }"
+  ></LEchart>
 </template>
 <script setup lang="ts">
 import LEchart from "../../uni_modules/lime-echart/components/l-echart/l-echart.vue";
@@ -15,19 +20,28 @@ const echarts = require("../../uni_modules/lime-echart/static/echarts.min");
 import * as echarts from "echarts";
 // #endif
 // #endif
-let chart = ref(); // 获取dom
+let chart = ref<any>(); // 获取dom
 
 const props = defineProps<{
-  option: object,
+  option: object;
-  height: string
+  height: string;
-}>()
+}>();
 
 watchEffect(() => {
-  chart.value.init(echarts, (chart: any) => {
+  if (chart.value) {
-    chart.setOption(props.option);
+    chart.value.init(echarts, (chart: any) => {
-  });
+      chart.setOption(props.option);
+    });
+  }
 });
 
+watch(
+  () => props.option,
+  (newValue, oldValue) => {
+    chart.value.setOption(props.option);
+  }
+);
+
 // 渲染完成
 const init = () => {
   console.log("渲染完成");

src/services/customer.ts

@@ -35,4 +35,15 @@ export const getCustomUserList = (data: any) => {
   })
 }
 
+// 客户字母分组
+export const getCustomUserListLettera = (data: any) => {
+  return http({
+    method: 'GET',
+    url: '/api/custom/user/getCustomUserListLettera',
+    data,
+  })
+}
+
+
+
 

src/services/supplier.ts

@@ -70,3 +70,11 @@ export const getSupplierUserList = (data: any) => {
   })
 }
 
+export const getSupplierUserListLettera = (data: any) => {
+  return http({
+    method: 'GET',
+    url: '/api/supplier/user/getSupplierUserListLettera',
+    data
+  })
+}
+