优化页面交互

package.json

@@ -14,7 +14,7 @@
     "axios": "^1.7.7",
     "element-plus": "^2.8.5",
     "js-cookie": "^3.0.5",
-    "js-pageoffice": "6.3.2",
+    "js-pageoffice": "6.3.1",
     "pinia": "^2.2.4",
     "pinia-plugin-persistedstate": "^4.1.1",
     "unplugin-auto-import": "^0.18.3",

src/api/houseGuaranty.js

@@ -14,6 +14,9 @@ const houseGuaranty = {
     },
     getProcessByDocId(params){
         return request.get(`/house/guaranty/${params}`)
+    },
+    getProcesses(params){
+        return request.get(`/house/guaranty/process/${params}`)
     }
 
 }

src/router/index.js

@@ -1,4 +1,4 @@
-import { createWebHashHistory, createRouter } from 'vue-router'
+import { createWebHistory , createRouter } from 'vue-router'
 
 import Layout from '../layout/index.vue'
 import HomeView from '../views/home/index.vue'
@@ -206,7 +206,7 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 })
 

src/utils/request.js

@@ -22,7 +22,6 @@ service.interceptors.request.use(
       config.headers['token'] = getToken()
     }
     POBrowser.setProxyBaseAPI("/api");
-    //必须。向PageOffice后端请求设置header，支持多次调用setHeader()设置更多的值，具体属性名称和属性值以您实际开发为准。
     POBrowser.setHeader("Authorization", "Bearer " + getToken()); 
     return config
   },

src/views/house/workbench/components/bench.vue

@@ -2,7 +2,7 @@
     <section class="bench-main">
       <router-view v-slot="{ Component }">
         <transition>
-            <component :is="Component" />
+            <component :is="Component"  @getProcessParentId="getProcessParentId"/>
         </transition>
       </router-view>
     </section>
@@ -33,7 +33,9 @@
   
   
     methods:{
-     
+      getProcessParentId(value){
+          this.$emit("getProcessParentId",value);
+      }
   
     }
   }

src/views/house/workbench/components/timeline.vue

@@ -1,34 +1,12 @@
 <template>
     <div class="contrl-bar">
         <el-timeline style="max-width: 600px">
-          <el-timeline-item :timestamp="consignorState?'已完成':'未完成'" placement="top" :color="consignorState?'#ff6154':'#dae1eb'">
+          <el-timeline-item :timestamp="p.state?'已完成':'未完成'" placement="top" :color="p.state?'#ff6154':'#dae1eb'"
+            v-for="(p , index) in processes">
             <el-card shadow="never"  @click="goto('consignor')" class="timeline-card report-item">
-              <h4>委托人信息</h4>
-              <p>更新时间： 2018/4/12 20:46</p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item :timestamp="certificateState?'已完成':'未完成'" placement="top" :color="certificateState?'#ff6154':'#dae1eb'">
-            <el-card shadow="never" @click="goto('certificate')" class="timeline-card report-item">
-              <h4>权属信息</h4>
-              <p>更新时间： 2018/4/3 20:46</p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item :timestamp="baseInfoState?'已完成':'未完成'" placement="top" :color="baseInfoState?'#ff6154':'#dae1eb'">
-            <el-card shadow="never" @click="goto('baseInfo')" class="timeline-card report-item">
-              <h4>项目基本信息</h4>
-              <p>更新时间： 2018/4/2 20:46</p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item :timestamp="assumptionState?'已完成':'未完成'" placement="top" :color="assumptionState?'#ff6154':'#dae1eb'">
-            <el-card shadow="never" @click="goto('assumption')" class="timeline-card report-item">
-              <h4>假设条件</h4>
-              <p>更新时间： 2018/4/2 20:46</p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item :timestamp="entityInfoState?'已完成':'未完成'" placement="top" :color="entityInfoState?'#ff6154':'#dae1eb'">
-            <el-card shadow="never" @click="goto('entityInfo')" class="timeline-card report-item">
-              <h4>实物状况</h4>
-              <p>更新时间： 2018/4/2 20:46</p>
+              <h4>{{ p.name }}</h4>
+              <p v-if="p.state" >更新时间：{{ p.updateDate }}</p>
+              <el-button v-if="p.state" @click="openPageoffice(p.docUrl)">{{ p.name }}.docx 预览</el-button>
             </el-card>
           </el-timeline-item>
         </el-timeline>
@@ -36,41 +14,58 @@
 </template>
 
 <script>
+import houseGuaranty from '@/api/houseGuaranty';
+import { POBrowser } from 'js-pageoffice'
+
 export default {
 
+
   props: {
-     consignorState:{
-        type:Boolean,
-        required:true
-     },
-     certificateState:{
-        type:Boolean,
-        required:true
-     },
-     baseInfoState:{
-        type:Boolean,
-        required:true
-     },
-     assumptionState:{
-        type:Boolean,
-        required:true
-     },
-     entityInfoState:{
-        type:Boolean,
-        required:true
-     },
+     processParentId:{
+      type:Number,
+      required:false,
+     }
+  },
 
+  watch:{
+    processParentId:{
+      handler(nv){
+         this.getProcesses();
+      }
+    }
+  },
+
+
+  created(){
+    
+    this.getProcesses();
   },
 
     data() {
         return {
-           
+           processes:[]
         }
     },
     methods:{
       goto(path) {
         this.$router.push(`/home/houseWorkbench/${path}`)
-      }
+      },
+      getProcesses(){
+        if (this.processParentId){
+          houseGuaranty.getProcesses(this.processParentId).then(res=>{
+          if (res.code === 200){
+              this.processes = res.data;
+            }
+          })
+        }
+      },
+      openPageoffice(fileUrl) {
+            let paramJson={};
+            paramJson.fileName="";
+            paramJson.fileUrl=fileUrl;
+            let paramString=JSON.stringify(paramJson);
+            POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
+        },
     }
  }
 

src/views/house/workbench/consignor.vue

@@ -19,18 +19,17 @@
         </div>
         <SwitchButton :nextPath="nextPath" :nextDo="genarate"></SwitchButton>
         <Steps :stepArray="stepArray" ref="steps" :stepsDialogVisible="stepDialog"></Steps>
-        <el-button @click="openPageoffice">OFFICE</el-button>
     </div>
 </template>
 
 <script>
 import SwitchButton from '../../../components/SwichButton/index.vue'
 import SheetView from '../../../components/SheetView/index.vue'
-import houseGuarantyfrom from '@/api/houseGuaranty';
+import houseGuaranty from '@/api/houseGuaranty';
 import { downloadCollect1 } from '@/api/fileUpload'
 import fileUtil from '@/utils/file'
 import Steps from '../../../components/Steps/index.vue'
-import { POBrowser } from 'js-pageoffice'
+
 export default {
     components: {
         SwitchButton,
@@ -69,7 +68,7 @@ export default {
 
     methods: {
         genConsignorLetter(id) {
-            houseGuarantyfrom.genConsignorLetter(id).then(res => {
+            houseGuaranty.genConsignorLetter(id).then(res => {
                 ElMessage({
                     message: '致委托人函已生成',
                     type: 'success',
@@ -92,7 +91,7 @@ export default {
                 const param = new Object();
                 param.html = excelData;
                 param.homePath = homePath;
-                houseGuarantyfrom.genTargetsTableWord(param).then(res => {
+                houseGuaranty.genTargetsTableWord(param).then(res => {
                     if (res.code === 200) {
                         this.processId = res.data;
                     }
@@ -102,7 +101,7 @@ export default {
         },
 
         analysisExcel(id) {
-            houseGuarantyfrom.analysisCollect1(id).then(res => {
+            houseGuaranty.analysisCollect1(id).then(res => {
                 if (res.code === 200) {
                     this.genConsignorLetter(id);
                 }
@@ -115,26 +114,27 @@ export default {
                 const param = new Object();
                 param.html = this.excelHtml;
                 param.homePath = this.upload.filePath;
-                await houseGuarantyfrom.genTargetsTableWord(param).then(res => {
+                await houseGuaranty.genTargetsTableWord(param).then(res => {
                     if (res.code === 200) {
                         this.processId = res.data;
                         this.$refs.steps.next()
                     }
                     
                 })
-                await houseGuarantyfrom.analysisCollect1(this.processId).then(res => {
+                await houseGuaranty.analysisCollect1(this.processId).then(res => {
                     if (res.code === 200) {
                         this.$refs.steps.next()
                     }
                 })
-                await houseGuarantyfrom.genConsignorLetter(this.processId).then(res => {
+                await houseGuaranty.genConsignorLetter(this.processId).then(res => {
                     if (res.code === 200) {
                         ElMessage({
                             message: '致委托人函已生成',
                             type: 'success',
                             plain: true
                         })
-                        this.$refs.steps.next()
+                        this.$emit('getProcessParentId',this.processId);
+                        this.$refs.steps.next();
                     }
 
                 })
@@ -147,9 +147,10 @@ export default {
 
         getProcess(){
             if (this.docId){
-                houseGuarantyfrom.getProcessByDocId(this.docId).then(res=>{
+                houseGuaranty.getProcessByDocId(this.docId).then(res=>{
                     if (res.code === 200){
                         this.process = res.data;
+                        this.$emit('getProcessParentId',this.process.id)
                     }
                 })
             }
@@ -158,15 +159,7 @@ export default {
         downloadCollect1(){
             fileUtil.download("/file/download/house/guaranty/collect1");
         },
-        openPageoffice(fileName,fileUrl) {
-            let paramJson={};
-            paramJson.fileName='gen1';
-            paramJson.fileUrl='gen1.docx';
-            let paramString=JSON.stringify(paramJson);
-            //openWindow()第三个参数用来向弹出的PageOffice浏览器（POBrowser）窗口传递参数(参数长度不限)，支持json格式字符串。
-            //此处为了方便演示，我们传递了file_id和file_name两个参数，具体以您实际开发为准。
-            POBrowser.openWindow('/showDoc', 'width=1150px;height=900px;',paramString);
-        },
+     
     }
 }
 

src/views/house/workbench/index.vue

@@ -4,8 +4,8 @@
         <div class="breadcrumb">
          <Breadcrumb />
         </div>
-        <Bench></Bench>
-        <Timeline :consignorState="true" :certificateState="true"></Timeline>
+        <Bench  @getProcessParentId="getProcessParentId" ></Bench>
+        <Timeline :processParentId="processParentId"></Timeline>
       </div>
     </div>
   </template>
@@ -23,14 +23,14 @@
       },
       data() {
         return {
-          consignor: {
-              name:null,
-              type:null,
-              address:null,
-              legalPerson:null,
-              legalCode:null
-          },
-          activeName:'consignor',
+          processParentId:null
+        }
+      },
+
+      
+      methods:{
+        getProcessParentId(value){
+          this.processParentId = value;
         }
       }
     }

vite.config.js

@@ -34,7 +34,7 @@ export default defineConfig({
             changeOrigin: true, // 是否允许跨域
             secure: true,
             rewrite: (path) => path.replace(/^\/api/, '/api') // api标志替换为''
-        }
+        },
     }
   }