feat : 打印

src/views/workflow/common/OperationRender.vue

@@ -1,5 +1,8 @@
 <template>
-  <div style="margin: 10px">
+  <div>
+    <el-button v-print="print"> 打印</el-button>
+  </div>
+  <div style="margin: 10px" id="printBox">
     <el-timeline>
       <el-timeline-item v-for="(operation,index) in operationList"
                         :key="index" :timestamp="operation.startTime"
@@ -15,7 +18,7 @@
             <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name"
                  :style="{'flex-direction': isColumn?'column':'row'}">
               <div class="avatar-block" :style="{'margin-bottom': isColumn?'10px':'0'}">
-                <name-circle :user="user"/>
+                <name-circle :user="user" :type="operation.operation"/>
                 <div class="name">
                   <div style="display: flex;align-items: center">
                     <el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'"
@@ -86,6 +89,34 @@ const timeline = ref({
   icon: '',
   context: ''
 })
+const print = ref({
+  id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
+  popTitle: '配置页眉标题', // 打印配置页上方的标题
+  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+  preview: false, // 是否启动预览模式，默认是false
+  previewTitle: '预览的标题', // 打印预览的标题
+  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
+  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
+  previewBeforeOpenCallback() {
+    console.log('正在加载预览窗口！');
+  }, // 预览窗口打开之前的callback
+  previewOpenCallback() {
+    console.log('已经加载完预览窗口，预览打开了！')
+  }, // 预览窗口打开时的callback
+  beforeOpenCallback() {
+    console.log('开始打印之前！')
+  }, // 开始打印之前的callback
+  openCallback() {
+    console.log('执行打印了！')
+  }, // 调用打印时的callback
+  closeCallback() {
+    console.log('关闭了打印工具！')
+  }, // 关闭打印的callback(无法区分确认or取消)
+  clickMounted() {
+    console.log('点击v-print绑定的按钮了！')
+  },
+
+})
 
 const init = () => {
   switch (props.state) {
@@ -97,17 +128,17 @@ const init = () => {
       }
       break
     case '4':
-      if (props.step != 'report'){
+      if (props.step != 'report') {
         timeline.value = {
           color: '#0bbd87',
           icon: 'CircleCheckFilled',
           context: '审批通过'
         }
-      }else {
+      } else {
         timeline.value = {
           color: '#f78f5f',
           icon: 'MoreFilled',
-          context:'年度计划审批中'
+          context: '年度计划审批中'
         }
       }
       break
@@ -362,20 +393,14 @@ init()
 }
 
 .username {
-  //width: 90px;
   margin-top: 10px;
   background: #f5f5f5;
   padding: 12px;
-  //overflow: hidden;
+}
 
-  //.el-tooltip__trigger {
-  //  width: 90px;
-  //  text-align: center;
-  //  //padding-top: 2px;
-  //  //text-align: center;
-  //  text-overflow: ellipsis;
-  //  white-space: nowrap;
-  //  overflow: hidden
-  //}
+@media print {
+  :deep .el-timeline-item__node--large > .el-icon {
+    color: rgba(0, 0, 0, 1) !important;
+  }
 }
 </style>