用户接口联调

src/views/User.vue

@@ -1,68 +1,36 @@
 <template>
-    <el-button :icon="Plus" type="success" round @click="new_user_click">新增</el-button>
+    <div class="btn-div"><el-button :icon="Plus" type="success" round @click="new_user_click">新增</el-button></div>
-    <el-table :data="user_list">
+    <el-table :data="user_list" height="600">
-        <el-table-column type="index" label="序号" width="200" />
+        <el-table-column type="index" label="序号" width="200" align="center" />
-        <el-table-column prop="name" label="名称" />
+        <el-table-column prop="name" label="名称" align="center" />
-        <el-table-column prop="email" label="邮箱" />
+        <el-table-column prop="email" label="邮箱" align="center" />
-        <el-table-column prop="enabled" label="状态">
+        <el-table-column prop="enabled" label="状态" align="center">
             <template #default="scope">
                 <span>{{ scope.row.enabled === 1 ? "启用" : "禁用" }}</span>
             </template>
         </el-table-column>
-        <el-table-column prop="role_name" label="类型" />
+        <el-table-column prop="role_name" label="类型" align="center" />
-        <el-table-column label="操作" width="200">
+        <el-table-column label="操作" width="200" align="center">
             <template #default="scope">
                 <el-button type="primary" :icon="Edit" @click="edit_user_click(scope.row)" circle />
+                <el-button type="danger" :icon="Delete" @click="delete_user_click(scope.row)" circle />
             </template>
         </el-table-column>
     </el-table>
 
-    <!-- 编辑用户 -->
+    <!-- 新增/编辑用户 -->
-    <el-dialog v-model="updateuserdialogVisible" title="编辑用户" width="500px">
+    <el-dialog v-model="adduserdialogVisible" :title="type === 'add' ? '新增用户' : '编辑用户'" width="500px">
-        <el-form :model="user_info" label-width="80px">
+        <el-form :model="user_info" label-width="80px" :rules="userRules" ref="userForm">
-            <el-form-item label="名称">
+            <el-form-item label="名称" prop="name">
-                <el-input v-model="user_info.name" />
-            </el-form-item>
-            <el-form-item label="邮箱">
-                <el-input v-model="user_info.email" />
-            </el-form-item>
-            <el-form-item label="角色">
-                <el-select v-model="user_info.role_name">
-                    <el-option label="普通用户" value="普通用户" />
-                    <el-option label="AE用户" value="AE用户" />
-                    <el-option label="TS用户" value="TS用户" />
-                </el-select>
-            </el-form-item>
-            <el-form-item label="状态">
-                <el-radio-group v-model="user_info.enabled">
-                    <el-radio :value=1>启用</el-radio>
-                    <el-radio :value=0>停用</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="删除">
-                <el-button type="danger" @click="delete_user_click">删 除</el-button>
-            </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button @click="updateuserdialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="update_user_click">确 定</el-button>
-        </div>
-
-    </el-dialog>
-
-    <!-- 新增用户 -->
-    <el-dialog v-model="adduserdialogVisible" title="新增用户" width="500px">
-        <el-form :model="user_info" label-width="80px">
-            <el-form-item label="名称">
                 <el-input v-model="user_info.name" placeholder="请输入名称" />
             </el-form-item>
-            <el-form-item label="密码">
+            <el-form-item label="密码" prop="password" v-if="type === 'add'">
                 <el-input v-model="user_info.password" placeholder="请输入密码" />
             </el-form-item>
-            <el-form-item label="邮箱">
+            <el-form-item label="邮箱" prop="email">
                 <el-input v-model="user_info.email" placeholder="请输入邮箱" />
             </el-form-item>
-            <el-form-item label="角色">
+            <el-form-item label="角色" prop="role_id">
                 <el-select v-model="user_info.role_id">
                     <el-option v-for="(item, index) in role_list" :key="index" :label="item.role_name"
                         :value="item.role_id" />
@@ -77,7 +45,7 @@
         </el-form>
         <div slot="footer" class="dialog-footer">
             <el-button @click="adduserdialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="add_user_click">创 建</el-button>
+            <el-button type="primary" @click="add_user">{{ type === 'add' ? '创 建' : '确定' }}</el-button>
         </div>
 
     </el-dialog>
@@ -85,10 +53,12 @@
 <script setup>
 import { onMounted, ref, reactive } from "vue";
 import { myApi, actionNum } from "@/api/myApi.js";
-import { Plus, Edit } from '@element-plus/icons-vue'
+import { Plus, Edit, Delete } from '@element-plus/icons-vue'
-
+import { ElMessage, ElMessageBox } from "element-plus";
+const userForm = ref(null);
 const user_list = ref([]);
 const role_list = ref([]);
+const type = ref(null);
 const updateuserdialogVisible = ref(false);
 const adduserdialogVisible = ref(false);
 const user_info = reactive({
@@ -100,6 +70,14 @@ const user_info = reactive({
     role_name: "",
 });
 
+const userRules = {
+    name: [{ required: true, trigger: "blur", message: "请输入名称" }],
+    password: [{ required: true, trigger: "blur", message: "请输入密码" }],
+    email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
+    role_id: [{ required: true, trigger: "blur", message: "请选择角色" }],
+}
+
+
 const get_user_list = async () => {
     const res = await myApi.userAPI(actionNum.QueryUser, null);
     if (res.code === 0) {
@@ -124,15 +102,39 @@ const get_role_list = async () => {
 };
 
 const add_user = async () => {
+    userForm.value.validate(async (valid) => {
+        if (valid) {
+            let param = type.value === 'add' ? actionNum.CreateUser : actionNum.UpdateUser;
+            const res = await myApi.userAPI(param, user_info);
+            if (res.code === 0) {
+                ElMessage.success(res.message);
+                adduserdialogVisible.value = false;
+                get_user_list();
+            } else {
+                ElMessage({
+                    message: res.message,
+                    type: "warning",
+                });
+            }
+        } else {
+            console.log('error submit!!')
+            return false;
+        }
+    })
 
 };
 
-const update_user = async () => {
+const delete_user = async (item) => {
-
+    const res = await myApi.userAPI(actionNum.DeleteUser, { id: item.id });
-};
+    if (res.code === 0) {
-
+        ElMessage.success(res.message);
-const delete_user = async () => {
+        get_user_list();
-
+    } else {
+        ElMessage({
+            message: res.message,
+            type: "warning",
+        });
+    }
 };
 
 const new_user_click = () => {
@@ -142,30 +144,43 @@ const new_user_click = () => {
     user_info.enabled = 1;
     user_info.role_id = 1;
     get_role_list();
+    type.value = 'add';
     adduserdialogVisible.value = true;
 };
 
-const add_user_click = () => {
-    console.log("点击新增");
-    add_user();
-    adduserdialogVisible.value = false;
-};
 
 const edit_user_click = item => {
     Object.assign(user_info, item);
-    updateuserdialogVisible.value = true;
+    type.value = 'edit';
+    adduserdialogVisible.value = true;
 };
-const delete_user_click = () => {
+const delete_user_click = (item) => {
-    console.log("点击删除");
+    ElMessageBox.confirm(
-    delete_user();
+        '确定删除用户?',
-    updateuserdialogVisible.value = false;
+        '删除用户',
-};
+        {
-const update_user_click = async () => {
+            confirmButtonText: '确定',
-    console.log("点击更新");
+            cancelButtonText: '取消',
-    update_user();
+            type: 'warning',
-    updateuserdialogVisible.value = false;
+        }
+    )
+        .then(() => {
+            delete_user(item);
+        })
+        .catch(() => {
+            ElMessage({
+                type: 'info',
+                message: '取消删除',
+            })
+        })
 };
 onMounted(() => {
     get_user_list();
 });
 </script>
+<style lang="scss" scoped>
+.btn-div {
+    text-align: right;
+    padding: 15px;
+}
+</style>