lambo-design-bi 0.0.1

package/bi/widget/container/card/comps/indicator-card/src/styles/css/card.less

@@ -0,0 +1,114 @@
+@import "@lambo-design/core/src/styles/default.less";
+
+.c-info {
+  background: var(--component-background, @_component-background);
+  border-radius: var(--border-radius-base, @_border-radius-base);
+  padding: 0;
+  margin-bottom: 8px;
+
+  &-bordered {
+    border: 1px solid var(--border-color-base, @_border-color-base);
+    border-color: var(--border-color-split, @_border-color-split);
+  }
+
+  &-shadow {
+    box-shadow: var(--shadow-base, @_shadow-base);
+  }
+
+  &:hover {
+    box-shadow: var(--shadow-base, @_shadow-base);
+    border-color: var(--border-color-split, @_border-color-split);
+  }
+
+  &&-dis-hover:hover {
+    box-shadow: none;
+    border-color: transparent;
+  }
+
+  &&-dis-hover&-bordered:hover {
+    border-color: var(--border-color-split, @_border-color-split);
+  }
+
+  &&-shadow:hover {
+    box-shadow: var(--shadow-base, @_shadow-base);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .ct-header {
+    background: var(--component-background, @_component-background);
+    overflow: hidden;
+    padding: 0px 8px;
+    border-radius: var(--border-radius-base, @_border-radius-base) var(--border-radius-base, @_border-radius-base) 0 0;
+    display: flex;
+
+    .ct-title {
+      color: var(--heading-color, @_heading-color);
+      font-weight: bold;
+      font-size: 15px;
+      line-height: 30px;
+      flex: 0 0 auto;
+    }
+
+    .center-title {
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .hd-extend {
+      font-size: 13px;
+      line-height: 30px;
+      flex: 1 1 auto;
+    }
+
+    .ct-extend {
+      font-size: 13px;
+      line-height: 30px;
+      flex: 0 0 auto;
+    }
+
+    .ct-toggle {
+      font-size: 13px;
+      line-height: 30px;
+      flex: 0 0 auto;
+    }
+
+    &.collapse {
+      border-radius: var(--border-radius-base, @_border-radius-base);
+    }
+  }
+
+  .ct-body {
+    background: var(--component-background, @_component-background);
+    border-radius: 0 0 var(--border-radius-base, @_border-radius-base) var(--border-radius-base, @_border-radius-base);
+    padding: 8px 8px;
+
+    display: flex;          // 启用flex布局
+    flex-wrap: wrap;        // 允许换行
+    justify-content: flex-start; // 元素间距均匀分布
+    align-items: flex-start; // 顶部对齐
+    gap: 8px;
+
+    &.no-border-top {
+      border-top: 0;
+      border-radius: var(--border-radius-base, @_border-radius-base);
+    }
+
+    .ivu-form-label-right {
+      .ivu-form-item {
+        .ivu-form-item-content {
+          button {
+            width: 88px;
+          }
+        }
+      }
+    }
+  }
+
+  .offset-padding {
+    padding: 0px 8px 8px 8px;
+  }
+}

package/bi/widget/layout/col.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-col :span="(widget.options && widget.options.span) ? parseInt(widget.options.span) : 24">
+    <template v-for="(item, index) in widget.widgets">
+      <atom-widget :widget="item" :key="index"></atom-widget>
+    </template>
+  </el-col>
+</template>
+<script>
+import AtomWidget from '../atom/index.vue'
+
+export default {
+  name: "BiCol",
+  components: { AtomWidget },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/layout/row.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-row class="custom-row" :gutter="(widget.options && widget.options.gutter) ? parseInt(widget.options.gutter) : 0">
+    <template v-for="(item, index) in widget.widgets">
+      <atom-widget :widget="item" :key="index"></atom-widget>
+    </template>
+  </el-row>
+</template>
+<script>
+import AtomWidget from '../atom/index.vue'
+
+export default {
+  name: "BiRow",
+  components: { AtomWidget },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+.custom-row {
+  margin-bottom: 5px;
+}
+</style>

package/bi/widget/num/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <num-index :title="widget.name" :val="numVal" :unit="unit" :items="items" :note="widget.options.note"></num-index>
+</template>
+<script>
+import NumIndex from "../../../pub/num-index/num-index.vue"
+import { getListMapData } from "../api/data"
+import { formatNumLocale } from "../../../util/num-util"
+
+export default {
+  name: "BiNumIndex",
+  components: { NumIndex },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      numVal: '',
+      unit: '',
+      /**
+       * [
+       *  {"k_name": "同比", "val": "+12%"},
+       *  {"k_name": "环比", "val": "-12%"},
+       * ]
+       */
+      kName1: '',
+      kName2: '',
+      items: [],
+      apiId: '',
+    }
+  },
+  methods: {
+    initConfig() {
+      this.apiId = this.widget.options.apiId
+      this.kName1 = this.widget.options.kName1 || ''
+      this.kName2 = this.widget.options.kName2 || ''
+    },
+    doSearch() {
+      if (!this.apiId) {
+        this.$Message.warning("组件[" + this.widget.name + "]未配置数据接口")
+        return
+      }
+      getListMapData(this.apiId, this.params).then(res => {
+        if (res.data.code === 0) {
+          console.error("数据卡片的调用服务[" + this.widget.options.apiId + "]失败：" + res.data.message)
+        } else {
+          if (res.data.data.rows.length > 0) {
+            let row = res.data.data.rows[0]
+            /**
+             * [
+             *  {"val": "457182134", "unit": "条", "extend_val1": "+12%", "extend_val2": "-12%",  }
+             * ]
+             */
+            if (row) {
+              if (Object.prototype.hasOwnProperty.call(row, "val") && row['val']) {
+                this.numVal = formatNumLocale(row.val)
+              }
+              if (Object.prototype.hasOwnProperty.call(row, "unit") && row['unit']) {
+                this.unit = row['unit']
+              }
+              let itemArr = []
+              if (Object.prototype.hasOwnProperty.call(row, "extend_val1") && row['extend_val1']) {
+                itemArr.push({ "k_name": this.kName1, "val": row['extend_val1'] })
+              }
+              if (Object.prototype.hasOwnProperty.call(row, "extend_val2") && row['extend_val2']) {
+                itemArr.push({ "k_name": this.kName2, "val": row['extend_val2'] })
+              }
+              this.items = itemArr
+            }
+          }
+        }
+      }).catch(err => {
+        console.error("数据卡片的调用服务[" + this.widget.options.apiId + "]异常：", err)
+      })
+    }
+  },
+  created() {
+    this.initConfig()
+    this.doSearch()
+  },
+  mounted() {
+
+  },
+  watch: {
+    params: {
+      handler: function (val, oldVal) {
+        console.log('BiNumIndex watch val,oldVal', val, oldVal)
+        this.doSearch()
+      },
+      deep: true
+    },
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/page/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <template v-for="(item, index) in widget.widgets">
+      <atom-widget :widget="item" :key="index" :params="params"></atom-widget>
+    </template>
+  </div>
+</template>
+<script>
+import AtomWidget from '../atom/index.vue'
+
+export default {
+  name: "BiPage",
+  components: { AtomWidget },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped></style>

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

@@ -0,0 +1,85 @@
+<template>
+  <div v-if="widget">
+    <LamboQueryFilter :default-rows="3" :label-width="145" :span="8" :hideResetButton="true" @do-search="doSearch"
+      @on-reset="onReset">
+      <template v-if="widget.widgets">
+        <FormItem v-for="(item, index) in widget.widgets" :key="index" :label="item.name">
+          <BiSearchItem :widget="item"></BiSearchItem>
+        </FormItem>
+      </template>
+    </LamboQueryFilter>
+  </div>
+</template>
+<script>
+import LamboQueryFilter from "@lambo-design/query-filter"
+import { deepCopy } from "@lambo-design/shared/utils/assist"
+import moment from 'moment'
+
+export default {
+  name: 'BiSearchForm',
+  components: { LamboQueryFilter },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  data() {
+    return {
+      cacheWidget: {}
+    }
+  },
+  methods: {
+    doSearch() {
+      let params = {}
+      let searchList = this.widget.widgets
+      console.log("doSearch -- this.widget.widgets:", searchList)
+      if (searchList) {
+        searchList.map(item => {
+          if (item.options && Object.prototype.hasOwnProperty.call(item, "val") && Object.prototype.hasOwnProperty.call(item, "qKey")) {
+            let val = item.options.val
+            let qKey = item.options.qKey
+            if (val) {
+              if (Array.isArray(val)) {
+                if (item.options.searchType === '51') {
+                  if (val && Array.isArray(val) && val.length === 2 && val[0] && val[1]) {
+                    params[qKey + '_start'] = moment(val[0]).format("YYYYMMDD")
+                    params[qKey + '_end'] = moment(val[1]).format("YYYYMMDD")
+                  }
+                } else {
+                  params[qKey] = val.join()
+                }
+              } else {
+                if (item.options.searchType === '50') {
+                  params[qKey] = moment(val).format("YYYYMMDD")
+                } else {
+                  params[qKey] = val
+                }
+              }
+            }
+          }
+        })
+      }
+      this.$emit("on-search", params)
+    },
+    onReset() {
+      if (this.cacheWidget && Object.prototype.hasOwnProperty.call(this.cacheWidget, "widgets")) {
+        let cacheSearchList = this.cacheWidget.widgets
+        console.log("onReset -- cacheSearchList:", cacheSearchList)
+        if (this.widget.widgets) {
+          this.$set(this.widget, 'widgets', cacheSearchList)
+        }
+      }
+      this.doSearch()
+    }
+  },
+  created() {
+    console.log("search-form created -- widget:", this.widget)
+  },
+  mounted() {
+    this.cacheWidget = deepCopy(this.widget)
+    this.doSearch();
+  }
+}
+</script>
+<style scoped></style>

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

@@ -0,0 +1,205 @@
+<!-- eslint-disable -->
+<template>
+  <div>
+    <div v-if="widget.options.searchType === '00'"> <!-- 输入框 -->
+      <Input v-model="widget.options.val" class="query" placeholder="请输入" :clearable="true" />
+    </div>
+    <div v-if="widget.options.searchType === '01'"> <!-- 输入框 -->
+      <Input v-model="widget.options.val" class="query" placeholder="请输入" :clearable="true" />
+    </div>
+    <div v-else-if="widget.options.searchType === '10'"> <!-- 单选下拉框 -->
+      <Select v-model="widget.options.val" class="query" filterable :clearable="true" placeholder="请选择">
+        <Option v-for="(item, index) in widget.options.dataList" :key="index" :value="item.K"> {{ item.V }}</Option>
+      </Select>
+    </div>
+    <div v-else-if="widget.options.searchType === '20'"> <!-- 多选下拉框 -->
+      <Select v-model="widget.options.val" class="query" filterable :clearable="true" placeholder="请选择" multiple
+        :max-tag-count="1">
+        <Option v-for="(item, index) in widget.options.dataList" :key="index" :value="item.K"> {{ item.V }}</Option>
+      </Select>
+    </div>
+    <div v-else-if="widget.options.searchType === '30'"> <!-- 单选帮助框 -->
+      <Input class="display-none" v-model="helpVal" />
+      <Input class="query" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
+        placeholder="请选择" />
+
+      <HelpBox v-model="helpBoxShow" :title="widget.name" :columns="helpColumns" :url="helpBoxUrl"
+        :row-key="helpRowIdKey" :row-name="helpRowNameKey" :selected-key="helpSelectKey" :multi-select="false"
+        :help-box-search-params="helpSearchParams" @on-ok="onHelpOk" @onClear="onHelpClear"></HelpBox>
+    </div>
+    <div v-else-if="widget.options.searchType === '40'"> <!-- 多选帮助框 -->
+      <Input class="display-none" v-model="helpVal" />
+      <Input class="query" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
+        placeholder="请选择" />
+
+      <HelpBox v-model="helpBoxShow" :title="widget.name" :columns="helpColumns" :url="helpBoxUrl"
+        :row-key="helpRowIdKey" :row-name="helpRowNameKey" :selected-key="helpSelectKey" :multi-select="true"
+        :help-box-search-params="helpSearchParams" @on-ok="onHelpOk" @onClear="onHelpClear"></HelpBox>
+    </div>
+    <div v-else-if="widget.options.searchType === '50'"> <!-- 单日期选择框 -->
+      <DatePicker v-model="widget.options.val" format="yyyy-MM-dd" placeholder="请选择" placement="bottom-end"
+        class="query"></DatePicker>
+    </div>
+    <div v-else-if="widget.options.searchType === '51'"> <!-- 日期范围选择框 -->
+      <DatePicker v-model="widget.options.val" format="yyyy-MM-dd" placeholder="请选择" placement="bottom-end"
+        class="query" type="daterange"></DatePicker>
+    </div>
+  </div>
+</template>
+<script>
+/* eslint-disable */
+import HelpBox from "../../../pub/helpbox/index.vue"
+import biConfig from "../config/config"
+
+export default {
+  name: 'BiSearchItem',
+  components: { HelpBox },
+  props: {
+    /**
+     * {
+     *    "id": "",
+     *    "name": "单据状态",
+     *    "type": "",
+     *    "datas": [],
+     *    "options": {
+     *      "seq": 1,
+     *      "type": "",
+     *      "key": "",
+     *      "columns": [],
+     *      "url": "",
+     *      "rowIdKey": "",
+     *      "rowNameKey": "",
+     *      "show": true,
+     *      "selectKey": [],
+     *      "helpSearch": {},
+     *      val: '',
+     *      valName: '',
+     *    },
+     *    pId: "",
+     *    pType: "",
+     *    isLeaf: "1"
+     * }
+     */
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  data() {
+    return {
+      helpBoxShow: false,
+      helpBoxUrl: '',
+      helpRowIdKey: '',
+      helpRowNameKey: '',
+      helpSelectKey: [],
+      helpColumns: [],
+      helpApiId: '',
+      helpVal: null,
+      helpValName: null,
+      helpSearchParams: null
+    }
+  },
+  methods: {
+    onHelpOk(res) {
+      console.log("onMultiHelpOk res:", res, this.widget)
+      let rowIdKey = this.helpRowIdKey
+      let rowNameKey = this.helpRowNameKey
+      if (this.widget.options.searchType === '40') {
+        let idNameObj = this.getValArrObj(rowIdKey, rowNameKey, res)
+        console.log("onMultiHelpOk onOk idNameObj:", idNameObj)
+        if (idNameObj) {
+          let idArr = idNameObj[rowIdKey]
+          let nameArr = idNameObj[rowNameKey]
+          if (idArr && nameArr) {
+            this.helpVal = idArr.join()
+            this.helpValName = nameArr.join()
+
+            this.widget.options.val = this.helpVal
+            this.widget.options.valName = this.helpValName
+          }
+        }
+      } else {
+        this.helpVal = res[rowIdKey]
+        this.helpValName = res[rowNameKey]
+        this.widget.options.val = this.helpVal
+        this.widget.options.valName = this.helpValName
+      }
+    },
+    onHelpClear() {
+      this.helpVal = ''
+      this.helpValName = ''
+      this.widget.options.val = ''
+      this.widget.options.valName = ''
+    },
+    showHelpBox() {
+      if (!this.helpApiId) {
+        this.helpApiId = this.widget.options.apiId
+      }
+      if (!this.helpRowIdKey || !this.helpRowNameKey) {
+        this.helpRowIdKey = this.widget.options.rowIdKey
+        this.helpRowNameKey = this.widget.options.rowNameKey
+      }
+      if (!this.helpColumns) {
+        this.helpColumns = this.widget.options.columns
+      }
+      if (!this.helpApiId) {
+        console.error("showHelpBox helpApiId为空:", this.helpApiId)
+        this.$Message.warning("查询条件的帮助框[" + this.widget.id + "-" + this.widget.name + "]未配置相关服务")
+      }
+      if (!this.helpRowIdKey || !this.helpRowNameKey) {
+        console.error("showHelpBox helpRowIdKey或者helpRowNameKey为空:", this.helpRowIdKey + this.helpRowNameKey)
+        this.$Message.warning("查询条件的帮助框[" + this.widget.id + "-" + this.widget.name + "]未配置列标识")
+      }
+      console.log("showHelpBox helpColumns:", this.helpColumns)
+      if (!this.helpColumns) {
+        console.error("showHelpBox helpColumns为空:", this.helpColumns)
+        this.$Message.warning("查询条件的帮助框[" + this.widget.id + "-" + this.widget.name + "]未配置列头")
+      }
+      this.widget.options.url = biConfig.dataServerContext + biConfig.dataServiceUri + this.helpApiId
+      this.helpBoxUrl = this.widget.options.url
+      console.log("showHelpBox url:", this.widget.options.url)
+
+      this.widget.options.show = true
+      this.helpBoxShow = true
+    },
+    getValArrObj(key1, key2, objArrData) {
+      console.log("key1, key2, objArrData:", key1, key2, objArrData)
+      let obj = {}
+      let outputObj = {}
+      if (key1) {
+        outputObj[key1] = []
+      }
+      if (key2) {
+        outputObj[key2] = []
+      }
+      if (objArrData && Array.isArray(objArrData) && objArrData.length > 0) {
+
+        obj = objArrData.reduce((acc, m) => {
+          if (m) {
+            if (key1) {
+              acc[key1].push(m[key1]);
+            }
+            if (key2) {
+              acc[key2].push(m[key2]);
+            }
+          }
+          return acc
+        }, outputObj)
+      }
+      return obj
+    }
+
+  },
+  created() {
+    this.helpApiId = this.widget.options.apiId
+    this.helpColumns = this.widget.options.columns
+    this.helpRowIdKey = this.widget.options.rowIdKey
+    this.helpRowNameKey = this.widget.options.rowNameKey
+    this.helpSearchParams = this.widget.options.helpSearch
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/table/detail-table.vue

@@ -0,0 +1,65 @@
+<template>
+  <DetailTableBi :data="data"></DetailTableBi>
+</template>
+<script>
+import DetailTableBi from "../../../pub/table/detail-table/index.vue"
+import { getListMapData } from "../api/data"
+
+export default {
+  name: "BiDetailTable",
+  components: { DetailTableBi },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      apiId: '',
+      data: []
+    }
+  },
+  methods: {
+    initConfig() {
+      this.apiId = this.widget.options.apiId
+    },
+    doSearch() {
+      if (!this.apiId) {
+        this.$Message.warning("组件[" + this.widget.name + "]未配置数据接口")
+        return
+      }
+      getListMapData(this.apiId, this.params).then(res => {
+        if (res.data.code !== 1) {
+          console.error("明细表格的调用服务[" + this.widget.options.apiId + "]失败：", res)
+        } else {
+          this.data = res.data.data.rows || []
+        }
+      }).catch(err => {
+        console.error("明细表格的调用服务[" + this.widget.options.apiId + "]异常：", err)
+      })
+    }
+  },
+  created() {
+    this.initConfig()
+    this.doSearch()
+  },
+  mounted() {
+
+  },
+  watch: {
+    params: {
+      handler: function (val, oldVal) {
+        console.log('BiDetailTable watch val,oldVal=', val, oldVal)
+        this.doSearch()
+      },
+      deep: true
+    },
+  }
+}
+</script>
+<style scoped></style>