fix : 修改打印范围

src/components/DetailComponent/ApprovalDetail.vue

@@ -30,7 +30,7 @@
     <baseTitle v-if="type!='phase'" :title="getTagName(type)+getTitleInfo(data.taskId)"></baseTitle>
     <fvForm :schema="schema" @getInstance="(e)=>form = e" style="margin-left: 15px"></fvForm>
     <el-form :model="formData" label-width="auto" style="margin-top: -15px">
-      <file-component :title="getTagName(type)+'附件'" :tag="getTagName(type)"
+      <file-component :title="getTagName(type)+'附件'" :tag="getTagName(type)" :isOpenPrint="isOpenPrint"
                       v-model:value="formData.fileList" :processViewer="processViewer"
                       :file-list-show="fileListShow"/>
     </el-form>
@@ -164,6 +164,11 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  //是否开始打印
+  isOpenPrint: {
+    type: Boolean,
+    default: false
+  },
   value: {
     type: String,
     default: ''

src/components/DetailComponent/FileComponent.vue

@@ -2,7 +2,8 @@
   <el-form :label-position="labelAlign">
     <el-form-item :label="title?'其他文件':''" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign" :label-width="title?95:''" :style="{marginTop: '10px',marginLeft: tag!=='需求上报'?'15px':'0'}">
       <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
-      <fvTable style="width: 100%;max-height: 160px;" v-if="processViewer"  height="160" :tableConfig="tableConfig"
+<!--      :style="{width:isOpenPrint?'610px': '100%'}"  table-layout="auto"  id="printTable"-->
+      <fvTable style="width:100%;max-height: 160px;" v-if="processViewer"  height="160" :tableConfig="tableConfig"
               :data="_value" :isSettingCol="false" :pagination="false">
         <template #empty>
           <el-empty :image-size="55" description="暂无数据" style="padding: 0"/>
@@ -52,7 +53,12 @@ const props = defineProps({
   fullscreen: {
     type: Boolean,
     default: false
-  }
+  },
+  //是否开始打印
+  isOpenPrint: {
+    type: Boolean,
+    default: false
+  },
 })
 const emit = defineEmits(['update:value'])
 const tableConfig = reactive({
@@ -196,5 +202,10 @@ watch(() => props.processViewer, (newVal) => {
 :deep(.el-table--fit ) {
   height: 160px !important;
 }
+@media print {
+  //#printTable{
+  //  width: 400px!important;
+  //}
 
+}
 </style>

src/components/steps/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <div style="padding: 0 30px">
+  <div style="padding: 0 30px" id="printBox">
-
+    <div style="display: flex;justify-content: space-between">
-  <baseTitle title="项目基本信息"></baseTitle>
+      <baseTitle title="项目基本信息"></baseTitle>
+      <el-button v-print="print" ref color="#ded0b2" icon="Printer" style="margin-top: 15px" @click="handlePrint(print)"> 打印</el-button>
+    </div>
   <fvForm :schema="schema" @getInstance="(e)=>baseForm = e" label-position="left" label-width="left" style="margin-left: 15px"></fvForm>
   <div class="steps-box">
     <el-steps v-if="stepsShow" :active="localActive" finish-status="success">
@@ -11,7 +13,6 @@
           :title="item.title"
           :class="stepClass(index)"
           @click="handleStep(item.key, index)"
-
       >
         <template #icon>
           <el-icon style="font-size: 20px;" :class="index == localActive ? 'is-active' : 'is-end'"
@@ -42,6 +43,35 @@ import {getBaseInfoApi} from './api';
 import {useCacheStore} from '@/stores/cache.js'
 
 import {toThousands} from '@/utils/changePrice.js'
+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('关闭了打印工具！')
+    emits('closePrint')
+  }, // 关闭打印的callback(无法区分确认or取消)
+  clickMounted() {
+    console.log('点击v-print绑定的按钮了！')
+  },
+})
+
 const props = defineProps({
   // 步骤对应内容list
   stepList: {
@@ -66,7 +96,7 @@ const props = defineProps({
 })
 const route = useRoute()
 const cacheStore = useCacheStore()
-const emits = defineEmits(['stepChange', 'setDetail'])
+const emits = defineEmits(['stepChange', 'setDetail','openPrint'])
 const localData = reactive({})
 const localActive = ref(0) // 当前激活步骤
 const stepsShow = ref(false)
@@ -328,7 +358,9 @@ const schema = computed(() => {
 })
 
 const localStepSuccess = ref([])
-
+const handlePrint=(print)=>{
+  emits('openPrint',print)
+}
 // 格式化详情步骤条
 const formatProcedure = (data) => {
   let arr = []
@@ -578,4 +610,5 @@ watchEffect(() => {
 :deep(.el-step__head.is-success) {
   border-color: #A8abb2;
 }
+
 </style>

src/views/workflow/common/OperationRender.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+<!--  <div>-->
-    <el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button>
+<!--    <el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button> id="printBox"-->
-  </div>
+<!--  </div>-->
-  <div style="margin: 10px" id="printBox">
+  <div style="margin: 10px" >
     <el-timeline>
       <el-timeline-item v-for="(operation,index) in operationList"
                         :key="index" :timestamp="operation.startTime"
@@ -104,34 +104,6 @@ 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) {