fix: 报表新增导出+样式隔离

src/views/view-all-manage/create-view/index.vue

@@ -27,6 +27,10 @@
               @change="onShowTypeChange"
             ></a-select>
           </a-form-item>
+          <a-form-item label="是否导出" v-if="showTypeId === 1">
+            <a-switch v-model:checked="isExport" :checkedValue="1" :unCheckedValue="0">
+            </a-switch>
+          </a-form-item>
           <a-form-item label="字段" v-if="fieldList.length">
             <a-checkbox-group v-model:value="fieldIds">
               <a-checkbox
@@ -85,6 +89,7 @@
               />
               <a-range-picker v-if="item.type === 'time'" class="date-item" v-model:value="previewData.filterData[item.name]" @change="toFilt" />
             </div>
+            <div v-if="previewData.isExport" class="filter-item"><a-button @click="toExport">导出</a-button></div>
           </div>
           <div class="y-table-content">
             <a-table
@@ -155,6 +160,7 @@ const showTypeId = ref();
 const fieldIds = ref([]);
 const xDataId = ref();
 const yDataId = ref();
+const isExport = ref(0);
 
 const previewLoading = ref(false);
 const nameVisible = ref(false);
@@ -239,6 +245,7 @@ const tranformList = (list) => {
 // 重置配置数据
 const resetSelectData = () => {
   showTypeId.value = undefined
+  isExport.value = 0
   fieldList.value = [];
   fieldIds.value = [];
   xDataList.value = [];
@@ -295,6 +302,7 @@ const toPreview = ({filter}) => {
     showTypeId: showTypeId.value,
     xDataId: xDataId.value?.toString(),
     yDataId: yDataId.value?.toString(),
+    isExport: isExport.value,
   })
     .then((res) => {
       previewData.type = res.data.type;
@@ -308,6 +316,7 @@ const toPreview = ({filter}) => {
         previewData.columnConfig = res.data.header;
         previewData.dataList = res.data.data;
         previewData.total = res.data.count;
+        previewData.isExport = res.data.is_export
       } else {
         previewData.chartCfg = res.data.config;
         previewData.filter = res.data.filter;
@@ -335,6 +344,7 @@ const toSaveView = () => {
     showTypeId: showTypeId.value,
     xDataId: xDataId.value?.toString(),
     yDataId: yDataId.value?.toString(),
+    isExport: isExport.value,
   }).then(() => {
     message.success("保存成功，可前往视图列表查看");
     nameVisible.value = false;
@@ -345,6 +355,10 @@ const toFilt = () => {
   previewData.page = 1;
   toPreview({});
 };
+
+const toExport = () => {
+  // exportTable()
+}
 </script>
 
 <style lang="less" scoped>

src/views/view-all-manage/create-view/service.js

@@ -26,7 +26,7 @@ export function getFieldOpts({ modularId, showTypeId }) {
 }
 
 // 预览
-export function preview({ modularId, fieldIds, page, perPage, filter, showTypeId, xDataId, yDataId }) {
+export function preview({ modularId, fieldIds, page, perPage, filter, showTypeId, xDataId, yDataId, isExport }) {
   return post({
     url: "api/v1/preview/view",
     data: {
@@ -38,6 +38,7 @@ export function preview({ modularId, fieldIds, page, perPage, filter, showTypeId
       show_type_id: showTypeId,
       x_data_id: xDataId,
       y_data_id: yDataId,
+      is_export: isExport,
     },
   });
 }

src/views/view-all-manage/view-list/index.vue

@@ -78,11 +78,15 @@
           :column-config="selectViewInfo.header"
           :total="selectViewInfo.count"
           :title="selectViewInfo.preview_name"
+          :is-export="selectViewInfo.is_export"
           @toFilt="
             (params) => {
               toGetViewInfo(params);
-            }
-          "
+            }"
+          @toExport="
+            (params) => {
+              toExport(params)
+            }"
         />
         <y-chart v-else-if="selectViewInfo.type === 'chart'" :chartCfg="selectViewInfo.config" :title="selectViewInfo.preview_name" :filter-config="selectViewInfo.filter" @toFilt="toGetViewInfo" />
         <div class="preview-area" v-else>
@@ -97,6 +101,7 @@
 <script setup>
 import { onMounted, ref, reactive } from "vue";
 import { getProModular, getViewList, getViewInfo, deleteView } from "./service";
+import { exportTable } from "@/api/preview/index";
 import { viewListCols } from "./config";
 import yTable from "@/components/common/y-table.vue";
 import { message } from "ant-design-vue";
@@ -154,6 +159,15 @@ const toGetViewInfo = (params = {}) => {
   });
 };
 
+const toExport = (params = {}) => {
+  exportTable({
+    previewId: selectedRowId.value,
+    ...params,
+  }).then(() => {
+    message.success("导出成功");
+  });
+}
+
 const onProjectChange = (val) => {
   modularSel.value = projectSel.value.find((item) => item.value === val).child;
   modularId.value = null;
@@ -192,7 +206,7 @@ const toDelete = (previewId) => {
   overflow: auto;
 }
 
-:deep(.ant-table-row:hover) {
+:deep(.@{ant-prefix}-table-row:hover) {
   cursor: pointer;
   background-color: #e6f4ff;
 }