feat: 🚀 增加 SearchForm 属性透传

.stylelintrc.js

@@ -21,7 +21,6 @@ module.exports = {
 	 * null  => 关闭该规则
 	 */
 	rules: {
-		// indentation: null, // 指定缩进空格
 		"no-descending-specificity": null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
 		"function-url-quotes": "always", // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
 		"string-quotes": "double", // 指定字符串使用单引号或双引号

.vscode/settings.json

@@ -7,6 +7,8 @@
 	"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
 	"files.eol": "\n",
 	"cSpell.words": [
+		"acroutes",
+		"adcode",
 		"Alipay",
 		"Anglar",
 		"antd",

src/components/ProTable/index.vue

@@ -159,15 +159,15 @@ const props = withDefaults(defineProps<ProTableProps>(), {
 const { selectionChange, getRowKeys, selectedListIds, isSelected } = useSelection();
 
 // 表格操作 Hooks
-const { tableData, pageable, searchParam, initSearchParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
+const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
 	useTable(props.requestApi, props.initParam, props.pagination);
 
 // 表格列配置项处理（添加 isShow 属性，控制显示/隐藏）
 const tableColumns = ref<Partial<ColumnProps>[]>();
 tableColumns.value = props.columns.map(item => {
 	return {
 		...item,
-		isShow: true
+		isShow: item.isShow ?? true
 	};
 });
 
@@ -176,8 +176,8 @@ const searchColumns = props.columns.filter(item => item.search);
 
 // 设置搜索表单的默认值
 searchColumns.forEach(column => {
-	if (column.initSearchParam !== undefined && column.initSearchParam !== null) {
-		initSearchParam.value[column.prop!] = column.initSearchParam;
+	if (column.searchInitParam !== undefined && column.searchInitParam !== null) {
+		searchInitParam.value[column.prop!] = column.searchInitParam;
 	}
 });
 

src/components/ProTable/interface/index.ts

@@ -26,14 +26,15 @@ export interface ColumnProps {
 	prop: string; // 单元格数据（非特殊类型必填）
 	label: string; // 单元格标题（非特殊类型必填）
 	width: number | string; // 列宽
-	isShow: boolean; // 是否显示
+	isShow: boolean; // 是否显示在表格当中
 	sortable: boolean; // 是否可排序（静态排序）
 	fixed: FixedProp; // 固定列
 	tag: boolean; // 是否是标签展示
 	image: boolean; // 是否是图片展示
 	search: boolean; // 是否为搜索项
 	searchType: SearchType; // 搜索项类型
-	initSearchParam: string | number | boolean | any[]; // 搜索项初始值
+	searchProps: { [key: string]: any }; // 搜索项参数，根据 element 文档来，标签自带属性 > props 属性
+	searchInitParam: string | number | boolean | any[]; // 搜索项初始值
 	enum: EnumProps[]; // 枚举类型（渲染值的字典）
 	renderHeader: (params: any) => any; // 自定义表头
 }

src/components/SearchForm/components/SearchFormItem.vue

@@ -1,12 +1,18 @@
 <template>
 	<!-- 文本框 -->
 	<template v-if="item.searchType == undefined || item.searchType == 'text'">
-		<el-input v-model="searchParam[item.prop!]" placeholder="请输入" :clearable="clearable(item)"></el-input>
+		<el-input
+			v-model="searchParam[item.prop!]"
+			v-bind="item.searchProps"
+			placeholder="请输入"
+			:clearable="clearable(item)"
+		></el-input>
 	</template>
 	<!-- 下拉选择框 -->
 	<template v-if="item.searchType == 'select' || item.searchType == 'multipleSelect'">
 		<el-select
 			v-model="searchParam[item.prop!]"
+			v-bind="item.searchProps"
 			:multiple="item.searchType == 'multipleSelect'"
 			placeholder="请选择"
 			:clearable="clearable(item)"
@@ -22,12 +28,18 @@
 	</template>
 	<!-- 下拉树形选择框 -->
 	<template v-if="item.searchType == 'treeSelect' || item.searchType == 'multipleTreeSelect'">
-		<el-tree-select v-model="searchParam[item.prop!]" :multiple="item.searchType == 'multipleTreeSelect'" :data="item.enum" />
+		<el-tree-select
+			v-model="searchParam[item.prop!]"
+			v-bind="item.searchProps"
+			:multiple="item.searchType == 'multipleTreeSelect'"
+			:data="item.enum"
+		/>
 	</template>
 	<!-- 日期选择 -->
 	<template v-if="item.searchType == 'date'">
 		<el-date-picker
 			v-model="searchParam[item.prop!]"
+			v-bind="item.searchProps"
 			value-format="YYYY-MM-DD"
 			type="date"
 			placeholder="请选择日期"
@@ -38,6 +50,7 @@
 	<template v-if="item.searchType == 'timerange'">
 		<el-time-picker
 			v-model="searchParam[item.prop!]"
+			v-bind="item.searchProps"
 			is-range
 			value-format="HH:mm:ss"
 			range-separator="至"
@@ -50,6 +63,7 @@
 	<template v-if="item.searchType == 'daterange'">
 		<el-date-picker
 			v-model="searchParam[item.prop!]"
+			v-bind="item.searchProps"
 			type="daterange"
 			value-format="YYYY-MM-DD"
 			range-separator="至"
@@ -62,6 +76,7 @@
 	<template v-if="item.searchType == 'datetimerange'">
 		<el-date-picker
 			v-model="searchParam[item.prop!]"
+			v-bind="item.searchProps"
 			type="datetimerange"
 			value-format="YYYY-MM-DD HH:mm:ss"
 			range-separator="至"
@@ -82,7 +97,7 @@ interface SearchFormItem {
 
 // 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
 const clearable = (item: Partial<ColumnProps>) => {
-	return item.initSearchParam == null || item.initSearchParam == undefined;
+	return item.searchInitParam == null || item.searchInitParam == undefined;
 };
 
 defineProps<SearchFormItem>();

src/hooks/interface/index.ts

@@ -11,7 +11,7 @@ export namespace Table {
 		searchParam: {
 			[key: string]: any;
 		};
-		initSearchParam: {
+		searchInitParam: {
 			[key: string]: any;
 		};
 		totalParam: {

src/hooks/useTable.ts

@@ -25,7 +25,7 @@ export const useTable = (api: (params: any) => Promise<any>, initParam: object =
 		// 查询参数(只包括查询)
 		searchParam: {},
 		// 初始化默认的查询参数
-		initSearchParam: {},
+		searchInitParam: {},
 		// 总参数(包含分页和查询参数)
 		totalParam: {}
 	});
@@ -113,8 +113,8 @@ export const useTable = (api: (params: any) => Promise<any>, initParam: object =
 		state.pageable.pageNum = 1;
 		state.searchParam = {};
 		// 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
-		Object.keys(state.initSearchParam).forEach(key => {
-			state.searchParam[key] = state.initSearchParam[key];
+		Object.keys(state.searchInitParam).forEach(key => {
+			state.searchParam[key] = state.searchInitParam[key];
 		});
 		getTableList();
 	};

src/language/modules/zh.ts

@@ -12,7 +12,7 @@ export default {
 		componentSize: "组件大小",
 		language: "国际化",
 		theme: "全局主题",
-		layoutConfig: "布局配置",
+		layoutConfig: "布局设置",
 		primary: "primary",
 		darkMode: "暗黑模式",
 		greyMode: "灰色模式",

src/layout/Header/components/Theme.vue

@@ -1,10 +1,13 @@
 <template>
 	<div>
-		<el-tooltip effect="dark" content="布局配置" placement="bottom">
+		<el-tooltip effect="dark" content="布局设置" placement="bottom">
 			<i :class="'iconfont icon-zhuti'" class="icon-style" @click="openDrawer"></i>
 		</el-tooltip>
-		<el-drawer v-model="drawerVisible" title="布局配置" size="300px">
-			<el-divider class="divider" content-position="center">全局主题</el-divider>
+		<el-drawer v-model="drawerVisible" title="布局设置" size="300px">
+			<el-divider class="divider">
+				<el-icon><ColdDrink /></el-icon>
+				全局主题
+			</el-divider>
 			<div class="theme-item">
 				<span>primary</span>
 				<el-color-picker v-model="themeConfig.primary" :predefine="colorList" @change="changePrimary"> </el-color-picker>

src/layout/Header/index.scss

@@ -48,7 +48,13 @@
 			}
 		}
 		.divider {
-			margin-top: 15px;
+			margin-top: 20px;
+			.el-icon {
+				position: relative;
+				top: 2px;
+				right: 5px;
+				font-size: 15px;
+			}
 		}
 	}
 	.theme-switch {

src/layout/index.scss

@@ -17,7 +17,7 @@
 		box-sizing: border-box;
 		padding: 10px 13px;
 
-		// 防止切换出现横向滚动条
+		/* 防止切换出现横向滚动条 */
 		overflow-x: hidden;
 		background: #f0f2f5;
 		.main-box {

src/styles/element-dark.scss

@@ -71,7 +71,7 @@ html.dark {
 	// --el-mask-color: rgb(0 0 0 / 80%);
 	// --el-mask-color-extra-light: rgb(0 0 0 / 30%);
 
-	// * geeker-admin
+	// * geeker-admin 样式
 	--geeker-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%);
 	--geeker-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%);
 	--geeker-border-light: 1px solid #4c4c4d;

src/views/dataScreen/index.scss

@@ -181,9 +181,6 @@
 						width: 100%;
 						height: 76px;
 						padding: 2px 30px;
-
-						// display: flex;
-						// flex-direction: column;
 						overflow: hidden;
 						background: url("./images/dataScreen-warn-bg.png") no-repeat;
 						background-size: 100% 100%;

src/views/proTable/useComponent/index.vue

@@ -105,18 +105,19 @@ const columns: Partial<ColumnProps>[] = [
 	{
 		prop: "username",
 		label: "用户姓名",
-		search: true,
 		width: 135,
+		search: true,
+		searchProps: { disabled: true },
 		renderHeader
 	},
 	{
 		prop: "gender",
 		label: "性别",
-		width: "140",
-		enum: genderType,
-		search: true,
+		width: 140,
 		sortable: true,
-		searchType: "select"
+		search: true,
+		searchType: "select",
+		enum: genderType
 	},
 	{
 		prop: "idCard",
@@ -140,7 +141,10 @@ const columns: Partial<ColumnProps>[] = [
 		sortable: true,
 		search: true,
 		searchType: "datetimerange",
-		initSearchParam: ["2022-04-05 00:00:00", "2022-05-10 23:59:59"]
+		searchProps: {
+			disabledDate: (time: Date) => time.getTime() < Date.now() - 8.64e7
+		},
+		searchInitParam: ["2022-07-30 00:00:00", "2022-08-10 23:59:59"]
 	},
 	{
 		prop: "status",

src/views/proTable/useHooks/index.vue

@@ -161,7 +161,7 @@ const {
 	searchShow,
 	pageable,
 	searchParam,
-	initSearchParam,
+	searchInitParam,
 	getTableList,
 	search,
 	reset,
@@ -176,7 +176,7 @@ const { isSelected, selectedListIds, selectionChange, getRowKeys } = useSelectio
 const { BUTTONS } = useAuthButtons();
 
 // 设置搜索表单默认参数
-initSearchParam.value = { createTime: ["2022-04-05 00:00:00", "2022-05-10 23:59:59"] };
+searchInitParam.value = { createTime: ["2022-04-05 00:00:00", "2022-05-10 23:59:59"] };
 
 // 删除用户信息
 const deleteAccount = async (params: User.ResUserList) => {