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

2024-07-30 20:04:38 +08:00 · 2024-07-30 20:04:38 +08:00 · cd66c3b714
commit cd66c3b714
parent 0955c40e81
19 changed files with 189 additions and 29 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -10,6 +10,9 @@ declare module 'vue' {
    ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
    ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
    AButton: typeof import('ant-design-vue/es')['Button']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
+    ACol: typeof import('ant-design-vue/es')['Col']
    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
    AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
@ -17,15 +20,20 @@ declare module 'vue' {
    AFormItem: typeof import('ant-design-vue/es')['FormItem']
    AInput: typeof import('ant-design-vue/es')['Input']
    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
    AMenu: typeof import('ant-design-vue/es')['Menu']
    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
    AModal: typeof import('ant-design-vue/es')['Modal']
    APagination: typeof import('ant-design-vue/es')['Pagination']
    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
    ARadio: typeof import('ant-design-vue/es')['Radio']
+    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
+    ARow: typeof import('ant-design-vue/es')['Row']
    ASelect: typeof import('ant-design-vue/es')['Select']
    ASpace: typeof import('ant-design-vue/es')['Space']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
    ASwitch: typeof import('ant-design-vue/es')['Switch']
    ATable: typeof import('ant-design-vue/es')['Table']
    RouterLink: typeof import('vue-router')['RouterLink']
--- a/index.html
+++ b/index.html
@ -6,6 +6,11 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悦码后台</title>
  </head>
+  <style>
+    #y-code-app {
+      padding: 0 8px;
+    }
+  </style>
  <body>
    <div id="y-code-app"></div>
    <script type="module" src="/src/main.ts"></script>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,16 +1,19 @@
 <script lang="ts" setup>
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
-import { legacyLogicalPropertiesTransformer, StyleProvider } from 'ant-design-vue';
+import { legacyLogicalPropertiesTransformer, StyleProvider, ConfigProvider } from 'ant-design-vue';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';

 dayjs.locale('zh-cn');

+ConfigProvider.config({
+  prefixCls: 'ycode-ant',
+})

 </script>

 <template>
-  <a-config-provider :locale="zhCN" :transformers="[legacyLogicalPropertiesTransformer]">
+  <a-config-provider :locale="zhCN" :transformers="[legacyLogicalPropertiesTransformer]" prefix-cls="ycode-ant">
    <StyleProvider hash-priority="high">
      <router-view />
    </StyleProvider>
--- a/src/api/preview/index.ts
+++ b/src/api/preview/index.ts
@ -19,3 +19,13 @@ export function searchInfo(data: PreviewItemParams) {
    },
  });
 }
+
+export function exportTable(data: PreviewItemParams) {
+  return post({
+    url: '/api/v1/preview/export',
+    data: {
+      preview_id: data.previewId,
+      filter: data.filter,
+    },
+  })
+}
--- a/src/components/common/y-chart.vue
+++ b/src/components/common/y-chart.vue
@ -29,7 +29,7 @@
 </template>

 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import Line from "@/plugins/antv-g2plot/line.vue";
 import Column from "@/plugins/antv-g2plot/column.vue";
 import _ from 'lodash';
--- a/src/components/common/y-table.vue
+++ b/src/components/common/y-table.vue
@ -13,6 +13,7 @@
        <a-select
          v-if="item.type === 'select'"
          class="input-item"
+          placeholder="请选择"
          :options="item.options"
          allow-clear
          v-model:value="filterData[item.name]"
@ -28,6 +29,7 @@
        />
        <a-range-picker v-else-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" @change="toFilt" />
      </div>
+      <div v-if="isExport" class="filter-item"><a-button type="primary" @click="toExport">导出</a-button></div>
    </div>
    <div class="y-table-content">
      <a-table
@ -52,7 +54,7 @@
 </template>

 <script setup>
-import { reactive, ref, watch } from "vue";
+import { reactive, ref } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import _ from "lodash";

@ -77,6 +79,10 @@ const props = defineProps({
    type: String,
    default: "",
  },
+  isExport: {
+    type: Number,
+    default: 0,
+  },
 });
 const emit = defineEmits(["toFilt"]);

@ -87,7 +93,7 @@ const pageState = reactive({
  perPage: 20,
 });

-const getData = () => {
+const getFilter = () => {
  const cloneFilter = _.cloneDeep(props.filterConfig);
  const filter = cloneFilter
    .filter((item) => {
@ -105,8 +111,13 @@ const getData = () => {
        value: filterData.value[item.name],
      };
    });
+  return filter
+};
+
+const getData = () => {
+  
  emit("toFilt", {
-    filter,
+    filter: getFilter(),
    page: pageState.page,
    perPage: pageState.perPage,
  });
@ -119,6 +130,14 @@ const toFilt = useDebounceFn(() => {
 const pageChange = () => {
  getData();
 };
+
+const toExport = () => {
+  emit("toExport", {
+    filter: getFilter(),
+    page: pageState.page,
+    perPage: pageState.perPage,
+  });
+}
 </script>

 <style lang="less" scoped>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -120,9 +120,6 @@ const handleExitFullscreen = () => {
    transition: padding 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
    margin-right: 8px;
  }
-  .i-container {
-    padding: 0 8px 8px 8px;
-  }
  .container-collapsed {
    padding-left: @aside-width-collapsed + 8px;
  }
--- a/src/views/config-manage/module-cfg/components/create-modal.vue
+++ b/src/views/config-manage/module-cfg/components/create-modal.vue
@ -97,7 +97,7 @@
        </a-form-item>
        <a-form-item label="数据库密码" name="database_password">
          <a-space>
-            <a-input
+            <a-input-password
              placeholder="请输入数据库密码"
              v-model:value="formData.database_password"
            />
@ -137,7 +137,6 @@ const formRules = ref({
  modular_name: [
    { required: true, message: "请输入数据来源", trigger: "submit" },
  ],
-  // show_type_id: [{ required: true, message: "请选择", trigger: "submit" }],
  original_type: [{ required: true, message: "请选择", trigger: "submit" }],
  original_sql: [{ required: true, message: "请输入", trigger: "submit" }],
  table: [{ required: true, message: "请选择", trigger: "submit" }],
@ -150,7 +149,6 @@ const formData = ref({
  modular_name: undefined,
  is_show: 0,
  original_type: 1, // 1 - 自定义，2 - 指定表
-  // show_type_id: undefined,
  original_sql: undefined,
  table: undefined,
  is_other_database: 0,
@ -174,7 +172,6 @@ watch(
        modular_name: newVal.modular_name,
        is_show: newVal.is_show,
        original_type: newVal.original_type,
-        // show_type_id: newVal.show_type_id,
        original_sql: newVal.original_sql,
        table: newVal.table,
        drive_type: newVal.drive_type,
@ -210,7 +207,6 @@ const resetFormData = () => {
    modular_name: undefined,
    is_show: 0,
    original_type: 1, // 1 - 自定义，2 - 指定表
-    // show_type_id: undefined,
    original_sql: undefined,
    table: undefined,
    is_other_database: 0,
--- a/src/views/config-manage/module-cfg/components/field-modal.vue
+++ b/src/views/config-manage/module-cfg/components/field-modal.vue
@ -48,7 +48,7 @@
              :options="fieldNumTypeSel" 
              placeholder="请选择"
              allow-clear
-              style="width: 160px">
+              style="width: 120px">
            </a-select>
            <template v-else>
              {{ record.field_numerical_name }}
@ -61,7 +61,7 @@
              :options="fieldTypeSel"
              placeholder="请选择"
              allow-clear
-              style="width: 160px"
+              style="width: 120px"
            >
            </a-select>
            <template v-else>
@ -79,6 +79,19 @@
              {{ record.is_search ? "是" : "否" }}
            </template>
          </template>
+          <template v-if="column.dataIndex === 'is_other_database'">
+            <template v-if="editableData[record.field_id]">
+              <a-switch
+                v-model:checked="record.is_other_database"
+                :checkedValue="1"
+                :unCheckedValue="0" 
+              />
+              <a-button v-if="record.is_other_database" type="link" @click="openSpecialModal(record)">请填写</a-button>
+            </template>
+            <template v-else>
+              {{ record.is_other_database ? "是" : "否" }}
+            </template>
+          </template>
          <template v-if="column.dataIndex === 'original_type'">
            <a-select 
              v-if="editableData[record.field_id]"
@ -116,6 +129,31 @@
        @change="pageChange"
      />
    </div>
+    <a-modal :open="specialVisible" :width="640" title="数据库特配" :bodyStyle="{ marginTop: '30px' }" @ok="specialVisible = false" @cancel="specialVisible = false">
+      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+        <a-form-item label="数据库驱动">
+          <a-radio-group v-model:value="specialModalData[specialModalId].drive_type">
+            <a-radio :value="1">MySQL</a-radio>
+            <a-radio :value="2">Click House</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="数据库地址">
+          <a-input placeholder="请输入数据库地址" v-model:value="specialModalData[specialModalId].database_address" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库端口">
+          <a-input-number placeholder="请输入数据库端口" style="width: 200px" v-model:value="specialModalData[specialModalId].database_port" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库名称">
+          <a-input placeholder="请输入数据库名称" v-model:value="specialModalData[specialModalId].database_name" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库用户">
+          <a-input placeholder="请输入数据库用户" v-model:value="specialModalData[specialModalId].database_username" allow-clear />
+        </a-form-item>
+        <a-form-item label="数据库密码">
+          <a-input-password placeholder="请输入数据库密码" v-model:value="specialModalData[specialModalId].database_password" allow-clear />
+        </a-form-item>
+      </a-form>
+    </a-modal>
  </a-modal>
 </template>

@ -147,12 +185,22 @@ const fieldName = ref("");
 const dataList = ref([]);
 const fieldTypeSel = ref([]);
 const fieldNumTypeSel = ref([]);
+const specialVisible = ref(false);
+const specialModalId = ref();
 const pageState = reactive({
  page: 1,
  perPage: 20,
  total: 0,
 });
 const editableData = reactive({});
+const specialModalData = reactive({
+  drive_type: undefined,
+  database_address: undefined,
+  database_port: undefined,
+  database_name: undefined,
+  database_username: undefined,
+  database_password: undefined,
+});

 watch(
  () => props.open,
@ -160,7 +208,7 @@ watch(
    if (newVal) {
      toGetList();
    }
-  }
+  },
 );

 onMounted(() => {
@ -214,9 +262,16 @@ const addField = () => {
    is_search: 0,
    field_type_id: undefined,
    belong_to_table: undefined,
+    is_other_database: 0,
    original_type: undefined,
    original_sql: undefined,
    sort: 0,
+    drive_type: undefined,
+    database_address: undefined,
+    database_port: undefined,
+    database_name: undefined,
+    database_username: undefined,
+    database_password: undefined,
  };
  dataList.value.unshift(item);
  editableData[item.field_id] = {
@ -238,6 +293,21 @@ const handleCancel = (record) => {
  }
 };

+const openSpecialModal = (record) => {
+  specialVisible.value = true
+  specialModalId.value = record.field_id
+  if (!specialModalData[record.field_id]) {
+    specialModalData[record.field_id] = {
+      drive_type: undefined,
+      database_address: undefined,
+      database_port: undefined,
+      database_name: undefined,
+      database_username: undefined,
+      database_password: undefined,
+    }
+  }
+}
+
 const handleSave = (record) => {
  const params = {
    is_search: record.is_search,
@ -245,7 +315,17 @@ const handleSave = (record) => {
    modular_id: props.modularId,
    original_type: record.original_type,
    original_sql: record.original_sql,
+    is_other_database: record.is_other_database,
  };
+  // 如果数据库特配弹框有数据
+  if (specialModalData[record.field_id]) {
+    params.drive_type = specialModalData[record.field_id].drive_type
+    params.database_address = specialModalData[record.field_id].database_address
+    params.database_port = specialModalData[record.field_id].database_port
+    params.database_name = specialModalData[record.field_id].database_name
+    params.database_username = specialModalData[record.field_id].database_username
+    params.database_password = specialModalData[record.field_id].database_password
+  }
  // 检验必填参数
  const validateFields = [
    { field: 'field_title', msg: "请填写字段标题" },
--- a/src/views/config-manage/module-cfg/config.ts
+++ b/src/views/config-manage/module-cfg/config.ts
@ -11,11 +11,12 @@ export const moduleCfgCols = [
 export const viewCfgCols = [
  { dataIndex: 'field_name', title: '字段名称', align: 'center'},
  { dataIndex: 'field_title', title: '字段标题', align: 'center'},
-  { dataIndex: 'field_numerical_name', title: '字段类型', align: 'center'},
+  { dataIndex: 'field_numerical_name', title: '字段类型', align: 'center', width: 120},
  { dataIndex: 'field_type_name', title: '搜索类型', align: 'center'},
  { dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
  { dataIndex: 'sort', title: '排序', align: 'center'},
  { dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'},
+  { dataIndex: 'is_other_database', title: '数据库特配', align: 'center'},
  { dataIndex: 'original_type', title: '数据源类型', align: 'center'},
  { dataIndex: 'original_sql', title: '数据源', align: 'center', width: 400},
  { dataIndex: 'action', title: '操作', align: 'center'},
--- a/src/views/config-manage/module-cfg/index.vue
+++ b/src/views/config-manage/module-cfg/index.vue
@ -80,7 +80,7 @@
    />
    <FieldModal
      title="字段管理"
-      width="80%"
+      width="90%"
      :open="fieldModalState.visible"
      :modularId="fieldModalState.modularId"
      @cancel="fieldModalState.visible = false"
@ -223,7 +223,7 @@ const openFieldModal = (record) => {
  margin-bottom: 10px;
 }

-.ant-table-wrapper {
+.@{ant-prefix}-table-wrapper {
  margin-bottom: 10px;
 }

--- a/src/views/config-manage/project-cfg/components/create-modal.vue
+++ b/src/views/config-manage/project-cfg/components/create-modal.vue
@ -50,7 +50,7 @@
      </a-form-item>
      <a-form-item label="数据库密码" name="database_password">
        <a-space>
-          <a-input
+          <a-input-password
            placeholder="请输入数据库密码"
            v-model:value="formData.database_password"
          />
--- a/src/views/config-manage/project-cfg/index.vue
+++ b/src/views/config-manage/project-cfg/index.vue
@ -190,7 +190,7 @@ const openCreateModal = () => {
  margin-bottom: 10px;
 }

-.ant-table-wrapper {
+.@{ant-prefix}-table-wrapper {
  margin-bottom: 10px;
 }

--- a/src/views/config-manage/view-cfg/index.vue
+++ b/src/views/config-manage/view-cfg/index.vue
@ -171,7 +171,7 @@ const search = () => {
  margin-bottom: 10px;
 }

-.ant-table-wrapper {
+.@{ant-prefix}-table-wrapper {
  margin-bottom: 10px;
 }

--- a/src/views/page-show-info/page-info/index,.vue
+++ b/src/views/page-show-info/page-info/index,.vue
@ -44,6 +44,7 @@
                    :column-config="item.data.header"
                    :total="item.data.count"
                    :title="item.data.preview_name"
+                    :is-export="item.data.is_export"
                    @toFilt="
                    (params?:object) => {
                      handleSingle(ids[index], params);
@ -82,9 +83,10 @@
                      :column-config="item.data.header"
                      :total="item.data.count"
                      :title="item.data.preview_name"
+                      :is-export="item.data.is_export"
                      @toFilt="
-                      (params?:object) => {
-                        handleSingle(ids[index], params,);
+                        (params?:object) => {
+                          handleSingle(ids[index], params,);
                        }
                      "
                    ></y-table>
--- a/src/views/view-all-manage/create-view/index.vue
+++ b/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>
--- a/src/views/view-all-manage/create-view/service.js
+++ b/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,
    },
  });
 }
--- a/src/views/view-all-manage/view-list/index.vue
+++ b/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;
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -39,6 +39,16 @@ export default defineConfig({
      },
    },
  },
+  css: {
+    devSourcemap: true,
+    preprocessorOptions: {
+      less: {
+        modifyVars: {
+          'ant-prefix': 'ycode-ant',
+        },
+      },
+    },
+  },
  plugins: [
    vue(),
    vueJsx(),