379 lines
13 KiB
Vue
379 lines
13 KiB
Vue
|
<template>
|
||
|
|
<!-- 用户 -->
|
||
|
|
<div style="margin-left: 25px">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
|
||
|
|
<el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
|
||
|
|
<el-tree style="max-width: 600px; margin-top: 2.2%" :data="userData" :props="defaultProps" @node-click="handleNodeClick" />
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="18" style="padding: 2.2% 1.4%">
|
||
|
|
<el-container>
|
||
|
|
<el-header style="display: flex; justify-content: space-between">
|
||
|
|
<div>
|
||
|
|
<el-input v-model="input2" size="large" style="width: 220px; margin-right: 10px" />
|
||
|
|
<el-button type="primary" size="large" :icon="Search" @click="userFromQuery">查询</el-button>
|
||
|
|
</div>
|
||
|
|
<el-button type="primary" size="large" :icon="CirclePlusFilled" @click="addUserFromData">新增</el-button>
|
||
|
|
</el-header>
|
||
|
|
<el-main>
|
||
|
|
<el-table
|
||
|
|
ref="multipleTableRef"
|
||
|
|
:data="tableData"
|
||
|
|
style="width: 100%"
|
||
|
|
:header-cell-style="{ color: '#333333', background: '#EFF0F1' }"
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
>
|
||
|
|
<el-table-column type="selection" width="180" />
|
||
|
|
<el-table-column property="account" label="账户名称" width="200" />
|
||
|
|
|
||
|
|
<el-table-column property="userName" label="账户中文名" width="200" />
|
||
|
|
<!-- <el-table-column property="address" label="是否禁用" /> -->
|
||
|
|
<!-- <el-table-column property="updatedTime" label="令牌超时" /> -->
|
||
|
|
<el-table-column property="address" label="操作">
|
||
|
|
<template #default="scope">
|
||
|
|
<span style="color: #0064aa; cursor: pointer" @click="viewUsers(scope)">查看 </span>
|
||
|
|
<span style="color: #0064aa"> | </span>
|
||
|
|
<span style="color: #0064aa; cursor: pointer" @click="userFromDelete(scope)"> 删除 </span>
|
||
|
|
<!-- <span style="color: #0064aa"> | </span>
|
||
|
|
<span style="color: #0064aa"> 门户 </span>
|
||
|
|
<span style="color: #0064aa"> | </span>
|
||
|
|
<span style="color: #0064aa"> 密码</span> -->
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-main>
|
||
|
|
<el-footer>
|
||
|
|
<div style="display: flex; justify-content: right">
|
||
|
|
<el-pagination
|
||
|
|
v-model:current-page="currentPage4"
|
||
|
|
v-model:page-size="pageSize4"
|
||
|
|
:page-sizes="[100, 200, 300, 400]"
|
||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
||
|
|
:total="400"
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</el-footer>
|
||
|
|
</el-container>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<!-- 用户新增页面 -->
|
||
|
|
<el-dialog v-model="visibleParam" title="新增账户" width="500" :before-close="handleCloseParam">
|
||
|
|
<el-form
|
||
|
|
:inline="true"
|
||
|
|
:model="formUserAdd"
|
||
|
|
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||
|
|
>
|
||
|
|
<el-form-item label="账户名称:" prop="account">
|
||
|
|
<el-input v-model="formUserAdd.account" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="密码: ">
|
||
|
|
<el-input v-model="formUserAdd.password" placeholder="" type="password" show-password clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="职员名称:" prop="userName">
|
||
|
|
<el-input v-model="formUserAdd.userName" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="职员邮箱:" prop="email">
|
||
|
|
<el-input v-model="formUserAdd.email" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="职员联系电话:" prop="phone">
|
||
|
|
<el-input v-model="formUserAdd.phone" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="所属机构ID:" prop="orgId">
|
||
|
|
<el-input v-model="formUserAdd.orgId" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button @click="visibleParam = false"> 取消 </el-button>
|
||
|
|
<el-button type="primary" @click="addOnSubmit">提交</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
<!-- 用户修改页面 -->
|
||
|
|
<el-dialog v-model="visibleParamUpData" title="查看账户" width="500" :before-close="handleCloseParamUp">
|
||
|
|
<el-form
|
||
|
|
:inline="true"
|
||
|
|
:model="formUserUpData"
|
||
|
|
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||
|
|
>
|
||
|
|
<el-form-item label="账户名称:" prop="account">
|
||
|
|
<el-input v-model="formUserUpData.account" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="密码: " prop="password">
|
||
|
|
<el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="职员名称:" prop="userName">
|
||
|
|
<el-input v-model="formUserUpData.userName" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="职员邮箱:" prop="email">
|
||
|
|
<el-input v-model="formUserUpData.email" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="职员联系电话:" prop="phone">
|
||
|
|
<el-input v-model="formUserUpData.phone" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="所属机构ID:" prop="orgId">
|
||
|
|
<el-input v-model="formUserUpData.orgId" placeholder="" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button @click="visibleParamUpData = false"> 取消 </el-button>
|
||
|
|
<el-button type="primary" @click="upDataOnSubmit">提交</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
<!-- 删除确认弹框 -->
|
||
|
|
<el-dialog v-model="userDeleteDialog" title="操作提示" width="500" :before-close="handleCloseDelete">
|
||
|
|
<span>确定是否删除?</span>
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer">
|
||
|
|
<el-button @click="userDeleteDialog = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="userDeleteDialog1"> 确定 </el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive, onMounted } from 'vue'
|
||
|
|
import { Search, CirclePlusFilled } from '@element-plus/icons-vue'
|
||
|
|
import { userQuery, userUpdate, userDelete, userAdd, userList } from '/@/api/backend'
|
||
|
|
import { ElTable, ElMessage } from 'element-plus'
|
||
|
|
import { useAdminInfo } from '/@/stores/adminInfo'
|
||
|
|
import { fa } from 'element-plus/es/locales.mjs'
|
||
|
|
import { values } from 'lodash-es'
|
||
|
|
const adminInfo = useAdminInfo()
|
||
|
|
const input1 = ref('')
|
||
|
|
const input2 = ref('')
|
||
|
|
interface Tree {
|
||
|
|
label: string
|
||
|
|
children?: Tree[]
|
||
|
|
id: string
|
||
|
|
}
|
||
|
|
|
||
|
|
// 用户左边树
|
||
|
|
const treeQuery = reactive({
|
||
|
|
parentOrgId: adminInfo.orgid,
|
||
|
|
recursive: true,
|
||
|
|
})
|
||
|
|
|
||
|
|
const userData = ref()
|
||
|
|
|
||
|
|
const getTree = () => {
|
||
|
|
console.log(treeQuery, 'treeQuery')
|
||
|
|
|
||
|
|
userList(treeQuery).then((res) => {
|
||
|
|
console.log(res, '树')
|
||
|
|
userData.value = res.data
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getTree()
|
||
|
|
})
|
||
|
|
|
||
|
|
const formQuery = reactive({
|
||
|
|
orgId: '',
|
||
|
|
recursive: false,
|
||
|
|
})
|
||
|
|
|
||
|
|
const treeId = ref()
|
||
|
|
|
||
|
|
const handleNodeClick = (data: Tree) => {
|
||
|
|
console.log(data.id, 'data')
|
||
|
|
|
||
|
|
treeId.value = data.id
|
||
|
|
formQuery.orgId = data.id
|
||
|
|
console.log(formQuery, '闵1')
|
||
|
|
|
||
|
|
RyUserQuery(formQuery)
|
||
|
|
}
|
||
|
|
|
||
|
|
const defaultProps = {
|
||
|
|
children: 'children',
|
||
|
|
label: 'name',
|
||
|
|
}
|
||
|
|
|
||
|
|
// 用户查询
|
||
|
|
interface userQuery {
|
||
|
|
// rows?: any[]
|
||
|
|
}
|
||
|
|
const tableData = ref()
|
||
|
|
const RyUserQuery = (data: any) => {
|
||
|
|
userQuery(data).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
console.log(res.rows, 'res111')
|
||
|
|
tableData.value = res.rows
|
||
|
|
} else {
|
||
|
|
ElMessage.error({
|
||
|
|
message: res.msg,
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
interface User {
|
||
|
|
date: string
|
||
|
|
name: string
|
||
|
|
address: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
||
|
|
const multipleSelection = ref<User[]>([])
|
||
|
|
|
||
|
|
const handleSelectionChange = (val: User[]) => {
|
||
|
|
multipleSelection.value = val
|
||
|
|
}
|
||
|
|
|
||
|
|
// 用户搜索
|
||
|
|
const formQuery1 = reactive({
|
||
|
|
userName: '',
|
||
|
|
})
|
||
|
|
const userFromQuery = () => {
|
||
|
|
formQuery1.userName = input2.value
|
||
|
|
console.log(formQuery1, '闵2')
|
||
|
|
|
||
|
|
RyUserQuery(formQuery1)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 用户增加
|
||
|
|
const visibleParam = ref(false)
|
||
|
|
interface RuleUser {
|
||
|
|
account: string
|
||
|
|
password: string
|
||
|
|
userName: string
|
||
|
|
email: string
|
||
|
|
phone: string
|
||
|
|
orgId: string
|
||
|
|
}
|
||
|
|
const formUserAdd = reactive({
|
||
|
|
account: '',
|
||
|
|
password: '',
|
||
|
|
userName: '',
|
||
|
|
email: '',
|
||
|
|
phone: '',
|
||
|
|
orgId: '',
|
||
|
|
})
|
||
|
|
|
||
|
|
const addUserFromData = () => {
|
||
|
|
visibleParam.value = true
|
||
|
|
formUserAdd.account = ''
|
||
|
|
formUserAdd.password = ''
|
||
|
|
formUserAdd.userName = ''
|
||
|
|
formUserAdd.email = ''
|
||
|
|
formUserAdd.phone = ''
|
||
|
|
formUserAdd.orgId = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleCloseParam = (data: any) => {
|
||
|
|
visibleParam.value = false
|
||
|
|
console.log(data)
|
||
|
|
}
|
||
|
|
|
||
|
|
const addOnSubmit = () => {
|
||
|
|
visibleParam.value = false
|
||
|
|
userAdd(formUserAdd).then((res) => {
|
||
|
|
console.log(res, '新增')
|
||
|
|
})
|
||
|
|
formQuery1.userName = input2.value
|
||
|
|
RyUserQuery(formQuery1)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面修改
|
||
|
|
const visibleParamUpData = ref(false)
|
||
|
|
|
||
|
|
const formUserUpData = reactive({ id: '', account: '', password: '', userName: '', email: '', phone: '', orgId: '' })
|
||
|
|
const viewUsers = (data: any) => {
|
||
|
|
console.log(data, '页面修改数据')
|
||
|
|
visibleParamUpData.value = true
|
||
|
|
formUserUpData.id = data.row.id
|
||
|
|
formUserUpData.account = data.row.account
|
||
|
|
formUserUpData.password = data.row.password
|
||
|
|
formUserUpData.userName = data.row.userName
|
||
|
|
formUserUpData.email = data.row.email
|
||
|
|
formUserUpData.phone = data.row.phone
|
||
|
|
formUserUpData.orgId = data.row.orgId
|
||
|
|
}
|
||
|
|
const upDataOnSubmit = () => {
|
||
|
|
console.log(formUserUpData, 'formUserUpData')
|
||
|
|
|
||
|
|
userUpdate(formUserUpData).then((res) => {
|
||
|
|
console.log(res, '修改成功')
|
||
|
|
})
|
||
|
|
visibleParamUpData.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleCloseParamUp = () => {
|
||
|
|
visibleParamUpData.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面删除
|
||
|
|
const userListDelete = reactive({
|
||
|
|
id: '',
|
||
|
|
})
|
||
|
|
const userFromDelete = (data: any) => {
|
||
|
|
userDeleteDialog.value = true
|
||
|
|
userListDelete.id = data.row.id
|
||
|
|
userDelete(userListDelete).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
setTimeout(() => {
|
||
|
|
ElMessage({
|
||
|
|
message: res.msg,
|
||
|
|
type: 'success',
|
||
|
|
})
|
||
|
|
}, 1000)
|
||
|
|
} else {
|
||
|
|
ElMessage.error({
|
||
|
|
message: res.msg,
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const userDeleteDialog = ref(false)
|
||
|
|
|
||
|
|
const handleCloseDelete = () => {
|
||
|
|
userDeleteDialog.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const userDeleteDialog1 = () => {
|
||
|
|
userDeleteDialog.value = false
|
||
|
|
formQuery.orgId = treeId.value
|
||
|
|
console.log(formQuery, 'formQuery')
|
||
|
|
RyUserQuery(formQuery)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 分页
|
||
|
|
const currentPage4 = ref(4)
|
||
|
|
const pageSize4 = ref(100)
|
||
|
|
|
||
|
|
const handleSizeChange = (val: number) => {
|
||
|
|
console.log(`${val} items per page`)
|
||
|
|
}
|
||
|
|
const handleCurrentChange = (val: number) => {
|
||
|
|
console.log(`current page: ${val}`)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.el-row {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
width: 99%;
|
||
|
|
height: 823px;
|
||
|
|
}
|
||
|
|
.el-row:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
.el-col {
|
||
|
|
// border-radius: 4px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|