add 列表

babel.config.js

@@ -1,5 +1,13 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset',
+    '@vue/cli-plugin-babel/preset'
   ],
-};
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true
+      }
+    ]
+  ]
+}

package.json

@@ -8,7 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "ant-design-vue": "1.7.2",
+    "axios": "^1.5.0",
+    "babel-plugin-import": "^1.13.8",
     "core-js": "^3.6.5",
+    "less": "3.9.0",
+    "less-loader": "4.1.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },
@@ -17,8 +22,6 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "eslint-plugin-import": "^2.20.2",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

public/index.html

@@ -7,15 +7,25 @@
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title><%= htmlWebpackPlugin.options.title %></title>
   <!--    onlyOffice服务器地址-->
-  <!--    <script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>-->
+  <% if (process.env.NODE_ENV === 'development' ) { %>
   <script type="text/javascript" src="http://10.10.10.45:80/web-apps/apps/api/documents/api.js"></script>
+  <!--<script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>-->
+  <% } %>
+  <% if (process.env.NODE_ENV === 'production' ) { %>
+  <!--<script type="text/javascript" src="http://10.10.10.45:80/web-apps/apps/api/documents/api.js"></script>-->
+  <script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>
+  <% } %>
   <!-- 全局配置 -->
   <% if (process.env.NODE_ENV === 'development' ) { %>
   <script>
     window._CONFIG = {
-      'documentUrl': 'http://39.98.140.126:18888/file/model/task_9ad64b01/task_9ad64b01_top_9ad64b01_node.docx',
+      // 'documentUrl': 'http://onlyofficevue.sinotruk.com/DOCX.docx',
-      // 'callbackUrl': 'http://39.98.140.126:17211/',
+      // 'documentUrl': 'http://39.98.140.126:18888/file/model/task_9ad64b01/task_9ad64b01_top_9ad64b01_node.docx',
-      'configUrl': 'http://localhost:8082/'
+      'documentUrl': 'http://10.0.1.28:8184/laws-sinotruk/onlyoffice/downLoadFile?path=',
+      'callbackUrl': 'http://10.0.1.28:8184/',
+      // 'configUrl': 'http://onlyofficeplugins.sinotruk.com/'
+      // 'configUrl': 'http://10.10.10.45:809/'
+      'configUrl': 'http://10.0.1.28:8081/'
     }
   </script>
   <% } %>
@@ -23,8 +33,10 @@
   <script>
     window._CONFIG = {
       'documentUrl': 'http://onlyofficevue.sinotruk.com/DOCX.docx',
-      // 'callbackUrl': 'https://srms.foton.com.cn',
+      // 'documentUrl': 'http://39.98.140.126:18888/file/model/task_9ad64b01/task_9ad64b01_top_9ad64b01_node.docx',
-      'configUrl': 'http://onlyoffice.sinotruk.com/'
+      'callbackUrl': 'https://srms.foton.com.cn',
+      'configUrl': 'http://onlyofficeplugins.sinotruk.com/'
+      // 'configUrl': 'http://10.10.10.45:809/'
     }
   </script>
   <% } %>

src/App.vue

@@ -1,13 +1,27 @@
 <template>
-  <div id="app">
+  <a-locale-provider :locale="zh_CN">
-<!--    <div id="nav">-->
+    <div id="app">
-<!--      <router-link to="/">Home</router-link> |-->
+      <!--    <div id="nav">-->
-<!--      <router-link to="/about">About</router-link>-->
+      <!--      <router-link to="/">Home</router-link> |-->
-<!--    </div>-->
+      <!--      <router-link to="/about">About</router-link>-->
-    <router-view/>
+      <!--    </div>-->
-  </div>
+      <router-view />
+    </div>
+  </a-locale-provider>
 </template>
 
+<script>
+import zh_CN from 'ant-design-vue/lib/locale/zh_CN.js'
+export default {
+  data() {
+    return {
+      zh_CN
+    }
+  }
+}
+</script>
+
+
 <style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -16,10 +30,12 @@
   text-align: center;
   color: #2c3e50;
 }
+
 * {
   margin: 0;
   padding: 0;
 }
+
 #nav {
   padding: 30px;
 

src/api/fileApi.js

@@ -0,0 +1,9 @@
+import { getAction, postAction } from './manage.js'
+
+const addFile = (params) => getAction('/onlyoffice/saveEditFile', params)
+const getList = (params) => getAction('/onlyoffice/pageList', params)
+
+export {
+  addFile,
+  getList
+}

src/api/manage.js

@@ -0,0 +1,17 @@
+import { axios } from '../utils/request.js'
+
+export function postAction (url, parameter) {
+  return axios({
+    url: url,
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getAction (url, parameter) {
+  return axios({
+    url: url,
+    method: 'get',
+    params: parameter
+  })
+}

src/main.js

@@ -1,10 +1,24 @@
-import Vue from 'vue';
+import Vue from 'vue'
-import App from './App.vue';
+import App from './App.vue'
-import router from './router';
+import router from './router'
+import less from 'less'
+import { Button, message, Table, Tooltip, Modal, Spin, Form, Input, LocaleProvider } from 'ant-design-vue'
 
-Vue.config.productionTip = false;
+Vue.use(less)
+Vue.use(Button)
+Vue.use(Table)
+Vue.use(Tooltip)
+Vue.use(Modal)
+Vue.use(Spin)
+Vue.use(Form)
+Vue.use(Input)
+Vue.use(LocaleProvider)
+
+Vue.prototype.$message = message
+
+Vue.config.productionTip = false
 
 new Vue({
   router,
-  render: (h) => h(App),
+  render: (h) => h(App)
-}).$mount('#app');
+}).$mount('#app')

src/router/index.js

@@ -1,13 +1,21 @@
-import Vue from 'vue';
+import Vue from 'vue'
-import VueRouter from 'vue-router';
+import VueRouter from 'vue-router'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    redirect: '/editor',
+    redirect: '/List'
+  },
+  {
+    path: '/List',
+    name: 'List',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/List.vue')
   },
   {
     path: '/onlyoffice',
@@ -15,7 +23,7 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "onlyoffice" */ '../views/Onlyoffice.vue'),
+    component: () => import('../views/Onlyoffice.vue')
   },
   {
     path: '/editor',
@@ -23,14 +31,14 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "onlyoffice" */ '../views/editor.vue'),
+    component: () => import('../views/editor.vue')
-  },
+  }
-];
+]
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
-  routes,
+  routes
-});
+})
 
-export default router;
+export default router

src/utils/request.js

@@ -0,0 +1,17 @@
+import axios from 'axios'
+
+const apiBaseUrl = '/laws-sinotruk'
+
+// 创建 axios 实例
+const service = axios.create({
+  // baseURL: '/laws-sinotruk',
+  baseURL: apiBaseUrl, // api base_url
+  timeout: 10000 // 请求超时时间
+})
+
+// response interceptor
+service.interceptors.response.use((response) => {
+  return response.data
+})
+
+export { service as axios }

src/views/List.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="page">
+    <a-button class="operate-btn" type="primary" @click="handleAdd">新增</a-button>
+    <a-table
+      bordered
+      :loading="loading"
+      :columns="columns"
+      :data-source="dataSource"
+      :pagination="ipagination"
+      @change="tableOnChange">
+
+      <template slot="text" slot-scope="text">
+        <a-tooltip overlay-class-name="tooltip-style">
+          <template slot="title">{{ text }}</template>
+          <div class="table-text">{{ text }}</div>
+        </a-tooltip>
+      </template>
+
+      <template slot="operation" slot-scope="text, record">
+        <a class="table-operate-btn" @click="handleEdit(record)">编辑</a>
+        <a class="table-operate-btn" @click="handleDelete(record.id)">删除</a>
+      </template>
+
+    </a-table>
+
+    <add-file-modal ref="formModal" @ok="modalFormOk" />
+  </div>
+</template>
+
+<script>
+import AddFileModal from './modules/AddFileModal.vue'
+import { getList } from '../api/fileApi.js'
+
+export default {
+  name: 'List',
+  components: { AddFileModal },
+  data () {
+    return {
+      loading: false,
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + '共' + total + '页'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      columns: [
+        // 项目来源
+        {
+          dataIndex: 'fileName',
+          title: '文档名称',
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        // 项目名称
+        {
+          dataIndex: 'createTime',
+          title: '创建时间',
+          width: 250,
+          align: 'center',
+          scopedSlots: { customRender: 'text' }
+        },
+        // 操作
+        {
+          title: '操作',
+          fixed: 'right',
+          width: 200,
+          align: 'center',
+          scopedSlots: { customRender: 'operation' }
+        }
+      ],
+      dataSource: [],
+      url: {
+        list: '/onlyoffice/pageList'
+      }
+    }
+  },
+  created () {
+    this.loadData()
+  },
+  methods: {
+    tableOnChange (pagination) {
+      this.ipagination = pagination
+      this.loadData()
+    },
+    loadData (arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      // 加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      const params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+        column: 'createTime',
+        order: 'desc'
+      }
+      this.loading = true
+      getList(params).then((res) => {
+        if (res.success) {
+          // update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          this.dataSource = res.result.records || res.result
+          if (res.result.total) {
+            this.ipagination.total = res.result.total
+          } else {
+            this.ipagination.total = 0
+          }
+          console.log(this.dataSource)
+          // update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+        } else {
+          // this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleAdd () {
+      this.$refs.formModal.add()
+    },
+    handleEdit (record) {
+      this.$router.push({
+        path: '/editor',
+        query: {
+          filePath: record.editFilePath,
+          fileName: record.fileName,
+          fileType: 'docx',
+          key: record.id
+        }
+      })
+    },
+    handleDelete (id) {
+      console.log(id)
+    },
+    modalFormOk () {
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page {
+  padding: 24px;
+  text-align: left;
+}
+
+.operate-btn {
+  margin-bottom: 20px;
+}
+
+/*表格中换行文本的样式*/
+.table-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.table-operate-btn {
+  margin: 0 8px;
+}
+
+.table-operate-btn:last-child {
+  color: red;
+}
+</style>

src/views/editor.vue

@@ -19,6 +19,8 @@ export default {
     }
   },
   mounted () {
+    this.connectEditor()
+    // 从主系统跳过来需要调这个方法，目前系统内跳不触发
     if (window.addEventListener) {
       window.addEventListener('load', this.connectEditor)
       window.addEventListener('resize', this.fixSize)
@@ -32,12 +34,20 @@ export default {
       if (console && console.log) console.log(message)
     },
     onAppReady () {
-      console.log(123);
+      console.log(123)
       this.innerAlert('Document editor ready')
     },
     onDocumentStateChange (event) {
       const title = document.title.replace(/\*$/g, '')
       document.title = title + (event.data ? '*' : '')
+      // console.log('尝试获取dom')
+      // console.log(document.getElementsByTagName('iframe'))
+      // console.log(document.getElementsByTagName('iframe')[0])
+      // console.log(document.getElementsByTagName('iframe')[0].contentDocument)
+      // console.log(document.getElementsByTagName('iframe')[0].contentWindow)
+      // console.log(document.getElementsByTagName('iframe')[0].contentWindow.document)
+      // console.log(document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('id_main_view'))
+      // console.log(document.getElementsByTagName('iframe')[0].contentDocument.getElementById('id_main_view'))
     },
     onRequestEditRights () {
       location.href = location.href.replace(RegExp('mode=view', 'i'), '')
@@ -60,7 +70,7 @@ export default {
       })
     },
     onRequestHistoryData (data) {
-      console.log(data);
+      console.log(data)
       const version = data.data
       const historyData =
         [
@@ -76,7 +86,7 @@ export default {
       document.location.reload()
     },
     onError (event) {
-      console.log(event);
+      console.log(event)
       if (event) this.innerAlert(event.data)
     },
     onOutdatedVersion (event) {
@@ -122,7 +132,8 @@ export default {
       console.log(12)
     },
     connectEditor () {
-      console.log(this.documentUrl)
+      console.log(`${this.documentUrl}${this.$route.query.filePath}`)
+      console.log(window._CONFIG.configUrl + 'page1/config.json')
       const nowTime = new Date().getTime()
       this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
         width: '100%',
@@ -135,10 +146,8 @@ export default {
         documentType: 'word',
         token: 'secret',
         document: {
-          // title: this.$route.query.oldFileName + '.' + this.$route.query.fileType,
+          title: this.$route.query.fileName,
-          title: '文档.docx',
+          url: `${this.documentUrl}${this.$route.query.filePath}`,
-          // url: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName,
-          url: this.documentUrl,
           fileType: this.$route.query.fileType,
           key: this.$route.query.key,
           info: {
@@ -153,16 +162,16 @@ export default {
             modifyFilter: true, // 定义过滤器是否可以全局应用（true）影响所有其他用户，或局部应用（false），即仅适用于当前用户。如果将mode参数设置为edit，则过滤器修改仅对电子表格编辑器可用。默认值为true。
             modifyContentControl: true, // 定义是否可以更改内容控件设置。仅当mode参数设置为edit时，内容控件修改才可用于文档编辑器。默认值为true。
             review: true, // 第一是否显示审阅文档菜单
-            "commentGroups": {
+            'commentGroups': {
-              "edit": ["Group2", ""],
+              'edit': ['Group2', ''],
-              "remove": [""],
+              'remove': [''],
-              "view": ""
+              'view': ''
             },
-            "copy": true,
+            'copy': true,
-            "deleteCommentAuthorOnly": false,
+            'deleteCommentAuthorOnly': false,
-            "editCommentAuthorOnly": false,
+            'editCommentAuthorOnly': false,
-            "print": true,
+            'print': true,
-            "reviewGroups": ["Group1", "Group2", ""]
+            'reviewGroups': ['Group1', 'Group2', '']
           }
         },
         editorConfig: {
@@ -172,7 +181,7 @@ export default {
           query: {
             id: 123456
           },
-          callbackUrl: `${this.callbackUrl}/bat-wkflow/busProcessModel/recieveFile?fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}&standNo=${this.$route.query.filePath}&fileId=${this.$route.query.attId}&standName=${this.$route.query.standName}&standEnName=${this.$route.query.standEnName}&standCode=${this.$route.query.standCode}&putTime=${this.$route.query.putTime}&issueTime=${this.$route.query.issueTime}&dtqbbhbuss=${this.$route.query.dtqbbhbuss}`,
+          callbackUrl: `${this.callbackUrl}laws-sinotruk/onlyoffice/recieveFile?fileId=${this.$route.query.key}&fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}`,
           user: {
             id: this.$route.query.userId,
             name: this.$route.query.userName
@@ -181,7 +190,7 @@ export default {
           embedded: {
             // saveUrl: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName, // 定义允许将文档保存到用户个人计算机上的绝对URL。
             // embedUrl: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName, // 定义文档的绝对URL，以作为嵌入到网页中的文档的源文件
-            // shareUrl: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName,  // 定义允许其他用户共享此文档的绝对URL。
+            // shareUrl: this.documentUrl + this.$route.query.filePath + this.fileName,  // 定义允许其他用户共享此文档的绝对URL。
             saveUrl: this.documentUrl, // 定义允许将文档保存到用户个人计算机上的绝对URL。
             embedUrl: this.documentUrl, // 定义文档的绝对URL，以作为嵌入到网页中的文档的源文件
             shareUrl: this.documentUrl,  // 定义允许其他用户共享此文档的绝对URL。

src/views/modules/AddFileModal.vue

@@ -0,0 +1,86 @@
+<template>
+  <a-modal
+    :title="title"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    ok-text="确定"
+    cancel-text="取消"
+    @ok="handleOk"
+    @cancel="handleCancel">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
+        <a-form-item label="文档名称">
+          <a-input v-decorator="['model', validatorRules.model]" :maxLength="50" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { addFile } from '../../api/fileApi.js'
+
+export default {
+  name: 'AddFileModal',
+  data () {
+    return {
+      title: '新增',
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      validatorRules: {
+        model: {
+          rules: [{ required: true, message: '请输入文档名称' }],
+          validateTrigger: 'blur'
+        }
+      },
+      model: {}
+    }
+  },
+  methods: {
+    add () {
+      this.visible = true
+    },
+    handleOk () {
+      this.form.validateFields((errors, values) => {
+        if (!errors) {
+          const formData = Object.assign(this.model, values)
+          this.confirmLoading = true
+          addFile(formData).then(res => {
+            if (res.success) {
+              const data = res.result || {}
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+              this.$router.push({
+                path: '/editor',
+                query: {
+                  filePath: data.editFilePath,
+                  fileName: data.fileName,
+                  fileType: 'docx',
+                  key: data.id
+                }
+              })
+            } else {
+              this.$message.warn(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.form.resetFields()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vue.config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  css: {
+    loaderOptions: {
+      less: {
+        // 自定义主题样式
+        // modifyVars: {
+        //   'primary-color': '#41B883',
+        //   'link-color': '#41B883',
+        //   'border-radius-base': '2px'
+        // }
+        // 解决问题主要需要打开这个
+        javascriptEnabled: true
+      }
+    }
+  },
+  devServer: {
+    port: 8080,
+    proxy: {
+      /* '/api': {
+        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
+        ws: false,
+        changeOrigin: true,
+        pathRewrite: {
+          '/laws-sinotruk': ''  //默认所有请求都加了jero-boot前缀，需要去掉
+        }
+      }, */
+      '/laws-sinotruk': {
+        target: 'http://localhost:8184',
+        ws: false,
+        changeOrigin: true,
+        pathRewrite: {
+          // '/laws-sinotruk': '' // 默认所有请求都加了jero-boot前缀，需要去掉
+        }
+      }
+    }
+  },
+}