byte-sailing-new/src/views/system/role2/index.vue

<template>
	<div class="role">
        <div class="tree">
            <treeList
                :data="treeListData"
                v-model="sourceList.pagination.tenantId"
                node-key="id"
                @change="treeChange"
            >
            </treeList>
        </div>
		<div class="content">
			<byTable
				:source="sourceList.data"
				:pagination="sourceList.pagination"
				:config="config"
				:loading="loading"
				highlight-current-row
				:selectConfig="selectConfig"
				:table-events="{
					//element talbe事件都能传
					'select': select,
				}"
				:action-list="[
					{
						text: '权限配置',
						plain: true,
						//type: 'warning',
						action: () => openRoomModal(),
						disabled:selection.data.length != 1,
					},
					{
						text: '添加角色',
						action: () => openModal('add'),
						disabled:!sourceList.pagination.tenantId
					},
				]"
				@get-list="getList"
			>
				<template #slotName="{ item }">
					{{ item.createTime }}
				</template>
			</byTable>
		</div>
		<el-dialog
			:title="modalType == 'add' ? '新增' : '编辑'"
			v-model="dialogVisible"
			width="500"
			v-loading="loading"
		>
			<byForm
				:formConfig="formConfig"
				:formOption="formOption"
				v-model="formData.data"
				:rules="rules"
				ref="byform"
			>
				
			</byForm>
			<template #footer>
				<el-button @click="dialogVisible = false" size="large"
					>取 消</el-button
				>
				<el-button
					type="primary"
					@click="submitForm('byform')"
					size="large"
					:loading="submitLoading">
					确 定
				</el-button>
			</template>
		</el-dialog>
		<el-dialog
			title="权限配置"
			v-model="roomDialogVisible"
			width="500"
			:before-close="handleClose"
			v-loading="loading">
				
				<el-tree
					:data="treeData"
					:show-checkbox="true"
					v-model="formData.treeData"
					ref="tree"
					node-key="id"
				>
				</el-tree>
			<template #footer>
				<el-button @click="roomDialogVisible = false" size="large"
					>取 消</el-button
				>
				<el-button
					type="primary"
					@click="submitTree('byform')"
					size="large"
					:loading="submitLoading">
					确 定
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>
  
<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from 'element-plus'
import byTable from '@/components/byTable/index'
import byForm from '@/components/byForm/index'
import treeList from '@/components/treeList/index'
import { computed, defineComponent, ref } from 'vue'
const loading = ref(false)
const submitLoading = ref(false)
const sourceList = ref({
	data: [],
	pagination: {
		total: 3,
		pageNum: 1,
		pageSize: 10,

	},
})
let dialogVisible = ref(false)
let roomDialogVisible = ref(false)
let modalType = ref('add')
let rules = ref({
	roleKey: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
	roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
})
const { proxy } = getCurrentInstance()
const selectConfig = computed(() => {
	return [
	]
})
const config = computed(() => {
	return [
        {
			type: 'selection',
			attrs: {
				label: '多选',
				prop: 'remark',
			},
		},
		{
			attrs: {
				label: '角色编码',
				prop: 'roleKey',
			},
		},
		{
			attrs: {
				label: '角色名称',
				prop: 'roleName',
				align: 'left',
			},
		},
		{
			attrs: {
				label: '创建时间',
				prop: 'createTime',
			},
		},
		{
			attrs: {
				label: '操作',
				width: '200',
				align: 'right',
			},
			// 渲染 el-button，一般用在最后一列。
			renderHTML(row) {
				return [
					{
						attrs: {
							label: '修改',
							type: 'primary',
							text: true,
						},
						el: 'button',
						click() {
							getDtl(row)
						},
					},
					{
						attrs: {
							label: '删除',
							type: 'danger',
							text: true,
						},
						el: 'button',
						click() {
							// 弹窗提示是否删除
							ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
							})
								.then(() => {
									// 删除
									proxy.post('/tenantRole/' + row.roleId, {
										id: row.roleId,
									},'delete').then((res) => {
										ElMessage({
											message: '删除成功',
											type: 'success',
										})
										getList()
									})
								})
						},
					},
				]
			},
		},
	]
})

let formData = reactive({
	data:{},
	treeData:[],
})
const formOption = reactive({
	inline: true,
	labelWidth: 100,
	itemWidth: 100,
	rules: [],
})
const byform = ref(null)
const treeData = ref([])
const treeListData = ref([])
const formConfig = computed(() => {
	return [
        
		{
			type: 'input',
			prop: 'roleKey',
			label: '角色编码',
			required: true,
			itemWidth: 100,
			//disabled:true,
			itemType: 'text',
		},
		{
			type: 'input',
			prop: 'roleName',
			label: '角色名称',
			required: true,
			itemWidth: 100,
			//disabled:true,
			itemType: 'text',
		},
	]
})
const getTreeList = () => {
    proxy.post('/tenantInfo/list').then((message) => {
        message.map((item) => {
            item.label = item.enterpriseName
            item.id = item.tenantId
            item.children = []
        })
        treeListData.value = message
        console.log(treeListData.value)
    })
}
const getList = async (req) => {
	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
	loading.value = true
	proxy.get('/tenantRole/list',sourceList.value.pagination).then((message) => {
		console.log(message)
		sourceList.value.data = message.rows
		sourceList.value.pagination.total = message.total
		setTimeout(() => {
			loading.value = false
		}, 200)
	})
}

const treeChange = ((e) => {
	console.log(e)
    sourceList.value.pagination.tenantId = e.id
    getList({tenantId:e.id})
})

const openModal = () => {
	dialogVisible.value = true
	modalType.value = 'add'
	formData.data = {}
}
const TreetenantId = ref('')
const selection = ref({
	data:[],
})
const select = (_selection, row) => {
	selection.value.data = _selection
	console.log(_selection.length)
}
const openRoomModal = () => {
	roomDialogVisible.value = true
	proxy.get('/tenantRole/roleMenuTreeSelect/' + selection.value.data[0].roleId).then((res) => {
		if(res.code == 200){
			treeData.value = res.menus
			formData.treeData = res.checkedKeys
			tree.value.setCheckedKeys(res.checkedKeys)
		}
	})
}
const tree = ref(null)
const submitTree = () => {
	proxy.post('/tenantRole', {
		... selection.value.data[0],
		menuIds:tree.value.getCheckedKeys(),
	},'PUT').then((res) => {
		ElMessage({
			message: '保存成功',
			type: 'success',
		})
		roomDialogVisible.value = false
	})
}



const submitForm = () => {
	
	byform.value.handleSubmit((valid) => {
		const method = modalType.value == 'add' ? 'POST' : 'PUT'
		console.log(method)
		proxy.post(
				'/tenantRole',
				{...formData.data,
					tenantId:sourceList.value.pagination.tenantId,
					roleSort:1,
					status:"0"},
					method
				).then((res) => {
			ElMessage({
				message: modalType.value == 'add' ? '添加成功' : '编辑成功',
				type: 'success',  
			})
			dialogVisible.value = false
			getList()
		})
	})
}

const getDtl = (row) => {
	formData.data = {...row}
	
	modalType.value = 'edit'
	console.log(modalType.value)
	dialogVisible.value = true
}
getTreeList()
getList()
</script>
  
<style lang="scss" scoped>
.role {
	padding: 20px;
    display: flex;
    justify-content: space-between;
    .tree{
        width: 300px;
    }
    .content{
        width:calc(100% - 320px);
    }
}
</style>