lw-cdp-ui 1.4.22 → 1.4.24

package/dist/components/lwBiChart/page.vue

@@ -1,36 +1,60 @@
 <template>
   <div class="lw-bi-chart-global-layout">
-    <lw-search v-if="searchOptions.length > 0" class="search-body" :options="searchOptions" v-model="searchParams"
-      :hideLabel="true" @search="search" @reset="reset" />
+    <lw-search
+      v-if="searchOptions.length > 0"
+      class="search-body"
+      :options="searchOptions"
+      v-model="searchParams"
+      :hideLabel="true"
+      @search="search"
+      @reset="reset" />
 
-    <GridLayout v-model:layout="chartList" :col-num="12" :row-height="30" :is-draggable="designMode"
-      :is-resizable="designMode" :use-css-transforms="false" vertical-compact use-css-transforms>
-      <GridItem v-for="(item, index) in chartList" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
+    <GridLayout
+      v-model:layout="chartList"
+      :col-num="12"
+      :row-height="30"
+      :is-draggable="designMode"
+      :is-resizable="designMode"
+      :use-css-transforms="false"
+      vertical-compact
+      use-css-transforms>
+      <GridItem
+        v-for="(item, index) in chartList"
+        :key="item.i"
+        :x="item.x"
+        :y="item.y"
+        :w="item.w"
+        :h="item.h"
         :i="item.i">
         <div class="lw-bi-chart-global-layout-item" :class="{ edit: designMode }">
           <div v-if="item.data?.setting?.activeDateUnitFilter" class="filter-top">
             <el-radio-group v-model="item.timeUnit" @change="changeTimeUnit(item, index)">
-              <el-radio-button :label="key" :value="value"
-                v-for="(value, key) in item.data?.setting?.optionalDateUnitRanges" />
-              <el-radio-button disabled
-                v-if="Object.keys(item.data?.setting?.optionalDateUnitRanges).length == 0">未选择周期列表</el-radio-button>
+              <el-radio-button
+                :label="key"
+                :value="value"
+                v-for="(value, key) in item.data?.setting?.optionalDateUnitRanges"
+                :key="key" />
+              <el-radio-button disabled v-if="Object.keys(item.data?.setting?.optionalDateUnitRanges).length == 0"
+                >未选择周期列表</el-radio-button
+              >
             </el-radio-group>
           </div>
 
           <div v-if="item?.type == 'Dashboard'" class="grid-item-dashboard">
             <lwBiChartPage :chartId="item.id" />
           </div>
-          <lwBiChartItem :rawData="item.data"
+          <lwBiChartItem
+            :rawData="item.data"
             :height="item.data?.setting?.activeDateUnitFilter ? 'calc(100% - 36px)' : '100%'" />
           <div class="remove" v-if="designMode" @click="removeChart(index)">
             <el-button type="primary" link icon="el-icon-delete"></el-button>
           </div>
         </div>
-
       </GridItem>
     </GridLayout>
     <div class="no-record-panel e-unselect" v-if="chartList.length === 0">
-      <el-empty :description="designMode ? '点击上方工具栏中的按钮，添加图表至当前仪表板' : '仪表板中还没有添加任何图表'" />
+      <el-empty
+        :description="designMode ? '点击上方工具栏中的按钮，添加图表至当前仪表板' : '仪表板中还没有添加任何图表'" />
     </div>
   </div>
 </template>
@@ -81,8 +105,8 @@ export default {
       let visualize = await this.$http.get(
         `${this.$config.API_URL}/bi-manage/{tenantId}/{buCode}/visualize/${chartData.id}`
       )
-      visualize?.models.forEach(item => {
-        item?.dimensions.forEach(d => {
+      visualize?.models.forEach((item) => {
+        item?.dimensions.forEach((d) => {
           d.timeSetting.timeUnit = chartItem.timeUnit
         })
       })
@@ -160,60 +184,112 @@ export default {
     removeChart(index) {
       this.modelValue.splice(index, 1)
     },
-    getFilter(filterControls) {
-      filterControls.forEach(async control => {
-        switch (control.type) {
-          case 'DATA_PICKER':
-          case 'DATA_CASCADE':
-            if (control.dataPickerSetting.options.type == 'DICT') {
-              this.searchOptions.push({
-                label: control.name,
-                prop: `values.${control.dataPickerSetting.code}`,
-                renderType: 'select',
-                options: Object.entries(control.dataPickerSetting.options.dict).map(([key, value]) => ({
-                  value: key,
-                  label: value
-                })),
-                valueKey: 'value',
-                labelKey: 'label'
-              })
-            } else {
-              let list = await this.$api.dimensionChild.list({}, control.dataPickerSetting.options.dimensionTableId)
-              this.searchOptions.push({
-                label: control.name,
-                prop: `values.${control.dataPickerSetting.code}`,
-                renderType: 'select',
-                options: list.map(item => ({
-                  value: item.id,
-                  label: item.name
-                })),
-                valueKey: 'value',
-                labelKey: 'label'
-              })
-            }
+    listToTree(data) {
+      const result = []
+      const map = {}
+
+      data.forEach((item) => {
+        map[item.id] = { value: item.id, label: item.name, children: [] }
+      })
+
+      data.forEach((item) => {
+        const parent = map[item.parent]
+        if (parent) {
+          parent.children.push(map[item.id])
+        } else {
+          result.push(map[item.id])
+        }
+      })
+
+      return result
+    },
+    async getFilter(filterControls) {
+      for (const control of filterControls) {
+        const { type } = control
+
+        const getOptions = async (setting) => {
+          const { type, dict, dataInterfaceUri, dimensionTableId } = setting.options
+          if (type === 'DICT') {
+            return Object.entries(dict).map(([key, value]) => ({ value: key, label: value }))
+          } else if (type === 'DATA_INTERFACE') {
+            const res = await this.$http.get(dataInterfaceUri)
+            return res.map((item) => ({ value: item.id, label: item.name }))
+          } else {
+            const res = await this.$api.dimensionChild.list({}, dimensionTableId)
+            return res.map((item) => ({ value: item.id, label: item.name }))
+          }
+        }
+
+        const getTreeOptions = async (setting) => {
+          const { type, dict, dataInterfaceUri, dimensionTableId } = setting.options
+          if (type === 'DICT') {
+            return Object.entries(dict).map(([key, value]) => ({ value: key, label: value }))
+          } else if (type === 'DATA_INTERFACE') {
+            const res = await this.$http.get(dataInterfaceUri)
+            return this.listToTree(res)
+          } else {
+            const res = await this.$api.dimensionChild.list({}, dimensionTableId)
+            return this.listToTree(res)
+          }
+        }
 
+        switch (type) {
+          case 'DATA_PICKER': {
+            const setting = control.dataPickerSetting
+            const options = await getOptions(setting)
+            this.searchOptions.push({
+              label: control.name,
+              prop: `values.${setting.code}`,
+              renderType: 'select',
+              options,
+              valueKey: 'value',
+              labelKey: 'label'
+            })
             break
-          case 'DATA_INPUT':
+          }
+
+          case 'DATA_CASCADE': {
+            const setting = control.dataPickerSetting
+            const items = await getTreeOptions(setting)
+            this.searchOptions.push({
+              label: control.name,
+              name: `values.${setting.code}`,
+              value: '',
+              component: 'treeSelect',
+              options: {
+                items,
+                placeholder: '请选择' + control.name,
+                checkStrictly: true
+              }
+            })
+            break
+          }
+
+          case 'DATA_INPUT': {
             this.searchOptions.push({
               label: control.name,
               prop: `values.${control.dataInputSetting.code}`,
               renderType: 'input'
             })
             break
-          case 'DATE_PICKER':
+          }
+
+          case 'DATE_PICKER': {
+            const setting = control.datePickerSetting
             this.searchOptions.push({
               label: control.name,
-              prop: `ranges.${control.datePickerSetting.code}`,
+              prop: `ranges.${setting.code}`,
               renderType: 'dateRange',
               valueFormat: 'YYYY-MM-DDTHH:mm:ss.SSSZ'
             })
-            this.globalFilter.ranges[control.datePickerSetting.code] = {
+            this.globalFilter.ranges[setting.code] = {
               timeRange: {},
-              type: control.datePickerSetting.type
+              type: setting.type
             }
             break
+          }
         }
-      })
+      }
     }
   }
 }