From b50a4c6080043339608ddf1a434f6de548afce16 Mon Sep 17 00:00:00 2001
From: milo <315045773@qq.com>
Date: Wed, 13 Apr 2022 23:53:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E5=88=97=E8=A1=A8=E3=80=81?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E3=80=81=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts          |   4 +
 src/components/Aside.vue |   5 +
 src/router/index.ts      |   8 ++
 src/views/User.vue       | 200 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 217 insertions(+)
 create mode 100644 src/views/User.vue

diff --git a/src/api/user.ts b/src/api/user.ts
index c9105d2..7cb9b48 100644
--- a/src/api/user.ts
+++ b/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));
\ No newline at end of file
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index 57f30df..b8e1383 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -56,6 +56,11 @@ export default {
                 index: "/project",
                 title: "项目",
             },
+            {
+                icon: "avatar",
+                index: "/user",
+                title: "人员",
+            },
             {
                 icon: "document-copy",
                 index: "/tabs",
diff --git a/src/router/index.ts b/src/router/index.ts
index 1837d0c..abdc7a1 100644
--- a/src/router/index.ts
+++ b/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',
diff --git a/src/views/User.vue b/src/views/User.vue
new file mode 100644
index 0000000..a9b87f1
--- /dev/null
+++ b/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>
\ No newline at end of file