合同修改查看附件

@@ -87,12 +87,12 @@
       </el-table-column>
       </el-table-column>
       <el-table-column label="甲方" align="center" prop="partyA" width="200">
       <el-table-column label="甲方" align="center" prop="partyA" width="200">
         <template slot-scope="scope">
         <template slot-scope="scope">
-        <a :href="scope.row.partyAAddress" target="_blank" style="color: blue;">{{ scope.row.partyA }}</a>
+        <a :href="scope.row.partyAAddress" target="_blank" style="color: #1890ff;;">{{ scope.row.partyA }}</a>
       </template>
       </template>
       </el-table-column>
       </el-table-column>
       <el-table-column label="乙方" align="center" prop="partyB" width="200">
       <el-table-column label="乙方" align="center" prop="partyB" width="200">
         <template slot-scope="scope">
         <template slot-scope="scope">
-        <a :href="scope.row.partyBAddress" target="_blank" style="color: blue;">{{ scope.row.partyB }}</a>
+        <a :href="scope.row.partyBAddress" target="_blank" style="color: #1890ff;;">{{ scope.row.partyB }}</a>
       </template>
       </template>
       </el-table-column>
       </el-table-column>
       <el-table-column label="付款方式" align="center" prop="paymentMethod" width="200"/>
       <el-table-column label="付款方式" align="center" prop="paymentMethod" width="200"/>
@@ -102,7 +102,14 @@
         </template>
         </template>
       </el-table-column>
       </el-table-column>
       <el-table-column label="标的物信息" align="center" prop="subjectInformation" width="200" />
       <el-table-column label="标的物信息" align="center" prop="subjectInformation" width="200" />
-      <el-table-column label="附件" align="center" prop="attachments" width="100"/>
+      <el-table-column label="附件" align="center" prop="attachments" width="100">
+        <!-- <template slot-scope="scope">  
+          <img :src="baseUrl + scope.row.attachments" width="40px" height="auto" style="cursor: pointer"/>
+        </template> -->
+        <template slot-scope="scope">  
+          <img v-if="scope.row.attachments" src="@/assets/images/PDF.png" @click="preview(scope.row.attachments)" width="40px" height="auto" style="cursor: pointer"/>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right" width="200">
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right" width="200">
         <template slot-scope="scope">
         <template slot-scope="scope">
           <el-button
           <el-button
@@ -145,7 +152,9 @@
       :limit.sync="queryParams.pageSize"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
       @pagination="getList"
     />
     />
-
+    <el-dialog title="合同预览" :visible.sync="dialogVisibleContract" width="50%" center :before-close="handleClose">
+      <vue-pdf :src="pdfUrl" type="application/pdf" width="100%" height="800px" />
+    </el-dialog>
     <!-- 添加或修改【请填写功能名称】对话框 -->
     <!-- 添加或修改【请填写功能名称】对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
@@ -196,14 +205,17 @@
 
 
 <script>
 <script>
 import { listContract, getContract, delContract, addContract, updateContract } from "@/api/compliancemanagement/contract";
 import { listContract, getContract, delContract, addContract, updateContract } from "@/api/compliancemanagement/contract";
-import FileUpload from '@/components/FileUpload';
+import VuePdf from 'vue-pdf';
 export default {
 export default {
   name: "Contract",
   name: "Contract",
   components: {
   components: {
-    FileUpload
+    VuePdf
   },
   },
   data() {
   data() {
     return {
     return {
+      pdfUrl: '',
+      dialogVisibleContract:false,
+      baseUrl:process.env.VUE_APP_BASE_API+ '/',
       // 按钮loading
       // 按钮loading
       buttonLoading: false,
       buttonLoading: false,
       // 遮罩层
       // 遮罩层
@@ -307,6 +319,16 @@ export default {
       this.open = false;
       this.open = false;
       this.reset();
       this.reset();
     },
     },
+     //合同附件预览
+    preview(contract) {
+      this.dialogVisibleContract = true
+      console.log('contract:',contract)
+      this.pdfUrl = this.baseUrl + contract
+    },
+    handleClose() {
+        this.pdfUrl = ''
+        this.dialogVisibleContract = false
+      },
     // 表单重置
     // 表单重置
     reset() {
     reset() {
       this.form = {
       this.form = {

@@ -249,7 +249,8 @@ export default {
       headers: { Authorization: "Bearer " + getToken() },
       headers: { Authorization: "Bearer " + getToken() },
       // 上传的地址
       // 上传的地址
       url: process.env.VUE_APP_BASE_API + "/common/uploads",
       url: process.env.VUE_APP_BASE_API + "/common/uploads",
-      urlhead: "http://joycart.zgftlm.com",
+      // urlhead: "http://joycart.zgftlm.com",
+      urlhead:process.env.VUE_APP_BASE_API,
       fileList: [],
       fileList: [],
       dialogVisible: false,
       dialogVisible: false,
       dialogImageUrl: "",
       dialogImageUrl: "",