vue2-client 1.9.78 → 1.9.79

package/src/base-client/components/common/XReport/XReportDesign.vue

@@ -1,463 +1,463 @@
-<template>
-  <div>
-    <template v-if="this.activatedConfig.designMode === 'json'">
-      <XReportJsonRender
-        @updateImg="updateImg"
-        :img-prefix="imgPrefix"
-        :server-name="serverName"
-        :display-only="displayOnly"
-        :show-title="showTitle"
-        :no-padding="noPadding"
-        :no-top-border="noTopBorder"
-        :config="activatedConfig"/>
-    </template>
-    <template v-else>
-      <div
-        :class=" noPadding ? 'reportMainNoPadding' : 'reportMain'"
-        :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
-        <!--      大标题      -->
-        <h2 class="reportTitle" v-if="showTitle && activatedConfig.title" v-html="activatedConfig.title"></h2>
-        <!--      小标题 / 介乎于标题与表格之间的内容      -->
-        <div class="subTitle" v-if="activatedConfig.subTitle">
-          <div class="subTitleItems" v-for="(item, itemIndex) in activatedConfig.subTitle" :key="itemIndex">
-            <template v-if="item.type === 'column'">
-              <span>{{ item.text }}</span>
-            </template>
-            <template v-else-if="item.type === 'inputs'">
-              <div class="inputsDiv">
-                <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(item.format)" :key="index">
-                  <span class="inputsDivItemLabel">{{ displayFormatStartText(item.format) }}</span>
-                  <a-input
-                    v-if="!forDisplay"
-                    v-model="data[item.dataIndex][index]"
-                    :style="'width:' + (item.inputWidth ? item.inputWidth : '100') + '%'"
-                    :disabled="item.inputReadOnly"/>
-                  <template v-else>
-                    {{ activatedConfig.data[item.dataIndex][index] }}
-                  </template>
-                  <span class="inputsDivItemLabel">{{ displayFormatText(item.format, index) }}</span>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-        <!--      主体表格      -->
-        <table class="reportTable" v-if="render" :style="activatedConfig.style ? activatedConfig.style : undefined">
-          <tbody class="reportTable">
-            <template v-for="(row, rowIndex) in activatedConfig.columns">
-              <!--  普通行  -->
-              <x-report-tr-group
-                v-if="row[0].type !== 'inputColumns' && row[0].type !== 'list'"
-                @updateImg="updateImg"
-                :show-img-in-cell="showImgInCell"
-                :img-prefix="imgPrefix"
-                :server-name="serverName"
-                :use-oss-for-img="useOssForImg"
-                :key="rowIndex"
-                :columns="row"
-                :no-top-border="noTopBorder"
-                :config-data="activatedConfig.data"
-                :config="activatedConfig"
-                :display="forDisplay">
-              </x-report-tr-group>
-              <!--  列表  -->
-              <x-report-tr-group
-                v-else-if="row[0].type === 'list'"
-                v-for="(num, listIndex) in row[0].listLength + 1"
-                @updateImg="updateImg"
-                :show-img-in-cell="showImgInCell"
-                :img-prefix="imgPrefix"
-                :server-name="serverName"
-                :use-oss-for-img="useOssForImg"
-                :config="activatedConfig"
-                :key="rowIndex + listIndex"
-                :columns="row"
-                :no-top-border="noTopBorder"
-                :config-data="activatedConfig.data"
-                :list-index="listIndex"
-                :display="forDisplay">
-              </x-report-tr-group>
-              <!--  动态行  -->
-              <template v-else>
-                <x-report-tr-group
-                  @updateImg="updateImg"
-                  :show-img-in-cell="showImgInCell"
-                  :img-prefix="imgPrefix"
-                  :server-name="serverName"
-                  :use-oss-for-img="useOssForImg"
-                  :config="activatedConfig"
-                  :columns="row[0].definition"
-                  :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
-                  :input-columns="true"
-                  :no-top-border="noTopBorder"
-                  v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
-                  :input-columns-definition-index="definitionIndex"
-                  :display="forDisplay"
-                  :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
-                <template v-if="!forDisplay">
-                  <!--  动态行交互按钮  -->
-                  <x-report-tr-group
-                    @updateImg="updateImg"
-                    :show-img-in-cell="showImgInCell"
-                    :img-prefix="imgPrefix"
-                    :server-name="serverName"
-                    :use-oss-for-img="useOssForImg"
-                    :config="activatedConfig"
-                    :key="rowIndex"
-                    :columns="row"
-                    :no-top-border="noTopBorder"
-                    :config-data="activatedConfig.data"
-                    :input-columns-button="true"
-                    :input-columns="true">
-                  </x-report-tr-group>
-                </template>
-              </template>
-            </template>
-          </tbody>
-        </table>
-        <div v-if="showImages" style="margin-top: 5%; display: flex;margin-bottom: 5%">
-          <p>图片：</p>
-          <div :key="imgIndex" v-for="(img,imgIndex) in imageList" style="margin-left: 3%;width: 200px">
-            <img :src="img.url" class="img" :alt="img.name"/>
-            <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;">{{ img.name }}</p>
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import XReportTrGroup from '@vue2-client/base-client/components/common/XReport/XReportTrGroup.vue'
-import XReportJsonRender from '@vue2-client/base-client/components/common/XReport/XReportJsonRender.vue'
-import { getConfigByName } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XReportDesign',
-  props: {
-    // 配置
-    config: {
-      type: Object,
-      require: true,
-      default: () => {
-      }
-    },
-    showImgInCell: {
-      type: Boolean,
-      default: false
-    },
-    // 是否是展示用
-    forDisplay: {
-      type: Boolean,
-      default: false
-    },
-    // 命名空间
-    serverName: {
-      type: String,
-      default: 'af-system'
-    },
-    // 是否只能展示不可编辑
-    displayOnly: {
-      type: Boolean,
-      default: false
-    },
-    // 插槽名
-    slotConfigName: {
-      type: String,
-      default: undefined
-    },
-    // 将图片全部展示在表格之后，挨个罗列
-    showImages: {
-      type: Boolean,
-      default: false
-    },
-    // 图片罗列的数组
-    imageList: {
-      type: Array,
-      default: undefined
-    },
-    // 表格没有边距
-    noPadding: {
-      type: Boolean,
-      default: false
-    },
-    // 表格没有上边框，与noPadding搭配可以实现连续表格
-    noTopBorder: {
-      type: Boolean,
-      default: false
-    },
-    // 是否展示标题
-    showTitle: {
-      type: Boolean,
-      default: true
-    },
-    // 图片是否使用OSS来保存
-    useOssForImg: {
-      type: Boolean,
-      default: true
-    },
-    // 图片上传后添加前缀
-    imgPrefix: {
-      type: String,
-      default: undefined
-    }
-  },
-  components: {
-    XReportTrGroup,
-    XReportJsonRender
-  },
-  data () {
-    return {
-      // 表单的数据
-      data: this.config.data,
-      // 插槽配置
-      slotConfig: undefined,
-      // 控制是否渲染
-      render: false,
-      // 用于展示的配置
-      activatedConfig: {}
-    }
-  },
-  methods: {
-    updateImg (data) {
-      this.$emit('updateImg', data)
-    },
-    // 根据format计算需要多少个输入框
-    calcFormatInputNum (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] == '{') {
-          count++
-        }
-      }
-      return count
-    },
-    // 根据format计算输入框之后的文字显示
-    displayFormatText (formatStr, num) {
-      let start = 0
-      let count = 0
-      num++
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '}') {
-          start = i
-          count++
-        }
-        if (count === num) {
-          for (let j = start + 1; j < formatStr.length; j++) {
-            if (formatStr[j] === '{') {
-              return formatStr.slice(start + 1, j)
-            }
-            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
-              return formatStr[j]
-            }
-          }
-        }
-      }
-    },
-    // 根据format计算输入框之前的文字显示
-    displayFormatStartText (formatStr) {
-      let count = 0
-      for (let i = 0; i < formatStr.length; i++) {
-        if (formatStr[i] === '{') {
-          break
-        } else {
-          count++
-        }
-      }
-      return formatStr.slice(0, count)
-    },
-  },
-  created () {
-    if (this.slotConfigName) {
-      getConfigByName(this.slotConfigName, undefined, res => {
-        this.slotConfig = res
-        res.data = { ...res.data, ...this.data }
-        this.config.data = res.data
-        this.activatedConfig = res
-        this.render = true
-      })
-    } else {
-      this.activatedConfig = this.config
-      this.render = true
-    }
-    if (this.activatedConfig.designMode !== 'json') {
-      this.activatedConfig.columns.forEach(row => {
-        if (row[0] && row[0].type && row[0].type === 'list' && row[0].listLength === 1) {
-          row.forEach(cell => {
-            cell.listLength = this.activatedConfig.data[cell.dataIndex].length
-          })
-        }
-      })
-    }
-  },
-  mounted () {
-  },
-  watch: {
-    config: {
-      deep: true,
-      handler (newVal) {
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.img {
-  width: 95%;
-  height: 180px;
-  object-fit: cover;
-}
-
-.reportMain {
-  text-align: center;
-  margin: 0 auto;
-  font-size: 16px;
-  color: #000;
-  background-color: #fff;
-  padding: 15px;
-  border-radius: 8px;
-
-  .reportTitle {
-    font-weight: bold;
-  }
-
-  .subTitle {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 1%;
-
-    .subTitleItems {
-      max-width: 30%;
-    }
-  }
-
-  .inputsDiv {
-    display: flex;
-    justify-content: space-between;
-
-    .inputsDivItem {
-      display: flex;
-      align-items: center;
-      padding: 0 4px;
-      white-space: nowrap;
-
-      .inputsDivItemLabel {
-        padding: 0 4px;
-      }
-    }
-  }
-
-  .reportTable {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: fixed;
-    word-break: break-all;
-  }
-}
-
-.reportMainForDisplay {
-  text-align: center;
-  margin: 10% auto;
-  font-size: 16px;
-  color: #000;
-  background-color: #fff;
-  padding: 15px;
-  border-radius: 8px;
-
-  .reportTitle {
-    font-weight: bold;
-  }
-
-  .subTitle {
-    display: flex;
-    justify-content: space-between;
-
-    .subTitleItems {
-      max-width: 30%;
-    }
-  }
-
-  .inputsDiv {
-    display: flex;
-    justify-content: space-around;
-
-    .inputsDivItem {
-      display: flex;
-      align-items: center;
-      padding: 0 4px;
-      white-space: nowrap;
-
-      .inputsDivItemLabel {
-        padding: 0 4px;
-      }
-    }
-  }
-
-  .reportTable {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: fixed;
-    word-break: break-all;
-  }
-}
-
-.reportMainNoPadding {
-  text-align: center;
-  margin: 0 auto;
-  font-size: 16px;
-  color: #000;
-  background-color: #fff;
-  border-radius: 8px;
-
-  .reportTitle {
-    font-weight: bold;
-  }
-
-  .subTitle {
-    display: flex;
-    justify-content: space-between;
-
-    .subTitleItems {
-      max-width: 30%;
-    }
-  }
-
-  .inputsDiv {
-    display: flex;
-    justify-content: space-between;
-
-    .inputsDivItem {
-      display: flex;
-      align-items: center;
-      padding: 0 4px;
-      white-space: nowrap;
-
-      .inputsDivItemLabel {
-        padding: 0 4px;
-      }
-    }
-  }
-
-  .reportTable {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: fixed;
-    word-break: break-all;
-  }
-}
-
-.tools {
-  position: fixed;
-  right: 2%;
-  text-align: right;
-  width: 60%;
-  cursor: pointer;
-
-  .toolsItem {
-    width: 15%;
-    margin-right: 3%;
-    display: inline-block;
-  }
-}
-</style>
+<template>
+  <div>
+    <template v-if="this.activatedConfig.designMode === 'json'">
+      <XReportJsonRender
+        @updateImg="updateImg"
+        :img-prefix="imgPrefix"
+        :server-name="serverName"
+        :display-only="displayOnly"
+        :show-title="showTitle"
+        :no-padding="noPadding"
+        :no-top-border="noTopBorder"
+        :config="activatedConfig"/>
+    </template>
+    <template v-else>
+      <div
+        :class=" noPadding ? 'reportMainNoPadding' : 'reportMain'"
+        :style="activatedConfig.width > 0 ? ('width:' + activatedConfig.width + 'px') : undefined">
+        <!--      大标题      -->
+        <h2 class="reportTitle" v-if="showTitle && activatedConfig.title" v-html="activatedConfig.title"></h2>
+        <!--      小标题 / 介乎于标题与表格之间的内容      -->
+        <div class="subTitle" v-if="activatedConfig.subTitle">
+          <div class="subTitleItems" v-for="(item, itemIndex) in activatedConfig.subTitle" :key="itemIndex">
+            <template v-if="item.type === 'column'">
+              <span>{{ item.text }}</span>
+            </template>
+            <template v-else-if="item.type === 'inputs'">
+              <div class="inputsDiv">
+                <div class="inputsDivItem" v-for="(num, index) of calcFormatInputNum(item.format)" :key="index">
+                  <span class="inputsDivItemLabel">{{ displayFormatStartText(item.format) }}</span>
+                  <a-input
+                    v-if="!forDisplay"
+                    v-model="data[item.dataIndex][index]"
+                    :style="'width:' + (item.inputWidth ? item.inputWidth : '100') + '%'"
+                    :disabled="item.inputReadOnly"/>
+                  <template v-else>
+                    {{ activatedConfig.data[item.dataIndex][index] }}
+                  </template>
+                  <span class="inputsDivItemLabel">{{ displayFormatText(item.format, index) }}</span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+        <!--      主体表格      -->
+        <table class="reportTable" v-if="render" :style="activatedConfig.style ? activatedConfig.style : undefined">
+          <tbody class="reportTable">
+            <template v-for="(row, rowIndex) in activatedConfig.columns">
+              <!--  普通行  -->
+              <x-report-tr-group
+                v-if="row[0].type !== 'inputColumns' && row[0].type !== 'list'"
+                @updateImg="updateImg"
+                :show-img-in-cell="showImgInCell"
+                :img-prefix="imgPrefix"
+                :server-name="serverName"
+                :use-oss-for-img="useOssForImg"
+                :key="rowIndex"
+                :columns="row"
+                :no-top-border="noTopBorder"
+                :config-data="activatedConfig.data"
+                :config="activatedConfig"
+                :display="forDisplay">
+              </x-report-tr-group>
+              <!--  列表  -->
+              <x-report-tr-group
+                v-else-if="row[0].type === 'list'"
+                v-for="(num, listIndex) in row[0].listLength + 1"
+                @updateImg="updateImg"
+                :show-img-in-cell="showImgInCell"
+                :img-prefix="imgPrefix"
+                :server-name="serverName"
+                :use-oss-for-img="useOssForImg"
+                :config="activatedConfig"
+                :key="rowIndex + listIndex"
+                :columns="row"
+                :no-top-border="noTopBorder"
+                :config-data="activatedConfig.data"
+                :list-index="listIndex"
+                :display="forDisplay">
+              </x-report-tr-group>
+              <!--  动态行  -->
+              <template v-else>
+                <x-report-tr-group
+                  @updateImg="updateImg"
+                  :show-img-in-cell="showImgInCell"
+                  :img-prefix="imgPrefix"
+                  :server-name="serverName"
+                  :use-oss-for-img="useOssForImg"
+                  :config="activatedConfig"
+                  :columns="row[0].definition"
+                  :config-data="{arr: activatedConfig.data[row[0].dataIndex]}"
+                  :input-columns="true"
+                  :no-top-border="noTopBorder"
+                  v-for="(item, definitionIndex) in activatedConfig.data[row[0].dataIndex]"
+                  :input-columns-definition-index="definitionIndex"
+                  :display="forDisplay"
+                  :key="row[0].dataIndex + definitionIndex + rowIndex"></x-report-tr-group>
+                <template v-if="!forDisplay">
+                  <!--  动态行交互按钮  -->
+                  <x-report-tr-group
+                    @updateImg="updateImg"
+                    :show-img-in-cell="showImgInCell"
+                    :img-prefix="imgPrefix"
+                    :server-name="serverName"
+                    :use-oss-for-img="useOssForImg"
+                    :config="activatedConfig"
+                    :key="rowIndex"
+                    :columns="row"
+                    :no-top-border="noTopBorder"
+                    :config-data="activatedConfig.data"
+                    :input-columns-button="true"
+                    :input-columns="true">
+                  </x-report-tr-group>
+                </template>
+              </template>
+            </template>
+          </tbody>
+        </table>
+        <div v-if="showImages" style="margin-top: 5%; display: flex;margin-bottom: 5%">
+          <p>图片：</p>
+          <div :key="imgIndex" v-for="(img,imgIndex) in imageList" style="margin-left: 3%;width: 200px">
+            <img :src="img.url" class="img" :alt="img.name"/>
+            <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;">{{ img.name }}</p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import XReportTrGroup from '@vue2-client/base-client/components/common/XReport/XReportTrGroup.vue'
+import XReportJsonRender from '@vue2-client/base-client/components/common/XReport/XReportJsonRender.vue'
+import { getConfigByName } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XReportDesign',
+  props: {
+    // 配置
+    config: {
+      type: Object,
+      require: true,
+      default: () => {
+      }
+    },
+    showImgInCell: {
+      type: Boolean,
+      default: false
+    },
+    // 是否是展示用
+    forDisplay: {
+      type: Boolean,
+      default: false
+    },
+    // 命名空间
+    serverName: {
+      type: String,
+      default: 'af-system'
+    },
+    // 是否只能展示不可编辑
+    displayOnly: {
+      type: Boolean,
+      default: false
+    },
+    // 插槽名
+    slotConfigName: {
+      type: String,
+      default: undefined
+    },
+    // 将图片全部展示在表格之后，挨个罗列
+    showImages: {
+      type: Boolean,
+      default: false
+    },
+    // 图片罗列的数组
+    imageList: {
+      type: Array,
+      default: undefined
+    },
+    // 表格没有边距
+    noPadding: {
+      type: Boolean,
+      default: false
+    },
+    // 表格没有上边框，与noPadding搭配可以实现连续表格
+    noTopBorder: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示标题
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    // 图片是否使用OSS来保存
+    useOssForImg: {
+      type: Boolean,
+      default: true
+    },
+    // 图片上传后添加前缀
+    imgPrefix: {
+      type: String,
+      default: undefined
+    }
+  },
+  components: {
+    XReportTrGroup,
+    XReportJsonRender
+  },
+  data () {
+    return {
+      // 表单的数据
+      data: this.config.data,
+      // 插槽配置
+      slotConfig: undefined,
+      // 控制是否渲染
+      render: false,
+      // 用于展示的配置
+      activatedConfig: {}
+    }
+  },
+  methods: {
+    updateImg (data) {
+      this.$emit('updateImg', data)
+    },
+    // 根据format计算需要多少个输入框
+    calcFormatInputNum (formatStr) {
+      let count = 0
+      for (let i = 0; i < formatStr.length; i++) {
+        if (formatStr[i] == '{') {
+          count++
+        }
+      }
+      return count
+    },
+    // 根据format计算输入框之后的文字显示
+    displayFormatText (formatStr, num) {
+      let start = 0
+      let count = 0
+      num++
+      for (let i = 0; i < formatStr.length; i++) {
+        if (formatStr[i] === '}') {
+          start = i
+          count++
+        }
+        if (count === num) {
+          for (let j = start + 1; j < formatStr.length; j++) {
+            if (formatStr[j] === '{') {
+              return formatStr.slice(start + 1, j)
+            }
+            if (j === formatStr.length - 1 && formatStr[j] !== '}') {
+              return formatStr[j]
+            }
+          }
+        }
+      }
+    },
+    // 根据format计算输入框之前的文字显示
+    displayFormatStartText (formatStr) {
+      let count = 0
+      for (let i = 0; i < formatStr.length; i++) {
+        if (formatStr[i] === '{') {
+          break
+        } else {
+          count++
+        }
+      }
+      return formatStr.slice(0, count)
+    },
+  },
+  created () {
+    if (this.slotConfigName) {
+      getConfigByName(this.slotConfigName, undefined, res => {
+        this.slotConfig = res
+        res.data = { ...res.data, ...this.data }
+        this.config.data = res.data
+        this.activatedConfig = res
+        this.render = true
+      })
+    } else {
+      this.activatedConfig = this.config
+      this.render = true
+    }
+    if (this.activatedConfig.designMode !== 'json') {
+      this.activatedConfig.columns.forEach(row => {
+        if (row[0] && row[0].type && row[0].type === 'list' && row[0].listLength === 1) {
+          row.forEach(cell => {
+            cell.listLength = this.activatedConfig.data[cell.dataIndex].length
+          })
+        }
+      })
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    config: {
+      deep: true,
+      handler (newVal) {
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.img {
+  width: 95%;
+  height: 180px;
+  object-fit: cover;
+}
+
+.reportMain {
+  text-align: center;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 8px;
+
+  .reportTitle {
+    font-weight: bold;
+  }
+
+  .subTitle {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1%;
+
+    .subTitleItems {
+      max-width: 30%;
+    }
+  }
+
+  .inputsDiv {
+    display: flex;
+    justify-content: space-between;
+
+    .inputsDivItem {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+      white-space: nowrap;
+
+      .inputsDivItemLabel {
+        padding: 0 4px;
+      }
+    }
+  }
+
+  .reportTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    word-break: break-all;
+  }
+}
+
+.reportMainForDisplay {
+  text-align: center;
+  margin: 10% auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 8px;
+
+  .reportTitle {
+    font-weight: bold;
+  }
+
+  .subTitle {
+    display: flex;
+    justify-content: space-between;
+
+    .subTitleItems {
+      max-width: 30%;
+    }
+  }
+
+  .inputsDiv {
+    display: flex;
+    justify-content: space-around;
+
+    .inputsDivItem {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+      white-space: nowrap;
+
+      .inputsDivItemLabel {
+        padding: 0 4px;
+      }
+    }
+  }
+
+  .reportTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    word-break: break-all;
+  }
+}
+
+.reportMainNoPadding {
+  text-align: center;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #000;
+  background-color: #fff;
+  border-radius: 8px;
+
+  .reportTitle {
+    font-weight: bold;
+  }
+
+  .subTitle {
+    display: flex;
+    justify-content: space-between;
+
+    .subTitleItems {
+      max-width: 30%;
+    }
+  }
+
+  .inputsDiv {
+    display: flex;
+    justify-content: space-between;
+
+    .inputsDivItem {
+      display: flex;
+      align-items: center;
+      padding: 0 4px;
+      white-space: nowrap;
+
+      .inputsDivItemLabel {
+        padding: 0 4px;
+      }
+    }
+  }
+
+  .reportTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    word-break: break-all;
+  }
+}
+
+.tools {
+  position: fixed;
+  right: 2%;
+  text-align: right;
+  width: 60%;
+  cursor: pointer;
+
+  .toolsItem {
+    width: 15%;
+    margin-right: 3%;
+    display: inline-block;
+  }
+}
+</style>