diff --git a/apps/production/views.py b/apps/production/views.py
index 01bdabb..e3c471c 100644
--- a/apps/production/views.py
+++ b/apps/production/views.py
@@ -93,10 +93,11 @@ class ProductionRecordViewSet(BaseViewSet, ListModelMixin, RetrieveModelMixin, C
         if production_order.remain_quantity < production_quantity:
             raise ValidationError('生产数量错误')
 
+        production_order.quantity_produced = NP.plus(production_order.quantity_produced, production_quantity)
         production_order.remain_quantity = NP.minus(production_order.remain_quantity, production_quantity)
         if production_order.remain_quantity == 0:
             production_order.status = ProductionOrder.Status.COMPLETED
-        production_order.save(update_fields=['remain_quantity', 'status'])
+        production_order.save(update_fields=['quantity_produced', 'remain_quantity', 'status'])
 
         serializer.save()
 
diff --git a/frontend/src/views/production/productionTask/FormModal.vue b/frontend/src/views/production/productionTask/FormModal.vue
new file mode 100644
index 0000000..747e04f
--- /dev/null
+++ b/frontend/src/views/production/productionTask/FormModal.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <a-modal v-model="visible" :confirmLoading="loading" :maskClosable="false" @cancel="cancel" @ok="confirm">
+      <div slot="title">生产</div>
+      <div>
+        <a-form-model ref="form" :model="dataForm" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
+          <a-form-model-item prop="production_quantity" label="生产数量">
+            <a-input-number v-model="dataForm.production_quantity" style="width: 100%;" />
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { productionRecordCreate } from "@/api/production";
+
+export default {
+  props: ["visible", "form"],
+  model: { prop: "visible", event: "cancel" },
+  data() {
+    return {
+      rules: {
+        production_quantity: [{ required: true, message: "请输入生产数量", trigger: "change" }],
+      },
+      loading: false,
+      dataForm: {},
+    };
+  },
+  methods: {
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          productionRecordCreate(this.dataForm)
+            .then((data) => {
+              this.$message.success("生产成功");
+              this.$emit("create", data);
+              this.cancel();
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        }
+      });
+    },
+    cancel() {
+      this.$emit("cancel", false);
+      this.$refs.form.resetFields();
+    },
+  },
+  watch: {
+    visible(value) {
+      if (value) {
+        this.dataForm = {
+          production_order: this.form.id,
+          production_quantity: this.form.remain_quantity,
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/views/production/productionTask/index.vue b/frontend/src/views/production/productionTask/index.vue
index 76da118..7eecb79 100644
--- a/frontend/src/views/production/productionTask/index.vue
+++ b/frontend/src/views/production/productionTask/index.vue
@@ -14,24 +14,38 @@
       </a-row>
 
       <a-row style="margin-top: 12px">
-        <a-table rowKey="id" :columns="columns" :data-source="items" :pagination="pagination" :loading="loading">
+        <a-table
+          rowKey="id"
+          :columns="columns"
+          :data-source="items"
+          :pagination="pagination"
+          :loading="loading"
+          :scroll="{ x: 1600 }"
+        >
           <div slot="action" slot-scope="value, item, index">
             <a-button-group size="small">
               <a-button>详情</a-button>
-              <a-button>生产</a-button>
+              <a-button type="primary" @click="openCreateModal(item)">生产</a-button>
             </a-button-group>
           </div>
         </a-table>
       </a-row>
     </a-card>
+
+    <form-modal v-model="visible" :form="targetItem" @create="create" />
   </div>
 </template>
 
 <script>
+import { productionOrderList } from "@/api/production";
+
 export default {
+  components: {
+    FormModal: () => import("./FormModal.vue"),
+  },
   data() {
     return {
-      searchForm: { search: "", page: 1, ordering: undefined },
+      searchForm: { search: "", page: 1, ordering: undefined, status: "in_progress" },
       pagination: { current: 1, total: 0, pageSize: 16 },
       loading: false,
       items: [],
@@ -40,6 +54,7 @@ export default {
           title: "序号",
           dataIndex: "index",
           width: 60,
+          fixed: "left",
           customRender: (value, item, index) => {
             return index + 1;
           },
@@ -47,6 +62,7 @@ export default {
         {
           title: "生产计划单号",
           dataIndex: "number",
+          fixed: "left",
         },
         {
           title: "销售单号",
@@ -62,23 +78,29 @@ export default {
         },
         {
           title: "计划数量",
-          dataIndex: "planned_quantity",
+          dataIndex: "total_quantity",
+          width: 100,
         },
         {
           title: "完成数量",
-          dataIndex: "completed_quantity",
+          dataIndex: "quantity_produced",
+          width: 100,
         },
         {
           title: "计划开始时间",
           dataIndex: "start_time",
+          width: 180,
         },
         {
           title: "计划结束时间",
           dataIndex: "end_time",
+          width: 180,
         },
         {
           title: "操作",
           dataIndex: "action",
+          fixed: "right",
+          width: 256,
           scopedSlots: { customRender: "action" },
         },
       ],
@@ -86,7 +108,50 @@ export default {
       targetItem: {},
     };
   },
-  methods: {},
+  methods: {
+    initialize() {
+      this.list();
+    },
+    list() {
+      this.loading = true;
+      productionOrderList(this.searchForm)
+        .then((data) => {
+          this.pagination.total = data.count;
+          this.items = data.results;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    create() {
+      this.list();
+    },
+    search() {
+      this.searchForm.page = 1;
+      this.pagination.current = 1;
+      this.list();
+    },
+    tableChange(pagination, filters, sorter) {
+      this.searchForm.page = pagination.current;
+      this.pagination.current = pagination.current;
+      this.searchForm.ordering = `${sorter.order == "descend" ? "-" : ""}${sorter.field}`;
+      this.list();
+    },
+    onChangePicker(date, dateString) {
+      let startDate = date[0];
+      let endDate = date[1];
+      this.searchForm.start_date = startDate ? startDate.format("YYYY-MM-DD") : undefined;
+      this.searchForm.end_date = endDate ? endDate.add(1, "days").format("YYYY-MM-DD") : undefined;
+      this.search();
+    },
+    openCreateModal(item) {
+      this.targetItem = { ...item };
+      this.visible = true;
+    },
+  },
+  mounted() {
+    this.initialize();
+  },
 };
 </script>