kd-aiot-frontend-wt/src/views/bpm/handleTask/components/saleOrder/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>
            <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">
            </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: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>
  </div>

</template>
<script>
import dictMixins from '@/mixins/dictMixins';

export default {
  mixins: [dictMixins],

  components: {},
  props: ['datasource', 'dataForm','dialogType', 'taskDefinitionKey', 'priceObj'],
  computed: {
    getColumns() {
      return (j)=>{
        let basicFields = [
          {
            width: 60,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center',
          },
          {
            minWidth: 130,
            prop: 'productOperateTime',
            label: this.subColumnsTypeList[j.subType],
            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) => {
              return _row.pricingWay == 1 ? '按数量计价' : '按重量计价'
            }
          },
          {
            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: 90,
            prop: 'singlePrice',
            label: '单价',
            align: 'center',
            slot: 'singlePrice',
            show:j.subType==11
          },
          {
            minWidth: 100,
            prop: 'discountSinglePrice',
            label: '单价',
            align: 'center',
            slot: 'discountSinglePrice',
            show:j.subType!=11

          },
          {
            minWidth: 120,
            prop: 'totalPrice',
            label: '合计金额',
            slot: 'totalPrice',
            align: 'center',
            show:j.subType==11

          },
          {
            minWidth: 120,
            prop: 'discountTotalPrice',
            label: '合计金额',
            slot: 'discountTotalPrice',
            align: 'center',
            show:j.subType!=11

          },
          // {
          //   minWidth: 100,
          //   prop: 'discountTotalPrice',
          //   label: '折让合计金额',
          //   align: 'center',
          //   slot: 'discountTotalPrice'
          // },
        ]
        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 (j)=>{
          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
                 }
          }
          return title
        }
      }
  },
  created(){
    this.requestDict('产地');
  },
  data() {
    return {
      subTypeList:{
        10:'发货单：',
        11:'退货单：',
        12:'实物赔偿清单：',

      },
      subColumnsTypeList:{
        10:'发货日期',
        11:'退货日期',
      },
    };
  },
  watch: {},
  methods: {
    handleEditCost(row, p1, p2) {
      if (!row[p1]) return row[p2] = row.totalPrice.toFixed(2)
      row[p2] = (row.totalPrice - row[p1]).toFixed(2)
    },

    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;
    }
  }
};
</script>
<style lang="scss" scoped>
.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>