feat: 新增带默认BOM的产品和原材料接口并优化界面

refactor(HomeModules): 重构统计面板组件并添加骨架屏
feat(coil): 添加物料类型和更新时间查询条件
style(ProductInfo/RawMaterialInfo): 阻止事件冒泡
chore: 添加钢卷图标资源

klp-ui/src/api/wms/product.js

@@ -26,6 +26,15 @@ export function addProduct(data) {
   })
 }
 
+// 新增产品带默认BOM
+export function addProductWithBom(data) {
+  return request({
+    url: '/wms/product/addWithBom',
+    method: 'post',
+    data: data
+  })
+}
+
 // 修改产品
 export function updateProduct(data) {
   return request({

klp-ui/src/api/wms/rawMaterial.js

@@ -26,6 +26,15 @@ export function addRawMaterial(data) {
   })
 }
 
+// 新增原材料带默认BOM
+export function addRawMaterialWithBom(data) {
+  return request({
+    url: '/wms/rawMaterial/addWithBom',
+    method: 'post',
+    data: data
+  })
+}
+
 // 修改原材料
 export function updateRawMaterial(data) {
   return request({

klp-ui/src/components/HomeModules/StatisticGroup.vue

@@ -0,0 +1,291 @@
+<template>
+  <el-row :gutter="10" class="panel-group">
+    <el-col 
+      v-if="!loading"
+      :xs="12" 
+      :sm="12" 
+      :md="8" 
+      :lg="4"
+      :xl="4" 
+      class="card-panel-col" 
+      v-for="(item, index) in statsData" 
+      :key="index"
+    >
+      <div class="card-panel" @click="handleSetLineChartData(item.type)">
+        <div class="card-panel-icon-wrapper" :class="item.iconClass">
+          <svg-icon :icon-class="item.icon" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{ item.title }}
+          </div>
+          <count-to 
+            :start-val="0" 
+            :end-val="item.value" 
+            :duration="item.duration" 
+            class="card-panel-num" 
+          />
+        </div>
+      </div>
+    </el-col>
+
+    <div v-else>
+      <!-- 骨架屏 -->
+      <el-skeleton
+        :rows="1"
+        :loading="loading"
+      />
+    </div>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import { listProduct } from '@/api/wms/product'
+import { listRawMaterial } from '@/api/wms/rawMaterial'
+import { listMaterialCoil } from '@/api/wms/coil'
+import { listEquipmentManagement } from '@/api/mes/eqp/equipmentManagement'
+import { listOrder } from '@/api/wms/order'
+import { listCustomer } from '@/api/wms/customer'
+import { listSupplier } from '@/api/wms/supplier'
+
+export default {
+  components: {
+    CountTo
+  },
+  data() {
+    return {
+      statsData: [
+        {
+          type: 'materialCount',
+          title: '物料类型',
+          icon: 'international',
+          iconClass: 'icon-material',
+          value: 0,
+          duration: 2600
+        },
+        {
+          type: 'steelCoilCount',
+          title: '钢卷数量',
+          icon: 'coil',
+          iconClass: 'icon-steel',
+          value: 0,
+          duration: 3000
+        },
+        {
+          type: 'orderCount',
+          title: '订单数量',
+          icon: 'log',
+          iconClass: 'icon-order',
+          value: 0,
+          duration: 3200
+        },
+        {
+          type: 'customerSupplierCount',
+          title: '客户和供应商',
+          icon: 'people',
+          iconClass: 'icon-customer',
+          value: 0,
+          duration: 3600
+        },
+        {
+          type: 'equipmentCount',
+          title: '设备数量',
+          icon: 'redis',
+          iconClass: 'icon-equipment',
+          value: 0,
+          duration: 2800
+        }
+      ],
+      loading: false,
+    }
+  },
+  mounted() {
+    this.loadCount()
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    },
+    loadCount() {
+      this.loading = true
+      Promise.all([
+        listProduct({ pageSise: 1, pageNum: 1 }),
+        listRawMaterial({ pageSise: 1, pageNum: 1 }),
+        listMaterialCoil({ pageSise: 1, pageNum: 1 }),
+        listEquipmentManagement({ pageSise: 1, pageNum: 1 }),
+        listOrder({ pageSise: 1, pageNum: 1 }),
+        listCustomer({ pageSise: 1, pageNum: 1 }),
+        listSupplier({ pageSise: 1, pageNum: 1 })
+      ]).then(([
+        productRes,
+        rawMaterialRes,
+        materialCoilRes,
+        equipmentRes,
+        orderRes,
+        customerRes,
+        supplierRes
+      ]) => {
+        this.loading = false
+        this.statsData.forEach(item => {
+          if (item.type === 'materialCount') {
+            item.value = productRes.total + rawMaterialRes.total
+          } else if (item.type === 'steelCoilCount') {
+            item.value = materialCoilRes.total
+          } else if (item.type === 'orderCount') {
+            item.value = orderRes.total
+          } else if (item.type === 'customerSupplierCount') {
+            item.value = customerRes.total + supplierRes.total
+          } else if (item.type === 'equipmentCount') {
+            item.value = equipmentRes.total
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-material {
+        background: #40c9c6;
+      }
+
+      .icon-steel {
+        background: #36a3f7;
+      }
+
+      .icon-order {
+        background: #f4516c;
+      }
+
+      .icon-customer {
+        background: #34bfa3;
+      }
+      
+      .icon-equipment {
+        background: #722ed1;
+      }
+    }
+
+    .icon-material {
+      color: #40c9c6;
+    }
+
+    .icon-steel {
+      color: #36a3f7;
+    }
+
+    .icon-order {
+      color: #f4516c;
+    }
+
+    .icon-customer {
+      color: #34bfa3;
+    }
+    
+    .icon-equipment {
+      color: #722ed1;
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+        white-space: nowrap;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .card-panel-description .card-panel-text {
+    font-size: 14px;
+  }
+  
+  .card-panel-num {
+    font-size: 18px !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .card-panel-description {
+    margin: 16px;
+  }
+  
+  .card-panel-icon-wrapper {
+    padding: 12px;
+  }
+  
+  .card-panel-icon {
+    font-size: 40px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
+    

klp-ui/src/components/KLPService/Renderer/ProductInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="product-name" @click="clickHandle">
+    <span class="product-name" @click.stop="clickHandle">
       <slot name="default" :product="product">
         {{ product && product.productName ? product.productName : '--' }}
       </slot>

klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 作用域插槽 -->
-    <span class="material-name" @click="showDetail = true">
+    <span class="material-name" @click.stop="showDetail = true">
       <slot name="default" :material="material">
         {{ material.rawMaterialName ? material.rawMaterialName : '-' }}
       </slot>

klp-ui/src/views/dashboard/PanelGroup.vue

@@ -7,7 +7,7 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            访客
+            物料统计
           </div>
           <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
         </div>

klp-ui/src/views/index.vue

@@ -1,39 +1,100 @@
 <template>
-  <div class="dashboard-root">
+  <div class="dashboard-editor-container">
-    <!-- 全部应用 -->
+
-    <el-row>
+    <statistic-group />
-      <AllApplications />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
     </el-row>
 
-    <el-row :gutter="20" style="margin-top: 20px;">
+    <el-row :gutter="32">
-      <el-col :span="12">
+      <el-col :xs="24" :sm="24" :lg="8">
-        <el-card style="height: 500px;">
+        <div class="chart-wrapper">
-          <FlowTable />
+          <raddar-chart />
-        </el-card>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
       </el-col>
     </el-row>
+
+    
   </div>
 </template>
 
 <script>
-import AllApplications from '@/views/components/AllApplications.vue';
+// import PanelGroup from './dashboard/PanelGroup'
-import OrderDashboard from '@/views/components/OrderDashboard.vue';
+import LineChart from './dashboard/LineChart'
-import FlowTable from '@/views/components/FlowTable.vue';
+import RaddarChart from './dashboard/RaddarChart'
-import Greeting from '@/views/components/Greeting.vue';
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
+import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
 
 export default {
+  name: 'Index',
   components: {
-    AllApplications,
+    // PanelGroup,
-    OrderDashboard,
+    StatisticGroup,
-    FlowTable,
+    LineChart,
-    Greeting
+    RaddarChart,
+    PieChart,
+    BarChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
   }
-};
+}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.dashboard-root {
+.dashboard-editor-container {
-  min-height: 100vh;
   padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
 }
-</style>
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>

klp-ui/src/views/wms/coil/box.vue

@@ -100,12 +100,12 @@
               <el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
               <el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
               <el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
-              <el-table-column label="库区" align="center" prop="itemType">
+              <el-table-column label="物料类型" align="center" prop="itemType">
                 <template slot-scope="scope">
                   {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
                 </template>
               </el-table-column>
-              <el-table-column label="物料信息" align="center" min-width="250">
+              <el-table-column label="产品类型" align="center" min-width="250">
                 <template slot-scope="scope">
                   <ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
                     <template #default="{ product }">
@@ -119,6 +119,7 @@
                   </RawMaterialInfo>
                 </template>
               </el-table-column>
+              <el-table-column label="更新时间" align="center" prop="updateTime" />
               <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
               <el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
             </el-table>

klp-ui/src/views/wms/coil/history.vue

@@ -13,7 +13,8 @@ export default {
     return {
       qrcode: true,
       querys: {
-        dataType: 0
+        dataType: 0,
+        itemType: 'raw_material'
       },
       labelType: '2'
     }

klp-ui/src/views/wms/coil/index.vue

@@ -13,7 +13,8 @@ export default {
     return {
       qrcode: true,
       querys: {
-        dataType: 1
+        dataType: 1,
+        itemType: 'raw_material'
       },
       labelType: '2'
     }

klp-ui/src/views/wms/coil/panels/base.vue

@@ -19,8 +19,9 @@
         <el-input v-model="queryParams.supplierCoilNo" placeholder="请输入厂家原料卷号" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="班组" prop="team">
+      <el-form-item label="更新时间" prop="updateTime">
-        <el-input v-model="queryParams.team" placeholder="请输入班组" clearable @keyup.enter.native="handleQuery" />
+        <el-date-picker v-model="queryParams.updateTime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
+          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -51,13 +52,13 @@
       <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
       <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo" />
       <el-table-column label="厂家原料卷号" align="center" prop="supplierCoilNo" />
-      <el-table-column label="库区" align="center" prop="itemType">
+      <el-table-column label="仓库" align="center" prop="warehouseName" />
+      <el-table-column label="物料类型" align="center" prop="itemType">
         <template slot-scope="scope">
           {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
         </template>
       </el-table-column>
-      <el-table-column label="仓库" align="center" prop="warehouseName" />
+      <el-table-column label="产品类型" align="center" prop="itemName">
-      <el-table-column label="物品" align="center" prop="itemName">
         <template slot-scope="scope">
           <ProductInfo v-if="scope.row.itemType == 'product'" :productId="scope.row.itemId">
             <template slot-scope="{ product }">
@@ -76,6 +77,7 @@
           {{ scope.row.dataType == 0 ? '历史数据' : '当前数据' }}
         </template>
       </el-table-column>
+      <el-table-column label="更新时间" align="center" prop="updateTime" />
       <el-table-column label="二维码" v-if="qrcode">
         <template slot-scope="scope">
           <QRCode v-if="scope.row.dataType == 1" :content="scope.row.qrcodeRecordId" :size="50" />
@@ -122,17 +124,18 @@
         <el-form-item label="班组" prop="team">
           <el-input v-model="form.team" placeholder="请输入班组" />
         </el-form-item>
-        <el-form-item label="库区" prop="itemType">
+        <el-form-item label="物料类型" prop="itemType">
-          <el-select v-model="form.itemType" placeholder="请选择库区">
+          <el-select v-model="form.itemType" placeholder="请选择库区" @change="form.itemId = undefined">
             <el-option label="成品" value="product" />
             <el-option label="原料" value="raw_material" />
           </el-select>
         </el-form-item>
-        <el-form-item label="物品ID" prop="itemId">
+        <el-form-item label="产品类型" prop="itemId">
           <product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品ID"
             style="width: 100%;" clearable />
           <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" placeholder="请选择原料ID"
             style="width: 100%;" clearable />
+          <div v-else>请先选择产品类型</div>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -249,6 +252,7 @@ export default {
         parentCoilNos: undefined,
         itemId: undefined,
         status: undefined,
+        updateTime: undefined,
       },
       // 表单参数
       form: {},
@@ -282,7 +286,12 @@ export default {
     /** 查询钢卷物料列表 */
     getList() {
       this.loading = true;
-      listMaterialCoil(this.queryParams).then(response => {
+      const { updateTime ,...query } = {
+        ...this.queryParams,
+        startTime: this.queryParams.updateTime?.[0],
+        endTime: this.queryParams.updateTime?.[1],
+      }
+      listMaterialCoil(query).then(response => {
         this.materialCoilList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -305,9 +314,16 @@ export default {
     /** 预览标签 */
     handlePreviewLabel(row) {
       this.labelRender.visible = true;
+      const item = findItemWithBom(row.itemType, row.itemId)
+      // 寻找boms中bom键名为'材质'的
+      const material = item?.boms?.find(bom => bom.attrKey === '材质')
+      // 查找boms中bom键名为'规格'的
+      const specification = item?.boms?.find(bom => bom.attrKey === '规格')
       this.labelRender.data = {
         ...row,
-        itemName: findItemWithBom(row.itemType, row.itemId)?.itemName || '',
+        itemName: item?.itemName || '',
+        material: material?.attrValue || '',
+        specification: specification?.attrValue || '',
       };
     },
     /** 下载二维码 */

klp-ui/src/views/wms/coil/product.vue

@@ -13,7 +13,8 @@ export default {
     return {
       qrcode: false,
       querys: {
-        itemType: 'product'
+        itemType: 'product',
+        // dataType: 0
       },
       labelType: '3'
     }

klp-ui/src/views/wms/product/index.vue

@@ -144,12 +144,12 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
           >删除</el-button>
-          <el-button
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-document"
             @click="goLedger(scope.row)"
-          >台账</el-button>
+          >台账</el-button> -->
           <el-button
             size="mini"
             type="text"
@@ -172,28 +172,28 @@
     <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <!-- <el-divider>基础信息</el-divider> -->
-        <el-row :gutter="20">
+        <!-- <el-row :gutter="20">
-          <el-col :span="12">
+          <el-col :span="12"> -->
             <el-form-item label="产品编号" prop="productCode">
               <el-input v-model="form.productCode" placeholder="请输入产品编号" />
             </el-form-item>
-          </el-col>
+          <!-- </el-col>
-          <el-col :span="12">
+          <el-col :span="12"> -->
             <el-form-item label="产品名称" prop="productName">
               <el-input v-model="form.productName" placeholder="请输入产品名称" />
             </el-form-item>
-          </el-col>
+          <!-- </el-col>
-          <el-col :span="12">
+          <el-col :span="12"> -->
             <el-form-item label="负责人" prop="owner">
               <el-input v-model="form.owner" :multiple="false" placeholder="请填写负责人" />
             </el-form-item>
-          </el-col>
+          <!-- </el-col>
-          <el-col :span="12">
+          <el-col :span="12"> -->
             <el-form-item label="计量单位" prop="unit">
               <el-input v-model="form.unit" placeholder="请输入计量单位" />
             </el-form-item>
-          </el-col>
+          <!-- </el-col>
-        </el-row>
+        </el-row> -->
 
         <!-- <el-divider>分类信息</el-divider>
         <el-row :gutter="20">
@@ -263,7 +263,7 @@
 </template>
 
 <script>
-import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/wms/product";
+import { listProduct, getProduct, delProduct, addProduct, updateProduct, addProductWithBom } from "@/api/wms/product";
 import CategorySelect from '@/components/KLPService/CategorySelect';
 import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
 import UserSelect from '@/components/KLPService/UserSelect';
@@ -448,7 +448,7 @@ export default {
               this.buttonLoading = false;
             });
           } else {
-            addProduct(this.form).then(response => {
+            addProductWithBom(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();

klp-ui/src/views/wms/rawMaterial/index.vue

@@ -153,12 +153,12 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
           >删除</el-button>
-          <el-button
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-document"
             @click="goLedger(scope.row)"
-          >台账</el-button>
+          >台账</el-button> -->
         </template>
       </el-table-column>
     </KLPTable>
@@ -297,7 +297,7 @@
 </template>
 
 <script>
-import { listRawMaterial, getRawMaterial, delRawMaterial, addRawMaterial, updateRawMaterial } from "@/api/wms/rawMaterial";
+import { listRawMaterial, getRawMaterial, delRawMaterial, addRawMaterial, updateRawMaterial, addRawMaterialWithBom } from "@/api/wms/rawMaterial";
 import CategorySelect from "@/components/KLPService/CategorySelect/index.vue";
 import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
 import BomPanel from '@/views/wms/bom/components/BomPanel.vue';
@@ -504,7 +504,7 @@ export default {
               this.buttonLoading = false;
             });
           } else {
-            addRawMaterial(this.form).then(response => {
+            addRawMaterialWithBom(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();