mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-02 16:45:24 +08:00
前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题
This commit is contained in:
JEECG
51
jeecgboot-vue3/src/hooks/system/useAutoAdapt.ts
Normal file
51
jeecgboot-vue3/src/hooks/system/useAutoAdapt.ts
Normal file
@ -0,0 +1,51 @@
|
||||
import { ref } from 'vue';
|
||||
import { ScreenSizeEnum } from '/@/enums/sizeEnum';
|
||||
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
|
||||
// 定义 useAdapt 方法参数
|
||||
interface AdaptOptions {
|
||||
// xl>1200
|
||||
xl?: string | number;
|
||||
// xl>992
|
||||
lg?: string | number;
|
||||
// xl>768
|
||||
md?: string | number;
|
||||
// xl>576
|
||||
sm?: string | number;
|
||||
// xl>480
|
||||
xs?: string | number;
|
||||
//xl<480默认值
|
||||
mindef?: string | number;
|
||||
//默认值
|
||||
def?: string | number;
|
||||
}
|
||||
export function useAdapt(props?: AdaptOptions) {
|
||||
//默认宽度
|
||||
const width = ref<string | number>(props?.def || '600px');
|
||||
//获取宽度
|
||||
useWindowSizeFn(calcWidth, 100, { immediate: true });
|
||||
//计算宽度
|
||||
function calcWidth() {
|
||||
let windowWidth = document.documentElement.clientWidth;
|
||||
switch (true) {
|
||||
case windowWidth > ScreenSizeEnum.XL:
|
||||
width.value = props?.xl || '600px';
|
||||
break;
|
||||
case windowWidth > ScreenSizeEnum.LG:
|
||||
width.value = props?.lg || '600px';
|
||||
break;
|
||||
case windowWidth > ScreenSizeEnum.MD:
|
||||
width.value = props?.md || '600px';
|
||||
break;
|
||||
case windowWidth > ScreenSizeEnum.SM:
|
||||
width.value = props?.sm || '500px';
|
||||
break;
|
||||
case windowWidth > ScreenSizeEnum.XS:
|
||||
width.value = props?.xs || '400px';
|
||||
break;
|
||||
default:
|
||||
width.value = props?.mindef || '300px';
|
||||
break;
|
||||
}
|
||||
}
|
||||
return { width, calcWidth };
|
||||
}
|
||||
188
jeecgboot-vue3/src/hooks/system/useJvxeMethods.ts
Normal file
188
jeecgboot-vue3/src/hooks/system/useJvxeMethods.ts
Normal file
@ -0,0 +1,188 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { ref, unref } from 'vue';
|
||||
import { VALIDATE_FAILED, validateFormModelAndTables } from '/@/utils/common/vxeUtils';
|
||||
|
||||
export function useJvxeMethod(requestAddOrEdit, classifyIntoFormData, tableRefs, activeKey, refKeys, validateSubForm?) {
|
||||
const formRef = ref();
|
||||
/** 查询某个tab的数据 */
|
||||
function requestSubTableData(url, params, tab, success) {
|
||||
tab.loading = true;
|
||||
defHttp
|
||||
.get({ url, params }, { isTransformResponse: false })
|
||||
.then((res) => {
|
||||
let { result } = res;
|
||||
if (res.success && result) {
|
||||
if (Array.isArray(result)) {
|
||||
tab.dataSource = result;
|
||||
} else if (Array.isArray(result.records)) {
|
||||
tab.dataSource = result.records;
|
||||
}
|
||||
}
|
||||
typeof success === 'function' ? success(res) : '';
|
||||
})
|
||||
.finally(() => {
|
||||
tab.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/* --- handle 事件 --- */
|
||||
|
||||
/** ATab 选项卡切换事件 */
|
||||
function handleChangeTabs(key) {
|
||||
// 自动重置scrollTop状态，防止出现白屏
|
||||
tableRefs[key]?.value?.resetScrollTop(0);
|
||||
}
|
||||
|
||||
/** 获取所有的editableTable实例*/
|
||||
function getAllTable() {
|
||||
let values = Object.values(tableRefs);
|
||||
return Promise.all(values);
|
||||
}
|
||||
/** 确定按钮点击事件 */
|
||||
function handleSubmit() {
|
||||
/** 触发表单验证 */
|
||||
getAllTable()
|
||||
.then((tables) => {
|
||||
let values = formRef.value.getFieldsValue();
|
||||
return validateFormModelAndTables(formRef.value.validate, values, tables, formRef.value.getProps, false);
|
||||
})
|
||||
.then((allValues) => {
|
||||
/** 一次性验证一对一的所有子表 */
|
||||
return validateSubForm && typeof validateSubForm === 'function' ? validateSubForm(allValues) : validateAllSubOne(allValues);
|
||||
})
|
||||
.then((allValues) => {
|
||||
if (typeof classifyIntoFormData !== 'function') {
|
||||
throw throwNotFunction('classifyIntoFormData');
|
||||
}
|
||||
let formData = classifyIntoFormData(allValues);
|
||||
// 发起请求
|
||||
return requestAddOrEdit(formData);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.error === VALIDATE_FAILED) {
|
||||
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
|
||||
//update-begin-author:taoyan date:2022-11-22 for: VUEN-2866【代码生成】Tab风格 一对多子表校验不通过时，点击提交表单空白了，流程附加页面也有此问题
|
||||
if(e.paneKey){
|
||||
activeKey.value = e.paneKey
|
||||
}else{
|
||||
//update-begin-author:liusq date:2024-06-12 for: TV360X-478 一对多tab，校验未通过时，tab没有跳转
|
||||
activeKey.value = e.subIndex == null ? (e.index == null ? unref(activeKey) : refKeys.value[e.index]) : Object.keys(tableRefs)[e.subIndex];
|
||||
//update-end-author:liusq date:2024-06-12 for: TV360X-478 一对多tab，校验未通过时，tab没有跳转
|
||||
}
|
||||
//update-end-author:taoyan date:2022-11-22 for: VUEN-2866【代码生成】Tab风格 一对多子表校验不通过时，点击提交表单空白了，流程附加页面也有此问题
|
||||
} else {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
//校验所有子表表单
|
||||
function validateAllSubOne(allValues) {
|
||||
return new Promise((resolve) => {
|
||||
resolve(allValues);
|
||||
});
|
||||
}
|
||||
/* --- throw --- */
|
||||
|
||||
/** not a function */
|
||||
function throwNotFunction(name) {
|
||||
return `${name} 未定义或不是一个函数`;
|
||||
}
|
||||
|
||||
/** not a array */
|
||||
function throwNotArray(name) {
|
||||
return `${name} 未定义或不是一个数组`;
|
||||
}
|
||||
return [handleChangeTabs, handleSubmit, requestSubTableData, formRef];
|
||||
}
|
||||
|
||||
//update-begin-author:taoyan date:2022-6-16 for: 代码生成-原生表单用
|
||||
/**
|
||||
* 校验多个表单和子表table，用于原生的antd-vue的表单
|
||||
* @param activeKey 子表表单/vxe-table 所在tabs的 activeKey
|
||||
* @param refMap 子表表单/vxe-table对应的ref对象 map结构
|
||||
* 示例：
|
||||
* useValidateAntFormAndTable(activeKey, {
|
||||
* 'tableA': tableARef,
|
||||
* 'formB': formBRef
|
||||
* })
|
||||
*/
|
||||
export function useValidateAntFormAndTable(activeKey, refMap) {
|
||||
/**
|
||||
* 获取所有子表数据
|
||||
*/
|
||||
async function getSubFormAndTableData() {
|
||||
let formData = {};
|
||||
let all = Object.keys(refMap);
|
||||
let key = '';
|
||||
for (let i = 0; i < all.length; i++) {
|
||||
key = all[i];
|
||||
let instance = refMap[key].value;
|
||||
if (instance.isForm) {
|
||||
let subFormData = await validateFormAndGetData(instance, key);
|
||||
if (subFormData) {
|
||||
formData[key + 'List'] = [subFormData];
|
||||
}
|
||||
} else {
|
||||
let arr = await validateTableAndGetData(instance, key);
|
||||
if (arr && arr.length > 0) {
|
||||
formData[key + 'List'] = arr;
|
||||
}
|
||||
}
|
||||
}
|
||||
return formData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换数据用 如果有数组转成逗号分割的格式
|
||||
* @param data
|
||||
*/
|
||||
function transformData(data) {
|
||||
if (data) {
|
||||
Object.keys(data).map((k) => {
|
||||
if (data[k] instanceof Array) {
|
||||
data[k] = data[k].join(',');
|
||||
}
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 子表table
|
||||
* @param instance
|
||||
* @param key
|
||||
*/
|
||||
async function validateTableAndGetData(instance, key) {
|
||||
const errors = await instance.validateTable();
|
||||
if (!errors) {
|
||||
return instance.getTableData();
|
||||
} else {
|
||||
activeKey.value = key;
|
||||
// 自动重置scrollTop状态，防止出现白屏
|
||||
instance.resetScrollTop(0);
|
||||
return Promise.reject(1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 子表表单
|
||||
* @param instance
|
||||
* @param key
|
||||
*/
|
||||
async function validateFormAndGetData(instance, key) {
|
||||
try {
|
||||
let data = await instance.getFormData();
|
||||
transformData(data);
|
||||
return data;
|
||||
} catch (e) {
|
||||
activeKey.value = key;
|
||||
return Promise.reject(e);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
getSubFormAndTableData,
|
||||
transformData,
|
||||
};
|
||||
}
|
||||
//update-end-author:taoyan date:2022-6-16 for: 代码生成-原生表单用
|
||||
355
jeecgboot-vue3/src/hooks/system/useListPage.ts
Normal file
355
jeecgboot-vue3/src/hooks/system/useListPage.ts
Normal file
@ -0,0 +1,355 @@
|
||||
import { reactive, ref, Ref, unref } from 'vue';
|
||||
import { merge } from 'lodash-es';
|
||||
import { DynamicProps } from '/#/utils';
|
||||
import { BasicTableProps, TableActionType, useTable } from '/@/components/Table';
|
||||
import { ColEx } from '/@/components/Form/src/types';
|
||||
import { FormActionType } from '/@/components/Form';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useMethods } from '/@/hooks/system/useMethods';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { filterObj } from '/@/utils/common/compUtils';
|
||||
const { handleExportXls, handleImportXls } = useMethods();
|
||||
|
||||
// 定义 useListPage 方法所需参数
|
||||
interface ListPageOptions {
|
||||
// 样式作用域范围
|
||||
designScope?: string;
|
||||
// 【必填】表格参数配置
|
||||
tableProps: TableProps;
|
||||
// 是否分页
|
||||
pagination?: boolean;
|
||||
// 导出配置
|
||||
exportConfig?: {
|
||||
url: string | (() => string);
|
||||
// 导出文件名
|
||||
name?: string | (() => string);
|
||||
//导出参数
|
||||
params?: object;
|
||||
};
|
||||
// 导入配置
|
||||
importConfig?: {
|
||||
//update-begin-author:taoyan date:20220507 for: erp代码生成 子表 导入地址是动态的
|
||||
url: string | (() => string);
|
||||
//update-end-author:taoyan date:20220507 for: erp代码生成 子表 导入地址是动态的
|
||||
// 导出成功后的回调
|
||||
success?: (fileInfo?: any) => void;
|
||||
};
|
||||
}
|
||||
|
||||
interface IDoRequestOptions {
|
||||
// 是否显示确认对话框，默认 true
|
||||
confirm?: boolean;
|
||||
// 是否自动刷新表格，默认 true
|
||||
reload?: boolean;
|
||||
// 是否自动清空选择，默认 true
|
||||
clearSelection?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* listPage页面公共方法
|
||||
*
|
||||
* @param options
|
||||
*/
|
||||
export function useListPage(options: ListPageOptions) {
|
||||
const $message = useMessage();
|
||||
let $design = {} as ReturnType<typeof useDesign>;
|
||||
if (options.designScope) {
|
||||
$design = useDesign(options.designScope);
|
||||
}
|
||||
|
||||
const tableContext = useListTable(options.tableProps);
|
||||
|
||||
const [, { getForm, reload, setLoading }, { selectedRowKeys }] = tableContext;
|
||||
|
||||
// 导出 excel
|
||||
async function onExportXls() {
|
||||
//update-begin---author:wangshuai ---date:20220411 for：导出新增自定义参数------------
|
||||
let { url, name, params } = options?.exportConfig ?? {};
|
||||
let realUrl = typeof url === 'function' ? url() : url;
|
||||
if (realUrl) {
|
||||
let title = typeof name === 'function' ? name() : name;
|
||||
//update-begin-author:taoyan date:20220507 for: erp代码生成 子表 导出报错，原因未知-
|
||||
let paramsForm:any = {};
|
||||
try {
|
||||
paramsForm = await getForm().validate();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
//update-end-author:taoyan date:20220507 for: erp代码生成 子表 导出报错，原因未知-
|
||||
|
||||
//update-begin-author:liusq date:20230410 for:[/issues/409]导出功能没有按排序结果导出,设置导出默认排序，创建时间倒序
|
||||
if(!paramsForm?.column){
|
||||
Object.assign(paramsForm,{column:'createTime',order:'desc'});
|
||||
}
|
||||
//update-begin-author:liusq date:20230410 for: [/issues/409]导出功能没有按排序结果导出,设置导出默认排序，创建时间倒序
|
||||
|
||||
//如果参数不为空，则整合到一起
|
||||
//update-begin-author:taoyan date:20220507 for: erp代码生成 子表 导出动态设置mainId
|
||||
if (params) {
|
||||
Object.keys(params).map((k) => {
|
||||
let temp = (params as object)[k];
|
||||
if (temp) {
|
||||
paramsForm[k] = unref(temp);
|
||||
}
|
||||
});
|
||||
}
|
||||
//update-end-author:taoyan date:20220507 for: erp代码生成 子表 导出动态设置mainId
|
||||
if (selectedRowKeys.value && selectedRowKeys.value.length > 0) {
|
||||
paramsForm['selections'] = selectedRowKeys.value.join(',');
|
||||
}
|
||||
console.log()
|
||||
return handleExportXls(title as string, realUrl, filterObj(paramsForm));
|
||||
//update-end---author:wangshuai ---date:20220411 for：导出新增自定义参数--------------
|
||||
} else {
|
||||
$message.createMessage.warn('没有传递 exportConfig.url 参数');
|
||||
return Promise.reject();
|
||||
}
|
||||
}
|
||||
|
||||
// 导入 excel
|
||||
function onImportXls(file) {
|
||||
let { url, success } = options?.importConfig ?? {};
|
||||
//update-begin-author:taoyan date:20220507 for: erp代码生成 子表 导入地址是动态的
|
||||
let realUrl = typeof url === 'function' ? url() : url;
|
||||
if (realUrl) {
|
||||
return handleImportXls(file, realUrl, success || reload);
|
||||
//update-end-author:taoyan date:20220507 for: erp代码生成 子表 导入地址是动态的
|
||||
} else {
|
||||
$message.createMessage.warn('没有传递 importConfig.url 参数');
|
||||
return Promise.reject();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用请求处理方法，可自动刷新表格，自动清空选择
|
||||
* @param api 请求api
|
||||
* @param options 是否显示确认框
|
||||
*/
|
||||
function doRequest(api: () => Promise<any>, options?: IDoRequestOptions) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const execute = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await api();
|
||||
if (options?.reload ?? true) {
|
||||
reload();
|
||||
}
|
||||
if (options?.clearSelection ?? true) {
|
||||
selectedRowKeys.value = [];
|
||||
}
|
||||
resolve(res);
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
if (options?.confirm ?? true) {
|
||||
$message.createConfirm({
|
||||
iconType: 'warning',
|
||||
title: '删除',
|
||||
content: '确定要删除吗？',
|
||||
onOk: () => execute(),
|
||||
onCancel: () => reject(),
|
||||
});
|
||||
} else {
|
||||
execute();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 执行单个删除操作 */
|
||||
function doDeleteRecord(api: () => Promise<any>) {
|
||||
return doRequest(api, { confirm: false, clearSelection: false });
|
||||
}
|
||||
|
||||
return {
|
||||
...$design,
|
||||
...$message,
|
||||
onExportXls,
|
||||
onImportXls,
|
||||
doRequest,
|
||||
doDeleteRecord,
|
||||
tableContext,
|
||||
};
|
||||
}
|
||||
|
||||
// 定义表格所需参数
|
||||
type TableProps = Partial<DynamicProps<BasicTableProps>>;
|
||||
type UseTableMethod = TableActionType & {
|
||||
getForm: () => FormActionType;
|
||||
};
|
||||
|
||||
/**
|
||||
* useListTable 列表页面标准表格参数
|
||||
*
|
||||
* @param tableProps 表格参数
|
||||
*/
|
||||
export function useListTable(tableProps: TableProps): [
|
||||
(instance: TableActionType, formInstance: UseTableMethod) => void,
|
||||
TableActionType & {
|
||||
getForm: () => FormActionType;
|
||||
},
|
||||
{
|
||||
rowSelection: any;
|
||||
selectedRows: Ref<Recordable[]>;
|
||||
selectedRowKeys: Ref<any[]>;
|
||||
}
|
||||
] {
|
||||
// 自适应列配置
|
||||
const adaptiveColProps: Partial<ColEx> = {
|
||||
xs: 24, // <576px
|
||||
sm: 12, // ≥576px
|
||||
md: 12, // ≥768px
|
||||
lg: 8, // ≥992px
|
||||
xl: 8, // ≥1200px
|
||||
xxl: 6, // ≥1600px
|
||||
};
|
||||
const defaultTableProps: TableProps = {
|
||||
rowKey: 'id',
|
||||
// 使用查询条件区域
|
||||
useSearchForm: true,
|
||||
// 查询条件区域配置
|
||||
formConfig: {
|
||||
// 紧凑模式
|
||||
compact: true,
|
||||
// label默认宽度
|
||||
// labelWidth: 120,
|
||||
// 按下回车后自动提交
|
||||
autoSubmitOnEnter: true,
|
||||
// 默认 row 配置
|
||||
rowProps: { gutter: 8 },
|
||||
// 默认 col 配置
|
||||
baseColProps: {
|
||||
...adaptiveColProps,
|
||||
},
|
||||
labelCol: {
|
||||
xs: 24,
|
||||
sm: 8,
|
||||
md: 6,
|
||||
lg: 8,
|
||||
xl: 6,
|
||||
xxl: 6,
|
||||
},
|
||||
wrapperCol: {},
|
||||
// 是否显示 展开/收起 按钮
|
||||
showAdvancedButton: true,
|
||||
// 超过指定列数默认折叠
|
||||
autoAdvancedCol: 3,
|
||||
// 操作按钮配置
|
||||
actionColOptions: {
|
||||
...adaptiveColProps,
|
||||
style: { textAlign: 'left' },
|
||||
},
|
||||
},
|
||||
// 斑马纹
|
||||
striped: false,
|
||||
// 是否可以自适应高度
|
||||
canResize: true,
|
||||
// 表格最小高度
|
||||
// update-begin--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
|
||||
minHeight: 300,
|
||||
// update-end--author:liaozhiyang---date:20240603---for【TV360X-861】列表查询区域不可往上滚动
|
||||
// 点击行选中
|
||||
clickToRowSelect: false,
|
||||
// 是否显示边框
|
||||
bordered: true,
|
||||
// 是否显示序号列
|
||||
showIndexColumn: false,
|
||||
// 显示表格设置
|
||||
showTableSetting: true,
|
||||
// 表格全屏设置
|
||||
tableSetting: {
|
||||
fullScreen: false,
|
||||
},
|
||||
// 是否显示操作列
|
||||
showActionColumn: true,
|
||||
// 操作列
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
title: '操作',
|
||||
//是否锁定操作列取值 right ,left,false
|
||||
fixed: false,
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
};
|
||||
// 合并用户个性化配置
|
||||
if (tableProps) {
|
||||
//update-begin---author:wangshuai---date:2024-04-28---for:【issues/6180】前端代码配置表变查询条件显示列不生效---
|
||||
if(tableProps.formConfig){
|
||||
setTableProps(tableProps.formConfig);
|
||||
}
|
||||
//update-end---author:wangshuai---date:2024-04-28---for:【issues/6180】前端代码配置表变查询条件显示列不生效---
|
||||
// merge 方法可深度合并对象
|
||||
merge(defaultTableProps, tableProps);
|
||||
}
|
||||
|
||||
// 发送请求之前调用的方法
|
||||
function beforeFetch(params) {
|
||||
// 默认以 createTime 降序排序
|
||||
return Object.assign({ column: 'createTime', order: 'desc' }, params);
|
||||
}
|
||||
|
||||
// 合并方法
|
||||
Object.assign(defaultTableProps, { beforeFetch });
|
||||
if (typeof tableProps.beforeFetch === 'function') {
|
||||
defaultTableProps.beforeFetch = function (params) {
|
||||
params = beforeFetch(params);
|
||||
// @ts-ignore
|
||||
tableProps.beforeFetch(params);
|
||||
return params;
|
||||
};
|
||||
}
|
||||
|
||||
// 当前选择的行
|
||||
const selectedRowKeys = ref<any[]>([]);
|
||||
// 选择的行记录
|
||||
const selectedRows = ref<Recordable[]>([]);
|
||||
|
||||
// 表格选择列配置
|
||||
const rowSelection: any = tableProps?.rowSelection ?? {};
|
||||
const defaultRowSelection = reactive({
|
||||
...rowSelection,
|
||||
type: rowSelection.type ?? 'checkbox',
|
||||
// 选择列宽度，默认 50
|
||||
columnWidth: rowSelection.columnWidth ?? 50,
|
||||
selectedRows: selectedRows,
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange(...args) {
|
||||
selectedRowKeys.value = args[0];
|
||||
selectedRows.value = args[1];
|
||||
if (typeof rowSelection.onChange === 'function') {
|
||||
rowSelection.onChange(...args);
|
||||
}
|
||||
},
|
||||
});
|
||||
delete defaultTableProps.rowSelection;
|
||||
|
||||
/**
|
||||
* 设置表格参数
|
||||
*
|
||||
* @param formConfig
|
||||
*/
|
||||
function setTableProps(formConfig: any) {
|
||||
const replaceAttributeArray: string[] = ['baseColProps','labelCol'];
|
||||
for (let item of replaceAttributeArray) {
|
||||
if(formConfig && formConfig[item]){
|
||||
if(defaultTableProps.formConfig){
|
||||
let defaultFormConfig:any = defaultTableProps.formConfig;
|
||||
defaultFormConfig[item] = formConfig[item];
|
||||
}
|
||||
formConfig[item] = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
...useTable(defaultTableProps),
|
||||
{
|
||||
selectedRows,
|
||||
selectedRowKeys,
|
||||
rowSelection: defaultRowSelection,
|
||||
},
|
||||
];
|
||||
}
|
||||
126
jeecgboot-vue3/src/hooks/system/useMethods.ts
Normal file
126
jeecgboot-vue3/src/hooks/system/useMethods.ts
Normal file
@ -0,0 +1,126 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
|
||||
const { createMessage, createWarningModal } = useMessage();
|
||||
const glob = useGlobSetting();
|
||||
|
||||
/**
|
||||
* 导出文件xlsx的mime-type
|
||||
*/
|
||||
export const XLSX_MIME_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
||||
/**
|
||||
* 导出文件xlsx的文件后缀
|
||||
*/
|
||||
export const XLSX_FILE_SUFFIX = '.xlsx';
|
||||
|
||||
export function useMethods() {
|
||||
/**
|
||||
* 导出xls
|
||||
* @param name
|
||||
* @param url
|
||||
*/
|
||||
async function exportXls(name, url, params, isXlsx = false) {
|
||||
//update-begin---author:wangshuai---date:2024-01-25---for:【QQYUN-8118】导出超时时间设置长点---
|
||||
const data = await defHttp.get({ url: url, params: params, responseType: 'blob', timeout: 60000 }, { isTransformResponse: false });
|
||||
//update-end---author:wangshuai---date:2024-01-25---for:【QQYUN-8118】导出超时时间设置长点---
|
||||
if (!data) {
|
||||
createMessage.warning('文件下载失败');
|
||||
return;
|
||||
}
|
||||
//update-begin---author:wangshuai---date:2024-04-18---for: 导出excel失败提示，不进行导出---
|
||||
let reader = new FileReader()
|
||||
reader.readAsText(data, 'utf-8')
|
||||
reader.onload = async () => {
|
||||
if(reader.result){
|
||||
if(reader.result.toString().indexOf("success") !=-1){
|
||||
const { success, message } = JSON.parse(reader.result.toString());
|
||||
if (!success) {
|
||||
createMessage.warning("导出失败，失败原因："+ message);
|
||||
}else{
|
||||
exportExcel(name, isXlsx, data);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
exportExcel(name, isXlsx, data);
|
||||
//update-end---author:wangshuai---date:2024-04-18---for: 导出excel失败提示，不进行导出---
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入xls
|
||||
* @param data 导入的数据
|
||||
* @param url
|
||||
* @param success 成功后的回调
|
||||
*/
|
||||
async function importXls(data, url, success) {
|
||||
const isReturn = (fileInfo) => {
|
||||
try {
|
||||
if (fileInfo.code === 201) {
|
||||
let {
|
||||
message,
|
||||
result: { msg, fileUrl, fileName },
|
||||
} = fileInfo;
|
||||
let href = glob.uploadUrl + fileUrl;
|
||||
createWarningModal({
|
||||
title: message,
|
||||
centered: false,
|
||||
content: `<div>
|
||||
<span>${msg}</span><br/>
|
||||
<span>具体详情请<a href = ${href} download = ${fileName}> 点击下载 </a> </span>
|
||||
</div>`,
|
||||
});
|
||||
//update-begin---author:wangshuai ---date:20221121 for：[VUEN-2827]导入无权限，提示图标错误------------
|
||||
} else if (fileInfo.code === 500 || fileInfo.code === 510) {
|
||||
createMessage.error(fileInfo.message || `${data.file.name} 导入失败`);
|
||||
//update-end---author:wangshuai ---date:20221121 for：[VUEN-2827]导入无权限，提示图标错误------------
|
||||
} else {
|
||||
createMessage.success(fileInfo.message || `${data.file.name} 文件上传成功`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('导入的数据异常', error);
|
||||
} finally {
|
||||
typeof success === 'function' ? success(fileInfo) : '';
|
||||
}
|
||||
};
|
||||
await defHttp.uploadFile({ url }, { file: data.file }, { success: isReturn });
|
||||
}
|
||||
|
||||
return {
|
||||
handleExportXls: (name: string, url: string, params?: object) => exportXls(name, url, params),
|
||||
handleImportXls: (data, url, success) => importXls(data, url, success),
|
||||
handleExportXlsx: (name: string, url: string, params?: object) => exportXls(name, url, params, true),
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出excel
|
||||
* @param name
|
||||
* @param isXlsx
|
||||
* @param data
|
||||
*/
|
||||
function exportExcel(name, isXlsx, data) {
|
||||
if (!name || typeof name != 'string') {
|
||||
name = '导出文件';
|
||||
}
|
||||
let blobOptions = { type: 'application/vnd.ms-excel' };
|
||||
let fileSuffix = '.xls';
|
||||
if (isXlsx) {
|
||||
blobOptions['type'] = XLSX_MIME_TYPE;
|
||||
fileSuffix = XLSX_FILE_SUFFIX;
|
||||
}
|
||||
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||
window.navigator.msSaveBlob(new Blob([data], blobOptions), name + fileSuffix);
|
||||
} else {
|
||||
let url = window.URL.createObjectURL(new Blob([data], blobOptions));
|
||||
let link = document.createElement('a');
|
||||
link.style.display = 'none';
|
||||
link.href = url;
|
||||
link.setAttribute('download', name + fileSuffix);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link); //下载完成移除元素
|
||||
window.URL.revokeObjectURL(url); //释放掉blob对象
|
||||
}
|
||||
}
|
||||
}
|
||||
201
jeecgboot-vue3/src/hooks/system/useThirdLogin.ts
Normal file
201
jeecgboot-vue3/src/hooks/system/useThirdLogin.ts
Normal file
@ -0,0 +1,201 @@
|
||||
import { ref, unref } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { setThirdCaptcha, getCaptcha } from '/@/api/sys/user';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
export function useThirdLogin() {
|
||||
const { createMessage, notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
const glob = useGlobSetting();
|
||||
const userStore = useUserStore();
|
||||
//第三方类型
|
||||
const thirdType = ref('');
|
||||
//第三方登录相关信息
|
||||
const thirdLoginInfo = ref<any>({});
|
||||
//状态
|
||||
const thirdLoginState = ref(false);
|
||||
//绑定手机号弹窗
|
||||
const bindingPhoneModal = ref(false);
|
||||
//第三方用户UUID
|
||||
const thirdUserUuid = ref('');
|
||||
//提示窗
|
||||
const thirdConfirmShow = ref(false);
|
||||
//绑定密码弹窗
|
||||
const thirdPasswordShow = ref(false);
|
||||
//绑定密码
|
||||
const thirdLoginPassword = ref('');
|
||||
//绑定用户
|
||||
const thirdLoginUser = ref('');
|
||||
//加载中
|
||||
const thirdCreateUserLoding = ref(false);
|
||||
//绑定手机号
|
||||
const thirdPhone = ref('');
|
||||
//验证码
|
||||
const thirdCaptcha = ref('');
|
||||
//第三方登录
|
||||
function onThirdLogin(source) {
|
||||
let url = `${glob.uploadUrl}/sys/thirdLogin/render/${source}`;
|
||||
window.open(
|
||||
url,
|
||||
`login ${source}`,
|
||||
'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'
|
||||
);
|
||||
thirdType.value = source;
|
||||
thirdLoginInfo.value = {};
|
||||
thirdLoginState.value = false;
|
||||
let receiveMessage = function (event) {
|
||||
let token = event.data;
|
||||
if (typeof token === 'string') {
|
||||
//如果是字符串类型 说明是token信息
|
||||
if (token === '登录失败') {
|
||||
createMessage.warning(token);
|
||||
} else if (token.includes('绑定手机号')) {
|
||||
bindingPhoneModal.value = true;
|
||||
let strings = token.split(',');
|
||||
thirdUserUuid.value = strings[1];
|
||||
} else {
|
||||
doThirdLogin(token);
|
||||
}
|
||||
} else if (typeof token === 'object') {
|
||||
//对象类型 说明需要提示是否绑定现有账号
|
||||
if (token['isObj'] === true) {
|
||||
thirdConfirmShow.value = true;
|
||||
thirdLoginInfo.value = { ...token };
|
||||
}
|
||||
} else {
|
||||
createMessage.warning('不识别的信息传递');
|
||||
}
|
||||
//update-begin---author:wangshuai---date:2024-02-20---for:【QQYUN-8156】连续登录失败，导致失败提醒累加---
|
||||
window.removeEventListener('message', unref(receiveMessage),false);
|
||||
//update-end---author:wangshuai---date:2024-02-20---for:【QQYUN-8156】连续登录失败，导致失败提醒累加---
|
||||
};
|
||||
window.addEventListener('message', receiveMessage, false);
|
||||
}
|
||||
// 根据token执行登录
|
||||
function doThirdLogin(token) {
|
||||
if (unref(thirdLoginState) === false) {
|
||||
thirdLoginState.value = true;
|
||||
userStore.ThirdLogin({ token, thirdType: unref(thirdType) }).then((res) => {
|
||||
console.log('res====>doThirdLogin', res);
|
||||
if (res && res.userInfo) {
|
||||
notification.success({
|
||||
message: t('sys.login.loginSuccessTitle'),
|
||||
description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
|
||||
duration: 3,
|
||||
});
|
||||
} else {
|
||||
requestFailed(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function requestFailed(err) {
|
||||
notification.error({
|
||||
message: '登录失败',
|
||||
description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
|
||||
duration: 4,
|
||||
});
|
||||
}
|
||||
// 绑定已有账号 需要输入密码
|
||||
function thirdLoginUserBind() {
|
||||
thirdLoginPassword.value = '';
|
||||
thirdLoginUser.value = thirdLoginInfo.value.uuid;
|
||||
thirdConfirmShow.value = false;
|
||||
thirdPasswordShow.value = true;
|
||||
}
|
||||
//创建新账号
|
||||
function thirdLoginUserCreate() {
|
||||
thirdCreateUserLoding.value = true;
|
||||
// 账号名后面添加两位随机数
|
||||
thirdLoginInfo.value.suffix = parseInt(Math.random() * 98 + 1);
|
||||
defHttp
|
||||
.post({ url: '/sys/third/user/create', params: { thirdLoginInfo: unref(thirdLoginInfo) } }, { isTransformResponse: false })
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
let token = res.result;
|
||||
doThirdLogin(token);
|
||||
thirdConfirmShow.value = false;
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
thirdCreateUserLoding.value = false;
|
||||
});
|
||||
}
|
||||
// 核实密码
|
||||
function thirdLoginCheckPassword() {
|
||||
let params = Object.assign({}, unref(thirdLoginInfo), { password: unref(thirdLoginPassword) });
|
||||
defHttp.post({ url: '/sys/third/user/checkPassword', params }, { isTransformResponse: false }).then((res) => {
|
||||
if (res.success) {
|
||||
thirdLoginNoPassword();
|
||||
doThirdLogin(res.result);
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 没有密码 取消操作
|
||||
function thirdLoginNoPassword() {
|
||||
thirdPasswordShow.value = false;
|
||||
thirdLoginPassword.value = '';
|
||||
thirdLoginUser.value = '';
|
||||
}
|
||||
|
||||
//倒计时执行前的函数
|
||||
function sendCodeApi() {
|
||||
//return setThirdCaptcha({mobile:unref(thirdPhone)});
|
||||
return getCaptcha({ mobile: unref(thirdPhone), smsmode: '0' });
|
||||
}
|
||||
//绑定手机号点击确定按钮
|
||||
function thirdHandleOk() {
|
||||
if (!unref(thirdPhone)) {
|
||||
cmsFailed('请输入手机号');
|
||||
}
|
||||
if (!unref(thirdCaptcha)) {
|
||||
cmsFailed('请输入验证码');
|
||||
}
|
||||
let params = {
|
||||
mobile: unref(thirdPhone),
|
||||
captcha: unref(thirdCaptcha),
|
||||
thirdUserUuid: unref(thirdUserUuid),
|
||||
};
|
||||
defHttp.post({ url: '/sys/thirdLogin/bindingThirdPhone', params }, { isTransformResponse: false }).then((res) => {
|
||||
if (res.success) {
|
||||
bindingPhoneModal.value = false;
|
||||
doThirdLogin(res.result);
|
||||
} else {
|
||||
createMessage.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
function cmsFailed(err) {
|
||||
notification.error({
|
||||
message: '登录失败',
|
||||
description: err,
|
||||
duration: 4,
|
||||
});
|
||||
return;
|
||||
}
|
||||
//返回数据和方法
|
||||
return {
|
||||
thirdPasswordShow,
|
||||
thirdLoginCheckPassword,
|
||||
thirdLoginNoPassword,
|
||||
thirdLoginPassword,
|
||||
thirdConfirmShow,
|
||||
thirdCreateUserLoding,
|
||||
thirdLoginUserCreate,
|
||||
thirdLoginUserBind,
|
||||
bindingPhoneModal,
|
||||
thirdHandleOk,
|
||||
thirdPhone,
|
||||
thirdCaptcha,
|
||||
onThirdLogin,
|
||||
sendCodeApi,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user