安装 luckyexcel 修改菜单文件位置
This commit is contained in:
136
src/views/system/auth/audit/index.vue
Normal file
136
src/views/system/auth/audit/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div class="custom-table-header">
|
||||
<div class="title">待审核用户</div>
|
||||
<el-button :icon="Check" type="primary" @click="addRole" class="ml10">审核通过</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Check } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { checkUser } from '@/api/user-boot/user'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/audit'
|
||||
})
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
url: '/user-boot/user/checkUserList',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{ title: '名称', field: 'name' },
|
||||
{ title: '登录名', field: 'loginName' },
|
||||
{ title: '角色', field: 'roleName' },
|
||||
{ title: '部门', field: 'deptId' },
|
||||
{ title: '电话', field: 'phoneShow' },
|
||||
{ title: '注册时间', field: 'registerTime' },
|
||||
{ title: '类型', field: 'casualUserName' },
|
||||
{ title: '状态', field: 'stateName' },
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '审核通过',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Check',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
checkUser([row.id]).then(res => {
|
||||
tableStore.index()
|
||||
ElMessage.success('操作成功')
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '审核不通过',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Close',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定不通过该角色吗？'
|
||||
},
|
||||
click: row => {
|
||||
ElMessage.warning('功能尚未实现')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.deptId = item.deptId || '/'
|
||||
item.phoneShow = item.phone || '/'
|
||||
item.roleName = item.role.length ? item.role : '/'
|
||||
switch (item.casualUser) {
|
||||
case 0:
|
||||
item.casualUserName = '临时用户'
|
||||
break
|
||||
case 1:
|
||||
item.casualUserName = '长期用户'
|
||||
break
|
||||
default:
|
||||
item.casualUserName = '/'
|
||||
break
|
||||
}
|
||||
switch (item.state) {
|
||||
case 0:
|
||||
item.stateName = '注销'
|
||||
break
|
||||
case 1:
|
||||
item.stateName = '正常'
|
||||
break
|
||||
case 2:
|
||||
item.stateName = '锁定'
|
||||
break
|
||||
case 3:
|
||||
item.stateName = '待审核'
|
||||
break
|
||||
case 4:
|
||||
item.stateName = '休眠'
|
||||
break
|
||||
case 5:
|
||||
item.stateName = '密码过期'
|
||||
break
|
||||
default:
|
||||
item.stateName = '/'
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
tableStore.table.params.casualUser = 0
|
||||
tableStore.table.params.searchState = 0
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.searchBeginTime = ''
|
||||
tableStore.table.params.searchEndTime = ''
|
||||
tableStore.table.params.sortBy = ''
|
||||
tableStore.table.params.orderBy = ''
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const addRole = () => {
|
||||
if (!tableStore.table.selection.length) {
|
||||
ElMessage.warning('请选择用户')
|
||||
return
|
||||
}
|
||||
checkUser(tableStore.table.selection.map((item: any) => item.id)).then(res => {
|
||||
tableStore.index()
|
||||
ElMessage.success('操作成功')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
188
src/views/system/auth/department/index.vue
Normal file
188
src/views/system/auth/department/index.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div class="custom-table-header">
|
||||
<div class="title">部门列表</div>
|
||||
<el-input
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
style="width: 240px"
|
||||
placeholder="请输入部门名称"
|
||||
class="ml10"
|
||||
clearable
|
||||
@input="search"
|
||||
/>
|
||||
</div>
|
||||
<Table />
|
||||
<PopupForm ref="popupFormRef" @init="tableStore.index()"></PopupForm>
|
||||
<PopupPoint ref="popupPointRef"></PopupPoint>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, inject, provide, watch, onMounted } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import PopupForm from './popupForm.vue'
|
||||
import PopupPoint from './popupPoint.vue'
|
||||
import { deleteDept, selectPid } from '@/api/user-boot/dept'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/department'
|
||||
})
|
||||
|
||||
const popupFormRef = ref()
|
||||
const popupPointRef = ref()
|
||||
let originData: any[]
|
||||
const tableStore = new TableStore({
|
||||
publicHeight: 60,
|
||||
showPage: false,
|
||||
url: '/user-boot/dept/deptTree',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
align: 'left',
|
||||
treeNode: true
|
||||
},
|
||||
{ title: '区域', field: 'areaName', align: 'center' },
|
||||
{
|
||||
title: '类型',
|
||||
field: 'type',
|
||||
align: 'center',
|
||||
render: 'renderFormatter',
|
||||
renderFormatter: data => {
|
||||
const typeArr = ['非自定义', 'web自定义', 'App自定义', 'Web测试']
|
||||
return typeArr[data.type] || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
field: 'remark',
|
||||
align: 'center',
|
||||
render: 'renderFormatter',
|
||||
renderFormatter: data => {
|
||||
return data.remark || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
align: 'center',
|
||||
render: 'renderFormatter',
|
||||
renderFormatter: data => {
|
||||
return data.state === 1 ? '正常' : '删除'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
text: '新增',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupFormRef.value.open('新增部门', {
|
||||
pid: row.id,
|
||||
pArea: row.area
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
text: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupFormRef.value.open('编辑部门', {
|
||||
...row
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
text: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'basicButton',
|
||||
click: (row: any) => {
|
||||
if (row.children.length > 0) {
|
||||
ElMessageBox.confirm('该部门有子部门，是否确认删除', '提示', {
|
||||
confirmButtonText: '确认删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteDept([row.id]).then(response => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
deleteDept([row.id]).then(response => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
text: '绑定监测点',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
disabled: (row: any) => {
|
||||
return row.children.length > 0
|
||||
},
|
||||
click: row => {
|
||||
popupPointRef.value.open( row)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
originData = JSON.parse(JSON.stringify(tableStore.table.data))
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.stateName = item.state === 1 ? '正常' : '删除'
|
||||
item.remark = item.remark || '/'
|
||||
})
|
||||
nextTick(() => {
|
||||
tableStore.table.ref?.setAllTreeExpand(true)
|
||||
})
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const addMenu = () => {}
|
||||
const search = () => {
|
||||
tableStore.table.data = filterData(JSON.parse(JSON.stringify(originData)))
|
||||
nextTick(() => {
|
||||
tableStore.table.ref?.setAllTreeExpand(true)
|
||||
})
|
||||
}
|
||||
|
||||
// 过滤
|
||||
const filterData = (arr: treeData[]): treeData[] => {
|
||||
if (!tableStore.table.params.searchValue) {
|
||||
return arr
|
||||
}
|
||||
return arr.filter((item: treeData) => {
|
||||
if (item.name!.includes(tableStore.table.params.searchValue)) {
|
||||
return true
|
||||
} else if (item.children?.length > 0) {
|
||||
item.children = filterData(item.children)
|
||||
return item.children.length > 0
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
148
src/views/system/auth/department/popupForm.vue
Normal file
148
src/views/system/auth/department/popupForm.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="部门编号:" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入部门编号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门名称:" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入部门名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门类型:" prop="type">
|
||||
<el-select v-model="form.type" placeholder="选择部门类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in customDeptOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="子类型:" prop="specialType">
|
||||
<el-select v-model="form.specialType" placeholder="选择子类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in ziDeptOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门区域:" prop="area">
|
||||
<el-select v-model="form.area" placeholder="选择子类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in areaOption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门排序:" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入部门排序"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门描述:">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入部门描述"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import { getAreaTree, getPidAreaByAreaId,addDept,updateDept } from '@/api/user-boot/dept'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
area: '',
|
||||
name: '',
|
||||
pid: -1,
|
||||
remark: '',
|
||||
sort: 100,
|
||||
type: 0,
|
||||
code: '',
|
||||
specialType: 0,
|
||||
id:''
|
||||
})
|
||||
const originForm = { ...form }
|
||||
const rules = {
|
||||
parentName: [{ required: true, message: '请选择父节点', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输选择部门名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输选择部门类型', trigger: 'blur' }],
|
||||
specialType: [{ required: true, message: '请输选择部门子类型', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
|
||||
area: [{ required: true, message: '请选择部门区域', trigger: 'blur' }]
|
||||
}
|
||||
const customDeptOption = [
|
||||
{ value: 0, label: '非自定义' },
|
||||
{ value: 1, label: 'web自定义' },
|
||||
{ value: 2, label: 'App自定义' },
|
||||
{ value: 3, label: 'web测试' }
|
||||
]
|
||||
const ziDeptOption = [
|
||||
{ label: '非本部', value: 0 },
|
||||
{ label: '本部', value: 1 }
|
||||
]
|
||||
const areaOption = ref<any>([])
|
||||
const open = (text: string, data: anyObj) => {
|
||||
console.log(data)
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
getPidAreaByAreaId({
|
||||
id: data.area,
|
||||
type: 0
|
||||
}).then((res: any) => {
|
||||
areaOption.value = res.data
|
||||
})
|
||||
} else {
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = originForm[key]
|
||||
if (data[key]) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
}
|
||||
getAreaTree({
|
||||
id: data.pArea,
|
||||
type: 0
|
||||
}).then((res: any) => {
|
||||
areaOption.value = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await updateDept(form)
|
||||
} else {
|
||||
await addDept(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
262
src/views/system/auth/department/popupPoint.vue
Normal file
262
src/views/system/auth/department/popupPoint.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="cn-operate-dialog statistical-type-binding"
|
||||
v-model="dialogVisible"
|
||||
title="绑定监测点"
|
||||
style="width: 1040px"
|
||||
>
|
||||
<el-scrollbar style="padding-right: 0" v-loading="loading">
|
||||
<div class="box">
|
||||
<div class="box-left">
|
||||
<el-tree
|
||||
ref="leftTree"
|
||||
style="width: 100%; height: 100%"
|
||||
:props="props"
|
||||
:data="fromDataValue"
|
||||
:default-expanded-keys="leftDefaultExpandedKeys"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
@check="leftCheckChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="box-center">
|
||||
<el-button
|
||||
style="margin-left: 0"
|
||||
class="mt20"
|
||||
type="primary"
|
||||
icon="el-icon-ArrowRight"
|
||||
@click="bind"
|
||||
:disabled="fromData.length === 0"
|
||||
>
|
||||
绑定
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-left: 0"
|
||||
icon="el-icon-ArrowLeft"
|
||||
class="mt20"
|
||||
type="primary"
|
||||
@click="unbind"
|
||||
:disabled="toData.length === 0"
|
||||
>
|
||||
解绑
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="box-right">
|
||||
<el-tree
|
||||
ref="rightTree"
|
||||
style="width: 100%; height: 100%"
|
||||
:props="props"
|
||||
:data="toDataValue"
|
||||
:default-expanded-keys="rightDefaultExpandedKeys"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
@check="rightCheckChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { CascaderValue, ElMessage } from 'element-plus'
|
||||
import { getDeptBindDeptLineTree } from '@/api/user-boot/terminalTree'
|
||||
import { deptBindLine } from '@/api/user-boot/deptLine'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/setting/statisticalType/binding'
|
||||
})
|
||||
const pid = ref('')
|
||||
const binData = reactive({
|
||||
deptId: '',
|
||||
deptType: '',
|
||||
id: '',
|
||||
type: 0
|
||||
})
|
||||
const dialogVisible = ref(false)
|
||||
const loading = ref(false)
|
||||
const leftTree = ref()
|
||||
const rightTree = ref()
|
||||
const fromData = ref<treeData[]>([])
|
||||
const fromDataValue = ref<treeData[]>([])
|
||||
const leftDefaultExpandedKeys = ref<string[]>([])
|
||||
const toData = ref<treeData[]>([])
|
||||
const toDataValue = ref<treeData[]>([])
|
||||
const rightDefaultExpandedKeys = ref<string[]>([])
|
||||
const props = {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
const getExpandedKeys = (originArr: treeData[]) => {
|
||||
let arr: string[] = []
|
||||
const call = (originArr: treeData[]) => {
|
||||
originArr.forEach((item: treeData) => {
|
||||
if (item.level === 6) {
|
||||
arr.push(item.id as string)
|
||||
} else {
|
||||
call(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
call(originArr)
|
||||
return arr
|
||||
}
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
getDeptBindDeptLineTree(binData).then(res => {
|
||||
fromData.value = []
|
||||
fromDataValue.value = res.data[0]?.nothingBindTree || []
|
||||
toData.value = []
|
||||
toDataValue.value = res.data[0]?.myselfBindTree || []
|
||||
leftDefaultExpandedKeys.value = getExpandedKeys(fromDataValue.value)
|
||||
rightDefaultExpandedKeys.value = getExpandedKeys(toDataValue.value)
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 左侧源数据选中事件
|
||||
const leftCheckChange = (e: any) => {
|
||||
fromData.value = leftTree.value.getCheckedNodes().filter((item: any) => {
|
||||
return item.level === 6
|
||||
})
|
||||
}
|
||||
// 右侧目标数据选中事件
|
||||
const rightCheckChange = (e: any) => {
|
||||
toData.value = rightTree.value.getCheckedNodes().filter((item: any) => {
|
||||
return item.level === 6
|
||||
})
|
||||
}
|
||||
|
||||
// 定义一个函数来创建映射
|
||||
const createMapping = (data: treeData[], key: 'pid' | 'id') => {
|
||||
const map = new Map<string, treeData[]>()
|
||||
data.forEach((item: treeData) => {
|
||||
const list = map.get(item[key]) || []
|
||||
list.push(item)
|
||||
map.set(item[key], list)
|
||||
})
|
||||
return map
|
||||
}
|
||||
|
||||
// 定义一个函数来添加子节点
|
||||
const addChildren = (data: treeData[], map: Map<string, treeData[]>) => {
|
||||
data.forEach((item: treeData) => {
|
||||
if (item.level === 3) {
|
||||
let children =
|
||||
map.get(item.id as string)?.filter((child: treeData) => {
|
||||
return !item.children.find(child2 => (child.id as string) === child2.id)
|
||||
}) || []
|
||||
item.children.push(...children)
|
||||
} else {
|
||||
addChildren(item.children, map)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 定义一个函数来过滤子节点
|
||||
const filterChildren = (data: treeData[], map: Map<string, treeData[]>) => {
|
||||
data.forEach((item: treeData) => {
|
||||
if (item.level === 3) {
|
||||
const childrenIds = map.get(item.id as string)?.map(child => child.id as string) || []
|
||||
item.children = item.children.filter(child => !childrenIds.includes(child.id as string))
|
||||
} else {
|
||||
filterChildren(item.children, map)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const bind = () => {
|
||||
const map = createMapping(fromData.value, 'pid')
|
||||
filterChildren(fromDataValue.value, map)
|
||||
addChildren(toDataValue.value, map)
|
||||
rightDefaultExpandedKeys.value = getExpandedKeys(toDataValue.value)
|
||||
fromData.value = []
|
||||
leftTree.value.setCheckedKeys([])
|
||||
}
|
||||
|
||||
const unbind = () => {
|
||||
const map = createMapping(toData.value, 'pid')
|
||||
filterChildren(toDataValue.value, map)
|
||||
addChildren(fromDataValue.value, map)
|
||||
toData.value = []
|
||||
rightTree.value.setCheckedKeys([])
|
||||
leftDefaultExpandedKeys.value = getExpandedKeys(fromDataValue.value)
|
||||
}
|
||||
|
||||
const open = (row: any) => {
|
||||
console.log(row)
|
||||
dialogVisible.value = true
|
||||
binData.deptId = row.id
|
||||
binData.deptType = row.type
|
||||
binData.id = row.area
|
||||
init()
|
||||
}
|
||||
const submit = async () => {
|
||||
deptBindLine({
|
||||
id: binData.deptId,
|
||||
ids: getExpandedKeys(toDataValue.value)
|
||||
}).then(() => {
|
||||
ElMessage.success('绑定成功')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.statistical-type-binding-button-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.statistical-type-binding {
|
||||
.box {
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: calc(60vh - 95px);
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
.box-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100px;
|
||||
padding-top: 20px;
|
||||
margin: 0 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box-right,
|
||||
.box-left {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
flex: 1;
|
||||
|
||||
.el-cascader-menu {
|
||||
padding-right: 0;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-cascader-panel {
|
||||
height: 100%;
|
||||
|
||||
.el-cascader-menu__list {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
src/views/system/auth/menu/api.vue
Normal file
116
src/views/system/auth/menu/api.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="custom-table-header">
|
||||
<div class="title">接口权限列表</div>
|
||||
<el-input
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
style="width: 240px"
|
||||
placeholder="请输入菜单名称"
|
||||
class="ml10"
|
||||
clearable
|
||||
@input="search"
|
||||
/>
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" />
|
||||
<popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, Ref, inject, provide, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import popupApi from './popupApi.vue'
|
||||
import { deleteMenu } from '@/api/user-boot/function'
|
||||
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/api'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
}>()
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const apiList = ref([])
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/user-boot/function/getButtonById',
|
||||
column: [
|
||||
{ title: '普通接口/接口名称', field: 'name' },
|
||||
{ title: '接口类型', field: 'type' },
|
||||
{ title: 'URL接口路径', field: 'path' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('编辑接口权限', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
deleteMenu(row.id).then(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
apiList.value = tableStore.table.data
|
||||
search()
|
||||
}
|
||||
})
|
||||
tableStore.table.loading = false
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
tableStore.table.params.id = props.id
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const addMenu = () => {
|
||||
console.log(popupRef)
|
||||
popupRef.value.open('新增接口权限', {
|
||||
pid: props.id
|
||||
})
|
||||
}
|
||||
const search = () => {
|
||||
tableStore.table.data = apiList.value.filter(
|
||||
(item: any) =>
|
||||
!tableStore.table.params.searchValue ||
|
||||
item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
|
||||
item.path.indexOf(tableStore.table.params.searchValue) !== -1
|
||||
)
|
||||
}
|
||||
</script>
|
||||
38
src/views/system/auth/menu/index.vue
Normal file
38
src/views/system/auth/menu/index.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class='default-main' style='display: flex' v-loading='loading'>
|
||||
<Menu style='width: 500px' @init='init' @select='select' :menu-data='menuData' />
|
||||
<Api style='width: calc(100% - 500px)' @init='init' :id='selectedId' />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { functionTree } from '@/api/user-boot/function'
|
||||
import Menu from './menu.vue'
|
||||
import Api from './api.vue'
|
||||
import { provide, reactive, ref } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu'
|
||||
})
|
||||
const menuData = ref<any[]>([])
|
||||
const selectedId = ref('')
|
||||
const loading = ref(true)
|
||||
const select = (id: string) => {
|
||||
selectedId.value = id
|
||||
}
|
||||
const filterData = (arr: any[]) => {
|
||||
return arr.filter((item: any) => {
|
||||
if (item.children.length) {
|
||||
item.children = filterData(item.children)
|
||||
}
|
||||
return item.type === 0
|
||||
})
|
||||
}
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
functionTree().then(res => {
|
||||
menuData.value = filterData(res.data)
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
146
src/views/system/auth/menu/menu.vue
Normal file
146
src/views/system/auth/menu/menu.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="custom-table-header">
|
||||
<div class="title">菜单列表</div>
|
||||
<el-input
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
style="width: 240px"
|
||||
placeholder="请输入菜单名称"
|
||||
class="ml10"
|
||||
clearable
|
||||
@input="search"
|
||||
/>
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
|
||||
</div>
|
||||
<Table @currentChange="currentChange" />
|
||||
<popupMenu ref="popupRef" @init="emits('init')"></popupMenu>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, nextTick, inject, provide, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import popupMenu from './popupMenu.vue'
|
||||
import { delMenu } from '@/api/systerm'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/menu'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
(e: 'select', row: any): void
|
||||
}>()
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
menuData: treeData[]
|
||||
}>(),
|
||||
{
|
||||
menuData: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
)
|
||||
const popupRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/user-boot/function/functionTree',
|
||||
column: [
|
||||
{ title: '菜单名称', field: 'title', align: 'left', treeNode: true },
|
||||
{
|
||||
title: '图标',
|
||||
field: 'icon',
|
||||
align: 'center',
|
||||
width: '60',
|
||||
render: 'icon'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
text: '新增',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('新增菜单', { pid: row.id })
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
text: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('编辑菜单', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
text: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该菜单吗？'
|
||||
},
|
||||
click: row => {
|
||||
delMenu(row.id).then(() => {
|
||||
emits('init')
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
tableStore.table.loading = false
|
||||
watch(
|
||||
() => props.menuData,
|
||||
() => {
|
||||
search()
|
||||
}
|
||||
)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const addMenu = () => {
|
||||
console.log(popupRef)
|
||||
popupRef.value.open('新增菜单', {})
|
||||
}
|
||||
const currentChange = (newValue: any) => {
|
||||
emits('select', newValue.row.id)
|
||||
}
|
||||
const search = () => {
|
||||
tableStore.table.data = filterData(JSON.parse(JSON.stringify(props.menuData)))
|
||||
if (tableStore.table.params.searchValue) {
|
||||
nextTick(() => {
|
||||
tableStore.table.ref?.setAllTreeExpand(true)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤
|
||||
const filterData = (arr: treeData[]): treeData[] => {
|
||||
if (!tableStore.table.params.searchValue) {
|
||||
return arr
|
||||
}
|
||||
return arr.filter((item: treeData) => {
|
||||
if (item.title.includes(tableStore.table.params.searchValue)) {
|
||||
return true
|
||||
} else if (item.children?.length > 0) {
|
||||
item.children = filterData(item.children)
|
||||
return item.children.length > 0
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
103
src/views/system/auth/menu/popupApi.vue
Normal file
103
src/views/system/auth/menu/popupApi.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :mode="form" :inline="false" :model="form" label-width="120px" :rules="rules">
|
||||
<el-form-item prop="name" label="接口/按钮名称">
|
||||
<el-input v-model="form.name" placeholder="请输入接口名称" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="接口/按钮标识">
|
||||
<el-input v-model="form.code" placeholder="请输入英文接口标识" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="path" label="接口路径">
|
||||
<el-input v-model="form.path" placeholder="请输入接口路径" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="type" label="接口类型">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio :label="1">普通接口</el-radio>
|
||||
<el-radio :label="2">公用接口</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sort" label="排序">
|
||||
<el-input-number v-model="form.sort" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="remark" label="接口/按钮描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { update, add } from '@/api/user-boot/function'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/popupApi'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
}>()
|
||||
const form: any = reactive({
|
||||
id: '',
|
||||
pid: '0',
|
||||
code: '',
|
||||
name: '',
|
||||
path: '',
|
||||
type: 1,
|
||||
sort: 100,
|
||||
remark: ''
|
||||
})
|
||||
const rules = {
|
||||
code: [
|
||||
{ required: true, message: '标识不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,15}$/,
|
||||
message: '请输入至少3-20位英文',
|
||||
min: 3,
|
||||
max: 20,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
name: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
|
||||
path: [{ required: true, message: '请输入接口路径', trigger: 'blur' }]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data: anyObj) => {
|
||||
title.value = text
|
||||
// 重置表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
form.type = 1
|
||||
form.pid = data.pid
|
||||
if (data.id) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key] || ''
|
||||
}
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const submit = async () => {
|
||||
if (form.id) {
|
||||
await update(form)
|
||||
} else {
|
||||
let obj = JSON.parse(JSON.stringify(form))
|
||||
delete obj.id
|
||||
await add(obj)
|
||||
}
|
||||
emits('init')
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
111
src/views/system/auth/menu/popupMenu.vue
Normal file
111
src/views/system/auth/menu/popupMenu.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader
|
||||
v-model="form.pid"
|
||||
:options="tableStore.table.data"
|
||||
:props="cascaderProps"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input v-model="form.name" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标">
|
||||
<IconSelector v-model="form.icon" placeholder="请选择图标" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单路由">
|
||||
<el-input v-model="form.path" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组件路径">
|
||||
<el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/auth/audit/index.vue或auth/audit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||||
import { updateMenu, addMenu } from '@/api/systerm'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu/popupMenu'
|
||||
})
|
||||
const emits = defineEmits<{
|
||||
(e: 'init'): void
|
||||
}>()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const cascaderProps = {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
}
|
||||
const form: any = reactive({
|
||||
code: '',
|
||||
icon: '',
|
||||
id: '',
|
||||
name: '',
|
||||
path: '',
|
||||
pid: '0',
|
||||
remark: '',
|
||||
routeName: '',
|
||||
sort: 100,
|
||||
type: 0
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data: anyObj) => {
|
||||
console.log(data)
|
||||
title.value = text
|
||||
// 重置表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
form.pid = data.pid || '0'
|
||||
form.sort = 100
|
||||
form.type = 0
|
||||
|
||||
if (data.id) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key] ? data[key] : data[key] === 0 ? 0 : ''
|
||||
}
|
||||
form.path = data.routePath || ''
|
||||
form.name = data.title || ''
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const submit = async () => {
|
||||
if (form.id) {
|
||||
await updateMenu(form)
|
||||
} else {
|
||||
form.code = 'menu'
|
||||
let obj = JSON.parse(JSON.stringify(form))
|
||||
delete obj.id
|
||||
await addMenu(obj)
|
||||
}
|
||||
emits('init')
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
162
src/views/system/auth/role/index.vue
Normal file
162
src/views/system/auth/role/index.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="default-main" style="display: flex" :style="{ height: height }">
|
||||
<div style="flex: 1; overflow: hidden">
|
||||
<div class="custom-table-header">
|
||||
<div class="title">角色列表</div>
|
||||
<el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
|
||||
</div>
|
||||
<Table ref="tableRef" @currentChange="currentChange" />
|
||||
</div>
|
||||
<Tree
|
||||
v-if="menuListId"
|
||||
ref="treeRef"
|
||||
show-checkbox
|
||||
width="350px"
|
||||
:data="menuTree"
|
||||
:checkStrictly="checkStrictly"
|
||||
@check-change="checkChange"
|
||||
></Tree>
|
||||
<el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
|
||||
<PopupForm ref="popupRef"></PopupForm>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import Tree from '@/components/tree/index.vue'
|
||||
import { functionTree } from '@/api/user-boot/function'
|
||||
import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { del } from '@/api/user-boot/role'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import PopupForm from './popupForm.vue'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'auth/role'
|
||||
})
|
||||
const height = mainHeight(20).height
|
||||
const treeRef = ref()
|
||||
const menuTree = ref<treeData[]>([])
|
||||
const popupRef = ref()
|
||||
const checkStrictly = ref(true)
|
||||
const menuListId = ref('')
|
||||
const tableStore = new TableStore({
|
||||
showPage: false,
|
||||
url: '/user-boot/role/selectRoleDetail?id=' + adminInfo.$state.userType,
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '角色名称', field: 'name', align: 'center' },
|
||||
{ title: '角色编码', field: 'code', align: 'center' },
|
||||
{ title: '备注', field: 'remark', align: 'center' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
width: '80',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '注销',
|
||||
1: '正常'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
popupRef.value.open('编辑角色', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该角色吗？'
|
||||
},
|
||||
click: row => {
|
||||
del([row.id]).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
const filterData = (arr: any[]) => {
|
||||
// return arr.filter((item: any) => {
|
||||
// item.name = item.title
|
||||
// if (item.children.length) {
|
||||
// item.children = filterData(item.children)
|
||||
// }
|
||||
// return item.type === 0
|
||||
// })
|
||||
arr.forEach((item: any) => {
|
||||
item.name = item.title
|
||||
if (item.children.length) {
|
||||
filterData(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
functionTree().then((res: any) => {
|
||||
filterData(res.data)
|
||||
menuTree.value = res.data
|
||||
})
|
||||
|
||||
const currentChange = (data: any) => {
|
||||
checkStrictly.value = true
|
||||
menuListId.value = data.row.id
|
||||
getFunctionsByRoleIndex({ id: data.row.id }).then((res: any) => {
|
||||
treeRef.value.treeRef.setCheckedKeys(res.data.map((item: any) => item.id))
|
||||
})
|
||||
}
|
||||
|
||||
const timeout = ref<NodeJS.Timeout>()
|
||||
const checkChange = (data: any) => {
|
||||
if (checkStrictly.value) {
|
||||
checkStrictly.value = false
|
||||
return
|
||||
}
|
||||
if (timeout.value) {
|
||||
clearTimeout(timeout.value)
|
||||
}
|
||||
timeout.value = setTimeout(() => {
|
||||
updateRoleMenu({
|
||||
id: menuListId.value,
|
||||
idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const addRole = () => {
|
||||
popupRef.value.open('新增角色')
|
||||
}
|
||||
</script>
|
||||
75
src/views/system/auth/role/popupForm.vue
Normal file
75
src/views/system/auth/role/popupForm.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="form.name" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码">
|
||||
<el-input v-model="form.code" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色描述">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { add, update } from '@/api/user-boot/role'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
code: '',
|
||||
name: '',
|
||||
remark: '',
|
||||
id: '',
|
||||
type: 0
|
||||
})
|
||||
const rules = {
|
||||
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const submit = async () => {
|
||||
if (form.id) {
|
||||
await update(form)
|
||||
} else {
|
||||
form.type = adminInfo.$state.userType + 1
|
||||
await add(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
226
src/views/system/auth/userList/index.vue
Normal file
226
src/views/system/auth/userList/index.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="用户状态">
|
||||
<el-select v-model="tableStore.table.params.searchState" placeholder="选择用户状态">
|
||||
<el-option
|
||||
v-for="(item, index) in userState"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型:">
|
||||
<el-select v-model="tableStore.table.params.casualUser" placeholder="选择用户类型">
|
||||
<el-option
|
||||
v-for="(item, index) in casualUser"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键词:">
|
||||
<el-input
|
||||
style="width: 240px"
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
clearable
|
||||
placeholder="仅根据用户名/登录名"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Plus" type="primary" @click="addUser">添加</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<PopupEdit ref="popupEditRef"></PopupEdit>
|
||||
<PopupPwd ref="popupPwdRef"></PopupPwd>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import PopupEdit from './popupEdit.vue'
|
||||
import PopupPwd from './popupPwd.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/userlist'
|
||||
})
|
||||
const popupEditRef = ref()
|
||||
const popupPwdRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/list',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '用户名称', field: 'name', minWidth: '130' },
|
||||
{ title: '登录名', field: 'loginName', minWidth: '130' },
|
||||
{ title: '角色', field: 'roleName', minWidth: '130' },
|
||||
{ title: '部门', field: 'deptName', minWidth: '200' },
|
||||
{ title: '电话', field: 'phoneShow', minWidth: '100' },
|
||||
{ title: '注册时间', field: 'registerTime', minWidth: '130' },
|
||||
{ title: '登录时间', field: 'loginTime', minWidth: '130' },
|
||||
{ title: '类型', field: 'casualUserName', minWidth: '80' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
width: '100',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
2: 'warning',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
5: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '注销',
|
||||
1: '正常',
|
||||
2: '锁定',
|
||||
3: '待审核',
|
||||
4: '休眠',
|
||||
5: '密码过期'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
popupEditRef.value.open('编辑用户', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改密码',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Lock',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
passwordConfirm(value).then(res => {
|
||||
popupPwdRef.value.open(row.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
|
||||
},
|
||||
click: row => {
|
||||
activateUser({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
ElMessage.success('激活成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '注销',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-SwitchButton',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1 && row.state !== 3
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
passwordConfirm(value).then(res => {
|
||||
deluser({
|
||||
id: row.id
|
||||
}).then(() => {
|
||||
ElMessage.success('注销成功')
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.deptName = item.deptName || '/'
|
||||
item.phoneShow = item.phone || '/'
|
||||
item.roleName = item.role.length ? item.role : '/'
|
||||
switch (item.casualUser) {
|
||||
case 0:
|
||||
item.casualUserName = '临时用户'
|
||||
break
|
||||
case 1:
|
||||
item.casualUserName = '长期用户'
|
||||
break
|
||||
default:
|
||||
item.casualUserName = '/'
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchState = 1
|
||||
tableStore.table.params.casualUser = -1
|
||||
tableStore.table.params.orderBy = ''
|
||||
const userState = [
|
||||
{ label: '全部', value: -1 },
|
||||
{ label: '注销', value: 0 },
|
||||
{ label: '正常', value: 1 },
|
||||
{ label: '锁定', value: 2 },
|
||||
{ label: '待审核', value: 3 },
|
||||
{ label: '休眠', value: 4 },
|
||||
{ label: '密码过期', value: 5 }
|
||||
]
|
||||
const casualUser = [
|
||||
{ label: '全部', value: -1 },
|
||||
{ label: '临时用户', value: 0 },
|
||||
{ label: '长期用户', value: 1 }
|
||||
]
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const addUser = () => {
|
||||
popupEditRef.value.open('新增用户')
|
||||
}
|
||||
</script>
|
||||
267
src/views/system/auth/userList/popupEdit.vue
Normal file
267
src/views/system/auth/userList/popupEdit.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="true" :model="form" label-width="120px" :rules="rules">
|
||||
<el-form-item label="用户名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入昵称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="登录名" prop="loginName">
|
||||
<el-input v-model="form.loginName" placeholder="请输入登录名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="默认密码" prop="password" v-if="title === '新增用户'">
|
||||
<el-input v-model="form.password" placeholder="请输入密码" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限类型" prop="type">
|
||||
<el-select
|
||||
v-model="form.type"
|
||||
@change="changeValue"
|
||||
disabled
|
||||
placeholder="请选择权限类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in UserTypeOption"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型" prop="casualUser">
|
||||
<el-select v-model="form.casualUser" placeholder="请选择用户类型类型">
|
||||
<el-option
|
||||
v-for="(item, index) in TypeOptions"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" prop="deptId">
|
||||
<Area style="width: 100%" v-model="form.deptId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="form.role" placeholder="请选择角色" multiple collapse-tags>
|
||||
<el-option
|
||||
v-for="(item, index) in roleOptions"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="起始IP" prop="limitIpStart">
|
||||
<el-input v-model="form.limitIpStart" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束IP" prop="limitIpEnd">
|
||||
<el-input v-model="form.limitIpEnd" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="时间段" prop="limitTime">
|
||||
<el-slider v-model="form.limitTime" range show-stops :max="24" />
|
||||
</el-form-item>
|
||||
<el-form-item label="短信通知" prop="smsNotice">
|
||||
<el-radio-group v-model="form.smsNotice">
|
||||
<el-radio-button :label="0">是</el-radio-button>
|
||||
<el-radio-button :label="1">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮件通知" prop="emailNotice">
|
||||
<el-radio-group v-model="form.emailNotice">
|
||||
<el-radio-button :label="0">是</el-radio-button>
|
||||
<el-radio-button :label="1">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户ID">
|
||||
<div style="display: flex; width: 100%">
|
||||
<el-radio-group v-model="useId">
|
||||
<el-radio-button :label="1">是</el-radio-button>
|
||||
<el-radio-button :label="0">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input
|
||||
:disabled="title !== '新增用户'"
|
||||
v-model="form.id"
|
||||
placeholder="请输入用户id"
|
||||
v-if="useId"
|
||||
style="flex: 1"
|
||||
class="ml10"
|
||||
></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage, FormItemRule } from 'element-plus'
|
||||
import { roleList } from '@/api/user-boot/role'
|
||||
import { add, edit } from '@/api/user-boot/user'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import Area from '@/components/form/area/index.vue'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
// do not use same name with ref
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
password: '123456',
|
||||
email: '',
|
||||
limitIpStart: '',
|
||||
deptId: '',
|
||||
deptName: '',
|
||||
casualUser: 1,
|
||||
loginName: '',
|
||||
phone: '',
|
||||
limitIpEnd: '',
|
||||
limitTime: [1, 2],
|
||||
role: [],
|
||||
smsNotice: 0,
|
||||
emailNotice: 0,
|
||||
type: 0
|
||||
})
|
||||
const rules:Partial<Record<string, Array<FormItemRule>>> = {
|
||||
name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
|
||||
role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
|
||||
loginName: [{ required: true, message: '登录名不能为空', trigger: 'blur' }],
|
||||
casualUser: [{ required: true, message: '用户类型不能为空', trigger: 'blur' }],
|
||||
smsNotice: [{ required: true, message: '短信通知不能为空', trigger: 'blur' }],
|
||||
emailNotice: [{ required: true, message: '邮件通知不能为空', trigger: 'blur' }],
|
||||
email: [
|
||||
{ required: false, message: '邮箱不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'email',
|
||||
message: "'请输入正确的邮箱地址",
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{ required: false, message: '手机号不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
limitTime: [{ required: true, message: '时间段不能为空', trigger: 'blur' }],
|
||||
limitIpStart: [
|
||||
{ required: true, message: '起始IP不能为空', trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
|
||||
let isCorrect = regexp.test(value)
|
||||
if (value == '') {
|
||||
return callback(new Error('请输入IP地址'))
|
||||
} else if (!isCorrect) {
|
||||
callback(new Error('请输入正确的IP地址'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
limitIpEnd: [
|
||||
{ required: true, message: '结束IP不能为空', trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
|
||||
let isCorrect = regexp.test(value)
|
||||
if (value == '') {
|
||||
return callback(new Error('请输入IP地址'))
|
||||
} else if (!isCorrect) {
|
||||
callback(new Error('请输入正确的IP地址'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
const UserTypeOption = [
|
||||
{ label: '管理员', value: 1 },
|
||||
{ label: '普通用户', value: 2 }
|
||||
]
|
||||
const TypeOptions = [
|
||||
{ label: '临时用户', value: 0 },
|
||||
{ label: '长期用户', value: 1 }
|
||||
]
|
||||
const useId = ref(1)
|
||||
const roleOptions = ref<treeData>()
|
||||
const queryRole = () => {
|
||||
roleList(adminInfo.$state.userType).then((res: any) => {
|
||||
roleOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
queryRole()
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
form.limitTime = data.limitTime.split('-')
|
||||
form.role = data.roleList
|
||||
} else {
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
}
|
||||
form.casualUser = 1
|
||||
form.limitTime = [0, 23]
|
||||
form.role = []
|
||||
form.smsNotice = 0
|
||||
form.emailNotice = 0
|
||||
useId.value = 1
|
||||
form.id = ''
|
||||
form.limitIpStart = '0.0.0.0'
|
||||
form.limitIpEnd = '255.255.255.255'
|
||||
form.password = '123456'
|
||||
}
|
||||
form.type = adminInfo.$state.userType + 1
|
||||
}
|
||||
const submit = async () => {
|
||||
let obj = JSON.parse(JSON.stringify(form))
|
||||
obj.limitTime = obj.limitTime.join('-')
|
||||
delete obj.password
|
||||
if (form.id) {
|
||||
await edit(obj)
|
||||
ElMessage.success('修改成功')
|
||||
} else {
|
||||
form.type = adminInfo.$state.userType + 1
|
||||
await add(obj)
|
||||
ElMessage.success('新增成功')
|
||||
}
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const changeValue = () => {}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
97
src/views/system/auth/userList/popupPwd.vue
Normal file
97
src/views/system/auth/userList/popupPwd.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="修改密码">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="新密码" prop="newPwd">
|
||||
<el-input v-model="form.newPwd" type="password" placeholder="请输入新密码" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPwd">
|
||||
<el-input v-model="form.confirmPwd" type="password" placeholder="请输入确认密码" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { validatePwd } from '@/utils/common'
|
||||
import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
|
||||
import { debug } from 'console'
|
||||
|
||||
const formRef = ref()
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const form = reactive({
|
||||
id: '',
|
||||
newPwd: '',
|
||||
confirmPwd: '',
|
||||
loginName: ''
|
||||
})
|
||||
const rules = {
|
||||
newPwd: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ validator: validatePwd, trigger: 'blur' }
|
||||
],
|
||||
confirmPwd: [
|
||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 16,
|
||||
message: '长度在 6 到 16 个字符',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== form.newPwd) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('新增菜单')
|
||||
const open = (id: string, loginName: string) => {
|
||||
form.id = id
|
||||
form.loginName = loginName
|
||||
form.newPwd = ''
|
||||
form.confirmPwd = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const submit = async () => {
|
||||
formRef.value.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
updatePassword({
|
||||
id: form.id,
|
||||
newPassword: form.newPwd
|
||||
}).then((res: any) => {
|
||||
ElMessage.success('密码修改成功')
|
||||
dialogVisible.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
Reference in New Issue
Block a user