diff --git a/src/api/admin/data-contracts.ts b/src/api/admin/data-contracts.ts
index 71827b4..f1dc629 100644
--- a/src/api/admin/data-contracts.ts
+++ b/src/api/admin/data-contracts.ts
@@ -8225,3 +8225,91 @@ export interface ResultOutputBasicMediumDtoGetOutput {
   msg?: string | null;
   data?: BasicMediumDto;
 }
+
+export interface FeedMediumDto {
+  /** 培养基编号 */
+  mediumCode: string;
+  /** 培养基名称 */
+  mediumName: string;
+  /** 葡萄糖浓度 */
+  glucoseConc: number;
+  /** 是否含葡萄糖 */
+  isGlucose: boolean;
+  /** 状态 */
+  status: boolean;
+  /** 主键Id */
+  id: number;
+  /** 创建时间 */
+  createdTime: string;
+  /** 修改时间 */
+  modifiedTime: string;
+  /** 是否删除 */
+  isDeleted: boolean;
+}
+
+export interface FeedMediumDtoListServiceResponse {
+  /** 是否成功标记 */
+  success?: boolean;
+  /** 编码 */
+  code?: string | null;
+  /** 消息 */
+  msg?: string | null;
+  /** 数据 */
+  data?: FeedMediumDto[] | null;
+}
+
+export interface FeedMediumDtoServiceResponse {
+  /** 是否成功标记 */
+  success?: boolean;
+  /** 编码 */
+  code?: string | null;
+  /** 消息 */
+  msg?: string | null;
+  /** 数据 */
+  data?: FeedMediumDto | null;
+}
+
+export interface PageInputFeedMediumDtoGetPageInput {
+  dynamicFilter?: DynamicFilterInfo;
+  sortList?: SortInput[] | null;
+  currentPage?: number;
+  pageSize?: number;
+  filter?: FeedMediumDtoGetPageInput;
+}
+
+export interface FeedMediumDtoGetPageInput {
+  keyWord?: string | null;
+  stDate?: string | null;
+  edDate?: string | null;
+}
+
+export interface PageOutputFeedMediumDtoGetPageOutput {
+  total?: number;
+  list?: FeedMediumDto[] | null;
+}
+
+export interface ResultOutputPageOutputFeedMediumDtoGetPageOutput {
+  success?: boolean;
+  code?: string | null;
+  msg?: string | null;
+  data?: PageOutputFeedMediumDtoGetPageOutput;
+}
+
+export interface ResultOutputFeedMediumDtoGetOutput {
+  success?: boolean;
+  code?: string | null;
+  msg?: string | null;
+  data?: FeedMediumDto;
+}
+
+export interface FeedMediumDtoGetPageOutput {
+  id: number
+  mediumCode: string
+  mediumName: string
+  glucoseConc: number
+  isGlucose: boolean
+  status: boolean
+  createdTime: string
+  modifiedTime: string
+  isDeleted: boolean
+}
diff --git a/src/api/admin/item-def-feeding-medium.ts b/src/api/admin/item-def-feeding-medium.ts
new file mode 100644
index 0000000..c165622
--- /dev/null
+++ b/src/api/admin/item-def-feeding-medium.ts
@@ -0,0 +1,156 @@
+/* eslint-disable */
+/* tslint:disable */
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: adademo / https://github.com/adademo/swagger-typescript-api ##
+ * ## SOURCE: https://github.com/adademo/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+
+import {
+  FeedMediumDto,
+  FeedMediumDtoListServiceResponse,
+  FeedMediumDtoServiceResponse,
+  PageInputFeedMediumDtoGetPageInput,
+  ResultOutputFeedMediumDtoGetOutput,
+  ResultOutputPageOutputFeedMediumDtoGetPageOutput,
+  ResultOutputInt64,
+} from './data-contracts'
+import { ContentType, HttpClient, RequestParams } from './http-client'
+import { AxiosResponse } from 'axios'
+
+export class ItemDefFeedingMediumApi<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
+  /**
+   * No description
+   *
+   * @tags feeding-medium
+   * @name Get
+   * @summary 获取补料培养基详情
+   * @request GET:/api/admin/item-def-feeding-medium/get
+   * @secure
+   */
+  get = (
+    query?: {
+      /** @format int64 */
+      id?: number
+    },
+    params: RequestParams = {}
+  ) =>
+    this.request<ResultOutputFeedMediumDtoGetOutput, any>({
+      path: `/api/admin/item-def-feeding-medium/get`,
+      method: 'GET',
+      query: query,
+      secure: true,
+      format: 'json',
+      ...params,
+    })
+
+  /**
+   * No description
+   *
+   * @tags feeding-medium
+   * @name GetPage
+   * @summary 获取补料培养基分页列表
+   * @request POST:/api/admin/item-def-feeding-medium/get-page
+   * @secure
+   */
+  getPage = (data: PageInputFeedMediumDtoGetPageInput, params: RequestParams = {}) =>
+    this.request<ResultOutputPageOutputFeedMediumDtoGetPageOutput, any>({
+      path: `/api/admin/item-def-feeding-medium/get-page`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+      ...params,
+    })
+
+  /**
+   * No description
+   *
+   * @tags feeding-medium
+   * @name Add
+   * @summary 新增补料培养基
+   * @request POST:/api/admin/item-def-feeding-medium/add
+   * @secure
+   */
+  add = (data: FeedMediumDto, params: RequestParams = {}) =>
+    this.request<ResultOutputInt64, any>({
+      path: `/api/admin/item-def-feeding-medium/add`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+      ...params,
+    })
+
+  /**
+   * No description
+   *
+   * @tags feeding-medium
+   * @name Update
+   * @summary 修改补料培养基
+   * @request PUT:/api/admin/item-def-feeding-medium/update
+   * @secure
+   */
+  update = (data: FeedMediumDto, params: RequestParams = {}) =>
+    this.request<AxiosResponse, any>({
+      path: `/api/admin/item-def-feeding-medium/update`,
+      method: 'PUT',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      ...params,
+    })
+
+  /**
+   * No description
+   *
+   * @tags feeding-medium
+   * @name Delete
+   * @summary 彻底删除补料培养基
+   * @request DELETE:/api/admin/item-def-feeding-medium/delete
+   * @secure
+   */
+  delete = (
+    query?: {
+      /** @format int64 */
+      id?: number
+    },
+    params: RequestParams = {}
+  ) =>
+    this.request<AxiosResponse, any>({
+      path: `/api/admin/item-def-feeding-medium/delete`,
+      method: 'DELETE',
+      query: query,
+      secure: true,
+      ...params,
+    })
+
+  /**
+   * No description
+   *
+   * @tags feeding-medium
+   * @name SoftDelete
+   * @summary 删除补料培养基
+   * @request DELETE:/api/admin/item-def-feeding-medium/soft-delete
+   * @secure
+   */
+  softDelete = (
+    query?: {
+      /** @format int64 */
+      id?: number
+    },
+    params: RequestParams = {}
+  ) =>
+    this.request<AxiosResponse, any>({
+      path: `/api/admin/item-def-feeding-medium/soft-delete`,
+      method: 'DELETE',
+      query: query,
+      secure: true,
+      ...params,
+    })
+}
diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts
index f77caed..9dfbd38 100644
--- a/src/utils/mitt.ts
+++ b/src/utils/mitt.ts
@@ -6,3 +6,10 @@ const emitter: Emitter<MittType> = mitt<MittType>()
 
 // 导出
 export default emitter
+
+export interface MittType {
+  // ... existing code ...
+  refreshFeedMedium: void
+  refreshBasicMedium: void
+  // ... existing code ...
+}
diff --git a/src/views/admin/basicliquid/components/BasicMediumForm.vue b/src/views/admin/basicliquid/components/BasicMediumForm.vue
new file mode 100644
index 0000000..98a1c1c
--- /dev/null
+++ b/src/views/admin/basicliquid/components/BasicMediumForm.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="title"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent
+    >
+      <el-form-item label="培养基编号" prop="mediumCode">
+        <el-input v-model="form.mediumCode" placeholder="请输入培养基编号" />
+      </el-form-item>
+      <el-form-item label="培养基名称" prop="mediumName">
+        <el-input v-model="form.mediumName" placeholder="请输入培养基名称" />
+      </el-form-item>
+      <el-form-item label="葡萄糖浓度" prop="glucoseConc">
+        <el-input-number v-model="form.glucoseConc" :min="0" :precision="2" :step="0.1" />
+      </el-form-item>
+      <el-form-item label="是否含葡萄糖" prop="isGlucose">
+        <el-switch v-model="form.isGlucose" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="form.status" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { BasicMediumDto } from '/@/api/admin/data-contracts'
+import { ItemDefBasicMediumApi } from '/@/api/admin/item-def-basic-medium'
+import eventBus from '/@/utils/mitt'
+
+const props = defineProps<{
+  title: string
+}>()
+
+const dialogVisible = ref(false)
+const formRef = ref<FormInstance>()
+
+const form = reactive<Partial<BasicMediumDto>>({
+  mediumCode: '',
+  mediumName: '',
+  glucoseConc: 0,
+  isGlucose: true,
+  status: true
+})
+
+const rules = {
+  mediumCode: [{ required: true, message: '请输入培养基编号', trigger: 'blur' }],
+  mediumName: [{ required: true, message: '请输入培养基名称', trigger: 'blur' }],
+  glucoseConc: [{ required: true, message: '请输入葡萄糖浓度', trigger: 'blur' }],
+  isGlucose: [{ required: true, message: '请选择是否含葡萄糖', trigger: 'change' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+}
+
+const open = (data?: Partial<BasicMediumDto>) => {
+  dialogVisible.value = true
+  if (data) {
+    Object.assign(form, data)
+  } else {
+    Object.assign(form, {
+      mediumCode: '',
+      mediumName: '',
+      glucoseConc: 0,
+      isGlucose: true,
+      status: true
+    })
+  }
+}
+
+const submitForm = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        if (form.id) {
+          await new ItemDefBasicMediumApi().update(form as BasicMediumDto)
+          ElMessage.success('修改成功')
+        } else {
+          await new ItemDefBasicMediumApi().add(form as BasicMediumDto)
+          ElMessage.success('添加成功')
+        }
+        dialogVisible.value = false
+        eventBus.emit('refreshBasicMedium')
+      } catch (error) {
+        console.error('提交失败:', error)
+        ElMessage.error('提交失败')
+      }
+    }
+  })
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/admin/basicliquid/index.vue b/src/views/admin/basicliquid/index.vue
index da7a8b7..2113b86 100644
--- a/src/views/admin/basicliquid/index.vue
+++ b/src/views/admin/basicliquid/index.vue
@@ -32,7 +32,7 @@
       </el-form>
     </el-card>
 
-    <el-card class="my-fill" shadow="never">
+    <el-card class="my-fill mt8" shadow="never">
       <div class="my-tools-box mb8 my-flex my-flex-between">
         <div>
         </div>
@@ -84,9 +84,9 @@
           :page-sizes="[10, 20, 50, 100]"
           size="small"
           background
-          layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
+          layout="total, sizes, prev, pager, next, jumper"
         />
       </div>
     </el-card>
diff --git a/src/views/admin/feedliquid/components/FeedingMediumForm.vue b/src/views/admin/feedliquid/components/FeedingMediumForm.vue
new file mode 100644
index 0000000..c7263d5
--- /dev/null
+++ b/src/views/admin/feedliquid/components/FeedingMediumForm.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="title"
+    width="500px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="180px"
+      @submit.prevent
+    >
+      <el-form-item label="培养基编号" prop="mediumCode">
+        <el-input v-model="form.mediumCode" placeholder="请输入培养基编号" />
+      </el-form-item>
+      <el-form-item label="培养基名称" prop="mediumName">
+        <el-input v-model="form.mediumName" placeholder="请输入培养基名称" />
+      </el-form-item>
+      <el-form-item label="补料培养基含糖浓度(g/L)" prop="glucoseConc">
+        <el-input-number v-model="form.glucoseConc" :min="0" :precision="2" :step="0.1" />
+      </el-form-item>
+      <el-form-item label="是否含葡萄糖" prop="isGlucose">
+        <el-switch v-model="form.isGlucose" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="form.status" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { FeedMediumDto } from '/@/api/admin/data-contracts'
+import { ItemDefFeedingMediumApi } from '/@/api/admin/item-def-feeding-medium'
+import eventBus from '/@/utils/mitt'
+
+const props = defineProps<{
+  title: string
+}>()
+
+const dialogVisible = ref(false)
+const formRef = ref<FormInstance>()
+
+const form = reactive<Partial<FeedMediumDto>>({
+  mediumCode: '',
+  mediumName: '',
+  glucoseConc: 0,
+  isGlucose: true,
+  status: true
+})
+
+const rules = {
+  mediumCode: [{ required: true, message: '请输入培养基编号', trigger: 'blur' }],
+  mediumName: [{ required: true, message: '请输入培养基名称', trigger: 'blur' }],
+  glucoseConc: [{ required: true, message: '请输入葡萄糖浓度', trigger: 'blur' }],
+  isGlucose: [{ required: true, message: '请选择是否含葡萄糖', trigger: 'change' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+}
+
+const open = (data?: Partial<FeedMediumDto>) => {
+  dialogVisible.value = true
+  if (data) {
+    Object.assign(form, data)
+  } else {
+    Object.assign(form, {
+      mediumCode: '',
+      mediumName: '',
+      glucoseConc: 0,
+      isGlucose: true,
+      status: true
+    })
+  }
+}
+
+const submitForm = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        if (form.id) {
+          await new ItemDefFeedingMediumApi().update(form as FeedMediumDto)
+          ElMessage.success('修改成功')
+        } else {
+          await new ItemDefFeedingMediumApi().add(form as FeedMediumDto)
+          ElMessage.success('添加成功')
+        }
+        dialogVisible.value = false
+        eventBus.emit('refreshFeedMedium')
+      } catch (error) {
+        console.error('提交失败:', error)
+        ElMessage.error('提交失败')
+      }
+    }
+  })
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style lang="scss" scoped>
+.el-input-number {
+  width: 180px;
+}
+</style>
diff --git a/src/views/admin/feedliquid/index.vue b/src/views/admin/feedliquid/index.vue
new file mode 100644
index 0000000..23acc57
--- /dev/null
+++ b/src/views/admin/feedliquid/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <MyLayout>
+    <el-card v-show="state.showQuery" class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
+      <el-form :inline="true" label-width="auto" @submit.stop.prevent>
+        <el-form-item label="关键词">
+          <el-input v-model="state.filter.keyWord" placeholder="培养基编号、培养基名称" @keyup.enter="onQuery" />
+        </el-form-item>
+        <el-form-item label="开始时间">
+          <el-date-picker
+            v-model="state.filter.stDate"
+            type="datetime"
+            placeholder="选择开始时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <el-date-picker
+            v-model="state.filter.edDate"
+            type="datetime"
+            placeholder="选择结束时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 180px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+          <el-button v-auth="'api:admin:item-def-feeding-medium:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="my-fill mt8" shadow="never">
+      <div class="my-tools-box mb8 my-flex my-flex-between">
+        <div>
+        </div>
+      </div>
+      <el-table
+        v-if="state.showFeedMediumList"
+        :data="state.feedMediumListData"
+        style="width: 100%"
+        v-loading="state.loading"
+        border
+      >
+        <el-table-column prop="mediumCode" label="培养基编号" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="mediumName" label="培养基名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="glucoseConc" label="补料培养基含糖浓度(g/L)" min-width="120" show-overflow-tooltip />
+        <el-table-column label="是否含葡萄糖" width="120" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.isGlucose">是</el-tag>
+            <el-tag type="danger" v-else>否</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.status">启用</el-tag>
+            <el-tag type="danger" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdTime" label="创建时间" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="modifiedTime" label="修改时间" min-width="200" show-overflow-tooltip />
+        <el-table-column label="操作" width="200" fixed="right" header-align="center" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="auth('api:admin:item-def-feeding-medium:update')"
+              icon="ele-EditPen"
+              size="small"
+              text
+              type="primary"
+              @click="onEdit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="auth('api:admin:item-def-feeding-medium:soft-delete')"
+              icon="ele-Delete"
+              size="small"
+              text
+              type="danger"
+              @click="onDelete(row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="my-flex my-flex-end" style="margin-top: 10px">
+        <el-pagination
+          v-model:currentPage="state.pageInput.currentPage"
+          v-model:page-size="state.pageInput.pageSize"
+          :total="state.total"
+          :page-sizes="[10, 20, 50, 100]"
+          size="small"
+          background
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+
+    <feeding-medium-form ref="feedingMediumFormRef" :title="state.feedingMediumFormTitle"></feeding-medium-form>
+  </MyLayout>
+</template>
+
+<script lang="ts" setup name="admin/feedliquid">
+import { ref, reactive, onMounted, getCurrentInstance, onBeforeMount, defineAsyncComponent } from 'vue'
+import { FeedMediumDto, PageInputFeedMediumDtoGetPageInput, FeedMediumDtoGetPageOutput } from '/@/api/admin/data-contracts'
+import { ItemDefFeedingMediumApi } from '/@/api/admin/item-def-feeding-medium'
+import eventBus from '/@/utils/mitt'
+import { auth } from '/@/utils/authFunction'
+
+// 引入组件
+const FeedingMediumForm = defineAsyncComponent(() => import('./components/FeedingMediumForm.vue'))
+
+const { proxy } = getCurrentInstance() as any
+
+const feedingMediumFormRef = ref()
+
+const state = reactive({
+  loading: false,
+  feedingMediumFormTitle: '',
+  filter: {
+    keyWord: '',
+    stDate: '',
+    edDate: ''
+  },
+  total: 0,
+  pageInput: {
+    currentPage: 1,
+    pageSize: 20,
+  } as PageInputFeedMediumDtoGetPageInput,
+  feedMediumListData: [] as Array<FeedMediumDto>,
+  showQuery: true,
+  showFeedMediumList: true,
+})
+
+onMounted(() => {
+  Query()
+  eventBus.off('refreshFeedMedium')
+  eventBus.on('refreshFeedMedium', () => {
+    Query()
+  })
+})
+
+onBeforeMount(() => {
+  eventBus.off('refreshFeedMedium')
+})
+
+const onChangeFeedMediumList = () => {
+  state.showFeedMediumList = !state.showFeedMediumList
+  if (state.showFeedMediumList) {
+    Query()
+  }
+}
+
+const onQuery = () => {
+  Query()
+}
+
+const Query = async () => {
+  state.loading = true
+  state.pageInput.filter = state.filter
+  const res = await new ItemDefFeedingMediumApi().getPage(state.pageInput).catch(() => {
+    state.loading = false
+  })
+
+  state.feedMediumListData = res?.data?.list ?? []
+  state.total = res?.data?.total ?? 0
+  state.loading = false
+}
+
+const onAdd = () => {
+  state.feedingMediumFormTitle = '新增补料培养基'
+  feedingMediumFormRef.value.open({
+    id: 0,
+    mediumCode: '',
+    mediumName: '',
+    glucoseConc: 0,
+    isGlucose: true,
+    status: true,
+    createdTime: '',
+    modifiedTime: '',
+    isDeleted: false
+  })
+}
+
+const onEdit = (row: FeedMediumDto) => {
+  state.feedingMediumFormTitle = '编辑补料培养基'
+  feedingMediumFormRef.value.open(row)
+}
+
+const onDelete = (row: FeedMediumDto) => {
+  proxy.$modal
+    .confirmDelete(`确定要删除补料培养基【${row.mediumName}】?`)
+    .then(async () => {
+      await new ItemDefFeedingMediumApi().softDelete({ id: row.id }, { loading: true })
+      Query()
+    })
+    .catch(() => {})
+}
+
+const onSizeChange = (val: number) => {
+  state.pageInput.currentPage = 1
+  state.pageInput.pageSize = val
+  onQuery()
+}
+
+const onCurrentChange = (val: number) => {
+  state.pageInput.currentPage = val
+  onQuery()
+}
+</script>
+
+<style lang="scss" scoped>
+.my-query-box {
+  :deep(.el-form-item) {
+    margin-bottom: 16px;
+  }
+}
+
+.my-fill {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.my-tools-box {
+  margin-bottom: 16px;
+}
+
+.my-flex {
+  display: flex;
+}
+
+.my-flex-between {
+  justify-content: space-between;
+}
+
+.my-flex-end {
+  justify-content: flex-end;
+}
+
+.mt8 {
+  margin-top: 8px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+</style>