fix：添加文件预览方式，给POCT文件培训使用

src/business/platform/file/attachment/editFile/editor.vue

@@ -17,6 +17,10 @@ export default {
             default: () => {
                 return {}
             }
+        },
+        operation_status: {
+            type: String,
+            default: ''
         }
     },
     data () {
@@ -77,14 +81,14 @@ export default {
                     key: option.key,
                     title: option.title,
                     permissions: {
-                        comment: true,
-                        download: true,
-                        modifyContentControl: true,
-                        modifyFilter: true,
-                        print: true,
-                        edit: true,
-                        fillForms: true,
-                        review: true
+                        comment: this.operation_status !== 'fileTraining',
+                        download: this.operation_status !== 'fileTraining',
+                        modifyContentControl: this.operation_status !== 'fileTraining',
+                        modifyFilter: this.operation_status !== 'fileTraining',
+                        print: this.operation_status !== 'fileTraining',
+                        edit: this.operation_status !== 'fileTraining',
+                        fillForms: this.operation_status !== 'fileTraining',
+                        review: this.operation_status !== 'fileTraining'
                     },
                     url: option.url
                 },
@@ -128,6 +132,7 @@ export default {
                     // },
                     onDocumentReady: () => {
                         console.log('文件加载完成~')
+                        this.hadLoadedFile(0)
                     }
                 },
                 width: '100%',
@@ -153,6 +158,9 @@ export default {
                     })
                 }
             }, 2000)
+        },
+        hadLoadedFile (v) {
+            this.$emit('hadLoadedFile', v)
         }
     }
 }

src/business/platform/file/attachment/editFile/fView.vue

@@ -1,55 +1,71 @@
+<!--
+ * @Descripttion: 表单/数据模板脚本：
+ * @version: 1.0
+ * @Author: Liu_jiaYin
+ * @Date: 2023-11-17 16:40:46
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-01 16:39:32
+-->
 <template>
     <div>
-        <editor :option="option" @updateFile="updateFile" />
+        <editor :option="option" :operation_status="operation_status" @updateFile="updateFile" @hadLoadedFile="hadLoadedFile" />
     </div>
 </template>
 
 <script>
-    import editor from './editor'
-    export default {
-        name: 'fView',
-        components: { editor },
-        props: {
-            optionFile: {
-                type: Object,
-                default: () => {
-                    return {}
-                }
+import editor from './editor'
+export default {
+    name: 'f-view',
+    components: { editor },
+    props: {
+        optionFile: {
+            type: Object,
+            default: () => {
+                return {}
             }
         },
-        data() {
-            return {
-                option: {
-                    url: '',
-                    isEdit: true,
-                    fileType: '',
-                    title: '',
-                    user: {
-                        id: '',
-                        name: ''
-                    },
-                    mode: 'edit',
-                    editUrl: '',
-                    key: ''
-                }
+        // eslint-disable-next-line vue/prop-name-casing
+        operation_status: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            option: {
+                url: '',
+                isEdit: true,
+                fileType: '',
+                title: '',
+                user: {
+                    id: '',
+                    name: ''
+                },
+                mode: 'edit',
+                editUrl: '',
+                key: ''
             }
+        }
+    },
+    // 创建定时任务，开始查询是否有对应key
+    created () {
+        this.option.user.id = this.$store.getters.userId
+        this.option.user.name = this.$store.getters.name
+        this.getFile()
+    },
+    methods: {
+        updateFile (data) {
+            this.$emit('updateFile', data)
         },
-        // 创建定时任务，开始查询是否有对应key
-        created() {
-            this.option.user.id = this.$store.getters.userId
-            this.option.user.name = this.$store.getters.name
-            this.getFile()
+        getFile () {
+            this.option.url = this.optionFile.url // 下载地址
+            this.option.editUrl = this.optionFile.editUrl // 回调接口url
+            this.option.title = this.optionFile.title // 文件名称
+            this.option.fileType = this.optionFile.fileType // 类型
         },
-        methods: {
-            updateFile(data) {
-                this.$emit('updateFile', data)
-            },
-            getFile() {
-                this.option.url = this.optionFile.url // 下载地址
-                this.option.editUrl = this.optionFile.editUrl // 回调接口url
-                this.option.title = this.optionFile.title // 文件名称
-                this.option.fileType = this.optionFile.fileType // 类型
-            }
+        hadLoadedFile (v) {
+            this.$emit('hadLoadedFile', v)
         }
     }
+}
 </script>

src/business/platform/file/attachment/fileTraining/index.vue

@@ -0,0 +1,112 @@
+<!--
+ * @Descripttion: 表单/数据模板脚本：
+ * @version: 1.0
+ * @Author: Liu_jiaYin
+ * @Date: 2024-03-01 13:47:32
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-03-01 17:35:29
+-->
+<template>
+    <el-dialog
+        :visible.sync="dialogVisible"
+        :title="title"
+        fullscreen
+        append-to-body
+        custom-class="ibps-file-preview-dialog"
+        @close="closeDialog"
+    >
+        <fView :option-file="optionFile" :operation_status="operation_status" @hadLoadedFile="hadLoadedFile" />
+    </el-dialog>
+</template>
+<script>
+/**
+     * 文件预览
+     * 1、'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'  类型支持
+     * 2、图片支持缩放
+     * 3、音频，语音支持
+     * ==================
+     * 下一版本支持
+     * 1、pdf支持缩放
+     * 2、音频，语音多格式支持
+     * 3、压缩包支持
+     */
+import fView from '@/business/platform/file/attachment/editFile/fView.vue'
+export default {
+    name: 'file-training',
+    components: {
+        fView
+    },
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        optionFile: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data () {
+        return {
+            dialogVisible: false,
+            operation_status: 'fileTraining',
+            title: '',
+            browseTime: 0, // 浏览时长初始值为 0
+            clearTimeSet: null
+        }
+    },
+    watch: {
+        optionFile: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+                this.title = `《${val.title}》文件培训`
+            },
+            immediate: true
+        },
+        browseTime: {
+            handler: function (val, oldVal) {
+                this.title = `《${this.optionFile.title}》文件培训，查阅时长：${val}秒`
+            },
+            immediate: true
+        }
+    },
+    beforeDestroy () {
+        this.fileType = ''
+        this.option = {}
+    },
+    methods: {
+        closeDialog () {
+            this.beforeunloadHandler()
+            this.$emit('close', { fielData: this.optionFile, time: this.browseTime })
+        },
+        hadLoadedFile (v) {
+            this.setBrowseTime()
+        },
+        setBrowseTime () {
+            // 设置定时器
+            this.clearTimeSet = setInterval(() => {
+                this.browseTime++
+            }, 1000)
+        },
+        beforeunloadHandler (e) {
+            // 针对关闭窗口或者浏览器的
+            if (this.clearTimeSet != null) {
+                clearInterval(this.clearTimeSet)
+            }
+        }
+    }
+}
+</script>
+<style lang="scss">
+    .ibps-file-preview-dialog {
+      width: 80%;
+      z-index:99999;
+        .el-dialog__body {
+            padding: 0;
+
+        }
+        .file-type-txt {
+            height: calc(88vh) !important;
+        }
+    }
+</style>

src/business/platform/file/attachment/selector.vue

@@ -10,8 +10,8 @@
             :multiple="multiple"
             :limit="limit"
             :disabled="disabled"
-            :readonly="readonly"
-            :download="download"
+            :readonly="fileReadonly"
+            :download="fileDownload"
             :operation_status="operation_status"
             :preview="preview"
             :upload-type="uploadType"
@@ -44,6 +44,13 @@
         <div v-if="showFile" class="divShow">
             <fView :option-file="optionFile" @updateFile="updateFile" />
         </div>
+        <div v-if="fileTrainingDialog">
+            <fileTraining
+                :visible="fileTrainingDialog"
+                :option-file="optionFile"
+                @close="closeFileTrainingDialog"
+            />
+        </div>
     </div>
 </template>
 <script>
@@ -56,6 +63,7 @@ import FilePreview from '@/business/platform/file/file-preview'
 import { supportFileTypes } from '@/components/ibps-file-viewer/constants'
 import { TRANSFER_DATA } from '@/constant'
 import fView from './editFile/fView.vue'
+import fileTraining from './fileTraining/index.vue'
 import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
 
 export default {
@@ -63,7 +71,8 @@ export default {
         IbpsFileAttachmentSelector,
         IbpsUploaderSelectorDialog,
         FilePreview,
-        fView
+        fView,
+        fileTraining
     },
     inject: {
         elForm: {
@@ -160,6 +169,12 @@ export default {
         }
     },
     data () {
+        let fileReadonly = true
+        let fileDownload = false
+        if (this.operation_status !== 'fileTraining') {
+            fileReadonly = this.readonly
+            fileDownload = this.download
+        }
         return {
             selectorVisible: false,
             selectorValue: this.multiple ? [] : {},
@@ -173,7 +188,10 @@ export default {
             showFile: false,
             file: '',
             optionFile: {},
-            optionFileView: {}
+            optionFileView: {},
+            fileReadonly,
+            fileDownload,
+            fileTrainingDialog: false
         }
     },
     computed: {
@@ -512,28 +530,46 @@ export default {
              * 处理预览
              */
         handlePreview (index) {
-            this.attachment = this.multiple ? this.selectorValue[index] : this.selectorValue
-            if (supportFileTypes.includes(this.attachment.ext)) {
-                this.getPreview(index)
+            const data = this.selectorValue[index]
+            if (this.operation_status !== 'fileTraining') {
+                this.attachment = this.multiple ? this.selectorValue[index] : this.selectorValue``
+                if (supportFileTypes.includes(this.attachment.ext)) {
+                    this.getPreview(index)
+                    this.filePreviewVisible = true
+                } else {
+                    this.$message.closeAll()
+                    this.$message.warning('暂不支持该文件类型预览')
+                }
             } else {
-                this.$message.closeAll()
-                this.$message.warning('暂不支持该文件类型预览')
+                // 打开培训文件用的弹框
+                this.getPreview(index)
+                this.fileTrainingDialog = true
             }
         },
         /**
              * 处理预览
              */
         getPreview (index) {
-            // 1、获取文件数据 及下载流接口
+            if (this.operation_status !== 'fileTraining') {
+                // 1、获取文件数据 及下载流接口
             // 下载地址
-            this.optionFileView.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + this.attachment.id
-            // 回调接口url
-            this.optionFileView.editUrl = BASE_API() + SYSTEM_URL() + '/file/editCallback?fileName=' + this.attachment.fileName + '&fileType=' + this.attachment.ext
-            this.optionFileView.title = this.attachment.fileName // 文件名称
-            this.optionFileView.fileType = this.attachment.ext // 类型
-            this.optionFileView.data = this.attachment // 记录编制的位置，需要替换。
-            this.optionFileView.data.index = index
-            this.filePreviewVisible = true
+                this.optionFileView.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + this.attachment.id
+                // 回调接口url
+                this.optionFileView.editUrl = BASE_API() + SYSTEM_URL() + '/file/editCallback?fileName=' + this.attachment.fileName + '&fileType=' + this.attachment.ext
+                this.optionFileView.title = this.attachment.fileName // 文件名称
+                this.optionFileView.fileType = this.attachment.ext // 类型
+                this.optionFileView.data = this.attachment // 记录编制的位置，需要替换。
+                this.optionFileView.data.index = index
+            } else {
+                const data = this.selectorValue[index]
+                // 1、获取文件数据 及下载流接口
+                this.optionFile.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + data.id
+                this.optionFile.editUrl = BASE_API() + SYSTEM_URL() + '/file/editCallback?fileName=' + data.fileName + '&fileType=' + data.ext + '&type="fileTraining"&id=' + data.id
+                this.optionFile.title = data.fileName // 文件名称
+                this.optionFile.fileType = data.ext // 类型
+                this.optionFile.data = data // 记录编制的位置，需要替换。
+                this.optionFile.data.index = index
+            }
         },
         /**
              *  确定
@@ -609,6 +645,10 @@ export default {
                 this.$message.error(`上传图片的大小不能超过 ${this.size}M!`)
             }
             return isLimitSize && isType
+        },
+        closeFileTrainingDialog (v) {
+            this.fileTrainingDialog = false
+            this.$emit('change-data', 'fanKuiXinXi', JSON.stringify([v]))
         }
     }
 }

src/business/platform/form/formbuilder/right-aside/editors/editor-field-attachment.vue

@@ -1,116 +1,116 @@
 <template>
-  <div class="panel panel-default bowen-options">
-    <div class="panel-heading">参数设置</div>
-    <div class="panel-body">
+    <div class="panel panel-default bowen-options">
+        <div class="panel-heading">参数设置</div>
+        <div class="panel-body">
 
-      <el-form-item>
-        <template slot="label">文件编辑：</template>
-        <el-radio-group v-model="fieldOptions.operation_status">
-         <el-radio label="none" >不操作</el-radio>
-          <!-- <el-radio label="saveDel">替换</el-radio> -->
-          <el-radio label="saveAdd" >新增</el-radio>
-           </el-radio-group>
-           </br>
-           用编辑的文件'替换'原文件
-           </br>
-           或通过选择文件模板，'新增'文件
-      </el-form-item>
+            <el-form-item>
+                <template slot="label">文件编辑：</template>
+                <el-radio-group v-model="fieldOptions.operation_status">
+                    <el-radio label="none">不操作</el-radio>
+                    <!-- <el-radio label="saveDel">替换</el-radio> -->
+                    <el-radio label="saveAdd">新增</el-radio>
+                    <el-radio label="fileTraining">培训</el-radio>
+                </el-radio-group>
+                </br>
+                用编辑的文件'替换'原文件
+                </br>
+                或通过选择文件模板，'新增'文件
+            </el-form-item>
 
+            <el-form-item>
+                <template slot="label">是否多选<help-tip prop="multiple" /></template>
+                <el-switch
+                    v-model="fieldOptions.multiple"
+                    @change="setDefaultValue"
+                />
+            </el-form-item>
+            <el-form-item v-if="fieldOptions.multiple" label-width="120px">
+                <template slot="label">
+                    <div class="ibps-ellipsis">最大上传数量<help-tip prop="fileQuantity" /></div>
+                </template>
+                <el-input-number v-model="fieldOptions.max_file_quantity" :min="1" style="width:100%;" />
+            </el-form-item>
+            <el-form-item label-width="120px">
+                <template slot="label">
+                    <div class="ibps-ellipsis">文件大小(单个)<help-tip prop="fileSize" /></div>
+                </template>
+                <el-input v-model="fieldOptions.max_file_size" placeholder="文件大小(单个)">
+                    <template slot="append">M</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">上传类型 <help-tip prop="fileType" /></template>
+                <el-select v-model="fieldOptions.media_type" style="width:100%;">
+                    <el-option value="" label="不限制" />
+                    <el-option v-for="fileType in fileTypeOptions" :key="fileType.value" :value="fileType.value" :label="fileType.label" />
+                </el-select>
+                <el-input v-if="fieldOptions.media_type==='custom'" v-model="media" type="textarea" rows="1" resize="none" autosize placeholder="自定义文件类型,逗号[,]分割" style="padding-top:5px;" />
+            </el-form-item>
 
-      <el-form-item>
-        <template slot="label">是否多选<help-tip prop="multiple" /></template>
-        <el-switch
-          v-model="fieldOptions.multiple"
-          @change="setDefaultValue"
-        />
-      </el-form-item>
-      <el-form-item v-if="fieldOptions.multiple" label-width="120px">
-        <template slot="label">
-          <div class="ibps-ellipsis">最大上传数量<help-tip prop="fileQuantity" /></div>
-        </template>
-        <el-input-number v-model="fieldOptions.max_file_quantity" :min="1" style="width:100%;" />
-      </el-form-item>
-      <el-form-item label-width="120px">
-        <template slot="label">
-          <div class="ibps-ellipsis">文件大小(单个)<help-tip prop="fileSize" /></div>
-        </template>
-        <el-input v-model="fieldOptions.max_file_size" placeholder="文件大小(单个)">
-          <template slot="append">M</template>
-        </el-input>
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">上传类型 <help-tip prop="fileType" /></template>
-        <el-select v-model="fieldOptions.media_type" style="width:100%;">
-          <el-option value="" label="不限制" />
-          <el-option v-for="fileType in fileTypeOptions" :key="fileType.value" :value="fileType.value" :label="fileType.label" />
-        </el-select>
-        <el-input v-if="fieldOptions.media_type==='custom'" v-model="media" type="textarea" rows="1" resize="none" autosize placeholder="自定义文件类型,逗号[,]分割" style="padding-top:5px;" />
-      </el-form-item>
-
-      <el-form-item>
-        <template slot="label">
-          允许下载
-        </template>
-        <el-switch v-model="fieldOptions.download" />
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">上传方式<help-tip prop="uploadType" /></template>
-        <el-select v-model="fieldOptions.uploadType" style="width:100%;">
-          <el-option
-            v-for="item in uploadTypeOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">存储格式<help-tip prop="fileStore" /></template>
-        <el-select v-model="fieldOptions.store" style="width:100%;">
-          <el-option
-            v-for="store in fileStoreOptions"
-            :key="store.value"
-            :value="store.value"
-            :label="store.label"
-          />
-        </el-select>
-      </el-form-item>
+            <el-form-item>
+                <template slot="label">
+                    允许下载
+                </template>
+                <el-switch v-model="fieldOptions.download" />
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">上传方式<help-tip prop="uploadType" /></template>
+                <el-select v-model="fieldOptions.uploadType" style="width:100%;">
+                    <el-option
+                        v-for="item in uploadTypeOptions"
+                        :key="item.value"
+                        :value="item.value"
+                        :label="item.label"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">存储格式<help-tip prop="fileStore" /></template>
+                <el-select v-model="fieldOptions.store" style="width:100%;">
+                    <el-option
+                        v-for="store in fileStoreOptions"
+                        :key="store.value"
+                        :value="store.value"
+                        :label="store.label"
+                    />
+                </el-select>
+            </el-form-item>
+        </div>
     </div>
-  </div>
 </template>
 <script>
 import { fileTypeOptions, fileStoreOptions, uploadTypeOptions } from '@/business/platform/form/constants/fieldOptions'
 import EditorMixin from '../mixins/editor'
 
 export default {
-  mixins: [EditorMixin],
-  data() {
-    return {
-      fileTypeOptions,
-      fileStoreOptions,
-      uploadTypeOptions,
-      media: ''
-    }
-  },
-  computed: {
-    mediaValue: {
-      get() {
-        return this.fieldOptions.media || ''
-      },
-      set(val) {
-        this.fieldItem.field_options.media = this.media = val
-      }
-    }
-  },
-  watch: {
-    media: {
-      handler(val, oldVal) {
-        if (val !== oldVal) {
-          this.mediaValue = this.fieldItem.field_options.media = val || ''
+    mixins: [EditorMixin],
+    data () {
+        return {
+            fileTypeOptions,
+            fileStoreOptions,
+            uploadTypeOptions,
+            media: ''
+        }
+    },
+    computed: {
+        mediaValue: {
+            get () {
+                return this.fieldOptions.media || ''
+            },
+            set (val) {
+                this.fieldItem.field_options.media = this.media = val
+            }
+        }
+    },
+    watch: {
+        media: {
+            handler (val, oldVal) {
+                if (val !== oldVal) {
+                    this.mediaValue = this.fieldItem.field_options.media = val || ''
+                }
+            },
+            immediate: true
         }
-      },
-      immediate: true
     }
-  }
 }
 </script>