diff --git a/src/api/projectAdd.ts b/src/api/projectAdd.ts
new file mode 100644
index 0000000..0aba5ed
--- /dev/null
+++ b/src/api/projectAdd.ts
@@ -0,0 +1,4 @@
+import axios from 'axios'
+import qs from 'qs'
+
+export const projectAdd = query => axios.post('http://oa-dxtc.test/project/add', qs.stringify(query));
diff --git a/src/router/index.ts b/src/router/index.ts
index aa93a14..1837d0c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -27,7 +27,7 @@ const routes = [
                     title: '客户'
                 },
                 component: () => import ( /* webpackChunkName: "table" */ "../views/Customer.vue")
-            }, 
+            },
             {
                 path: '/source',
                 name: 'source',
@@ -36,6 +36,14 @@ const routes = [
                 },
                 component: () => import( '../views/Source.vue' )
             },
+            {
+                path: '/project',
+                name: 'project',
+                meta: {
+                    title: '项目'
+                },
+                component: () => import( '../views/Project.vue' )
+            },
             //{
         //         path: "/charts",
         //         name: "basecharts",
diff --git a/src/views/Project.vue b/src/views/Project.vue
new file mode 100644
index 0000000..63c095d
--- /dev/null
+++ b/src/views/Project.vue
@@ -0,0 +1,203 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item>
+                    <i class="el-icon-lx-cascades"></i> 项目列表
+                </el-breadcrumb-item>
+                <el-button size="small" type="primary" @click="handleAdd()">
+                    <el-icon size="small"><plus /></el-icon>
+                </el-button>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
+                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column label="操作" width="180" align="center">
+                    <template #default="scope">
+                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">
+                            <el-icon><edit-pen /></el-icon>
+                            编辑
+                        </el-button>
+                        <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">
+                            <el-icon><delete /></el-icon>
+                            删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <!-- 添加弹出框 -->
+        <el-dialog title="新增" v-model="addVisible" width="40%">
+            <el-form :model="addForm" ref="tableAddData" label-width="120px" :rules="rules">
+                <el-form-item label="项目名称" prop="name">
+                    <el-input v-model="addForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="客户" prop="customer_id">
+                    <el-select v-model="addForm.customer_id" class="m-2" placeholder="客户" size="small" name="customer_id">
+                        <el-option
+                        v-for="item in customerListData"
+                        :key="item.id"
+                        :value="item.id"
+                        :label="item.name"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="项目对接人" prop="user_id">
+                    <el-select v-model="addForm.user_id" class="m-2" placeholder="项目对接人" size="small" name="user_id">
+                        <el-option
+                        v-for="item in userListData"
+                        :key="item.id"
+                        :value="item.id"
+                        :label="item.name"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="合同日期">
+                    <el-col :span="11">
+                        <el-form-item prop="contract_signing_date">
+                            <el-date-picker type="date" placeholder="合同签订日期" v-model="addForm.contract_signing_date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col class="line" :span="2">-</el-col>
+                    <el-col :span="11">
+                        <el-form-item prop="contract_end_date">
+                            <el-date-picker type="date" placeholder="合同约定项目结束日期" v-model="addForm.contract_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="项目工期" prop="contract_construction_period">
+                    <el-input-number v-model="addForm.contract_construction_period" :min="1" />
+                </el-form-item>
+                <el-form-item label="预估日期">
+                    <el-col :span="11">
+                        <el-form-item prop="estimated_start_date">
+                            <el-date-picker type="date" placeholder="预估开始日期" v-model="addForm.estimated_start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col class="line" :span="2">-</el-col>
+                    <el-col :span="11">
+                        <el-form-item prop="estimated_end_date">
+                            <el-date-picker type="date" placeholder="预估结束日期" v-model="addForm.estimated_end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="预估工期" prop="estimated_construction_period">
+                    <el-input-number v-model="addForm.estimated_construction_period" :min="1" />
+                </el-form-item>
+                <el-form-item label="实际日期">
+                    <el-col :span="11">
+                        <el-form-item prop="start_date">
+                            <el-date-picker type="date" placeholder="实际开始日期" v-model="addForm.start_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col class="line" :span="2">-</el-col>
+                    <el-col :span="11">
+                        <el-form-item prop="end_date">
+                            <el-date-picker type="date" placeholder="实际结束日期" v-model="addForm.end_date" style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-form-item>
+                <el-form-item label="实际工期" prop="construction_period">
+                    <el-input-number v-model="addForm.construction_period" :min="1" />
+                </el-form-item>
+                <el-form-item label="项目金额" prop="amount">
+                    <el-input-number v-model="addForm.amount" :precision="2" :step="0.1" />
+                </el-form-item>
+                <el-form-item label="已回款金额" prop="received">
+                    <el-input-number v-model="addForm.received" :precision="2" :step="0.1" />
+                </el-form-item>
+                <el-form-item label="待回款金额" prop="pending">
+                    <el-input-number v-model="addForm.pending" :precision="2" :step="0.1" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="addVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="saveAdd">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts">
+import { reactive, ref } from 'vue';
+import { ElMessage } from "element-plus";
+import { projectAdd } from "../api/projectAdd";
+
+export default{
+    setup() {
+        const tableData = ref([]);
+        const customerListData = ref([]);
+        const userListData = ref([]);
+        const rules = reactive({
+            name: [
+                { required: true, message: "请输入项目名称", trigger: "blur"},
+            ],
+            customer_id: [
+                { required: true, message: "请选择客户", trigger: "blur" },
+            ],
+            user_id:[
+                { required: true, message: "请选负责人", trigger: "blur" },
+            ]
+        });
+
+        //新增
+        const addVisible = ref(false);
+        const tableAddData = ref(null);
+        const addForm = reactive({
+            name:'',
+            customer_id: 0,
+            user_id: 0,
+            contract_signing_date:'',
+            contract_end_date:'',
+            contract_construction_period: 0,
+            estimated_start_date:'',
+            estimated_end_date:'',
+            estimated_construction_period:0,
+            start_date:'',
+            end_date:'',
+            construction_period:0,
+            amount:0,
+            received:0,
+            pending:0
+        });
+        const handleAdd = () => {
+           addVisible.value = true;
+        };
+        const saveAdd = () => {
+            tableAddData.value.validate((valid) => {
+                if(!valid){
+                    ElMessage.error('验证失败');
+                    return false;
+                }
+                projectAdd(addForm).then((res) => {
+                    if(res.data.code == 0){
+                        ElMessage.success("添加成功");
+                        addVisible.value = false;
+                    }else{
+                        ElMessage.error(res.data.msg);
+                        return false;
+                    }
+                });
+            });
+        };
+        return {
+            tableData,
+            customerListData,
+            userListData,
+            rules,
+            addVisible,
+            tableAddData,
+            addForm,
+            handleAdd,
+            saveAdd,
+            projectAdd,
+            ElMessage
+        }
+    }
+}
+
+</script>
\ No newline at end of file