fix : 详情修改为一个文件上传入口及测试校验,同步移动端详情展示

src/views/project-management/mobledetail/StepsMoblie.vue

@@ -1,31 +1,35 @@
 <template>
-  <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 :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)"
+ <div id="printBox">
+   <div style="display: flex;justify-content: space-between">
+     <baseTitle title="项目基本信息"></baseTitle>
+     <el-button v-print="print"  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 :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>
 
-      >
-        <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>
+     <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>
 
 <script setup lang="jsx">
@@ -57,7 +61,34 @@ const props = defineProps({
     default: ''
   }
 })
-
+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 route = useRoute()
 
 const emits = defineEmits(['stepChange', 'setDetail'])
@@ -79,6 +110,10 @@ const localSteps = ref([
     title: '项目立项',
     key: 'approve',
   },
+  {
+    title: '项目实施',
+    key: 'implement',
+  },
   {
     title: '项目验收',
     key: 'execute',
@@ -279,7 +314,7 @@ const schema = computed(() => {
     //   }
     // },
     {
-      label: '所属专项资金项目',
+      label: '所属专项资金',
       prop: 'specialFund',
       colProps: {
         span: 24
@@ -303,9 +338,12 @@ const schema = computed(() => {
 })
 
 const localStepSuccess = ref([])
-
+const handlePrint=(print)=>{
+  emits('openPrint',print)
+}
 // 格式化详情步骤条
 const formatProcedure = (data) => {
+  console.info("🚀 ~method:formatProcedure -----", data)
   let arr = []
   if (data instanceof Array) {
     data.forEach(item => {
@@ -317,12 +355,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) {
@@ -335,12 +376,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
         }
       }
 
@@ -388,9 +432,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
 }
 
@@ -414,9 +458,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
       }
@@ -432,9 +479,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
       }
@@ -448,6 +498,7 @@ const handleStep = (key, index) => {
     type: 'warning'
   })
 }
+
 //匹配字典值,返回对应值的字典标签
 const filterDict = (data, value) => {
   if (data === undefined || value === undefined) return;
@@ -478,8 +529,11 @@ 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.push('30')
+      }
+      if (data.procedure.indexOf('40') == -1) {
         data.procedure.push('40')
       }
     }else if(route.query.step==='50'){
@@ -504,7 +558,13 @@ watchEffect(() => {
 })
 watchEffect(() => {
   if (props.reportType === 'direct') {
-    localSteps.value = localSteps.value.slice(1)
+    let steps = []
+    for (const step of localSteps.value) {
+      if (step.key !== 'collect') {
+        steps.push(step)
+      }
+    }
+    localSteps.value = steps
   }
 })
 </script>