Browse Source

测试在线编辑

wukai 2 years ago
parent
commit
a92f7fa297
1 changed files with 102 additions and 0 deletions
  1. 102 0
      src/views/biz/onlyoffice/index.vue

+ 102 - 0
src/views/biz/onlyoffice/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-col :span="12">
+          <el-form-item label="文件ID" prop="fileId">
+            <el-input v-model="formData.fileId" placeholder="请输入文件ID" :maxlength="64" show-word-limit clearable
+              prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
+          </el-form-item>
+          <el-form-item label="访问地址" prop="url">
+            <el-input v-model="formData.url" placeholder="访问地址" prefix-icon='el-icon-mobile'
+              :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <div class='qualityManual-container-office'>
+      <jjt-only-office :option='option' />
+    </div>
+  </div>
+
+
+</template>
+<script>
+  import jjtOnlyOffice from '@/components/OnlyOffice/index.vue'
+
+  export default {
+    components: {
+      jjtOnlyOffice
+    },
+    data() {
+      return {
+        formData: {
+          fileId: '',
+          url: ''
+        },
+        rules: {
+          fileId: [{
+            required: true,
+            message: '请输入文件ID',
+            trigger: 'blur'
+          }],
+        },
+        //参考jjtOnlyOffice组件参数配置
+        option: {
+          key: '',
+          url: '', //在线文档地址
+          isEdit: '', //是否允许编辑
+          fileType: '', //文件扩展名
+          title: '', //文件标题
+          user: {
+            id: null, //用户ID
+            name: '' //用户姓名
+          },
+          editUrl: '' //回调地址
+        },
+        show: true //是否显示
+      }
+    },
+    props: [],
+    computed: {},
+    watch: {},
+    created() {},
+    mounted() {},
+    methods: {
+      submitForm() {
+        this.$refs['elForm'].validate(valid => {
+          if (!valid) return
+          this.formData.url='http://192.168.188.8:8080/api/download/' + this.formData.fileId;
+          alert();
+          this.show = true;
+          this.option.isEdit = true;
+          this.option.url = this.formData.url;
+          this.option.title = '测试word';
+
+          this.option.fileType = "docx";
+
+          this.option.user = {
+            id: 1,
+            name: '测试'
+          };
+          console.log(this.option.user);
+        })
+      },
+      resetForm() {
+        this.$refs['elForm'].resetFields()
+      },
+    }
+  }
+</script>
+<style>
+  .qualityManual-container-office {
+    width: 100%;
+    height: '650px';
+  }
+</style>