wordEdit.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <a-modal
  3. title="Title"
  4. width="80%"
  5. :visible="visible"
  6. @ok="handleOk"
  7. @cancel="handleOk"
  8. >
  9. <dev v-show="visible" id="monitorOffice" ></dev>
  10. </a-modal>
  11. </template>
  12. <script>
  13. import { getAction } from '@api/manage'
  14. export default {
  15. name: 'wordEdit',
  16. created () {
  17. //备份model原始值
  18. this.config.document.key=""
  19. this.config.document.fileType=""
  20. this.config.document.url=""
  21. this.config.document.title=""
  22. this.config.editorConfig.callbackUrl=""
  23. },
  24. data () {
  25. return {
  26. docEditor: null,
  27. visible: false,
  28. queryById: '/moban/itdmMoban/wordById',
  29. config: {
  30. document: {
  31. fileType: "",
  32. key: "",
  33. title: "",
  34. url: "",
  35. },
  36. documentType: "word",
  37. width: "100%",
  38. height: "600px",
  39. editorConfig: {
  40. lang:'zh',
  41. callbackUrl: ""
  42. }
  43. },
  44. }
  45. },
  46. methods: {
  47. edit (record) {
  48. if (this.docEditor) {
  49. this.docEditor.destroyEditor()
  50. }
  51. console.log(record)
  52. const select = { id: record.id }
  53. getAction(this.queryById, select).then((res) => {
  54. if (res.success) {
  55. this.config.document.key=res.result.key
  56. this.config.document.fileType=res.result.fileType
  57. this.config.document.url=process.env.VUE_APP_API_BASE_URL+"/"+res.result.url
  58. this.config.document.title=res.result.title
  59. this.config.editorConfig.callbackUrl=process.env.VUE_APP_API_BASE_URL+"/"+"word/save"
  60. console.log(this.config)
  61. this.docEditor = new DocsAPI.DocEditor("monitorOffice", this.config);
  62. } else {
  63. this.$message.warning(res.message)
  64. }
  65. })
  66. },
  67. handleOk(){
  68. this.visible=false
  69. this.config.document.key=""
  70. this.config.document.fileType=""
  71. this.config.document.url=""
  72. this.config.document.title=""
  73. this.config.editorConfig.callbackUrl=""
  74. if (this.docEditor) {
  75. this.docEditor.destroyEditor()
  76. }
  77. this.$emit("ok");
  78. }
  79. }
  80. }
  81. </script>