+
-
+
重置
void;
}>;
// 是否开启展开和收缩
isExpandable?: boolean;
// 默认展示的表单项数量
showNumber?: number;
}
+
interface IProps {
searchConfig: ISearchConfig;
}
@@ -102,9 +106,12 @@ const emit = defineEmits<{
queryClick: [queryParams: IObject];
resetClick: [queryParams: IObject];
}>();
-// 暴露的属性和方法
-defineExpose({ getQueryParams });
+const queryFormRef = ref();
+// 是否显示
+const visible = ref(true);
+// 响应式的formItems
+const formItems = reactive(props.searchConfig.formItems);
// 是否可展开/收缩
const isExpandable = ref(props.searchConfig.isExpandable ?? true);
// 是否已展开
@@ -114,14 +121,13 @@ const showNumber = computed(() => {
if (isExpandable.value === true) {
return props.searchConfig.showNumber ?? 3;
} else {
- return props.searchConfig.formItems.length;
+ return formItems.length;
}
});
-
-const queryFormRef = ref();
// 搜索表单数据
const queryParams = reactive({});
-for (const item of props.searchConfig.formItems) {
+for (const item of formItems) {
+ item.initFn && item.initFn(item);
queryParams[item.prop] = item.initialValue ?? "";
}
// 重置操作
@@ -137,6 +143,13 @@ function handleQuery() {
function getQueryParams() {
return queryParams;
}
+// 显示/隐藏 SearchForm
+function toggleVisible() {
+ visible.value = !visible.value;
+}
+
+// 暴露的属性和方法
+defineExpose({ getQueryParams, toggleVisible });
diff --git a/src/hooks/usePage.ts b/src/hooks/usePage.ts
index a20fc4c6..7c3ab859 100644
--- a/src/hooks/usePage.ts
+++ b/src/hooks/usePage.ts
@@ -40,6 +40,10 @@ function usePage() {
const queryParams = searchRef.value?.getQueryParams();
contentRef.value?.exportPageData(queryParams);
}
+ // 搜索显隐
+ function handleSearchClick() {
+ searchRef.value?.toggleVisible();
+ }
return {
searchRef,
@@ -52,6 +56,7 @@ function usePage() {
handleEditClick,
handleSubmitClick,
handleExportClick,
+ handleSearchClick,
};
}
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 4255fa68..7d2096fe 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -162,6 +162,7 @@ function addTags() {
fullPath: route.fullPath,
affix: route.meta?.affix,
keepAlive: route.meta?.keepAlive,
+ query: route.query,
});
}
}
@@ -181,6 +182,7 @@ function moveToCurrentTag() {
fullPath: route.fullPath,
affix: route.meta?.affix,
keepAlive: route.meta?.keepAlive,
+ query: route.query,
});
}
}
@@ -222,7 +224,7 @@ function refreshSelectedTag(view: TagView) {
tagsViewStore.delCachedView(view);
const { fullPath } = view;
nextTick(() => {
- router.replace({ path: "/redirect" + fullPath });
+ router.replace("/redirect" + fullPath);
});
}
@@ -235,7 +237,7 @@ function toLastView(visitedViews: TagView[], view?: TagView) {
// you can adjust it according to your needs.
if (view?.name === "Dashboard") {
// to reload home page
- router.replace({ path: "/redirect" + view.fullPath });
+ router.replace("/redirect" + view.fullPath);
} else {
router.push("/");
}
diff --git a/src/views/demo/curd/config/add.ts b/src/views/demo/curd/config/add.ts
index 1400b748..19409669 100644
--- a/src/views/demo/curd/config/add.ts
+++ b/src/views/demo/curd/config/add.ts
@@ -1,3 +1,6 @@
+import DeptAPI from "@/api/dept";
+import DictAPI from "@/api/dict";
+import RoleAPI from "@/api/role";
import UserAPI from "@/api/user";
import type { UserForm } from "@/api/user/model";
import type { IModalConfig } from "@/components/PageModal/index.vue";
@@ -42,26 +45,14 @@ const modalConfig: IModalConfig = {
type: "tree-select",
attrs: {
placeholder: "请选择所属部门",
- data: [
- {
- value: 1,
- label: "有来技术",
- children: [
- {
- value: 2,
- label: "研发部门",
- },
- {
- value: 3,
- label: "测试部门",
- },
- ],
- },
- ],
+ data: [],
filterable: true,
"check-strictly": true,
"render-after-expand": false,
},
+ async initFn(formItem) {
+ formItem.attrs.data = await DeptAPI.getOptions();
+ },
},
{
type: "select",
@@ -70,11 +61,10 @@ const modalConfig: IModalConfig = {
attrs: {
placeholder: "请选择",
},
- options: [
- { label: "男", value: 1 },
- { label: "女", value: 2 },
- { label: "未知", value: 0 },
- ],
+ options: [],
+ async initFn(formItem) {
+ formItem.options = await DictAPI.getDictOptions("gender");
+ },
},
{
label: "角色",
@@ -85,18 +75,10 @@ const modalConfig: IModalConfig = {
placeholder: "请选择",
multiple: true,
},
- options: [
- { label: "系统管理员", value: 2 },
- { label: "系统管理员1", value: 4 },
- { label: "系统管理员2", value: 5 },
- { label: "系统管理员3", value: 6 },
- { label: "系统管理员4", value: 7 },
- { label: "系统管理员5", value: 8 },
- { label: "系统管理员6", value: 9 },
- { label: "系统管理员7", value: 10 },
- { label: "系统管理员8", value: 11 },
- { label: "访问游客", value: 3 },
- ],
+ options: [],
+ async initFn(formItem) {
+ this.options = await RoleAPI.getOptions();
+ },
},
{
type: "input",
diff --git a/src/views/demo/curd/config/content2.ts b/src/views/demo/curd/config/content2.ts
index b4b02c7e..e2e53480 100644
--- a/src/views/demo/curd/config/content2.ts
+++ b/src/views/demo/curd/config/content2.ts
@@ -22,6 +22,7 @@ const contentConfig: IContentConfig = {
gender: 1,
status: 1,
status2: 1,
+ sort: 99,
createTime: 1715647982437,
},
{
@@ -36,13 +37,14 @@ const contentConfig: IContentConfig = {
gender: 0,
status: 0,
status2: 0,
+ sort: 0,
createTime: 1715648977426,
},
],
});
},
modifyAction(data) {
- // console.log("modifyAction:", data);
+ console.log("modifyAction:", data);
return Promise.resolve(null);
},
cols: [
@@ -89,6 +91,13 @@ const contentConfig: IContentConfig = {
activeText: "启用",
inactiveText: "禁用",
},
+ {
+ label: "排序",
+ align: "center",
+ prop: "sort",
+ templet: "input",
+ inputType: "number",
+ },
{
label: "创建时间",
align: "center",
diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts
index 2f7d4cb7..b8cccd2d 100644
--- a/src/views/demo/curd/config/edit.ts
+++ b/src/views/demo/curd/config/edit.ts
@@ -1,3 +1,6 @@
+import DeptAPI from "@/api/dept";
+import DictAPI from "@/api/dict";
+import RoleAPI from "@/api/role";
import UserAPI from "@/api/user";
import type { UserForm } from "@/api/user/model";
import type { IModalConfig } from "@/components/PageModal/index.vue";
@@ -43,26 +46,14 @@ const modalConfig: IModalConfig = {
type: "tree-select",
attrs: {
placeholder: "请选择所属部门",
- data: [
- {
- value: 1,
- label: "有来技术",
- children: [
- {
- value: 2,
- label: "研发部门",
- },
- {
- value: 3,
- label: "测试部门",
- },
- ],
- },
- ],
+ data: [],
filterable: true,
"check-strictly": true,
"render-after-expand": false,
},
+ async initFn(formItem) {
+ formItem.attrs.data = await DeptAPI.getOptions();
+ },
},
{
type: "select",
@@ -71,11 +62,10 @@ const modalConfig: IModalConfig = {
attrs: {
placeholder: "请选择",
},
- options: [
- { label: "男", value: 1 },
- { label: "女", value: 2 },
- { label: "未知", value: 0 },
- ],
+ options: [],
+ async initFn(formItem) {
+ formItem.options = await DictAPI.getDictOptions("gender");
+ },
},
{
label: "角色",
@@ -86,18 +76,10 @@ const modalConfig: IModalConfig = {
placeholder: "请选择",
multiple: true,
},
- options: [
- { label: "系统管理员", value: 2 },
- { label: "系统管理员1", value: 4 },
- { label: "系统管理员2", value: 5 },
- { label: "系统管理员3", value: 6 },
- { label: "系统管理员4", value: 7 },
- { label: "系统管理员5", value: 8 },
- { label: "系统管理员6", value: 9 },
- { label: "系统管理员7", value: 10 },
- { label: "系统管理员8", value: 11 },
- { label: "访问游客", value: 3 },
- ],
+ options: [],
+ async initFn(formItem) {
+ this.options = await RoleAPI.getOptions();
+ },
},
{
type: "input",
diff --git a/src/views/demo/curd/config/search.ts b/src/views/demo/curd/config/search.ts
index 07045b57..f69d168a 100644
--- a/src/views/demo/curd/config/search.ts
+++ b/src/views/demo/curd/config/search.ts
@@ -1,3 +1,4 @@
+import DeptAPI from "@/api/dept";
import type { ISearchConfig } from "@/components/PageSearch/index.vue";
const searchConfig: ISearchConfig = {
@@ -21,22 +22,7 @@ const searchConfig: ISearchConfig = {
prop: "deptId",
attrs: {
placeholder: "请选择",
- data: [
- {
- value: 1,
- label: "有来技术",
- children: [
- {
- value: 2,
- label: "研发部门",
- },
- {
- value: 3,
- label: "测试部门",
- },
- ],
- },
- ],
+ data: [],
filterable: true,
"check-strictly": true,
"render-after-expand": false,
@@ -45,6 +31,11 @@ const searchConfig: ISearchConfig = {
width: "150px",
},
},
+ async initFn(formItem) {
+ formItem.attrs.data = await DeptAPI.getOptions();
+ // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+ // this.attrs!.data = await DeptAPI.getOptions();
+ },
},
{
type: "select",
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index 4130aa0d..49e2c3f8 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -24,6 +24,7 @@
@add-click="handleAddClick"
@edit-click="handleEditClick"
@export-click="handleExportClick"
+ @search-click="handleSearchClick"
@toolbar-click="handleToolbarClick"
@operat-click="handleOperatClick"
>
@@ -56,6 +57,7 @@ import type { IObject, IOperatData } from "@/hooks/usePage";
import usePage from "@/hooks/usePage";
import addModalConfig from "./config/add";
import contentConfig from "./config/content";
+// import contentConfig from "./config/content2";
import editModalConfig from "./config/edit";
import searchConfig from "./config/search";
@@ -70,6 +72,7 @@ const {
// handleEditClick,
handleSubmitClick,
handleExportClick,
+ handleSearchClick,
} = usePage();
// 编辑
async function handleEditClick(row: IObject) {