rax-medical/src/views/permissions-manage/role-manage.vue

<template>
	<div class="table-page">
		<div class="search-part" v-show="isSearch">
			<div class="search-cell">
				<span class="label">角色名称</span>
				<el-input v-model="queryParams" placeholder="请输入角色名称"></el-input>
			</div>
			<el-button type="primary" icon="Search" @click="search">查询</el-button>
			<el-button icon="Refresh" @click="resetSearch">重置</el-button>
		</div>
		<div class="button-part" style="justify-content: space-between;">
			<div>
				<el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
				<el-button icon="FirstAidKit" @click="importData">导入</el-button>
				<el-button icon="Delete" @click="removeData()">删除</el-button>
			</div>
			<TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="init"
										@downloadBtn="exportData('角色数据', tableData)"></TableAbility>
		</div>
		<div class="table-part">
			<el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip
								@row-click="tableRowClick">
				<el-table-column type="selection" width="55"/>
				<el-table-column type="index" label="#" width="55" align="center"/>
				<el-table-column property="roleName" label="角色名称" width="120" align="center"/>
				<el-table-column property="roleCode" label="角色标识" width="180" align="center"/>
				<el-table-column property="roleDesc" label="角色描述" width="120" align="center"/>
				<el-table-column property="dataPermissions" label="数据权限" width="120" align="center"/>
				<el-table-column label="创建时间" width="220" align="center">
					<template #default="scope">{{ scope.row.createTime }}</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<div @click.stop>
							<el-button link icon="RefreshLeft" @click="empower(scope.row)">授权</el-button>
							<el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
							<el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination-part">
			<CommonPagination :total="total" @paginationChange="paginationChange"/>
		</div>
	</div>
	<el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%">
		<RoleForm ref="RoleFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false"/>
	</el-dialog>
	<ImportDialog ref="importDialogRef" title="角色导入" templateUrl="#" importUrl="#"/>
	<EmpowerDialog ref="empowerDialogRef"/>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import {dateFormater} from '@/utils/date-util'
import {exportData, tableRemoveRow} from '@/utils/table-util'
import CommonPagination from '@/components/common-pagination.vue'
import RoleForm from './form/role-form.vue'
import ImportDialog from '@/components/import-dialog.vue'
import EmpowerDialog from './form/empower-dialog.vue'
import * as roleApi from "@/api/role";

const tableRef = ref()
const RoleFormRef = ref()
const importDialogRef = ref()
const empowerDialogRef = ref()
const isSearch = ref(true)
const loading = ref(true)
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref("")
const tableData = ref([] as any)
let current = 0;
let size = 10;
const total = ref(0);

onMounted(() => {
	init();
})

function init() {
	loading.value = true
	total.value = 0;
	current = 0;
	tableData.value = [];
	getRoleList();
	loading.value = false
}

function getRoleList() {
	roleApi.getRoleList(current, size, queryParams.value).then((res: any) => {
		if (res.code == 0) {
			total.value = res.data.total
			tableData.value = res.data.records
		}
	})
}

function search() {
	init();
}

function resetSearch() {
	queryParams.value = "";
	init();
}

const addData = () => {
	isFormDialog.value = true
	formDialogTitle.value = '添加'
	setTimeout(() => {
		RoleFormRef.value.resetData()
	}, 0)
}
const importData = () => {
	setTimeout(() => {
		importDialogRef.value.open()
	}, 0);
}
const removeData = (e?: any) => {
	const selectRow = e || tableRef.value.getSelectionRows()
	tableRemoveRow({data: selectRow}, (res: boolean) => {
		if (res) {
			// console.log('调用删除', selectRow)
		}
	})
}
const empower = (e: any) => {
	setTimeout(() => {
		empowerDialogRef.value.open()
	})
}
const editData = (e: any) => {
	isFormDialog.value = true
	formDialogTitle.value = '修改'
	setTimeout(() => {
		RoleFormRef.value.resetData()
//		RoleFormRef.value.formData = JSON.parse(JSON.stringify(e))
	}, 0)
}
const tableRowClick = (row: any) => {
	tableRef.value.toggleRowSelection(row)
}

const paginationChange = (page: number, s: number) => {
	current = page
	size = s
	getRoleList()
}
</script>

<style lang='scss' scoped></style>