Merge branch 'hongchao-dev'

2024-12-16 18:07:04 +08:00 · 2024-12-16 18:07:04 +08:00 · 4f260c5da3
parent 9003ac1b3c 24b016d69d
commit 4f260c5da3
5 changed files with 6279 additions and 30 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
  }
-}
+}
--- a/src/views/cart/index.vue
+++ b/src/views/cart/index.vue
@ -213,7 +213,8 @@
                    <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 +250,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">
@ -267,6 +291,8 @@ 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)
@ -569,6 +595,33 @@ const onAddAddress = () => {
 }

 getReceiptGoodsAddress()
+const wordUrl = ref("")
+const settleWordTitle = ref('')
+const dialogFormVisibleSettleWord: any = ref(false)
+//租赁服务合同
+const handleViewWord = async() => {
+    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"
+    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);
+}
 </script>

 <style lang="scss" scoped>
--- a/src/views/user/orderManagement/components/order-home.vue
+++ b/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: '确定',
@ -713,7 +738,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>

@ -1274,17 +1299,18 @@ const costSubmit = () => {
        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 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="downloadContract" type="success"> 下载 </el-button>
+                </span>
        </div>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
-                >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
-            </span>
-        </template>
+        <div id ="mmm" style="height:600px;"></div>
    </el-dialog>
 </template>

--- a/src/views/user/orderManagementCz/components/order-home.vue
+++ b/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
-    total.value = res.total
-    wordUrl.value = 'http://127.0.0.1:29300/statics/2024/12/13/合同模板2_20241213133604A002.doc'
+    // cardList.value = res.rows
    // 打开租赁协议弹框
+      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>
@ -1850,17 +1870,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" /> -->
-        <iframe :src="wordUrl" width="100%" height="501px"></iframe>
+            <!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
        <!-- </div> -->
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
-                >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
-            </span>
-        </template>
+        <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>
+        <div id ="mmm" style="height:600px;"></div>
    </el-dialog>
 </template>

@ -2243,4 +2263,8 @@ const wordUrl = ref('')
        }
    }
 }
+#mmm{
+    width:100%;
+    height: 500px;
+}
 </style>