feat : 打印

2024-08-03 20:55:26 +08:00
parent 5111897d13
commit 2634e9b70c
7 changed files with 143 additions and 28 deletions
--- a/package.json
+++ b/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"
--- a/src/components/NameCircle.vue
+++ b/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>
--- a/src/main.js
+++ b/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')
--- a/src/views/workflow/common/OperationRender.vue
+++ b/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>
--- a/src/views/workflow/common/TimeLineItem.vue
+++ b/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>
--- a/src/views/workflow/process/config/ApprovalNodeConfig.vue
+++ b/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"},
 ])
--- a/src/views/workflow/process/nodes/ApprovalNode.vue
+++ b/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":