kd-aiot-frontend-wms/src/views/warehouseManagement/inventoryAllocation/accountstatement/inventoryTable.vue

<template>
  <div>
    <!-- <div v-for="(item) in datasource" style="margin-bottom: 10px">
      <div>
        <div style="margin-bottom: 10px;font-weight: bold;">
          <div>
            <el-divider direction="vertical"></el-divider>
            <span><span>{{ index + 1 }}</span> 销售订单：</span>
            <span>{{ item.orderNo }}</span>
            <el-divider direction="vertical"></el-divider> -->
            <!-- <span>计价方式：</span>
            <span> {{ item.pricingWay == 1 ? '按数量计费' : '按重量计费' }}</span> -->
            <!-- <el-divider direction="vertical"></el-divider> -->
            <!-- <span>总金额：</span>
            <span>{{item.amountTotalPrice}}</span>
            <el-divider direction="vertical"></el-divider>
            <span>应收金额：</span>
            <span>{{item.amountReceivablePrice}}</span>
            <el-divider direction="vertical"></el-divider>
            <span>应付金额：</span>
            <span>{{item.amountPayablePrice}}</span>
          

          </div>
        </div>
        <template v-if="item.orderType!=6">
          <div  v-for="(j,i) in item.subList" :key="i">
            <ele-pro-table :show-summary="true" :summary-method="getSummaries" ref="table" row-key="id" :needPage="false"
                           :columns="getColumns(j)" max-height="500px" style="margin-bottom: 10px"
                           :sub-title="getTitle(j)" :toolkit="[]" :datasource="j.detailList"
                           cache-key="systemRoleTable17-11121" class="time-form">
              <template v-slot:action="{ row,$index }">
                <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(index,$index,'line')">
                  <template v-slot:reference>
                    <el-link type="danger" v-if="dialogType!=='view'" :underline="false" icon="el-icon-delete">
                      删除
                    </el-link>
                  </template>
                </el-popconfirm>
              </template>
            </ele-pro-table>
          </div>
        </template>
        <div v-else>
          <ele-pro-table :show-summary="true" :summary-method="getSummaries" ref="table" row-key="id" :needPage="false"
                         :columns="getColumns({subType:10})" sub-title="赔付订单" max-height="500px" style="margin-bottom: 10px"
                         :toolkit="[]" :datasource="item.detailList"
                         cache-key="systemRoleTable17-11121" class="time-form">
            <template v-slot:action="{ row,$index }">
              <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(index,$index,'line')">
                <template v-slot:reference>
                  <el-link type="danger" v-if="dialogType!=='view'" :underline="false" icon="el-icon-delete">
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template> -->
            <!--            <template v-slot:productName="{ row,$index }">-->
            <!--              <el-popover-->
            <!--                placement="right"-->
            <!--                width="60%"-->
            <!--                trigger="hover">-->
            <!--                <ele-pro-table ref="childrenTable"-->
            <!--                               row-key="id"-->
            <!--                               max-height="300px"-->
            <!--                               :needPage="false" :columns="childrenColumns" :toolkit="[]"-->
            <!--                               :datasource="row.productList"-->
            <!--                               cache-key="systemRoleTable17-222" class="time-form">-->
            <!--                </ele-pro-table>-->
            <!--                <el-button type="text" slot="reference">{{ row.productName }}</el-button>-->
            <!--              </el-popover>-->
            <!--            </template>-->
          <!-- </ele-pro-table>
        </div>
      </div>
    </div> -->

    <el-collapse  v-model="activeNames">
      <el-collapse-item v-for="(item, index) in datasource" :key="index" :name="index">
        <template slot="title">
          <div class="collapse-title">
            <div class="collapse-title-left"><span class="collapse-title-index">{{ index + 1 }}</span> 销售订单：{{ item.orderNo }}</div>
            <div class="collapse-title-right">
              <span>订单金额：{{ item.amountTotalPrice || 0 }}元</span>
              <span>已对账金额：{{ item.statementAmount || 0 }}元</span>
              <span>未对账金额：{{ item.unStatementAmount || 0 }}元</span>
            </div>
          </div>
        </template>
        <div>
          <el-tabs type="border-card">
            <el-tab-pane label="发货单">
              <ele-pro-table :show-summary="false" :summary-method="getSummaries" ref="table" row-key="id" :needPage="false"
                          :columns="getColumns(item, 'deliveryProducts')" max-height="500px" style="margin-bottom: 10px" :datasource="item.deliveryProducts || []"
                          cache-key="systemRoleTable17-11121" class="time-form">
                <template v-slot:toolbar>
                  <div class="headbox">
                    <div>
                      <span class="amount">对账金额合计：{{ getSummariesA(item.deliveryProducts || []) }}元</span>
                    </div>
                  </div>
                </template>
                <template v-slot:action="{ row,$index }">
                  <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(index,$index,'line')">
                    <template v-slot:reference>
                      <el-link type="danger" v-if="dialogType!=='view'" :underline="false" icon="el-icon-delete">
                        删除
                      </el-link>
                    </template>
                  </el-popconfirm>
                </template>
              </ele-pro-table>
            </el-tab-pane>
            <el-tab-pane label="退货单">
              <ele-pro-table :show-summary="false" :summary-method="getSummaries" ref="table" row-key="id" :needPage="false"
                          :columns="getColumns(item, 'returnProducts')" max-height="500px" style="margin-bottom: 10px" :datasource="item.returnProducts || []"
                          cache-key="systemRoleTable17-11122" class="time-form">
                <template v-slot:toolbar>
                  <div class="headbox">
                    <div>
                      <span class="amount">对账金额合计：{{ getSummariesA(item.returnProducts || []) }}元</span>
                    </div>
                  </div>
                </template>
                <template v-slot:action="{ row,$index }">
                  <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(index,$index,'line')">
                    <template v-slot:reference>
                      <el-link type="danger" v-if="dialogType!=='view'" :underline="false" icon="el-icon-delete">
                        删除
                      </el-link>
                    </template>
                  </el-popconfirm>
                </template>
              </ele-pro-table>
            </el-tab-pane>
          </el-tabs>
          
        </div>
      </el-collapse-item>
    </el-collapse>

<!--    <el-row v-if="dialogType=='view'" style="margin-top: 10px">-->
<!--      <el-col :span="6" style="float: right;">-->
<!--        <el-descriptions class="margin-top" direction="vertical" :column="3" size="small" border>-->
<!--          <el-descriptions-item label="本期应收款总额">{{ dataForm.amountReceivablePrice }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="截止上期欠款">-->
<!--            <template>{{ dataForm.previousPeriodEndDebt }}</template>-->
<!--          </el-descriptions-item>-->
<!--        </el-descriptions>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>

</template>
<script>
import dictMixins from '@/mixins/dictMixins';
import { pricingWayList } from '@/enum/dict';

export default {
  mixins: [dictMixins],
  components: {},
  props: ['datasource', 'dialogType', 'dataForm'],
  computed: {
    getColumns() {
      return (item, type)=>{
        console.log(this.dataForm)
        let basicFields = [
          {
            width: 60,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            minWidth: 130,
            prop: 'statementSubOrderNo',
            label: type == 'deliveryProducts'?'发货单编码':'退货单编码',
            align: 'center',
            slot: 'statementSubOrderNo',
            showOverflowTooltip: true
          },
          {
            minWidth: 130,
            prop: 'productOperateTime',
            label: type == 'deliveryProducts'?'发货日期':'退货日期',
            align: 'center',
            slot: 'productOperateTime',
            showOverflowTooltip: true
          },
          {
            minWidth: 120,
            prop: 'productCode',
            label: '产品编码',
            slot: 'productCode',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 140,
            prop: 'productName',
            label: '产品名称',
            slot: 'productName',
            align: 'center',
            showOverflowTooltip: true
          },
          // {
          //   minWidth: 140,
          //   prop: 'subType',
          //   label: '退货产品类型',
          //   slot: 'subType',
          //   align: 'center',
          //   show:j.subType==11,
          //   showOverflowTooltip: true,formatter(_row, _column, cellValue){
          //     return cellValue==12?'实物赔偿':'原货'
          //   }
          // },
          
          {
            minWidth: 100,
            prop: 'specification',
            label: '规格',
            align: 'center',
            slot: 'specification',
            showOverflowTooltip: true
          },
          {
            minWidth: 100,
            prop: 'modelType',
            label: '型号',
            align: 'center',
            slot: 'modelType',
            showOverflowTooltip: true
          },
          // {
          //   prop: 'provenance',
          //   label: '产地',
          //   slot: 'provenance',
          //   align: 'center',
          //   // show:this.contractBookType==2,
          //   minWidth: 200,
          //   showOverflowTooltip: true,
          //   formatter: (row, column) => {
       
          //     return row.provenance && row.provenance.length
          //       ? row.provenance
          //           .map((item) => this.getDictValue('产地', item ))
          //           .join(',')
          //       : '';
          //   }
          // },
          {
            minWidth: 100,
            prop: 'pricingWay',
            label: '计价方式',
            align: 'center',
            slot: 'pricingWay',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              let pricingWay = pricingWayList.find(item => item.id == cellValue)
              return pricingWay ? pricingWay.name : ''
            }
          },
          {
            minWidth: 100,
            prop: 'totalCount',
            label: '数量',
            align: 'center',
            slot: 'totalCount'
          },
          {
            minWidth: 120,
            prop: 'measuringUnit',
            label: '计量单位',
            align: 'center',
            slot: 'measuringUnit'
          },
          {
            width: 100,
            prop: 'receiveTotalWeight',
            label: '收货总重',
            slot: 'receiveTotalWeight',
            align: "center"
          },
          {
            width: 100,
            prop: 'sendTotalWeight',
            label: '发货总重',
            slot: 'sendTotalWeight',
            align: "center",
            headerSlot: 'headerTotalCount'
          },

          {
            width: 100,
            prop: 'increaseTotalWeight',
            label: '增重重量',
            slot: 'increaseTotalWeight',
            align: "center"
          },
          {
            width: 100,
            prop: 'weightUnit',
            label: '重量单位',
            slot: 'weightUnit',
            align: "center"
          },
          {
            minWidth: 90,
            prop: 'singlePrice',
            label: '单价',
            align: 'center',
            slot: 'singlePrice',
          },
          {
            minWidth: 100,
            prop: 'taxRate',
            label: '税率',
            align: 'center',
          },
          {
            width: 150,
            prop: 'noTaxSinglePrice',
            label: '不含税单价',
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'totalPrice',
            label: '合计',
            slot: 'totalPrice',
            align: 'center',
          },
          {
            minWidth: 100,
            prop: 'discountRatio',
            label: '折让比例',
            align: 'center',
          },
          {
            minWidth: 100,
            prop: 'discountSinglePrice',
            label: '折让单价',
            align: 'center',
          },
          {
            minWidth: 120,
            prop: 'discountTotalPrice',
            label: '折让合计',
            slot: 'discountTotalPrice',
            align: 'center',
          },
    

        ]
        let permissionType = {
          // 'financeLeader': [
          //   {
          //     minWidth: 130,
          //     prop: 'receivedPrice',
          //     label: '已收款金额',
          //     align: 'center',
          //     slot: 'receivedPrice',
          //     headerSlot: 'headerReceivedPrice'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'receivablePrice',
          //     label: '应收款金额',
          //     align: 'center',
          //     slot: 'receivablePrice',
          //   },
          //   {
          //     minWidth: 140,
          //     prop: 'receivableDate',
          //     label: '应收款日期',
          //     align: 'center',
          //     slot: 'receivableDate',
          //     headerSlot: 'headerReceivableDate'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'invoicedPrice',
          //     label: '已开票金额',
          //     align: 'center',
          //     slot: 'invoicedPrice',
          //     headerSlot: 'headerInvoicedPrice'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'notInvoicedPrice',
          //     label: '未开票金额',
          //     align: 'center',
          //     slot: 'notInvoicedPrice'
          //   },
          // ],
          // 'leader': [
          //   {
          //     minWidth: 130,
          //     prop: 'receivedPrice',
          //     label: '已收款金额',
          //     align: 'center',
          //     slot: 'receivedPrice'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'receivablePrice',
          //     label: '应收款金额',
          //     align: 'center',
          //     slot: 'receivablePrice'
          //   },
          //   {
          //     minWidth: 140,
          //     prop: 'receivableDate',
          //     label: '应收款日期',
          //     align: 'center',
          //     slot: 'receivableDate'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'invoicedPrice',
          //     label: '已开票金额',
          //     align: 'center',
          //     slot: 'invoicedPrice'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'notInvoicedPrice',
          //     label: '未开票金额',
          //     align: 'center',
          //     slot: 'notInvoicedPrice'
          //   },
          // ],
          // 'uploadReceipt': [
          //   {
          //     minWidth: 130,
          //     prop: 'receivedPrice',
          //     label: '已收款金额',
          //     align: 'center',
          //     slot: 'receivedPrice'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'receivablePrice',
          //     label: '应收款金额',
          //     align: 'center',
          //     slot: 'receivablePrice'
          //   },
          //   {
          //     minWidth: 140,
          //     prop: 'receivableDate',
          //     label: '应收款日期',
          //     align: 'center',
          //     slot: 'receivableDate'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'invoicedPrice',
          //     label: '已开票金额',
          //     align: 'center',
          //     slot: 'invoicedPrice'
          //   },
          //   {
          //     minWidth: 130,
          //     prop: 'notInvoicedPrice',
          //     label: '未开票金额',
          //     align: 'center',
          //     slot: 'notInvoicedPrice'
          //   },
          // ],
        }
        permissionType[this.taskDefinitionKey] && basicFields.push(...permissionType[this.taskDefinitionKey])
        return basicFields
      }
    },
    getTitle(){
        return (item, type)=>{
        //   let title=this.subTypeList[j.subType]+(j.statementSubOrderCode||'')+' '
        //   if(j.subType==11&&j.subExecType){
        //          if(j.subExecType=='10'){
        //           title=title+' 退货方式：全部原货 '
        //          }
        //          if(j.subExecType=='20'){
        //           title=title+' 退货方式：部分原货+实物赔偿'
        //          }
        //          if(j.subExecType=='30'){
        //           title=title+' 退货方式：部分原货+现金赔偿 '+' 赔偿金额：'+j.amountPayablePrice
        //          }
        //          if(j.subExecType=='40'){
        //           title=title+' 退货方式：全部实物赔偿'
        //          }
        //          if(j.subExecType=='50'){
        //           title=title+' 退货方式：全部现金赔偿  '+' 赔偿金额：'+j.amountPayablePrice
        //          }
        //   }
        console.log(item[type])
          const total = item[type]?.reduce((prev, curr) => {
            console.log(curr.discountTotalPrice)
            return prev + Number(curr.discountTotalPrice || 0) + '元';
          }, 0);
          return `对账金额合计：${total}`
        }
      },
  },
  data() {
    return {
      activeNames: [],
      rules: {},
      form: {},
      subTypeList:{
        10:'发货单：',
        11:'退货单：',
        12:'实物赔偿清单：',
        30:'调拨单：',
      },
      subColumnsTypeList:{
        10: '发货',
        11: '退货',
        30: '调拨'
      },
    };
  },
  watch: {
    datasource: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.activeNames = newVal.map((item, index) => index);
          console.log('this.activeNames~~~', this.activeNames)
        }
      },
      deep: true
    }
  },
  created(){
    this.requestDict('产地');
  },
  mounted() {
    // this.activeNames = this.datasource.map((item, index) => index);
  },
  methods: {
    remove(tableIndex, lineIndex, delType) {
      let params = {
        tableIndex,
        lineIndex,
        delType
      }
      this.$emit('handleRemove', params)
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      let fields = ['totalPrice', 'notInvoicedPrice', 'invoicedPrice', 'receivablePrice', 'receivedPrice', 'discountTotalPrice']
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = fields.includes(column.property) ? 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]).toFixed(2)
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },
    getSummariesA(table) {
      return table.reduce((prev, curr) => {
        return prev + Number(curr.discountTotalPrice || 0)
      }, 0)
    }
  }
};
</script>
<style lang="scss" scoped>
.collapse-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96%;
}
.collapse-title-left {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    font-size: 16px;
}
.collapse-title-index {
    width: 24px;
    height: 24px;
    background: #63a103;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
    color: #fff;
    margin-right: 10px;
    font-size: 14px;
}
.collapse-title-right {
  display:grid;
  grid-auto-flow: column;
  gap: 18px;
}
.headbox {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    padding-right: 30px;
  }
}

.time-form .el-form-item {
  margin-bottom: 0 !important;
}

::v-deep .period {
  display: flex;

  .borderleftnone {
    .el-input--medium .el-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .borderrightnone {
    .el-input--medium .el-input__inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

}

::v-deep .time-form tbody > tr:hover > td {
  background-color: transparent !important;
}

::v-deep .time-form .el-table tr {
  background-color: #ffffff;
}

.pricebox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
}

::v-deep.el-divider {
  margin: 10px;
  font-weight: bold;
}

</style>