123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
- <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>
|