Merge branch 'main' into dev-sy

package.json

@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@js-preview/docx": "^1.6.2",
+    "@vue-office/docx": "^1.6.2",
     "@vueuse/core": "^10.6.1",
     "axios": "^1.6.2",
     "element-plus": "^2.4.3",
@@ -28,6 +30,7 @@
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-zip-file": "^2.2.0",
     "vue": "^3.3.4",
+    "vue-demi": "^0.14.10",
     "vue-qrcode": "^2.2.2",
     "vue-router": "^4.2.5"
   },
@@ -46,4 +49,4 @@
     "vite": "^4.4.11",
     "vue-tsc": "^1.8.19"
   }
-}
+}

src/views/cart/index.vue

@@ -173,47 +173,13 @@
         </div>
 
         <div class="protocol-handle" v-if="cardList.length > 0">
-            <el-row style="margin: 15px 0">
-                <el-col :span="24">
-                    <el-collapse v-model="activeNames">
-                        <el-collapse-item :title="addressTitle" name="1">
-                            <template v-if="addressList.length > 0">
-                                <div
-                                    :key="index"
-                                    class="address-item"
-                                    @click="onSelectAddress(item.addressName)"
-                                    v-for="(item, index) in addressList"
-                                >
-                                    {{ item.addressName }}
-                                </div>
-                            </template>
-
-                            <template v-else>
-                                <div style="width: 100%; text-align: center; font-size: 14px">
-                                    当前没有收货地址...
-                                    <a
-                                        style="
-                                            color: #00a288;
-                                            cursor: pointer;
-                                            margin-left: 5px;
-                                            text-decoration: underline;
-                                        "
-                                        @click="onAddAddress"
-                                    >
-                                        点击新增
-                                    </a>
-                                </div>
-                            </template>
-                        </el-collapse-item>
-                    </el-collapse>
-                </el-col>
-            </el-row>
             <el-row style="display: flex; align-items: center">
                 <el-col :span="16">
                     <div class="checkbox-container">
                         <el-checkbox v-model="protocolChecked">
                             我已阅读并同意签署
-                            <a href="#"> 《xxxx公司租赁服务合同》 </a>
+                            
+                            <a @click="handleViewWord"> 《xxxx公司租赁服务合同》 </a>
                         </el-checkbox>
                     </div>
                 </el-col>
@@ -249,6 +215,29 @@
     </div>
 
     <FooterInfo />
+
+    <!-- 租赁协议 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleWord"
+        :title="settleWordTitle"
+        width="50%"
+        align-center
+        destroy-on-close
+        :close-on-click-modal="false"
+    >
+        <!-- <div style="display: flex; justify-content: center"> -->
+            <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
+        <!-- </div> -->
+        <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;">
+                <span class="dialog-footer" >
+                    <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                        >关 闭</el-button
+                    >
+                    <el-button @click="submitBtn" type="success"> 下载 </el-button>
+                </span>
+        </div>
+        <div id ="mmm" style="height:600px;"></div>
+    </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -264,17 +253,15 @@ import {
 import moment, { max } from 'moment'
 import { InfoFilled } from '@element-plus/icons-vue'
 import CustomDatePickerButton from './components/date-picker-button.vue'
-import { getAddressListApi } from 'http/api/address-manage/index'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '../../store/user'
+import jsPreviewDocx from "@js-preview/docx";
+import "@js-preview/docx/lib/index.css";
 const userStore = useStore()
 const router = useRouter()
 const protocolChecked = ref<boolean>(false)
 const allKey = ref(0)
 const cardList = ref<any>([])
-const activeNames = ref('')
-const addressTitle = ref('请选择收货地址')
-const addressList = ref<any>([])
 const getBookCarDetailsData = async () => {
     const res: any = await getBookCarDetailsApi()
 
@@ -449,14 +436,6 @@ const onCartSubmit = async () => {
         })
         return
     }
-    if (addressTitle.value === '请选择收货地址') {
-        ElMessage({
-            showClose: false,
-            message: '请选择收货地址',
-            type: 'error',
-        })
-        return
-    }
 
     let isDays = false
     try {
@@ -508,7 +487,6 @@ const onCartSubmit = async () => {
         })
         paramsList[index] = {
             cost: 0,
-            address: addressTitle.value.split('：')[1],
             detailsList: itemsArray,
         }
     })
@@ -544,31 +522,33 @@ const onCartSubmit = async () => {
     // console.log(res, '预约车提交结果')
 }
 
-// 获取收货地址
+const wordUrl = ref("")
-const getReceiptGoodsAddress = async () => {
+const settleWordTitle = ref('')
-    const res: any = await getAddressListApi({})
+const dialogFormVisibleSettleWord: any = ref(false)
-    addressList.value = res.rows.map((e: any) => {
+//租赁服务合同
-        return {
+const handleViewWord = async() => {
-            addressName: `${e.provinceName}${e.cityName}${e.areaName}${e.address}`,
+    settleWordTitle.value = '租赁服务合同'
-        }
+    // const orderId = row.orderId
-    })
+    // const res: any = await getContractDetailApi({ orderId })
-}
+    // 打开租赁服务合同弹框
-// 选择收货地址
+      wordUrl.value = "http://127.0.0.1:29300/statics/2024/12/16/test_20241216154423A003.docx"
-const onSelectAddress = (address: any) => {
+    dialogFormVisibleSettleWord.value = true
-    addressTitle.value = '收货地址：' + address
-    activeNames.value = ''
-}
-// 去往地址管理
-const onAddAddress = () => {
-    userStore.editcurrentMenuItem('address-manage')
     setTimeout(() => {
-        router.push({
+  const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm"));
-            name: 'my-user',
+    //传递要预览的文件地址即可
+    myDocxPreviewer
+        .preview(
+        wordUrl.value
+        )
+        .then((res) => {
+        console.log("预览完成");
         })
-    }, 500)
+        .catch((e) => {
+            console.log('1111', wordUrl.value)
+        console.log("预览失败", e);
+        });
+    }, 1000);
 }
-
-getReceiptGoodsAddress()
 </script>
 
 <style lang="scss" scoped>
@@ -682,13 +662,4 @@ getReceiptGoodsAddress()
         }
     }
 }
-
-.address-item {
-    margin: 0 auto;
-    padding: 6px 10px;
-    cursor: pointer;
-}
-.address-item:hover {
-    background-color: #c9e7e5;
-}
 </style>

src/views/user/orderManagement/components/order-home.vue

@@ -13,6 +13,8 @@ import { useStore } from 'store/user'
 import type { FormInstance } from 'element-plus'
 const store = useStore()
 import { mainStore } from 'store/main'
+import jsPreviewDocx from "@js-preview/docx";
+import "@js-preview/docx/lib/index.css";
 const store2 = mainStore()
 
 const overhaulDetails = ref<any>({})
@@ -320,12 +322,12 @@ const tableData4: any = ref([
     },
 ])
 
+const wordUrl = ref("")
 const settleWordTitle = ref('')
 const dialogFormVisibleSettleWord: any = ref(false)
 //租赁协议
-const handleViewWord = () => {
+const handleViewWord = async(index: Number, row: any) => {
     settleWordTitle.value = '租赁协议'
-    console.log(12313131)
     moneyParams1.value = {
         /* 设备状态 */
         maStatus: 15,
@@ -333,10 +335,33 @@ const handleViewWord = () => {
         insureList: [],
         picList: [],
     }
+    const orderId = row.orderId
+    // const res: any = await getContractDetailApi({ orderId })
+    // cardList.value = res.rows
+
     // 打开租赁协议弹框
+      wordUrl.value = "http://127.0.0.1:29300/statics/2024/12/16/test_20241216154423A003.docx"
     dialogFormVisibleSettleWord.value = true
+    setTimeout(() => {
+  const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm"));
+    //传递要预览的文件地址即可
+    myDocxPreviewer
+        .preview(
+        wordUrl.value
+        )
+        .then((res) => {
+        console.log("预览完成");
+        })
+        .catch((e) => {
+            console.log('1111', wordUrl.value)
+        console.log("预览失败", e);
+        });
+    }, 1000);
 }
 
+// 下载合同为 Word 文件
+const downloadContract = () => {}
+
 const confirmFail = async (index: number) => {
     ElMessageBox.confirm('是否确定取消订单？', {
         confirmButtonText: '确定',
@@ -730,7 +755,7 @@ const costSubmit = () => {
                             >
                                 订单详情
                             </el-button>
-                            <el-button @click="handleViewWord(j)" type="primary" size="small">
+                            <el-button @click="handleViewWord(j,item)" type="primary" size="small">
                                 租赁协议
                             </el-button>
 
@@ -1291,17 +1316,18 @@ const costSubmit = () => {
         destroy-on-close
         :close-on-click-modal="false"
     >
-        <div style="display: flex; justify-content: center">
+        <!-- <div style="display: flex; justify-content: center"> -->
-            <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" />
+            <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
+        <!-- </div> -->
+        <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;">
+                <span class="dialog-footer" >
+                    <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                        >关 闭</el-button
+                    >
+                    <el-button @click="downloadContract" type="success"> 下载 </el-button>
+                </span>
         </div>
-        <template #footer>
+        <div id ="mmm" style="height:600px;"></div>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
-                >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
-            </span>
-        </template>
     </el-dialog>
 </template>
 

src/views/user/orderManagementCz/components/order-home.vue

@@ -18,6 +18,8 @@ import type { FormInstance } from 'element-plus'
 import { useStore } from 'store/user'
 const store = useStore()
 import { mainStore } from 'store/main'
+import jsPreviewDocx from "@js-preview/docx";
+import "@js-preview/docx/lib/index.css";
 const store2 = mainStore()
 /* 查询参数 ***
  ****
@@ -625,11 +627,25 @@ const handleViewWord = async (index: Number, row: any) => {
     }
     const orderId = row.orderId
     const res: any = await getContractDetailApi({ orderId })
-    cardList.value = res.rows
+    // cardList.value = res.rows
-    total.value = res.total
-    wordUrl.value = 'http://127.0.0.1:29300/statics/2024/12/13/合同模板2_20241213133604A002.doc'
     // 打开租赁协议弹框
+      wordUrl.value = res.data.url
     dialogFormVisibleSettleWord.value = true
+    setTimeout(() => {
+  const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm"));
+    //传递要预览的文件地址即可
+    myDocxPreviewer
+        .preview(
+        wordUrl.value
+        )
+        .then((res) => {
+        console.log("预览完成");
+        })
+        .catch((e) => {
+            console.log('1111', wordUrl.value)
+        console.log("预览失败", e);
+        });
+    }, 1000);
 }
 
 const contract = ref({
@@ -639,9 +655,13 @@ const contract = ref({
 })
 
 // 下载合同为 Word 文件
-const downloadContract = () => {}
+const downloadContract = () => {
+    window.location.href = wordUrl.value;
+}
+
+const wordUrl = ref("")
+
 
-const wordUrl = ref('')
 </script>
 
 <template>
@@ -1866,17 +1886,17 @@ const wordUrl = ref('')
         :close-on-click-modal="false"
     >
         <!-- <div style="display: flex; justify-content: center"> -->
-        <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
+            <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
-        <iframe :src="wordUrl" width="100%" height="501px"></iframe>
         <!-- </div> -->
-        <template #footer>
+        <div style="display: flex; justify-content: flex-end;margin-bottom: 10px;">
-            <span class="dialog-footer">
+                <span class="dialog-footer" >
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                    <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
+                        >关 闭</el-button
-                >
+                    >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
+                    <el-button @click="downloadContract" type="success"> 下载 </el-button>
-            </span>
+                </span>
-        </template>
+        </div>
+        <div id ="mmm" style="height:600px;"></div>
     </el-dialog>
 </template>
 
@@ -2259,4 +2279,8 @@ const wordUrl = ref('')
         }
     }
 }
+#mmm{
+    width:100%;
+    height: 500px;
+}
 </style>