feat : 打印

package.json

@@ -33,6 +33,7 @@
     "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.1.6",
     "vue3-pdf-app": "^1.0.3",
+    "vue3-print-nb": "^0.1.4",
     "vuedraggable": "^4.1.0",
     "xlsx": "^0.18.5",
     "xlsx-style-vite": "^0.0.2"

src/components/NameCircle.vue

@@ -6,9 +6,9 @@
         <Tooltip :content="user.name" placement="bottom-start" width="45px"/>
         <div v-if="user.icon"
              class="el-timeline-item__node" :style="{
-                      backgroundColor: user.color
+                      backgroundColor: '#fff'
                     }">
-          <el-icon v-if="user.icon" size="15" :class="user.class">
+          <el-icon v-if="user.icon" size="15" :color="user.color" :class="user.class">
             <component :is="user.icon"/>
           </el-icon>
         </div>
@@ -18,7 +18,6 @@
 </template>
 
 <script setup>
-import {Loading, Close, CircleCheckFilled, MoreFilled} from '@element-plus/icons-vue'
 
 const props = defineProps({
   row: {
@@ -36,7 +35,11 @@ const props = defineProps({
   mode: {
     type: String,
     default: 'design'
-  }
+  },
+  type: {
+    type: String,
+    default: ''
+  },
 })
 
 const init = () => {
@@ -49,27 +52,31 @@ const initUser = (user) => {
   let state = user.state
   //创建节点
   if (state === 'CREATE') {
-    user["icon"] = CircleCheckFilled
+    user["icon"] = 'CircleCheckFilled'
     user["color"] = "#0bbd87"
   }
   //审批通过
   if (state === 'AGREE' || state === 'AUTO_PASS') {
-    user["icon"] = CircleCheckFilled
+    user["icon"] = 'CircleCheckFilled'
     user["color"] = "#0bbd87"
   }
+  if (props.type === "CC") {
+    user["icon"] = "Promotion"
+    user["color"] = "#3395f8"
+  }
   //审批处理中
   if (state === 'RUNNING') {
-    user["icon"] = Loading
+    user["icon"] = 'Loading'
     user["color"] = "#f78f5f"
     user["class"] = 'is-loading'
   }
   //拒绝后评论
   if (state === 'REFUSE') {
-    user["icon"] = Close
+    user["icon"] = 'Close'
     user["color"] = "#f56c6c"
   }
   if (state === 'PASS') {
-    user["icon"] = MoreFilled
+    user["icon"] = 'MoreFilled'
     user["color"] = "#c0c4cc"
   }
   return user;
@@ -95,6 +102,7 @@ init()
     position: relative;
     background-color: #8a7243;
     color: #fff;
+
     .el-timeline-item__node {
       position: absolute;
       bottom: 0;
@@ -103,5 +111,19 @@ init()
   }
 
 
+}
+@media print {
+  /* 打印时应用的样式 */
+  .el-checkbox.is-checked .el-checkbox__inner .svg-icon {
+    background-color: #f5f7fa !important;
+    border-color: #409eff !important;
+  }
+  .el-checkbox__inner::after {
+    /* 设置选中的checkbox符号颜色 */
+    color: #409eff !important;
+  }
+  //.el-icon {
+  //  color: rgba(0, 0, 0, 1) !important;
+  //}
 }
 </style>

src/main.js

@@ -19,6 +19,9 @@ import 'vite-plugin-svg-icons/register'
 import '@/assets/styles/index.scss'
 import '@/assets/styles/sidebar.scss'
 import '@/assets/styles/echartsEditor.scss'
+//引入
+import print from 'vue3-print-nb'
+//挂载
 
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -29,5 +32,5 @@ app.use(createPinia())
 app.use(router)
 app.directive('perm',hasPerm)
 app.directive('tabh',fixedHeight)
-
+app.use(print)
 app.mount('#app')

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 {
+@media print {
-  //  width: 90px;
+  :deep .el-timeline-item__node--large > .el-icon {
-  //  text-align: center;
+    color: rgba(0, 0, 0, 1) !important;
-  //  //padding-top: 2px;
+  }
-  //  //text-align: center;
-  //  text-overflow: ellipsis;
-  //  white-space: nowrap;
-  //  overflow: hidden
-  //}
 }
 </style>

src/views/workflow/common/TimeLineItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <li :class="[ns.b(), { [ns.e('center')]: center }]">
+    <div :class="ns.e('tail')" />
+    <div
+        v-if="!$slots.dot"
+        :class="defaultNodeKls"
+        :style="{
+        backgroundColor: color,
+      }"
+    >
+      <el-icon v-if="icon" :class="ns.e('icon')" backgroundColor: color>
+        <component :is="icon" />
+      </el-icon>
+    </div>
+    <div v-if="$slots.dot" :class="ns.e('dot')">
+      <slot name="dot" />
+    </div>
+
+    <div :class="ns.e('wrapper')">
+      <div
+          v-if="!hideTimestamp && placement === 'top'"
+          :class="[ns.e('timestamp'), ns.is('top')]"
+      >
+        {{ timestamp }}
+      </div>
+
+      <div :class="ns.e('content')">
+        <slot />
+      </div>
+
+      <div
+          v-if="!hideTimestamp && placement === 'bottom'"
+          :class="[ns.e('timestamp'), ns.is('bottom')]"
+      >
+        {{ timestamp }}
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
+import { timelineItemProps } from './timeline-item'
+
+defineOptions({
+  name: 'ElTimelineItem',
+})
+
+const props = defineProps(timelineItemProps)
+
+const ns = useNamespace('timeline-item')
+const defaultNodeKls = computed(() => [
+  ns.e('node'),
+  ns.em('node', props.size || ''),
+  ns.em('node', props.type || ''),
+  ns.is('hollow', props.hollow),
+])
+</script>

src/views/workflow/process/config/ApprovalNodeConfig.vue

@@ -102,6 +102,7 @@
     <!--        <i class="el-icon-question" style="margin-left: 10px; font-size: medium; color: #b0b0b1"></i>-->
     <!--      </el-tooltip>-->
     <!--    </el-form-item>-->
+    <span v-if="nodeProps.assignedType!=='PROJECT_LEADER'">
     <span v-if="nodeProps.assignedType !== 'SUB_LEADER'">
     <el-form-item label="是否使用矩阵审批" prop="matrixApproval">
       <el-switch inactive-text="不用" active-text="使用" v-model="nodeProps.matrixApproval"></el-switch>
@@ -129,6 +130,8 @@
       <el-switch inactive-text="不审批" active-text="审批" v-model="nodeProps.president"></el-switch>
     </el-form-item>
     </span>
+    </span>
+
     <!--    <el-form-item label="重复跳过" prop="duplicateApproval">-->
     <!--      <el-switch inactive-text="否" active-text="是"-->
     <!--                 v-model="nodeProps.duplicateApproval"></el-switch>-->
@@ -273,6 +276,7 @@ const approvalTypes = reactive([
   {name: "发起人自己", type: "SELF"},
   {name: "下属企业领导", type: "SUB_LEADER"},
   {name: "下属企业科创部对接人", type: "DSTI_CONTACT_PERSON"},
+  {name: "项目负责人", type: "PROJECT_LEADER"},
   // {name: "表单内联系人", type: "FORM_USER"},
   // {name: "矩阵审批", type: "MATRIX_APPROVAL"},
 ])

src/views/workflow/process/nodes/ApprovalNode.vue

@@ -71,10 +71,10 @@ const content = computed(() => {
       return '科创部用户跳过'
     case "NO_USER_SKIP":
       return '无用户审批,跳过'
-    case "DSTI_CONTACT_PERSON":
-      return '下属企业科创部对接人'
     case "SUB_LEADER":
       return '下属企业领导'
+    case "PROJECT_LEADER":
+      return '项目负责人'
     case "SELF_SELECT":
       return config.selfSelect.multiple ? '发起人自选多人' : '发起人自选一人'
     case "LEADER_TOP":
@@ -124,6 +124,7 @@ const validate = (err) => {
       case "DSTI_CONTACT_PERSON":
       case "SUB_LEADER":
       case "LEADER_TOP":
+      case "PROJECT_LEADER":
         showError.value = !validate_LEADER_TOP(err);
         break;
       case "LEADER":