Update tooltip s4 + add view button to switch page #36
@ -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>
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -803,7 +803,7 @@ export default {
|
||||
header: "NO",
|
||||
name: "rowNum",
|
||||
width: 70,
|
||||
align: "center",
|
||||
align: "right",
|
||||
// hidden: true,
|
||||
},
|
||||
{
|
||||
|
||||
@ -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,53 +771,83 @@ function numberFormatter({ value }) {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@for $i from 0 through 9 {
|
||||
#gridParent > * {
|
||||
// .tui-grid-content-area{
|
||||
background-color: red;
|
||||
color: red;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i} {
|
||||
overflow: visible;
|
||||
position: relative; // 테스트3번쨰
|
||||
white-space: nowrap; // 테스트3번쨰
|
||||
}
|
||||
#tooltipElement_#{$i} {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
|
||||
display: block;
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
bottom: 30px;
|
||||
z-index: 1000000000;
|
||||
align: "center";
|
||||
color: #f2f2f2;
|
||||
background-color: #7f7f7f;
|
||||
// width : 77px;
|
||||
width: 200%;
|
||||
left: -50%;
|
||||
border-radius: 3px;
|
||||
word-break: keep-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.tui-grid-rside-area {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.tui-grid-header-area {
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
::v-deep {
|
||||
@for $i from 0 through 9 {
|
||||
#gridParent > * {
|
||||
// .tui-grid-content-area{
|
||||
background-color: red;
|
||||
color: red;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i} {
|
||||
overflow: visible;
|
||||
position: relative; // 테스트3번쨰
|
||||
white-space: nowrap; // 테스트3번쨰
|
||||
}
|
||||
#tooltipElement_#{$i} {
|
||||
display: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
#tooltipTargetElement_#{$i}:hover #tooltipElement_#{$i} {
|
||||
display: block;
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
bottom: 40px;
|
||||
z-index: 1000000000;
|
||||
align: "center";
|
||||
color: #f2f2f2;
|
||||
background-color: #000000d9;
|
||||
// width : 77px;
|
||||
width: 200%;
|
||||
left: -50%;
|
||||
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;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.tui-grid-header-area {
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user