admin/src/views/system/account/index.vue

<template>
	<el-container>
		<el-aside width="200px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree :default-expand-all="true" ref="groupRef" class="menu" node-key="dept_id" :data="group"
							 :props="groupsProps" :current-node-key="''" :highlight-current="true"
							 :expand-on-click-node="false" :filter-node-method="groupFilterNode"
							 @node-click="groupClick"></el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<pi-table ref="tableRef" :apiObj="api.system.account.list" @selection-change="selectionChange" stripe remoteSort
				  remoteFilter>
			<template #do>
				<el-button v-auth="'account:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
			</template>
			<template #search>
				<el-input v-model="search.name" placeholder="登录账号" clearable style="width: 200px;"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
			</template>
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column label="ID" prop="account_id" width="100"></el-table-column>
			<el-table-column label="头像" width="100">
				<template #default="scope">
					<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column label="账号" prop="username"></el-table-column>
			<el-table-column label="昵称" prop="nickname"></el-table-column>
			<el-table-column label="邮箱" prop="email"></el-table-column>
			<el-table-column label="电话" prop="phone"></el-table-column>
			<el-table-column label="角色" prop="roles">
				<template #default="scope">
					{{ scope.row.roles.map(item => item.role_name).toString() }}
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="create_time"></el-table-column>
			<el-table-column label="操作" fixed="right" align="right" width="160">
				<template #default="scope">
					<el-button-group>
						<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看
						</el-button>
						<el-button v-auth="'account:edit'" text type="success" size="small"
								   @click="table_edit(scope.row, scope.$index)">编辑
						</el-button>
						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
							<template #reference>
								<el-button v-auth="'account:del'" text type="danger" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</el-button-group>
				</template>
			</el-table-column>
		</pi-table>
	</el-container>
	<save-dialog v-if="dialogShow" ref="saveRef" @success="tableRef.refresh()" @closed="dialogShow=false"></save-dialog>
</template>
<script setup>
import saveDialog from './save'
import {ref, watch, onMounted, getCurrentInstance, nextTick} from "vue";
import api from "@/api/index";
import tools from "@/utils/tools";

defineOptions({
	name: 'systemAccount'
})

const {proxy} = getCurrentInstance()
const tableRef = ref(null)
const saveRef = ref(null)
const groupRef = ref(null)

let dialogShow = ref(false)
let showGrouploading = ref(false)
let groupFilterText = ref('')
let group = ref([])
let groupsProps = ref({
	value: "dept_id",
	label: "dept_name",
	emitPath: false,
	checkStrictly: true
})
let selection = ref([])
let search = ref({
	name: null,
	dept_id: null
})

watch(groupFilterText, (val) => {
	groupRef.value.filter(val);
})

onMounted(() => {
	getGroup()
})

//添加
function add() {
	dialogShow.value = true
	nextTick(() => {
		saveRef.value.open('add', null, group.value)
	})
}

//编辑
function table_edit(row) {
	dialogShow.value = true
	nextTick(() => {
		saveRef.value.open('edit', row, group.value)
	})
}

//查看
function table_show(row) {
	dialogShow.value = true
	nextTick(() => {
		saveRef.value.open('show', row, group.value)
	})
}

//删除
async function table_del(row) {
	const loading = proxy.$loading();
	var res = await api.system.account.del({ids: [row.account_id]});
	tableRef.value.refresh()
	loading.close();
	proxy.$message.success(res.msg)
}

//表格选择后回调事件
function selectionChange(e) {
	selection.value = e;
}

//加载树数据
async function getGroup() {
	showGrouploading.value = true;
	const res = await api.system.dept.option();
	showGrouploading.value = false;
	group.value = tools.makeTreeData(res.data, 0, "dept_id");
	group.value.unshift({'dept_id': null, 'dept_name': '所有部门'})
}

//树过滤
function groupFilterNode(value, data) {
	if (!value) return true;
	return data.label.indexOf(value) !== -1;
}

//树点击事件
function groupClick(data) {
	var params = {
		dept_id: data.dept_id
	}
	tableRef.value.reload(params)
}

//搜索
function upsearch() {
	tableRef.value.upData(search.value)
}
</script>