“报表表格求和”

zzq

2023-09-27 9276baaf6664e55e217253caca2151a10640764d

“报表表格求和”

 src/components/makepager/TableCommonView.vue

@@ -1,6 +1,6 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <div class="table-view" v-loading="loading">
  <div :class="{'table-view':true,'table_height':!showSummary}" v-loading="loading">
    <el-table
      ref="table"
      border
@@ -19,9 +19,18 @@
      :default-expand-all="tableList.isDefaultExpandAll"
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
      :span-method="objectSpanMethod"
      :summary-method="getSummaries"
      :show-summary="showSummary"
    >
      <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column>
      <el-table-column v-if="tableList.selectBox" type="selection" width="40">
      </el-table-column>
      <el-table-column
        v-if="tableList.selectIndex"
        type="index"
        label="序号"
        width="50"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
@@ -34,7 +43,9 @@
        v-if="item.isShowColumn"
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <span v-if="item.price">{{
            "￥" + number_format(scope.row[item.prop], 2, ".", ",")
          }}</span>
          <!-- 状态显示 -->
          <div v-else-if="item.status">
            <span
@@ -43,21 +54,30 @@
                greenSlot: scope.row.status == '4',
                redSlot: scope.row.status == '5',
                blueSlot: scope.row.status == '3',
                graySlot: scope.row.status == '1'
                graySlot: scope.row.status == '1',
              }"
              >{{
                item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
                item.isCallMethod
                  ? item.getCallMethod(scope.row[item.prop], scope.row)
                  : scope.row[item.prop]
              }}</span
            >
          </div>
          <!-- 调用方法显示文字 -->
          <div v-else-if="item.isCallMethod">
            <span>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span>
            <span>{{
              item.getCallMethod(scope.row[item.prop], scope.row)
            }}</span>
          </div>
          <!-- 小于当前时间显示不同颜色 -->
          <span
            v-else-if="item.date"
            :style="{ color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' }"
            :style="{
              color:
                new Date().getTime() > new Date(scope.row[item.prop]).getTime()
                  ? '#D23F3A'
                  : '#606266',
            }"
            >{{ timeAgo(scope.row[item.prop]) }}</span
          >
          <div v-else-if="item.conversion">
@@ -70,10 +90,18 @@
            >{{ scope.row[item.prop] }}</span
          >
          <span v-else-if="item.propType == 'mulitple'">
            {{ scope.row[item.prop][item.propTwo] ? scope.row[item.prop][item.propTwo] : "--" }}
            {{
              scope.row[item.prop][item.propTwo]
                ? scope.row[item.prop][item.propTwo]
                : "--"
            }}
          </span>
          <span :class="item.className ? item.className : ''" v-else>{{
            scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? scope.row[item.prop] : "--"
            scope.row[item.prop]
              ? scope.row[item.prop]
              : scope.row[item.prop] === 0
              ? scope.row[item.prop]
              : "--"
          }}</span>
        </template>
      </el-table-column>
@@ -85,15 +113,22 @@
    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div v-if="showCheckcol" class="styleBtn">
      <i @click="checkcol()" class="label">...</i>
      <el-checkbox-group v-model="showcolList" v-show="iscolopen" class="checkbox-group" @change="selCeckBoxList">
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
      <el-checkbox-group
        v-model="showcolList"
        v-show="iscolopen"
        class="checkbox-group"
        @change="selCeckBoxList"
      >
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
          >{{ item }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { timeago } from "@/common/config/index"
import { timeago } from "@/common/config/index";
export default {
  name: "TableCommonView",
  props: {
@@ -106,119 +141,163 @@
          showStyle: true,
          tableInfomation: [], // 接口返回数据
          showcol: [],
          countcol: [],
          allcol: [],
          highlight: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
          ]
        }
            { label: "", prop: "", min: 200, tooltip: true },
          ],
        };
      },
      showcol: {
        typeof: Array,
        default: () => []
      }
        default: () => [],
      },
    },
    // 合并单元格
    rowData: {
      type: Array,
      default: () => {
        return []
      }
        return [];
      },
    },
    // 加载的loading
    loading: {
      type: Boolean,
      default: false
      default: false,
    },
    // 选中的样式
    selectClassRow: {
      type: Object,
      default: () => {
        return {}
      }
        return {};
      },
    },
    showCheckcol: {
      type: Boolean,
      default: true
      default: true,
    },
    showSummary:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      iscolopen: false,
      showcolList: this.tableList.showcol
    }
      showcolList: this.tableList.showcol,
    };
  },
  watch: {},
  computed: {},
  beforeUpdate() {},
  methods: {
    onMaskClick() {
      this.iscolopen = false
      this.iscolopen = false;
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      row
      column
      row;
      column;
      if (this.rowData && this.rowData.length > 0) {
        // 产品BOM 表格特殊处理 合并单元格
        if (columnIndex < 5 || columnIndex == 9) {
          const _row = this.rowData[rowIndex]
          const _col = _row > 0 ? 1 : 0
          const _row = this.rowData[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
            colspan: _col,
          };
        }
      }
    },
    tableRowClick(row) {
      this.$emit("tableRowClick", row)
      this.$emit("tableRowClick", row);
    },
    handleReserve(row) {
      return row._id ? row._id : row.id
      return row._id ? row._id : row.id;
    },
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
      this.$emit("getSelectArray", val);
    },
    // 公共详情
    selCommonClick(row) {
      this.$emit("selCommonClick", row)
      this.$emit("selCommonClick", row);
    },
    // 选择列
    checkcol() {
      this.iscolopen = !this.iscolopen
      this.iscolopen = !this.iscolopen;
    },
    closeCheckbox() {
      let label = document.querySelector(".label")
      let label = document.querySelector(".label");
      if (label) {
        this.iscolopen = false
        this.iscolopen = false;
      }
    },
    selCeckBoxList(val) {
      this.$emit("selTableCol", val)
      this.$emit("selTableCol", val);
    },
    // 单选行相关
    tableRowClassName({ row }) {
      if (Object.keys(this.selectClassRow).length > 0) {
        if (row.id == this.selectClassRow.id) {
          return "onSelect"
          return "onSelect";
        }
      }
      this.$emit("tableRowClassName", row)
      this.$emit("tableRowClassName", row);
    },
    timeAgo(val) {
      return timeago(val)
    }
  }
}
      return timeago(val);
    },
    //求和
    getSummaries(param) {
      if(this.tableList.countcol&&this.tableList.countcol.length>0){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = " ";
          return;
        }
        this.tableList.countcol.forEach((countcols,idx) => {
          if (column.label === countcols) {
            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].toLocaleString();
              // console.log(sums,"sums")
            } else {
              sums[index] = "";
            }
          } else {
            return;
          }
        });
      });
      return sums;
      }else{
      }
    },
    
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.table_height{
  height: 100%;
}
.table-view {
  position: relative;
  height: 100%;
  .blue {
    width: 70px;
    text-align: center;
@@ -296,5 +375,9 @@
    border-top-right-radius: 12px;
    overflow: auto;
  }
  .el-table__body-wrapper{
    // height: ;
  }
}

</style>

 src/views/reportForm/inventoryReport/index.vue

@@ -30,6 +30,7 @@
            :table-list="tableList"
            @selTableCol="selTableCol"
            @tableRowClick="tableRowClick"
            :showSummary="true"
          >
            <template slot="tableButton">
              <el-table-column
@@ -129,6 +130,7 @@
      ],
      tableList: {},
      showcol: ["产品类别", "单位成本", "总价值", "入库", "出库"],
      countcol:["总价值","在库","可用库存","入库","出库","预测"],
      searchOptions: [],
      commonDetail: {
        visible: false,
@@ -154,6 +156,7 @@
        tableInfomation: [],
        selectBox: true,
        showcol: this.showcol,
        countcol:this.countcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol),
      };
@@ -172,7 +175,6 @@
        {
          label: "产品",
          prop: "product",
          isShowColumn: true,
          default: true,
          width:300,
          
@@ -181,66 +183,53 @@
        {
          label: "产品类别",
          prop: "category",
          isShowColumn: true,
          default: true,
          isShowColumn: showcol.includes("产品类别"),
        },
        {
          label: "单位成本",
          prop: "cost",
          isShowColumn: true,
          default: false,
          isShowColumn: showcol.includes("单位成本"),
        },
        {
          label: "总价值",
          prop: "totalPrices",
          isShowColumn: true,
          default: false,
          isShowColumn: showcol.includes("总价值"),
        },
        {
          label: "在库",
          prop: "inStore",
          isShowColumn: true,
          default: true,
        },
        {
          label: "可用库存",
          prop: "availableStore",
          isShowColumn: true,
          default: true,
        },
        {
          label: "入库",
          prop: "inStorage",
          isShowColumn: true,
          default: false,
          isShowColumn: showcol.includes("入库"),
        },
        {
          label: "出库",
          prop: "toStore",
          isShowColumn: true,
          isShowColumn: showcol.includes("出库"),
          default: false,
        },
        {
          label: "预测",
          prop: "forecast",
          isShowColumn: false,
          isShowColumn: showcol.includes("预测"),
          default: false,
        },
        {
          label: "单位",
          prop: "unit",
          isShowColumn: true,
          default: true,
          // price:true
          // status: true,
          // propType: "mulitple",
          // conversion: true,
        },
      ];
      return tableColumn;
@@ -292,12 +281,14 @@
    },
    // 历史
    handleHistoryClick(row) {
      console.log(row, "two");
      this.$router.push('/operate/allot')
    },
    // 补货
    handleAddGoods(row) {},
    // 位置
    handleLocation() {},
    handleLocation() {
      this.$router.push('/reportForm/locationReport')
    },
    // 预测
    handleForecast() {},
  },

 src/views/reportForm/locationReport/index.vue

@@ -18,13 +18,10 @@
        :table-list="tableList"
        @selTableCol="selTableCol"
        @tableRowClick="tableRowClick"
        :showSummary="true"
      >
        <template slot="tableButton">
          <el-table-column
            label="操作"
            width="210"
            align="center"
          >
          <el-table-column label="操作" width="210" align="center">
            <template slot-scope="scope">
              <span @click="handleHistoryClick(scope.row)">
                <i class="el-icon-refresh-left"></i>
@@ -70,30 +67,36 @@
    return {
      tableList: {},
      showcol: ["存储类别", "产品类别", "预留数量", "价值"],
      // countcol: [
      //   { label: "在库数量", unit: "" },
      //   { label: "预留数量", unit: "" },
      //   { label: "价值", unit: "￥" },
      // ],
      countcol:["在库数量","预留数量","价值"],
      testArr: [
        {
          product:"HC/销售区/b区",
          category:"丝绸制品/真丝睡袍",
          cost:"800.00",
          totalPrices:"0.00",
          inStore:"0.00",
          availableStore:"0.00",
          inStorage:"0.00",
          toStore:"0.00",
          forecast:"0.00",
          unit:"件"
          product: "HC/销售区/b区",
          category: "丝绸制品/真丝睡袍",
          cost: "800.00",
          totalPrices: "2000.00",
          inStore: "00.00",
          availableStore: "200.00",
          inStorage: "00.00",
          toStore: 65432.0,
          forecast: "0.00",
          unit: "件",
        },
        {
          product:"HC销售区/A区",
          category:"丝绸制品/真丝睡袍",
          cost:"9980.00",
          totalPrices:"0.00",
          inStore:"0.00",
          availableStore:"0.00",
          inStorage:"0.00",
          toStore:"0.00",
          forecast:"0.00",
          unit:"件"
          product: "HC销售区/A区",
          category: "丝绸制品/金丝睡袍",
          cost: "9980.00",
          totalPrices: "00.00",
          inStore: "00.00",
          availableStore: "20.00",
          inStorage: "0.00",
          toStore: 32618.0,
          forecast: "0.00",
          unit: "件",
        },
      ],
      searchOptions: [],
@@ -118,9 +121,10 @@
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation:[],
        tableInfomation: [],
        selectBox: true,
        showcol: this.showcol,
        countcol: this.countcol,
        allcol: [],
        tableColumn: this.setTableColumn(this.showcol),
      };
@@ -132,7 +136,7 @@
        }
      }
      this.tableList.allcol = allcol;
      this.tableList.tableInfomation=this.testArr
      this.tableList.tableInfomation = this.testArr;
    },
    setTableColumn(showcol) {
      let tableColumn = [
@@ -151,40 +155,35 @@
        {
          label: "位置",
          prop: "product",
          isShowColumn: true,
          default: true,
        },

        {
          label: "存储类别",
          prop: "category",
          isShowColumn: true,
          default: false,
          isShowColumn: showcol.includes("存储类别"),
        },
        {
          label: "产品",
          prop: "cost",
          isShowColumn: true,
          default: true,
        },
        {
          label: "产品类别",
          prop: "totalPrices",
          isShowColumn: true,
          default: false,
          isShowColumn: showcol.includes("产品类别"),
        },
        {
          label: "在库数量",
          prop: "inStore",
          isShowColumn: true,
          default: true,
        },
        {
          label: "预留数量",
          prop: "availableStore",
          // isShowColumn: true,
          sortable: true,
          default: false,
          isShowColumn: showcol.includes("预留数量"),
        },
@@ -199,9 +198,6 @@
          prop: "toStore",
          width: 120,
          default: false,
          // status: true,
          // isCallMethod: true,
          // getCallMethod: this.getStatus,
          isShowColumn: showcol.includes("价值"),
        },
      ];
@@ -240,7 +236,7 @@
    // 行点击
    tableRowClick(row) {
      console.log(row);
      this.editConfig.visible = true;
      // this.editConfig.visible = true;
      this.editConfig.title = "查看";
      this.editConfig.infomation = { ...row };
    },
@@ -254,13 +250,9 @@
      return val === 1 ? "草稿" : val === 3 ? "就绪" : "完成";
    },
    // 历史
    handleHistoryClick(){

    },
    handleHistoryClick() {},
    // 补货
    handleAddGoods(){

    }
    handleAddGoods() {},
  },
};
</script>
@@ -271,12 +263,12 @@
  height: 100%;
  background: #e6ecf2;
  padding: 10px;
// .top {
//   margin-bottom: 20px;
//   height: 60px;
//   background: #fff;
//   border-radius: 8px;
// }
  // .top {
  //   margin-bottom: 20px;
  //   height: 60px;
  //   background: #fff;
  //   border-radius: 8px;
  // }
  .list-view {
    height: calc(100% - 150px);
  }