diff --git a/README.md b/README.md index 368a6cbf..7f890cbd 100644 --- a/README.md +++ b/README.md @@ -191,7 +191,7 @@ Geeker-Admin | 微信群二维码 | | :------------------------------------------------------------: | -| | +| | ### 捐赠 🍵 diff --git a/src/App.vue b/src/App.vue index 83624b29..20b061e5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,23 +13,20 @@ import { ElConfigProvider } from "element-plus"; import zhCn from "element-plus/es/locale/lang/zh-cn"; import en from "element-plus/es/locale/lang/en"; -// 初始化主题配置 +const globalStore = GlobalStore(); const { initTheme } = useTheme(); initTheme(); -const globalStore = GlobalStore(); -// 配置element按钮文字中间是否有空格 -const config = reactive({ - autoInsertSpace: false -}); +// element config +const config = reactive({ autoInsertSpace: false }); -// element 语言配置 +// element language const i18nLocale = computed(() => { - if (globalStore.language && globalStore.language == "zh") return zhCn; + if (globalStore.language == "zh") return zhCn; if (globalStore.language == "en") return en; return getBrowserLang() == "zh" ? zhCn : en; }); -// 配置全局组件大小 +// element assemblySize const assemblySize = computed(() => globalStore.assemblySize); diff --git a/src/api/interface/index.ts b/src/api/interface/index.ts index 79b4fe83..a84f759b 100644 --- a/src/api/interface/index.ts +++ b/src/api/interface/index.ts @@ -70,6 +70,7 @@ export namespace User { createTime: string; status: number; avatar: string; + photo: any[]; children?: ResUserList[]; } export interface ResStatus { diff --git a/src/components/ImportExcel/index.vue b/src/components/ImportExcel/index.vue index a2f893b8..47feae68 100644 --- a/src/components/ImportExcel/index.vue +++ b/src/components/ImportExcel/index.vue @@ -6,7 +6,7 @@ - -
将文件拖到此处，或点击上传
+ + +
将文件拖到此处，或点击上传
+ @@ -37,13 +41,15 @@ import { ref } from "vue"; import { useDownload } from "@/hooks/useDownload"; import { Download } from "@element-plus/icons-vue"; -import { ElNotification } from "element-plus"; +import { ElNotification, UploadRequestOptions, UploadRawFile } from "element-plus"; export interface ExcelParameterProps { title: string; // 标题 - tempApi: (params: any) => Promise; // 下载模板的Api - importApi: (params: any) => Promise; // 批量导入的Api - getTableList?: () => Promise; // 获取表格数据的Api + fileSize?: number; // 上传文件的大小 + fileType?: File.ExcelMimeType[]; // 上传文件的类型 + tempApi?: (params: any) => Promise; // 下载模板的Api + importApi?: (params: any) => Promise; // 批量导入的Api + getTableList?: () => void; // 获取表格数据的Api } // 是否覆盖数据 @@ -53,11 +59,15 @@ const excelLimit = ref(1); // dialog状态 const dialogVisible = ref(false); // 父组件传过来的参数 -const parameter = ref>({}); +const parameter = ref({ + title: "", + fileSize: 5, + fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"] +}); // 接收父组件参数 -const acceptParams = (params?: any): void => { - parameter.value = params; +const acceptParams = (params: ExcelParameterProps) => { + parameter.value = { ...parameter.value, ...params }; dialogVisible.value = true; }; @@ -68,12 +78,12 @@ const downloadTemp = () => { }; // 文件上传 -const uploadExcel = async (param: any) => { +const uploadExcel = async (param: UploadRequestOptions) => { let excelFormData = new FormData(); excelFormData.append("file", param.file); excelFormData.append("isCover", isCover.value as unknown as Blob); await parameter.value.importApi!(excelFormData); - parameter.value.getTableList && parameter.value.getTableList(); + parameter.value.getTableList!(); dialogVisible.value = false; }; @@ -81,10 +91,9 @@ const uploadExcel = async (param: any) => { * @description 文件上传之前判断 * @param file 上传的文件 * */ -const beforeExcelUpload = (file: any) => { - const isExcel = - file.type === "application/vnd.ms-excel" || file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; - const fileSize = file.size / 1024 / 1024 < 5; +const beforeExcelUpload = (file: UploadRawFile) => { + const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType); + const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!; if (!isExcel) ElNotification({ title: "温馨提示", @@ -92,16 +101,18 @@ const beforeExcelUpload = (file: any) => { type: "warning" }); if (!fileSize) - ElNotification({ - title: "温馨提示", - message: "上传文件大小不能超过 5MB！", - type: "warning" - }); + setTimeout(() => { + ElNotification({ + title: "温馨提示", + message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`, + type: "warning" + }); + }, 0); return isExcel && fileSize; }; // 文件数超出提示 -const handleExceed = (): void => { +const handleExceed = () => { ElNotification({ title: "温馨提示", message: "最多只能上传一个文件！", @@ -110,7 +121,7 @@ const handleExceed = (): void => { }; // 上传错误提示 -const excelUploadError = (): void => { +const excelUploadError = () => { ElNotification({ title: "温馨提示", message: `批量添加${parameter.value.title}失败，请您重新上传！`, @@ -119,7 +130,7 @@ const excelUploadError = (): void => { }; // 上传成功提示 -const excelUploadSuccess = (): void => { +const excelUploadSuccess = () => { ElNotification({ title: "温馨提示", message: `批量添加${parameter.value.title}成功！`, diff --git a/src/components/ProTable/index.vue b/src/components/ProTable/index.vue index 1696485a..d05dfe72 100644 --- a/src/components/ProTable/index.vue +++ b/src/components/ProTable/index.vue @@ -206,7 +206,7 @@ const colSetting = tableColumns.value!.filter( ); const openColSetting = () => colRef.value.openColSetting(); -// 🙅‍♀️ 不需要打印可以把以下方法删除（目前数据处理比较复杂 201-238） +// 🙅‍♀️ 不需要打印可以把以下方法删除（目前数据处理比较复杂 209-246） // 处理打印数据（把后台返回的值根据 enum 做转换） const printData = computed(() => { const printDataList = JSON.parse(JSON.stringify(selectedList.value.length ? selectedList.value : tableData.value)); diff --git a/src/components/SelectFilter/index.vue b/src/components/SelectFilter/index.vue index 448721af..a8748351 100644 --- a/src/components/SelectFilter/index.vue +++ b/src/components/SelectFilter/index.vue @@ -29,7 +29,7 @@ diff --git a/src/components/TreeFilter/index.vue b/src/components/TreeFilter/index.vue index 4bea2127..2a483b42 100644 --- a/src/components/TreeFilter/index.vue +++ b/src/components/TreeFilter/index.vue @@ -57,12 +57,11 @@ const defaultProps = { label: props.label }; -const filterText = ref(""); const treeRef = ref>(); const treeData = ref<{ [key: string]: any }[]>([]); const treeAllData = ref<{ [key: string]: any }[]>([]); -const selected = ref(); +const selected = ref(); const setSelected = () => { if (props.multiple) selected.value = Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue]; else selected.value = typeof props.defaultValue === "string" ? props.defaultValue : ""; @@ -77,6 +76,7 @@ onBeforeMount(async () => { } }); +// 使用 nextTick 防止打包后赋值不生效 watch( () => props.defaultValue, () => nextTick(() => setSelected()), @@ -94,6 +94,7 @@ watch( { deep: true, immediate: true } ); +const filterText = ref(""); watch(filterText, val => { treeRef.value!.filter(val); }); diff --git a/src/components/Upload/Img.vue b/src/components/Upload/Img.vue index daadf28d..58d8323c 100644 --- a/src/components/Upload/Img.vue +++ b/src/components/Upload/Img.vue @@ -54,25 +54,13 @@ import { generateUUID } from "@/utils/util"; import { ElNotification, formContextKey, formItemContextKey } from "element-plus"; import type { UploadProps, UploadRequestOptions } from "element-plus"; -type FileTypes = - | "image/apng" - | "image/bmp" - | "image/gif" - | "image/jpeg" - | "image/pjpeg" - | "image/png" - | "image/svg+xml" - | "image/tiff" - | "image/webp" - | "image/x-icon"; - interface UploadFileProps { imageUrl: string; // 图片地址 ==> 必传 api?: (params: any) => Promise; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传 drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true） disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false） fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M） - fileType?: FileTypes[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]） + fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]） height?: string; // 组件高度 ==> 非必传（默认为 150px） width?: string; // 组件宽度 ==> 非必传（默认为 150px） borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px） @@ -106,11 +94,10 @@ const self_disabled = computed(() => { /** * @description 图片上传 - * @param options 上传的文件 + * @param options upload 所有配置项 * */ interface UploadEmits { (e: "update:imageUrl", value: string): void; - (e: "check-validate"): void; } const emit = defineEmits(); const handleHttpUpload = async (options: UploadRequestOptions) => { @@ -122,7 +109,6 @@ const handleHttpUpload = async (options: UploadRequestOptions) => { emit("update:imageUrl", data.fileUrl); // 调用 el-form 内部的校验方法（可自动校验） formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]); - emit("check-validate"); } catch (error) { options.onError(error as any); } @@ -145,27 +131,31 @@ const editImg = () => { /** * @description 文件上传之前判断 - * @param rawFile 上传的文件 + * @param rawFile 选择的文件 * */ const beforeUpload: UploadProps["beforeUpload"] = rawFile => { const imgSize = rawFile.size / 1024 / 1024 < props.fileSize; - const imgType = props.fileType; - if (!imgType.includes(rawFile.type as FileTypes)) + const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType); + if (!imgType) ElNotification({ title: "温馨提示", message: "上传图片不符合所需的格式！", type: "warning" }); if (!imgSize) - ElNotification({ - title: "温馨提示", - message: `上传图片大小不能超过 ${props.fileSize}M！`, - type: "warning" - }); - return imgType.includes(rawFile.type as FileTypes) && imgSize; + setTimeout(() => { + ElNotification({ + title: "温馨提示", + message: `上传图片大小不能超过 ${props.fileSize}M！`, + type: "warning" + }); + }, 0); + return imgType && imgSize; }; -// 图片上传成功提示 +/** + * @description 图片上传成功 + * */ const uploadSuccess = () => { ElNotification({ title: "温馨提示", @@ -174,7 +164,9 @@ const uploadSuccess = () => { }); }; -// 图片上传错误提示 +/** + * @description 图片上传错误 + * */ const uploadError = () => { ElNotification({ title: "温馨提示", diff --git a/src/components/Upload/Imgs.vue b/src/components/Upload/Imgs.vue index f946a68b..746a56c9 100644 --- a/src/components/Upload/Imgs.vue +++ b/src/components/Upload/Imgs.vue @@ -50,18 +50,6 @@ import { uploadImg } from "@/api/modules/upload"; import type { UploadProps, UploadFile, UploadUserFile, UploadRequestOptions } from "element-plus"; import { ElNotification, formContextKey, formItemContextKey } from "element-plus"; -type FileTypes = - | "image/apng" - | "image/bmp" - | "image/gif" - | "image/jpeg" - | "image/pjpeg" - | "image/png" - | "image/svg+xml" - | "image/tiff" - | "image/webp" - | "image/x-icon"; - interface UploadFileProps { fileList: UploadUserFile[]; api?: (params: any) => Promise; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传 @@ -69,7 +57,7 @@ interface UploadFileProps { disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false） limit?: number; // 最大图片上传数 ==> 非必传（默认为 5张） fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M） - fileType?: FileTypes[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]） + fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]） height?: string; // 组件高度 ==> 非必传（默认为 150px） width?: string; // 组件宽度 ==> 非必传（默认为 150px） borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px） @@ -108,29 +96,31 @@ watch( /** * @description 文件上传之前判断 - * @param rawFile 上传的文件 + * @param rawFile 选择的文件 * */ const beforeUpload: UploadProps["beforeUpload"] = rawFile => { const imgSize = rawFile.size / 1024 / 1024 < props.fileSize; - const imgType = props.fileType; - if (!imgType.includes(rawFile.type as FileTypes)) + const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType); + if (!imgType) ElNotification({ title: "温馨提示", message: "上传图片不符合所需的格式！", type: "warning" }); if (!imgSize) - ElNotification({ - title: "温馨提示", - message: `上传图片大小不能超过 ${props.fileSize}M！`, - type: "warning" - }); - return imgType.includes(rawFile.type as FileTypes) && imgSize; + setTimeout(() => { + ElNotification({ + title: "温馨提示", + message: `上传图片大小不能超过 ${props.fileSize}M！`, + type: "warning" + }); + }, 0); + return imgType && imgSize; }; /** * @description 图片上传 - * @param options 上传的文件 + * @param options upload 所有配置项 * */ const handleHttpUpload = async (options: UploadRequestOptions) => { let formData = new FormData(); @@ -144,7 +134,11 @@ const handleHttpUpload = async (options: UploadRequestOptions) => { } }; -// 图片上传成功 +/** + * @description 图片上传成功 + * @param response 上传响应结果 + * @param uploadFile 上传的文件 + * */ interface UploadEmits { (e: "update:fileList", value: UploadUserFile[]): void; } @@ -162,13 +156,18 @@ const uploadSuccess = (response: { fileUrl: string } | undefined, uploadFile: Up }); }; -// 删除图片 -const handleRemove = (uploadFile: UploadFile) => { - fileList.value = fileList.value.filter(item => item.url !== uploadFile.url || item.name !== uploadFile.name); +/** + * @description 删除图片 + * @param file 删除的文件 + * */ +const handleRemove = (file: UploadFile) => { + fileList.value = fileList.value.filter(item => item.url !== file.url || item.name !== file.name); emit("update:fileList", fileList.value); }; -// 图片上传错误提示 +/** + * @description 图片上传错误 + * */ const uploadError = () => { ElNotification({ title: "温馨提示", @@ -177,7 +176,9 @@ const uploadError = () => { }); }; -// 文件数超出提示 +/** + * @description 文件数超出 + * */ const handleExceed = () => { ElNotification({ title: "温馨提示", @@ -186,11 +187,14 @@ const handleExceed = () => { }); }; -// 图片预览 +/** + * @description 图片预览 + * @param file 预览的文件 + * */ const viewImageUrl = ref(""); const imgViewVisible = ref(false); -const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => { - viewImageUrl.value = uploadFile.url!; +const handlePictureCardPreview: UploadProps["onPreview"] = file => { + viewImageUrl.value = file.url!; imgViewVisible.value = true; }; diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts index 9b37d41d..d152d6d1 100644 --- a/src/hooks/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -58,7 +58,6 @@ export const useTheme = () => { // 初始化 theme 配置 const initTheme = () => { switchDark(); - changePrimary(themeConfig.value.primary); if (themeConfig.value.isGrey) changeGreyOrWeak(true, "grey"); if (themeConfig.value.isWeak) changeGreyOrWeak(true, "weak"); }; diff --git a/src/routers/index.ts b/src/routers/index.ts index b3fe1cce..cfdfd19b 100644 --- a/src/routers/index.ts +++ b/src/routers/index.ts @@ -43,7 +43,7 @@ router.beforeEach(async (to, from, next) => { document.title = to.meta.title ? `${to.meta.title} - ${title}` : title; // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页 - if (to.path === LOGIN_URL) { + if (to.path.toLocaleLowerCase() === LOGIN_URL) { if (globalStore.token) return next(from.fullPath); resetRouter(); return next(); diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts index 87d0a0ed..cf8ca379 100644 --- a/src/typings/global.d.ts +++ b/src/typings/global.d.ts @@ -20,6 +20,23 @@ declare namespace Menu { } } +// * FileType +declare namespace File { + type ImageMimeType = + | "image/apng" + | "image/bmp" + | "image/gif" + | "image/jpeg" + | "image/pjpeg" + | "image/png" + | "image/svg+xml" + | "image/tiff" + | "image/webp" + | "image/x-icon"; + + type ExcelMimeType = "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; +} + // * Vite declare type Recordable = Record; diff --git a/src/views/assembly/batchImport/index.vue b/src/views/assembly/batchImport/index.vue index 157515c3..3a4f9d3b 100644 --- a/src/views/assembly/batchImport/index.vue +++ b/src/views/assembly/batchImport/index.vue @@ -3,8 +3,13 @@ 批量添加数据 🍓🍇🍈🍉 批量添加数据 - - 组件显示标题，上传成功之后提示信息 + + 组件显示标题 && 上传成功之后提示信息 + 上传文件大小，默认为 5M + + 上传文件类型限制，默认类型为 ["application/vnd.ms-excel", + "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"] + 下载模板的 Api 上传数据的 Api 上传数据成功之后，刷新表格数据的 Api diff --git a/src/views/proTable/components/UserDrawer.vue b/src/views/proTable/components/UserDrawer.vue index abae9655..70b85ffb 100644 --- a/src/views/proTable/components/UserDrawer.vue +++ b/src/views/proTable/components/UserDrawer.vue @@ -56,6 +56,7 @@ import { ref, reactive } from "vue"; import { genderType } from "@/utils/serviceDict"; import { ElMessage, FormInstance } from "element-plus"; +import { User } from "@/api/interface"; import UploadImg from "@/components/Upload/Img.vue"; import UploadImgs from "@/components/Upload/Imgs.vue"; @@ -72,20 +73,20 @@ const rules = reactive({ interface DrawerProps { title: string; isView: boolean; - rowData?: any; + rowData: Partial; api?: (params: any) => Promise; - getTableList?: () => Promise; + getTableList?: () => void; } -// drawer框状态 const drawerVisible = ref(false); const drawerProps = ref({ isView: false, - title: "" + title: "", + rowData: {} }); // 接收父组件传过来的参数 -const acceptParams = (params: DrawerProps): void => { +const acceptParams = (params: DrawerProps) => { drawerProps.value = params; drawerVisible.value = true; }; diff --git a/src/views/proTable/treeProTable/index.vue b/src/views/proTable/treeProTable/index.vue index 3bf15ffb..19b57576 100644 --- a/src/views/proTable/treeProTable/index.vue +++ b/src/views/proTable/treeProTable/index.vue @@ -72,9 +72,7 @@ onMounted(() => { const proTable = ref(); // 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据) -const initParam = reactive({ - departmentId: "" -}); +const initParam = reactive({ departmentId: "" }); // 获取 treeFilter 数据 // 当 proTable 的 requestAuto 属性为 false，不会自动请求表格数据，等待 treeFilter 数据回来之后，更改 initParam.departmentId 的值，才会触发请求 proTable 数据 @@ -113,6 +111,7 @@ const columns: ColumnProps[] = [ prop: "gender", label: "性别", sortable: true, + isFilterEnum: false, enum: filterGenderEnum.value, search: { el: "select", @@ -132,7 +131,7 @@ const columns: ColumnProps[] = [ search: { el: "tree-select" }, fieldNames: { label: "userLabel", value: "userStatus" } }, - { prop: "createTime", label: "创建时间" }, + { prop: "createTime", label: "创建时间", width: 180 }, { prop: "operation", label: "操作", width: 300, fixed: "right" } ]; @@ -143,15 +142,15 @@ const deleteAccount = async (params: User.ResUserList) => { }; // 打开 drawer(新增、查看、编辑) -const drawerRef = ref(); +const drawerRef = ref | null>(null); const openDrawer = (title: string, rowData: Partial = {}) => { const params = { title, rowData: { ...rowData }, isView: title === "查看", - api: title === "新增" ? addUser : title === "编辑" ? editUser : "", + api: title === "新增" ? addUser : title === "编辑" ? editUser : undefined, getTableList: proTable.value.getTableList }; - drawerRef.value.acceptParams(params); + drawerRef.value?.acceptParams(params); }; diff --git a/src/views/proTable/useProTable/index.vue b/src/views/proTable/useProTable/index.vue index 5419c1cd..9c5757af 100644 --- a/src/views/proTable/useProTable/index.vue +++ b/src/views/proTable/useProTable/index.vue @@ -77,16 +77,14 @@ const router = useRouter(); // 跳转详情页 const toDetail = () => { - router.push(`/proTable/useProTable/detail/${Math.random()}?params=detail-page`); + router.push(`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`); }; // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数） const proTable = ref(); // 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据) -const initParam = reactive({ - type: 1 -}); +const initParam = reactive({ type: 1 }); // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段 // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行 @@ -144,7 +142,7 @@ const columns: ColumnProps[] = [ { prop: "gender", label: "性别", - // 直接放字典数据 + // 字典数据 // enum: genderType, // 字典请求不带参数 enum: getUserGender, @@ -230,7 +228,7 @@ const downloadFile = async () => { }; // 批量添加用户 -const dialogRef = ref(); +const dialogRef = ref | null>(null); const batchAdd = () => { const params = { title: "用户", @@ -238,19 +236,19 @@ const batchAdd = () => { importApi: BatchAddUser, getTableList: proTable.value.getTableList }; - dialogRef.value.acceptParams(params); + dialogRef.value?.acceptParams(params); }; // 打开 drawer(新增、查看、编辑) -const drawerRef = ref(); +const drawerRef = ref | null>(null); const openDrawer = (title: string, rowData: Partial = {}) => { const params = { title, - rowData: { ...rowData }, isView: title === "查看", - api: title === "新增" ? addUser : title === "编辑" ? editUser : "", + rowData: { ...rowData }, + api: title === "新增" ? addUser : title === "编辑" ? editUser : undefined, getTableList: proTable.value.getTableList }; - drawerRef.value.acceptParams(params); + drawerRef.value?.acceptParams(params); }; diff --git a/src/views/proTable/useSelectFilter/index.vue b/src/views/proTable/useSelectFilter/index.vue index 266fa22a..7febfb85 100644 --- a/src/views/proTable/useSelectFilter/index.vue +++ b/src/views/proTable/useSelectFilter/index.vue @@ -81,7 +81,7 @@ const columns: ColumnProps[] = [ ]; // selectFilter 数据（用户角色为后台数据） -const selectFilterData = ref([ +const selectFilterData = reactive([ { title: "用户状态(单)", key: "userStatus", @@ -129,7 +129,7 @@ const selectFilterData = ref([ onMounted(() => getUserRoleDict()); const getUserRoleDict = async () => { const { data } = await getUserRole(); - selectFilterData.value[1].options = data as any; + selectFilterData[1].options = data as any; }; // 默认 selectFilter 参数 @@ -168,27 +168,27 @@ const downloadFile = async () => { }; // 批量添加用户 -const dialogRef = ref(); +const dialogRef = ref | null>(null); const batchAdd = () => { - let params = { + const params = { title: "用户", tempApi: exportUserInfo, importApi: BatchAddUser, getTableList: proTable.value.getTableList }; - dialogRef.value.acceptParams(params); + dialogRef.value?.acceptParams(params); }; // 打开 drawer(新增、查看、编辑) -const drawerRef = ref(); +const drawerRef = ref | null>(null); const openDrawer = (title: string, rowData: Partial = {}) => { - let params = { + const params = { title, - rowData: { ...rowData }, isView: title === "查看", - api: title === "新增" ? addUser : title === "编辑" ? editUser : "", + rowData: { ...rowData }, + api: title === "新增" ? addUser : title === "编辑" ? editUser : undefined, getTableList: proTable.value.getTableList }; - drawerRef.value.acceptParams(params); + drawerRef.value?.acceptParams(params); }; diff --git a/src/views/proTable/useTreeFilter/index.vue b/src/views/proTable/useTreeFilter/index.vue index 90446836..73caeea5 100644 --- a/src/views/proTable/useTreeFilter/index.vue +++ b/src/views/proTable/useTreeFilter/index.vue @@ -73,9 +73,7 @@ const toDetail = () => { const proTable = ref(); // 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据) -const initParam = reactive({ - departmentId: "1" -}); +const initParam = reactive({ departmentId: "1" }); // 树形筛选切换 const changeTreeFilter = (val: string) => { @@ -134,7 +132,7 @@ const downloadFile = async () => { }; // 批量添加用户 -const dialogRef = ref(); +const dialogRef = ref | null>(null); const batchAdd = () => { const params = { title: "用户", @@ -142,19 +140,19 @@ const batchAdd = () => { importApi: BatchAddUser, getTableList: proTable.value.getTableList }; - dialogRef.value.acceptParams(params); + dialogRef.value?.acceptParams(params); }; // 打开 drawer(新增、查看、编辑) -const drawerRef = ref(); +const drawerRef = ref | null>(null); const openDrawer = (title: string, rowData: Partial = {}) => { const params = { title, - rowData: { ...rowData }, isView: title === "查看", - api: title === "新增" ? addUser : title === "编辑" ? editUser : "", + rowData: { ...rowData }, + api: title === "新增" ? addUser : title === "编辑" ? editUser : undefined, getTableList: proTable.value.getTableList }; - drawerRef.value.acceptParams(params); + drawerRef.value?.acceptParams(params); };