excel基础信息

report-ui/src/views/report/excelreport/designer/index.vue

@@ -11,7 +11,7 @@
         数据集管理
         <el-button type="text"
                    icon="el-icon-circle-plus-outline"
-                   @click="queryAllDataSet()" />
+                   @click="queryAllDataSet()"/>
       </div>
       <div>
         <el-collapse v-for="(item, indexs) in dataSet"
@@ -25,7 +25,7 @@
               <el-button slot="reference"
                          type="text"
                          icon="el-icon-close"
-                         class="delect-all" />
+                         class="delect-all"/>
             </el-popconfirm>
             <draggable v-model="item.setParamList"
                        :sort="false"
@@ -68,9 +68,9 @@
         </el-tooltip>
       </div>
       <div id="luckysheet"
-           style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;" />
+           style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;"/>
       <div id="qrCode"
-           ref="qrCodeDiv" />
+           ref="qrCodeDiv"/>
       <img id="barCode">
     </div>
 
@@ -83,60 +83,10 @@
                    :model="rightForm"
                    label-width="60px">
             <el-form-item label="坐标">
-              <el-input v-model="rightForm.coordinate" />
+              <el-input v-model="rightForm.coordinate"/>
             </el-form-item>
             <el-form-item label="值">
-              <el-input v-model="rightForm.value" />
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane v-if="dialogVisible"
-                     label="二维码配置"
-                     name="second">
-          <el-form ref="qrCodeForm"
-                   :model="qrCodeForm"
-                   label-width="60px">
-            <el-form-item label="二维码内容">
-              <el-input v-model="qrCodeForm.content" />
-            </el-form-item>
-            <el-form-item label="宽度">
-              <el-input v-model="qrCodeForm.width" />
-            </el-form-item>
-            <el-form-item label="高度">
-              <el-input v-model="qrCodeForm.height" />
-            </el-form-item>
-            <el-form-item label="前景色">
-              <ColorPicker v-model="qrCodeForm.colorDark"
-                           @change="(val) => changed(val,qrCodeForm.colorDark)" />
-            </el-form-item>
-            <el-form-item label="背景色">
-              <ColorPicker v-model="qrCodeForm.colorLight"
-                           @change="(val) => changed(val,qrCodeForm.colorLight)" />
-            </el-form-item>
-          </el-form>
-        </el-tab-pane>
-        <el-tab-pane v-if="dialogBarCode"
-                     label="条形码配置"
-                     name="second">
-          <el-form ref="barCodeForm"
-                   :model="barCodeForm"
-                   label-width="60px">
-            <el-form-item label="条形码内容">
-              <el-input v-model="barCodeForm.content" />
-            </el-form-item>
-            <el-form-item label="宽度">
-              <el-input v-model="barCodeForm.width" />
-            </el-form-item>
-            <el-form-item label="高度">
-              <el-input v-model="barCodeForm.height" />
-            </el-form-item>
-            <el-form-item label="前景色">
-              <ColorPicker v-model="barCodeForm.lineColor"
-                           @change="(val) => changed(val,barCodeForm.lineColor)" />
-            </el-form-item>
-            <el-form-item label="背景色">
-              <ColorPicker v-model="barCodeForm.background"
-                           @change="(val) => changed(val,barCodeForm.background)" />
+              <el-input v-model="rightForm.value"/>
             </el-form-item>
           </el-form>
         </el-tab-pane>
@@ -152,68 +102,24 @@
                 style="width: 100%;height: 60vh;overflow-y: scroll;"
                 @selection-change="handleSelectionChange">
         <el-table-column type="selection"
-                         width="55" />
+                         width="55"/>
         <el-table-column label="数据集名称"
                          width="120"
-                         prop="setName" />
+                         prop="setName"/>
         <el-table-column prop="setDesc"
                          label="数据集描述"
-                         width="180" />
+                         width="180"/>
         <el-table-column prop="setCode"
                          label="数据集编码"
-                         show-overflow-tooltip />
+                         show-overflow-tooltip/>
       </el-table>
 
       <div slot="footer"
            class="dialog-footer">
         <el-button @click="outerVisible = false">取 消</el-button>
         <el-button type="primary"
-                   @click="checkDataSet()">确定</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog title="打印设置"
-               :visible.sync="printVisible"
-               width="30%"
-               :before-close="handleClose">
-
-      <el-form label-position="right"
-               label-width="90px"
-               :model="formPrintSetting">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="纸张大小">
-              <el-select v-model="formPrintSetting.size"
-                         placeholder="请选择打印尺寸"
-                         @change="onPaperChange">
-                <el-option v-for="(item, index) in paperList"
-                           :key="index"
-                           :index="index"
-                           :value="item.paper"
-                           :label="getPaperText(item)" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="14">
-            <el-form-item label="对应像素">
-              <el-input v-model="formPrintSetting.pixel1"
-                        disabled />
-            </el-form-item>
-          </el-col>
-          <el-col :span="10">
-            <el-form-item label=" "
-                          label-width="12px">
-              <el-input v-model="formPrintSetting.pixel2"
-                        disabled />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-      </el-form>
-      <div slot="footer"
-           class="dialog-footer">
-        <el-button @click="printVisible = false">取 消</el-button>
-        <el-button type="primary"
-                   @click="getWindowDpi()">确定</el-button>
+                   @click="checkDataSet()">确定
+        </el-button>
       </div>
     </el-dialog>
   </div>
@@ -222,8 +128,8 @@
 
 <script>
 import draggable from 'vuedraggable'
-import { queryAllDataSet, detail, detailByReportCode } from '@/api/GaeaReport'
-import { addReportExcel, editReportExcel } from '@/api/report'
+import {queryAllDataSet, detail, detailByReportCode} from '@/api/GaeaReport'
+import {addReportExcel, editReportExcel} from '@/api/report'
 import ColorPicker from '../../bigscreen/designer/form/colorPicker.vue'
 // import QRCode from 'qrcodejs2'
 // import JsBarcode from 'jsbarcode'
@@ -233,7 +139,7 @@ export default {
     draggable,
     ColorPicker,
   },
-  data () {
+  data() {
     return {
       activeName: 'first',
       activeNames: ['1'],
@@ -287,11 +193,11 @@ export default {
         pixel2: ''
       },
       pixelList: [
-        { paper: 'A4', width: 210, height: 297 },
-        { paper: 'A3', width: 297, height: 420 },
-        { paper: 'Letter', width: 216, height: 279 },
-        { paper: 'Legal', width: 216, height: 355 },
-        { paper: 'Executive', width: 184, height: 266 }
+        {paper: 'A4', width: 210, height: 297},
+        {paper: 'A3', width: 297, height: 420},
+        {paper: 'Letter', width: 216, height: 279},
+        {paper: 'Legal', width: 216, height: 355},
+        {paper: 'Executive', width: 184, height: 266}
       ],
       dataSet: [],
       outerVisible: false,
@@ -325,27 +231,26 @@ export default {
 
     }
   },
-  mounted () {},
-  created () {
+  mounted() {
+  },
+  created() {
     this.reportCode = this.$route.query.reportCode
     this.accessKey = this.$route.query.accessKey
     this.loadDataSet()
     this.design()
-    this.initPaperList()
-    this.getWindowDpi()
   },
   methods: {
-    handleClose () {
+    handleClose() {
       this.printVisible = false
     },
-    handleChange (val) {
+    handleChange(val) {
     },
     // 右侧信息配置tabs
-    handleClick (tab, event) {
+    handleClick(tab, event) {
     },
-    async design () {
+    async design() {
       // 根据reportCode获取单条报表
-      const { code, data } = await detailByReportCode(this.reportCode)
+      const {code, data} = await detailByReportCode(this.reportCode)
       if (data != null) {
         this.reportId = data.id
       }
@@ -366,15 +271,15 @@ export default {
       }
     },
     //初始化表格
-    createSheet(){
+    createSheet() {
       //将vue对象传入
       const that = this
       const options = {
         container: 'luckysheet', // 设定DOM容器的id
         title: 'Luckysheet Demo', // 设定表格名称
         lang: 'zh', // 设定表格语言
-        plugins:['chart'],
-        hook:{
+        plugins: ['chart'],
+        hook: {
           cellDragStop: function (cell, postion, sheetFile, ctx, event) {
             // console.info("cellDragStop-cell",cell);
             // console.info("cellDragStop-postion", postion);
@@ -384,8 +289,12 @@ export default {
             // console.log("cellDragStop-draggableFieldLabel", that);
             luckysheet.setCellValue(postion.r, postion.c, that.draggableFieldLabel)
           },
+          cellMousedown: function (cell, postion, sheetFile, ctx) {
+            that.rightForm.coordinate = postion.r + "," + postion.c
+            that.rightForm.value = cell == null ? '' : cell.v;
+          },
         },
-        data:[
+        data: [
           {
             "name": "report", //工作表名称
             "color": "", //工作表颜色
@@ -399,21 +308,21 @@ export default {
             "defaultColWidth": 73, //自定义列宽
             "celldata": [], //初始化使用的单元格数据
             "config": {
-              "merge":{}, //合并单元格
-              "rowlen":{}, //表格行高
-              "columnlen":{}, //表格列宽
-              "rowhidden":{}, //隐藏行
-              "colhidden":{}, //隐藏列
-              "borderInfo":{}, //边框
-              "authority":{}, //工作表保护
+              "merge": {}, //合并单元格
+              "rowlen": {}, //表格行高
+              "columnlen": {}, //表格列宽
+              "rowhidden": {}, //隐藏行
+              "colhidden": {}, //隐藏列
+              "borderInfo": {}, //边框
+              "authority": {}, //工作表保护
 
             },
             "scrollLeft": 0, //左右滚动条位置
             "scrollTop": 315, //上下滚动条位置
             "luckysheet_select_save": [], //选中的区域
             "calcChain": [],//公式链
-            "isPivotTable":false,//是否数据透视表
-            "pivotTable":{},//数据透视表设置
+            "isPivotTable": false,//是否数据透视表
+            "pivotTable": {},//数据透视表设置
             "filter_select": {},//筛选范围
             "filter": null,//筛选配置
             "luckysheet_alternateformat_save": [], //交替颜色
@@ -421,10 +330,10 @@ export default {
             "luckysheet_conditionformat_save": {},//条件格式
             "frozen": {}, //冻结行列配置
             "chart": [], //图表配置
-            "zoomRatio":1, // 缩放比例
-            "image":[], //图片
+            "zoomRatio": 1, // 缩放比例
+            "image": [], //图片
             "showGridLines": 1, //是否显示网格线
-            "dataVerification":{} //数据验证配置
+            "dataVerification": {} //数据验证配置
           }
         ]
       };
@@ -438,15 +347,15 @@ export default {
       this.setCode = setCode
       var fieldLabel = evt.item.innerText // 列名称
       this.draggableFieldLabel = '#{' + this.setCode + '.' + fieldLabel + '}';
-      console.log("evt",evt)
+      console.log("evt", evt)
       console.log("draggableFieldLabel", this.draggableFieldLabel);
     },
-    async loadDataSet () {
-      const { code, data } = await queryAllDataSet()
+    async loadDataSet() {
+      const {code, data} = await queryAllDataSet()
       this.dataSetData = data
       if (code != '200') return
     },
-    doCancel () {
+    doCancel() {
       this.pop = false
     },
     async save() {
@@ -489,23 +398,23 @@ export default {
       }
     },
 
-    async detailByReportCode (reportCode) {
-      const { code, data } = await detailByReportCode(reportCode)
+    async detailByReportCode(reportCode) {
+      const {code, data} = await detailByReportCode(reportCode)
       if (data != null) {
         this.reportId = data.id
       }
     },
-    async preview () {
-      var routeUrl = this.$router.resolve({ path: '/excelreport/viewer', query: { reportCode: this.reportCode } })
+    async preview() {
+      var routeUrl = this.$router.resolve({path: '/excelreport/viewer', query: {reportCode: this.reportCode}})
       window.open(routeUrl.href, '_blank')
     },
-    async queryAllDataSet () {
+    async queryAllDataSet() {
       this.outerVisible = true
     },
-    handleSelectionChange (val) {
+    handleSelectionChange(val) {
       this.multipleSelection = val
     },
-    checkDataSet () {
+    checkDataSet() {
       this.outerVisible = false
       if (this.multipleSelection.length > 1) {
         this.$message({
@@ -517,8 +426,8 @@ export default {
         this.detail(this.multipleSelection[0].id)
       }
     },
-    async detail (id) {
-      const { code, data } = await detail(id)
+    async detail(id) {
+      const {code, data} = await detail(id)
       if (code != 200) return
       var flag = true
       this.dataSet.forEach((value) => {
@@ -530,180 +439,14 @@ export default {
         this.dataSet.push(data)
       }
     },
-    del (val) {
+    del(val) {
       for (let i = 0; i < this.dataSet.length; i++) {
         if (this.dataSet[i].setCode === val.setCode) {
           this.dataSet.splice(i, 1)
         }
       }
     },
-    // 无论哪个输入框改变 都需要触发事件 将值回传
-    changed (val, key) {
-    },
-    testClick () {
-      console.log('sdsdsddsd')
-    },
-    // 获取回传的参数
-    getEmitParam () {
-      return {
-        paper: this.formPrintSetting.size,
-        width: this.formPrintSetting.width,
-        height: this.formPrintSetting.height,
-        isBackend: this.isBackend
-      }
-    },
-    // 纸张大小改变事件
-    onPaperChange (value) {
-      const arr = this.paperList.filter(item => {
-        return item.paper === value
-      })
-      this.resetForm(arr[0])
-    },
-    resetForm: function (param) {
-      if (param) {
-        this.paper = param.paper
-        this.width = param.width
-        this.height = param.height
-        this.formPrintSetting.pixel1 = this.getPxWidth(param.width) + 'px'
-        this.formPrintSetting.pixel2 = this.getPxHeight(param.height) + 'px'
-        if (param.definition) {
-          this.definition = param.definition
-        }
-        if (param.isBackend === true || param.isBackend === false) {
-          this.isBackend = param.isBackend
-        }
-      }
-    },
-    getPaperText (item) {
-      return item.paper + '：' + item.width + 'mm x ' + item.height + 'mm'
-    },
-    initPaperList () {
-      let printPaper = []
-      if (this.config) {
-        const config2 = JSON.parse(this.config)
-        if (config2 && config2['printPaper']) {
-          printPaper = config2['printPaper']
-        }
-      }
-      const arr = []
-      for (const item of this.pixelList) {
-        arr.push(item)
-      }
-      for (const item of printPaper) {
-        arr.push({
-          paper: item.title, width: item['size'][0], height: item['size'][1]
-        })
-      }
-      this.paperList = [...arr]
-    },
-
-    // 获取窗口dpi
-    getWindowDpi () {
-      // 25.41 1英寸=25.41mm 96是window默认dpi,mac:72
-      this.printVisible = false
-      // eslint-disable-next-line no-array-constructor
-      const arrDPI = new Array()
-      if (window.screen.deviceXDPI != undefined) {
-        arrDPI[0] = window.screen.deviceXDPI
-        arrDPI[1] = window.screen.deviceYDPI
-      } else {
-        const tmpNode = document.createElement('div')
-        tmpNode.style.cssText = 'width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden'
-        document.body.appendChild(tmpNode)
-        arrDPI[0] = parseInt(tmpNode.offsetWidth)
-        arrDPI[1] = parseInt(tmpNode.offsetHeight)
-        tmpNode.parentNode.removeChild(tmpNode)
-      }
-      this.dpi = [...arrDPI]
-    },
-    // 获取像素宽
-    getPxWidth (width) {
-      let margin = 10
-      if (this.isBackend == true) {
-        margin = 0
-      }
-      return Math.ceil((width - margin * 2) / 25.41 * this.dpi[0])
-    },
-    // 获取像素高
-    getPxHeight (height) {
-      let margin = 10
-      if (this.isBackend == true) {
-        margin = 0
-      }
-      return Math.ceil((height - margin * 2) / 25.41 * this.dpi[1])
-    },
-
-    uploadExcel (evt) {
-      const files = evt.target.files
-      if (files == null || files.length == 0) {
-        alert('No files wait for import')
-        return
-      }
-
-      const name = files[0].name
-      const suffixArr = name.split('.'); const suffix = suffixArr[suffixArr.length - 1]
-      if (suffix != 'xlsx') {
-        alert('Currently only supports the import of xlsx files')
-        return
-      }
-      LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
-        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
-          alert('Failed to read the content of the excel file, currently does not support xls files!')
-          return
-        }
-        window.luckysheet.destroy()
-
-        window.luckysheet.create({
-          container: 'luckysheet', // luckysheet is the container id
-          showinfobar: false,
-          data: exportJson.sheets,
-          title: exportJson.info.name,
-          userInfo: exportJson.info.name.creator
-        })
-      })
-    },
-    selectExcel (evt) {
-      const value = this.selected
-      const name = evt.target.options[evt.target.selectedIndex].innerText
-
-      if (value == '') {
-        return
-      }
-
-      LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {
-        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
-          alert('Failed to read the content of the excel file, currently does not support xls files!')
-          return
-        }
-
-        window.luckysheet.destroy()
-
-        window.luckysheet.create({
-          container: 'luckysheet', // luckysheet is the container id
-          showinfobar: false,
-          data: exportJson.sheets,
-          title: exportJson.info.name,
-          userInfo: exportJson.info.name.creator
-        })
-      })
-    },
-    downloadExcel () {
-      const value = this.selected
 
-      if (value.length == 0) {
-        alert('Please select a demo file')
-        return
-      }
-
-      var elemIF = document.getElementById('Lucky-download-frame')
-      if (elemIF == null) {
-        elemIF = document.createElement('iframe')
-        elemIF.style.display = 'none'
-        elemIF.id = 'Lucky-download-frame'
-        document.body.appendChild(elemIF)
-      }
-      elemIF.src = value
-    }
   },
 }
 </script>
@@ -718,26 +461,32 @@ export default {
 #barCode {
   display: none;
 }
+
 .yulancopy {
   font-size: 16px;
 }
+
 .baocun {
   font-size: 17px;
 }
+
 .el-collapse {
   position: relative;
   border-top: 0 solid #e6ebf5;
   border-bottom: 0 solid #e6ebf5;
 }
+
 .el-collapse-item__header {
   border-bottom: 0 solid #e6ebf5 !important;
 }
+
 .delect-all {
   position: absolute;
   top: 10px;
   right: 30px;
   color: #333;
 }
+
 .push_btn {
   position: absolute;
   z-index: 100;