客户新增和编辑

src/api/customerAdd.ts

@@ -0,0 +1,4 @@
+import axios from 'axios'
+import qs from 'qs'
+
+export const customerAdd = query => axios.post('http://oa-dxtc.test/customer/add', qs.stringify(query));

src/api/customerEdit.ts

@@ -0,0 +1,4 @@
+import axios from 'axios'
+import qs from 'qs'
+
+export const customerEdit = query => axios.post('http://oa-dxtc.test/customer/edit', qs.stringify(query));

src/views/Customer.vue

@@ -5,8 +5,8 @@
                 <el-breadcrumb-item>
                     <i class="el-icon-lx-cascades"></i> 客户列表
                 </el-breadcrumb-item>
-                <el-button type="primary">
-                    <el-icon :size="20"><plus /></el-icon>
+                <el-button size="small" type="primary" @click="handleAdd()">
+                    <el-icon size="small"><plus /></el-icon>
                 </el-button>
             </el-breadcrumb>
         </div>
@@ -22,36 +22,22 @@
 
             <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="账户余额">
-                    <template #default="scope">￥{{ scope.row.money }}</template>
-                </el-table-column>
-                <el-table-column label="头像(查看大图)" align="center">
-                    <template #default="scope">
-                        <el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]">
-                        </el-image>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="address" label="地址"></el-table-column>
-                <el-table-column label="状态" align="center">
-                    <template #default="scope">
-                        <el-tag :type="
-                                scope.row.state === '成功'
-                                    ? 'success'
-                                    : scope.row.state === '失败'
-                                    ? 'danger'
-                                    : ''
-                            ">{{ scope.row.state }}</el-tag>
-                    </template>
-                </el-table-column>
-
-                <el-table-column prop="date" label="注册时间"></el-table-column>
+                <el-table-column prop="company" 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 prop="wechat" label="微信"></el-table-column>
+                <el-table-column prop="create_time" label="添加时间"></el-table-column>
+                <el-table-column prop="user_name" label="添加人"></el-table-column>
                 <el-table-column label="操作" width="180" align="center">
                     <template #default="scope">
-                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
+                        <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>
-                        <el-button type="text" icon="el-icon-delete" class="red"
-                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -62,13 +48,19 @@
         </div>
 
         <!-- 编辑弹出框 -->
-        <el-dialog title="编辑" v-model="editVisible" width="30%">
-            <el-form label-width="70px">
-                <el-form-item label="用户名">
-                    <el-input v-model="form.name"></el-input>
+        <el-dialog title="编辑" v-model="editVisible" width="40%">
+            <el-form :model="editForm" ref="tableEditData" :rules="rules" label-width="120px">
+                <el-form-item label="公司名/客户名" prop="company">
+                    <el-input v-model="editForm.company"></el-input>
                 </el-form-item>
-                <el-form-item label="地址">
-                    <el-input v-model="form.address"></el-input>
+                <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-item label="微信">
+                    <el-input v-model="editForm.wechat"></el-input>
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -78,6 +70,30 @@
                 </span>
             </template>
         </el-dialog>
+
+        <!-- 添加弹出框 -->
+        <el-dialog title="新增" v-model="addVisible" width="40%">
+            <el-form :model="addForm" ref="tableAddData" label-width="120px" :rules="rules">
+                <el-form-item label="公司名/客户名" prop="company">
+                    <el-input v-model="addForm.company"></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-item label="微信">
+                    <el-input v-model="addForm.wechat"></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>
     </div>
 </template>
 
@@ -85,6 +101,8 @@
 import { ref, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { customerData } from "../api/customer";
+import { customerAdd } from "../api/customerAdd";
+import { customerEdit } from '../api/customerEdit';
 
 export default {
     name: "basetable",
@@ -100,9 +118,8 @@ export default {
         // 获取表格数据
         const getData = () => {
             customerData(query).then((res) => {
-                console.log(res);
-                //tableData.value = res.data;
-                //pageTotal.value = res.pageTotal || 0;
+                tableData.value = res.data.data;
+                pageTotal.value = res.data.pageTotal || 0;
             });
         };
         getData();
@@ -130,40 +147,104 @@ export default {
                 })
                 .catch(() => {});
         };
-
+        const user = JSON.parse(localStorage.getItem('user'));
         // 表格编辑时弹窗和保存
         const editVisible = ref(false);
-        let form = reactive({
-            name: "",
-            address: "",
+        const tableEditData = ref(null);
+        const editForm = reactive({
+            company:'',
+            name:'',
+            telephone:'',
+            wechat:'',
+            userid:user.id,
+            id:0
         });
         let idx = -1;
         const handleEdit = (index, row) => {
             idx = index;
-            Object.keys(form).forEach((item) => {
-                form[item] = row[item];
+            Object.keys(editForm).forEach((item) => {
+                editForm[item] = row[item];
             });
             editVisible.value = true;
         };
         const saveEdit = () => {
-            editVisible.value = false;
-            ElMessage.success(`修改第 ${idx + 1} 行成功`);
-            Object.keys(form).forEach((item) => {
-                tableData.value[idx][item] = form[item];
+            tableEditData.value.validate((valid) => {
+                if(!valid){
+                    ElMessage.error('验证失败');
+                    return false;
+                }
+                customerEdit(editForm).then((res) => {
+                    if(res.data.code == 0){
+                        ElMessage.success(`修改第 ${idx + 1} 行成功`);
+                        editVisible.value = false;
+                    }else{
+                        ElMessage.error(res.data.msg);
+                        return false;
+                    }
+                });
+            });
+        };
+
+        //新增
+        const addVisible = ref(false);
+        const rules = reactive({
+            company: [
+                { required: true, message: "请输入公司名", trigger: "blur"},
+            ],
+            name: [
+                { required: true, message: "联系人姓名", trigger: "blur" },
+            ],
+            telephone:[
+                { required: true, message: "联系人电话", trigger: "blur" },
+            ]
+        });
+        const tableAddData = ref(null);
+        const addForm = reactive({
+            company:'',
+            name:'',
+            telephone:'',
+            wechat:'',
+            userid:user.id
+        });
+        const handleAdd = () => {
+           addVisible.value = true;
+        };
+        const saveAdd = () => {
+            tableAddData.value.validate((valid) => {
+                if(!valid){
+                    ElMessage.error('验证失败');
+                    return false;
+                }
+                customerAdd(addForm).then((res) => {
+                    if(res.data.code == 0){
+                        ElMessage.success("添加成功");
+                        addVisible.value = false;
+                    }else{
+                        ElMessage.error(res.data.msg);
+                        return false;
+                    }
+                });
             });
         };
 
         return {
             query,
             tableData,
+            tableAddData,
+            tableEditData,
             pageTotal,
             editVisible,
-            form,
+            addVisible,
+            editForm,
+            addForm,
             handleSearch,
             handlePageChange,
             handleDelete,
             handleEdit,
+            handleAdd,
             saveEdit,
+            saveAdd,
+            rules,
         };
     },
 };