副本

src/views/system/role2/index - 副本.vue

@@ -0,0 +1,370 @@
+<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 = {
+		tableData:[{num:111,age:222,renyuan:2},{num:111,age:222,renyuan:1}]
+	}
+}
+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}
+	delete formData.data.menuIds
+	console.log(formData.data)
+	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>