wangxuefeng/low-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sy2084 2024-07-30 20:04:38 +08:00
parent 0955c40e81
commit cd66c3b714
19 changed files with 189 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components.d.ts vendored
View File

@ -10,6 +10,9 @@ declare module 'vue' {
ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb'] ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem'] ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
AButton: typeof import('ant-design-vue/es')['Button'] 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'] AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
ADropdown: typeof import('ant-design-vue/es')['Dropdown'] ADropdown: typeof import('ant-design-vue/es')['Dropdown']
AFloatButton: typeof import('ant-design-vue/es')['FloatButton'] AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
@ -17,15 +20,20 @@ declare module 'vue' {
AFormItem: typeof import('ant-design-vue/es')['FormItem'] AFormItem: typeof import('ant-design-vue/es')['FormItem']
AInput: typeof import('ant-design-vue/es')['Input'] AInput: typeof import('ant-design-vue/es')['Input']
AInputNumber: typeof import('ant-design-vue/es')['InputNumber'] AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
AMenu: typeof import('ant-design-vue/es')['Menu'] AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem'] AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AModal: typeof import('ant-design-vue/es')['Modal'] AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination'] APagination: typeof import('ant-design-vue/es')['Pagination']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm'] APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
ARadio: typeof import('ant-design-vue/es')['Radio'] ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup'] 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'] ASelect: typeof import('ant-design-vue/es')['Select']
ASpace: typeof import('ant-design-vue/es')['Space'] ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASwitch: typeof import('ant-design-vue/es')['Switch'] ASwitch: typeof import('ant-design-vue/es')['Switch']
ATable: typeof import('ant-design-vue/es')['Table'] ATable: typeof import('ant-design-vue/es')['Table']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']

5
index.html
View File

@ -6,6 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悦码后台</title> <title>悦码后台</title>
</head> </head>
<style>
#y-code-app {
padding: 0 8px;
}
</style>
<body> <body>
<div id="y-code-app"></div> <div id="y-code-app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>

7
src/App.vue
View File

@ -1,16 +1,19 @@
<script lang="ts" setup> <script lang="ts" setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN'; 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 from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn'); dayjs.locale('zh-cn');
ConfigProvider.config({
prefixCls: 'ycode-ant',
})
</script> </script>
<template> <template>
<a-config-provider :locale="zhCN" :transformers="[legacyLogicalPropertiesTransformer]"> <a-config-provider :locale="zhCN" :transformers="[legacyLogicalPropertiesTransformer]" prefix-cls="ycode-ant">
<StyleProvider hash-priority="high"> <StyleProvider hash-priority="high">
<router-view /> <router-view />
</StyleProvider> </StyleProvider>

10
src/api/preview/index.ts
View File

@ -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,
},
})
}

2
src/components/common/y-chart.vue
View File

@ -29,7 +29,7 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, watch } from "vue"; import { computed, ref } from "vue";
import Line from "@/plugins/antv-g2plot/line.vue"; import Line from "@/plugins/antv-g2plot/line.vue";
import Column from "@/plugins/antv-g2plot/column.vue"; import Column from "@/plugins/antv-g2plot/column.vue";
import _ from 'lodash'; import _ from 'lodash';

25
src/components/common/y-table.vue
View File

@ -13,6 +13,7 @@
<a-select <a-select
v-if="item.type === 'select'" v-if="item.type === 'select'"
class="input-item" class="input-item"
placeholder="请选择"
:options="item.options" :options="item.options"
allow-clear allow-clear
v-model:value="filterData[item.name]" 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" /> <a-range-picker v-else-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" @change="toFilt" />
</div> </div>
<div v-if="isExport" class="filter-item"><a-button type="primary" @click="toExport">导出</a-button></div>
</div> </div>
<div class="y-table-content"> <div class="y-table-content">
<a-table <a-table
@ -52,7 +54,7 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, watch } from "vue"; import { reactive, ref } from "vue";
import { useDebounceFn } from "@vueuse/core"; import { useDebounceFn } from "@vueuse/core";
import _ from "lodash"; import _ from "lodash";
@ -77,6 +79,10 @@ const props = defineProps({
type: String, type: String,
default: "", default: "",
}, },
isExport: {
type: Number,
default: 0,
},
}); });
const emit = defineEmits(["toFilt"]); const emit = defineEmits(["toFilt"]);
@ -87,7 +93,7 @@ const pageState = reactive({
perPage: 20, perPage: 20,
}); });
const getData = () => { const getFilter = () => {
const cloneFilter = _.cloneDeep(props.filterConfig); const cloneFilter = _.cloneDeep(props.filterConfig);
const filter = cloneFilter const filter = cloneFilter
.filter((item) => { .filter((item) => {
@ -105,8 +111,13 @@ const getData = () => {
value: filterData.value[item.name], value: filterData.value[item.name],
}; };
}); });
return filter
};
const getData = () => {
emit("toFilt", { emit("toFilt", {
filter, filter: getFilter(),
page: pageState.page, page: pageState.page,
perPage: pageState.perPage, perPage: pageState.perPage,
}); });
@ -119,6 +130,14 @@ const toFilt = useDebounceFn(() => {
const pageChange = () => { const pageChange = () => {
getData(); getData();
}; };
const toExport = () => {
emit("toExport", {
filter: getFilter(),
page: pageState.page,
perPage: pageState.perPage,
});
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

3
src/layout/index.vue
View File

@ -120,9 +120,6 @@ const handleExitFullscreen = () => {
transition: padding 0.3s cubic-bezier(0.2, 0, 0, 1) 0s; transition: padding 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
margin-right: 8px; margin-right: 8px;
} }
.i-container {
padding: 0 8px 8px 8px;
}
.container-collapsed { .container-collapsed {
padding-left: @aside-width-collapsed + 8px; padding-left: @aside-width-collapsed + 8px;
} }

6
src/views/config-manage/module-cfg/components/create-modal.vue
View File

@ -97,7 +97,7 @@
</a-form-item> </a-form-item>
<a-form-item label="数据库密码" name="database_password"> <a-form-item label="数据库密码" name="database_password">
<a-space> <a-space>
<a-input <a-input-password
placeholder="请输入数据库密码" placeholder="请输入数据库密码"
v-model:value="formData.database_password" v-model:value="formData.database_password"
/> />
@ -137,7 +137,6 @@ const formRules = ref({
modular_name: [ modular_name: [
{ required: true, message: "请输入数据来源", trigger: "submit" }, { required: true, message: "请输入数据来源", trigger: "submit" },
], ],
// show_type_id: [{ required: true, message: "请选择", trigger: "submit" }],
original_type: [{ required: true, message: "请选择", trigger: "submit" }], original_type: [{ required: true, message: "请选择", trigger: "submit" }],
original_sql: [{ required: true, message: "请输入", trigger: "submit" }], original_sql: [{ required: true, message: "请输入", trigger: "submit" }],
table: [{ required: true, message: "请选择", trigger: "submit" }], table: [{ required: true, message: "请选择", trigger: "submit" }],
@ -150,7 +149,6 @@ const formData = ref({
modular_name: undefined, modular_name: undefined,
is_show: 0, is_show: 0,
original_type: 1, // 1 - 自定义，2 - 指定表 original_type: 1, // 1 - 自定义，2 - 指定表
// show_type_id: undefined,
original_sql: undefined, original_sql: undefined,
table: undefined, table: undefined,
is_other_database: 0, is_other_database: 0,
@ -174,7 +172,6 @@ watch(
modular_name: newVal.modular_name, modular_name: newVal.modular_name,
is_show: newVal.is_show, is_show: newVal.is_show,
original_type: newVal.original_type, original_type: newVal.original_type,
// show_type_id: newVal.show_type_id,
original_sql: newVal.original_sql, original_sql: newVal.original_sql,
table: newVal.table, table: newVal.table,
drive_type: newVal.drive_type, drive_type: newVal.drive_type,
@ -210,7 +207,6 @@ const resetFormData = () => {
modular_name: undefined, modular_name: undefined,
is_show: 0, is_show: 0,
original_type: 1, // 1 - 自定义，2 - 指定表 original_type: 1, // 1 - 自定义，2 - 指定表
// show_type_id: undefined,
original_sql: undefined, original_sql: undefined,
table: undefined, table: undefined,
is_other_database: 0, is_other_database: 0,

86
src/views/config-manage/module-cfg/components/field-modal.vue
View File

@ -48,7 +48,7 @@
:options="fieldNumTypeSel" :options="fieldNumTypeSel"
placeholder="请选择" placeholder="请选择"
allow-clear allow-clear
style="width: 160px"> style="width: 120px">
</a-select> </a-select>
<template v-else> <template v-else>
{{ record.field_numerical_name }} {{ record.field_numerical_name }}
@ -61,7 +61,7 @@
:options="fieldTypeSel" :options="fieldTypeSel"
placeholder="请选择" placeholder="请选择"
allow-clear allow-clear
style="width: 160px" style="width: 120px"
> >
</a-select> </a-select>
<template v-else> <template v-else>
@ -79,6 +79,19 @@
{{ record.is_search ? "是" : "否" }} {{ record.is_search ? "是" : "否" }}
</template> </template>
</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'"> <template v-if="column.dataIndex === 'original_type'">
<a-select <a-select
v-if="editableData[record.field_id]" v-if="editableData[record.field_id]"
@ -116,6 +129,31 @@
@change="pageChange" @change="pageChange"
/> />
</div> </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> </a-modal>
</template> </template>
@ -147,12 +185,22 @@ const fieldName = ref("");
const dataList = ref([]); const dataList = ref([]);
const fieldTypeSel = ref([]); const fieldTypeSel = ref([]);
const fieldNumTypeSel = ref([]); const fieldNumTypeSel = ref([]);
const specialVisible = ref(false);
const specialModalId = ref();
const pageState = reactive({ const pageState = reactive({
page: 1, page: 1,
perPage: 20, perPage: 20,
total: 0, total: 0,
}); });
const editableData = reactive({}); 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( watch(
() => props.open, () => props.open,
@ -160,7 +208,7 @@ watch(
if (newVal) { if (newVal) {
toGetList(); toGetList();
} }
} },
); );
onMounted(() => { onMounted(() => {
@ -214,9 +262,16 @@ const addField = () => {
is_search: 0, is_search: 0,
field_type_id: undefined, field_type_id: undefined,
belong_to_table: undefined, belong_to_table: undefined,
is_other_database: 0,
original_type: undefined, original_type: undefined,
original_sql: undefined, original_sql: undefined,
sort: 0, sort: 0,
drive_type: undefined,
database_address: undefined,
database_port: undefined,
database_name: undefined,
database_username: undefined,
database_password: undefined,
}; };
dataList.value.unshift(item); dataList.value.unshift(item);
editableData[item.field_id] = { 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 handleSave = (record) => {
const params = { const params = {
is_search: record.is_search, is_search: record.is_search,
@ -245,7 +315,17 @@ const handleSave = (record) => {
modular_id: props.modularId, modular_id: props.modularId,
original_type: record.original_type, original_type: record.original_type,
original_sql: record.original_sql, 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 = [ const validateFields = [
{ field: 'field_title', msg: "请填写字段标题" }, { field: 'field_title', msg: "请填写字段标题" },

3
src/views/config-manage/module-cfg/config.ts
View File

@ -11,11 +11,12 @@ export const moduleCfgCols = [
export const viewCfgCols = [ export const viewCfgCols = [
{ dataIndex: 'field_name', title: '字段名称', align: 'center'}, { dataIndex: 'field_name', title: '字段名称', align: 'center'},
{ dataIndex: 'field_title', 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: 'field_type_name', title: '搜索类型', align: 'center'},
{ dataIndex: 'is_search', title: '是否可搜索', align: 'center'}, { dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
{ dataIndex: 'sort', title: '排序', align: 'center'}, { dataIndex: 'sort', title: '排序', align: 'center'},
{ dataIndex: 'belong_to_table', 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_type', title: '数据源类型', align: 'center'},
{ dataIndex: 'original_sql', title: '数据源', align: 'center', width: 400}, { dataIndex: 'original_sql', title: '数据源', align: 'center', width: 400},
{ dataIndex: 'action', title: '操作', align: 'center'}, { dataIndex: 'action', title: '操作', align: 'center'},

4
src/views/config-manage/module-cfg/index.vue
View File

@ -80,7 +80,7 @@
/> />
<FieldModal <FieldModal
title="字段管理" title="字段管理"
width="80%" width="90%"
:open="fieldModalState.visible" :open="fieldModalState.visible"
:modularId="fieldModalState.modularId" :modularId="fieldModalState.modularId"
@cancel="fieldModalState.visible = false" @cancel="fieldModalState.visible = false"
@ -223,7 +223,7 @@ const openFieldModal = (record) => {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ant-table-wrapper { .@{ant-prefix}-table-wrapper {
margin-bottom: 10px; margin-bottom: 10px;
} }

2
src/views/config-manage/project-cfg/components/create-modal.vue
View File

@ -50,7 +50,7 @@
</a-form-item> </a-form-item>
<a-form-item label="数据库密码" name="database_password"> <a-form-item label="数据库密码" name="database_password">
<a-space> <a-space>
<a-input <a-input-password
placeholder="请输入数据库密码" placeholder="请输入数据库密码"
v-model:value="formData.database_password" v-model:value="formData.database_password"
/> />

2
src/views/config-manage/project-cfg/index.vue
View File

@ -190,7 +190,7 @@ const openCreateModal = () => {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ant-table-wrapper { .@{ant-prefix}-table-wrapper {
margin-bottom: 10px; margin-bottom: 10px;
} }

2
src/views/config-manage/view-cfg/index.vue
View File

@ -171,7 +171,7 @@ const search = () => {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ant-table-wrapper { .@{ant-prefix}-table-wrapper {
margin-bottom: 10px; margin-bottom: 10px;
} }

6
src/views/page-show-info/page-info/index,.vue
View File

@ -44,6 +44,7 @@
:column-config="item.data.header" :column-config="item.data.header"
:total="item.data.count" :total="item.data.count"
:title="item.data.preview_name" :title="item.data.preview_name"
:is-export="item.data.is_export"
@toFilt=" @toFilt="
(params?:object) => { (params?:object) => {
handleSingle(ids[index], params); handleSingle(ids[index], params);
@ -82,9 +83,10 @@
:column-config="item.data.header" :column-config="item.data.header"
:total="item.data.count" :total="item.data.count"
:title="item.data.preview_name" :title="item.data.preview_name"
:is-export="item.data.is_export"
@toFilt=" @toFilt="
(params?:object) => { (params?:object) => {
handleSingle(ids[index], params,); handleSingle(ids[index], params,);
} }
" "
></y-table> ></y-table>

14
src/views/view-all-manage/create-view/index.vue
View File

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

3
src/views/view-all-manage/create-view/service.js
View File

@ -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({ return post({
url: "api/v1/preview/view", url: "api/v1/preview/view",
data: { data: {
@ -38,6 +38,7 @@ export function preview({ modularId, fieldIds, page, perPage, filter, showTypeId
show_type_id: showTypeId, show_type_id: showTypeId,
x_data_id: xDataId, x_data_id: xDataId,
y_data_id: yDataId, y_data_id: yDataId,
is_export: isExport,
}, },
}); });
} }

20
src/views/view-all-manage/view-list/index.vue
View File

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

10
vite.config.ts
View File

@ -39,6 +39,16 @@ export default defineConfig({
}, },
}, },
}, },
css: {
devSourcemap: true,
preprocessorOptions: {
less: {
modifyVars: {
'ant-prefix': 'ycode-ant',
},
},
},
},
plugins: [ plugins: [
vue(), vue(),
vueJsx(), vueJsx(),