gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-dungtv-0805

Browse Source
This commit is contained in:
Tran Van Dung/(Tran Van Dung)/현장대리인/SK
2025-08-06 09:27:47 +07:00
parent bf6d03df63 550659475f
commit 3b6c05c70a
9 changed files with 268 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/DatepickerTimeSelectBox.vue
View File

@ -52,6 +52,7 @@
selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
"
@update:propsValue="selectTimeValue1 = $event"
customClass="select-large"
/>
<!-- <div v-show="isRange" class="mx-3" :style="{ lineHeight: 0 }">~</div> -->
@ -99,6 +100,7 @@
selectBoxTimeItemList.minInterval ? selectBoxTimeItemList.minInterval : 1
"
@update:propsValue="selectTimeValue2 = $event"
customClass="select-large"
/>
</div>
</v-col>

4
components/common/button/ActionButtons.vue
View File

@ -1,5 +1,7 @@
<template>
<div class="d-flex flex-row justify-center align-center" style="gap: 12px">
<div class="d-flex justify-center align-center"
:class="directionBtn === 'vertically'?'flex-row':'flex-column'"
style="gap: 12px">
<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" >
</a-button>
<a-button @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add">

6
components/common/select/SelectBoxTime.vue
View File

@ -22,7 +22,7 @@
outlined
:menu-props="{ auto: true, offsetY: true }"
:hide-details="true"
:class="'v-select__custom'"
:class="['v-select__custom', customClass]"
:disabled="disabled"
:readonly="readonly"
@click="setDatepickerHide"
@ -106,6 +106,10 @@ export default {
require: false,
default: 1,
},
customClass: {
type: String,
require: false,
},
},
emits: ["update:propsValue"],
data() {

6
components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
View File

@ -20,6 +20,12 @@
</v-card>
</v-col>
</v-row>
<!-- Create the line between date picker and form -->
<v-row class="my-5" no-gutters>
<v-col>
<div style="height: 1px; background-color: #ccc;"></div>
</v-col>
</v-row>
<v-row class="search-box" align="center" no-gutters style="height: 44px;">
<v-col :cols="4">
<label for="" class="search-box-label">

125
pages/comm/auth/MenuRoleMngPage.vue
View File

@ -5,22 +5,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"
/>
<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"
/>
<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" />
@ -30,81 +20,55 @@
</v-col>
</v-row>
<v-row ref="contents" >
<v-col cols="12" lg="2" >
<v-row ref="contents">
<v-col cols="12" lg="3">
<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"
/>
<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-col cols="12" lg="9">
<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
>
<v-row align="center" no-gutters :style="{ height: 'calc(100% - 62px)' }" class="px-5">
<v-col class="h100" style="max-width: 400px;">
<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"
/>
<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="1.5">
<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
:btnActionsFnc="dualGridBtnActions" />
</v-col> -->
<div class="px-2">
<ActionButtons :parentPrgmId="myPrgmId" :leftGridName="gridName2" :rightGridName="gridName3"
:btnActionsFnc="dualGridBtnActions" />
</div>
<v-col :cols="7" class="h100">
<v-row
justify="space-between"
align="center"
no-gutters
class="px-5"
>
<v-row justify="space-between" align="center" no-gutters class="px-5">
<v-col :cols="11">
<span class="body-1 font-weight-bold"
>[배정]메뉴별권한 리스트</span
>
<span class="body-1 font-weight-bold d-flex align-center"
:style="{ minHeight: '36px' }">[배정]메뉴별권한 리스트</span>
<!-- <span class="body-1 font-weight-bold">[배정]메뉴별권한 리스트</span> -->
</v-col>
<v-col :cols="1" class="text-right">
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName3"
:btnActionsFnc="btnActions"
/>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName3"
:btnActionsFnc="btnActions" />
</v-col>
</v-row>
<div ref="treeGridParent2" class="px-0 mt-2" style="height: 60vh;">
@ -113,14 +77,9 @@
class="w100 h100"
>
</div> -->
<component
:is="loadTreeGrid2 ? 'Grid' : null"
:ref="gridName3 + myPrgmId"
:gridName="gridName3"
:parentPrgmId="myPrgmId"
:editorGrid="true"
@getRowsData="getAsgnRowData"
/>
<component :is="loadTreeGrid2 ? 'Grid' : null" :ref="gridName3 + myPrgmId"
:gridName="gridName3" :parentPrgmId="myPrgmId" :editorGrid="true"
@getRowsData="getAsgnRowData" />
</div>
</v-col>
</v-row>
@ -286,8 +245,8 @@ export default {
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 treeGridHeight = this.$refs.treeGridParent.offsetHeight - 50;
const treeGridHeight2 = this.$refs.treeGridParent2.offsetHeight - 50;
// const gridHeight = this.$refs.contents.offsetHeight - 30;
const myOptions = {
@ -316,8 +275,10 @@ export default {
treeColumnOptions: {
name: 'menuNm',
},
scrollX: false,
// scrollY: false,
rowHeight: 37,
minRowHeight: 37,
scrollX: true,
scrollY: true,
};
this.setGridOption({
@ -347,6 +308,9 @@ export default {
const el = document.createElement('input');
const { grid, rowKey, columnInfo } = props;
el.type = 'checkbox';
$(el).css('width', '16px');
$(el).css('height', '16px');
$(el).css('accent-color', '#1677FF');
el.value = props.value;
this.el = el;
@ -380,12 +344,12 @@ export default {
const _this = this;
const myColumns = [
{ header: '역할ID', name: 'roleId', align: 'center', minWidth: 70 },
{ header: '역할명', name: 'roleNm', minWidth: 70 },
{ header: '역할ID', name: 'roleId', align: 'left', minWidth: 70,width:120 },
{ header: '역할명', name: 'roleNm', minWidth: 70, align: 'left',width:120 },
{
header: '사용여부',
name: 'useFg',
align: 'center',
align: 'left',
minWidth: 84,
formatter({ value }) {
const newValue = _this.pageData.useFgList.filter(
@ -408,6 +372,7 @@ export default {
{
header: '메뉴명',
name: 'menuNm',
maxWidth: 120,
validation: {
dataType: 'string',
validatorFn: (value, row) => {

81
pages/comm/base/PrgmMngPage.vue
View File

@ -7,28 +7,15 @@
<v-card class="searchFilter">
<v-row align="end" no-gutters>
<v-col :cols="3">
<component
:is="'selectCodeList'"
:parentPrgmId="myPrgmId"
:label="'사용여부'"
:dataKey="'selectUseFg'"
:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true"
customClass="select-large"
/>
<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
:dataKey="'selectUseFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
:addAll="true" customClass="select-large" />
</v-col>
<v-col :cols="3">
<InputText
:parentPrgmId="myPrgmId"
label="프로그램명"
valueNm="prgmNm"
:searchOption="true"
:labelCols="12"
:textCols="12"
customClass="input-large"
/>
<InputText :parentPrgmId="myPrgmId" label="프로그램명" valueNm="prgmNm" :searchOption="true"
:labelCols="12" :textCols="12" customClass="input-large" />
</v-col>
<v-col :cols="5" class="text-right">
<v-col :cols="6" class="text-right">
<BtnSearch size="large" />
</v-col>
</v-row>
@ -38,46 +25,32 @@
<v-row ref="contents">
<!-- 프로그램 리스트 -->
<v-col :cols="5" >
<v-col :cols="5">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">프로그램 리스트</v-card-title>
<div>
<Buttons
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
:btnActionsFnc="btnActions"
/>
<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
:btnActionsFnc="btnActions" />
</div>
</div>
<div ref="gridParent" style="height: 60vh">
<!-- <div ref="gridParent" class="px-5 h100">
</div> -->
<component
:ref="gridName"
:is="loadGrid ? 'Grid' : null"
:parentPrgmId="myPrgmId"
:gridName="gridName"
@getRowsData="getRowData"
/>
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
:gridName="gridName" @getRowsData="getRowData" />
</div>
</v-card>
</v-col>
<!-- 프로그램 상세 -->
<v-col :cols="7" >
<v-col :cols="7">
<v-card class="pb-5">
<div class="d-flex align-center justify-space-between pa-5">
<v-card-title class="pa-0">프로그램 상세</v-card-title>
</div>
<div class="px-5" style="min-height:calc(100% - 76px)">
<component
:is="'Form'"
:parentPrgmId="myPrgmId"
:bindingData="gridName"
:detailList="detailList"
@gridEditingFinish="gridEditingFinish"
/>
<component :is="'Form'" :parentPrgmId="myPrgmId" :bindingData="gridName"
:detailList="detailList" @gridEditingFinish="gridEditingFinish" />
<!-- <div class="w100">
</div> -->
</div>
@ -139,8 +112,6 @@ export default {
{ header: '타임', name: 'field3', align: 'left' },
{ header: '사용여부', name: 'field4', align: 'left' }
],
data: dataPathDataExample,
defaultRow: dataPathDataExample,
option: {
scrollY: false,
scrollX: false,
@ -487,7 +458,7 @@ const myDetail = [
valueNm: 'prgmTpCd',
essential: true,
cols: 6,
class: 'py-2',
class: 'py-2 pt-5',
list: [
{ text: '프로그램', value: '1' },
{ text: '팝업', value: '2' },
@ -502,10 +473,11 @@ const myDetail = [
essential: true,
disabled: false,
cols: 6,
class: 'py-2',
class: 'py-2 pt-13',
value: { '1': true, '0': false },
required: true,
textCols: 12,
labelCols:12,
iconShow: true
},
{
@ -514,7 +486,7 @@ const myDetail = [
valueNm: 'url',
disabled: false,
cols: 12,
class: 'py-2',
class: 'py-2 pt-4',
required: true,
textCols: 12,
iconShow: true
@ -525,7 +497,7 @@ const myDetail = [
valueNm: 'regUserNo',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pt-5',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
@ -536,7 +508,7 @@ const myDetail = [
valueNm: 'regDttm',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pt-5',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
@ -547,7 +519,7 @@ const myDetail = [
valueNm: 'procUserNo',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pt-5',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
@ -558,19 +530,10 @@ const myDetail = [
valueNm: 'procDttm',
disabled: true,
cols: 6,
class: 'py-2',
class: 'py-2 pt-5',
placeholder: '시스템 자동입력',
textCols: 12,
iconShow: true
},
];
import { getPathDataExample } from '@/const/const'
const dataPathDataExample = getPathDataExample({
field1: 'PRG0001',
field2: '대시보드',
field3: '프로그램',
field4: '사용'
});
</script>

2
pages/ems/base/DashboardPage.vue
View File

@ -803,7 +803,7 @@ export default {
header: "NO",
name: "rowNum",
width: 70,
align: "center",
align: "right",
// hidden: true,
},
{

2
pages/ems/base/EqpmKindPage.vue
View File

@ -167,7 +167,7 @@ export default {
header: '설비종류ID',
name: 'eqpmKindId',
width: gridWidth * 0.5,
align: 'center',
align: 'left',
},
{
header: '설비종류명',

124
pages/ems/effc/EqpmIndMntrPage.vue
View File

@ -104,7 +104,6 @@
:is="loadGrid ? 'Grid' : null"
:gridName="gridName"
:parentPrgmId="myPrgmId"
@dblClick="gridDoubleClickEvent"
/>
<!--
<component
@ -143,7 +142,6 @@ import SelectBox from "@/components/common/select/SelectBox";
import SelectCmCycle from "@/components/common/select/SelectCmCycle";
import DatePicker from "@/components/common/Datepicker";
import Grid from "~/components/common/Grid";
import PageTitle from "@/components/common/PageTitle";
let myTitle;
let myPrgmId;
@ -170,7 +168,6 @@ export default {
SelectCmCycle,
DatePicker,
Grid,
PageTitle,
},
data() {
return {
@ -204,6 +201,7 @@ export default {
computed: {
...mapState({
pageData: (state) => state.pageData[myPrgmId],
isDarkMode: "isDarkMode",
}),
fromDt() {
return this.pageData.fromDt;
@ -237,6 +235,16 @@ export default {
await this.search();
}
},
isDarkMode(newVal) {
// Switch mode for 10 tooltips
for (let i = 0; i < 10; i++) {
const tooltipEl = document.getElementById(`tooltipElement_${i}`);
if (tooltipEl) {
tooltipEl.classList.remove("light-mode", "dark-mode");
tooltipEl.classList.add(newVal ? "dark-mode" : "light-mode");
}
}
},
},
async beforeCreate() {
myPrgmId = this.$route.query.prgmId;
@ -357,13 +365,79 @@ export default {
gridInit() {
const gridHeight = this.$refs.gridParent.offsetHeight - 30;
const _this = this;
// Define custom button
class CustomButton {
constructor(props,pageData) {
const { grid, rowKey, columnInfo } = props;
const gridData = grid.store.data.rawData;
const value = gridData[rowKey][columnInfo.name];
const onClickCallback = columnInfo.renderer.options.onClick;
this.disabled = columnInfo.renderer.options.disabled || false;
const elDiv = document.createElement('div');
elDiv.innerHTML = `<span>${value}</span>`;
$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
const el2 = document.createElement('button');
$(el2).addClass('edit-btn blue--text');
el2.innerText = '보기';
elDiv.appendChild(el2);
this.el = elDiv;
if (!this.disabled && typeof onClickCallback === 'function') {
// click 이벤트
this.el.addEventListener('click', function(event) {
onClickCallback(rowKey);
});
}
}
getElement() {
return this.el;
}
getValue() {
// return this.el.value;
}
mounted() {
// this.el.focus();
}
}
var columnList = [
{ header: "NO", name: "no", align: "right", width: 80 },
{ header: "fabId", name: "fabId", hidden: true },
{ header: "FAB", name: "fabNm", align: "left" },
{ header: "eqpmGrpId", name: "eqpmGrpId", hidden: true },
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200 },
{ header: "설비그룹", name: "eqpmGrpNm", align: "left", width: 200,
// Render custom button to switch page instead of double click on row
renderer: {
type: CustomButton,
options: {
value: '보기',
onClick: (rowKey) => {
const gridInstance = this.$refs[this.gridName].gridInstance;
const eventRowData = gridInstance.invoke("getRow", rowKey);
const data = {
cmCycle: this.pageData.cmCycle,
fromDt: this.pageData.fromDt,
fabId: this.selectValue01,
eqpmKindId: this.selectValue02,
eqpmGrpId: this.selectValue03,
eqpmId: eventRowData.eqpmId,
};
const key = "tick_" + Math.random();
this.$router.push({
name: "ems-effc-EnrgUseEqpmDetlMntrPage",
query: {
prgmId: "PRG0082",
},
params: {
...data,
key: key,
},
});
}
}
}
},
{ header: "eqpmId", name: "eqpmId", hidden: true },
{ header: "설비명", name: "eqpmNm", align: "left", width: 200 },
{
@ -472,6 +546,10 @@ export default {
},
],
},
pageOptions: {
useClient: true,
perPage: 3,
}
};
this.setGridOption({
@ -693,7 +771,8 @@ function numberFormatter({ value }) {
}
</script>
<style lang="scss" scoped>
@for $i from 0 through 9 {
::v-deep {
@for $i from 0 through 9 {
#gridParent > * {
// .tui-grid-content-area{
background-color: red;
@ -715,18 +794,46 @@ function numberFormatter({ value }) {
display: block;
position: absolute;
min-width: 100%;
bottom: 30px;
bottom: 40px;
z-index: 1000000000;
align: "center";
color: #f2f2f2;
background-color: #7f7f7f;
background-color: #000000d9;
// width : 77px;
width: 200%;
left: -50%;
border-radius: 3px;
border-radius: 4px;
padding: 6px 0px;
word-break: keep-all;
white-space: pre-wrap;
// Light mode
&.light-mode {
background-color: #000000d9;
}
// Dark mode
&.dark-mode {
background-color: #424242;
}
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-width: 6px;
border-style: solid;
}
&.light-mode::after {
border-color: #000000d9 transparent transparent transparent;
}
&.dark-mode::after {
border-color: #424242 transparent transparent transparent;
}
}
.tui-grid-rside-area {
display: none;
overflow: visible;
@ -741,5 +848,6 @@ function numberFormatter({ value }) {
overflow-x: visible;
overflow-y: visible;
}
}
}
</style>