fix : 修改打印范围, 详情增加项目实施模块

src/components/steps/index.vue

@@ -1,37 +1,38 @@
 <template>
-  <div style="padding: 0 30px">
-
-  <baseTitle title="项目基本信息"></baseTitle>
-  <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">
-      <el-step
-          v-for="(item, index) in localSteps"
-          :key="item.key"
-          :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'"
-                   v-if="localStepSuccess.includes(index)">
-            <SuccessFilled/>
-          </el-icon>
-          <el-icon style="font-size: 20px; color: gray;" v-else>
-            <WarningFilled/>
-          </el-icon>
-        </template>
-      </el-step>
-    </el-steps>
-  </div>
-  <!-- 步骤内容 -->
-  <div>
-    <slot name="content" :localActive="localActive"></slot>
-    <!-- <template v-for="(item, index) in stepList" :key="item.key">
-      <component v-if="localActive == index" v-bind="item.props || {}" :is="item.component" />
-    </template> -->
-  </div>
+  <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">
+        <el-step
+            v-for="(item, index) in localSteps"
+            :key="item.key"
+            :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'"
+                     v-if="localStepSuccess.includes(index)">
+              <SuccessFilled/>
+            </el-icon>
+            <el-icon style="font-size: 20px; color: gray;" v-else>
+              <WarningFilled/>
+            </el-icon>
+          </template>
+        </el-step>
+      </el-steps>
+    </div>
+    <!-- 步骤内容 -->
+    <div>
+      <slot name="content" :localActive="localActive"></slot>
+      <!-- <template v-for="(item, index) in stepList" :key="item.key">
+        <component v-if="localActive == index" v-bind="item.props || {}" :is="item.component" />
+      </template> -->
+    </div>
   </div>
 </template>
 
@@ -66,7 +67,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)
@@ -83,6 +84,10 @@ const localSteps = ref([
     title: '项目立项',
     key: 'approve',
   },
+  {
+    title: '项目实施',
+    key: 'implement',
+  },
   {
     title: '项目验收',
     key: 'execute',
@@ -96,10 +101,8 @@ const localSteps = ref([
   //   key: 'end',
   // },
 ])
-
 const baseForm = ref()
 const baseFormData = ref([])
-
 const schema = computed(() => {
   return [
     // {
@@ -326,11 +329,42 @@ const schema = computed(() => {
     }
   ]
 })
-
 const localStepSuccess = ref([])
+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 handlePrint=(print)=>{
+  emits('openPrint',print)
+}
 // 格式化详情步骤条
 const formatProcedure = (data) => {
+  console.info("🚀 ~method:formatProcedure -----", data)
   let arr = []
   if (data instanceof Array) {
     data.forEach(item => {
@@ -342,12 +376,15 @@ const formatProcedure = (data) => {
           case '20':
             arr.push(1)
             break
-          case '40':
+          case '30':
             arr.push(2)
             break
-          case '50':
+          case '40':
             arr.push(3)
             break
+          case '50':
+            arr.push(4)
+            break
         }
       } else {
         switch (item) {
@@ -360,12 +397,15 @@ const formatProcedure = (data) => {
           case '20':
             arr.push(2)
             break
-          case '40':
+          case '30':
             arr.push(3)
             break
-          case '50':
+          case '40':
             arr.push(4)
             break
+          case '50':
+            arr.push(5)
+            break
         }
       }
 
@@ -413,12 +453,13 @@ const formatReProcedure = (data) => {
         case 2:
           arr.push('20')
           break
-          // case 3: arr.push('30')
-          //   break
         case 3:
-          arr.push('40')
+          arr.push('30')
           break
         case 4:
+          arr.push('40')
+          break
+        case 5:
           arr.push('50')
           break
       }
@@ -437,9 +478,9 @@ const formatActive = (val) => {
   newVal == 0 && (active = '00')
   newVal == 1 && (active = '10')
   newVal == 2 && (active = '20')
-  // val == 3 && (active = '30')
-  newVal == 3 && (active = '40')
-  newVal == 4 && (active = '50')
+  newVal == 3 && (active = '30')
+  newVal == 4 && (active = '40')
+  newVal == 5 && (active = '50')
   return active
 }
 
@@ -463,9 +504,12 @@ const handleStep = (key, index) => {
           active = '20'
           break
         case 2:
-          active = '40'
+          active = '30'
           break
         case 3:
+          active = '40'
+          break
+        case 4:
           active = '50'
           break
       }
@@ -481,9 +525,12 @@ const handleStep = (key, index) => {
           active = '20'
           break
         case 3:
-          active = '40'
+          active = '30'
           break
         case 4:
+          active = '40'
+          break
+        case 5:
           active = '50'
           break
       }
@@ -504,11 +551,18 @@ const getBaseInfo = async () => {
   try {
     const {code, data} = await getBaseInfoApi(route.query.projectId)
     // console.log('data.procedure', data.procedure, route.query.step)
-    if (route.query.step === '40') {
-      if (data.procedure.indexOf('40') == -1) {
+    if (route.query.step === '30'||route.query.step === '40') {
+      if (data.procedure.indexOf('30') == -1||data.procedure.indexOf('40') == -1) {
+        data.procedure.push('30')
         data.procedure.push('40')
       }
-    } else if (route.query.step === '50') {
+    }
+        // else if (route.query.step === '40') {
+        //   if (data.procedure.indexOf('40') == -1) {
+        //     data.procedure.push('40')
+        //   }
+    // }
+    else if (route.query.step === '50') {
       if (data.procedure.indexOf('50') == -1) {
         data.procedure.push('50')
       }