Merge branch '事业部BOM销量看板'

src/views/group/data-board/subsidiary-sales-volume/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="box-card">
+    <el-card>
+      <el-form :model="timeList" :inline="true" @submit.native.prevent>
+        <el-form-item label="日期:">
+          <el-date-picker
+            v-model="timeList"
+            type="daterange"
+            range-separator="To"
+            start-placeholder="Start date"
+            end-placeholder="End date"
+            value-format="YYYY-MM-DD"
+            @change="changeTime" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="changeTime()" size="small" v-preReClick>刷新</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-row :gutter="10" v-if="tableList && tableList.length > 0" v-loading="loading">
+      <el-col :span="8" v-for="(item, index) in tableList" :key="index">
+        <el-card style="margin-top: 10px">
+          <div class="secondRowBoardTop">
+            <div>{{ item.departmentName }}生产订单总数（单）</div>
+            <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
+              {{ item.orderSalesCount || 0 }}
+            </div>
+          </div>
+          <div class="secondRowBoardBottom">
+            <div>{{ item.departmentName }}生产BOM总数（个）</div>
+            <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
+              {{ item.bomSpecSalesCount || 0 }}
+            </div>
+          </div>
+          <el-table
+            :data="item.bomSpecSalesList"
+            :cell-style="{ padding: '0' }"
+            :row-style="{ height: '50px' }"
+            header-row-class-name="tableHeader"
+            height="30vh"
+            style="margin-top: 20px">
+            <el-table-column label="序号" align="center" type="index" width="60" />
+            <el-table-column label="BOM品号" prop="bomSpecCode" width="140" />
+            <el-table-column label="BOM品名" prop="bomSpecName" min-width="140" />
+            <el-table-column label="数量" align="center" width="80">
+              <template #default="{ row }">
+                <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
+                <span v-else>0</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import * as date from "/src/utils/date";
+
+const { proxy } = getCurrentInstance();
+const timeList = ref([]);
+const loading = ref(false);
+const getThirtyDays = () => {
+  let days = date.getDaysNoTime(30);
+  timeList.value = [days.startTime, days.endTime];
+};
+getThirtyDays();
+const changeTime = () => {
+  if (timeList.value && timeList.value.length == 2) {
+    getList();
+  } else {
+    ElMessage("请选择日期");
+  }
+};
+const tableList = ref([]);
+const getList = () => {
+  loading.value = true;
+  proxy.post("/salesBoard/getDepartmentBomSalesStatisticsList", { beginDate: timeList.value[0] + " 00:00:00", endDate: timeList.value[1] + " 23:59:59" }).then(
+    (res) => {
+      tableList.value = res;
+      loading.value = false;
+    },
+    (err) => {
+      console.log(err);
+      loading.value = false;
+    }
+  );
+};
+getList();
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  height: calc(100vh - 120px);
+  overflow-y: auto;
+}
+::v-deep(.tableHeader th) {
+  background-color: #eeeeee;
+  height: 56px;
+  padding: 0;
+}
+::v-deep(.el-card__body) {
+  padding: 20px !important;
+}
+.secondRowBoardTop {
+  padding: 20px;
+  background-color: #eff6ff;
+  border-radius: 10px;
+  div {
+    font-size: 16px !important;
+  }
+}
+.secondRowBoardBottom {
+  padding: 20px;
+  margin-top: 20px;
+  background-color: #fff8ef;
+  border-radius: 10px;
+  div {
+    font-size: 16px !important;
+  }
+}
+</style>