lambo-design-bi 0.0.106 → 0.0.108

package/bi/widget/api/config.js

@@ -0,0 +1,19 @@
+import biConfig from "../config/config";
+import ajax from "@lambo-design/shared/utils/ajax";
+
+/**
+ * 获取页面配置
+ * 
+ * @param {*} pageId 
+ * @returns 
+ */
+export function getPageConfig(pageId) {
+  const params = {
+    pageId: pageId
+  }
+  return ajax.request({
+    url: biConfig.dataServerContext + '/bi/config/page',
+    method: 'get',
+    params
+  })
+}

package/bi/widget/page/child-page-tm.vue

@@ -0,0 +1,192 @@
+<template>
+  <LamboPageContainer :has-footer="false" :has-header="true">
+    <template #page-title>{{ childPageWidget.options.title || '' }}</template>
+    <template #page-extend>
+      <Button @click="goBack" type="primary" class="btn-margin" ghost>返回</Button>
+    </template>
+
+    <LamboIndicatorCardBiSearch v-if="childPageWidget && childPageWidget.search" :has-extend="false" :has-title="false">
+      <BiSearchForm v-if="childPageWidget && childPageWidget.search" :widget="childPageWidget.search"
+        @on-search="doSearch">
+      </BiSearchForm>
+    </LamboIndicatorCardBiSearch>
+
+    <BiPage :widget="childPageWidget" :params="params"></BiPage>
+
+  </LamboPageContainer>
+</template>
+<script>
+import LamboPageContainer from '@lambo-design/page-container'
+import BiSearchForm from '../search/search-form.vue'
+import LamboIndicatorCardBiSearch from '../container/card/comps/indicator-card/src/indicator-card-bi-search.vue'
+import BiPage from './index.vue'
+import { getPageConfig } from '../api/config'
+import { deepCopy } from "@lambo-design/shared/utils/assist"
+import { SEARCH_DICT } from '@/components/lambo/util/constants'
+import moment from "moment/moment"
+import { DATE_RANGE_PFIX } from '@/components/lambo/util/constants'
+
+export default {
+  name: 'BiChildPageTm',
+  components: { LamboPageContainer, BiSearchForm, LamboIndicatorCardBiSearch, BiPage },
+  props: {},
+  data() {
+    return {
+      childPageWidget: {},
+      params: {},
+      pageId: ''
+    }
+  },
+  methods: {
+    getConfig() {
+      // 从路由参数中获取pageId
+      console.log("child-page-tm getConfig this.$route.query:", this.$route.query)
+      this.pageId = this.$route.query.pageId || ''
+      if (!this.pageId) {
+        console.error("pageId为空，请检查菜单配置:", this.pageId)
+        this.$Message.error('pageId为空，请检查菜单配置')
+        return false
+      }
+      // 获取页面配置
+      getPageConfig(this.pageId).then(res => {
+        if (res.data.code !== 1) {
+          console.error("获取页面配置[" + this.pageId + "]失败：" + res.data.message)
+        } else {
+          if (res.data.data) {
+            let pageWidgetTree = deepCopy(res.data.data)
+            console.log("获取页面配置 1:", pageWidgetTree)
+            this.setRouteConfig2Search(pageWidgetTree)
+            console.log("获取页面配置 2:", pageWidgetTree)
+            this.childPageWidget = deepCopy(pageWidgetTree)
+          } else {
+            console.error("获取页面配置[" + this.pageId + "]失败：配置数据为空")
+            return
+          }
+        }
+      }).catch(err => {
+        console.error("获取页面配置[" + this.pageId + "]异常：", err)
+      })
+    },
+    goBack() {
+      this.$router.go(-1)
+      // TODO: 或者跳转到指定路由
+      // name从路由里面取
+      // this.$router.push({  name: 'xxx' })
+    },
+    doSearch(params) {
+      console.log("child-page-tm doSearch params:", params)
+      console.log("child-page-tm doSearch this.childPageWidget:", this.childPageWidget)
+      let emptySearchArr = []
+      // 增加前端校验是否必传
+      let searchConfig = this.childPageWidget.search
+      if (searchConfig && Object.prototype.hasOwnProperty.call(searchConfig, "widgets") && searchConfig.widgets) {
+        for (let i = 0; i < searchConfig.widgets.length; i++) {
+          let oneSearch = searchConfig.widgets[i]
+          console.log("child-page-tm doSearch oneSearch:", oneSearch)
+          if (oneSearch && oneSearch.options.isRequired === '1' && oneSearch.options.qKey) {
+            // 时间范围选择框
+            if (oneSearch.options.searchType && oneSearch.options.searchType === SEARCH_DICT.MUlTI_DATE.id) {
+              if (!params[oneSearch.options.qKey + DATE_RANGE_PFIX.START] || !params[oneSearch.options.qKey + DATE_RANGE_PFIX.END]) {
+                emptySearchArr.push(oneSearch.name)
+              }
+            } else {
+              if (!params[oneSearch.options.qKey]) {
+                emptySearchArr.push(oneSearch.name)
+              }
+            }
+          }
+        }
+      }
+      if (emptySearchArr.length > 0) {
+        console.log("必选查询条件为空：", emptySearchArr)
+        this.$Message.warning({ content: "必选查询条件" + emptySearchArr.join() + "为空，请选择", duration: 1.8 })
+        return
+      }
+      this.params = deepCopy(params)
+    },
+    setRouteConfig2Search(widgetData) {
+      let routeConfig = this.$route.query || {}
+      console.log("child-page-tm setRouteConfig2Search -- routeConfig:", routeConfig)
+      console.log("child-page-tm setRouteConfig2Search -- widgetData:", widgetData)
+      if (routeConfig && widgetData && widgetData.search && widgetData.search.widgets) {
+        widgetData.search.widgets.map(item => {
+          if (item.options && Object.prototype.hasOwnProperty.call(item.options, "qKey") && item.options['qKey']) {
+            let searchType = item.options['searchType']
+            let qKey = item.options['qKey']
+            if (searchType === SEARCH_DICT.INPUT.id) { 
+              item['val'] = routeConfig[qKey]
+            } else if (searchType === SEARCH_DICT.SINGLE_SELECT.id) { 
+              let val = routeConfig[qKey]
+              let valName = ''
+              let selDataList = item.options['dataList']
+              if (val && selDataList) {
+                for (let i = 0; i < selDataList.length; i++) {
+                  let selDataItem = selDataList[i]
+                  if (selDataItem && Object.prototype.hasOwnProperty.call(selDataItem, "K") && Object.prototype.hasOwnProperty.call(selDataItem, "V")) {
+                    if (selDataItem['K'] && selDataItem['K'] === val) {
+                      valName = selDataItem['V']
+                      break;
+                    }
+                  }
+                }
+                if (valName) {
+                  item['val'] = val
+                  item['valName'] = valName
+                }
+              }
+            } else if (searchType === SEARCH_DICT.MUlTI_SELECT.id) { 
+              let val = routeConfig[qKey]
+              let valNameArr = []
+              let selDataList = item.options['dataList']
+              if (val && selDataList) {
+                let valArr = val.split(',')
+                for (let i = 0; i < selDataList.length; i++) {
+                  let selDataItem = selDataList[i]
+                  if (selDataItem && Object.prototype.hasOwnProperty.call(selDataItem, "K") && Object.prototype.hasOwnProperty.call(selDataItem, "V")) {
+                    if (selDataItem['K'] && valArr.includes(selDataItem['K'])) {
+                      valNameArr.push(selDataItem['V'])
+                    }
+                  }
+                }
+                if (valNameArr && valNameArr.length > 0) {
+                  item['val'] = val
+                  item['valName'] = valNameArr.join()
+                }
+              }
+            } else if (searchType === SEARCH_DICT.SINGLE_DATE.id) { 
+              let val = routeConfig[qKey]
+              if (val && val.indexOf('-') > 0) {
+                val = moment(val).format("YYYYMMDD")
+              }
+              item['val'] = val
+            } else if (searchType === SEARCH_DICT.MUlTI_DATE.id) { 
+              console.log("detail -- getPageConfig -- routeConfig:", routeConfig)
+              let startDate = routeConfig[qKey + '_start']
+              console.log("detail -- getPageConfig -- startDate:", startDate)
+              if (startDate.indexOf('-') > 0) {
+                startDate = moment(startDate).format("YYYYMMDD") || ''
+              }
+
+              let endDate = routeConfig[qKey + '_end']
+              console.log("detail -- getPageConfig -- endDate:", endDate)
+              if (endDate.indexOf('-')) {
+                endDate = moment(endDate).format("YYYYMMDD") || ''
+              }
+              if (startDate && endDate) {
+                item.options['val'] = [startDate, endDate]
+              }
+            }
+          }
+        })
+      }
+    }
+  },
+  created() {
+    this.getConfig()
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/page/index-page-tm.vue

@@ -0,0 +1,102 @@
+<template>
+  <LamboPageContainer :has-footer="false" :has-header="pageWidget.options.title ? true : false">
+    <template #page-title>{{ pageWidget.options.title }}</template>
+
+    <LamboIndicatorCardBiSearch v-if="pageWidget && pageWidget.search" :has-extend="false" :has-title="false">
+      <BiSearchForm v-if="pageWidget && pageWidget.search" :widget="pageWidget.search" @on-search="doSearch">
+      </BiSearchForm>
+    </LamboIndicatorCardBiSearch>
+
+    <BiPage :widget="pageWidget" :params="params"></BiPage>
+  </LamboPageContainer>
+</template>
+<script>
+import LamboPageContainer from '@lambo-design/page-container'
+import BiSearchForm from '../search/search-form.vue'
+import LamboIndicatorCardBiSearch from '../container/card/comps/indicator-card/src/indicator-card-bi-search.vue'
+import BiPage from './index.vue'
+import { getPageConfig } from '../api/config'
+import { deepCopy } from "@lambo-design/shared/utils/assist"
+import { SEARCH_DICT } from '@/components/lambo/util/constants'
+import { DATE_RANGE_PFIX } from '@/components/lambo/util/constants'
+
+export default {
+  name: 'BiIndexPageTm',
+  components: { LamboPageContainer, BiSearchForm, LamboIndicatorCardBiSearch, BiPage },
+  props: {},
+  data() {
+    return {
+      pageWidget: {},
+      params: {},
+      pageId: ''
+    }
+  },
+  methods: {
+    getConfig() {
+      // 从路由参数中获取pageId
+      console.log("index-page-tm getConfig this.$route.query:", this.$route.query)
+      this.pageId = this.$route.query.pageId || ''
+      if (!this.pageId) {
+        console.error("pageId为空，请检查菜单配置:", this.pageId)
+        this.$Message.error('pageId为空，请检查菜单配置')
+        return false
+      }
+      // 获取页面配置
+      getPageConfig(this.pageId).then(res => {
+        if (res.data.code !== 1) {
+          console.error("获取页面配置[" + this.pageId + "]失败：" + res.data.message)
+        } else {
+          let pageWidgetTree = res.data.data
+          if (pageWidgetTree) {
+            this.pageWidget = deepCopy(pageWidgetTree)
+            console.log("获取页面配置成功:", this.pageWidget)
+          } else {
+            console.error("获取页面配置[" + this.pageId + "]失败：配置数据为空")
+            return
+          }
+        }
+      }).catch(err => {
+        console.error("获取页面配置[" + this.pageId + "]异常：", err)
+      })
+    },
+    doSearch(params) {
+      console.log("index-page-tm doSearch params:", params)
+      console.log("index-page-tm doSearch this.pageWidget:", this.pageWidget)
+      let emptySearchArr = []
+      // 增加前端校验是否必传
+      let searchConfig = this.pageWidget.search
+      if (searchConfig && Object.prototype.hasOwnProperty.call(searchConfig, "widgets") && searchConfig.widgets) {
+        for (let i = 0; i < searchConfig.widgets.length; i++) {
+          let oneSearch = searchConfig.widgets[i]
+          console.log("index-page-tm doSearch oneSearch:", oneSearch)
+          if (oneSearch && oneSearch.options.isRequired === '1' && oneSearch.options.qKey) {
+            // 时间范围选择框
+            if (oneSearch.options.searchType && oneSearch.options.searchType === SEARCH_DICT.MUlTI_DATE.id) {
+              if (!params[oneSearch.options.qKey + DATE_RANGE_PFIX.START] || !params[oneSearch.options.qKey + DATE_RANGE_PFIX.END]) {
+                emptySearchArr.push(oneSearch.name)
+              }
+            } else {
+              if (!params[oneSearch.options.qKey]) {
+                emptySearchArr.push(oneSearch.name)
+              }
+            }
+          }
+        }
+      }
+      if (emptySearchArr.length > 0) {
+        console.log("必选查询条件为空：", emptySearchArr)
+        this.$Message.warning({ content: "必选查询条件" + emptySearchArr.join() + "为空，请选择", duration: 1.8 })
+        return
+      }
+      this.params = deepCopy(params)
+    },
+  },
+  created() {
+    this.getConfig()
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/page/index.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script>
-import getWidgetName from '../util/widget-map'
+import { getWidgetName } from '../util/widget-map'
 
 export default {
   name: "BiPage",
@@ -26,7 +26,8 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+    }
   },
   methods: {
     getWidgetName

package/bi/widget/search/search-form.vue

@@ -14,10 +14,11 @@
 import LamboQueryFilter from "@lambo-design/query-filter"
 import { deepCopy } from "@lambo-design/shared/utils/assist"
 import moment from 'moment'
+import BiSearchItem from "./search-item.vue"
 
 export default {
   name: 'BiSearchForm',
-  components: { LamboQueryFilter },
+  components: { LamboQueryFilter, BiSearchItem },
   props: {
     widget: {
       type: Object,

package/bi/widget/util/widget-map.js

@@ -38,8 +38,3 @@ export function getWidgetName(item) {
     return WIDGET_MAP['_empty']
   }
 }
-
-export default {
-  WIDGET_MAP,
-  getWidgetName,
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.106",
+  "version": "0.0.108",
   "description": "",
   "main": "index.js",
   "author": "finch",
@@ -21,6 +21,7 @@
     "@lambo-design/shared": "^1.0.0-beta.283",
     "@lambo-design/query-filter": "^1.0.0-beta.38",
     "@lambo-design/detail-table": "^1.0.0-beta.23",
+    "@lambo-design/page-container": "^1.0.0-beta.35",
     "axios": "1.6.7",
     "core-js": "^3.8.3",
     "echarts": "^4.8.0",

package/util/constants.js

@@ -0,0 +1,40 @@
+export const SEARCH_DICT = Object.freeze({
+  INPUT: {
+    id: "00",
+    name: "输入框"
+  },
+  SINGLE_SELECT: {
+    id: "10",
+    name: "单选下拉框"
+  },
+  MUlTI_SELECT: {
+    id: "20",
+    name: "多选下拉框"
+  },
+  SINGLE_HELP: {
+    id: "30",
+    name: "单选帮助框"
+  },
+  MUlTI_HELP: {
+    id: "40",
+    name: "单选帮助框"
+  },
+  SINGLE_DATE: {
+    id: "50",
+    name: "日期选择框"
+  },
+  MUlTI_DATE: {
+    id: "51",
+    name: "日期范围帮助框"
+  },
+})
+
+export const DATE_RANGE_PFIX = Object.freeze({
+  START: "_start",
+  END: "_end"
+})
+
+export const DEFAULT_DATE_FORMAT = "YYYYMMDD"
+export const DEFAULT_DATE_TIME_FORMAT = "YYYYMMDDHHmmss"
+export const DEFAULT_DISPLAY_DATE_FORMAT = "YYYY-MM-DD"
+export const DEFAULT_DISPLAY_DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss"