fix: 添加示例配置

src/business/platform/data/templaterender/templates/list.vue

@@ -327,6 +327,20 @@
       :download="false"
       :readonly="true"
     />
+    <div v-if="filePreviewVisible">
+      <file-preview
+        :file="file"
+        :visible="filePreviewVisible"
+        @close="(visible) => (filePreviewVisible = visible)"
+      />
+    </div>
+    <div v-if="filePreviewVisible2">
+      <file-preview
+        :option-file="file"
+        :visible="filePreviewVisible2"
+        @close="(visible) => (filePreviewVisible2 = visible)"
+      />
+    </div>
   </div>
 </template>
 <script>
@@ -338,7 +352,6 @@ import {
 } from '@/api/platform/data/dataTemplate'
 import { startFlowFromList } from '@/api/platform/bpmn/bpmInst'
 import { getDatabaseType } from '@/api/platform/form/formDef'
-
 import fecha from '@/utils/fecha'
 import { debounce, toUpper, toLower, cloneDeep } from 'lodash'
 import ActionUtils from '@/utils/action'
@@ -349,11 +362,8 @@ import ButtonsConstants, {
   hasButton,
   hasSearchPermission
 } from '@/business/platform/data/constants/buttons'
-
 import { filterNumber } from '../utils'
-
 import BpmDefDialog from '@/business/platform/bpmn/definition/dialog'
-
 import SearchForm from '../../components/search-form/index'
 import DataTemplateFormrenderDialog from '../form/dialog'
 import IbpsAttachment from '@/business/platform/file/attachment/selector'
@@ -362,10 +372,8 @@ import IbpsCustomDialog from '@/business/platform/data/templaterender/custom-dia
 import IbpsLinkData from '@/business/platform/data/templaterender/link-data'
 import IbpsAddress from '@/components/ibps-address/cascader'
 import IbpsImage from '@/business/platform/file/image'
-
 import DictionaryFormat from '../components/format/dictionary-format'
 // import DataTemplateFormat from '../components/format/data-template-format'
-
 import IbpsExportColumnsDialog from '../components/export-columns-dialog'
 import IbpsImportColumnsDialog from '../components/import-columns-dialog'
 import CustomDataDisplayMixin from '@/business/platform/system/mixins/customDataDisplay'
@@ -373,10 +381,7 @@ import FormPrintTemplate from '@/business/platform/form/form-print/template'
 import importTable from '@/business/platform/form/formrender/dynamic-form/components/import-table'
 import uploadFile from '@/business/platform/form/formrender/dynamic-form/components/import-zip.vue'
 import JTemplate from '../utils/JTemplate' // 自定义脚本
-import JDialogTemplate from '../utils/JDialogTemplate' // 对话框自定义脚本
-
 import Scan from '@/views/system/jbdScan/scan.vue'
-
 // import BpmnFormrender from '@/vuew/business/platform/bpmn/form/dialog'//新增流程打开页面
 import IbpsExport from '@/plugins/export'
 import IbpsImport from '@/plugins/import'
@@ -386,6 +391,10 @@ Vue.component('ibps-data-template-render-dialog', () =>
 )
 import generalModules from '@/views/system/jbdScan/generalModules.vue'
 import { upload } from '@/api/upload/zip'
+import FilePreview from '@/business/platform/file/file-preview'
+import { fileTypes } from '@/business/platform/file/constants/fileTypes'
+import { get } from '@/api/platform/file/attachment'
+import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
 export default {
   name: 'list',
   components: {
@@ -407,9 +416,8 @@ export default {
     uploadFile,
     Print: () => import('../components/print'),
     LabelPrint: () => import('../components/labelPrint'),
-    generalModules
-    // BpmnFormrender
-    // DataTemplateFormat
+    generalModules,
+    FilePreview
   },
   filters: {
     filterNumber(data, fieldOptions = {}) {
@@ -450,6 +458,8 @@ export default {
   data() {
     const { first = '', second = '' } = this.$store.getters.level || {}
     return {
+      filePreviewVisible: false,
+      filePreviewVisible2: false,
       accept: '',
       uploadUrl: '',
       uploadTitle: '',
@@ -536,7 +546,14 @@ export default {
       timer: null,
       initOneButtons: [],
       initDblButtons: [],
-      pageInfo: {}
+      pageInfo: {},
+      file: {
+        fileName: '',
+        url: '',
+        editUrl: '',
+        title: '',
+        fileType: ''
+      }
     }
   },
   computed: {
@@ -626,6 +643,15 @@ export default {
     this.handleRefreshTable()
   },
   methods: {
+    getRemoteByIdFunc(id) {
+      return new Promise((resolve, reject) => {
+        get({ attachmentId: id })
+          .then((response) => {
+            resolve(response)
+          })
+          .catch(() => {})
+      })
+    },
     beforSearch(pageInfo) {
       console.log('pageInfopageInfopageInfo--->', pageInfo)
       this.pageInfo = pageInfo
@@ -671,6 +697,7 @@ export default {
       this.key = pkKey
     },
     initUI() {
+      console.log('this.template====>', this.template)
       this.initialization = false
       if (!this.initialization) {
         this.initJTemplate()
@@ -1207,6 +1234,51 @@ export default {
             break
           case 'custom': // 自定义按钮
             break
+          case 'example': // 示例
+            const { data } = await this.getRemoteByIdFunc(
+              this.template.attrs.formExample
+            )
+            console.log('data---->', data)
+            if (fileTypes.images.includes(data.ext)) {
+              this.file = data
+              this.filePreviewVisible2 = false
+              this.filePreviewVisible = true
+            } else if (data.ext === 'pdf' || data.ext === 'PDF') {
+              this.$nextTick(() => {
+                const newTab = window.open()
+                const link = newTab.document.createElement('link')
+                const url =
+                  BASE_API() +
+                  SYSTEM_URL() +
+                  '/file/download?attachmentId=' +
+                  data.id
+                const hasRole = localStorage.getItem('hasHighRole') || 0
+                link.rel = 'shortcut icon'
+                link.type = 'image/x-icon'
+                link.href = 'favicon.ico'
+                // newTab.document.write('<link rel="icon" type="image/x-icon" href="favicon.ico">')
+                newTab.document.write(
+                  `<title>文件预览页-${data.fileName}</title>`
+                )
+                newTab.document.write('<style>body { margin: 0px; }</style>')
+                newTab.document.head.appendChild(link)
+                newTab.document.write(
+                  `<iframe src="${
+                    this.$baseUrl
+                  }lib/pdfjs-dist/web/viewer.html?file=${encodeURIComponent(
+                    url
+                  )}&hasRole=${hasRole}" style="width:100%; height:100%;" frameborder="0";>`
+                )
+              })
+            } else {
+              this.file.url = `${this.$onlyofficeApi}/file/download?attachmentId=${data.id}`
+              this.file.editUrl = `${this.$onlyofficeApi}/file/editCallback?fileName=${data.fileName}&fileType=${data.ext}&id=${data.id}`
+              this.file.title = data.fileName // 文件名称
+              this.file.fileType = data.ext // 类型
+              this.filePreviewVisible = false
+              this.filePreviewVisible2 = true
+            }
+            break
           case 'openTask': // 编制，开启对应流程
             if (!button.deflow) {
               return this.$message.warning('请先配置对应流程！')
@@ -1467,6 +1539,8 @@ export default {
       const functionButtons = this.template.buttons
         ? this.template.buttons.function_buttons || []
         : []
+      // console.log('manageEffect===>', manageEffect)
+      // 添加示例按钮
       // 工具栏
       const toolbarButtons = []
       // 管理列
@@ -1540,6 +1614,24 @@ export default {
       // 显示字段
       const columns = []
       this.setDisplayColumns(this.template.display_columns || [], columns)
+      console.log('toolbarButtons===>', this.template.attrs)
+      if (this.template.attrs && this.template.attrs.formExample) {
+        toolbarButtons.push({
+          $index: toolbarButtons.length,
+          key: 'example',
+          button_type: 'example',
+          code: 'example',
+          label: '示例',
+          icon: '',
+          type: 'warning',
+          deflow: null,
+          isEditOnHis: false,
+          initAddDataCont: null,
+          disabled: false,
+          hidden: false,
+          position: 'toolbar'
+        })
+      }
       this.listConfig = {
         toolbars: toolbarButtons,
         columns: columns,