fetaure<oms工单统计>: 工单报表统计页面开发

src/api/report/index.js

@@ -10,4 +10,16 @@ export default {
   getPunchRecordsNum(query) {
     return micro_request.postRequest(basePath, 'Home', 'GetPunchRecordsNum', query)
   },
+  // 销售工单统计报表
+  getWorkOrderStatistic(query) {
+    return micro_request.postRequest(basePath, 'WorkOrderReport', 'GetSaleWorkOrderReportList', query)
+  },
+  // 产品线工单统计报表
+  getProductOrderStatistic(query) {
+    return micro_request.postRequest(basePath, 'WorkOrderReport', 'GetProductWorkOrderReportList', query)
+  },
+  // 支持人员工单统计报表
+  getSupportOrderStatisitc(query) {
+    return micro_request.postRequest(basePath, 'WorkOrderReport', 'GetSupportWorkOrderReportList', query)
+  },
 }

src/views/report/workordereport/productWorkIndex.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="detail">
+    <h2 style="text-align: center">产品线工单统计报表</h2>
+    <div style="float: right; margin-bottom: 10px">
+      <p>
+        月份：
+        <el-date-picker v-model="month" type="month" value-format="yyyy-MM-dd" @change="initData" />
+      </p>
+    </div>
+
+    <div ref="tableBody" class="tableBody">
+      <div v-for="(item, index) in tableData" :key="index">
+        <el-table
+          ref="table"
+          border
+          :data="item.list"
+          :show-header="index === 0"
+          show-summary
+          :span-method="ObjectSpanMethod"
+          :summary-method="getSummaries"
+          width="100%">
+          <el-table-column align="center" label="产品线" prop="productLineName" width="400px" />
+          <el-table-column align="center" label="工单类型" prop="orderTypeName" width="1200px" />
+          <el-table-column align="center" label="数量" prop="orderTypeNum" width="600px" />
+        </el-table>
+      </div>
+      <div ref="sum_heji" class="sum_footer">
+        <div class="sum_footer_unit left"></div>
+        <div class="sum_footer_unit">总计</div>
+        <div class="sum_footer_unit">{{ getTotal('orderTypeNum') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import reportApi from '@/api/report/index'
+  import { parseTime } from '@/utils'
+  export default {
+    name: 'WorkOrderReport',
+    components: {},
+    data() {
+      return {
+        month: parseTime(new Date()),
+        loading: false,
+        header: undefined,
+        tableData: [],
+        initDataList: [],
+      }
+    },
+    mounted() {
+      this.initData()
+    },
+    methods: {
+      async initData() {
+        const { data } = await reportApi.getProductOrderStatistic({ month: this.month })
+        console.log('返回的data是', data)
+        this.initDataList = data
+        this.tableData = []
+
+        console.log('this.initDataList is', this.initDataList)
+        // 按照销售名字分组
+
+        if (this.initDataList != null && this.initDataList.length > 0) {
+          this.initDataList.forEach((item) => {
+            if (this.tableData.length == 0) {
+              this.tableData.push({ productLineName: item.productLineName, list: [item] })
+            } else {
+              let res = this.tableData.some((item2) => {
+                //判断名称存在,就添加到当前项目中
+                if (item.productLineName == item2.productLineName) {
+                  item2.list.push(item)
+                  return true
+                }
+              })
+              if (!res) {
+                //如果没找相同姓名就添加一个新对象
+
+                this.tableData.push({ productLineName: item.productLineName, list: [item] })
+              }
+            }
+          })
+        }
+
+        console.log('tableData is', this.tableData)
+        //}
+      },
+      // 表格合计
+      getSummaries(param) {
+        console.log('表格合计的param是:', param)
+
+        const { columns, data } = param
+        let sums = []
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+            return
+          } else if (index > 1) {
+            const values = data.map((item) => Number(item[column.property]))
+            if (!values.every((value) => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              //sums[index] = sums[index]
+              sums[index] += ''
+            } else {
+              sums[index] = ''
+            }
+          }
+        })
+        return sums
+      },
+      // 计算表格合计行
+      getTotal(name) {
+        var sum = 0
+        console.log('his.initDataList is', this.initDataList)
+        if (this.initDataList != null && this.initDataList.length > 0) {
+          this.initDataList.forEach((n) => {
+            sum += n[name]
+          })
+          // sum = sum
+        }
+
+        return sum
+      },
+      // 合并相同单元格
+      // 合并单元格相同内容
+      ObjectSpanMethod({ rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.flitterData(this.initDataList).one[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col,
+          }
+        }
+      },
+      /**合并表格的第一列，处理表格数据 */
+      flitterData(arr) {
+        let spanOneArr = []
+        let concatOne = 0
+        arr.forEach((item, index) => {
+          if (index === 0) {
+            spanOneArr.push(1)
+          } else {
+            //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
+            if (item.quarterly === arr[index - 1].quarterly) {
+              //第一列需合并相同内容的判断条件
+              spanOneArr[concatOne] += 1
+              spanOneArr.push(0)
+            } else {
+              spanOneArr.push(1)
+              concatOne = index
+            }
+          }
+        })
+        return {
+          one: spanOneArr,
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .detail {
+    padding: 30px;
+  }
+  .sum_footer {
+    display: flex;
+    display: -webkit-flex;
+    height: 40px;
+    overflow: visible !important;
+    float: right;
+    margin-top: 2rem;
+  }
+  .sum_footer_unit {
+    flex-shrink: 0;
+    font-size: 13px;
+    font-weight: 800;
+    color: #606266;
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-word;
+    border-bottom: 1px solid #ebeef5;
+    border-right: 1px solid #ebeef5;
+    border-top: 1px solid #ebeef5;
+    text-align: center;
+  }
+
+  .left {
+    border-left: 1px solid #ebeef5;
+  }
+</style>

src/views/report/workordereport/saleWorkIndex.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="detail">
+    <h2 style="text-align: center">销售工单统计报表</h2>
+    <div style="float: right; margin-bottom: 10px">
+      <p>
+        月份：
+        <el-date-picker v-model="month" type="month" value-format="yyyy-MM-dd" @change="initData" />
+      </p>
+    </div>
+
+    <div ref="tableBody" class="tableBody">
+      <div v-for="(item, index) in tableData" :key="index">
+        <el-table
+          ref="table"
+          border
+          :data="item.list"
+          :show-header="index === 0"
+          show-summary
+          :span-method="ObjectSpanMethod"
+          :summary-method="getSummaries"
+          width="100%">
+          <el-table-column align="center" label="销售" prop="saleName" width="400px" />
+          <el-table-column align="center" label="工单类型" prop="orderTypeName" width="1200px" />
+          <el-table-column align="center" label="数量" prop="orderTypeNum" width="600px" />
+        </el-table>
+      </div>
+      <div ref="sum_heji" class="sum_footer">
+        <div class="sum_footer_unit left"></div>
+        <div class="sum_footer_unit">总计</div>
+        <div class="sum_footer_unit">{{ getTotal('orderTypeNum') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import reportApi from '@/api/report/index'
+  import { parseTime } from '@/utils'
+  export default {
+    name: 'WorkOrderReport',
+    components: {},
+    data() {
+      return {
+        month: parseTime(new Date()),
+        loading: false,
+        header: undefined,
+        tableData: [],
+        initDataList: [],
+      }
+    },
+    mounted() {
+      this.initData()
+    },
+    methods: {
+      async initData() {
+        const { data } = await reportApi.getWorkOrderStatistic({ month: this.month })
+        console.log('返回的data是', data)
+        this.initDataList = data
+        this.tableData = []
+
+        console.log('this.initDataList is', this.initDataList)
+        // 按照销售名字分组
+
+        if (this.initDataList != null && this.initDataList.length > 0) {
+          this.initDataList.forEach((item) => {
+            if (this.tableData.length == 0) {
+              this.tableData.push({ saleName: item.saleName, list: [item] })
+            } else {
+              let res = this.tableData.some((item2) => {
+                //判断名称存在,就添加到当前项目中
+                if (item.saleName == item2.saleName) {
+                  item2.list.push(item)
+                  return true
+                }
+              })
+              if (!res) {
+                //如果没找相同姓名就添加一个新对象
+
+                this.tableData.push({ saleName: item.saleName, list: [item] })
+              }
+            }
+          })
+        }
+
+        console.log('tableData is', this.tableData)
+        //}
+      },
+      // 表格合计
+      getSummaries(param) {
+        console.log('表格合计的param是:', param)
+
+        const { columns, data } = param
+        let sums = []
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+            return
+          } else if (index > 1) {
+            const values = data.map((item) => Number(item[column.property]))
+            if (!values.every((value) => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              // sums[index] = sums[index]
+              sums[index] += ''
+            } else {
+              sums[index] = ''
+            }
+          }
+        })
+        return sums
+      },
+      // 计算表格合计行
+      getTotal(name) {
+        var sum = 0
+        console.log('his.initDataList is', this.initDataList)
+        if (this.initDataList != null && this.initDataList.length > 0) {
+          this.initDataList.forEach((n) => {
+            sum += n[name]
+          })
+          // sum = sum
+        }
+
+        return sum
+      },
+      // 合并相同单元格
+      // 合并单元格相同内容
+      ObjectSpanMethod({ rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.flitterData(this.initDataList).one[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col,
+          }
+        }
+      },
+      /**合并表格的第一列，处理表格数据 */
+      flitterData(arr) {
+        let spanOneArr = []
+        let concatOne = 0
+        arr.forEach((item, index) => {
+          if (index === 0) {
+            spanOneArr.push(1)
+          } else {
+            //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
+            if (item.quarterly === arr[index - 1].quarterly) {
+              //第一列需合并相同内容的判断条件
+              spanOneArr[concatOne] += 1
+              spanOneArr.push(0)
+            } else {
+              spanOneArr.push(1)
+              concatOne = index
+            }
+          }
+        })
+        return {
+          one: spanOneArr,
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .detail {
+    padding: 30px;
+  }
+  .sum_footer {
+    display: flex;
+    display: -webkit-flex;
+    height: 40px;
+    overflow: visible !important;
+    float: right;
+    margin-top: 2rem;
+  }
+  .sum_footer_unit {
+    flex-shrink: 0;
+    font-size: 13px;
+    font-weight: 800;
+    color: #606266;
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-word;
+    border-bottom: 1px solid #ebeef5;
+    border-right: 1px solid #ebeef5;
+    border-top: 1px solid #ebeef5;
+    text-align: center;
+  }
+
+  .left {
+    border-left: 1px solid #ebeef5;
+  }
+</style>

src/views/report/workordereport/supportWorkIndex.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="detail">
+    <h2 style="text-align: center">支持人员工单统计报表</h2>
+    <div style="float: right; margin-bottom: 10px">
+      <p>
+        月份：
+        <el-date-picker v-model="month" type="month" value-format="yyyy-MM-dd" @change="initData" />
+      </p>
+    </div>
+
+    <div ref="tableBody" class="tableBody">
+      <div v-for="(item, index) in tableData" :key="index">
+        <el-table
+          ref="table"
+          border
+          :data="item.list"
+          :show-header="index === 0"
+          show-summary
+          :span-method="ObjectSpanMethod"
+          :summary-method="getSummaries"
+          width="100%">
+          <el-table-column align="center" label="分派人员" prop="assignUserName" width="400px" />
+          <el-table-column align="center" label="工单类型" prop="orderTypeName" width="1200px" />
+          <el-table-column align="center" label="数量" prop="orderTypeNum" width="600px" />
+        </el-table>
+      </div>
+      <div ref="sum_heji" class="sum_footer">
+        <div class="sum_footer_unit left"></div>
+        <div class="sum_footer_unit">总计</div>
+        <div class="sum_footer_unit">{{ getTotal('orderTypeNum') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import reportApi from '@/api/report/index'
+  import { parseTime } from '@/utils'
+  export default {
+    name: 'WorkOrderReport',
+    components: {},
+    data() {
+      return {
+        month: parseTime(new Date()),
+        loading: false,
+        header: undefined,
+        tableData: [],
+        initDataList: [],
+      }
+    },
+    mounted() {
+      this.initData()
+    },
+    methods: {
+      async initData() {
+        const { data } = await reportApi.getSupportOrderStatisitc({ month: this.month })
+        console.log('返回的data是', data)
+        this.initDataList = data
+        this.tableData = []
+
+        console.log('this.initDataList is', this.initDataList)
+        // 按照销售名字分组
+
+        if (this.initDataList != null && this.initDataList.length > 0) {
+          this.initDataList.forEach((item) => {
+            if (this.tableData.length == 0) {
+              this.tableData.push({ assignUserName: item.assignUserName, list: [item] })
+            } else {
+              let res = this.tableData.some((item2) => {
+                //判断名称存在,就添加到当前项目中
+                if (item.assignUserName == item2.assignUserName) {
+                  item2.list.push(item)
+                  return true
+                }
+              })
+              if (!res) {
+                //如果没找相同姓名就添加一个新对象
+
+                this.tableData.push({ assignUserName: item.assignUserName, list: [item] })
+              }
+            }
+          })
+        }
+
+        console.log('tableData is', this.tableData)
+        //}
+      },
+      // 表格合计
+      getSummaries(param) {
+        console.log('表格合计的param是:', param)
+
+        const { columns, data } = param
+        let sums = []
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+            return
+          } else if (index > 1) {
+            const values = data.map((item) => Number(item[column.property]))
+            if (!values.every((value) => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              // sums[index] = sums[index]
+              sums[index] += ''
+            } else {
+              sums[index] = ''
+            }
+          }
+        })
+        return sums
+      },
+      // 计算表格合计行
+      getTotal(name) {
+        var sum = 0
+        console.log('his.initDataList is', this.initDataList)
+        if (this.initDataList != null && this.initDataList.length > 0) {
+          this.initDataList.forEach((n) => {
+            sum += n[name]
+          })
+          // sum = sum
+        }
+
+        return sum
+      },
+      // 合并相同单元格
+      // 合并单元格相同内容
+      ObjectSpanMethod({ rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.flitterData(this.initDataList).one[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col,
+          }
+        }
+      },
+      /**合并表格的第一列，处理表格数据 */
+      flitterData(arr) {
+        let spanOneArr = []
+        let concatOne = 0
+        arr.forEach((item, index) => {
+          if (index === 0) {
+            spanOneArr.push(1)
+          } else {
+            //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
+            if (item.quarterly === arr[index - 1].quarterly) {
+              //第一列需合并相同内容的判断条件
+              spanOneArr[concatOne] += 1
+              spanOneArr.push(0)
+            } else {
+              spanOneArr.push(1)
+              concatOne = index
+            }
+          }
+        })
+        return {
+          one: spanOneArr,
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .detail {
+    padding: 30px;
+  }
+  .sum_footer {
+    display: flex;
+    display: -webkit-flex;
+    height: 40px;
+    overflow: visible !important;
+    float: right;
+    margin-top: 2rem;
+  }
+  .sum_footer_unit {
+    flex-shrink: 0;
+    font-size: 13px;
+    font-weight: 800;
+    color: #606266;
+    padding: 0 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-word;
+    border-bottom: 1px solid #ebeef5;
+    border-right: 1px solid #ebeef5;
+    border-top: 1px solid #ebeef5;
+    text-align: center;
+  }
+
+  .left {
+    border-left: 1px solid #ebeef5;
+  }
+</style>