提交 eecde4c7 作者: vben

perf: perf excel comp code

上级 968f791f
# Wip # Wip
### 🎫 Chores
- 表格默认不显示边框
### ⚡ Performance Improvements ### ⚡ Performance Improvements
- 优化首屏体积大小 - 优化首屏体积大小
......
...@@ -19,16 +19,17 @@ export default defineComponent({ ...@@ -19,16 +19,17 @@ export default defineComponent({
const getModeRef = computed(() => { const getModeRef = computed(() => {
return appStore.getProjectConfig.permissionMode; return appStore.getProjectConfig.permissionMode;
}); });
/** /**
* 渲染角色按钮 * 渲染角色按钮
*/ */
function renderRoleAuth() { function renderRoleAuth() {
const { value } = props; const { value } = props;
if (!value) { if (!value) {
return getSlot(slots, 'default'); return getSlot(slots);
} }
const { hasPermission } = usePermission(); const { hasPermission } = usePermission();
return hasPermission(value) ? getSlot(slots, 'default') : null; return hasPermission(value) ? getSlot(slots) : null;
} }
/** /**
...@@ -38,11 +39,12 @@ export default defineComponent({ ...@@ -38,11 +39,12 @@ export default defineComponent({
function renderCodeAuth() { function renderCodeAuth() {
const { value } = props; const { value } = props;
if (!value) { if (!value) {
return getSlot(slots, 'default'); return getSlot(slots);
} }
const { hasPermission } = usePermission(); const { hasPermission } = usePermission();
return hasPermission(value) ? getSlot(slots, 'default') : null; return hasPermission(value) ? getSlot(slots) : null;
} }
return () => { return () => {
const mode = unref(getModeRef); const mode = unref(getModeRef);
// 基于角色渲染 // 基于角色渲染
...@@ -53,7 +55,7 @@ export default defineComponent({ ...@@ -53,7 +55,7 @@ export default defineComponent({
if (mode === PermissionModeEnum.BACK) { if (mode === PermissionModeEnum.BACK) {
return renderCodeAuth(); return renderCodeAuth();
} }
return getSlot(slots, 'default'); return getSlot(slots);
}; };
}, },
}); });
...@@ -33,18 +33,7 @@ export default defineComponent({ ...@@ -33,18 +33,7 @@ export default defineComponent({
props: basicProps, props: basicProps,
emits: ['visible-change', 'ok', 'close', 'register'], emits: ['visible-change', 'ok', 'close', 'register'],
setup(props, { slots, emit, attrs }) { setup(props, { slots, emit, attrs }) {
// const { currentRoute } = useRouter();
const scrollRef = ref<any>(null); const scrollRef = ref<any>(null);
// /**
// * @description: 获取配置ScrollContainer
// */
// const getScrollOptions = computed(
// (): ScrollContainerOptions => {
// return {
// ...(props.scrollOptions as any),
// };
// }
// );
const visibleRef = ref(false); const visibleRef = ref(false);
const propsRef = ref<Partial<DrawerProps> | null>(null); const propsRef = ref<Partial<DrawerProps> | null>(null);
...@@ -85,7 +74,6 @@ export default defineComponent({ ...@@ -85,7 +74,6 @@ export default defineComponent({
watch( watch(
() => visibleRef.value, () => visibleRef.value,
(visible) => { (visible) => {
// appStore.commitLockMainScrollState(visible);
nextTick(() => { nextTick(() => {
emit('visible-change', visible); emit('visible-change', visible);
}); });
...@@ -95,27 +83,6 @@ export default defineComponent({ ...@@ -95,27 +83,6 @@ export default defineComponent({
} }
); );
// function scrollBottom() {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollBottom();
// }
// }
// function scrollTo(to: number) {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollTo(to);
// }
// }
// function getScrollWrap() {
// const scroll = unref(scrollRef);
// if (scroll) {
// return scroll.getScrollWrap();
// }
// return null;
// }
// 取消事件 // 取消事件
async function onClose(e: any) { async function onClose(e: any) {
const { closeFunc } = unref(getProps); const { closeFunc } = unref(getProps);
...@@ -219,12 +186,6 @@ export default defineComponent({ ...@@ -219,12 +186,6 @@ export default defineComponent({
); );
} }
// const currentInstance = getCurrentInstance() as any;
// if (getCurrentInstance()) {
// currentInstance.scrollBottom = scrollBottom;
// currentInstance.scrollTo = scrollTo;
// currentInstance.getScrollWrap = getScrollWrap;
// }
const drawerInstance: DrawerInstance = { const drawerInstance: DrawerInstance = {
setDrawerProps: setDrawerProps, setDrawerProps: setDrawerProps,
}; };
...@@ -253,15 +214,6 @@ export default defineComponent({ ...@@ -253,15 +214,6 @@ export default defineComponent({
class={[!unref(getProps).loading ? 'hidden' : '']} class={[!unref(getProps).loading ? 'hidden' : '']}
tip="加载中..." tip="加载中..."
/> />
{/* <ScrollContainer
ref={scrollRef}
{...{ ...attrs, ...unref(getScrollOptions) }}
style={{
height: `calc(100% - ${footerHeight})`,
}}
>
{() => getSlot(slots, 'default')}
</ScrollContainer> */}
<div <div
ref={scrollRef} ref={scrollRef}
{...attrs} {...attrs}
......
export { default as ImportExcel } from './src/ImportExcel'; export { default as ImportExcel } from './src/ImportExcel.vue';
export { default as ExportExcelModel } from './src/ExportExcelModel.vue'; export { default as ExportExcelModel } from './src/ExportExcelModel.vue';
export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel'; export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
......
...@@ -55,12 +55,13 @@ ...@@ -55,12 +55,13 @@
]; ];
export default defineComponent({ export default defineComponent({
components: { BasicModal, BasicForm }, components: { BasicModal, BasicForm },
emits: ['success', 'register'],
setup(_, { emit }) { setup(_, { emit }) {
const [registerForm, { validateFields }] = useForm(); const [registerForm, { validateFields }] = useForm();
const [registerModal, { closeModal }] = useModalInner(); const [registerModal, { closeModal }] = useModalInner();
async function handleOk() { async function handleOk() {
const res: ExportModalResult = await validateFields(); const res = (await validateFields()) as ExportModalResult;
const { filename, bookType } = res; const { filename, bookType } = res;
emit('success', { emit('success', {
...@@ -69,6 +70,7 @@ ...@@ -69,6 +70,7 @@
}); });
closeModal(); closeModal();
} }
return { return {
schemas, schemas,
handleOk, handleOk,
......
import { defineComponent, ref, unref } from 'vue'; <template>
import XLSX from 'xlsx'; <div>
import { getSlot } from '/@/utils/helper/tsxHelper'; <input
ref="inputRef"
type="file"
v-show="false"
accept=".xlsx, .xls"
@change="handleInputClick"
/>
<div @click="handleUpload"><slot /></div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import XLSX from 'xlsx';
import type { ExcelData } from './types'; import type { ExcelData } from './types';
export default defineComponent({ export default defineComponent({
name: 'ImportExcel', name: 'ImportExcel',
setup(_, { slots, emit }) { emits: ['success'],
setup(_, { emit }) {
const inputRef = ref<HTMLInputElement | null>(null); const inputRef = ref<HTMLInputElement | null>(null);
const loadingRef = ref<Boolean>(false); const loadingRef = ref<Boolean>(false);
...@@ -85,6 +98,7 @@ export default defineComponent({ ...@@ -85,6 +98,7 @@ export default defineComponent({
} }
readerData(rawFile); readerData(rawFile);
} }
/** /**
* @description: 触发选择文件管理器 * @description: 触发选择文件管理器
*/ */
...@@ -94,6 +108,7 @@ export default defineComponent({ ...@@ -94,6 +108,7 @@ export default defineComponent({
if (!rawFile) return; if (!rawFile) return;
upload(rawFile); upload(rawFile);
} }
/** /**
* @description: 点击上传按钮 * @description: 点击上传按钮
*/ */
...@@ -102,19 +117,7 @@ export default defineComponent({ ...@@ -102,19 +117,7 @@ export default defineComponent({
inputRefDom && inputRefDom.click(); inputRefDom && inputRefDom.click();
} }
return () => { return { handleUpload, handleInputClick, inputRef };
return (
<div>
<input
ref={inputRef}
type="file"
accept=".xlsx, .xls"
style=" z-index: -9999; display: none;"
onChange={handleInputClick}
/>
<div onClick={handleUpload}>{getSlot(slots)}</div>
</div>
);
};
}, },
}); });
</script>
...@@ -9,7 +9,7 @@ export default { ...@@ -9,7 +9,7 @@ export default {
component: PAGE_LAYOUT_COMPONENT, component: PAGE_LAYOUT_COMPONENT,
redirect: '/excel/customExport', redirect: '/excel/customExport',
meta: { meta: {
icon: 'ant-design:area-chart-outlined', icon: 'mdi:microsoft-excel',
title: 'Excel', title: 'Excel',
}, },
}, },
...@@ -18,7 +18,7 @@ export default { ...@@ -18,7 +18,7 @@ export default {
{ {
path: '/customExport', path: '/customExport',
name: 'CustomExport', name: 'CustomExport',
component: () => import('/@/views/demo/echarts/excel/CustomExport.vue'), component: () => import('/@/views/demo/excel/CustomExport.vue'),
meta: { meta: {
title: '选择导出格式', title: '选择导出格式',
}, },
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
{ {
path: '/jsonExport', path: '/jsonExport',
name: 'JsonExport', name: 'JsonExport',
component: () => import('/@/views/demo/echarts/excel/JsonExport.vue'), component: () => import('/@/views/demo/excel/JsonExport.vue'),
meta: { meta: {
title: 'JSON数据导出', title: 'JSON数据导出',
}, },
...@@ -34,7 +34,7 @@ export default { ...@@ -34,7 +34,7 @@ export default {
{ {
path: '/arrayExport', path: '/arrayExport',
name: 'ArrayExport', name: 'ArrayExport',
component: () => import('/@/views/demo/echarts/excel/ArrayExport.vue'), component: () => import('/@/views/demo/excel/ArrayExport.vue'),
meta: { meta: {
title: 'Array数据导出', title: 'Array数据导出',
}, },
...@@ -42,12 +42,10 @@ export default { ...@@ -42,12 +42,10 @@ export default {
{ {
path: '/importExcel', path: '/importExcel',
name: 'ImportExcel', name: 'ImportExcel',
component: () => import('/@/views/demo/echarts/excel/ImportExcel.vue'), component: () => import('/@/views/demo/excel/ImportExcel.vue'),
meta: { meta: {
title: '导入', title: '导入',
}, },
}, },
// ],
// },
], ],
} as AppRouteModule; } as AppRouteModule;
...@@ -9,7 +9,7 @@ export default { ...@@ -9,7 +9,7 @@ export default {
component: PAGE_LAYOUT_COMPONENT, component: PAGE_LAYOUT_COMPONENT,
redirect: '/tree/basic', redirect: '/tree/basic',
meta: { meta: {
icon: 'ant-design:table-outlined', icon: 'clarity:tree-view-line',
title: 'Tree', title: 'Tree',
}, },
}, },
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论