From 03f6ae3f9f0db0740f80337f1b8005a418d5c7df Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Wed, 2 Aug 2023 17:32:27 +0800 Subject: [PATCH] fixed some bugs --- .eslintrc.cjs | 1 + package.json | 12 ++++---- postcss.config.cjs | 6 +++- src/components/RayCollapseGrid/src/index.tsx | 3 +- .../src/components/TableSize/index.tsx | 28 +++++++++++++------ src/components/RayTable/src/index.tsx | 24 +++++++++++----- src/components/RayTable/src/props.ts | 20 ++++++++++++- src/views/table/index.tsx | 4 +-- 8 files changed, 70 insertions(+), 28 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index c21a8d82..7aeaa58d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -5,6 +5,7 @@ module.exports = { browser: true, node: true, }, + ignorePatterns: ['node_modules/', 'dist/'], extends: [ 'eslint-config-prettier', 'eslint:recommended', diff --git a/package.json b/package.json index 250bcd34..4376e173 100644 --- a/package.json +++ b/package.json @@ -5,17 +5,17 @@ "type": "module", "scripts": { "dev": "vite", - "build": "eslint src && vue-tsc --noEmit && vite build --mode production", + "build": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode production", "preview": "vite preview", - "test": "eslint src && vue-tsc --noEmit && vite build --mode test", - "dev-build": "eslint src && vue-tsc --noEmit && vite build --mode development", - "report": "eslint src && vue-tsc --noEmit && vite build --mode report", + "test": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode test", + "dev-build": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode development", + "report": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode report", "prepare": "husky install" }, "lint-staged": { "src/**/*.{vue,jsx,ts,tsx,json}": [ "prettier --write", - "eslint", + "eslint src", "git add" ] }, @@ -73,7 +73,7 @@ "husky": "^8.0.3", "lint-staged": "^13.1.0", "postcss": "^8.1.0", - "postcss-px-to-viewport": "^1.1.1", + "postcss-px-to-viewport-update": "1.2.0", "prettier": "^2.7.1", "rollup-plugin-visualizer": "^5.8.3", "svg-sprite-loader": "^6.0.11", diff --git a/postcss.config.cjs b/postcss.config.cjs index 320ef306..67c71ae0 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -11,7 +11,9 @@ module.exports = { ], grid: true, }, - // 'postcss-px-to-viewport': { + // 由于该库的作者很久没更新了，导致 exclude include 并没有生效，所以使用的是其一个 fork 版本 + // 'postcss-px-to-viewport-update': { + // inlinePxToViewport: true, // /** 视窗的宽度(设计稿的宽度) */ // viewportWidth: 1920, // /** 视窗的高度(设计稿高度, 一般无需指定) */ @@ -26,6 +28,8 @@ module.exports = { // minPixelValue: 1, // /** 允许在媒体查询中转换 px */ // mediaQuery: false, + // exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 + // include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/], // }, }, } diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RayCollapseGrid/src/index.tsx index b495b569..a6763cee 100644 --- a/src/components/RayCollapseGrid/src/index.tsx +++ b/src/components/RayCollapseGrid/src/index.tsx @@ -17,13 +17,12 @@ import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui' import RayIcon from '@/components/RayIcon' import { call } from '@/utils/vue/index' -import { cloneDeep } from 'lodash-es' const RayCollapseGrid = defineComponent({ name: 'RayCollapseGrid', props: collapseGridProps, setup(props) { - const modelCollapsed = ref(cloneDeep(props.open)) + const modelCollapsed = ref(props.open) const handleCollapse = () => { modelCollapsed.value = !modelCollapsed.value diff --git a/src/components/RayTable/src/components/TableSize/index.tsx b/src/components/RayTable/src/components/TableSize/index.tsx index bdd04779..fe992cc3 100644 --- a/src/components/RayTable/src/components/TableSize/index.tsx +++ b/src/components/RayTable/src/components/TableSize/index.tsx @@ -14,24 +14,38 @@ import './index.scss' import { NPopover, NCard } from 'naive-ui' import RayIcon from '@/components/RayIcon/index' +import { call } from '@/utils/vue/index' + import type { TableSettingProvider } from '@/components/RayTable/src/type' import type { ComponentSize } from '@/types/modules/component' +import type { MaybeArray } from '@/types/modules/utils' const TableSize = defineComponent({ name: 'TableSize', + props: { + onChangeSize: { + type: [Function, Array] as PropType< + MaybeArray<(size: ComponentSize) => void> + >, + default: null, + }, + }, emits: ['changeSize'], - setup(_, { emit }) { + setup(props) { const tableSettingProvider = inject( 'tableSettingProvider', {} as TableSettingProvider, ) const popoverShow = ref(false) - const currentSize = ref(tableSettingProvider.size) const size = computed({ get: () => tableSettingProvider.size, set: (val) => { - currentSize.value = val + const { onChangeSize } = props + + if (onChangeSize) { + call(onChangeSize, val) + } }, }) const sizeOptions = ref([ @@ -55,15 +69,13 @@ const TableSize = defineComponent({ size.value = key popoverShow.value = false - - emit('changeSize', key) } }) } return { + size, sizeOptions, - currentSize, handleDropdownClick, popoverShow, } @@ -103,9 +115,7 @@ const TableSize = defineComponent({
() const tableUUID = uuid(16) // 表格 id, 用于打印表格 const rayTableUUID = uuid(16) // RayTable id, 用于全屏表格 - const modelRightClickMenu = computed(() => props.rightClickMenu) + const modelRightClickMenu = computed(() => props.rightClickOptions) const modelColumns = computed({ get: () => props.columns, set: (arr) => { @@ -84,14 +84,14 @@ const RayTable = defineComponent({ return cssVar }) - const tableSize = ref(cloneDeep(props.size)) + const tableSize = ref(props.size) const tableMethods = ref>() /** 注入相关属性 */ provide('tableSettingProvider', { modelRightClickMenu, modelColumns, - size: props.size, + size: tableSize, rayTableUUID, }) @@ -111,7 +111,16 @@ const RayTable = defineComponent({ key: string | number, option: DropdownOption, ) => { - emit('menuSelect', key, prevRightClickIndex, option) + const { onRightMenuClick, 'onUpdate:rightMenuClick': _onRightMenuClick } = + props + + if (onRightMenuClick) { + call(onRightMenuClick, key, prevRightClickIndex, option) + } + + if (_onRightMenuClick) { + call(_onRightMenuClick, key, prevRightClickIndex, option) + } menuConfig.showMenu = false } @@ -242,6 +251,7 @@ const RayTable = defineComponent({ handleChangeTableSize, tableSize, rayTableInstance, + modelRightClickMenu, } }, render() { @@ -274,7 +284,7 @@ const RayTable = defineComponent({ trigger="manual" x={this.x} y={this.y} - options={this.rightClickMenu} + options={this.modelRightClickMenu} onClickoutside={() => (this.showMenu = false)} onSelect={this.handleRightMenuSelect.bind(this)} /> diff --git a/src/components/RayTable/src/props.ts b/src/components/RayTable/src/props.ts index 88b16e6a..468f4675 100644 --- a/src/components/RayTable/src/props.ts +++ b/src/components/RayTable/src/props.ts @@ -14,10 +14,12 @@ import { dataTableProps } from 'naive-ui' import type { PropType, VNode, VNodeChild } from 'vue' import type { DropdownMixedOption } from './type' import type PrintConfiguration from 'print-js' +import type { MaybeArray } from '@/types/modules/utils' +import type { DropdownOption } from 'naive-ui' const rayTableProps = { ...dataTableProps, // 继承 `data table props` - rightClickMenu: { + rightClickOptions: { /** * * 表格右键菜单, 基于 `NDropdown` 实现 @@ -29,6 +31,22 @@ const rayTableProps = { type: Array as PropType, default: () => [], }, + onRightMenuClick: { + type: [Function, Array] as PropType< + MaybeArray< + (key: string | number, index: number, option: DropdownOption) => void + > + >, + default: null, + }, + 'onUpdate:rightMenuClick': { + type: [Function, Array] as PropType< + MaybeArray< + (key: string | number, index: number, option: DropdownOption) => void + > + >, + default: null, + }, title: { /** * diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx index de5345a7..d219f25d 100644 --- a/src/views/table/index.tsx +++ b/src/views/table/index.tsx @@ -246,8 +246,8 @@ const TableView = defineComponent({ pageSize: 10, }} loading={this.tableLoading} - rightClickMenu={this.tableMenuOptions} - onMenuSelect={this.handleMenuSelect.bind(this)} + rightClickOptions={this.tableMenuOptions} + onRightMenuClick={this.handleMenuSelect.bind(this)} > {{ tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上',