人员列表、新增、编辑

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.rdb
 
 # Editor directories and files
 .vscode/*

src/api/project.ts

@@ -4,3 +4,5 @@ import qs from 'qs'
 export const projectData = query => axios.post('http://oa-dxtc.test/project/index', qs.stringify(query));
 
 export const projectAdd = addQuery => axios.post('http://oa-dxtc.test/project/add', qs.stringify(addQuery));
+
+export const projectEdit = editQuery => axios.post('http://oa-dxtc.test/project/edit', qs.stringify(editQuery));

src/api/user.ts

@@ -2,3 +2,7 @@ import axios from 'axios'
 import qs from 'qs'
 
 export const userData = query => axios.post('http://oa-dxtc.test/user/index', qs.stringify(query));
+
+export const userAdd = addQuery => axios.post('http://oa-dxtc.test/user/add', qs.stringify(addQuery));
+
+export const userEdit = editQuery => axios.post('http://oa-dxtc.test/user/edit', qs.stringify(editQuery));

src/components/Aside.vue

@@ -56,6 +56,11 @@ export default {
                 index: "/project",
                 title: "项目",
             },
+            {
+                icon: "avatar",
+                index: "/user",
+                title: "人员",
+            },
             {
                 icon: "document-copy",
                 index: "/tabs",

src/router/index.ts

@@ -28,6 +28,14 @@ const routes = [
                 },
                 component: () => import ( /* webpackChunkName: "table" */ "../views/Customer.vue")
             },
+            {
+                path: "/user",
+                name: "user",
+                meta: {
+                    title: '人员'
+                },
+                component: () => import ( /* webpackChunkName: "table" */ "../views/User.vue")
+            },
             {
                 path: '/source',
                 name: 'source',

src/views/Project.vue

@@ -13,7 +13,17 @@
         <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 prop="name" label="项目名称"></el-table-column>
+                <el-table-column prop="company" label="客户名称"></el-table-column>
+                <el-table-column prop="user_name" label="负责人"></el-table-column>
+                <el-table-column prop="amount" label="金额"></el-table-column>
+                <el-table-column prop="received" label="已回款"></el-table-column>
+                <el-table-column prop="pending" label="待回款"></el-table-column>
+                <el-table-column prop="contract_end_date" label="合同结束"></el-table-column>
+                <el-table-column prop="estimated_start_date" label="预估开始"></el-table-column>
+                <el-table-column prop="estimated_end_date" label="预估结束"></el-table-column>
+                <el-table-column prop="start_date" label="实际开始"></el-table-column>
+                <el-table-column prop="end_date" 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)">
@@ -120,12 +130,104 @@
                 </span>
             </template>
         </el-dialog>
+
+        <!-- 编辑弹出框 -->
+        <el-dialog title="编辑" v-model="editVisible" width="40%">
+            <el-form :model="editForm" ref="tableEditData" label-width="120px" :rules="rules">
+                <el-form-item label="项目名称" prop="name">
+                    <el-input v-model="editForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="客户" prop="customer_id">
+                    <el-select v-model="editForm.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.company"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="项目对接人" prop="user_id">
+                    <el-select v-model="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.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="editForm.construction_period" :min="1" />
+                </el-form-item>
+                <el-form-item label="项目金额" prop="amount">
+                    <el-input-number v-model="editForm.amount" :precision="2" :step="0.1" />
+                </el-form-item>
+                <el-form-item label="已回款金额" prop="received">
+                    <el-input-number v-model="editForm.received" :precision="2" :step="0.1" />
+                </el-form-item>
+                <el-form-item label="待回款金额" prop="pending">
+                    <el-input-number v-model="editForm.pending" :precision="2" :step="0.1" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="editVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="saveEdit">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script lang="ts">
 import { reactive, ref } from 'vue';
 import { ElMessage } from "element-plus";
-import { projectData, projectAdd } from "../api/project";
+import { projectData, projectAdd, projectEdit } from "../api/project";
 import { customerData } from '../api/customer';
 import { userData } from '../api/user';
 
@@ -211,6 +313,54 @@ export default{
                 });
             });
         };
+
+        //编辑
+        const editVisible = ref(false);
+        const tableEditData = ref(null);
+        const editForm = 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.00,
+            received:0.00,
+            pending:0.00,
+            id:0
+        });
+        let idx = -1;
+        const handleEdit = (index, row) => {
+            idx = index;
+            Object.keys(editForm).forEach((item) => {
+                editForm[item] = row[item];
+            });
+            editVisible.value = true;
+        };
+        const saveEdit = () => {
+            tableEditData.value.validate((valid) => {
+                if(!valid){
+                    ElMessage.error('验证失败');
+                    return false;
+                }
+                projectEdit(editForm).then((res) => {
+                    if(res.data.code == 0){
+                        ElMessage.success(`修改第 ${idx + 1} 行成功`);
+                        editVisible.value = false;
+                    }else{
+                        ElMessage.error(res.data.msg);
+                        return false;
+                    }
+                });
+            });
+        };
+
         return {
             tableData,
             customerListData,
@@ -222,7 +372,16 @@ export default{
             handleAdd,
             saveAdd,
             projectAdd,
-            ElMessage
+            projectData,
+            customerData,
+            userData,
+            ElMessage,
+            editVisible,
+            tableEditData,
+            editForm,
+            idx,
+            handleEdit,
+            saveEdit
         }
     }
 }

src/views/User.vue

@@ -0,0 +1,200 @@
+<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="username" label="用户名"></el-table-column>
+                <el-table-column prop="name" label="姓名"></el-table-column>
+                <el-table-column prop="telephone" 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="username">
+                    <el-input v-model="addForm.username"></el-input>
+                </el-form-item>
+                <el-form-item label="密码" prop="password">
+                    <el-input v-model="addForm.password"></el-input>
+                </el-form-item>
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="addForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="电话" prop="telephone">
+                    <el-input v-model="addForm.telephone"></el-input>
+                </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>
+
+        <!-- 编辑弹出框 -->
+        <el-dialog title="编辑" v-model="editVisible" width="40%">
+            <el-form :model="editForm" ref="tableEditData" :rules="rules" label-width="120px">
+                <el-form-item label="用户名" prop="username">
+                    <el-input v-model="editForm.username"></el-input>
+                </el-form-item>
+                <el-form-item label="密码" prop="password">
+                    <el-input v-model="editForm.password"></el-input>
+                </el-form-item>
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="editForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="电话" prop="telephone">
+                    <el-input v-model="editForm.telephone"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="editVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="saveEdit">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts">
+import { reactive, ref } from 'vue';
+import { ElMessage } from "element-plus";
+import { userData, userAdd, userEdit } from '../api/user';
+
+export default {
+    //name: 'source2',
+    setup() {
+        const listQuery = reactive({
+            name: '',
+            telephone: '',
+        });
+        const rules = reactive({
+            username: [
+                { required: true, message: "用户名", trigger: "blur" },
+            ],
+            name : [
+                { required: true, message: '姓名', trigger: 'blur'}
+            ]
+        });
+
+        //获取表格数据
+        const tableData = ref([]);
+        const getData = () => {
+            userData(listQuery).then((res) => {
+                tableData.value = res.data.data;
+            });
+        }
+        getData();
+
+        //新增
+        const addVisible = ref(false);
+        const tableAddData = ref(null);
+        const addForm = reactive({
+            username : '',
+            password : '',
+            name : '',
+            telephone : ''
+        });
+        const handleAdd = () => {
+           addVisible.value = true;
+        };
+        const saveAdd = () => {
+            tableAddData.value.validate((valid) => {
+                if(!valid){
+                    ElMessage.error('验证失败');
+                    return false;
+                }
+                userAdd(addForm).then((res) => {
+                    if(res.data.code == 0){
+                        ElMessage.success("添加成功");
+                        addVisible.value = false;
+                    }else{
+                        ElMessage.error(res.data.msg);
+                        return false;
+                    }
+                });
+            });
+        };
+
+        //编辑
+        const editVisible = ref(false);
+        const tableEditData = ref(null);
+        const editForm = reactive({
+            username : '',
+            name : '',
+            telephone: '',
+            id: 0
+        });
+        let idx = -1;
+        const handleEdit = (index, row) => {
+            idx = index;
+            Object.keys(editForm).forEach((item) => {
+                editForm[item] = row[item];
+            });
+            editVisible.value = true;
+        };
+        const saveEdit = () => {
+            tableEditData.value.validate((valid) => {
+                if(!valid){
+                    ElMessage.error('验证失败');
+                    return false;
+                }
+                userEdit(editForm).then((res) => {
+                    if(res.data.code == 0){
+                        ElMessage.success(`修改第 ${idx + 1} 行成功`);
+                        editVisible.value = false;
+                    }else{
+                        ElMessage.error(res.data.msg);
+                        return false;
+                    }
+                });
+            });
+        };
+
+        return {
+            reactive,
+            listQuery,
+            rules,
+            addVisible,
+            tableAddData,
+            addForm,
+            handleAdd,
+            saveAdd,
+            tableData,
+            getData,
+            userData,
+            editVisible,
+            tableEditData,
+            editForm,
+            idx,
+            handleEdit,
+            saveEdit,
+            userEdit
+        }
+    }
+
+}
+</script>