add 列表

2023-09-14 18:04:58 +08:00
parent 13af715642
commit 5239d48bce
13 changed files with 462 additions and 53 deletions
@@ -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>
@@ -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: '文档.docx',
-          // url: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName,
-          url: this.documentUrl,
+          title: this.$route.query.fileName,
+          url: `${this.documentUrl}${this.$route.query.filePath}`,
          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": {
-              "edit": ["Group2", ""],
-              "remove": [""],
-              "view": ""
+            'commentGroups': {
+              'edit': ['Group2', ''],
+              'remove': [''],
+              'view': ''
            },
-            "copy": true,
-            "deleteCommentAuthorOnly": false,
-            "editCommentAuthorOnly": false,
-            "print": true,
-            "reviewGroups": ["Group1", "Group2", ""]
+            'copy': true,
+            'deleteCommentAuthorOnly': false,
+            'editCommentAuthorOnly': false,
+            'print': true,
+            '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。
@@ -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>