<!--
 * @Descripttion: 
 * @version: 
 * @Author: auth
 * @Date: 2022-06-22 11:06:33
 * @LastEditors: auth
 * @LastEditTime: 2022-06-22 15:03:58
-->

# 组件名（以my-开头）
>my-prints-打印导出pdf组件
```
<template>
  <div>
    <el-button @click="handlePreview">导出</el-button>
    <my-prints ref="printRef" :printConfig="print"></my-prints>
  </div>
</template>
<script>
import myPrints from "src/packages/prints/src/my-prints.vue";
import { dataList } from "./PrintPdfConfig";
export default {
  components: { myPrints },
  data() {
    return {
      print: {
        dialog: {
          title: "导出预览",
          visible: false,
          dialogWidth: "85%"
        },
        title: "服务需求汇总",
        topConfig: {
          // 表单对应的名称：规则key与formValue的key相对应
          formLabel: {
            isMorePlanning: "是否汇总多个计划",
            demandCode: "汇总编号",
            applicationType: "申请类别",
            planCode: "计划编号",
            consignee: "收货人",
            typeNeeds: "需求类型",
            engineerName: "工程名称",
            engineerCode: "工程编号",
            isSpecialProject: "是否专项立项"
          },
          formValue: {
            isMorePlanning: "否",
            demandCode: "demandCodedemandCodedemandCoded",
            applicationType: "申请类别申请类别申请类别",
            planCode: "planCodeplanCodeplanCodeplanCod",
            consignee: "收货人收获",
            typeNeeds: "工程服务采购",
            engineerName:
              "工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称工程名称等哈看了大量",
            engineerCode: "engineerCodeengineerCodeengineerCod",
            isSpecialProject: "是"
          }
        },
        tableConfig: {
          config: {
            data: [],
            column: [
              {
                prop: "planCode",
                label: "计划编号",
                showOverflowTooltip: false
              },
              {
                prop: "applicationCategory",
                label: "申请类别",
                // width: 36,
                showOverflowTooltip: false
              },
              {
                prop: "demandType",
                label: "需求类型",
                // width: 64,
                showOverflowTooltip: false
              },
              {
                prop: "engineeringName",
                label: "工程名称",
                width: 190,
                showOverflowTooltip: false
              },
              {
                prop: "engineeringCode",
                label: "工程编号",
                showOverflowTooltip: false
              },
              {
                prop: "planApplicationUserName",
                label: "计划申请人",
                // width: 60,
                showOverflowTooltip: false
              },
              {
                prop: "applicationReason",
                label: "申请原因",
                showOverflowTooltip: false
              },
              {
                prop: "serviceMaterialName",
                label: "名称",
                // width: 150,
                showOverflowTooltip: false
              },
              {
                prop: "serviceMaterialDescribe",
                label: "描述",
                showOverflowTooltip: false
              },
              {
                prop: "materialUnit",
                label: "单位",
                // width: 45,
                showOverflowTooltip: false
              },
              {
                prop: "applicationNum",
                label: "申请数量",
                // width: 64,
                showOverflowTooltip: false
              },
              {
                prop: "unitPrice",
                label: "单价",
                valueType: "money",
                // width: 64,
                showOverflowTooltip: false
              },
              {
                prop: "sum",
                label: "金额",
                valueType: "money",
                // width: 64,
                showOverflowTooltip: false
              },
              {
                prop: "note",
                label: "备注",
                width: 150,
                showOverflowTooltip: false
              }
            ]
          }
        },
        footConfig: {
          list: {
            // 批准人
            approver: {
              show: true, //是否显示
              labelName: "批准",
              keyName: "userName", // 姓名
              time: "endTime", // 日期
              fullMsg: "审批",
              taskName: "物流部采购员采购"
            },
            auditor: {
              show: true, //是否显示
              labelName: "审核",
              keyName: "userName", // 姓名
              time: "endTime", // 日期
              fullMsg: "同意",
              taskName: "经理"
            },
            applicant: {
              show: true, //是否显示
              labelName: "填写人",
              keyName: "userName", // 姓名
              time: "endTime", // 日期
              fullMsg: "提交",
              taskName: "提交"
            }
          },
          data: [
            {
              taskId: "e5bbcd97-e1a0-11ec-bfd5-0a580a8300f5",
              userId: "b6e76a00-fbd4-4d15-b4af-fb97f7dbaa56",
              userName: "杨秀",
              userUrl: null,
              processInstanceId: "e5bba67e-e1a0-11ec-bfd5-0a580a8300f5",
              message: "提交申请。",
              time: "2022-06-01 19:49:31",
              type: "TJ",
              typeName: "提交",
              taskName: "提交人",
              fullMsg: "提交申请。",
              actName: null,
              startTime: "2022-06-01 19:49:30",
              endTime: "2022-06-01 19:49:31"
            },
            {
              taskId: "e6009ecf-e1a0-11ec-bfd5-0a580a8300f5",
              userId: "fae2b825-a273-4d41-8d2b-66bf72950831",
              userName: "杨秀一",
              userUrl: null,
              processInstanceId: "e5bba67e-e1a0-11ec-bfd5-0a580a8300f5",
              message: "同意",
              time: "2022-06-01 19:49:41",
              type: "SP",
              typeName: "审批",
              taskName: "综合部经理审批",
              fullMsg: "同意",
              actName: null,
              startTime: "2022-06-01 19:49:31",
              endTime: "2022-06-02 19:49:41"
            },
            {
              taskId: "ec72b4bd-e1a0-11ec-bfd5-0a580a8300f5",
              userId: "fae2b825-a273-4d41-8d2b-66bf72950831",
              userName: "杨秀一",
              userUrl: null,
              processInstanceId: "e5bba67e-e1a0-11ec-bfd5-0a580a8300f5",
              message: "同意",
              time: "2022-06-01 19:49:47",
              type: "SP",
              typeName: "审批",
              taskName: "分管领导审批",
              fullMsg: "同意",
              actName: null,
              startTime: "2022-06-01 19:49:41",
              endTime: "2022-06-03 19:49:47"
            },
            {
              taskId: "ec72b4bd-e1a0-11ec-bfd5-0a580a8300f5",
              userId: "fae2b825-a273-4d41-8d2b-66bf72950831",
              userName: "杨秀一",
              userUrl: null,
              processInstanceId: "e5bba67e-e1a0-11ec-bfd5-0a580a8300f5",
              message: "不同意",
              time: "2022-06-01 19:49:47",
              type: "SP",
              typeName: "审批",
              taskName: "综合部经理审批",
              fullMsg: "不同意",
              actName: null,
              startTime: "2022-06-01 19:49:41",
              endTime: "2022-06-04 19:49:47"
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.print.tableConfig.data = dataList;
  },
  methods: {
     // 调用事件
    handlePreview() {
      console.log("print", this.$refs);
      this.$refs.printRef.showPreview();
    }
  }
};
</script>


```

### **printConfig-Attributes**
属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
printConfig|数据源|Object|-|title: "导出报表", topConfig: {}, tableConfig: { config: { data: [], column: [] } }, footConfig: {}
dialog|弹窗属性选择，当printConfig不传dialog相关配置时默认内置属性|Object|-|{ title: "导出预览", visible: false, dialogWidth: "85%"}
||||

### **printConfig-child-Attributes**
>printConfig有的属性：title,topConfig,tableConfig,footConfig

属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
title|导出报表的标题|String|-|导出报表
topConfig|顶部的表单配置项，与myForms.form一致|Object|-|-
tableConfig|中间清单表格配置项，与myTables配置一致|Object|-|{config:{data:[],column:[{类似myForms表单配置项}]}}
footConfig|底部落款人配置项|Object|-|{list：{类型}, data:[数据项]]}
||||

### **printConfig-footConfig-list-Attributes**
```
// 举例审批：approver
 approver: {
    show: true, //是否显示
    labelName: "批准",
    keyName: "userName", // 姓名
    timeName: "endTime", // 日期
    fullMsg: "审批",
    taskName: "物流部采购员采购"
},
```

属性|说明|类型|可选值|默认值
:-|:-|:-|:-|:-
show|是否显示|Boolean|true/false|-
labelName|落款人的类型|String|批准/审核/填写人|批准：
keyName|落款人用户名的key，用于与data数据里匹配的key|String|-|userName
timeName|落款人提交时间的key，用于与data数据里匹配的key|String|-|endTime
fullMsg|落款人审批意见，用于匹配data的数据项，与data的fullMsg值一致|String|审批/同意/提交|-
taskName|落款人审批意见，用于过滤data的数据项，与落款人进行模糊匹配数据项，与data的fullMsg值一致|String|提交/提交人/物流部采购员采购/经理等|-
||||


### **events**
事件|说明|回调参数
:-|:-|:-
handlePreview|调起弹窗事件，通过$refs调起即可|-
closePreview|关闭弹窗事件|-
formatDateCn|将日期转化为中文格式年月日，内置事件转换|targetDate：日期时间
handleToPrint|打印事件，内置事件|-
||

### **slot**
name|说明
:-|:-
modal-body| 具名插槽，可自定义表单内容
modal-footer| 具名插槽，可自定义表单按钮
|
