在线编辑封装组件 在列表打开弹出框

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

@@ -270,9 +270,13 @@
             :download="false"
             :readonly="true"
         />
+        <on-line-index :groove-data="grooveData" :groove-list="grooveList" :dialog-visible.sync="grooveDialogVisible" style="z-index: 9999;" />
+
     </div>
 </template>
 <script>
+import onLineIndex from '@/views/onLineEditing/onLineIndex'
+
 import { queryDataTable, removeFormData, exportData, checkExportData } from '@/api/platform/data/dataTemplate'
 import { startFlowFromList } from '@/api/platform/bpmn/bpmInst'
 import { getDatabaseType } from '@/api/platform/form/formDef'
@@ -339,7 +343,8 @@ export default {
         Print: () => import('../components/print'),
         LabelPrint: () => import('../components/labelPrint'),
         xlsxFile,
-        generalModules
+        generalModules,
+        onLineIndex
 
         // BpmnFormrender
         // DataTemplateFormat
@@ -445,7 +450,13 @@ export default {
 
             generalShow: false,
             currentType: '',
-            generalList: []
+            generalList: [],
+
+            grooveDialogVisible: false,
+            grooveData: {
+                title: ''
+            },
+            grooveList: []
         }
     },
     computed: {
@@ -1737,6 +1748,11 @@ export default {
         xlsxFileClose () {
             this.xlsxFileVisible = false
         },
+        getGroo (data, list) {
+            this.grooveData = data
+            this.grooveList = list
+            this.grooveDialogVisible = true
+        },
 
         // =================================处理脚本================================
         /**

src/views/onLineEditing/index.vue

@@ -1,24 +1,27 @@
 <template>
     <div class="test2">
         <div class="mb-md">
-            <div class="demo-input-suffix">
+            <div v-if="grooveData.xlsxTitleShow" class="demo-input-suffix">
                 表格名称：
                 <el-input v-model="title" placeholder="请输入表格名称" style="width: 400px" />
             </div>
-            <div class="demo-input-suffix">
+            <div v-if="grooveData.saveShow" class="demo-input-suffix">
                 <el-button type="success" @click="save">保存</el-button>
             </div>
-            <div class="demo-input-suffix">
+            <div v-if="grooveData.clickHandleShow" class="demo-input-suffix">
                 <el-button type="warning" @click="clickHandle">上传xlsx</el-button>
             </div>
             <div class="demo-input-suffix">
                 <el-button type="info" @click="exportExcelBtn">导出xlsx</el-button>
             </div>
             <input ref="inputFile" type="file" style="display: none" @change="chageFile">
+            <!-- <div v-if="!grooveData.xlsxTitleShow && !grooveData.saveShow && !grooveData.clickHandleShow && !grooveData.exportExcelShow" style="height: 30px"></div> -->
         </div>
         <!--web spreadsheet组件-->
         <div class="excel" :style="{height: height + 'px'}">
-            <div id="luckysheetDom" ref="luckysheet" style="margin: 0px; padding: 0px; width: 100%; height: 100%" />
+            <div id="luckysheetDom" ref="luckysheet" style="margin: 0px; padding: 0px; width:100%; height: 100%;z-index: 100;" />
+
+            <!-- <div id="luckysheetDom" ref="luckysheet" style="margin: 0px; padding: 0px; width: calc(100% + 200px); height: calc(100% + 50px);z-index: 100;" /> -->
         </div>
     </div>
 </template>
@@ -29,6 +32,7 @@ import LuckyExcel from 'luckyexcel'
 const luckysheet = window.luckysheet
 // 代码见下
 import { exportExcel } from './js/export'
+import { upload } from '@/api/detection/jtsjpz'
 import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
 export default {
     name: 'xspreadsheet-demo',
@@ -40,6 +44,28 @@ export default {
         dialogShow: {
             type: Boolean,
             default: false
+        },
+        grooveData: {
+            type: Object,
+            default: function () {
+                return {
+                    title: '提示',
+                    saveShow: true,
+                    exportExcelShow: true,
+                    clickHandleShow: true,
+                    xlsxTitleShow: true,
+                    readOnly: true,
+                    showtoolbarConfig: null,
+                    cellRightClickConfig: null,
+                    showstatisticBarConfig: null
+                }
+            }
+        },
+        grooveList: {
+            type: Array,
+            default: () => {
+                return []
+            }
         }
     },
     data () {
@@ -115,7 +141,7 @@ export default {
                 view: true, // 打印视图
                 zoom: true // 缩放
             },
-            title: '',
+            title: this.grooveData.title,
             height: ''
         }
     },
@@ -125,6 +151,24 @@ export default {
         } else {
             this.height = window.innerHeight - 150
         }
+
+        if (this.grooveData.showtoolbarConfig && Object.keys(this.grooveData.showtoolbarConfig).length > 0) {
+            Object.keys(this.grooveData.showtoolbarConfig).forEach(item => {
+                this.showtoolbarConfig[item] = this.grooveData.showtoolbarConfig[item]
+            })
+        }
+
+        if (this.grooveData.cellRightClickConfig && Object.keys(this.grooveData.cellRightClickConfig).length > 0) {
+            Object.keys(this.grooveData.cellRightClickConfig).forEach(item => {
+                this.cellRightClickConfig[item] = this.grooveData.cellRightClickConfig[item]
+            })
+        }
+
+        if (this.grooveData.showstatisticBarConfig && Object.keys(this.grooveData.showstatisticBarConfig).length > 0) {
+            Object.keys(this.grooveData.showstatisticBarConfig).forEach(item => {
+                this.showstatisticBarConfig[item] = this.grooveData.showstatisticBarConfig[item]
+            })
+        }
     },
     mounted () {
         if (this.id) {
@@ -136,7 +180,7 @@ export default {
     },
     destroyed () {
         luckysheet.destroy()
-        this.$refs.luckysheet.remove()
+        // this.$refs.luckysheet.remove()
     },
     methods: {
         init () {
@@ -157,6 +201,14 @@ export default {
                     showstatisticBarConfig: this.showstatisticBarConfig
                 }
             }
+            if (this.grooveList.length > 0) {
+                this.grooveList.forEach((item, index) => {
+                    if (!item.name) {
+                        item.name = 'sheet' + index
+                    }
+                })
+                options.data = this.grooveList
+            }
             // 可开启只读模式
             // options.allowEdit = false
             // this.option = options
@@ -184,9 +236,11 @@ export default {
         },
         // 下载文档
         exportExcelBtn () {
+            console.log(luckysheet.toJson())
             const title = this.title ? this.title : '下载'
             exportExcel(luckysheet.getluckysheetfile(), title)
         },
+
         // 上传文档
         clickHandle () {
             this.$refs.inputFile.click()
@@ -252,14 +306,15 @@ export default {
             const data = {
                 shu_ju_cun_chu_: JSON.stringify(option),
                 shu_ju_lei_xing_: '在线编辑',
-                shu_ju_ming_cheng: this.title
+                shu_ju_ming_cheng: this.title,
+                bao_cun_dao_chu_s: JSON.stringify(luckysheet.getluckysheetfile())
             }
             const params = {
                 tableName: 't_pbgl',
                 paramWhere: [data]
             }
             curdPost('add', params).then((res) => {
-                if (res.state === '200') {
+                if (res.state == '200') {
                     const dataItem = res.variables.cont[0]
                     this.id = dataItem.id_
                     this.$emit('addClick', dataItem.id_, dataItem)
@@ -287,7 +342,8 @@ export default {
                 param: {
                     shu_ju_cun_chu_: JSON.stringify(option),
                     shu_ju_lei_xing_: '在线编辑',
-                    shu_ju_ming_cheng: this.title
+                    shu_ju_ming_cheng: this.title,
+                    bao_cun_dao_chu_s: JSON.stringify(luckysheet.getluckysheetfile())
                 }
             }
             const allSampleParams = {

src/views/onLineEditing/js/export.js

@@ -1379,7 +1379,7 @@ var alignmentConvert = function (vt = 'default', ht = 'default', tb = 'default',
             0: 'middle',
             1: 'top',
             2: 'bottom',
-            default: 'top'
+            default: 'middle'
         },
         horizontal: {
             0: 'center',

src/views/onLineEditing/onLineIndex.vue

@@ -0,0 +1,80 @@
+<template>
+    <div>
+        <el-dialog
+            :title="grooveData.title || '提示'"
+            :visible.sync="show"
+            append-to-body
+            fullscreen
+            width="100%"
+            custom-class="customClass"
+            z-index="1000"
+        >
+            <on-line-editing :groove-data="grooveData" :groove-list="grooveList" :dialog-show="true" style="width: 100%;height: 100;" />
+        </el-dialog>
+        <!-- <div class="elDea">
+            <on-line-editing :groove-data="grooveData" :groove-list="grooveList" :dialog-show="true" style="width: 100%;height: 100;" />
+        </div> -->
+    </div>
+</template>
+<script>
+
+import onLineEditing from '@/views/onLineEditing/index'
+export default {
+    components: {
+        onLineEditing
+    },
+    props: {
+        dialogVisible: {
+            type: Boolean,
+            default: false
+        },
+        grooveData: {
+            type: Object,
+            default: function () {
+                return {
+                    title: '提示',
+                    saveShow: true,
+                    exportExcelShow: true,
+                    clickHandleShow: true,
+                    xlsxTitleShow: true,
+                    readOnly: true,
+                    showtoolbarConfig: null,
+                    cellRightClickConfig: null,
+                    showstatisticBarConfig: null
+                }
+            }
+        },
+        grooveList: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        }
+    },
+    data () {
+        return {
+            show: this.dialogVisible
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+<style  scoped>
+
+/deep/ .customClass .el-dialog__body{
+    z-index: 10;
+}
+
+.elDea{
+    background: #fff;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+}
+</style>
+