gitcc
/
inncom_list
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户接口联调

main
wangqiujuan0808 2024-03-29 16:47:02 +08:00
parent fb300fd1f2
commit 782abbcc0c
1 changed files with 87 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/User.vue
View File

@ -1,68 +1,36 @@
<template>
<el-button :icon="Plus" type="success" round @click="new_user_click">新增</el-button>
<el-table :data="user_list">
<el-table-column type="index" label="序号" width="200" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="email" label="邮箱" />
<el-table-column prop="enabled" label="状态">
<div class="btn-div"><el-button :icon="Plus" type="success" round @click="new_user_click">新增</el-button></div>
<el-table :data="user_list" height="600">
<el-table-column type="index" label="序号" width="200" align="center" />
<el-table-column prop="name" label="名称" align="center" />
<el-table-column prop="email" label="邮箱" align="center" />
<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 label="操作" width="200">
<el-table-column prop="role_name" label="类型" align="center" />
<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-form :model="user_info" label-width="80px">
<el-form-item label="名称">
<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-dialog v-model="adduserdialogVisible" :title="type === 'add' ? '新增用户' : '编辑用户'" width="500px">
<el-form :model="user_info" label-width="80px" :rules="userRules" ref="userForm">
<el-form-item label="名称" prop="name">
<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 () => {
const delete_user = async (item) => {
const res = await myApi.userAPI(actionNum.DeleteUser, { id: item.id });
if (res.code === 0) {
ElMessage.success(res.message);
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 = () => {
console.log("点击删除");
delete_user();
updateuserdialogVisible.value = false;
};
const update_user_click = async () => {
console.log("点击更新");
update_user();
updateuserdialogVisible.value = false;
const delete_user_click = (item) => {
ElMessageBox.confirm(
'确定删除用户?',
'删除用户',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.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>