Files
sk_fems_ui/pages/comm/auth/MenuRoleMngPage.vue
Nguyen Van Luan/(Nguyen Van Luan)/현장대리인/SK 5735777bb1 fixbug
2025-08-04 18:53:30 +09:00

844 lines
19 KiB
Vue

<template>
<div class="l-layout">
<v-row ref="searchFilter">
<v-col :cols="12">
<v-card class="searchFilter">
<v-row algin="end" no-gutters>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="역할ID"
valueNm="roleId"
:searchOption="true"
customClass="input-large"
/>
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="역할명"
valueNm="roleNm"
:searchOption="true"
customClass="input-large"
/>
</v-col>
<v-col class="text-right d-flex justify-end align-end mr-3">
<BtnSearch size="large" />
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-row ref="contents" >
<v-col cols="12" lg="2" >
<v-card>
<v-card-title>
<span class="custom-title-4">역할 리스트</span>
</v-card-title>
<div ref="gridParent" class="px-5" style="height: 60vh;">
<component
:is="loadGrid ? 'Grid' : null"
:ref="gridName + myPrgmId"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@getRowsData="getRowData"
/>
</div>
</v-card>
</v-col>
<v-col cols="12" lg="10" >
<v-card>
<v-card-title>
<span class="custom-title-4">역할 메뉴별 권한</span>
</v-card-title>
<v-row
align="center"
no-gutters
:style="{ height: 'calc(100% - 62px)' }"
class="px-5"
>
<v-col :cols="4" class="h100">
<span
class="body-1 font-weight-bold d-flex align-center"
:style="{ minHeight: '36px' }"
>[미배정]메뉴리스트</span
>
<div ref="treeGridParent" class="px-0 mt-2" style="height: 60vh;">
<!-- <div
ref="treeGridParent"
class="w100 h100"
>
</div> -->
<component
:is="loadTreeGrid ? 'Grid' : null"
:ref="gridName2 + myPrgmId"
:gridName="gridName2"
:parentPrgmId="myPrgmId"
@getRowsData="getUnAsgnRowData"
/>
</div>
</v-col>
<v-col :cols="1">
<ActionButtons
:parentPrgmId="myPrgmId"
:leftGridName="gridName2"
:rightGridName="gridName3"
:btnActionsFnc="dualGridBtnActions"
/>
</v-col>
<v-col :cols="7" class="h100">
<v-row
justify="space-between"
align="center"
no-gutters
class="px-5"
>
<v-col :cols="11">
<span class="body-1 font-weight-bold"
>[배정]메뉴별권한 리스트</span
>
</v-col>
<v-col :cols="1" class="text-right">
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName3"
:btnActionsFnc="btnActions"
/>
</v-col>
</v-row>
<div ref="treeGridParent2" class="px-0 mt-2" style="height: 60vh;">
<!-- <div
ref="treeGridParent2"
class="w100 h100"
>
</div> -->
<component
:is="loadTreeGrid2 ? 'Grid' : null"
:ref="gridName3 + myPrgmId"
:gridName="gridName3"
:parentPrgmId="myPrgmId"
:editorGrid="true"
@getRowsData="getAsgnRowData"
/>
</div>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import InputText from '@/components/common/input/InputText';
import BtnSearch from '~/components/common/button/BtnSearch';
import Grid from '~/components/common/Grid';
import Buttons from '~/components/common/button/Buttons';
import ActionButtons from '~/components/common/button/ActionButtons';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import Utility from '~/plugins/utility';
// import ChangePassword from "~/components/common/modal/ChangePassword";
let myTitle;
let myPrgmId;
export default {
mixins: [mixinGlobal, resize],
async asyncData(context) {
const myState = context.store.state;
myPrgmId = context.route.query.prgmId;
await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
myTitle = await myState.activeMenuInfo.menuNm;
},
meta: {
title: () => {
return myTitle;
},
prgmId: myPrgmId,
closable: true,
},
components: {
Grid,
BtnSearch,
BtnExcelDownload,
InputText,
ActionButtons,
Buttons,
// ChangePassword
},
data() {
return {
myPrgmId: myPrgmId,
gridName: 'rowGrid',
gridName2: 'treeGrid',
gridName3: 'treeGrid2',
loadGrid: false,
loadTreeGrid: false,
loadTreeGrid2: false,
leftSelectRowData: {},
rightSelectRowData: {},
test: false,
rowKey: null,
};
},
computed: {
...mapState({
pageData: state => state.pageData[myPrgmId],
}),
loadFlag() {
var init1 = this.pageData.useFgList.length > 0 ? true : false;
return init1;
},
chkIsFind() {
// 조회 플래그
return this.pageData.isFind;
},
// chkRoleId() {
// // 에너지 선택 감지
// // return this.pageData.roleId;
// },
// chkRoleNm() {
// // 공정/설비 변경 감지
// // return this.pageData.roleNm;
// },
ChkRowGridSelectData() {
return this.pageData.rowGridSelectData;
},
},
watch: {
chkIsFind(val) {
if (val) this.search();
},
async loadFlag(val) {
if (val) {
await this.gridInit();
}
// await this.gridInit();
},
// chkRoleId() {
// this.setPageData({ isFind: true });
// },
// chkRoleNm() {
// this.setPageData({ isFind: true });
// },
// initFlag(val){
// if(val){
// this.init();
// }
// }
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
await this.$store.dispatch('chkOpenTabList', {
key: 'create',
prgmId: myPrgmId,
defaultData: defaultData,
});
// this.pageData.facInfo = localStorage.getItem(myPrgmId + "CheckedRow") !=null ? JSON.parse(localStorage.getItem(myPrgmId + "CheckedRow")) : {}
},
created() {
this.getCodeList({
dataKey: 'useFg',
params: { commGrpCd: 'CO_USEFG', useFg: '1' },
addAll: false,
});
},
mounted() {
// this.init();
if (this.loadFlag) {
this.gridInit();
}
},
beforeDestroy() {
this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
// console.log(myPrgmId, " , 3.vue::beforeDestroy");
},
methods: {
...mapMutations({
setPageData: 'setPageData',
setGridData: 'setGridData',
setGridColumn: 'setGridColumn',
setGridOption: 'setGridOption',
}),
...mapActions({
postApi: 'modules/list/postApi',
postUpdateApi: 'modules/list/postUpdateApi',
postApiReturn: 'modules/list/postApiReturn',
setTree: 'modules/list/setTree',
chkOpenTabList: 'chkOpenTabList',
getCodeList: 'modules/search/getCodeList',
}),
async init() {
// await this.gridInit();
},
async gridInit() {
//---------------------gridOption 설정 시작----------------------------
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const treeGridHeight = this.$refs.treeGridParent.offsetHeight - 30;
const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 30;
// const gridHeight = this.$refs.contents.offsetHeight - 30;
const myOptions = {
columnOptions: {
resizable: true,
},
//rowHeaders: [{type: 'rowNum'}],
bodyHeight: gridHeight,
minBodyHeight: gridHeight,
header: {
height: 36,
},
rowHeight: 36,
minRowHeight: 36,
summary: {
columnContent: {
height: 36,
position: 'top',
},
},
scrollX: false,
// scrollY: false,
};
const myOptionsTree = {
treeColumnOptions: {
name: 'menuNm',
},
scrollX: false,
// scrollY: false,
};
this.setGridOption({
gridKey: this.gridName,
value: myOptions,
});
this.setGridOption({
gridKey: this.gridName2,
value: Object.assign(
Utility.defaultGridOption(treeGridHeight),
myOptionsTree,
),
});
this.setGridOption({
gridKey: this.gridName3,
value: Object.assign(
Utility.defaultGridOption(treeGridHeight2),
myOptionsTree,
),
});
//---------------------gridOption 설정 끝----------------------------
//---------------------gridName3의 체크박스 설정 시작----------------------------
class CustomCheckbox {
constructor(props) {
const el = document.createElement('input');
const { grid, rowKey, columnInfo } = props;
el.type = 'checkbox';
el.value = props.value;
this.el = el;
this.render(props);
this.el.addEventListener('change', () => {
const originValue = el.value;
const changedValue = el.checked ? '1' : '0';
grid.setValue(rowKey, columnInfo.name, changedValue);
if (originValue == changedValue) {
grid.removeRowClassName(rowKey, 'row-insert');
grid.setValue(rowKey, 'rowStat', null);
} else {
grid.setValue(rowKey, 'rowStat', 'U');
grid.addRowClassName(rowKey, 'row-insert');
}
});
}
getElement() {
return this.el;
}
render(props) {
const val = props.value;
this.el.checked = val == '1' ? true : false;
}
}
//---------------------gridName3의 체크박스 설정 끝----------------------------
//---------------------gridColumn 설정 시작----------------------------
const _this = this;
const myColumns = [
{ header: '역할ID', name: 'roleId', align: 'center', minWidth: 70 },
{ header: '역할명', name: 'roleNm', minWidth: 70 },
{
header: '사용여부',
name: 'useFg',
align: 'center',
minWidth: 84,
formatter({ value }) {
const newValue = _this.pageData.useFgList.filter(
item => item.commCd == value,
);
return newValue[0].commCdNm;
},
},
];
const myTreeColumns = [
{
align: 'center',
width: 30,
minWidth: 60,
formatter: (props) => {
return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
}
},
{
header: '메뉴명',
name: 'menuNm',
validation: {
dataType: 'string',
validatorFn: (value, row) => {
return row['isExists'] == '0';
},
},
},
];
const myTreeColumns2 = [
{
align: 'center',
width: 30,
minWidth: 60,
formatter: (props) => {
return `<span class="custom-radio"><span class="radio-mark"></span></span>`;
}
},
{ header: '역할ID', name: 'roleId', hidden: true },
{ header: '메뉴ID', name: 'menuId', hidden: true },
{ header: '메뉴명', name: 'menuNm', minWidth: '235' },
{
header: '사용여부',
name: 'useFg',
align: 'center',
renderer: {
type: CustomCheckbox,
},
},
{
header: '조회',
name: 'authCd1',
align: 'center',
renderer: {
type: CustomCheckbox,
},
},
{
header: '추가',
name: 'authCd2',
align: 'center',
renderer: {
type: CustomCheckbox,
},
},
{
header: '수정',
name: 'authCd3',
align: 'center',
renderer: {
type: CustomCheckbox,
},
},
{
header: '삭제',
name: 'authCd4',
align: 'center',
renderer: {
type: CustomCheckbox,
},
},
{
header: '저장',
name: 'authCd5',
align: 'center',
renderer: {
type: CustomCheckbox,
},
},
{
header: '엑셀',
name: 'authCd6',
align: 'center',
renderer: {
type: CustomCheckbox,
},
},
];
this.setGridColumn({
gridKey: this.gridName,
value: myColumns,
});
this.setGridColumn({
gridKey: this.gridName2,
value: myTreeColumns,
});
this.setGridColumn({
gridKey: this.gridName3,
value: myTreeColumns2,
});
//---------------------gridColumn 설정 끝----------------------------
await this.getRowGridData();
},
async search() {
if (this.loadFlag == false) {
return;
}
await this.setPageData({
isFind: false,
});
await this.getRowGridData();
},
async getRowGridData() {
this.loadGrid = false;
let res = [];
res = await this.postApiReturn({
apiKey: 'selectRole',
resKey: 'roleData',
sendParam: {
roleId: this.pageData.roleId,
roleNm: this.pageData.roleNm,
comId: this.pageData.comId,
},
});
// const newRes = res.map(item => {
// const newObj = {
// ...item,
// rowStat: null
// };
// return newObj;
// });
// console.log("res!!!!!!", res);
this.setGridData({
gridKey: this.gridName,
value: res,
});
this.loadGrid = true;
this.setPageData({ isFind: false });
this.$nextTick(() => {
if (this.loadGrid && res.length > 0) {
this.$refs[this.gridName + this.myPrgmId].focus({
//rowKey: 0,
rowKey:
this.pageData.rowGridSelectKey == '' ||
this.pageData.rowGridSelectKey == null
? 0
: this.pageData.rowGridSelectKey ==
this.$refs[this.gridName + this.myPrgmId].getData().length - 1
? this.pageData.rowGridSelectKey
: 0,
columnName: 'roleId',
setScroll: true,
});
}
});
},
async getRowData(data) {
await this.setPageData({
rowGridSelectKey: data.rowKey,
rowGridSelectData: {
roleId: data.roleId,
roleNm: data.roleNm,
useFg: data.useFg,
},
});
const dt = {
roleId: data.roleId,
roleNm: data.roleNm,
useFg: data.useFg,
};
await this.setMenuGrid(dt);
this.rowKey = data.rowKey;
},
async setMenuGrid(data) {
this.loadTreeGrid = false;
this.loadTreeGrid2 = false;
await this.getUnAsgnTreeData(data);
await this.getAsgnTreeData(data);
},
async getUnAsgnTreeData(selectedData) {
let res = await this.postApiReturn({
apiKey: 'selectUnAsgnMenu',
resKey: 'menuRoleData',
sendParam: {
roleId: selectedData.roleId,
roleNm: selectedData.roleNm,
useFg: selectedData.useFg,
comId: this.pageData.comId,
},
});
res = res.map(item => {
const newItem = {
...item,
menuIdNm: item.menuNm,
menuId: item.menuId == 0 ? '00' : item.menuId,
parentId: item.parentId == 0 ? '00' : item.parentId,
rowStat: null,
upMenuId:
item.upMenuId && item.upMenuId != '0'
? item.upMenuId
: item.upMenuId == '0'
? '00'
: 'ROOT',
};
return newItem;
});
const setTreeData = await this.setTree({
treeKey: 'MENU_ID',
value: res,
});
this.loadTreeGrid = true;
// console.log("setTreeData = ", setTreeData);
await this.setGridData({
gridKey: this.gridName2,
value: setTreeData.ROOT || [],
});
},
async getAsgnTreeData(selectedData) {
let res = await this.postApiReturn({
apiKey: 'selectMenuRole',
resKey: 'menuRoleData',
sendParam: {
roleId: selectedData.roleId,
roleNm: selectedData.roleNm,
useFg: selectedData.useFg,
comId: this.pageData.comId,
},
});
res = res.map(item => {
const newItem = {
...item,
menuIdNm: item.menuNm,
menuId: item.menuId == 0 ? '00' : item.menuId,
parentId: item.parentId == 0 ? '00' : item.parentId,
rowStat: null,
upMenuId:
item.upMenuId && item.upMenuId != '0'
? item.upMenuId
: item.upMenuId == '0'
? '00'
: 'ROOT',
};
return newItem;
});
const setTreeData = await this.setTree({
treeKey: 'MENU_ID',
value: res,
});
this.loadTreeGrid2 = true;
await this.setGridData({
gridKey: this.gridName3,
value: setTreeData.ROOT || [],
});
},
getUnAsgnRowData(data) {
const getRowData = data;
this.leftSelectRowData = Object.assign({}, getRowData);
},
getAsgnRowData(data) {
const getRowData = data;
this.rightSelectRowData = Object.assign({}, getRowData);
},
async dualGridBtnActions(action) {
let addTargetGrid = '';
let removeTargetGrid = '';
switch (action) {
case 'addLeftToRight':
addTargetGrid = this.$refs[this.gridName3 + this.myPrgmId];
removeTargetGrid = this.$refs[this.gridName2 + this.myPrgmId];
if (!this.leftSelectRowData.menuNm) {
alert('선택된 메뉴가 없습니다.');
return false;
} else {
addTargetGrid.addTreeRow({
menuNm: this.leftSelectRowData.menuNm,
menuId: this.leftSelectRowData.menuId,
});
removeTargetGrid.removeRow('immediately');
this.leftSelectRowData = ''; // 배정 후 초기화
}
break;
case 'removeRightToLeft':
addTargetGrid = this.$refs[this.gridName2 + this.myPrgmId];
removeTargetGrid = this.$refs[this.gridName3 + this.myPrgmId];
if (!this.rightSelectRowData.menuNm) {
alert('선택된 메뉴가 없습니다.');
return false;
} else {
addTargetGrid.addTreeRow({
menuNm: this.rightSelectRowData.menuNm,
});
removeTargetGrid.removeRow('immediately');
this.rightSelectRowData = ''; // 미배정 후 초기화
}
break;
default:
break;
}
},
async btnActions(action) {
let dataArr = [];
switch (action) {
case 'add':
this.$refs[this.gridName3 + this.myPrgmId].addRow();
break;
case 'remove':
this.$refs[this.gridName3 + this.myPrgmId].removeRow();
break;
case 'save':
await this.$refs[this.gridName3 + this.myPrgmId].editingFinish({
rowKey: this.rowKey,
});
dataArr = this.$refs[this.gridName3 + this.myPrgmId].save();
dataArr = dataArr.map(item => {
const newData = {
...item,
menuId: item.menuId == '00' ? '0' : item.menuId,
roleId: this.ChkRowGridSelectData.roleId,
rowStat: item.rowStat == 'I' ? 'U' : item.rowStat,
};
return newData;
});
if (dataArr.length > 0) {
const sendParam = {
datas: { dsMenuRole: dataArr },
params: {},
};
await this.postUpdateApi({
apiKey: 'saveMenuRole',
sendParam: sendParam,
});
this.search();
} else {
alert('저장할 내용이 없습니다.');
}
break;
default:
break;
}
},
},
};
const defaultData = {
/* 검색옵션 */
isFind: false,
roleNm: '',
roleId: '',
comId: '',
useFg: '',
useFgList: [],
// 선택된 그룹코드 상세 데이터
rowGridSelectKey: 0,
rowGridSelectData: {},
/* data 세팅 */
rowGrid: {
data: [],
column: [], // myColumns,
option: {}, // myOptions
defaultRow: {},
},
treeGrid: {
data: [],
column: [],
option: {},
defaultRow: {
isExists: '0',
menuId: null,
menuNm: null,
parentId: null,
upMenuId: null,
useFg: 1,
rowStat: null,
},
},
treeGrid2: {
data: [],
column: [],
option: {},
defaultRow: {
menuId: null,
menuNm: null,
roleId: null,
parentId: null,
upMenuId: '',
useFg: 1,
authCd1: '1',
authCd2: '1',
authCd3: '1',
authCd4: '1',
authCd5: '1',
authCd6: '1',
rowStat: null,
},
buttonAuth: {
add: false,
remove: false,
save: true,
excel: false,
},
},
xlsFileInfo: {
// 출력하려는 grid 와 같은 이름으로 세팅
rowGrid: {
fileName: null, // 갑이 없으면 해당 페이지 메뉴명
sheetName: null, // 갑이 없으면 'Sheet1'
},
},
};
function numberFormatter({ value }) {
if (value == null) {
return 0;
} else {
return value;
}
}
</script>