fix : 修改打印范围

src/components/steps/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <div style="padding: 0 30px">
-
-  <baseTitle title="项目基本信息"></baseTitle>
+  <div style="padding: 0 30px" id="printBox">
+    <div style="display: flex;justify-content: space-between">
+      <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>