更新

admin-ui/src/views/work/contract/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent >
+    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
       <el-form-item label="合同名称" prop="name">
         <el-input v-model="queryParams.name" placeholder="请输入合同名称" @keyup.enter.native="handleQuery" clearable />
       </el-form-item>
@@ -20,6 +20,7 @@
       <el-table-column label="创建时间" align="center" prop="createTime" width="200" />
       <el-table-column label="操作" align="center" width="200">
         <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-document" @click="op('look', scope.row)">查看合同</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click="op('edit', scope.row)" v-hasPermi="['work:contract:edit']">修改</el-button>
         </template>
       </el-table-column>
@@ -32,6 +33,7 @@
 </template>
 
 <script>
+import look from './look';
 import edit from './edit';
 export default {
   name: 'Contract',
@@ -42,7 +44,6 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: null,
-        url: null,
         state: null,
         orderByColumn: 'id',
         isAsc: 'desc'
@@ -70,9 +71,11 @@ export default {
       this.ids = rows.map((item) => item.id);
     },
     op(tag, row) {
+      if (tag == 'look') {
+        this.iframe({ obj: look, param: { url: row.url }, title: '查看合同', width: '55%', height: '85%' });
+      }
       if (tag == 'edit') {
-        const id = row.id || this.ids[0];
-        this.iframe({ obj: edit, param: { id: id }, title: '编辑合同', width: '35%', height: '40%' });
+        this.iframe({ obj: edit, param: { id: row.id }, title: '编辑合同', width: '35%', height: '40%' });
       }
     },
     del(row) {

admin-ui/src/views/work/contract/look.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="cmain">
+    <VueOfficeDocx :src="docx" :options="editorOptions" @rendered="rendered" />
+  </div>
+</template>
+
+<script>
+import VueOfficeDocx from '@vue-office/docx'; //引入VueOfficeDocx组件
+import '@vue-office/docx/lib/index.css';
+export default {
+  components: {
+    VueOfficeDocx
+  },
+  data() {
+    return {
+      docx: '',
+      editorOptions: {
+        toolbar: true,
+        width: '100px',
+        height: '600px'
+      }
+    };
+  },
+  props: {
+    param: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    layerid: {
+      type: String
+    }
+  },
+  mounted() {
+    this.docx = this.baseUrl + this.param.url;
+  },
+  methods: {
+    rendered() {
+      console.log('渲染完成');
+    }
+  }
+};
+</script>