saas_masterPlatform/src/views/financed/accountsPayable/components/dislogPrint.vue

<template>
  <div>
    <BaseDialog
      :width="printType == 1 || type == 1 ? '1100px' : '1300px'"
      :isShow.sync="isShow"
      :title="printType == 1 ? '单据打印' : '明细打印'"
      @submit="submitForm"
      @close="close"
      @open="init"
      :confirmStatus="false"
    >
      <div id="print" v-loading="loading">
        <h3 style="text-align: center">
          {{ printType == 1 ? "费用支出单据" : "费用支出明细" }}
        </h3>
        <template v-if="printType == 1">
          <table
            class="table1"
            border
            cellspacing="0"
            cellpadding="5"
            width="100%"
          >
            <tr>
              <td>
                款项用途：{{
                  ["", "机构分成", "业务提成", "佣金结算", "供应商结算"][type]
                }}
              </td>
              <td>付款日期：{{ $methodsTools.onlyForma(formData.payTime) }}</td>
              <td>付款金额：{{ formData.payMoney | formatPrice }}</td>
            </tr>
            <tr>
              <td>
                <p>用途详细：</p>
                <p>机构名称：{{ formData.tenantName }}</p>
                <template v-if="type !== 1">
                  <p>业务员：{{ formData.createUsername }}</p>
                  <p>业务号：{{ formData.createNo }}</p>
                </template>
                <template v-if="type !== 3">
                  <p>
                    账款类型：{{
                      ["", "月份", "季度", "半年", "年度"][formData.billType]
                    }}
                  </p>
                  <p>账款时间：{{ activeData.monthTime }}</p>
                </template>
                <template v-if="type == 3">
                  <p>订单单号：{{ formData.orderSn }}</p>
                  <p>下单企业：{{ formData.purchaseOrg }}</p>
                </template>
              </td>
              <td>
                <p>收款信息：</p>
                <p>
                  收款方式：{{
                    [
                      "",
                      "微信支付",
                      "支付宝支付",
                      "金币支付",
                      "现金支付",
                      "网银支付",
                      "协议支付",
                      "对公转账",
                    ][formData.payType]
                  }}
                </p>
                <template v-if="formData.toBankAcount">
                  <p>收款账户：{{ formData.toBankName }}</p>
                  <p>收款银行：{{ formData.toBankTypeName }}</p>
                  <p>收款账号：{{ formData.toBankAcount }}</p>
                </template>
              </td>
              <td>
                <p>款项明细：</p>
                <template v-if="type == 3">
                  <p>结算佣金：{{ formData.brokerage | formatPrice }}</p>
                  <p>税前佣金：{{ formData.pretaxBrokerage | formatPrice }}</p>
                  <p>佣金税占比：{{ formData.pretax * 100 || 0 }}%</p>
                </template>
                <template v-else>
                  <p>应付分成：{{ formData.payMoney | formatPrice }}</p>
                  <p>
                    完单分成：{{
                      (formData.payMoney + formData.deductMoney) | formatPrice
                    }}
                  </p>
                  <p>退款扣除：{{ formData.deductMoney | formatPrice }}</p>
                </template>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <p>审核进度：</p>
                <el-steps
                  style="padding-left: 30px"
                  :space="200"
                  :active="checkRoles.length"
                  finish-status="success"
                  align-center
                >
                  <el-step
                    v-for="(item, index) in checkRoles"
                    :title="item"
                    :key="index"
                  ></el-step>
                </el-steps>
              </td>
            </tr>
          </table>
        </template>
        <template v-if="printType == 2">
          <table
            border
            width="100%"
            cellspacing="0"
            cellpadding="5"
            class="table2"
          >
            <thead>
              <tr>
                <td width="50">序号</td>
                <td
                  v-for="(item, index) in tableSet"
                  :key="index"
                  :width="item.width"
                >
                  {{ item.label }}
                </td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ index + 1 }}</td>
                <td v-for="(items, indexs) in tableSet" :key="indexs">
                  <span v-if="items.scope === 'time'">{{
                    $methodsTools.onlyForma(item[items.prop])
                  }}</span>
                  <span v-else-if="items.scope === 'formatPrice'">
                    {{ item[items.prop] | formatPrice }}
                  </span>
                  <span v-else-if="items.scope === 'type'">
                    {{ items.values[item[items.prop]] }}
                  </span>
                  <div v-else-if="items.scope === 'businessList'">
                    <div v-for="(bus, i) in item[items.prop]" :key="i">
                      {{ bus }}
                    </div>
                  </div>
                  <div v-else-if="items.scope === 'pretax'">
                    {{ item.pretax * 100 }}%
                  </div>
                  <span v-else>
                    {{ item[items.prop] || "-" }}
                  </span>
                </td>
              </tr>
              <tr>
                <td :colspan="setLen - 2">合计</td>
                <td>
                  {{ computedMoney(tableData, setLen - 3) | formatPrice }}
                </td>
                <td v-if="type !== 3">
                  {{ computedMoney(tableData, setLen - 2) | formatPrice }}
                </td>
                <td v-else></td>
                <td>
                  {{ computedMoney(tableData, setLen - 1) | formatPrice }}
                </td>
              </tr>
            </tbody>
          </table>
        </template>
      </div>

      <template slot="slotBtnRight">
        <el-button v-print="'#print'" type="primary">打印</el-button>
      </template>
    </BaseDialog>
  </div>
</template>

<script>
import {
  withPrint,
  monthOrderListWithPrint,
  commissionPrint,
} from "@/api/financed/index";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {},
      checkRoles: ["统计", "会计/财务", "总经理", "出纳"],
      tableData: [],
      loading: false,
    };
  },
  methods: {
    init() {
      this.loading = true;
      let { id } = this.activeData;
      if (this.printType == 2) {
        id = {
          divideLogId: id,
        };
      }
      // 佣金的
      if (this.type == 3) {
        id = {
          orderSn: this.activeData.orderSn,
        };
      }
      const fn =
        this.type == 3
          ? commissionPrint
          : [withPrint, monthOrderListWithPrint][this.printType - 1];
      fn(id)
        .then((res) => {
          if (this.printType == 1) {
            this.formData = res.data;
          }
          if (this.printType == 2) {
            this.tableData = this.type == 3 ? [res.data] : res.data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    close() {},
    submitForm() {},
  },
  computed: {
    computedMoney: function () {
      return function (array, index) {
        const property = this.tableSet[index].prop;
        return array.reduce((a, b) => a + b[property], 0);
      };
    },
    isShow: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
    printType() {
      return this.activeData.printType;
    },
    type() {
      return this.activeData.type;
    },
    tableSet() {
      if (this.type != 3) {
        let tableSet = [
          { label: "完单时间", prop: "orderTime", width: "160", scope: "time" },
          {
            label: "订单日期",
            prop: "orderCreateTime",
            width: "160",
            scope: "time",
          },
          { label: "订单号", prop: "orderSn", width: "200" },
          { label: "业务员", prop: "createUsername", width: "80" },
          { label: "业务号", prop: "createNo", width: "80" },
          {
            label: "业务类型",
            prop: "businessList",
            scope: "businessList",
            width: "160",
          },
          {
            label: "分成类型",
            prop: "orderType",
            scope: "type",
            values: {
              1: "完单分成",
              2: "退款扣除",
            },
          },
          { label: "订单金额", prop: "orderPrice", scope: "formatPrice" },
          { label: "税前佣金", prop: "pretaxBrokerage", scope: "formatPrice" },
          {
            label: "应付分成",
            prop: this.type == 1 ? "divideCompanyMoney" : "divideSellerMoney",
            scope: "formatPrice",
          },
        ];
        console.log(tableSet,789)
        if (this.type == 1) {
          tableSet.splice(3, 2);
        }
        return tableSet;
      } else {
        return [
          {
            label: "订单日期",
            prop: "createTime",
            width: "160",
            scope: "time",
          },
          { label: "订单号", prop: "orderSn", width: "200" },
          { label: "业务员", prop: "createUsername", width: "80" },
          { label: "业务号", prop: "createNo", width: "80" },
          { label: "下单企业", prop: "purchaseOrg", width: "130" },
          {
            label: "业务类型",
            prop: "businessList",
            scope: "businessList",
            width: "160",
          },
          {
            label: "支付方式",
            prop: "payType",
            scope: "type",
            values: {
              1: "微信",
              2: "支付宝",
              3: "金币",
              4: "现金",
              5: "网银支付",
              6: "协议",
              7: "对公转账",
            },
          },
          { label: "税前佣金", prop: "pretaxBrokerage", scope: "formatPrice" },
          { label: "佣金税占比", prop: "pretax", scope: "pretax" },
          { label: "结算佣金", prop: "brokerage", scope: "formatPrice" },
        ];
      }
    },
    setLen() {
      return this.tableSet.length;
    },
  },
};
</script>

<style lang="scss" scoped>
#print {
  h3 {
    text-align: center;
  }
  table {
    table-layout: fixed;
  }
  .table1 {
    td {
      vertical-align: top;
      padding-left: 16px;
    }
  }
  td {
    padding: 10px 5px;
    p:first-child {
      font-weight: bold;
    }
  }
  /deep/ .el-step__head.is-success {
    color: #000;
    border-color: #000;
  }
  /deep/ .el-step__title.is-success {
    color: #000;
  }
}
.table2 {
  td {
    text-align: center;
    word-break: break-all;
  }
}
</style>