wuheng hace 1 año
padre
commit
890b56635c

+ 71 - 0
src/views/group/classroom/api.ts

@@ -0,0 +1,71 @@
+import { request } from '@/service/request';
+
+export interface QueryParams {
+  id?: number;
+  name?: string;
+  managerId?: number;
+  address?: string;
+  manager?: string;
+  floor?: number;
+  capacity?: number;
+  comment?: string;
+  disabled?: string;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+}
+
+export interface QueryRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+  total: number;
+}
+
+export interface UserList {
+  [index: string]: string;
+}
+
+export interface UserParams {
+  id: number;
+  username?: string;
+  passwd?: string;
+  email?: string;
+  relname: string;
+  phone?: string;
+  address?: string;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+export function editRequest(params: QueryParams): Promise<Service.RequestResult<QueryParams>> {
+  return request.put(`/classroom/update`, params);
+}
+
+export function pageRequest(
+  pageNum: number,
+  pageSize: number,
+  params: QueryParams
+): Promise<Service.RequestResult<QueryParams>> {
+  return request.post(`/classroom/query?pageNum=${pageNum}&pageSize=${pageSize}`, params);
+}
+
+export function delRequest(id: number): Promise<Service.RequestResult<QueryRes>> {
+  return request.delete(`/classroom/delete/${id}`);
+}
+
+export function addRequest(params: QueryParams): Promise<Service.RequestResult<QueryRes>> {
+  return request.post(`/classroom/add`, params);
+}
+
+export async function queryAll(): Promise<UserList> {
+  const ret: UserList = {};
+  const respone: Service.RequestResult = await request.get(`/userinfo/queryAll`);
+  respone.data?.map((result: UserParams) => {
+    ret[result.id] = result.relname;
+    return result;
+  });
+  return ret;
+}

+ 236 - 0
src/views/group/classroom/crud.ts

@@ -0,0 +1,236 @@
+import type { CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { dict } from '@fast-crud/fast-crud';
+import _ from 'lodash';
+import { isString } from '~/src/utils';
+import type { UserList } from './api';
+import { addRequest, delRequest, editRequest, pageRequest, queryAll } from './api';
+const userList: UserList = await queryAll();
+const dictOpt = {
+  url: '/userinfo/queryAll',
+  label: 'relname',
+  value: 'id'
+};
+function curd(): CreateCrudOptionsRet {
+  return {
+    crudOptions: {
+      container: {
+        is: 'fs-layout-card'
+      },
+      request: {
+        pageRequest: async ({ page, query }) => {
+          const { total, data } = await pageRequest(page.offset + 1, page.limit, query);
+          return { records: data, total, currentPage: page.offset, pageSize: page.limit };
+        },
+        addRequest: ({ form }) => {
+          return addRequest(form);
+        },
+        editRequest: ({ form }) => {
+          editRequest(form);
+        },
+        delRequest: ({ row }) => {
+          return delRequest(row.id);
+        }
+      },
+      toolbar: {
+        show: true
+      },
+      actionbar: {
+        show: true,
+        buttons: {
+          add: {
+            text: '新增班级',
+            title: '使用表单新增班级',
+            circle: false,
+            tooltip: {
+              slots: {
+                default() {
+                  return '使用表单新增班级';
+                }
+              }
+            }
+          }
+        }
+      },
+      form: {
+        beforeSubmit: context => {
+          if (isString(context.form.createUid)) {
+            context.form.createUid = null;
+          }
+          if (isString(context.form.managerId)) {
+            context.form.managerId = null;
+          }
+          return true;
+        }
+      },
+      columns: {
+        id: {
+          title: '教室ID',
+          type: 'text',
+          search: { show: true },
+          form: {
+            show: false
+          },
+          column: {
+            resizable: true,
+            width: 60,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        name: {
+          title: '教室名称',
+          type: 'text',
+          search: {
+            title: '名称',
+            show: true
+          },
+          column: {
+            resizable: true,
+            width: 60,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        address: {
+          title: '教室地址',
+          type: 'text',
+          search: {
+            title: '地址',
+            show: true
+          },
+          column: {
+            resizable: true,
+            width: 110,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        floor: {
+          title: '楼层',
+          type: 'text',
+          search: {
+            title: '楼层',
+            show: true
+          },
+          column: {
+            resizable: true,
+            width: 30,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        capacity: {
+          title: '容量',
+          type: 'number',
+          search: {
+            title: '容量',
+            show: false
+          },
+          column: {
+            resizable: true,
+            width: 30,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        comment: {
+          title: '备注信息',
+          type: 'text',
+          search: {
+            title: '容量',
+            show: false
+          },
+          column: {
+            resizable: true,
+            width: 130,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        createUid: {
+          title: '创建用户',
+          type: 'text',
+          valueBuilder(context) {
+            if (userList[context.row.createUid]) {
+              context.row.createUid = userList[context.row.createUid];
+            }
+          },
+          form: {
+            component: {
+              name: 'fs-dict-select',
+              dict: dict(dictOpt)
+            }
+          },
+          search: { show: false },
+          column: {
+            resizable: true,
+            width: 90,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        managerId: {
+          title: '负责人',
+          type: 'text',
+          valueBuilder(context) {
+            if (userList[context.row.managerId]) {
+              context.row.managerId = userList[context.row.managerId];
+            }
+          },
+          form: {
+            component: {
+              name: 'fs-dict-select',
+              dict: dict(dictOpt)
+            }
+          },
+          search: { show: false },
+          column: {
+            resizable: true,
+            width: 90,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        modifyTime: {
+          title: '更新时间',
+          type: 'easDateTime',
+          search: { show: false },
+          form: { show: false },
+          column: {
+            resizable: true,
+            width: 110,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        createTime: {
+          title: '创建时间',
+          type: 'easDateTime',
+          search: { show: true },
+          form: { show: false },
+          column: {
+            resizable: true,
+            width: 110,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        disabled: {
+          title: '状态',
+          type: 'dict-select',
+          dict: dict({
+            data: [
+              { value: 'N', label: '启用中' },
+              { value: 'Y', label: '已禁用' }
+            ]
+          }),
+          column: {
+            resizable: true,
+            width: 80
+          }
+        }
+      }
+    }
+  };
+}
+export default curd;

+ 19 - 0
src/views/group/classroom/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="h-full bg-white">
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions from './crud';
+
+const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions });
+
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+</script>
+
+<style scoped></style>

+ 124 - 0
src/views/group/group/api.ts

@@ -0,0 +1,124 @@
+import { request } from '@/service/request';
+
+// 参数接口
+export interface SelectConditionParams {
+  id?: number;
+  name?: string;
+  manageId?: number;
+  assistantId?: number;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+export interface QueryParams {
+  id: number;
+  username?: string;
+  passwd?: string;
+  email?: string;
+  relname: string;
+  phone?: string;
+  address?: string;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+export interface AddClassRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+  code: number;
+}
+
+export interface UserList {
+  [index: string]: string;
+}
+
+export function editRequest(params: SelectConditionParams): Promise<Service.RequestResult<SelectConditionParams>> {
+  return request.put(`/class/updateClass`, params);
+}
+
+export function pageRequest(
+  pageNum: number,
+  pageSize: number,
+  params: SelectConditionParams
+): Promise<Service.RequestResult<AddClassRes>> {
+  return request.post(`/class/selectCondition?pageNum=${pageNum}&pageSize=${pageSize}`, params);
+}
+
+export function delRequest(id: number): Promise<Service.RequestResult<AddClassRes>> {
+  return request.delete(`/class/deleteClass/${id}`);
+}
+
+export function addRequest(params: SelectConditionParams): Promise<Service.RequestResult<AddClassRes>> {
+  return request.post(`/class/addClass`, params);
+}
+
+export async function queryAll(): Promise<UserList> {
+  const ret: UserList = {};
+  const respone: Service.RequestResult = await request.get(`/userinfo/queryAll`);
+  respone.data?.map((result: QueryParams) => {
+    ret[result.id] = result.relname;
+    return result;
+  });
+  return ret;
+}
+
+/**
+ * 查询所有的班级类
+ * @param {string} classId
+ * @returns
+ */
+export function queryClassStudentById(classId: number): Promise<Service.RequestResult<ClassStudentParams[]>> {
+  return request.get(`/class/queryClassStudentByGroupId/${classId}`);
+}
+
+export interface ClassStudentParams {
+  studentId: number;
+}
+export interface StudentRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+  code: number;
+}
+
+export interface StudentParams {
+  id?: number;
+  archiveNumber?: string;
+  studentNumber?: string;
+  studentName?: string;
+  gender?: string;
+  birthdate?: Record<string, unknown>;
+  address?: string;
+  phone?: string;
+  email?: string;
+  enrollmentDate?: Record<string, unknown>;
+  graduationDate?: Record<string, unknown>;
+  grade?: number;
+  major?: string;
+  minor?: string;
+  university?: string;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  admissionsId?: number;
+  managerId?: number;
+  createUid?: number;
+  studentIdnumber?: string;
+}
+
+export interface labelTransfer {
+  label?: string;
+  value?: number;
+}
+
+export function getAll(): Promise<Service.RequestResult<StudentParams[]>> {
+  return request.get(`/student/getAll`);
+}
+
+export function submitGroupStudentForm(groupId: number, params?: number[]): Promise<Service.RequestResult<StudentRes>> {
+  return request.post(`/class/groupStudent/${groupId}`, params);
+}

+ 232 - 0
src/views/group/group/crud.ts

@@ -0,0 +1,232 @@
+import type { CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { dict } from '@fast-crud/fast-crud';
+import _ from 'lodash';
+import { isString } from '~/src/utils';
+import type { UserList } from './api';
+import { addRequest, delRequest, editRequest, pageRequest, queryAll } from './api';
+const userList: UserList = await queryAll();
+const dictOpt = {
+  url: '/userinfo/queryAll',
+  label: 'relname',
+  value: 'id'
+};
+function curd({ context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const openModel = context?.openModel;
+  const goToSchedule = context?.goToSchedule;
+  const goToCalendar = context?.goToCalendar;
+  return {
+    crudOptions: {
+      container: {
+        is: 'fs-layout-card'
+      },
+      request: {
+        pageRequest: async ({ page, query }) => {
+          const { total, data } = await pageRequest(page.offset + 1, page.limit, query);
+          return { records: data, total, currentPage: page.offset, pageSize: page.limit };
+        },
+        addRequest: ({ form }) => {
+          return addRequest(form);
+        },
+        editRequest: ({ form }) => {
+          editRequest(form);
+        },
+        delRequest: ({ row }) => {
+          return delRequest(row.id);
+        }
+      },
+      toolbar: {
+        show: true
+      },
+      actionbar: {
+        show: true,
+        buttons: {
+          add: {
+            text: '新增班级',
+            title: '使用表单新增班级',
+            circle: false,
+            tooltip: {
+              slots: {
+                default() {
+                  return '使用表单新增班级';
+                }
+              }
+            }
+          }
+        }
+      },
+      form: {
+        beforeSubmit: localContext => {
+          if (isString(localContext.form.createUid)) {
+            localContext.form.createUid = null;
+          }
+          if (isString(localContext.form.manageId)) {
+            localContext.form.manageId = null;
+          }
+          return true;
+        }
+      },
+      columns: {
+        id: {
+          title: '班级ID',
+          type: 'text',
+          search: { show: true },
+          form: {
+            show: false
+          },
+          column: {
+            resizable: true,
+            width: 120,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        name: {
+          title: '班级名称',
+          type: 'text',
+          search: {
+            title: '名称',
+            show: true
+          },
+          column: {
+            resizable: true,
+            width: 60,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        createUid: {
+          title: '创建用户',
+          type: 'text',
+          valueBuilder(localContext) {
+            if (userList[localContext.row.createUid]) {
+              localContext.row.createUid = userList[localContext.row.createUid];
+            }
+          },
+          form: {
+            component: {
+              name: 'fs-dict-select',
+              dict: dict(dictOpt)
+            }
+          },
+          search: { show: false },
+          column: {
+            resizable: true,
+            width: 90,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        manageId: {
+          title: '负责人',
+          type: 'text',
+          valueBuilder(localContext) {
+            if (userList[localContext.row.manageId]) {
+              localContext.row.manageId = userList[localContext.row.manageId];
+            }
+          },
+          form: {
+            component: {
+              name: 'fs-dict-select',
+              dict: dict(dictOpt)
+            }
+          },
+          search: { show: false },
+          column: {
+            resizable: true,
+            width: 90,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        modifyTime: {
+          title: '更新时间',
+          type: 'easDateTime',
+          search: { show: false },
+          form: { show: false },
+          column: {
+            resizable: true,
+            width: 110,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        createTime: {
+          title: '创建时间',
+          type: 'easDateTime',
+          search: { show: true },
+          form: { show: false },
+          column: {
+            resizable: true,
+            width: 110,
+            align: 'center',
+            fixed: 'left'
+          }
+        },
+        disabled: {
+          title: '状态',
+          type: 'dict-select',
+          dict: dict({
+            data: [
+              { value: 'N', label: '启用中' },
+              { value: 'Y', label: '已禁用' }
+            ]
+          }),
+          column: {
+            resizable: true,
+            width: 80
+          }
+        }
+      },
+      rowHandle: {
+        buttons: {
+          studentManager: {
+            text: null,
+            size: 'small',
+            icon: 'raphael:people',
+            tooltip: {
+              slots: {
+                default() {
+                  return '管理学员';
+                }
+              }
+            },
+            click: ({ row }) => {
+              openModel(row.id);
+            }
+          },
+          schedule: {
+            text: null,
+            size: 'small',
+            icon: 'uil:schedule',
+            tooltip: {
+              slots: {
+                default() {
+                  return '查看排课计划';
+                }
+              }
+            },
+            click: ({ row }) => {
+              goToSchedule(row.id);
+            }
+          },
+          calendar: {
+            text: null,
+            size: 'small',
+            icon: 'ph:calendar-fill',
+            tooltip: {
+              slots: {
+                default() {
+                  return '查看排课日历';
+                }
+              }
+            },
+            click: ({ row }) => {
+              goToCalendar(row.id);
+            }
+          }
+        }
+      }
+    }
+  };
+}
+export default curd;

+ 72 - 0
src/views/group/group/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="h-full bg-white">
+    <fs-crud v-if="!pageType" ref="crudRef" v-bind="crudBinding" />
+    <div v-if="pageType" class="wh-full flex-col-center">
+      <n-card style="width: 1200px" title="编辑班级学员" :bordered="false" size="huge" role="dialog" aria-modal="true">
+        <n-transfer ref="transfer" v-model:value="classStuList" :options="studentsAll" virtual-scroll />
+        <n-button-group style="margin-top: 1rem; float: right">
+          <n-button type="primary" @click="submitGroupStudent">提交</n-button>
+          <n-button type="primary" @click="pageType = !pageType">取消</n-button>
+        </n-button-group>
+      </n-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import type { Option, OptionValue } from 'naive-ui/es/transfer/src/interface';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions from './crud';
+import { queryClassStudentById, getAll, submitGroupStudentForm } from './api';
+const pageType = ref<boolean>(false);
+const classStuList = ref<number[] | undefined>([]);
+const studentsAll = ref<Option[]>();
+const groupId = ref<number>(0);
+const router = useRouter();
+async function submitGroupStudent() {
+  await submitGroupStudentForm(groupId.value, classStuList.value);
+  window.$message?.success('操作成功!');
+  pageType.value = !pageType.value;
+}
+const context: any = {
+  goToSchedule: (classId: number) => {
+    router.push({
+      path: '/lesson/schedule',
+      query: {
+        classId
+      }
+    });
+  },
+  openModel: async (classId: number) => {
+    groupId.value = classId;
+    const classStudent = await queryClassStudentById(classId);
+    const studentAll = await getAll();
+    classStuList.value = classStudent.data?.map(r => r.studentId);
+    studentsAll.value = studentAll.data?.map(r => {
+      return {
+        label: r.studentName ? r.studentName + r.phone : '',
+        value: (r.id ?? 0) as OptionValue,
+        disabled: false
+      };
+    });
+    pageType.value = true;
+  },
+  goToCalendar: (classId: number) => {
+    router.push({
+      path: '/lesson/calendar',
+      query: {
+        classId
+      }
+    });
+  }
+};
+const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });
+
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+</script>
+
+<style scoped></style>

+ 76 - 0
src/views/group/student/api.ts

@@ -0,0 +1,76 @@
+import { request } from '@/service/request';
+
+interface EasStudentQuery {
+  avatar?: string;
+  enrollmentDate?: Date | null;
+  gender?: string | null;
+  managerId?: number | null;
+  phone?: string | null;
+  studentName?: string | null;
+  studentId?: number | null;
+  admissionsId?: number | null;
+  type?: string | null;
+  admissionsName?: string | null;
+  managerName?: string | null;
+  groupId?: number | null;
+}
+
+interface GroupStudentsPojo {
+  studentId: number;
+  studentName: string;
+  avatar: string;
+  studentNumber: string;
+  managerName: string;
+  phone: string;
+  email: string;
+  gender: string;
+  enrollmentDate: string;
+  morning?: string;
+  afternoon?: string;
+  checkinDate: Date;
+  admissionsName: string;
+  scheduleId?: number;
+  category?: string;
+  subject?: string;
+  teacher?: string;
+  teacherPhone?: string;
+  groupId?: string;
+  groupName?: string;
+}
+
+export interface SubmitGroupStudentFormRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+  code: number;
+}
+
+export function queryClassStudent(params: EasStudentQuery): Promise<Service.RequestResult<GroupStudentsPojo>> {
+  return request.post(`/class/groupStudent`, params);
+}
+
+export function submitGroupStudentDelete(rowId: number): Promise<Service.RequestResult<SubmitGroupStudentFormRes>> {
+  return request.delete(`/class/groupStudent/${rowId}`);
+}
+
+interface EasEduCltRelation {
+  id?: number;
+  classId?: number;
+  studentId?: number;
+  createTime?: Date;
+  modifyTime?: Date;
+  createUid?: number;
+  type?: string;
+}
+
+/**
+ * 更新班级学员
+ * @param {string} groupId
+ * @param {array} params integer
+ * @returns
+ */
+export function submitGroupStudentUpdate(
+  params: EasEduCltRelation
+): Promise<Service.RequestResult<SubmitGroupStudentFormRes>> {
+  return request.put(`/class/groupStudent`, params);
+}

+ 129 - 0
src/views/group/student/crud.ts

@@ -0,0 +1,129 @@
+import type { CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { dict } from '@fast-crud/fast-crud';
+import { queryClassStudent, submitGroupStudentUpdate, submitGroupStudentDelete } from './api';
+function curd(): CreateCrudOptionsRet {
+  return {
+    crudOptions: {
+      container: {
+        is: 'fs-layout-card'
+      },
+      pagination: {
+        show: false
+      },
+      request: {
+        pageRequest: async ({ page, query }) => {
+          query.groupId = 1;
+          const { data } = await queryClassStudent(query);
+          return { records: data, total: 0, currentPage: page.offset, pageSize: page.limit };
+        },
+        addRequest: () => {},
+        editRequest: ({ form }) => {
+          return submitGroupStudentUpdate(form);
+        },
+        delRequest: ({ row }) => {
+          return submitGroupStudentDelete(Number(row.id));
+        }
+      },
+      toolbar: {
+        show: true
+      },
+      actionbar: {
+        show: false
+      },
+      columns: {
+        id: {
+          title: 'ID',
+          type: 'number',
+          search: { show: false },
+          show: false
+        },
+        studentId: {
+          title: '学生ID',
+          type: 'number',
+          search: { show: true },
+          column: {
+            editable: {
+              disabled: true
+            }
+          }
+        },
+        studentName: {
+          title: '学生姓名',
+          type: 'text',
+          search: { show: true },
+          column: {
+            editable: {
+              disabled: false
+            }
+          }
+        },
+        avatar: {
+          title: '头像',
+          type: 'image'
+        },
+        studentNumber: {
+          title: '学生学号',
+          type: 'text',
+          search: { show: true }
+        },
+        managerName: {
+          title: '班主任姓名',
+          type: 'text'
+        },
+        phone: {
+          title: '手机号码',
+          type: 'text',
+          search: { show: true }
+        },
+        email: {
+          title: '电子邮箱',
+          type: 'text',
+          search: { show: true }
+        },
+        gender: {
+          title: '性别',
+          type: 'dict-select',
+          dict: dict({
+            data: [
+              { value: 'M', label: '男' },
+              { value: 'F', label: '女' }
+            ]
+          }),
+          column: {
+            resizable: true,
+            width: 50
+          },
+          search: { show: true }
+        },
+        enrollmentDate: {
+          title: '入学日期',
+          type: 'easDate'
+        },
+        type: {
+          title: '类别',
+          type: 'dict-select',
+          dict: dict({
+            data: [
+              { value: '正式', label: '正式' },
+              { value: '旁听', label: '旁听' },
+              { value: '留级', label: '留级' },
+              { value: '休学', label: '休学' },
+              { value: '暂停', label: '暂停' },
+              { value: '其他', label: '其他' }
+            ]
+          }),
+          column: {
+            resizable: true,
+            width: 60
+          },
+          search: { show: true }
+        },
+        admissionsName: {
+          title: '招生负责人',
+          type: 'text'
+        }
+      }
+    }
+  };
+}
+export default curd;

+ 19 - 0
src/views/group/student/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="h-full bg-white">
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions from './crud';
+
+const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions });
+
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+</script>
+
+<style scoped></style>