对接echarts的表格

jero-web/src/views/projectManagement/components/responsibilityList.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
-    :title="$t('batSetting')"
-    :width="1200"
+    :title="title"
+    :width="800"
     :visible="visible"
     :confirm-loading="confirmLoading"
     :maskClosable="false"
@@ -12,57 +12,87 @@
         {{$t('cancel')}}
       </a-button>
     </template>
+    <div style="text-align: right;margin-bottom: 10px">
+      <div @click="handleExport" class="operator-text">
+        <a-icon type="export" :rotate="-90"/>
+        {{$t('export')}}
+      </div>
+    </div>
+    <a-table
+      ref="table"
+      :loading="loading"
+      :pagination="false"
+      :scroll="{x: true,y:400}"
+      :data-source="dataSource"
+      :columns="columns"
+    >
+    </a-table>
   </a-modal>
 </template>
 
 <script>
-  import { getAction, postAction } from '@/api/manage'
+  import { getAction, postAction, downloadFile } from '@/api/manage'
   import moment from 'moment'
+
   export default {
     name: 'responsibilityList',
-    props: ['url'],
     data() {
       return {
         visible: false,
+        title: '',
         confirmLoading: false,
-        formInline: {},
-        rules: {},
-        ids: []
+        loading: false,
+        dataSource: [],
+        queryParam: {},
+        url: {
+          groupByTerritoryXls: '/project/projectLibraryBase/exportProjectDetailsStatisticsGroupByTerritoryXls',
+          GroupByTerritory: '/project/projectLibraryBase/getProjectDetailsStatisticsGroupByTerritory'
+        },
+        columns: [
+          {
+            title: this.$t('areaOfResponsibility'),
+            dataIndex: 'dutyTerritory',
+            align: 'center',
+            width:400,
+            ellipsis: true
+          },
+          {
+            title: this.$t('Quantity'),
+            dataIndex: 'amount',
+            align: 'center',
+            ellipsis: true,
+            width:300,
+          }
+        ]
       }
     },
     mounted() {
     },
     methods: {
-      edit(data) {
+      getData(data) {
         this.visible = true
-        this.$nextTick(() => {
-          this.ids = data || []
-          this.formInline = {}
-        })
+        this.title = data.title
+        this.queryParam = data
+        this.getList(data)
       },
-      handleOk() {
-        let ids = JSON.parse(JSON.stringify(this.ids))
-        let query = {
-          ids: ids.join(','),
-          ...this.formInline
-        }
-        this.confirmLoading = true
-        postAction(this.url.setBatch, query).then((res) => {
+      getList(data) {
+        this.loading = true
+        getAction(this.url.GroupByTerritory, data).then((res) => {
           if (res.success) {
-            this.$message.success(this.$t('OperationSuccessful'))
-            this.visible = false
-            this.confirmLoading = false
-            this.$emit('batSettingList')
+            this.loading = false
+            this.dataSource = res.result.dataList || []
           } else {
-            this.$message.warning(this.$t('operationFailed'))
-            this.confirmLoading = false
+            this.loading = false
+            this.dataSource = []
           }
         })
       },
-      handleCancel() {
-        this.formInline = {}
-        this.visible = false
+      handleExport() {
+        downloadFile(this.url.groupByTerritoryXls, this.title + '.xls', this.queryParam)
       },
+      handleCancel() {
+        this.visible = false
+      }
     }
   }
 </script>