Merge pull request #100 from dataease/pr@dev@feat_支持视图更换数据集

feat(视图): 支持视图更换数据集

frontend/src/lang/en.js

@@ -732,7 +732,9 @@ export default {
     axis_label_color: 'Label Color',
     axis_label_fontsize: 'Label Fontsize',
     text_style: 'Font Style',
-    bolder: 'Bolder'
+    bolder: 'Bolder',
+    change_ds: 'Change Dataset',
+    change_ds_tip: 'Tips：Change Dataset will change fields,you need rebuild chart'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -774,7 +774,9 @@ export default {
     axis_label_color: '標簽顏色',
     axis_label_fontsize: '標簽大小',
     text_style: '字體樣式',
-    bolder: '加粗'
+    bolder: '加粗',
+    change_ds: '更換數據集',
+    change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新製作視圖'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -732,7 +732,9 @@ export default {
     axis_label_color: '标签颜色',
     axis_label_fontsize: '标签大小',
     text_style: '字体样式',
-    bolder: '加粗'
+    bolder: '加粗',
+    change_ds: '更换数据集',
+    change_ds_tip: '提示：更换数据集将导致字段发生变化，需重新制作视图'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/view/ChartEdit.vue

@@ -13,6 +13,9 @@
         <span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
       </el-popover>
       <span style="float: right;line-height: 40px;">
+        <el-button size="mini" @click="changeDs">
+          {{ $t('chart.change_ds') }}
+        </el-button>
         <el-button size="mini" @click="closeEdit">
           {{ $t('commons.save') }}
         </el-button>
@@ -330,6 +333,24 @@
         <el-button type="primary" size="mini" @click="saveResultFilter">{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
+
+    <!--视图更换数据集-->
+    <el-dialog
+      v-dialogDrag
+      :title="$t('chart.change_ds')+'['+table.name+']'"
+      :visible="selectTableFlag"
+      :show-close="false"
+      width="70%"
+      class="dialog-css"
+      :destroy-on-close="true"
+    >
+      <table-selector @getTable="getTable" />
+      <span>{{ $t('chart.change_ds_tip') }}</span>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeChangeChart">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" :disabled="!table.id" @click="changeChart">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </el-row>
 </template>
 
@@ -368,10 +389,11 @@ import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
 import TableNormal from '../components/table/TableNormal'
 import LabelNormal from '../components/normal/LabelNormal'
 import html2canvas from 'html2canvas'
+import TableSelector from './TableSelector'
 
 export default {
   name: 'ChartEdit',
-  components: { ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   props: {
     param: {
       type: Object,
@@ -430,7 +452,9 @@ export default {
       httpRequest: {
         status: true,
         msg: ''
-      }
+      },
+      selectTableFlag: false,
+      changeTable: {}
     }
   },
   computed: {
@@ -556,6 +580,7 @@ export default {
         if (needRefreshGroup) {
           this.refreshGroup(view)
         }
+        this.closeChangeChart()
       })
     },
 
@@ -628,6 +653,7 @@ export default {
       // 从仪表板入口关闭
       bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
       // this.$emit('switchComponent', { name: '' })
+      this.$success(this.$t('commons.save_success'))
     },
     getData(id) {
       if (id) {
@@ -930,6 +956,26 @@ export default {
 
     refreshGroup(view) {
       this.$emit('saveSuccess', view)
+    },
+
+    getTable(table) {
+      this.changeTable = JSON.parse(JSON.stringify(table))
+    },
+
+    changeDs() {
+      this.selectTableFlag = true
+    },
+
+    closeChangeChart() {
+      this.selectTableFlag = false
+    },
+
+    changeChart() {
+      this.view.tableId = this.changeTable.id
+      this.view.xaxis = []
+      this.view.yaxis = []
+      this.view.customFilter = []
+      this.save(true, 'chart', false)
     }
   }
 }