Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n
This commit is contained in:
zouzhibing
commit
b81ab54947
|
|
@ -8,8 +8,8 @@ pnpm-debug.log*
|
|||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
dist
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ const handleLink = (item)=>{
|
|||
|
||||
const matched = computed(() => route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false));
|
||||
|
||||
console.log('======matched=======',matched)
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -53,6 +53,132 @@ export const userData =[
|
|||
]
|
||||
|
||||
|
||||
export const deptData =[
|
||||
{
|
||||
"id": "0",
|
||||
"deptName": "华东分部",
|
||||
"orderNo": 1,
|
||||
"createTime": "2011-02-25 18:37:39",
|
||||
"remark": "世上无难事，只要肯登攀",
|
||||
"status": false,
|
||||
"children": [{
|
||||
"id": "0-0",
|
||||
"deptName": "研发部",
|
||||
"orderNo": 1,
|
||||
"createTime": "1995-10-07 03:22:40",
|
||||
"remark": "不曾扬帆，何以至远方",
|
||||
"status": true,
|
||||
"parentDept": "0"
|
||||
}, {
|
||||
"id": "0-1",
|
||||
"deptName": "市场部",
|
||||
"orderNo": 2,
|
||||
"createTime": "1972-06-20 09:33:40",
|
||||
"remark": "努力到无能为力，拼搏到感动自己",
|
||||
"status": false,
|
||||
"parentDept": "0"
|
||||
}, {
|
||||
"id": "0-2",
|
||||
"deptName": "商务部",
|
||||
"orderNo": 3,
|
||||
"createTime": "1992-10-31 02:54:45",
|
||||
"remark": "没有过不了的坎，就怕自己不奋斗",
|
||||
"status": false,
|
||||
"parentDept": "0"
|
||||
}, {
|
||||
"id": "0-3",
|
||||
"deptName": "财务部",
|
||||
"orderNo": 4,
|
||||
"createTime": "1971-07-06 13:01:49",
|
||||
"remark": "没有口水与汗水，就没有成功的泪水。",
|
||||
"status": true,
|
||||
"parentDept": "0"
|
||||
}]
|
||||
}, {
|
||||
"id": "1",
|
||||
"deptName": "华南分部",
|
||||
"orderNo": 2,
|
||||
"createTime": "1995-12-24 06:36:26",
|
||||
"remark": "这个世界从来不缺乏机遇，而是缺少抓住机遇的手。",
|
||||
"status": false,
|
||||
"children": [{
|
||||
"id": "1-0",
|
||||
"deptName": "研发部",
|
||||
"orderNo": 1,
|
||||
"createTime": "2022-05-10 12:44:05",
|
||||
"remark": "奋斗令我们的生活充满生机，责任让我们的生命充满意义！",
|
||||
"status": true,
|
||||
"parentDept": "1"
|
||||
}, {
|
||||
"id": "1-1",
|
||||
"deptName": "市场部",
|
||||
"orderNo": 2,
|
||||
"createTime": "2022-07-15 02:53:29",
|
||||
"remark": "学习之心不可无，懒惰之心不可有。",
|
||||
"status": true,
|
||||
"parentDept": "1"
|
||||
},
|
||||
{
|
||||
"id": "1-2",
|
||||
"deptName": "商务部",
|
||||
"orderNo": 3,
|
||||
"createTime": "2022-08-11 22:44:55",
|
||||
"remark": "学会等待，学会坚持，成功是一个循序渐进的过程。",
|
||||
"status": true,
|
||||
"parentDept": "1"
|
||||
}, {
|
||||
"id": "1-3",
|
||||
"deptName": "财务部",
|
||||
"orderNo": 4,
|
||||
"createTime": "2022-10-26 19:38:29",
|
||||
"remark": "能克服困难的人，可使困难化为良机",
|
||||
"status": false,
|
||||
"parentDept": "1"
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"id": "2",
|
||||
"deptName": "西北分部",
|
||||
"orderNo": 3,
|
||||
"createTime": "2022-08-27 16:49:21",
|
||||
"remark": "行为决定性格，性格决定命运",
|
||||
"status": false,
|
||||
"children": [{
|
||||
"id": "2-0",
|
||||
"deptName": "研发部",
|
||||
"orderNo": 1,
|
||||
"createTime": "2022-12-11 03:49:33",
|
||||
"remark": "带着自己的梦，以一种骄傲的姿态走下去",
|
||||
"status": false,
|
||||
"parentDept": "2"
|
||||
}, {
|
||||
"id": "2-1",
|
||||
"deptName": "市场部",
|
||||
"orderNo": 2,
|
||||
"createTime": "2022-06-18 20:15:34",
|
||||
"remark": "当世界都在说放弃的时候，轻轻的告诉自己：再试一次",
|
||||
"status": true,
|
||||
"parentDept": "2"
|
||||
}, {
|
||||
"id": "2-2",
|
||||
"deptName": "商务部",
|
||||
"orderNo": 3,
|
||||
"createTime": "2022-07-17 09:37:41",
|
||||
"remark": "不怕万人阻挡在前方，只怕自己先行投降",
|
||||
"status": true,
|
||||
"parentDept": "2"
|
||||
}, {
|
||||
"id": "2-3",
|
||||
"deptName": "财务部",
|
||||
"orderNo": 4,
|
||||
"createTime": "2022-11-23 04:34:33",
|
||||
"remark": "胸怀临云志，莫负少年时",
|
||||
"status": false,
|
||||
"parentDept": "2"
|
||||
}]
|
||||
}]
|
||||
|
||||
|
||||
export const roleData =[
|
||||
{
|
||||
roleName:'超级管理员',
|
||||
|
|
|
|||
|
|
@ -18,6 +18,12 @@ const systemRouter = [{
|
|||
name: 'user',
|
||||
meta: { title: '用户管理' , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: 'dept',
|
||||
component: () => import('@/views/system/dept/index.vue'),
|
||||
name: 'dept',
|
||||
meta: { title: '部门管理' , icon: 'MenuIcon'}
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
component: () => import('@/views/system/role/index.vue'),
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const rules = reactive({
|
|||
})
|
||||
// 表单数据
|
||||
const ruleForm = reactive({
|
||||
username: 'admin',
|
||||
username: 'vue-admin-perfect',
|
||||
password: '123456',
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="上级部门" prop="id">
|
||||
<el-cascader v-model="ruleForm.id" :options="deptDataOptions" :props="deptProps" clearable style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="ruleForm.deptName" placeholder="请输入部门名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" >
|
||||
<el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" >
|
||||
<el-input v-model="ruleForm.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfim(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
|
||||
import {reactive, ref} from "vue";
|
||||
import { deptData } from '@/mock/system'
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
const deptDataOptions = ref(deptData)
|
||||
const title = ref('新增部门')
|
||||
const deptProps = {
|
||||
value: 'id',
|
||||
label: 'deptName',
|
||||
checkStrictly:true
|
||||
}
|
||||
|
||||
const rules = reactive({
|
||||
deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
|
||||
id: [{required: true, message: '请选择上级部门', trigger: 'change',},],
|
||||
})
|
||||
|
||||
const ruleForm = reactive({
|
||||
deptName: '',
|
||||
id:'',
|
||||
remark:null,
|
||||
status:true
|
||||
})
|
||||
|
||||
function close() {
|
||||
ruleFormRef.value.resetFields()
|
||||
Object.keys(ruleForm).forEach(key=>{
|
||||
if(key==='sex') ruleForm[key] = '男'
|
||||
else if(key==='status') ruleForm[key] = true
|
||||
else ruleForm[key] = null
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const show = (item={})=>{
|
||||
title.value = '新增部门'
|
||||
if(item.deptName){
|
||||
title.value = '编辑部门'
|
||||
Object.keys(item).forEach(key=>{
|
||||
ruleForm[key] = item[key]
|
||||
})
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleConfim = async (done: () => void) => {
|
||||
await ruleFormRef.value.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
dialogVisible.value = false
|
||||
ElMessage.success( `提交数据：${JSON.stringify(ruleForm)}`)
|
||||
console.log('submit!', ruleForm)
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.header{
|
||||
display: flex;
|
||||
padding: 16px 16px 0px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.util{
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.table-inner{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.table{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="header">
|
||||
<el-form :inline="true" :model="formInline" ref="ruleFormRef">
|
||||
<el-form-item label="部门名称" prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入部门名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="util">
|
||||
<el-button type="primary" @click="addHandler">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增部门
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-inner">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
row-key="id"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
border>
|
||||
<el-table-column prop="deptName" label="部门名称" align="center"/>
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
inline-prompt
|
||||
active-text="启用" inactive-text="禁用"
|
||||
v-model="scope.row.status" @change="changeStatus(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark"
|
||||
:show-overflow-tooltip="true"
|
||||
width="300"
|
||||
label="备注" align="center"/>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
|
||||
<el-table-column prop="operator" label="操作" width="200px" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<DeptDialog ref="deptDialog"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import { deptData } from '@/mock/system'
|
||||
import DeptDialog from './components/deptDialog.vue'
|
||||
|
||||
const tableData = ref(deptData)
|
||||
const loading = ref(true)
|
||||
const dialogVisible = ref(false)
|
||||
const deptDialog = ref()
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const formInline = reactive({})
|
||||
|
||||
onMounted(()=>{
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},500)
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},500)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},500)
|
||||
}
|
||||
|
||||
const addHandler = () => {
|
||||
deptDialog.value.show()
|
||||
}
|
||||
const editHandler = (row) => {
|
||||
deptDialog.value.show(row)
|
||||
}
|
||||
|
||||
const del = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {})
|
||||
}
|
||||
const changeStatus = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要${!row.status ? '禁用' : '启用'} ${row.deptName} 账户吗？`,
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
},
|
||||
)
|
||||
.then(async () => {})
|
||||
.catch(() => {
|
||||
row.status = !row.status
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index";
|
||||
</style>
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
<div class="app-container">
|
||||
<div class="header">
|
||||
<el-form :inline="true" :model="formInline" ref="ruleFormRef">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="formInline.username" />
|
||||
<el-form-item label="菜单名称" prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入菜单名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="header">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="formInline.roleName" />
|
||||
<el-input v-model="formInline.roleName" placeholder="请输入角色名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
|
|
@ -19,7 +19,9 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="table-inner">
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData" style="width: 100%" border>
|
||||
<el-table-column prop="roleName" label="角色名称" />
|
||||
<el-table-column prop="roleIdentification" label="角色标识" />
|
||||
<el-table-column prop="status" label="角色状态" align="center">
|
||||
|
|
@ -54,13 +56,13 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
|
||||
import { reactive, ref } from 'vue'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import RoleDrawer from './components/roleDrawer.vue'
|
||||
import { roleData } from '@/mock/system'
|
||||
import * as dayjs from 'dayjs'
|
||||
const tableData = ref(roleData)
|
||||
|
||||
const loading = ref(true)
|
||||
const roleDrawer = ref()
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
|
@ -68,8 +70,18 @@
|
|||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},500)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},500)
|
||||
}
|
||||
const reset = (formEl: FormInstance | undefined) => {}
|
||||
const add = () => {
|
||||
roleDrawer.value.show()
|
||||
}
|
||||
|
|
@ -105,6 +117,12 @@
|
|||
})
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},500)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<el-card class="m-dept-side" >
|
||||
<div class="title">部门列表</div>
|
||||
<el-input v-model="filterText" placeholder="输入关键字进行过滤" class="filter-search"/>
|
||||
<div class="filter-tree">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="tableData"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {onBeforeMount, ref, watch} from 'vue'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { deptData } from '@/mock/system'
|
||||
|
||||
const tableData = ref<Tree[]>(deptData)
|
||||
interface Tree {
|
||||
id: string
|
||||
deptName: string
|
||||
orderNo: number
|
||||
createTime?:string
|
||||
remark?:string
|
||||
status?:boolean
|
||||
children?: Tree[]
|
||||
}
|
||||
|
||||
onBeforeMount( () => {
|
||||
let allObj = {"id": "", "deptName": "全部"}
|
||||
tableData.value = [allObj,...deptData]
|
||||
});
|
||||
|
||||
const filterText = ref('')
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'deptName',
|
||||
value:'id'
|
||||
}
|
||||
|
||||
// 监听输入
|
||||
watch(filterText, (val) => {
|
||||
treeRef.value!.filter(val)
|
||||
})
|
||||
|
||||
// 搜索
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
console.log(data)
|
||||
if (!value) return true
|
||||
return data.deptName.includes(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../index.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div class="m-user-table">
|
||||
<div class="header">
|
||||
<el-form :inline="true" :model="formInline" ref="ruleFormRef">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="formInline.username" placeholder="请输入用户名"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="util">
|
||||
<el-button type="primary" @click="addHandler">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-inner">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData" style="width: 100%;height: 100%" border>
|
||||
<el-table-column prop="username" label="用户名" align="center" width="100"/>
|
||||
<el-table-column prop="nickname" label="昵称" align="center"/>
|
||||
<el-table-column prop="sex" label="性别" align="center"/>
|
||||
<el-table-column prop="role" label="关联角色" align="center" width="120"/>
|
||||
<el-table-column prop="photo" label="手机号" align="center" width="120"/>
|
||||
<el-table-column prop="status" label="用户状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
inline-prompt
|
||||
active-text="启用" inactive-text="禁用"
|
||||
v-model="scope.row.status" @change="changeStatus(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe"
|
||||
:show-overflow-tooltip="true"
|
||||
width="180"
|
||||
label="用户描述" align="center"/>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
|
||||
<el-table-column prop="operator" label="操作" width="200px" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="1000"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UserDialog ref="userDialog"/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import { userData } from '@/mock/system'
|
||||
import UserDialog from './userDialog.vue'
|
||||
|
||||
const tableData = ref(userData)
|
||||
const dialogVisible = ref(false)
|
||||
const userDialog = ref()
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const formInline = reactive({})
|
||||
const loading = ref(true)
|
||||
const currentPage1 = ref(1)
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},1000)
|
||||
}
|
||||
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
loading.value = true
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},1000)
|
||||
}
|
||||
|
||||
|
||||
const addHandler = () => {
|
||||
userDialog.value.show()
|
||||
}
|
||||
const editHandler = (row) => {
|
||||
userDialog.value.show(row)
|
||||
}
|
||||
|
||||
const del = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {})
|
||||
}
|
||||
const changeStatus = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
},
|
||||
)
|
||||
.then(async () => {})
|
||||
.catch(() => {
|
||||
row.status = !row.status
|
||||
})
|
||||
}
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val: number) => {
|
||||
currentPage1.value = val
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
setTimeout(()=>{
|
||||
loading.value = false
|
||||
},1000)
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../index";
|
||||
</style>
|
||||
|
|
@ -1,37 +1,98 @@
|
|||
.header{
|
||||
.m-user{
|
||||
display: flex;
|
||||
padding: 16px 16px 0px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
flex-direction: row;
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
.m-user-table{
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.util{
|
||||
margin-bottom: 15px;
|
||||
width: calc(100% - 230px);
|
||||
.header{
|
||||
display: flex;
|
||||
padding: 16px 16px 0px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
}
|
||||
.footer{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.util{
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.table-inner{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.table{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
.pagination{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.table-inner{
|
||||
}
|
||||
|
||||
|
||||
.m-dept-side{
|
||||
box-sizing: border-box;
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
padding: 18px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
::v-deep(.el-card__body){
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 0!important;
|
||||
.el-tree-node__content{
|
||||
height: 33px;
|
||||
}
|
||||
.el-tree{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.filter-search{
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.title{
|
||||
flex-shrink: 0;
|
||||
margin: 0 0 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.filter-tree{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.table{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,112 +1,14 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="header">
|
||||
<el-form :inline="true" :model="formInline" ref="ruleFormRef">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="formInline.username" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
|
||||
<el-button @click="reset(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="util">
|
||||
<el-button type="primary" @click="addHandler">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增用户
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-inner">
|
||||
<el-table :data="tableData" style="width: 100%" border>
|
||||
<el-table-column prop="username" label="用户名" align="center"/>
|
||||
<el-table-column prop="nickname" label="昵称" align="center"/>
|
||||
<el-table-column prop="sex" label="性别" align="center"/>
|
||||
<el-table-column prop="role" label="关联角色" align="center" width="120"/>
|
||||
<el-table-column prop="photo" label="手机号" align="center" width="120"/>
|
||||
|
||||
<el-table-column prop="status" label="用户状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
inline-prompt
|
||||
active-text="启用" inactive-text="禁用"
|
||||
v-model="scope.row.status" @change="changeStatus(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="describe"
|
||||
:show-overflow-tooltip="true"
|
||||
width="180"
|
||||
label="用户描述" align="center"/>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
|
||||
<el-table-column prop="operator" label="操作" width="200px" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<UserDialog ref="userDialog"/>
|
||||
<div class="app-container m-user">
|
||||
<UserSide/>
|
||||
<UserTable/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
|
||||
import {Search } from '@element-plus/icons-vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { userData } from '@/mock/system'
|
||||
import UserDialog from './components/userDialog.vue'
|
||||
import * as dayjs from 'dayjs'
|
||||
const tableData = ref(userData)
|
||||
const dialogVisible = ref(false)
|
||||
const userDialog = ref()
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const formInline = reactive({})
|
||||
import UserTable from './components/userTable.vue'
|
||||
import UserSide from './components/userSide.vue'
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!', formInline)
|
||||
}
|
||||
const reset = (formEl: FormInstance | undefined) => {}
|
||||
|
||||
|
||||
const addHandler = () => {
|
||||
userDialog.value.show()
|
||||
}
|
||||
const editHandler = (row) => {
|
||||
userDialog.value.show(row)
|
||||
}
|
||||
|
||||
const del = (row) => {
|
||||
ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
draggable: true,
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {})
|
||||
}
|
||||
const changeStatus = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要${!row.status ? '禁用' : '启用'} ${row.username} 账户吗？`,
|
||||
'温馨提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
},
|
||||
)
|
||||
.then(async () => {})
|
||||
.catch(() => {
|
||||
row.status = !row.status
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue