|
@@ -1,370 +0,0 @@
|
|
|
-<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: '添加角色',
|
|
|
- action: () => openModal('add'),
|
|
|
- disabled:!sourceList.pagination.tenantId
|
|
|
- },
|
|
|
- {
|
|
|
- text: '权限配置',
|
|
|
- plain: true,
|
|
|
- //type: 'warning',
|
|
|
- action: () => openRoomModal(),
|
|
|
- disabled:selection.data.length != 1,
|
|
|
- },
|
|
|
- ]"
|
|
|
- @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>
|