diff --git a/yardbook-web/src/views/yard/book/BookModal.vue b/yardbook-web/src/views/yard/book/BookModal.vue
new file mode 100644
index 0000000..9b8f108
--- /dev/null
+++ b/yardbook-web/src/views/yard/book/BookModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :useWrapper="true"
+    :title="getTitle"
+    :width="1100"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './columns';
+
+  import { editBook } from '/@/api/yard/book';
+
+  const isUpdate = ref(true);
+
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+
+    if (unref(isUpdate)) {
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增预约' : '编辑预约'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      console.log(values);
+      const res: API.DataResult = await editBook(values);
+      console.log(res);
+      if (res.succeeded) {
+      } else {
+      }
+      closeModal();
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/yardbook-web/src/views/yard/book/columns.tsx b/yardbook-web/src/views/yard/book/columns.tsx
index 0f4ac2a..2cc65f9 100644
--- a/yardbook-web/src/views/yard/book/columns.tsx
+++ b/yardbook-web/src/views/yard/book/columns.tsx
@@ -158,3 +158,107 @@ export const searchFormSchema: FormSchema[] = [
   //   },
   // },
 ];
+export const formSchema: FormSchema[] = [
+  {
+    field: 'divider-selects',
+    component: 'Divider',
+    label: '基本信息',
+  },
+  {
+    label: '',
+    field: 'gid',
+    component: 'Input',
+    defaultValue: '',
+    show: false,
+  },
+  {
+    field: 'customername',
+    label: '委托单位',
+    component: 'Input',
+    required: true,
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'businessType',
+    label: '业务类型',
+    component: 'Select',
+    required: true,
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'enterdate',
+    label: '预计日期',
+    component: 'DatePicker',
+    required: true,
+    colProps: {
+      span: 8,
+    },
+  },
+  {
+    field: 'truckno',
+    label: '承运车号',
+    component: 'Input',
+    required: true,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'boxCode',
+    label: '箱号',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'goodname',
+    label: '货物名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'boxType',
+    label: '箱型',
+    component: 'Select',
+    required: true,
+    colProps: { span: 8 },
+  },
+  {
+    field: 'linkTel',
+    label: '联系电话',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'boxWeigth',
+    label: '车重(kg)',
+    component: 'InputNumber',
+    colProps: { span: 8 },
+    helpMessage: ['存箱请填写车重+货重'],
+  },
+  {
+    field: 'isTwoBox',
+    label: '是否双背',
+    component: 'Switch',
+    colProps: { span: 8 },
+    helpMessage: ['只有在董家镇卸两个箱才勾选，卸一个箱不勾选'],
+  },
+  {
+    field: 'bsno',
+    label: '流水号',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'divider-selects',
+    component: 'Divider',
+    label: '装箱资料',
+    helpMessage: ['只能上传jpg/png/bmp/jpeg/bmp文件，且不超过3M'],
+  },
+  // {
+  //   field: 'remark',
+  //   label: '备注',
+  //   component: 'InputTextArea',
+  // },
+];
diff --git a/yardbook-web/src/views/yard/book/index.vue b/yardbook-web/src/views/yard/book/index.vue
index a723a79..26a2baa 100644
--- a/yardbook-web/src/views/yard/book/index.vue
+++ b/yardbook-web/src/views/yard/book/index.vue
@@ -16,22 +16,21 @@
         />
       </template>
     </BasicTable>
+    <BookModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { defineComponent, onMounted, ref } from 'vue';
-  import {BasicTable, useTable, TableAction, SorterResult} from '/@/components/Table';
+  import { onMounted, ref } from 'vue';
+  import { BasicTable, useTable, TableAction, SorterResult } from '/@/components/Table';
   import { getYardBookList } from '/@/api/yard/book';
   import { useModal } from '/@/components/Modal';
-  // import DictTypeModal from './DictTypeModal.vue';
-  // import DictDataModal from './DictDataModal.vue';
+  import BookModal from './BookModal.vue';
   import { columns, searchFormSchema } from './columns';
   // const total = ref(0);
   let sortInfo: SorterResult = {};
   let filterInfo: Partial<Recordable<string[]>> = [];
   const dictOptions = ref<any[]>([]);
   const [registerModal, { openModal }] = useModal();
-  const [registerDetailModal, { openModal: openDetailModal }] = useModal();
   const [registerTable, { reload, getForm, getPaginationRef, getSelectRowKeys }] = useTable({
     title: '预约列表',
     api: async (p) => {
@@ -107,14 +106,6 @@
           ConditionalType: 5,
         });
       }
-      // if (!!data.AuditStatus) {
-      //   condition.push({
-      //     FieldName: 'AuditStatus',
-      //     FieldValue: data.AuditStatus,
-      //     ConditionalType: 1,
-      //   });
-      // }
-
       /* 筛选字段 */
       if (filterInfo === null) {
       } else {
@@ -197,6 +188,10 @@
   function handlePrint() {
     console.log(getSelectRowKeys());
   }
+
+  function handleSuccess() {
+    reload();
+  }
   onMounted(() => {
     //初始化字典选项
     // initDictConfig();