2 changed files with 474 additions and 0 deletions
@ -0,0 +1,472 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import ElementPlus from "element-plus"; |
|||
import { ElMessage, ElMessageBox } from "element-plus"; |
|||
import axios from "axios"; |
|||
import moment from "moment"; |
|||
import { ta } from "element-plus/es/locales.mjs"; |
|||
import API from "../../api/index.js"; |
|||
import { UserFilled } from "@element-plus/icons-vue"; |
|||
|
|||
// 充值明细表格 |
|||
const tableData = ref([]); |
|||
// 搜索=========================================== |
|||
//分页总条目 |
|||
const total = ref(100); |
|||
// 搜索detailY |
|||
const admin = ref({}); |
|||
// 搜索对象 |
|||
const getObj = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
}); |
|||
// 新增用户权限弹窗 |
|||
const permissionAddVisible = ref(false); |
|||
// 编辑用户权限弹窗 |
|||
const permissionEditVisible = ref(false); |
|||
//选地区 |
|||
const area = ref([]); |
|||
// 选部门 |
|||
const store = ref([]); |
|||
// 新增用户权限对象 |
|||
const permissionAddObj = ref({}); |
|||
// 编辑用户权限对象 |
|||
const permissionEditObj = ref({}); |
|||
|
|||
// 搜索接口 |
|||
const get = async function (val) { |
|||
try { |
|||
// 搜索参数页码赋值 |
|||
if (typeof val === "number") { |
|||
getObj.value.pageNum = val; |
|||
} |
|||
console.log("搜索参数", getObj.value); |
|||
// 发送POST请求 |
|||
const result = await API.post("/hwjb/admin/search", { |
|||
...getObj.value, |
|||
admin: { ...admin.value }, |
|||
}); |
|||
tableData.value = result.data.list; |
|||
total.value = result.data.total; |
|||
} catch (error) { } |
|||
}; |
|||
// 搜索 |
|||
const search = function () { |
|||
getObj.value.pageNum = 1; |
|||
get(); |
|||
}; |
|||
// 重置 |
|||
const reset = function () { |
|||
admin.value = {}; |
|||
}; |
|||
|
|||
// 获取地区 |
|||
const getArea = async function () { |
|||
try { |
|||
const result = await API.post("/hwjb/admin/area", {}); |
|||
area.value = result.data; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// 获取部门 |
|||
const getStore = async function () { |
|||
try { |
|||
const result = await API.post("/hwjb/admin/store", {}); |
|||
store.value = result.data; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
|
|||
// 验证跳转输入框的数字是否合法 |
|||
const checkNumber = function () { |
|||
if (typeof parseInt(getObj.value.pageNum) === "number") { |
|||
console.log( |
|||
"总共有多少页" + Math.ceil(total.value / getObj.value.pageSize) |
|||
); |
|||
if ( |
|||
getObj.value.pageNum > 0 && |
|||
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize) |
|||
) { |
|||
getObj.value.pageNum = parseInt(getObj.value.pageNum); |
|||
console.log("输入的数字合法"); |
|||
get(); |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
} else { |
|||
//提示 |
|||
ElMessage({ |
|||
type: "error", |
|||
message: "请检查输入内容", |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 打开新增用户权限弹窗 |
|||
const openPermissionAddVisible = function () { |
|||
permissionAddVisible.value = true; |
|||
} |
|||
// 关闭新增用户权限弹窗 |
|||
const closePermissionAddVisible = function () { |
|||
permissionAddVisible.value = false; |
|||
} |
|||
// 新增用户权限初始化 |
|||
const permissionAddInit = function () { |
|||
permissionAddObj.value = {}; |
|||
openPermissionAddVisible(); |
|||
} |
|||
// 通过精网号查询没有权限的用户 |
|||
const getAdminByJwcodeWithoutPermission = async function () { |
|||
try { |
|||
const result = await API.post("/hwjb/admin/selectNo", permissionAddObj.value); |
|||
if (result.code == 200) { |
|||
permissionAddObj.value = result.data[0]; |
|||
ElMessage.success("精网号查询成功"); |
|||
}else{ |
|||
ElMessage.error(result.msg); |
|||
} |
|||
console.log("精网号查询没有权限的用户", permissionAddObj.value); |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} |
|||
} |
|||
// 新增用户权限提交 |
|||
const permissionAdd = async function () { |
|||
try { |
|||
console.log("新增用户权限提交", permissionAddObj.value); |
|||
} catch (error) { |
|||
console.log("新增用户权限失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} finally { |
|||
closePermissionAddVisible(); |
|||
} |
|||
} |
|||
// 打开编辑用户权限弹窗 |
|||
const openPermissionEditVisible = function () { |
|||
permissionEditVisible.value = true; |
|||
} |
|||
// 关闭编辑用户权限弹窗 |
|||
const closePermissionEditVisible = function () { |
|||
permissionEditVisible.value = false; |
|||
} |
|||
// 编辑用户权限初始化 |
|||
const permissionEditInit = function (row) { |
|||
permissionEditObj.value = {}; |
|||
permissionEditObj.value.jwcode = row.jwcode; |
|||
permissionEditObj.value.name = row.name; |
|||
permissionEditObj.value.area = row.area; |
|||
permissionEditObj.value.store = row.store; |
|||
permissionEditObj.value.permission = row.permission; |
|||
console.log("编辑用户权限", permissionEditObj.value); |
|||
openPermissionEditVisible(); |
|||
} |
|||
// 编辑用户权限提交 |
|||
const permissionEdit = async function () { |
|||
try { |
|||
console.log("编辑用户权限提交", permissionEditObj.value); |
|||
} catch (error) { |
|||
console.log("编辑用户权限失败", error); |
|||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|||
} finally { |
|||
closePermissionEditVisible(); |
|||
} |
|||
} |
|||
|
|||
// 挂载 |
|||
onMounted(async function () { |
|||
await get(); |
|||
await getArea(); |
|||
await getStore(); |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card style="margin-bottom: 20px"> |
|||
<div class="head-card"> |
|||
<div class="head-card-element"> |
|||
<el-text class="mx-1" size="large">精网号:</el-text> |
|||
<el-input v-model="admin.jwcode" style="width: 240px" placeholder="请输入精网号" clearable /> |
|||
</div> |
|||
<div class="head-card-element" style="margin-left: 50px"> |
|||
<el-text class="mx-1" size="large">所属地区:</el-text> |
|||
<el-select v-model="admin.area" placeholder="请选择所属地区" style="width: 240px" clearable> |
|||
<el-option v-for="item in area" :key="item" :label="item" :value="item" /> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-element" style="margin-left: 50px"> |
|||
<el-text class="mx-1" size="large">所属部门:</el-text> |
|||
<el-select v-model="admin.store" placeholder="请选择部门" style="width: 240px" clearable> |
|||
<el-option v-for="item in store" :key="item" :label="item" :value="item" /> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="head-card-btn"> |
|||
<el-button @click="reset()">重置</el-button> |
|||
<el-button type="primary" @click="search()">查询</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col> |
|||
<el-card> |
|||
<!-- 添加 --> |
|||
<div class="add-item"> |
|||
<el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增用户权限</el-button> |
|||
</div> |
|||
<div> |
|||
<el-table :data="tableData" :height="tableHeight" style="width: 100%; text-align: center;"> |
|||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|||
<template #default="scope"> |
|||
<span>{{ |
|||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="jwcode" label="精网号" /> |
|||
<el-table-column prop="name" label="姓名" /> |
|||
<el-table-column prop="area" label="所属地区" /> |
|||
<el-table-column prop="store" label="所属部门" /> |
|||
<el-table-column prop="permission" label="部门权限"> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.permission === '1'"> |
|||
总部管理员 |
|||
</span> |
|||
<span v-if="scope.row.permission === '2'"> |
|||
分部管理员 |
|||
</span> |
|||
<span v-if="scope.row.permission === '3'"> |
|||
分部审核员 |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="right" prop="operation" label="操作"> |
|||
<template #default="scope"> |
|||
<el-button type="warning" text @click="permissionEditInit(scope.row)"> |
|||
修改权限 |
|||
</el-button> |
|||
<el-popconfirm title="确定将此条活动删除吗?" @confirm="delConfirm"> |
|||
<template #reference> |
|||
<el-button type="danger" text @click="del(scope.row)"> |
|||
删除 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" @click="confirm"> |
|||
确定 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="pagination" style="margin-top: 20px"> |
|||
<el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total"> |
|||
<div>共{{ total }}条,每页</div> |
|||
<el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px"> |
|||
<el-option v-for="item in [5, 10, 20, 50, 100]" :key="item" :label="item" :value="item"></el-option> |
|||
</el-select> |
|||
<div>条</div> |
|||
</el-pagination> |
|||
<el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" :total="total" |
|||
:current-page="getObj.pageNum" @current-change="get"> |
|||
<div>跳至</div> |
|||
<el-input v-model="getObj.pageNum" style="width: 40px" @change="checkNumber" /> |
|||
<div>页</div> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 这是新增用户权限弹窗 --> |
|||
<el-dialog v-model="permissionAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false"> |
|||
|
|||
<div style="display: flex; margin: 20px 0px 20px 0px;"> |
|||
<span class="permissionVisible" style="margin-right: 10px;">精网号:</span> |
|||
<el-input placeholder="请输入精网号" v-model="permissionAddObj.jwcode" style="width: 240px; margin-right: 10px;" |
|||
clearable></el-input> |
|||
<el-button type="primary" @click="getAdminByJwcodeWithoutPermission()">查询</el-button> |
|||
</div> |
|||
|
|||
<el-descriptions class="margin-top" :column="2" :size="size" border label-width="200px"> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
员工精网号 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.jwcode }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<User /> |
|||
</el-icon> |
|||
员工姓名 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.name }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon :style="iconStyle"> |
|||
<location /> |
|||
</el-icon> |
|||
所属地区 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.area }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<OfficeBuilding /> |
|||
</el-icon> |
|||
部门 |
|||
</div> |
|||
</template> |
|||
{{ permissionAddObj.store }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
|
|||
<el-divider> |
|||
<el-icon><star-filled /></el-icon> |
|||
</el-divider> |
|||
<div> |
|||
<span class="permissionVisible" style="margin-right: 20px;">权限设置:</span> |
|||
<el-radio-group v-model="permissionAddObj.permission"> |
|||
<el-radio value="1" border>总部管理员</el-radio> |
|||
<el-radio value="2" border>分部管理员</el-radio> |
|||
<el-radio value="3" border>分部审核员</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<template #footer> |
|||
<div> |
|||
<el-button @click="closePermissionAddVisible()">取消</el-button> |
|||
<el-button type="primary" @click="permissionAdd()"> 提交 </el-button> |
|||
</div> |
|||
|
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<!-- 这是编辑用户权限弹窗 --> |
|||
<el-dialog v-model="permissionEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false"> |
|||
<el-descriptions class="margin-top" :column="2" :size="size" border label-width="200px"> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
员工精网号 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.jwcode }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<User /> |
|||
</el-icon> |
|||
员工姓名 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.name }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon :style="iconStyle"> |
|||
<location /> |
|||
</el-icon> |
|||
所属地区 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.area }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template #label> |
|||
<div class="permissionVisible"> |
|||
<el-icon> |
|||
<OfficeBuilding /> |
|||
</el-icon> |
|||
部门 |
|||
</div> |
|||
</template> |
|||
{{ permissionEditObj.store }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
|
|||
<el-divider> |
|||
<el-icon><star-filled /></el-icon> |
|||
</el-divider> |
|||
<div> |
|||
<span class="permissionVisible" style="margin-right: 20px;">权限设置:</span> |
|||
<el-radio-group v-model="permissionEditObj.permission"> |
|||
<el-radio value=1 border>总部管理员</el-radio> |
|||
<el-radio value=2 border>分部管理员</el-radio> |
|||
<el-radio value=3 border>分部审核员</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<template #footer> |
|||
<div> |
|||
<el-button @click="closePermissionEditVisible()">取消</el-button> |
|||
<el-button type="primary" @click="permissionEdit()"> 提交 </el-button> |
|||
</div> |
|||
|
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.permissionVisible { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.pagination { |
|||
display: flex; |
|||
} |
|||
|
|||
.status { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card { |
|||
display: flex; |
|||
} |
|||
|
|||
.head-card-element { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.head-card-btn { |
|||
margin-left: auto; |
|||
} |
|||
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue