abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 优化 点击导出按钮可选导出列

Browse Source
This commit is contained in:
Toired 2025-01-25 20:09:34 +08:00
parent c454efd713
commit 708b575392
19 changed files with 284 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/system/importExport/index.ts Normal file
View File

@ -0,0 +1,12 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import {ExportColumnVo} from './types';
// 查询导出字段列表
export const columns = (className: string): AxiosPromise<ExportColumnVo[]> => {
return request({
url: '/system/importExport/columns',
method: 'get',
params: {className}
});
};

10
src/api/system/importExport/types.ts Normal file
View File

@ -0,0 +1,10 @@
export interface ExportColumnVo {
/**
* 字段描述
*/
label: string;
/**
* 字段名
*/
value: string;
}

106
src/components/ExportSelector/index.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div class="container">
<el-dialog v-model="dialog.visible" draggable :title="dialog.title" :width="props.width" :height="props.height" :close-on-click-modal="false" @close="cancel">
<el-table ref="tableRef" v-loading="false" :data="columnVos" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" width="55px" />
<el-table-column label="名称" align="center" prop="label" />
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" name="ExportSelector" setup>
import {propTypes} from '@/utils/propTypes';
import {ExportColumnVo} from "@/api/system/importExport/types";
import {columns} from "@/api/system/importExport";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['submitCallback']);
// 获取 el-table 的引用
const tableRef = ref<ElTableInstance>(null);
const buttonLoading = ref(false);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const visible = ref(false);
const dialog = reactive<DialogOption>({
visible: false,
title: '选择导出列'
});
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
// 不清理，保留字段选择
}
const columnNames = ref<string[]>([]);
/** 多选框选中数据 */
const handleSelectionChange = (selection: ExportColumnVo[]) => {
columnNames.value = selection.map(item => item.value);
}
/** 提交按钮 */
const submitForm = async () => {
if (columnNames.value.length === 0) {
proxy?.$modal.msgWarning('请选择导出列！');
return;
}
emits('submitCallback', columnNames.value);
cancel();
}
const props = defineProps({
width: propTypes.string.def('40%'),
height: propTypes.string.def('10%'),
className: {
type: String,
default: () => ''
},
});
const columnVos = ref<ExportColumnVo[]>([]);
const init = () => {
// 打开弹窗
dialog.visible = true;
// 初始化数据
if (props.className && columnVos.value.length === 0) {
columns(props.className).then((response) => {
columnVos.value = response.data;
// 全选
if (columnVos.value) {
tableRef.value!.toggleAllSelection();
}
})
}
};
/**
* 对外暴露子组件方法
*/
defineExpose({
init
});
</script>
<style lang="scss" scoped>
.container {
:deep(.el-dialog .el-dialog__body) {
max-height: calc(100vh - 170px) !important;
min-height: calc(100vh - 170px) !important;
}
}
</style>

10
src/plugins/index.ts
View File

@ -9,7 +9,14 @@ import animate from '@/animate';
import { download as dl } from '@/utils/request';
import { useDict } from '@/utils/dict';
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
import {
parseTime,
addDateRange,
handleTree,
selectDictLabel,
selectDictLabels,
addExportClassNameAndColumnNames
} from '@/utils/ruoyi';
import { App } from 'vue';
@ -37,6 +44,7 @@ export default function installPlugin(app: App) {
app.config.globalProperties.parseTime = parseTime;
app.config.globalProperties.handleTree = handleTree;
app.config.globalProperties.addDateRange = addDateRange;
app.config.globalProperties.addExportClassNameAndColumnNames = addExportClassNameAndColumnNames;
app.config.globalProperties.selectDictLabel = selectDictLabel;
app.config.globalProperties.selectDictLabels = selectDictLabels;
app.config.globalProperties.animate = animate;

10
src/types/module.d.ts vendored
View File

@ -5,7 +5,14 @@ import auth from '@/plugins/auth';
import cache from '@/plugins/cache';
import animate from '@/animate';
import { useDict } from '@/utils/dict';
import { handleTree, addDateRange, selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi';
import {
handleTree,
addDateRange,
selectDictLabel,
selectDictLabels,
parseTime,
addExportClassNameAndColumnNames
} from '@/utils/ruoyi';
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
import { download as rd } from '@/utils/request';
import type { LanguageType } from '@/lang';
@ -29,6 +36,7 @@ declare module '@vue/runtime-core' {
useDict: typeof useDict;
addDateRange: typeof addDateRange;
addExportClassNameAndColumnNames: typeof addExportClassNameAndColumnNames;
download: typeof rd;
handleTree: typeof handleTree;
getConfigKey: typeof getConfigKey;

13
src/utils/ruoyi.ts
View File

@ -63,6 +63,19 @@ export const addDateRange = (params: any, dateRange: any[], propName?: string) =
return search;
};
/**
* 添加导出类与导出字段列表
* @param params
* @param columnNames
*/
export const addExportClassNameAndColumnNames = (params: any, columnNames: any[]) => {
const search = params;
search.params = typeof search.params === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
columnNames = Array.isArray(columnNames) ? columnNames : [];
search.params['columnNames'] = columnNames;
return search;
};
// 回显数据字典
export const selectDictLabel = (datas: any, value: number | string) => {
if (value === undefined) {

17
src/views/demo/demo/index.vue
View File

@ -97,6 +97,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.demo.domain.vo.TestDemoVo'"></ExportSelector>
</div>
</template>
@ -106,6 +108,7 @@ import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const exportSelector = ref<ExportSelector>(null);
const demoList = ref<DemoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -239,13 +242,13 @@ const handleDelete = async (row?: DemoVO) => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'demo/demo/export',
{
...queryParams.value
},
`demo_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('demo/demo/export', params, `demo_${new Date().getTime()}.xlsx`);
};
onMounted(() => {

16
src/views/monitor/logininfor/index.vue
View File

@ -101,6 +101,8 @@
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
</el-card>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysLogininforVo'"></ExportSelector>
</div>
</template>
@ -112,6 +114,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
const { sys_common_status } = toRefs<any>(proxy?.useDict('sys_common_status'));
const exportSelector = ref<ExportSelector>(null);
const loginInfoList = ref<LoginInfoVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
@ -193,13 +196,12 @@ const handleUnlock = async () => {
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'monitor/logininfor/export',
{
...queryParams.value
},
`logininfor_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('monitor/logininfor/export', params, `logininfor_${new Date().getTime()}.xlsx`);
};
onMounted(() => {

18
src/views/monitor/operlog/index.vue
View File

@ -124,6 +124,8 @@
</el-card>
<!-- 操作日志详细 -->
<OperInfoDialog ref="operInfoDialogRef" />
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysOperLogVo'"></ExportSelector>
</div>
</template>
@ -135,6 +137,7 @@ import OperInfoDialog from './oper-info-dialog.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict('sys_oper_type', 'sys_common_status'));
const exportSelector = ref<ExportSelector>(null);
const operlogList = ref<OperLogVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
@ -246,14 +249,15 @@ const handleClean = async () => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'monitor/operlog/export',
{
...queryParams.value
},
`config_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('monitor/operlog/export', params, `config_${new Date().getTime()}.xlsx`);
};
onMounted(() => {
getList();
});

17
src/views/system/client/index.vue
View File

@ -138,6 +138,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysClientVo'"></ExportSelector>
</div>
</template>
@ -150,6 +152,7 @@ const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'))
const { sys_grant_type } = toRefs<any>(proxy?.useDict('sys_grant_type'));
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
const exportSelector = ref<ExportSelector>(null);
const clientList = ref<ClientVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -289,13 +292,13 @@ const handleDelete = async (row?: ClientVO) => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/client/export',
{
...queryParams.value
},
`client_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/client/export', params, `client_${new Date().getTime()}.xlsx`);
};
/** 状态修改 */

16
src/views/system/config/index.vue
View File

@ -119,6 +119,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysConfigVo'"></ExportSelector>
</div>
</template>
@ -129,6 +131,7 @@ import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'));
const exportSelector = ref<ExportSelector>(null);
const configList = ref<ConfigVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
@ -241,13 +244,12 @@ const handleDelete = async (row?: ConfigVO) => {
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/config/export',
{
...queryParams.value
},
`config_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/config/export', params, `config_${new Date().getTime()}.xlsx`);
};
/** 刷新缓存按钮操作 */
const handleRefreshCache = async () => {

16
src/views/system/dict/data.vue
View File

@ -122,6 +122,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysDictDataVo'"></ExportSelector>
</div>
</template>
@ -136,6 +138,7 @@ import { RouteLocationNormalized } from 'vue-router';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const exportSelector = ref<ExportSelector>(null);
const dataList = ref<DictDataVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
@ -293,13 +296,12 @@ const handleDelete = async (row?: DictDataVO) => {
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/dict/data/export',
{
...queryParams.value
},
`dict_data_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/dict/data/export', params, `dict_data_${new Date().getTime()}.xlsx`);
};
onMounted(() => {

16
src/views/system/dict/index.vue
View File

@ -104,6 +104,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysDictTypeVo'"></ExportSelector>
</div>
</template>
@ -114,6 +116,7 @@ import { DictTypeForm, DictTypeQuery, DictTypeVO } from '@/api/system/dict/type/
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const exportSelector = ref<ExportSelector>(null);
const typeList = ref<DictTypeVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
@ -225,13 +228,12 @@ const handleDelete = async (row?: DictTypeVO) => {
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/dict/type/export',
{
...queryParams.value
},
`dict_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/dict/type/export', params, `dict_${new Date().getTime()}.xlsx`);
};
/** 刷新缓存按钮操作 */
const handleRefreshCache = async () => {

17
src/views/system/post/index.vue
View File

@ -166,6 +166,8 @@
</el-dialog>
</el-col>
</el-row>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysPostVo'"></ExportSelector>
</div>
</template>
@ -178,6 +180,7 @@ import api from '@/api/system/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
const exportSelector = ref<ExportSelector>(null);
const postList = ref<PostVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
@ -344,13 +347,13 @@ const handleDelete = async (row?: PostVO) => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/post/export',
{
...queryParams.value
},
`post_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/post/export', params, `post_${new Date().getTime()}.xlsx`);
};
onMounted(() => {

16
src/views/system/role/index.vue
View File

@ -188,6 +188,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysRoleVo'"></ExportSelector>
</div>
</template>
@ -201,6 +203,7 @@ const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
const exportSelector = ref<ExportSelector>(null);
const roleList = ref<RoleVO[]>();
const loading = ref(true);
const showSearch = ref(true);
@ -306,13 +309,12 @@ const handleDelete = async (row?: RoleVO) => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/role/export',
{
...queryParams.value
},
`role_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/role/export', params, `role_${new Date().getTime()}.xlsx`);
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: RoleVO[]) => {

17
src/views/system/tenant/index.vue
View File

@ -140,6 +140,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysTenantVo'"></ExportSelector>
</div>
</template>
@ -161,6 +163,7 @@ import { TenantPkgVO } from '@/api/system/tenantPackage/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const exportSelector = ref<ExportSelector>(null);
const userStore = useUserStore();
const userId = ref(userStore.userId);
const tenantList = ref<TenantVO[]>([]);
@ -349,13 +352,13 @@ const handleSyncTenantPackage = async (row: TenantVO) => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/tenant/export',
{
...queryParams.value
},
`tenant_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/tenant/export', params, `tenant_${new Date().getTime()}.xlsx`);
};
/**同步租户字典*/

17
src/views/system/tenantPackage/index.vue
View File

@ -96,6 +96,8 @@
</div>
</template>
</el-dialog>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="''"></ExportSelector>
</div>
</template>
@ -115,6 +117,7 @@ import to from 'await-to-js';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const exportSelector = ref<ExportSelector>(null);
const tenantPackageList = ref<TenantPkgVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
@ -320,13 +323,13 @@ const handleDelete = async (row?: TenantPkgVO) => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/tenant/package/export',
{
...queryParams.value
},
`tenantPackage_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/tenant/package/export', params, `tenantPackage_${new Date().getTime()}.xlsx`);
};
onMounted(() => {

16
src/views/system/user/index.vue
View File

@ -282,6 +282,8 @@
</template>
</el-dialog>
</div>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.system.domain.vo.SysUserExportVo'"></ExportSelector>
</template>
<script setup name="User" lang="ts">
@ -295,6 +297,7 @@ import { globalHeaders } from '@/utils/request';
import { to } from 'await-to-js';
import { optionselect } from '@/api/system/post';
const exportSelector = ref<ExportSelector>(null);
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
@ -546,13 +549,12 @@ const handleImport = () => {
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'system/user/export',
{
...queryParams.value
},
`user_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('system/user/export', params, `user_${new Date().getTime()}.xlsx`);
};
/** 下载模板操作 */
const importTemplate = () => {

17
src/views/workflow/leave/index.vue
View File

@ -84,6 +84,8 @@
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
</el-card>
<!-- 动态列导出选择弹窗 -->
<ExportSelector ref="exportSelector" @submitCallback="exportCallback" :className="'org.dromara.workflow.domain.vo.TestLeaveVo'"></ExportSelector>
</div>
</template>
@ -92,6 +94,7 @@ import { delLeave, listLeave } from '@/api/workflow/leave';
import { cancelProcessApply } from '@/api/workflow/instance';
import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
const exportSelector = ref<ExportSelector>(null);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
const leaveList = ref<LeaveVO[]>([]);
@ -209,13 +212,13 @@ const handleDelete = async (row?: LeaveVO) => {
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'workflow/leave/export',
{
...queryParams.value
},
`leave_${new Date().getTime()}.xlsx`
);
exportSelector.value.init();
};
/** 导出动态列回调 */
const exportCallback = (columnNames: string[]) => {
const params = proxy?.addExportClassNameAndColumnNames(queryParams.value, columnNames);
proxy?.download('workflow/leave/export', params, `leave_${new Date().getTime()}.xlsx`);
};
/** 撤销按钮操作 */