update 报表设计 表格报表

report-ui/src/router/index.js

@@ -167,7 +167,7 @@ export const constantRouterMap = [
       { 
         path: 'excelreport', 
         name: 'excelreport', 
-        component: () => import('@/views/report/excelreport/index'), 
+        component: () => import('@/views/excelreport/index'), 
         meta: { 
           title: '表格报表', 
           icon: 'iconliebiao', 
@@ -246,7 +246,7 @@ export const constantRouterMap = [
   },
   { 
     path: '/excelreport/viewer', 
-    component: () => import('@/views/report/excelreport/viewer'), 
+    component: () => import('@/views/excelreport/viewer'), 
     hidden: true, 
     meta: { 
       requireAuth: true 
@@ -254,7 +254,7 @@ export const constantRouterMap = [
   },
   { 
     path: '/excelreport/designer', 
-    component: () => import('@/views/report/excelreport/designer'), 
+    component: () => import('@/views/excelreport/designer'), 
     hidden: true, 
     meta: { 
       requireAuth: true 

report-ui/src/views/excelreport/components/colorPicker.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-input
+    clearable
+    v-model="colorValue"
+    placeholder="请输入颜色"
+    size="mini"
+    @change="changeColor"
+  >
+    <template slot="append">
+      <el-color-picker
+        v-model="colorValue"
+        :predefine="predefineColors"
+        show-alpha
+        size="mini"
+        @change="changeColor"
+      />
+    </template>
+  </el-input>
+</template>
+
+<script>
+export default {
+  name: "ColorPicker",
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  props: {
+    value: {
+      type: [String],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      predefineColors: [
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585"
+      ],
+      colorValue: ""
+    };
+  },
+  watch: {
+    value(val) {
+      this.colorValue = val || "";
+    }
+  },
+  mounted() {
+    this.colorValue = this.value;
+  },
+  methods: {
+    changeColor(val) {
+      this.colorValue = val || "";
+      this.$emit("input", this.colorValue);
+      this.$emit("change", this.colorValue);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+/deep/.el-color-picker--mini,
+/deep/.el-color-picker--mini .el-color-picker__trigger {
+  width: 23px;
+  height: 23px;
+}
+</style>

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

@@ -133,7 +133,7 @@
 import draggable from "vuedraggable";
 import { queryAllDataSet, detail, detailByReportCode } from "@/api/GaeaReport";
 import { addReportExcel, editReportExcel } from "@/api/report";
-import ColorPicker from "../../bigscreen/designer/designerComponents/colorPicker.vue";
+import ColorPicker from "../components/colorPicker.vue";
 // import QRCode from 'qrcodejs2'
 // import JsBarcode from 'jsbarcode'
 export default {
@@ -457,7 +457,7 @@ export default {
 };
 </script>
 
-<style src="../../../../../static/luckysheet/assets/iconfont/iconfont.css" />
+<style src="../../../../static/luckysheet/assets/iconfont/iconfont.css" />
 <style scoped lang="scss">
 .position {
   position: absolute;

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

@@ -1,4 +1,5 @@
 <!--
+ * @Descripttion: 报表设计--表格报表
  * @Author: lide1202@hotmail.com
  * @Date: 2021-3-13 11:04:24
  * @Last Modified by:   lide1202@hotmail.com
@@ -49,7 +50,7 @@
             class="bg-img"
             :src="
               item.reportImage == null || item.reportImage == ''
-                ? require('../../../assets/images/charts.jpg')
+                ? require('@/assets/images/charts.jpg')
                 : item.reportImage
             "
             alt=""

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

@@ -0,0 +1,274 @@
+<!--
+ * @Author: lide1202@hotmail.com
+ * @Date: 2021-3-13 11:04:24
+ * @Last Modified by:   lide1202@hotmail.com
+ * @Last Modified time: 2021-3-13 11:04:24
+ !-->
+<template>
+  <div class="layout">
+    <div class="layout-right">
+      <div class="block">
+        <div class="download">
+          <a v-if="reportCode != null" download="xxx.xlsx">
+            <el-button type="text" @click="download('gaea_template_excel')">
+              <i class="iconfont iconexcel"></i>导出excel
+            </el-button>
+          </a>
+          <a v-if="reportCode != null" download="xxx.pdf">
+            <el-button type="text" @click="download('gaea_template_pdf')">
+              <i class="iconfont iconpdf"></i>导出pdf
+            </el-button>
+          </a>
+        </div>
+        <el-form class="">
+          <h2>表格查询</h2>
+          <div v-for="(item, num) in tableData2" :key="num + 'excel'">
+            <h4>{{ item.name }}</h4>
+            <div
+              v-for="(son, y) in item.children"
+              :key="y + 'excel2'"
+              class="search_input"
+            >
+              <label>{{ son.name }}：</label>
+              <el-input v-model="son.value" />
+            </div>
+          </div>
+          <el-button style="width: 100%" @click="searchPreview">查询</el-button>
+        </el-form>
+        <!--<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
+      </div>
+    </div>
+    <div class="layout-middle">
+      <div
+        id="luckysheet"
+        style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { preview, exportExcel } from "@/api/GaeaReport";
+
+export default {
+  name: "Login",
+  components: {},
+  data() {
+    return {
+      options: {},
+      sheet: {},
+      reportId: null,
+      reportCode: null,
+      reportName: null,
+      dataSet: null,
+      tableData2: [],
+      excelData: {},
+      params: {
+        reportCode: "",
+        setParam: ""
+      }
+    };
+  },
+  mounted() {
+    this.preview();
+  },
+  created() {
+    this.reportCode = this.$route.query.reportCode;
+  },
+  methods: {
+    async searchPreview() {
+      const arr = this.toObject(this.tableData2);
+      this.params.setParam = JSON.stringify(arr);
+      //每次都重新加载需要改成刷新
+      this.preview();
+    },
+    async preview() {
+      this.excelData = {};
+      this.params.reportCode = this.reportCode;
+      const { code, data } = await preview(this.params);
+      if (code != 200) return;
+      this.reportName = JSON.parse(data.jsonStr).name;
+      // 渲染查询表单
+      this.params.setParam = JSON.parse(data.setParam);
+      const extendArry = [];
+      const extendObj = this.params.setParam;
+      for (const i in extendObj) {
+        const children = [];
+        for (const y in extendObj[i]) {
+          children.push({ name: y, value: extendObj[i][y] });
+        }
+        extendArry.push({ name: i, children: children });
+      }
+      this.tableData2 = extendArry;
+
+      this.excelData = data.jsonStr;
+      this.sheetData = data == null ? [{}] : JSON.parse(data.jsonStr);
+      // console.log(this.excelData)
+      // console.log(this.sheetData)
+      this.createSheet();
+    },
+    async download(val) {
+      if (val == "gaea_template_pdf") {
+        this.$message("暂不支持pdf");
+        return;
+      }
+      const result = {};
+      result["reportCode"] = this.reportCode;
+      result["setParam"] = JSON.stringify(this.params.setParam);
+      if (val != "") {
+        result["exportType"] = val;
+      }
+      const { code, message } = await exportExcel(result);
+      if (code != 200) return;
+      this.$message.success(message);
+    },
+    // 表单封装json
+    toObject(val) {
+      const objfirst = {};
+      const objSecond = {};
+      val.forEach(el => {
+        el.name ? (objfirst[el.name] = el.children) : "";
+      });
+      for (const key in objfirst) {
+        const newObj = {};
+        objfirst[key].map(ev => {
+          Object.assign(newObj, { [ev.name]: ev.value });
+        });
+        objSecond[key] = newObj;
+      }
+      return objSecond;
+    },
+    //初始化表格
+    createSheet() {
+      const options = {
+        container: "luckysheet", // 设定DOM容器的id
+        title: "Luckysheet Demo", // 设定表格名称
+        lang: "zh", // 设定表格语言
+        plugins: ["chart"],
+        data: [
+          {
+            name: "report", //工作表名称
+            color: "", //工作表颜色
+            index: 0, //工作表索引
+            status: 1, //激活状态
+            order: 0, //工作表的下标
+            hide: 0, //是否隐藏
+            row: 36, //行数
+            column: 18, //列数
+            defaultRowHeight: 19, //自定义行高
+            defaultColWidth: 73, //自定义列宽
+            celldata: [], //初始化使用的单元格数据
+            config: {
+              merge: {}, //合并单元格
+              rowlen: {}, //表格行高
+              columnlen: {}, //表格列宽
+              rowhidden: {}, //隐藏行
+              colhidden: {}, //隐藏列
+              borderInfo: {}, //边框
+              authority: {} //工作表保护
+            },
+            scrollLeft: 0, //左右滚动条位置
+            scrollTop: 315, //上下滚动条位置
+            luckysheet_select_save: [], //选中的区域
+            calcChain: [], //公式链
+            isPivotTable: false, //是否数据透视表
+            pivotTable: {}, //数据透视表设置
+            filter_select: {}, //筛选范围
+            filter: null, //筛选配置
+            luckysheet_alternateformat_save: [], //交替颜色
+            luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
+            luckysheet_conditionformat_save: {}, //条件格式
+            frozen: {}, //冻结行列配置
+            chart: [], //图表配置
+            zoomRatio: 1, // 缩放比例
+            image: [], //图片
+            showGridLines: 1, //是否显示网格线
+            dataVerification: {} //数据验证配置
+          }
+        ]
+      };
+      options.data = this.sheetData;
+      // console.log(this.sheetData)
+      $(function() {
+        luckysheet.create(options);
+      });
+    }
+  }
+};
+</script>
+
+<style src="../../../../static/luckysheet/assets/iconfont/iconfont.css" />
+<style scoped lang="scss">
+.download {
+  width: 100%;
+  float: left;
+  button {
+    color: #444;
+    width: 90px;
+    text-align: left;
+    .svg-icon {
+      font-size: 16px;
+      margin-right: 10px;
+    }
+  }
+}
+.block {
+  position: relative;
+  z-index: 10000;
+  top: 0;
+  background: #fff;
+  width: 100%;
+  h2 {
+    font-size: 14px;
+    line-height: 30px;
+  }
+  h4 {
+    font-size: 12px;
+  }
+  .search_input {
+    font-size: 12px;
+    margin-bottom: 10px;
+    label {
+      line-height: 20px;
+    }
+  }
+}
+.layout {
+  display: block;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+.layout-middle {
+  display: block;
+  position: absolute;
+  left: 200px;
+  right: 0;
+  width: calc(100% - 200px);
+  margin: 0;
+  padding: 0;
+
+  .excel-designer {
+    display: block;
+    position: relative;
+    margin: 0;
+    padding: 0;
+  }
+}
+.layout-right {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 20px;
+  width: 200px;
+  min-height: 99.98vh;
+  border-left: 1px solid #dcdee2;
+  border-color: #e8eaec;
+  background: #fff;
+  border-radius: 4px;
+  font-size: 14px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+</style>

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

@@ -1,278 +0,0 @@
-<!--
- * @Author: lide1202@hotmail.com
- * @Date: 2021-3-13 11:04:24
- * @Last Modified by:   lide1202@hotmail.com
- * @Last Modified time: 2021-3-13 11:04:24
- !-->
-<template>
-  <div class="layout">
-    <div class="layout-right">
-      <div class="block">
-        <div class="download">
-          <a v-if="reportCode != null"
-             download="xxx.xlsx">
-            <el-button type="text"
-                       @click="download('gaea_template_excel')">
-              <i class="iconfont iconexcel"></i>导出excel
-            </el-button>
-          </a>
-          <a v-if="reportCode != null"
-             download="xxx.pdf">
-            <el-button type="text"
-                       @click="download('gaea_template_pdf')">
-              <i class="iconfont iconpdf"></i>导出pdf
-            </el-button>
-          </a>
-        </div>
-        <el-form class="">
-
-          <h2>表格查询</h2>
-          <div v-for="(item, num) in tableData2"
-               :key="num + 'excel'">
-            <h4>{{ item.name }}</h4>
-            <div v-for="(son, y) in item.children"
-                 :key="y + 'excel2'"
-                 class="search_input">
-              <label>{{ son.name }}：</label>
-              <el-input v-model="son.value" />
-            </div>
-          </div>
-          <el-button style="width: 100%"
-                     @click="searchPreview">查询</el-button>
-        </el-form>
-        <!--<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
-      </div>
-    </div>
-    <div class="layout-middle">
-      <div id="luckysheet"
-           style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { preview, exportExcel } from '@/api/GaeaReport'
-
-export default {
-  name: 'Login',
-  components: {},
-  data () {
-    return {
-      options: {},
-      sheet: {},
-      reportId: null,
-      reportCode: null,
-      reportName: null,
-      dataSet: null,
-      tableData2: [],
-      excelData: {},
-      params: {
-        reportCode: '',
-        setParam: '',
-      },
-    }
-  },
-  mounted () {
-    this.preview()
-  },
-  created () {
-    this.reportCode = this.$route.query.reportCode
-  },
-  methods: {
-    async searchPreview () {
-      const arr = this.toObject(this.tableData2)
-      this.params.setParam = JSON.stringify(arr)
-      //每次都重新加载需要改成刷新
-      this.preview()
-    },
-    async preview () {
-      this.excelData = {}
-      this.params.reportCode = this.reportCode
-      const { code, data } = await preview(this.params)
-      if (code != 200) return
-      this.reportName = JSON.parse(data.jsonStr).name
-      // 渲染查询表单
-      this.params.setParam = JSON.parse(data.setParam)
-      const extendArry = []
-      const extendObj = this.params.setParam
-      for (const i in extendObj) {
-        const children = []
-        for (const y in extendObj[i]) {
-          children.push({ name: y, value: extendObj[i][y] })
-        }
-        extendArry.push({ name: i, children: children })
-      }
-      this.tableData2 = extendArry
-
-      this.excelData = data.jsonStr
-      this.sheetData = (data == null ? [{}] : JSON.parse(data.jsonStr))
-      // console.log(this.excelData)
-      // console.log(this.sheetData)
-      this.createSheet();
-    },
-    async download(val) {
-      if (val == 'gaea_template_pdf') {
-        this.$message('暂不支持pdf');
-        return
-      }
-      const result = {};
-      result['reportCode'] = this.reportCode
-      result['setParam'] = JSON.stringify(this.params.setParam)
-      if (val != '') {
-        result['exportType'] = val
-      }
-      const {code, message} = await exportExcel(result)
-      if (code != 200) return
-      this.$message.success(message);
-    },
-    // 表单封装json
-    toObject (val) {
-      const objfirst = {}
-      const objSecond = {}
-      val.forEach((el) => {
-        el.name ? (objfirst[el.name] = el.children) : ''
-      })
-      for (const key in objfirst) {
-        const newObj = {}
-        objfirst[key].map((ev) => {
-          Object.assign(newObj, { [ev.name]: ev.value })
-        })
-        objSecond[key] = newObj
-      }
-      return objSecond
-    },
-    //初始化表格
-    createSheet(){
-      const options = {
-        container: 'luckysheet', // 设定DOM容器的id
-        title: 'Luckysheet Demo', // 设定表格名称
-        lang: 'zh', // 设定表格语言
-        plugins:['chart'],
-        data:[
-          {
-            "name": "report", //工作表名称
-            "color": "", //工作表颜色
-            "index": 0, //工作表索引
-            "status": 1, //激活状态
-            "order": 0, //工作表的下标
-            "hide": 0,//是否隐藏
-            "row": 36, //行数
-            "column": 18, //列数
-            "defaultRowHeight": 19, //自定义行高
-            "defaultColWidth": 73, //自定义列宽
-            "celldata": [], //初始化使用的单元格数据
-            "config": {
-              "merge":{}, //合并单元格
-              "rowlen":{}, //表格行高
-              "columnlen":{}, //表格列宽
-              "rowhidden":{}, //隐藏行
-              "colhidden":{}, //隐藏列
-              "borderInfo":{}, //边框
-              "authority":{}, //工作表保护
-
-            },
-            "scrollLeft": 0, //左右滚动条位置
-            "scrollTop": 315, //上下滚动条位置
-            "luckysheet_select_save": [], //选中的区域
-            "calcChain": [],//公式链
-            "isPivotTable":false,//是否数据透视表
-            "pivotTable":{},//数据透视表设置
-            "filter_select": {},//筛选范围
-            "filter": null,//筛选配置
-            "luckysheet_alternateformat_save": [], //交替颜色
-            "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
-            "luckysheet_conditionformat_save": {},//条件格式
-            "frozen": {}, //冻结行列配置
-            "chart": [], //图表配置
-            "zoomRatio":1, // 缩放比例
-            "image":[], //图片
-            "showGridLines": 1, //是否显示网格线
-            "dataVerification":{} //数据验证配置
-          }
-        ]
-      };
-      options.data = this.sheetData;
-      // console.log(this.sheetData)
-      $(function () {
-        luckysheet.create(options);
-      });
-    },
-  },
-}
-</script>
-
-<style src="../../../../../static/luckysheet/assets/iconfont/iconfont.css" />
-<style scoped lang="scss">
-.download {
-  width: 100%;
-  float: left;
-  button {
-    color: #444;
-    width: 90px;
-    text-align: left;
-    .svg-icon {
-      font-size: 16px;
-      margin-right: 10px;
-    }
-  }
-}
-.block {
-  position: relative;
-  z-index: 10000;
-  top: 0;
-  background: #fff;
-  width: 100%;
-  h2 {
-    font-size: 14px;
-    line-height: 30px;
-  }
-  h4 {
-    font-size: 12px;
-  }
-  .search_input {
-    font-size: 12px;
-    margin-bottom: 10px;
-    label {
-      line-height: 20px;
-    }
-  }
-}
-.layout {
-  display: block;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-.layout-middle {
-  display: block;
-  position: absolute;
-  left: 200px;
-  right: 0;
-  width: calc(100% - 200px);
-  margin: 0;
-  padding: 0;
-
-  .excel-designer {
-    display: block;
-    position: relative;
-    margin: 0;
-    padding: 0;
-  }
-}
-.layout-right {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 20px;
-  width: 200px;
-  min-height: 99.98vh;
-  border-left: 1px solid #dcdee2;
-  border-color: #e8eaec;
-  background: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-}
-</style>