Merge branch 'main' of http://121.37.111.42:3000/ThbTech/gis-bi
This commit is contained in:
commit
857a44bbf7
7
core/core-frontend/src/api/permission/menu.ts
Normal file
7
core/core-frontend/src/api/permission/menu.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export const getMenuTree = params => request.post({ url: '/menuInterface/getMenuTree', params }) // 查询菜单
|
||||
export const addMenu = data => request.post({ url: '/menuInterface/addMenu', data }) // 新增菜单
|
||||
export const updateMenuById = data => request.post({ url: '/menuInterface/updateMenuById', data }) //修改菜单
|
||||
export const deleteMenuById = id => request.post({ url: '/menuInterface/deleteMenuById?id=' + id }) //删除菜单
|
||||
export const setModuleId = params => request.post({ url: '/menuInterface/setModuleId',params }) //关联模块
|
||||
@ -1,9 +1,8 @@
|
||||
import request from '@/config/axios'
|
||||
import { param } from 'jquery'
|
||||
|
||||
export const getOrganizations = params => request.post({ url: '/organization/getOrganizations', params }) // 查询企业/部门
|
||||
export const addOrganization = data => request.post({ url: '/organization/addOrganization', data }) // 新增企业/部门
|
||||
export const updateOrganizationById = data => request.post({ url: '/organization/updateOrganizationById', data }) //修改企业/部门
|
||||
export const setIsValid = params => request.post({ url: '/organization/setIsValid', params }) //设置有效状态
|
||||
export const deleteById = id => request.delete({ url: '/organization/deleteById?id=' + id }) //删除
|
||||
export const getOrganizationById = data => request.post({ url: '/organization/getOrganizationById', data })//根据id查询部门
|
||||
export const getOrganizationById = appId => request.post({ url: '/organization/listOrganization?appId=' + appId })//查询所有
|
||||
|
||||
@ -5,4 +5,6 @@ export const addRole = data => request.post({ url: '/role/addRole', data }) //
|
||||
export const updateRole = data => request.post({ url: '/role/updateRole', data }) //修改企业/部门
|
||||
export const setIsValid = params => request.post({ url: '/role/setIsvaild', params }) //设置有效状态
|
||||
export const deleteRoleById = id => request.post({ url: '/role/deleteRoleById?id=' + id }) //删除
|
||||
export const deleteRoleByIds = id => request.post({ url: '/role/deleteRoleByIds?ids=' + id }) //删除
|
||||
export const deleteRoleByIds = id => request.post({ url: '/role/deleteRoleByIds?ids=' + id }) //删除
|
||||
export const permissionAssignment = params => request.post({ url: '/menuInterface/permissionAssignment', params }) //查询角色权限
|
||||
export const setMenuByRoleId = params => request.post({ url: '/role/setMenuByRoleId', params }) //设置角色权限
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export const listRole = params => request.post({ url: '/role/listRole', params }) // 查询角色
|
||||
export const addRole = data => request.post({ url: '/role/addRole', data }) // 新增角色
|
||||
export const updateRole = data => request.post({ url: '/role/updateRole', data }) //修改企业/部门
|
||||
export const setIsValid = params => request.post({ url: '/role/setIsvaild', params }) //设置有效状态
|
||||
export const deleteRoleById = id => request.post({ url: '/role/deleteRoleById?id=' + id }) //删除
|
||||
export const deleteRoleByIds = id => request.post({ url: '/role/deleteRoleByIds?ids=' + id }) //删除
|
||||
export const queryUsers = params => request.get({ url: '/user/queryUsers', params }) // 查询用户
|
||||
export const addUser = data => request.post({ url: '/user/addUser', data }) // 新增用户
|
||||
export const updateUser = data => request.post({ url: '/user/updateUser', data }) //修改用户
|
||||
export const setStatus = params => request.post({ url: '/user/setStatus', params }) //设置有效状态
|
||||
export const deleteUserById = id => request.post({ url: '/user/deleteUserById?id=' + id }) //删除
|
||||
export const deleteUserByIds = id => request.post({ url: '/user/deleteUserByIds?ids=' + id }) //删除
|
||||
export const resetPassword = id => request.post({ url: '/user/resetPassword?id=' + id }) //重置密码
|
||||
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -234 -82 )">
|
||||
<path d="M 15.6489771659627 5.58084539738125 C 15.6489771659627 5.9071829622354 15.3833382658067 6.17203664557273 15.0560332016855 6.17203664557273 L 1.0151200765489 6.17203664557273 C 0.687815012427734 6.17203664557273 0.4221761122717 5.9071829622354 0.4221761122717 5.58084539738125 C 0.4221761122717 5.25450783252711 0.687815012427734 4.98965414918976 1.0151200765489 5 L 15.0560332016855 5 C 15.3833382658067 4.98965414918976 15.6489771659627 5.25450783252711 15.6489771659627 5.58084539738125 Z M 8.03557663123866 15.4088087518085 C 8.03557663123866 15.7351463166627 7.76993773108262 16 7.44263266696152 16 L 2.20100800510329 16 C 0.986658765255129 16 0 15.0162577543372 0 13.8054980770356 L 0 2.19450192296443 C 0 0.983742245662796 0.986658765255129 0 2.20100800510329 0 L 13.7989919948968 0 C 15.0133412347449 0 16 0.983742245662796 16 2.19450192296443 L 16 8.60301507095585 C 16 8.92935263581001 15.734361099844 9.19420631914734 15.4070560357228 9.19420631914734 C 15.0797509716016 9.19420631914734 14.8141120714456 8.92935263581001 14.8141120556886 8.60301507095585 L 14.8141120556886 2.19450192296443 C 14.8141120556886 1.63641737537108 14.3587310907456 1.18238249638297 13.7989919948968 1.18238249638297 L 2.20100800510329 1.18238249638297 C 1.64126889349745 1.18238249638297 1.18588792855439 1.63641737537108 1.18588792855439 2.19450192296443 L 1.18588792855439 13.8054980770356 C 1.18588792855439 14.3635826246289 1.64126889349745 14.817617503617 2.20100800510329 14.817617503617 L 7.44263266696152 14.817617503617 C 7.76993773108262 14.817617503617 8.03557663123866 15.0824711869544 8.03557663123866 15.4088087518085 Z M 11.8161873658743 13.8054980770356 C 11.8161873658743 14.1318356418897 11.5505484657182 14.396689325227 11.2232434015971 14.396689325227 C 10.8959383374759 14.396689325227 10.6302994373199 14.1318356418897 10.6302994373199 13.8054980770356 L 10.6302994373199 8.60774460634578 C 10.6302994373199 8.28140704149163 10.8959383374759 8.01655335815428 11.2232434015971 8.01655335815428 C 11.5505484657182 8.01655335815428 11.8161873658743 8.28140704149163 11.8161873658743 8.60774460634578 L 11.8161873658743 13.8054980770356 Z M 14.422769049035 11.2066213338354 C 14.422769049035 11.5329588986896 14.157130148879 11.7978125820269 13.8298250847578 11.7978125977374 L 8.61666171843632 11.7978125977374 C 8.28935665431516 11.7978125977374 8.02371775415912 11.5329589144 8.02371775415912 11.2066213338354 C 8.02371775415912 10.8802837532709 8.28935665431516 10.615430085644 8.61666171843632 10.615430085644 L 13.8298250847578 10.615430085644 C 14.157130148879 10.615430085644 14.422769049035 10.8802837689813 14.422769049035 11.2066213338354 Z " fill-rule="nonzero" fill="#f2f4f5" stroke="none" transform="matrix(1 0 0 1 234 82 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1517 -14 )">
|
||||
<path d="M 2.88857142857134 4.294857140625 C 2.88857142857134 1.92287303915592 4.94879254195277 0 7.49020407924101 0 C 10.0316156165292 0 12.0918367299107 1.92287303915592 12.0918367299107 4.294857140625 L 12.0918367299107 6.01714285937501 L 13.7755102064732 6.01714285937501 C 14.4517772457616 6.01714285937501 15 6.52881742999759 15 7.16 L 15 14.857142859375 C 15 15.4883254293774 14.4517772457616 16 13.7755102064732 16 L 1.22448979352677 16 C 0.548222754238412 16 0 15.4883254293774 0 14.857142859375 L 0 7.16114285937499 C 0 6.52996028937258 0.548222754238412 6.01828571875001 1.22448979352677 6.01828571875001 L 2.88857142857134 6.01714285937501 L 2.88857142857134 4.294857140625 Z M 13.622448984375 7.304 L 13.622448984375 7.30285714062501 L 1.37755101562496 7.30285714062501 L 1.37755101562496 14.71428571875 L 13.622448984375 14.71428571875 L 13.622448984375 7.304 Z M 7.50042687601324 8.19574046956365 C 8.02775428347023 8.19574046956365 8.54578884408007 8.32531208050162 9.0024489843749 8.57142857812499 L 9.14571428571435 8.657142859375 C 9.25617510877016 8.49554826555732 9.44608546002834 8.39640862456156 9.65142857142861 8.39314285937499 L 9.66244898437489 8.39314285937499 C 9.99632510263016 8.3930923817673 10.2686841044029 8.64271849041873 10.2746938727679 8.95428571874999 L 10.2746938727679 10.035428578125 C 10.2747366625985 10.3474835534233 10.0065467252901 10.6018642538417 9.67224490513388 10.606857140625 L 8.51387755580358 10.606857140625 C 8.1747579618667 10.6068578817596 7.90064658099985 10.3510205929505 7.90064658099985 10.0354293036346 C 7.90064658099985 9.80424182807002 8.0498995951943 9.59583222438414 8.27877550781255 9.507428578125 L 8.38897958705364 9.56228571874999 C 8.11851487371695 9.41654797964026 7.81171348994081 9.3398235297048 7.49941038852155 9.3398235297048 C 6.51679438247892 9.3398235297048 5.72022672222699 10.0832866792734 5.72022672222699 11.0003949515798 C 5.72022672222699 11.9175032238862 6.51679438247892 12.6609663734548 7.49941038852155 12.6609663734548 C 8.12483359749251 12.6609663734548 8.70432749896785 12.3544758604932 9.02571428571426 11.85371428125 L 9.04040815848215 11.830857140625 C 9.15029682550003 11.6559087958213 9.35130063418804 11.5484254594859 9.56858159948898 11.5484254594859 C 9.90671512375611 11.5484254594859 10.180826504623 11.804262748295 10.180826504623 12.1198540376109 C 10.180826504623 12.2188780490904 10.153255429407 12.3162024896552 10.1008163337054 12.40228571875 C 9.56403521261564 13.2688791609476 8.57291611806813 13.8025976258137 7.50042687601324 13.8025976258137 C 5.8415438214366 13.8025976258137 4.49675339945072 12.5474598986269 4.49675339945072 10.9991690476887 C 4.49675339945072 9.45087819675038 5.8415438214366 8.19574046956365 7.50042687601324 8.19574046956365 Z M 7.49142857142853 1.28571428124999 L 7.49020407924101 1.28685714062499 C 5.71054921948335 1.28748786575292 4.26802271330676 2.63384593818435 4.26734693638407 4.294857140625 L 4.26734693638407 6.004571421875 L 10.7155102064732 6.004571421875 L 10.7155102064732 4.294857140625 C 10.7155102064732 2.63295342932997 9.27203969067323 1.28571428124999 7.49142857142853 1.28571428124999 Z " fill-rule="nonzero" fill="#0089ff" stroke="none" transform="matrix(1 0 0 1 1517 14 )" />
|
||||
</g>
|
||||
</svg>
|
||||
1
core/core-frontend/src/assets/svg/user_connect_white.svg
Normal file
1
core/core-frontend/src/assets/svg/user_connect_white.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747901509493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2624" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M686.3 630.3V513.2c0-19.9-16.1-36-36-36s-36 16.1-36 36v101.1H136.7V136.7h477.6v98.8c0 19.9 16.1 36 36 36s36-16.1 36-36V120.7c0-30.9-25.1-56-56-56H120.7c-30.9 0-56 25.1-56 56v509.6c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56z" fill="#ffffff" p-id="2625"></path><path d="M903.8 337.8H394.2c-30.9 0-56 25.1-56 56v118c0 19.9 16.1 36 36 36s36-16.1 36-36v-102h477.6v477.6H410.2V784.6c0-19.9-16.1-36-36-36s-36 16.1-36 36v118.7c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56V393.8c0-30.9-25.1-56-56-56z" fill="#ffffff" p-id="2626"></path></svg>
|
||||
|
After Width: | Height: | Size: 874 B |
@ -212,6 +212,13 @@ export const routes: AppRouteRecordRaw[] = [
|
||||
hidden: true,
|
||||
meta: {},
|
||||
component: () => import('@/viewsnew/application/permissionset/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/menuconfig',
|
||||
name: 'menuconfig',
|
||||
hidden: true,
|
||||
meta: {},
|
||||
component: () => import('@/viewsnew/application/menuconfig/index.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -277,14 +277,12 @@ const handleAvatarSuccess = file => {
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
color: #ffffff;
|
||||
top: 11px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
.ed-dialog__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
top: 10px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
.ed-dialog {
|
||||
border: 1px solid #4f5052;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -104,7 +104,7 @@ function delClick(row){
|
||||
<img src="@/assets/newimg/icon/editpro.png" @click="updateClick(item)" title="编辑项目">
|
||||
<img src="@/assets/newimg/icon/edit.png" alt="" title="编辑数据源" @click="routerClick(item,'/datasourcenew')">
|
||||
<img src="@/assets/newimg/icon/dataset.png" alt="" title="编辑数据集" @click="routerClick(item,'/datasetnew')">
|
||||
<img src="@/assets/newimg/icon/caidan.png" alt="" title="菜单配置">
|
||||
<img src="@/assets/newimg/icon/caidan.png" alt="" title="菜单配置" @click="routerClick(item,'/menuconfig')">
|
||||
<img src="@/assets/newimg/icon/fuwu.png" alt="" title="服务配置">
|
||||
<img src="@/assets/newimg/icon/permission.png" alt="" title="权限设置" @click="routerClick(item,'/permissionset')">
|
||||
<img src="@/assets/newimg/icon/export.png" alt="" title="导出">
|
||||
|
||||
@ -0,0 +1,557 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted,computed, reactive,nextTick,onBeforeMount, watch } from 'vue'
|
||||
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
|
||||
import FormCreate from '@/viewsnew/common/FormCreate.vue'
|
||||
import { initCanvasData } from '@/utils/canvasUtils'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { moduleList } from '@/api/application/module'
|
||||
import { ElTree,FormInstance } from 'element-plus'
|
||||
import { publicTree } from '@/utils/validate';
|
||||
import { setModuleId } from '@/api/permission/menu'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
const props = defineProps({
|
||||
applicationId:String,
|
||||
assoccurrentid:String,
|
||||
assocmenuname:String,
|
||||
currentNodeId:String
|
||||
})
|
||||
const defaultPropss = {
|
||||
children: 'children',
|
||||
label: "name"
|
||||
}
|
||||
const emits = defineEmits(['assochandleClose','assocsubmit'])
|
||||
const keywords = ref('')
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const showPosition = ref("preview")
|
||||
const dvPreviewRef = ref(null)
|
||||
const state = reactive({
|
||||
canvasDataPreview: null,
|
||||
canvasStylePreview: null,
|
||||
canvasViewInfoPreview: null,
|
||||
dvInfo: null,
|
||||
curPreviewGap: 0
|
||||
})
|
||||
const moduleInfo = ref({})
|
||||
const isFormCreate = ref(false)
|
||||
const busiFlag = ref('dataV')
|
||||
const dataInitState = ref(true)
|
||||
const downloadStatus = ref(false)
|
||||
const moduleloading = ref(false)
|
||||
const rightloading = ref(false)
|
||||
const assocdialog = ref(false)
|
||||
const assocmenuname = ref('')
|
||||
const moduletreeData = ref([])
|
||||
const moduletreeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const assoccurrentid = ref('')
|
||||
const loadCanvasData = (dvId, weight?, ext?) => {
|
||||
const initMethod = initCanvasData
|
||||
dataInitState.value = false
|
||||
initMethod(
|
||||
dvId,
|
||||
busiFlag.value,
|
||||
function ({
|
||||
canvasDataResult,
|
||||
canvasStyleResult,
|
||||
dvInfo,
|
||||
canvasViewInfoPreview,
|
||||
curPreviewGap
|
||||
}) {
|
||||
dvInfo['weight'] = weight
|
||||
dvInfo['ext'] = ext || 0
|
||||
state.canvasDataPreview = canvasDataResult
|
||||
state.canvasStylePreview = canvasStyleResult
|
||||
state.canvasViewInfoPreview = canvasViewInfoPreview
|
||||
state.dvInfo = dvInfo
|
||||
state.curPreviewGap = curPreviewGap
|
||||
dataInitState.value = true
|
||||
dvMainStore.updateCurDvInfo(dvInfo)
|
||||
nextTick(() => {
|
||||
dvPreviewRef.value?.restore()
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
const handleNodeClick = (e: any) => {
|
||||
if(e.node_type == '01'){
|
||||
assoccurrentid.value = ''
|
||||
moduletreeRef.value!.setCurrentKey(null)
|
||||
return
|
||||
}
|
||||
assoccurrentid.value = e.id
|
||||
// 树节点点击
|
||||
isFormCreate.value = false
|
||||
dataInitState.value = false
|
||||
if(e.type == '0301'){
|
||||
busiFlag.value = 'dashboard'
|
||||
loadCanvasData(e.id,9,0)
|
||||
}else if(e.type == '03'){
|
||||
busiFlag.value = 'dataV'
|
||||
loadCanvasData(e.id,9,0)
|
||||
}else if(e.type == '09'){
|
||||
moduleInfo.value = e
|
||||
isFormCreate.value = true
|
||||
}
|
||||
rightloading.value = false
|
||||
}
|
||||
function assochandleClose(){
|
||||
assocdialog.value = false
|
||||
emits('assochandleClose')
|
||||
}
|
||||
function assocsubmit(){
|
||||
const params = {
|
||||
id: props.currentNodeId,
|
||||
moduleId: assoccurrentid.value
|
||||
}
|
||||
setModuleId(params).then(res => {
|
||||
if(res.data.code == '0'){
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '关联成功',
|
||||
})
|
||||
assocdialog.value = false;
|
||||
emits('assocsubmit')
|
||||
}else{
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '关联失败',
|
||||
})
|
||||
emits('assochandleClose')
|
||||
}
|
||||
})
|
||||
}
|
||||
function getInit(){
|
||||
moduleloading.value = true
|
||||
rightloading.value = true
|
||||
let params = {appId:props.applicationId}
|
||||
moduleList(params).then(res => {
|
||||
moduletreeData.value = publicTree(res.data.data,"")
|
||||
moduleloading.value = false
|
||||
if(assoccurrentid.value !== ''){
|
||||
moduletreeRef.value!.setCurrentKey(assoccurrentid.value)
|
||||
let paramss = {appId:props.applicationId}
|
||||
moduleList(paramss).then(ress => {
|
||||
let list:any = {}
|
||||
const arr = ress.data.data
|
||||
arr.forEach((item:any) => {
|
||||
if(item.id === assoccurrentid.value){
|
||||
list = item
|
||||
}
|
||||
})
|
||||
|
||||
handleNodeClick(list)
|
||||
moduleloading.value = false
|
||||
rightloading.value = false
|
||||
})
|
||||
}else{
|
||||
moduletreeRef.value!.setCurrentKey(null)
|
||||
moduleloading.value = false
|
||||
rightloading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
isFormCreate.value = false
|
||||
dataInitState.value = false
|
||||
assocdialog.value = true
|
||||
assoccurrentid.value = props.assoccurrentid
|
||||
assocmenuname.value = props.assocmenuname
|
||||
getInit()
|
||||
})
|
||||
function handleDatasetName() {
|
||||
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog v-model="assocdialog" class="assocdialog" title="关联模块" width="80%" :before-close="assochandleClose">
|
||||
<div class="assocbox">
|
||||
<div class="assocbox-left">
|
||||
<el-input placeholder="请输入" class="keywordsClass" maxlength="64" v-model="keywords" @blur="handleDatasetName">
|
||||
<template #prepend>
|
||||
<img src="@/assets/newimg/u62.png" alt="">
|
||||
</template>
|
||||
</el-input>
|
||||
<el-tree v-loading="moduleloading" ref="moduletreeRef" :data="moduletreeData" node-key="id" :props="defaultPropss"
|
||||
default-expand-all :expand-on-click-node="false" highlight-current
|
||||
@node-click="handleNodeClick" style="margin-top: 10px;height: calc(100vh - 270px);overflow: auto;" />
|
||||
</div>
|
||||
<div v-loading="rightloading" class="assocbox-right">
|
||||
<div class="querybox">
|
||||
<div>
|
||||
菜单名称：{{assocmenuname}}
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="min-width: 50px;" @click="assocsubmit">确定</el-button>
|
||||
<el-button style="min-width: 50px;" @click="assochandleClose">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<dv-preview
|
||||
ref="dvPreviewRef"
|
||||
class="dvPreviewRef"
|
||||
v-if="state.canvasStylePreview && dataInitState"
|
||||
:show-position="showPosition"
|
||||
:canvas-data-preview="state.canvasDataPreview"
|
||||
:canvas-style-preview="state.canvasStylePreview"
|
||||
:canvas-view-info-preview="state.canvasViewInfoPreview"
|
||||
:dv-info="state.dvInfo"
|
||||
:cur-preview-gap="state.curPreviewGap"
|
||||
:download-status="downloadStatus"
|
||||
></dv-preview>
|
||||
<form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.permission-box{
|
||||
background: rgb(21,21,21);
|
||||
height: calc(100vh - 60px);
|
||||
display: flex;
|
||||
.permission-leftbox{
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #4f5052;
|
||||
background: rgb(37,38,38);
|
||||
padding: 10px;
|
||||
.permission-leftbox-title{
|
||||
color: #F2F4F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.permission-rightbox{
|
||||
width: calc(100% - 260px);
|
||||
height: calc(100vh - 75px);
|
||||
padding: 13px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.menu-item{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size:14px;
|
||||
background: rgba(41, 41, 41, 1);
|
||||
padding-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-item:hover{
|
||||
background: #434343;
|
||||
}
|
||||
.assocbox{
|
||||
height: calc(100vh - 112px);
|
||||
display: flex;
|
||||
.assocbox-left{
|
||||
width: 290px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #4f5052;
|
||||
:deep(.el-tree-node__content){
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
}
|
||||
.assocbox-right{
|
||||
width: calc(100% - 290px);
|
||||
height: calc(100vh - 130px);
|
||||
overflow: auto;
|
||||
padding-top: 15px;
|
||||
padding-left: 15px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
:deep( .assocdialog .ed-dialog__body){
|
||||
padding: 0px 0px;
|
||||
}
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-tree){
|
||||
background:transparent;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
:deep(.el-tree-node__content){
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
:deep(.el-tree-node__content:hover){
|
||||
background: rgba(61,158, 255, 0.1);
|
||||
color: #0089FF;
|
||||
}
|
||||
:deep(.custom-tree-node){
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-tree-node:focus>.el-tree-node__content){
|
||||
background:rgb(37,38,38);
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.ed-popover.ed-popper){
|
||||
padding: 10px 0px !important;
|
||||
}
|
||||
:deep(.el-text){
|
||||
color: #ffffff;
|
||||
}
|
||||
.keywordsClass{
|
||||
margin-left:10px;
|
||||
margin-top: 10px;
|
||||
width: calc(100% - 20px) ;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(51, 51, 51, 1);
|
||||
border-radius: 4px;
|
||||
:deep(.ed-input__wrapper){
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(51, 51, 51, 0);
|
||||
border-radius: 4px;
|
||||
box-shadow:none ;
|
||||
border: none !important;
|
||||
}
|
||||
:deep(.ed-input__inner){
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(51, 51, 51, 0);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.ed-input-group__prepend){
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
border: 0;
|
||||
box-shadow:0 0 0 1px transparent ;
|
||||
padding:0 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
:deep(.ed-input__wrapper:hover){
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.querybox{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.dvPreviewRef{
|
||||
position: relative;
|
||||
z-index:1;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-message-box{
|
||||
background: #212121;
|
||||
}
|
||||
.el-message-box__content{
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-message-box__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-message-box__btns .el-button{
|
||||
color: #F2F4F5;
|
||||
background-color: #212121;
|
||||
border: 1px solid #434343;
|
||||
}
|
||||
.el-message-box__btns .el-button--primary{
|
||||
background: #0089ff;
|
||||
border-color: #0089ff;
|
||||
}
|
||||
.ed-form-item__label{
|
||||
color: #D2D2D2;
|
||||
}
|
||||
.ed-input__wrapper {
|
||||
background-color: #252626;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(67, 67, 67, 0);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
border: 1px solid #434343;
|
||||
}
|
||||
.ed-form-item.is-error .ed-input__wrapper{
|
||||
box-shadow: none;
|
||||
border: 1px solid #f54a45;
|
||||
}
|
||||
.ed-input__wrapper.is-focus{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-input__wrapper:hover{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-input__inner{
|
||||
color: #fff;
|
||||
}
|
||||
.ed-button {
|
||||
color: #ffffff;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid #363636;
|
||||
}
|
||||
.ed-button:focus, .ed-button:hover{
|
||||
color: #ffffff;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid #363636;
|
||||
}
|
||||
.ed-button--primary{
|
||||
background-color: #0089ff;
|
||||
border-color:#0089ff ;
|
||||
}
|
||||
.ed-button--primary:focus, .ed-button--primary:hover{
|
||||
background-color: #0089ff;
|
||||
border-color:#0089ff ;
|
||||
}
|
||||
.ed-button.is-disabled{
|
||||
color: #949494;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid rgb(54,55,56);
|
||||
}
|
||||
.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover{
|
||||
color: #949494;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid rgb(54,55,56);
|
||||
}
|
||||
.el-table{
|
||||
background-color: rgb(33,33,33);
|
||||
}
|
||||
.el-table tr{
|
||||
background: rgb(40,40,40);
|
||||
border-color: #434343;
|
||||
}
|
||||
.el-table th.el-table__cell {
|
||||
background-color: rgb(40,40,40);
|
||||
border-color: #434343;
|
||||
}
|
||||
.el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right {
|
||||
background-color: rgb(40,40,40);
|
||||
}
|
||||
.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
|
||||
background-color: #434343;
|
||||
}
|
||||
.el-table__border-bottom-patch, .el-table__border-left-patch{
|
||||
background-color: #434343;
|
||||
}
|
||||
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||
border-color: #434343;
|
||||
}
|
||||
.ed-checkbox__inner{
|
||||
background: transparent;
|
||||
border-color: #787878;
|
||||
}
|
||||
.ed-checkbox__input.is-disabled .ed-checkbox__inner{
|
||||
background: #434343;
|
||||
border-color: #787878;
|
||||
}
|
||||
.el-table thead{
|
||||
color: #E4E4E4;
|
||||
}
|
||||
.el-table .el-table__cell{
|
||||
background: #212121;
|
||||
color: #F2F4F5;
|
||||
}
|
||||
.el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right{
|
||||
background: #212121;
|
||||
}
|
||||
.hover-row > td {
|
||||
background-color: rgb(48,48,48) !important;
|
||||
}
|
||||
.ed-checkbox__input.is-checked .ed-checkbox__inner {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.ed-switch.is-checked .ed-switch__core{
|
||||
border-color: #0089ff;
|
||||
background-color: #0089ff;
|
||||
}
|
||||
.ed-textarea__inner{
|
||||
background-color: #252626;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(67, 67, 67, 0);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
border: 1px solid #434343;
|
||||
color: #fff;
|
||||
}
|
||||
.ed-textarea__inner:hover{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-textarea__inner:focus{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-input.is-disabled .ed-input__wrapper{
|
||||
border: 1px solid #434343;
|
||||
background: #212121;
|
||||
box-shadow: none;
|
||||
}
|
||||
.el-loading-mask{
|
||||
background-color: rgba(41, 41, 41, 0.9)
|
||||
}
|
||||
.ed-popover.ed-popper{
|
||||
background: rgba(41, 41, 41, 1);
|
||||
border: 1px solid #434343;
|
||||
color: #fff;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.ed-dialog__header{
|
||||
padding: 13px 20px;
|
||||
border-bottom: 1px solid #333333;
|
||||
margin-right: 0px;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
color: #ffffff;
|
||||
top: 11px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
.ed-dialog__body{
|
||||
background: rgb(33,33,33);
|
||||
}
|
||||
.ed-dialog__footer{
|
||||
background: rgb(33,33,33);
|
||||
}
|
||||
.ed-dialog__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog {
|
||||
border: 1px solid #5f5f5f;
|
||||
border-radius: 4px;
|
||||
background: rgb(33,33,33);
|
||||
}
|
||||
.el-tree-node__expand-icon{
|
||||
color: #ffffff
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted,computed, reactive,nextTick,onBeforeMount, watch } from 'vue'
|
||||
import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
|
||||
import FormCreate from '@/viewsnew/common/FormCreate.vue'
|
||||
import { initCanvasData } from '@/utils/canvasUtils'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { moduleList } from '@/api/application/module'
|
||||
const props = defineProps({
|
||||
moduleinfo:Object,
|
||||
applicationId:String
|
||||
})
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const showPosition = ref("preview")
|
||||
const dvPreviewRef = ref(null)
|
||||
const state = reactive({
|
||||
canvasDataPreview: null,
|
||||
canvasStylePreview: null,
|
||||
canvasViewInfoPreview: null,
|
||||
dvInfo: null,
|
||||
curPreviewGap: 0
|
||||
})
|
||||
const moduleInfo = ref({})
|
||||
const isFormCreate = ref(false)
|
||||
const busiFlag = ref('dataV')
|
||||
const dataInitState = ref(true)
|
||||
const downloadStatus = ref(false)
|
||||
const loading = ref(false)
|
||||
const loadCanvasData = (dvId, weight?, ext?) => {
|
||||
const initMethod = initCanvasData
|
||||
dataInitState.value = false
|
||||
initMethod(
|
||||
dvId,
|
||||
busiFlag.value,
|
||||
function ({
|
||||
canvasDataResult,
|
||||
canvasStyleResult,
|
||||
dvInfo,
|
||||
canvasViewInfoPreview,
|
||||
curPreviewGap
|
||||
}) {
|
||||
dvInfo['weight'] = weight
|
||||
dvInfo['ext'] = ext || 0
|
||||
state.canvasDataPreview = canvasDataResult
|
||||
state.canvasStylePreview = canvasStyleResult
|
||||
state.canvasViewInfoPreview = canvasViewInfoPreview
|
||||
state.dvInfo = dvInfo
|
||||
state.curPreviewGap = curPreviewGap
|
||||
dataInitState.value = true
|
||||
dvMainStore.updateCurDvInfo(dvInfo)
|
||||
nextTick(() => {
|
||||
dvPreviewRef.value?.restore()
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
onMounted(() => {
|
||||
getInit()
|
||||
isFormCreate.value = false
|
||||
dataInitState.value = false
|
||||
})
|
||||
watch(() => props.moduleinfo, (val) => {
|
||||
getInit()
|
||||
isFormCreate.value = false
|
||||
dataInitState.value = false
|
||||
})
|
||||
onBeforeMount(() => {
|
||||
dvMainStore.canvasDataInit()
|
||||
})
|
||||
function getInit() {
|
||||
loading.value = true
|
||||
console.log(props.applicationId,props.moduleinfo)
|
||||
let params = {appId:props.applicationId}
|
||||
moduleList(params).then(res => {
|
||||
let list:any = {}
|
||||
const arr = res.data.data
|
||||
arr.forEach((item:any) => {
|
||||
if(item.id === props.moduleinfo.module_id){
|
||||
list = item
|
||||
}
|
||||
})
|
||||
handleNodeClick(list)
|
||||
})
|
||||
}
|
||||
function handleNodeClick(e){
|
||||
isFormCreate.value = false
|
||||
dataInitState.value = false
|
||||
if(e.type == '0301'){
|
||||
busiFlag.value = 'dashboard'
|
||||
loadCanvasData(e.id,9,0)
|
||||
}else if(e.type == '03'){
|
||||
busiFlag.value = 'dataV'
|
||||
loadCanvasData(e.id,9,0)
|
||||
}else if(e.type == '09'){
|
||||
moduleInfo.value = e
|
||||
isFormCreate.value = true
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div v-loading="loading" style="width: 100%;height: 100%;">
|
||||
<dv-preview
|
||||
ref="dvPreviewRef"
|
||||
class="dvPreviewRef"
|
||||
v-if="state.canvasStylePreview && dataInitState"
|
||||
:show-position="showPosition"
|
||||
:canvas-data-preview="state.canvasDataPreview"
|
||||
:canvas-style-preview="state.canvasStylePreview"
|
||||
:canvas-view-info-preview="state.canvasViewInfoPreview"
|
||||
:dv-info="state.dvInfo"
|
||||
:cur-preview-gap="state.curPreviewGap"
|
||||
:download-status="downloadStatus"
|
||||
></dv-preview>
|
||||
<form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
<script lang="ts" setup>
|
||||
import {ref, onMounted,watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
const props = defineProps({
|
||||
projectInfo: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const projectInfo:any=ref({
|
||||
|
||||
})
|
||||
watch(() => props.projectInfo, val => {
|
||||
projectInfo.value = props.projectInfo
|
||||
})
|
||||
onMounted(()=>{
|
||||
projectInfo.value = props.projectInfo
|
||||
})
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="project-header-box">
|
||||
<div class="project-header-left">
|
||||
<div class="return-box" @click="$router.go(-1)">
|
||||
<img src="@/assets/newimg/u594.png" alt="">
|
||||
</div>
|
||||
<img src="@/assets/newimg/logosmall.png" alt="" style="margin-left: 10px;">
|
||||
<div class="header-title">{{projectInfo.name }} - {{ projectInfo.typename }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.project-header-box{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(79, 80, 82, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
.project-header-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.project-header-right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.return-box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.return-box:hover{
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.header-title{
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #F2F4F5;
|
||||
padding-left: 14px;
|
||||
}
|
||||
.preview-button{
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: rgba(54, 55, 56, 1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #F2F4F5;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.design-button{
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: rgba(0, 137, 255, 1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #F2F4F5;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
634
core/core-frontend/src/viewsnew/application/menuconfig/index.vue
Normal file
634
core/core-frontend/src/viewsnew/application/menuconfig/index.vue
Normal file
@ -0,0 +1,634 @@
|
||||
<script lang="ts" setup>
|
||||
import Header from './header.vue'
|
||||
import Assocmodule from './assocmodule.vue'
|
||||
import Assocmenu from './assocmenu.vue'
|
||||
import { findApplicationById } from "@/api/application/application";
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ref, onMounted,reactive,nextTick } from 'vue'
|
||||
import menuconfig_treeadd_white from '@/assets/svg/menuconfig_treeadd_white.svg'
|
||||
import icon_user_connect_white from '@/assets/svg/user_connect_white.svg'
|
||||
import icon_permission_more_white from '@/assets/svg/icon_more-vertical_outlined_white.svg'
|
||||
import { ElTree,FormInstance } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getMenuTree,addMenu,updateMenuById,deleteMenuById } from '@/api/permission/menu'
|
||||
|
||||
const projectInfo:any =ref({})
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const applicationId:any =ref("")
|
||||
const filterText = ref('')
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const treeData:any = ref([])
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
const treeloading = ref(false)
|
||||
const hoverNodeId = ref(null)
|
||||
const currentNodeId = ref(null)
|
||||
const preventcombo = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const ruleForm:any = ref({})
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const rules = ref({
|
||||
name: [
|
||||
{ required: true, message: '请输入菜单名称', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
const showmodule = ref(false)
|
||||
const assocdialog = ref(false)
|
||||
// 关联
|
||||
const assocmenuname = ref('')
|
||||
const assoccurrentid = ref('')
|
||||
const isFormCreate = ref(false)
|
||||
const dataInitState = ref(true)
|
||||
|
||||
const rightloading = ref(false)
|
||||
const moduleinfo = ref({})
|
||||
const handleMouseEnter = (node) => {
|
||||
hoverNodeId.value = node.key;
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
hoverNodeId.value = null;
|
||||
};
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
if(preventcombo.value){
|
||||
return
|
||||
}
|
||||
preventcombo.value = true
|
||||
if(ruleForm.value.id !== ''){
|
||||
updateMenuById(ruleForm.value).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '修改成功',
|
||||
})
|
||||
dialogVisible.value = false
|
||||
preventcombo.value = false
|
||||
gettree()
|
||||
})
|
||||
}else{
|
||||
addMenu(ruleForm.value).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功',
|
||||
})
|
||||
dialogVisible.value = false
|
||||
preventcombo.value = false
|
||||
gettree()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
onMounted(() => {
|
||||
if (route.query.id) {
|
||||
applicationId.value = route.query.id
|
||||
findApplicationById(applicationId.value).then(res => {
|
||||
res.data.data.typename = '菜单设置'
|
||||
projectInfo.value = res.data.data
|
||||
})
|
||||
gettree()
|
||||
}
|
||||
})
|
||||
function assocclick(data:any){
|
||||
isFormCreate.value = false
|
||||
dataInitState.value = false
|
||||
assocmenuname.value = data.name
|
||||
currentNodeId.value = data.id
|
||||
if(data.module_id !== '' && data.module_id !== undefined){
|
||||
assoccurrentid.value = data.module_id
|
||||
}else{
|
||||
assoccurrentid.value = ''
|
||||
}
|
||||
assocdialog.value = true
|
||||
}
|
||||
|
||||
function gettree() {
|
||||
treeloading.value = true
|
||||
const params = {
|
||||
appId: applicationId.value,
|
||||
name:'',
|
||||
isdisplay:''
|
||||
}
|
||||
getMenuTree(params).then(res => {
|
||||
treeloading.value = false
|
||||
treeData.value = res.data
|
||||
})
|
||||
}
|
||||
function querytree() {
|
||||
treeloading.value = true
|
||||
const params = {
|
||||
appId: applicationId.value,
|
||||
name:filterText.value,
|
||||
isdisplay:''
|
||||
}
|
||||
getMenuTree(params).then(res => {
|
||||
treeloading.value = false
|
||||
treeData.value = res.data
|
||||
})
|
||||
}
|
||||
function nodeclick(data:any,node:any){
|
||||
moduleinfo.value = {}
|
||||
currentNodeId.value = node.key
|
||||
showmodule.value = false
|
||||
assocdialog.value = false
|
||||
if(data.module_id !== '' && data.module_id !== undefined){
|
||||
moduleinfo.value = data
|
||||
showmodule.value = true
|
||||
}else{
|
||||
showmodule.value = false
|
||||
}
|
||||
}
|
||||
function addtree(){
|
||||
title.value = '新增菜单'
|
||||
ruleForm.value = {
|
||||
id:'',
|
||||
appId:applicationId.value,
|
||||
name: '',
|
||||
code:'',
|
||||
parentid:'0',
|
||||
type:'01'
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function addchilnode(data:any){
|
||||
title.value = '新增子菜单'
|
||||
ruleForm.value = {
|
||||
id:'',
|
||||
appId:applicationId.value,
|
||||
name: '',
|
||||
code:'',
|
||||
parentid:data.id,
|
||||
type:'01'
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function rename(data:any){
|
||||
title.value = '重命名'
|
||||
ruleForm.value = JSON.parse(JSON.stringify(data))
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function deltree(data:any){
|
||||
ElMessageBox.confirm(
|
||||
'确定删除该条信息吗?',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
deleteMenuById(data.id).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
gettree()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
}
|
||||
function handleClose() {
|
||||
ruleFormRef.value?.resetFields();
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
function assochandleClose() {
|
||||
assocdialog.value = false;
|
||||
}
|
||||
function assocsubmit(){
|
||||
assocdialog.value = false;
|
||||
gettree()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Header :projectInfo="projectInfo" />
|
||||
<div class="permission-box">
|
||||
<div class="permission-leftbox">
|
||||
<div class="permission-leftbox-title">
|
||||
<div>菜单列表</div>
|
||||
<div>
|
||||
<el-icon @click="addtree">
|
||||
<menuconfig_treeadd_white class="svg-icon" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<el-input v-model="filterText" placeholder="请输入" @blur="querytree" />
|
||||
<el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
|
||||
default-expand-all :expand-on-click-node="false" highlight-current
|
||||
@node-click="nodeclick" style="height: calc(100vh - 210px);margin-top: 10px;overflow: auto;">
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node" @mouseenter="handleMouseEnter(node)"
|
||||
@mouseleave="handleMouseLeave()">
|
||||
<div>{{ node.label }}</div>
|
||||
<div v-show="hoverNodeId === node.key" style="display: flex;align-items: center;" >
|
||||
<div @click.stop="assocclick(data)">
|
||||
<el-icon style="font-size: 16px;margin-top: 13px;">
|
||||
<icon_user_connect_white class="svg-icon"/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div style="margin-left: 8px;">
|
||||
<el-popover placement="right" trigger="click">
|
||||
<template #reference>
|
||||
<el-icon style="font-size: 16px;margin-top: 13px;">
|
||||
<icon_permission_more_white class="svg-icon"/>
|
||||
</el-icon>
|
||||
</template>
|
||||
<div class="menu-item" @click.stop="addchilnode(data)">添加子菜单</div>
|
||||
<div class="menu-item" @click.stop="rename(data)">重命名</div>
|
||||
<div class="menu-item" @click.stop="deltree(data)">删除</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div v-if="showmodule" v-loading="rightloading" class="permission-rightbox">
|
||||
<Assocmodule v-if="showmodule" :applicationId="applicationId" :moduleinfo="moduleinfo" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<Assocmenu v-if="assocdialog" :assoccurrentid="assoccurrentid"
|
||||
:applicationId="applicationId" :assocmenuname="assocmenuname"
|
||||
:currentNodeId="currentNodeId" @assochandleClose="assochandleClose" @assocsubmit="assocsubmit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.permission-box{
|
||||
background: rgb(21,21,21);
|
||||
height: calc(100vh - 60px);
|
||||
display: flex;
|
||||
.permission-leftbox{
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #4f5052;
|
||||
background: rgb(37,38,38);
|
||||
padding: 10px;
|
||||
.permission-leftbox-title{
|
||||
color: #F2F4F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.permission-rightbox{
|
||||
width: calc(100% - 260px);
|
||||
height: calc(100vh - 75px);
|
||||
padding: 13px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.menu-item{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size:14px;
|
||||
background: rgba(41, 41, 41, 1);
|
||||
padding-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-item:hover{
|
||||
background: #434343;
|
||||
}
|
||||
.assocbox{
|
||||
height: calc(100vh - 112px);
|
||||
display: flex;
|
||||
.assocbox-left{
|
||||
width: 290px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #4f5052;
|
||||
:deep(.el-tree-node__content){
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
}
|
||||
.assocbox-right{
|
||||
width: calc(100% - 290px);
|
||||
overflow: auto;
|
||||
height: calc(100% - 15px);
|
||||
padding-top: 15px;
|
||||
padding-left: 15px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
:deep( .assocdialog .ed-dialog__body){
|
||||
padding: 0px 0px;
|
||||
}
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-tree){
|
||||
background:transparent;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
:deep(.el-tree-node__content){
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
:deep(.el-tree-node__content:hover){
|
||||
background: rgba(61,158, 255, 0.1);
|
||||
color: #0089FF;
|
||||
}
|
||||
:deep(.custom-tree-node){
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-tree-node:focus>.el-tree-node__content){
|
||||
background:rgb(37,38,38);
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.ed-popover.ed-popper){
|
||||
padding: 10px 0px !important;
|
||||
}
|
||||
:deep(.el-text){
|
||||
color: #ffffff;
|
||||
}
|
||||
.keywordsClass{
|
||||
margin-left:10px;
|
||||
margin-top: 10px;
|
||||
width: calc(100% - 20px) ;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(51, 51, 51, 1);
|
||||
border-radius: 4px;
|
||||
:deep(.ed-input__wrapper){
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(51, 51, 51, 0);
|
||||
border-radius: 4px;
|
||||
box-shadow:none ;
|
||||
border: none !important;
|
||||
}
|
||||
:deep(.ed-input__inner){
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(51, 51, 51, 0);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.ed-input-group__prepend){
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
border: 0;
|
||||
box-shadow:0 0 0 1px transparent ;
|
||||
padding:0 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
:deep(.ed-input__wrapper:hover){
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.querybox{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.dvPreviewRef{
|
||||
position: relative;
|
||||
z-index:1;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-message-box{
|
||||
background: #212121;
|
||||
}
|
||||
.el-message-box__content{
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-message-box__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-message-box__btns .el-button{
|
||||
color: #F2F4F5;
|
||||
background-color: #212121;
|
||||
border: 1px solid #434343;
|
||||
}
|
||||
.el-message-box__btns .el-button--primary{
|
||||
background: #0089ff;
|
||||
border-color: #0089ff;
|
||||
}
|
||||
.ed-form-item__label{
|
||||
color: #D2D2D2;
|
||||
}
|
||||
.ed-input__wrapper {
|
||||
background-color: #252626;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(67, 67, 67, 0);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
border: 1px solid #434343;
|
||||
}
|
||||
.ed-form-item.is-error .ed-input__wrapper{
|
||||
box-shadow: none;
|
||||
border: 1px solid #f54a45;
|
||||
}
|
||||
.ed-input__wrapper.is-focus{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-input__wrapper:hover{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-input__inner{
|
||||
color: #fff;
|
||||
}
|
||||
.ed-button {
|
||||
color: #ffffff;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid #363636;
|
||||
}
|
||||
.ed-button:focus, .ed-button:hover{
|
||||
color: #ffffff;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid #363636;
|
||||
}
|
||||
.ed-button--primary{
|
||||
background-color: #0089ff;
|
||||
border-color:#0089ff ;
|
||||
}
|
||||
.ed-button--primary:focus, .ed-button--primary:hover{
|
||||
background-color: #0089ff;
|
||||
border-color:#0089ff ;
|
||||
}
|
||||
.ed-button.is-disabled{
|
||||
color: #949494;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid rgb(54,55,56);
|
||||
}
|
||||
.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover{
|
||||
color: #949494;
|
||||
background-color: rgb(54,55,56);
|
||||
border: 1px solid rgb(54,55,56);
|
||||
}
|
||||
.el-table{
|
||||
background-color: rgb(33,33,33);
|
||||
}
|
||||
.el-table tr{
|
||||
background: rgb(40,40,40);
|
||||
border-color: #434343;
|
||||
}
|
||||
.el-table th.el-table__cell {
|
||||
background-color: rgb(40,40,40);
|
||||
border-color: #434343;
|
||||
}
|
||||
.el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right {
|
||||
background-color: rgb(40,40,40);
|
||||
}
|
||||
.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
|
||||
background-color: #434343;
|
||||
}
|
||||
.el-table__border-bottom-patch, .el-table__border-left-patch{
|
||||
background-color: #434343;
|
||||
}
|
||||
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||
border-color: #434343;
|
||||
}
|
||||
.ed-checkbox__inner{
|
||||
background: transparent;
|
||||
border-color: #787878;
|
||||
}
|
||||
.ed-checkbox__input.is-disabled .ed-checkbox__inner{
|
||||
background: #434343;
|
||||
border-color: #787878;
|
||||
}
|
||||
.el-table thead{
|
||||
color: #E4E4E4;
|
||||
}
|
||||
.el-table .el-table__cell{
|
||||
background: #212121;
|
||||
color: #F2F4F5;
|
||||
}
|
||||
.el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right{
|
||||
background: #212121;
|
||||
}
|
||||
.hover-row > td {
|
||||
background-color: rgb(48,48,48) !important;
|
||||
}
|
||||
.ed-checkbox__input.is-checked .ed-checkbox__inner {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.ed-switch.is-checked .ed-switch__core{
|
||||
border-color: #0089ff;
|
||||
background-color: #0089ff;
|
||||
}
|
||||
.ed-textarea__inner{
|
||||
background-color: #252626;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(67, 67, 67, 0);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
border: 1px solid #434343;
|
||||
color: #fff;
|
||||
}
|
||||
.ed-textarea__inner:hover{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-textarea__inner:focus{
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
.ed-input.is-disabled .ed-input__wrapper{
|
||||
border: 1px solid #434343;
|
||||
background: #212121;
|
||||
box-shadow: none;
|
||||
}
|
||||
.el-loading-mask{
|
||||
background-color: rgba(41, 41, 41, 0.9)
|
||||
}
|
||||
.ed-popover.ed-popper{
|
||||
background: rgba(41, 41, 41, 1);
|
||||
border: 1px solid #434343;
|
||||
color: #fff;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.ed-dialog__header{
|
||||
padding: 13px 20px;
|
||||
border-bottom: 1px solid #333333;
|
||||
margin-right: 0px;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
color: #ffffff;
|
||||
top: 11px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
.ed-dialog__body{
|
||||
background: rgb(33,33,33);
|
||||
}
|
||||
.ed-dialog__footer{
|
||||
background: rgb(33,33,33);
|
||||
}
|
||||
.ed-dialog__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog {
|
||||
border: 1px solid #5f5f5f;
|
||||
border-radius: 4px;
|
||||
background: rgb(33,33,33);
|
||||
}
|
||||
.el-tree-node__expand-icon{
|
||||
color: #ffffff
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -259,7 +259,6 @@ function delTreeClic(){ // 删除
|
||||
height: 24px;">
|
||||
<img v-if="data.node_type == '01'" src="@/assets/newimg/icon/add.png" alt="" style="width: 14px;height: 13px;" @click.stop="addTreeChildNode($event, Number(data.level)+1,data)">
|
||||
<img v-if="data.node_type == '02'" src="@/assets/newimg/icon/bianji.png" alt="" style="width: 14px;height: 13px;" @click.stop="editClic(data)">
|
||||
|
||||
</div>
|
||||
<div style="
|
||||
width: 20px;
|
||||
@ -357,7 +356,8 @@ function delTreeClic(){ // 删除
|
||||
border-style: solid;
|
||||
border-color: rgba(51, 51, 51, 0);
|
||||
border-radius: 4px;
|
||||
box-shadow:0 0 0 1px transparent ;
|
||||
box-shadow:none ;
|
||||
border: none !important;
|
||||
}
|
||||
:deep(.ed-input__inner){
|
||||
background-color: rgba(37, 38, 38, 1);
|
||||
|
||||
@ -101,7 +101,7 @@ const loadCanvasData = (dvId, weight?, ext?) => {
|
||||
dvPreviewRef.value?.restore()
|
||||
})
|
||||
nextTick(() => {
|
||||
onInitReady({ resourceId: dvId })
|
||||
onInitReloadCanvasDataady({ resourceId: dvId })
|
||||
})
|
||||
}
|
||||
)
|
||||
@ -120,7 +120,6 @@ function handleNodeClick(e){
|
||||
moduleInfo.value = e
|
||||
isFormCreate.value = true
|
||||
}
|
||||
|
||||
}
|
||||
onBeforeMount(() => {
|
||||
dvMainStore.canvasDataInit()
|
||||
|
||||
@ -87,13 +87,13 @@ function menuclick(name){
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
color: #ffffff;
|
||||
top: 11px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
.ed-dialog__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
top: 13px !important;
|
||||
}
|
||||
|
||||
.ed-dialog {
|
||||
border: 1px solid #5f5f5f;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -7,7 +7,7 @@ import icon_permission_del_blue from '@/assets/svg/permission_del_blue.svg'
|
||||
import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
|
||||
import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
|
||||
import icon_add from '@/assets/svg/add_white.svg'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Delete } from '@element-plus/icons-vue'
|
||||
import { ElTable,ElTree } from 'element-plus'
|
||||
@ -551,6 +551,7 @@ function formatDateTime(dateTimeStr:any){
|
||||
:deep(.el-tree){
|
||||
background:#212121;
|
||||
height: calc(100vh - 210px);
|
||||
overflow: auto;
|
||||
margin-top: 20px;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
@ -735,6 +736,6 @@ function formatDateTime(dateTimeStr:any){
|
||||
box-shadow: none;
|
||||
}
|
||||
.el-loading-mask{
|
||||
background-color: rgba(41, 41, 41, 0.9)
|
||||
background-color: rgba(37,38, 38, 0.9);
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted,reactive} from 'vue'
|
||||
import { ref, onMounted,nextTick} from 'vue'
|
||||
import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
|
||||
import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
|
||||
import perission_role_blue from '@/assets/svg/perission_role_blue.svg'
|
||||
import icon_add from '@/assets/svg/add_white.svg'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { Delete } from '@element-plus/icons-vue'
|
||||
import { ElTable } from 'element-plus'
|
||||
import { listRole,addRole,updateRole,setIsValid,deleteRoleById,deleteRoleByIds } from '@/api/permission/role'
|
||||
import { ElTable,ElTree,ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { listRole,addRole,updateRole,setIsValid,deleteRoleById,deleteRoleByIds,permissionAssignment,setMenuByRoleId } from '@/api/permission/role'
|
||||
const props = defineProps({
|
||||
applicationId:String
|
||||
})
|
||||
@ -34,6 +33,18 @@ const typeoptions = ref([
|
||||
{ value: '1', label: '管理员' },
|
||||
{ value: '2', label: '普通用户' },
|
||||
])
|
||||
const configdialog = ref(false)
|
||||
const treeData:any = ref([])
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
const treeloading = ref(false);
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const currenttableid = ref('')
|
||||
const Passparameter = ref([])
|
||||
//默认展开节点的key数组
|
||||
const DefaultDeployment: any = ref([])
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
@ -83,7 +94,23 @@ onMounted(() => {
|
||||
gettable()
|
||||
})
|
||||
function permissionset(row:any){
|
||||
|
||||
currenttableid.value = row.id
|
||||
configdialog.value = true
|
||||
treeloading.value = true
|
||||
const params = {
|
||||
roleId: row.id,
|
||||
appId: props.applicationId,
|
||||
}
|
||||
permissionAssignment(params).then(res => {
|
||||
treeData.value = res.data
|
||||
let ids: any = []
|
||||
menuChange(res.data, ids)
|
||||
nextTick(() => {
|
||||
treeRef.value!.setCheckedKeys(ids)
|
||||
})
|
||||
treeloading.value = false
|
||||
})
|
||||
|
||||
}
|
||||
function gettable(){
|
||||
tableloading.value = true
|
||||
@ -190,7 +217,6 @@ function setisValid(row:any){
|
||||
isvaild:row.isvaild
|
||||
}
|
||||
setIsValid(params).then(res => {
|
||||
console.log(res,'res')
|
||||
if(res.code == '0'){
|
||||
gettable()
|
||||
ElMessage.success('设置成功')
|
||||
@ -200,6 +226,38 @@ function setisValid(row:any){
|
||||
tableloading.value = false
|
||||
})
|
||||
}
|
||||
function confighandleClose(){
|
||||
configdialog.value = false
|
||||
}
|
||||
function consfigsubmit(){
|
||||
const params = {
|
||||
id: currenttableid.value,
|
||||
menuIds: Passparameter.value.join(',')
|
||||
}
|
||||
setMenuByRoleId(params).then(res => {
|
||||
if(res.code == '0'){
|
||||
gettable()
|
||||
ElMessage.success('设置成功')
|
||||
}else{
|
||||
ElMessage.error('设置失败')
|
||||
}
|
||||
})
|
||||
configdialog.value = false
|
||||
}
|
||||
function currentChecked(nodeObj: any, SelectedObj: any){
|
||||
Passparameter.value = SelectedObj.checkedKeys.concat(SelectedObj.halfCheckedKeys)
|
||||
}
|
||||
function menuChange(data: any, ids: any) {
|
||||
data.forEach((item: any) => {
|
||||
if (item.checkinfo == true) {
|
||||
ids.push(item.id)
|
||||
DefaultDeployment.value.push(item.id)
|
||||
}
|
||||
if (item.children) {
|
||||
menuChange(item.children, ids)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="organization-box">
|
||||
@ -282,6 +340,18 @@ function setisValid(row:any){
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="configdialog" title="角色权限配置" width="30%" :before-close="confighandleClose">
|
||||
<el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
|
||||
default-expand-all :expand-on-click-node="false" show-checkbox @check="currentChecked"
|
||||
style="height: calc(100vh - 300px);overflow: auto;">
|
||||
</el-tree>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="confighandleClose">取消</el-button>
|
||||
<el-button type="primary" @click="consfigsubmit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -323,4 +393,31 @@ function setisValid(row:any){
|
||||
.ed-select-dropdown__item.selected{
|
||||
color: #0089ff;
|
||||
}
|
||||
.el-tree{
|
||||
background:#212121;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-tree-node__content{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.el-tree-node__content:hover{
|
||||
background: rgba(61,158, 255, 0.1);
|
||||
color: #0089FF;
|
||||
}
|
||||
.el-tree-node:focus>.el-tree-node__content{
|
||||
background:#212121;
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-text{
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-tree-node__expand-icon{
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-checkbox__inner{
|
||||
background:#212121;
|
||||
border-color:#636363;
|
||||
}
|
||||
</style>
|
||||
@ -1,76 +1,81 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted,reactive} from 'vue'
|
||||
import icon_permission_del_white from '@/assets/svg/permission_del_white.svg'
|
||||
import icon_permission_edit_white from '@/assets/svg/permission_edit_white.svg'
|
||||
import icon_permission_edit_blue from '@/assets/svg/permission_edit_blue.svg'
|
||||
import icon_permission_del_blue from '@/assets/svg/permission_del_blue.svg'
|
||||
import { ref, onMounted} from 'vue'
|
||||
import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
|
||||
import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
|
||||
import reset_password_blue from '@/assets/svg/reset_password_blue.svg'
|
||||
import icon_add from '@/assets/svg/add_white.svg'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Delete } from '@element-plus/icons-vue'
|
||||
import { ElTable } from 'element-plus'
|
||||
import { getOrganizations,addOrganization,setIsValid,updateOrganizationById,deleteById,getOrganizationById } from '@/api/permission/organization'
|
||||
import { ElTable,ElTree } from 'element-plus'
|
||||
import { getOrganizationById } from '@/api/permission/organization'
|
||||
import { queryUsers,addUser,updateUser,setStatus,deleteUserById,deleteUserByIds,resetPassword } from '@/api/permission/user'
|
||||
const props = defineProps({
|
||||
applicationId:String
|
||||
})
|
||||
const treeData:any = ref([])
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
label: 'orgname'
|
||||
}
|
||||
const hoverNodeId = ref(null);
|
||||
const treeloading = ref(false);
|
||||
const tableloading = ref(false);
|
||||
const currentNodeId = ref(null);
|
||||
const dialogVisible = ref(false);
|
||||
const title = ref('新增用户');
|
||||
const ruleForm = ref();
|
||||
const ruleForm:any = ref({});
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const rules = ref({
|
||||
orgname: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
username: [
|
||||
{ required: true, message: '请输入登录账号', trigger: 'blur' },
|
||||
],
|
||||
orgcode: [
|
||||
{ required: true, message: '请输入编号', trigger: 'blur' },
|
||||
nickname: [
|
||||
{ required: true, message: '请输入用户姓名', trigger: 'blur' },
|
||||
],
|
||||
usertype: [
|
||||
{ required: true, message: '请选择所属角色', trigger: 'change' },
|
||||
],
|
||||
})
|
||||
const queryorgname = ref('')
|
||||
const preventcombo = ref(false)
|
||||
const querynickname = ref('')
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
||||
const multipleSelection = ref([])
|
||||
const tableData = ref([{orgname:'23'}])
|
||||
const deptdialog = ref(false);
|
||||
const depttitle = ref('新增部门')
|
||||
const deptForm = ref();
|
||||
const deptFormRef = ref<FormInstance>()
|
||||
const deptrules = ref({
|
||||
orgname: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
],
|
||||
orgcode: [
|
||||
{ required: true, message: '请输入编号', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
const handleMouseEnter = (node) => {
|
||||
hoverNodeId.value = node.key;
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
hoverNodeId.value = null;
|
||||
};
|
||||
const tableData = ref([])
|
||||
const typeoptions = ref([
|
||||
{ value: '1', label: '管理员' },
|
||||
{ value: '2', label: '普通用户' },
|
||||
])
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
formEl.validate((valid:any) => {
|
||||
if (valid) {
|
||||
if(preventcombo.value){
|
||||
return
|
||||
}
|
||||
preventcombo.value = true
|
||||
if(ruleForm.value.id !== ''){
|
||||
|
||||
updateUser(ruleForm.value).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '修改成功',
|
||||
})
|
||||
dialogVisible.value = false
|
||||
preventcombo.value = false
|
||||
getuserinfo()
|
||||
})
|
||||
}else{
|
||||
console.log(ruleForm.value,'submit!')
|
||||
addOrganization(ruleForm.value).then(res => {
|
||||
addUser(ruleForm.value).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功',
|
||||
})
|
||||
dialogVisible.value = false
|
||||
gettree()
|
||||
preventcombo.value = false
|
||||
getuserinfo()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
@ -83,53 +88,6 @@ const resetForm = (formEl: FormInstance | undefined) => {
|
||||
formEl.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const deptsubmitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
if(deptForm.value.id !== ''){
|
||||
|
||||
}else{
|
||||
console.log(deptForm.value,'submit!')
|
||||
addOrganization(deptForm.value).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '新增成功',
|
||||
})
|
||||
dialogVisible.value = false
|
||||
gettree()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
const deptresetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const deltree = (data:any) => {
|
||||
ElMessageBox.confirm(
|
||||
'确定删除该条信息吗?',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
}
|
||||
const handleSelectionChange = (val:any) => {
|
||||
multipleSelection.value = val
|
||||
}
|
||||
@ -138,44 +96,81 @@ onMounted(() => {
|
||||
gettree()
|
||||
})
|
||||
function gettree(){
|
||||
treeloading.value = true
|
||||
getOrganizationById(props.applicationId).then(res => {
|
||||
if(res.data.data.length>0){
|
||||
treeData.value = gettreeData(res.data.data)
|
||||
}
|
||||
treeloading.value = false
|
||||
})
|
||||
}
|
||||
function gettreeData(orglist:any) {
|
||||
const res = {};
|
||||
for (const row of orglist) {
|
||||
// 处理 parentid 并解构需要字段
|
||||
const parentid = row.parentid || "0";
|
||||
const { id, orgcode, orgname, appId, orgtype, isvaild } = row;
|
||||
// 统一节点数据对象
|
||||
const nodeData = { parentid, id, orgcode, orgname, appId, orgtype, isvaild }
|
||||
// 更新或创建节点
|
||||
if (res[id]) {
|
||||
Object.assign(res[id], nodeData);
|
||||
} else {
|
||||
res[id] = { ...nodeData, children: [] };
|
||||
}
|
||||
// 处理父子关系
|
||||
if (res[parentid]) {
|
||||
res[parentid].children.push(res[id]);
|
||||
} else {
|
||||
res[parentid] = { children: [res[id]] };
|
||||
}
|
||||
}
|
||||
return res[0].children;
|
||||
}
|
||||
function getuserinfo(){
|
||||
tableloading.value = true
|
||||
const params = {
|
||||
appId: props.applicationId,
|
||||
orgtype:'01',
|
||||
parentid:'0',
|
||||
orgName:''
|
||||
orgid:currentNodeId.value,
|
||||
nickname:'',
|
||||
current:1,
|
||||
size:10
|
||||
}
|
||||
console.log(params,'查询')
|
||||
getOrganizations(params).then(res => {
|
||||
console.log(res,'查询')
|
||||
queryUsers(params).then(res => {
|
||||
tableData.value = res.data.data.records
|
||||
total.value = res.data.data.total
|
||||
tableloading.value = false
|
||||
})
|
||||
}
|
||||
function queryuserinfo(){
|
||||
tableloading.value = true
|
||||
const params = {
|
||||
appId: props.applicationId,
|
||||
orgid:currentNodeId.value,
|
||||
nickname:querynickname.value,
|
||||
current:currentPage.value,
|
||||
size:pageSize.value
|
||||
}
|
||||
queryUsers(params).then(res => {
|
||||
tableData.value = res.data.data.records
|
||||
total.value = res.data.data.total
|
||||
tableloading.value = false
|
||||
})
|
||||
}
|
||||
function nodeclick(data:any,node:any){
|
||||
currentNodeId.value = node.key
|
||||
|
||||
}
|
||||
function addtree(data:any){
|
||||
ruleForm.value = {
|
||||
id:'',
|
||||
appId:props.applicationId,
|
||||
orgname: '',
|
||||
orgcode: '',
|
||||
orgtype: '01',
|
||||
parentid:'0'
|
||||
if(data.orgtype == '01'){
|
||||
treeRef.value!.setCurrentKey(null)
|
||||
return
|
||||
}
|
||||
title.value = '新增企业'
|
||||
dialogVisible.value = true
|
||||
currentNodeId.value = node.key
|
||||
getuserinfo()
|
||||
}
|
||||
function edittree(data:any){
|
||||
title.value = '修改企业'
|
||||
function edittable(data:any){
|
||||
title.value = '修改用户'
|
||||
ruleForm.value = JSON.parse(JSON.stringify(data))
|
||||
dialogVisible.value = true
|
||||
}
|
||||
function edittable(data:any){
|
||||
depttitle.value = '修改企业'
|
||||
deptForm.value = JSON.parse(JSON.stringify(data))
|
||||
deptdialog.value = true
|
||||
}
|
||||
function deltable(data:any){
|
||||
function deltable(row:any){
|
||||
ElMessageBox.confirm(
|
||||
'确定删除该条信息吗?',
|
||||
'提示',
|
||||
@ -184,15 +179,16 @@ function deltable(data:any){
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
).then(() => {
|
||||
deleteUserById(row.id).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
getuserinfo()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
}
|
||||
function deltables(){
|
||||
@ -210,17 +206,12 @@ function deltables(){
|
||||
multipleSelection.value.forEach(e => {
|
||||
arr.push(e.id)
|
||||
});
|
||||
deleteById(arr.join()).then(res => {
|
||||
if(res.data.code == '0'){
|
||||
gettree()
|
||||
ElMessage.success('删除成功')
|
||||
}else{
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
deleteUserByIds(arr.join()).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
getuserinfo()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
@ -231,42 +222,70 @@ function addtable(){
|
||||
if(currentNodeId.value == '' || currentNodeId.value == null){
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择企业！',
|
||||
message: '请选择部门！',
|
||||
})
|
||||
return
|
||||
}
|
||||
deptForm.value = {
|
||||
ruleFormRef.value?.resetFields();
|
||||
ruleForm.value = {
|
||||
id:'',
|
||||
app_id:props.applicationId,
|
||||
orgname: '',
|
||||
orgcode: '',
|
||||
orgtype: '02',
|
||||
parentid:currentNodeId.value,
|
||||
manager:'',
|
||||
description:'',
|
||||
address:'',
|
||||
isvaild:'1',
|
||||
contactPhone:'',
|
||||
contactPerson:''
|
||||
appId:props.applicationId,
|
||||
orgid:currentNodeId.value,
|
||||
username: '',
|
||||
usertype: '',
|
||||
nickname:'',
|
||||
email:'',
|
||||
phone:'',
|
||||
status:'1',
|
||||
}
|
||||
depttitle.value = '新增部门'
|
||||
deptdialog.value = true
|
||||
title.value = '新增用户'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
ruleFormRef.value?.resetFields();
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
function depthandleClose() {
|
||||
deptFormRef.value?.resetFields();
|
||||
deptdialog.value = false
|
||||
function handleSizeChange(val: number){
|
||||
pageSize.value = val
|
||||
queryuserinfo()
|
||||
}
|
||||
function handleCurrentChange(val: number){
|
||||
currentPage.value = val
|
||||
queryuserinfo()
|
||||
}
|
||||
function formatDateTime(dateTimeStr:any){
|
||||
return dateTimeStr.replace('T', ' ');
|
||||
}
|
||||
function setisValid(row:any){
|
||||
const params = {
|
||||
id:row.id,
|
||||
status:row.status
|
||||
}
|
||||
setStatus(params).then(res => {
|
||||
if(res.code == '0'){
|
||||
getuserinfo()
|
||||
ElMessage.success('设置成功')
|
||||
}else{
|
||||
ElMessage.error('设置失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
function resetclick(row:any){
|
||||
resetPassword(row.id).then(res => {
|
||||
if(res.data.code == '0'){
|
||||
ElMessage.success('重置成功')
|
||||
}else{
|
||||
ElMessage.error('重置失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="organization-box">
|
||||
<div class="organization-leftbox">
|
||||
<div class="leftbox-title">列表</div>
|
||||
<el-tree :data="treeData" node-key="id" :props="defaultProps"
|
||||
<el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
|
||||
highlight-current default-expand-all :expand-on-click-node="false"
|
||||
@node-click="nodeclick">
|
||||
</el-tree>
|
||||
@ -274,8 +293,8 @@ function depthandleClose() {
|
||||
<div class="organization-rightbox">
|
||||
<div class="querybox">
|
||||
<div>
|
||||
<el-input v-model="queryorgname" placeholder="请输入用户名称" style="width: 200px;margin-right: 10px;" />
|
||||
<el-button type="primary" style="min-width: 50px;">搜索</el-button>
|
||||
<el-input v-model="querynickname" placeholder="请输入用户名称" style="width: 200px;margin-right: 10px;" />
|
||||
<el-button type="primary" style="min-width: 50px;" @click="queryuserinfo">搜索</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" style="min-width: 50px;" @click="addtable">
|
||||
@ -288,43 +307,69 @@ function depthandleClose() {
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="tableloading" ref="multipleTableRef" :data="tableData" border style="width: 100%" height="calc(100vh - 230px)"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="orgcode" label="部门编号"/>
|
||||
<el-table-column prop="orgname" label="部门名称"/>
|
||||
<el-table-column prop="manager" label="负责人"/>
|
||||
<el-table-column prop="description" label="部门描述"/>
|
||||
<el-table-column prop="contactperson" label="联系人"/>
|
||||
<el-table-column prop="contactphone" label="联系电话"/>
|
||||
<el-table-column prop="address" label="联系地址"/>
|
||||
<el-table-column prop="isvaild" label="是否有效" width="110">
|
||||
<!-- <el-table-column prop="orgcode" label="用户编号"/> -->
|
||||
<el-table-column prop="nickname" label="用户姓名"/>
|
||||
<el-table-column prop="username" label="登录账号"/>
|
||||
<el-table-column prop="usertype" label="所属角色">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.isvaild" style="margin-right: 10px;"/>
|
||||
<span v-if="scope.row.isvaild == '1'" style="color: #0089ff;font-size: 14px;">有效</span>
|
||||
<span v-else-if="scope.row.isvaild == '0'" style="color: #bbbfc4;font-size: 14px;">无效</span>
|
||||
<span v-if="scope.row.usertype == '1'">管理员</span>
|
||||
<span v-else-if="scope.row.usertype == '2'">普通用户</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" label="邮箱"/>
|
||||
<el-table-column prop="phone" label="手机号"/>
|
||||
<el-table-column prop="status" label="状态" width="110">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="1" inactive-value="0" style="margin-right: 10px;" @change="setisValid(scope.row)" />
|
||||
<span v-if="scope.row.status == '1'" style="color: #0089ff;font-size: 14px;">有效</span>
|
||||
<span v-else-if="scope.row.status == '0'" style="color: #bbbfc4;font-size: 14px;">无效</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="lastmodifier" label="最近修改者"/>
|
||||
<el-table-column prop="lastmodifydate" label="最近修改日期"/>
|
||||
<el-table-column fixed="right" label="操作" width="80">
|
||||
<el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
|
||||
<template #default="scope">
|
||||
<span>{{formatDateTime(scope.row.lastmodifydate)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-icon style="font-size: 16px;margin-right: 18px;cursor: pointer;" @click="edittable(scope.row)">
|
||||
<el-icon style="font-size: 16px;cursor: pointer;" @click="edittable(scope.row)">
|
||||
<permission_table_edit_blue class="svg-icon"/>
|
||||
</el-icon>
|
||||
<el-icon title="重置密码" style="font-size: 16px;margin: 0px 10px;cursor: pointer;" @click="resetclick(scope.row)">
|
||||
<reset_password_blue class="svg-icon"/>
|
||||
</el-icon>
|
||||
<el-icon style="font-size: 16px;cursor: pointer;" @click="deltable(scope.row)">
|
||||
<permission_table_del_blue class="svg-icon"/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
|
||||
background layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px;"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="60px" class="demo-ruleForm">
|
||||
<el-form-item label="编号" prop="orgcode">
|
||||
<el-input v-model="ruleForm.orgcode" />
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="用户姓名" prop="nickname">
|
||||
<el-input v-model="ruleForm.nickname" />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="orgname">
|
||||
<el-input v-model="ruleForm.orgname" />
|
||||
<el-form-item label="登录账号" prop="username">
|
||||
<el-input v-model="ruleForm.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属角色" prop="usertype">
|
||||
<el-select v-model="ruleForm.usertype" placeholder="请选择角色级别" style="width:100%;">
|
||||
<el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="ruleForm.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="ruleForm.phone" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@ -334,37 +379,6 @@ function depthandleClose() {
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="deptdialog" :title="depttitle" width="30%" :before-close="depthandleClose">
|
||||
<el-form ref="deptFormRef" :model="deptForm" :rules="deptrules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="部门编号" prop="orgcode">
|
||||
<el-input v-model="deptForm.orgcode" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="orgname">
|
||||
<el-input v-model="deptForm.orgname" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="manager">
|
||||
<el-input v-model="deptForm.manager" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门描述" prop="description">
|
||||
<el-input type="textarea" :rows="4" v-model="deptForm.description" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人" prop="contactPerson">
|
||||
<el-input v-model="deptForm.contactPerson" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="contactPhone">
|
||||
<el-input v-model="deptForm.contactPhone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系地址" prop="address">
|
||||
<el-input v-model="deptForm.address" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="deptresetForm(deptFormRef)">取消</el-button>
|
||||
<el-button type="primary" @click="deptsubmitForm(deptFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -406,35 +420,46 @@ function depthandleClose() {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:deep(.ed-tree){
|
||||
:deep(.el-tree){
|
||||
background:#212121;
|
||||
height: calc(100vh - 210px);
|
||||
margin-top: 20px;
|
||||
height: calc(100vh - 145px);
|
||||
overflow: auto;
|
||||
margin-top: 5px;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
:deep(.ed-tree-node__content){
|
||||
:deep(.el-tree-node__content){
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
:deep(.ed-tree-node__content:hover){
|
||||
:deep(.el-tree-node__content:hover){
|
||||
background: rgba(61,158, 255, 0.1);
|
||||
color: #0089FF;
|
||||
}
|
||||
:deep(.ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content){
|
||||
:deep(.custom-tree-node){
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
:deep(.el-tree-node__content>.ed-tree-node__expand-icon){
|
||||
padding: 2px;
|
||||
}
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.custom-tree-node){
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
:deep(.el-tree-node:focus>.el-tree-node__content){
|
||||
background:#212121;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.ed-tree-node__content>.ed-tree-node__expand-icon){
|
||||
padding: 2px;
|
||||
:deep(.el-text){
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-tree-node__expand-icon){
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.organization-rightbox{
|
||||
@ -579,5 +604,45 @@ function depthandleClose() {
|
||||
box-shadow: none;
|
||||
border: 1px solid #0089ff;
|
||||
}
|
||||
|
||||
.ed-pagination__total{
|
||||
color: #F2F4F5;
|
||||
}
|
||||
.ed-pagination__jump{
|
||||
color: #F2F4F5;
|
||||
}
|
||||
.ed-pagination .ed-pager li{
|
||||
background: #252626;
|
||||
border: 1px solid #434343 !important;
|
||||
color:#fff !important;
|
||||
}
|
||||
.ed-pagination .ed-pager li:hover{
|
||||
background: #252626;
|
||||
}
|
||||
.ed-pagination button.is-disabled, .ed-pagination button:disabled {
|
||||
color: #787878;
|
||||
background-color: #252626;
|
||||
border-color: #636363 !important;
|
||||
}
|
||||
.ed-pagination .btn-next[aria-disabled=true]:active, .ed-pagination .btn-next[aria-disabled=true]:hover, .ed-pagination .btn-prev[aria-disabled=true]:active, .ed-pagination .btn-prev[aria-disabled=true]:hover{
|
||||
color: #bbbfc4 !important;
|
||||
background-color: #252626 !important;
|
||||
border-color: #636363 !important;
|
||||
}
|
||||
.ed-pagination__jump{
|
||||
color:#fff !important;
|
||||
}
|
||||
.ed-pagination .btn-next:hover, .ed-pagination .btn-prev:hover{
|
||||
background: #252626 !important;
|
||||
border: 1px solid #0089ff !important;
|
||||
color:#0089ff !important;
|
||||
}
|
||||
.ed-pagination button{
|
||||
background: #252626;
|
||||
border: 1px solid #434343 !important;
|
||||
color:#fff !important;
|
||||
}
|
||||
.ed-pagination.is-background .btn-next.is-active, .ed-pagination.is-background .btn-prev.is-active, .ed-pagination.is-background .ed-pager li.is-active {
|
||||
border-color: #0089ff !important;
|
||||
color: #0089ff !important;
|
||||
}
|
||||
</style>
|
||||
@ -899,14 +899,13 @@ initFunction()
|
||||
border-bottom: 1px solid #333333;
|
||||
margin-right: 0px;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
top: 13px !important;
|
||||
top: 11px !important;
|
||||
right: 15px !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog {
|
||||
border: 1px solid #5f5f5f;
|
||||
|
||||
@ -1726,13 +1726,12 @@ border-right: 1px solid rgba(54, 54, 54, 1)
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
color: #ffffff;
|
||||
top: 11px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
.ed-dialog__title{
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
top: 13px !important;
|
||||
}
|
||||
.ed-dialog {
|
||||
border: 1px solid #5f5f5f;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -2512,7 +2512,8 @@ border-right: 1px solid rgba(54, 54, 54, 1);
|
||||
color: #ffffff;
|
||||
}
|
||||
.ed-dialog__headerbtn{
|
||||
top: 13px !important;
|
||||
top: 11px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
.ed-dialog {
|
||||
border: 1px solid #5f5f5f;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user