cmc-oa/oa-ui/src/views/flowable/form/components/print/settlePrint.vue

<template>
  <div>
    <div id="printArea">
      <h2 class="text-center title">生产项目委托管理结算清单</h2>
      <table border="1">
        <tr v-if="chooseProject">
          <td :colspan="2" class="fontbold">项目名称</td>
          <td :colspan="4">{{ chooseProject.projectName }}</td>
          <td :colspan="2" class="fontbold">项目编号</td>
          <td :colspan="2">{{ chooseProject.projectNumber }}</td>
        </tr>
        <tr v-if="chooseProject">
          <td :colspan="2" class="fontbold">承担部门</td>
          <!-- <td :colspan="4">{{ undertakingDept.join('，') }}</td> -->
          <td :colspan="4">{{ chooseProject.undertakingDeptName }}</td>
          <td :colspan="2" class="fontbold">项目负责人</td>
          <td :colspan="2">{{ chooseProject.projectLeaderUser ? chooseProject.projectLeaderUser.nickName : "" }}</td>
        </tr>
        <tr v-if="!chooseProject">
          <td :colspan="2" class="fontbold">其他项目名称</td>
          <td :colspan="8">{{ form.xmName }}</td>
        </tr>
        <tr>
          <td :colspan="10" class="header bg">测绘项目完成工作量及费用计算</td>
        </tr>
        <tr>
          <td class="fontbold">序号</td>
          <td class="fontbold" style="min-width:250px;">工作内容</td>
          <td class="fontbold" style="min-width:50px;">比例尺或等级</td>
          <td class="fontbold" style="min-width:50px;">单位</td>
          <td class="fontbold" style="min-width:50px;">工作量</td>
          <td class="fontbold" style="min-width:80px;">地类</td>
          <td class="fontbold" style="min-width:50px;">单价(元)</td>
          <td class="fontbold" style="min-width:50px;">系数</td>
          <td class="fontbold" style="min-width:80px;">结算经费（元）</td>
          <td class="fontbold" style="width:280px;">备注</td>
        </tr>
        <tr v-for="(work, index) in workList">
          <td>{{ index + 1 }}</td>
          <td style="text-align: left;">{{ work.content }}</td>
          <td>{{ work.scale }}</td>
          <td>{{ work.unit }}</td>
          <td>{{ work.workload }}</td>
          <td>{{ work.groundType == "0" ? "一般地类" : "复杂地类" }}</td>
          <td>{{ work.price }}</td>
          <td>{{ work.coefficient }}</td>
          <td style="text-align: right;">{{ (work.settle).toFixed(2) }}</td>
          <td style="text-align: left;">{{ work.remark }}</td>
        </tr>
        <tr>
          <td :colspan="8" class="header">结算费用合计</td>
          <td :colspan="1" style="text-align: right;">{{ (settleSum.amount).toFixed(2) }}</td>
        </tr>
        <tr>
          <td :colspan="10" class="header bg">扣除项小计</td>
        </tr>
        <tr>
          <td class="fontbold">序号</td>
          <td :colspan="3" class="fontbold">扣除内容</td>
          <td :colspan="3" class="fontbold">扣除金额</td>
          <td :colspan="3" class="fontbold">备注</td>
        </tr>
        <tr v-for="(ded, index) of deductionsList">
          <td>{{ index + 1 }}</td>
          <td :colspan="3">{{ ded.content }}</td>
          <td :colspan="3" style="text-align: right;">{{ (ded.amount).toFixed(2) }}</td>
          <td :colspan="3" style="text-align: left;">{{ ded.remark }}</td>
        </tr>
        <tr>
          <td :colspan="10" class="header bg">部门结算小计</td>
        </tr>
        <tr>
          <td class="fontbold">序号</td>
          <td :colspan="3" class="fontbold">部门名称</td>
          <td :colspan="3" class="fontbold">结算金额</td>
          <td :colspan="3" class="fontbold">备注</td>
        </tr>
        <tr v-for="(dept, index) of deptSettleList">
          <td>{{ index + 1 }}</td>
          <td :colspan="3">{{ dept.content }}</td>
          <td :colspan="3" style="text-align: right;">{{ (dept.amount).toFixed(2) }}</td>
          <td :colspan="3" style="text-align: left;">{{ dept.remark }}</td>
        </tr>
        <tr>
          <td :colspan="4" class="header">实际结算总金额</td>
          <td :colspan="3" style="text-align: right;">{{ actualSumSettle.toFixed(2) }}</td>
        </tr>
        <!-- 分页就加入样式 style="page-break-after: always;" -->
        <tr>
          <td :colspan="4" class="header">结算说明</td>
          <td :colspan="6" style="text-align: left;">{{ form.settleComment }}</td>
        </tr>
        <tr>
          <td :colspan="10" class="header bg">审核情况</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">综合事务部(设备领用情况)</td>
          <td :colspan="4" class="conment-width" style="text-align: left;">{{ form.zhComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.zhUserId) }}</span></td>
          <td :colspan="2" style="text-align:left;width:120px;">日期：{{ form.zhTime }}</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">综合事务部(车辆排班情况)</td>
          <td :colspan="4" class="conment-width" style="text-align: left;">{{ form.jsbComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.jsbUserId) }}</span></td>
          <td :colspan="2" style="text-align:left;width:120px;">日期：{{ form.jsbTime }}</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">技术质量与安全部(质量及工作量)</td>
          <td :colspan="4" class="conment-width" style="text-align: left;">{{ form.jsComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.jsUserId) }}</span></td>
          <td :colspan="2" style="text-align:left;width:120px;">日期：{{ form.jsTime }}</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">经营发展部(校核)</td>
          <td :colspan="4" class="conment-width" style="text-align: left;">{{ form.jyComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.jyUserId) }}</span></td>
          <td :colspan="2" style="text-align:left;width:120px;">日期：{{ form.jyTime }}</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">分管领导(审核)</td>
          <td :colspan="4" class="conment-width" style="text-align: left;">{{ form.managerComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.managerUserId) }}</span></td>
          <td :colspan="2" style="text-align:left;width:120px;">日期：{{ form.managerTime }}</td>
        </tr>
        <tr>
          <td :colspan="2" class="fontbold">总经理(审批)</td>
          <td :colspan="4" class="conment-width" style="text-align: left;">{{ form.gmComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.gmUserId) }}</span></td>
          <td :colspan="2" style="text-align:left;width:120px;">日期：{{ form.gmTime }}</td>
        </tr>
        <tr v-if="form.dszTime">
          <td :colspan="2" class="fontbold">董事长（批准）</td>
          <td :colspan="4" class="conment-width" style="text-align: left;">{{ form.dszComment }}</td>
          <td :colspan="2" style="text-align:left;min-width:120px;">签名：<span class="auditor">{{
            getUserName(form.dszUserId) }}</span></td>
          <td :colspan="2" style="text-align:left;width:120px;">日期：{{ form.dszTime }}</td>
        </tr>
      </table>
    </div>
    <div class="text-center mt20">
      <el-button type="primary" v-print="print">确认打印</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object
    },
    chooseProject: {
      type: Object
    },
    workList: {
      type: Array
    },
    settleList: {
      type: Array
    }
  },
  watch: {
    settleList(val) {
      this.initTable();
    }
  },
  data() {
    return {
      settleSum: {},
      deptSettleList: [],
      deductionsList: [],
      actualSumSettle: 0,
      undertakingDept: [],
      print: {
        id: 'printArea',
        popTitle: '结算表单', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() { }, // 开启打印前的回调事件
        openCallback() { }, // 调用打印之后的回调事件
        closeCallback() { }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      }
    }
  },
  mounted() {
    this.initTable()
  },
  methods: {
    initTable() {
      this.deductionsList = []  //扣除列表
      this.deptSettleList = []  //部门分配列表
      for (let s of this.settleList) {
        if (s.tableNumber == '0') {
          this.deductionsList.push(s)
        } else if (s.tableNumber == '1' && s.content != '实际结算总金额') {
          this.deptSettleList.push(s)
        } else if (s.tableNumber == '2') {
          this.settleSum = s
        } else {
          this.actualSumSettle = s.amount
        }
      }
      if (this.chooseProject) {
        this.print.popTitle = this.chooseProject.projectName + '结算表单'
      } else {
        this.print.popTitle = this.form.xmName + '结算表单'
      }
      this.calculateActualSumSettle()
    },
    calculateActualSumSettle() {
      let sum = 0;
      let arr = this.deductionsList;
      for (let a of arr) {
        sum = sum + Number(a.amount);
      }
      this.actualSumSettle = Number(this.settleSum.amount) - sum;
    },
  }
}
</script>

<style lang="scss" scoped>
table {
  /*边框*/
  /* border: 1px solid black; */
  width: 90%;
  text-align: center;
  border-collapse: collapse;
  margin: 0 auto;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 5px;
    // line-height: 30px;
  }
}

.header {
  font-family: '黑体';
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
}

.bg {
  background-color: #eee;
  -webkit-print-color-adjust: exact;
}

.title {
  font-family: '黑体';
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.fontbold {
  font-weight: bold;
}

.conment-width {
  // max-width: 200px;
}


@page {
  size: auto;
  /* 去除页脚 */
  margin-bottom: 0;
  // 横向A4
  // size:A4 landscape;
}

@media print {
  #print table {
    width: 100%;
  }
}
</style>