refactor(ui): 统一使用useMounted钩子简化页面初始化逻辑

This commit is contained in:
xiaojunnuo
2026-06-06 00:50:59 +08:00
parent 5546af518e
commit 1175e1164b
29 changed files with 118 additions and 202 deletions
@@ -11,7 +11,8 @@
</template>
<script lang="ts">
import { defineComponent, onActivated, onMounted } from "vue";
import { defineComponent } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "../../certd/access/crud";
import { createAccessApi } from "/@/views/certd/access/api";
@@ -21,15 +22,7 @@ export default defineComponent({
setup() {
const api = createAccessApi("sys");
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(async () => {
await crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
@@ -104,15 +104,7 @@ export default defineComponent({
// 更多关于按钮权限的源代码设置,请参考 ./src/plugin/fast-crud/index.js 75-77行)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { authz, permission } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(async () => {
await crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
crudRef,
@@ -18,14 +18,7 @@ export default defineComponent({
// 此处传入权限前缀进行通用按钮权限设置,会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
// 更多关于按钮权限的源代码设置,请参考 ./src/plugin/fast-crud/index.js 75-77行)
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { permission: "sys:auth:user" } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(async () => {
await crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
@@ -14,7 +14,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import createCrudOptions from "./crud";
@@ -25,11 +27,5 @@ defineOptions({
const context: any = {};
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
const handleBatchDelete = context.handleBatchDelete;
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
@@ -14,7 +14,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import createCrudOptions from "./crud";
@@ -25,11 +27,5 @@ defineOptions({
const context: any = {};
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
const handleBatchDelete = context.handleBatchDelete;
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
@@ -46,11 +46,15 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { computed, onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { Modal, notification } from "ant-design-vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud-level";
import * as api from "./api";
import { useMounted } from "/@/use/use-mounted";
import { util } from "/@/utils";
defineOptions({ name: "SysInviteLevel" });
@@ -92,13 +96,7 @@ function confirmRemove(opts: any) {
},
});
}
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
<style lang="less">
@@ -8,18 +8,14 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud-user-level";
defineOptions({ name: "SysInviteUserLevel" });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
@@ -8,18 +8,14 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud-withdraw";
defineOptions({ name: "SysInviteWithdraw" });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
@@ -11,21 +11,15 @@
</template>
<script lang="ts" setup>
import { onActivated, onMounted } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
defineOptions({
name: "OrderManager",
});
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
<style lang="less"></style>
@@ -11,7 +11,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
@@ -19,12 +21,5 @@ defineOptions({
name: "UserSuites",
});
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>