376 lines
8.2 KiB
Vue
376 lines
8.2 KiB
Vue
<template>
|
|
<v-row class="search-box" align="center" no-gutters>
|
|
<v-col :cols="labelCols">
|
|
<label for="" class="search-box-label">
|
|
{{ label }}
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="textCols">
|
|
<!-- <a-input :size="size" @click="showDetailModal = true" class="custom-input" suffix-icon placeholder="Search..." v-model="selectValue">
|
|
<template #suffix>
|
|
<a-icon type="search" />
|
|
</template>
|
|
</a-input> -->
|
|
|
|
<!-- append-icon="search" -->
|
|
<v-text-field
|
|
readonly
|
|
v-model="selectValue"
|
|
class="v-input__custom"
|
|
@click="showDetailModal = true"
|
|
outlined
|
|
:hide-details="true"
|
|
:required="required || false"
|
|
>
|
|
<!-- :disabled="disabled || false" -->
|
|
<template #append >
|
|
<a-icon type="search" />
|
|
</template>
|
|
</v-text-field>
|
|
|
|
</v-col>
|
|
<a-modal v-model="showDetailModal" title="가이드 알람이력" class="text-left" width="800px" :footer="null"
|
|
:style="{ borderRadius: '8px', overflow: 'hidden' }" :bodyStyle="{ paddingTop: '0px' }">
|
|
<!-- Top Input Fields -->
|
|
<v-row :gutters="32" align="end" style="margin-bottom: 16px;">
|
|
<!-- Label on the left -->
|
|
|
|
<!-- Two inputs on the right -->
|
|
<v-col :cols="3">
|
|
<component :is="'SelectBox'" :label="'실비그룹'" :labelCols="12" :textCols="12"
|
|
:propsValue="eqpmGrpSelected" :itemList="eqpmGrpList"
|
|
@update:propsValue="eqpmGrpSelected = $event" :disabled="disabled" :iconShow="false" />
|
|
</v-col>
|
|
|
|
<v-col :cols="4" style="text-align: left;">
|
|
<component :is="'SelectBox'" :label="'FAB'" :labelCols="12" :textCols="12"
|
|
:propsValue="localFabSelected" :itemList="fabList"
|
|
@update:propsValue="localFabSelected = $event" :disabled="disabled" :iconShow="false" />
|
|
</v-col>
|
|
<v-col :cols="5" >
|
|
<v-row>
|
|
<v-col :cols="12" style="text-align: left;">
|
|
<div>실비명</div>
|
|
</v-col>
|
|
|
|
<v-col :cols="8">
|
|
<a-input class="custom-input" suffix-icon placeholder="Search..."
|
|
:style="{ borderRadius: '6px', }" >
|
|
<template #suffix>
|
|
<a-icon type="search" />
|
|
</template>
|
|
|
|
</a-input>
|
|
</v-col>
|
|
<v-col :cols="3" class="text-right">
|
|
<!-- 조회버튼 -->
|
|
<BtnSearch @click="searchFab()" />
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
|
|
</v-row>
|
|
<a-divider />
|
|
<!-- Table -->
|
|
<a-table :columns="columns" :dataSource="filteredData" rowKey="id" :rowSelection="rowSelection" bordered />
|
|
|
|
<!-- Footer Buttons -->
|
|
<div style="text-align: right; margin-top: 16px;">
|
|
<a-button @click="showDetailModal = false">닫기</a-button>
|
|
<a-button type="primary" style="margin-left: 8px; color:#fff"
|
|
@click="showDetailModal = false">확인</a-button>
|
|
</div>
|
|
</a-modal>
|
|
</v-row>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations, mapActions } from 'vuex';
|
|
import Grid from '~/components/common/Grid';
|
|
import Utility from '~/plugins/utility';
|
|
import selectCodeList from '@/components/common/select/selectCodeList';
|
|
import InputText from '~/components/common/input/InputText';
|
|
import dateUtility from '~/plugins/dateUtility';
|
|
import SelectBox from '@/components/common/select/SelectBox';
|
|
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';
|
|
import BtnSearch from '~/components/common/button/BtnSearch';
|
|
|
|
export default {
|
|
props: {
|
|
parentPrgmId: {
|
|
type: String,
|
|
require: true,
|
|
default: '비교대상 최대(20개)',
|
|
},
|
|
label: {
|
|
type: String,
|
|
require: false,
|
|
default: '전력 계약 정보',
|
|
},
|
|
valueNm: {
|
|
type: String,
|
|
require: false,
|
|
default: '',
|
|
},
|
|
title: {
|
|
type: String,
|
|
require: false,
|
|
default: '전력 계약 목록',
|
|
},
|
|
labelCols: {
|
|
type: Number,
|
|
require: false,
|
|
default: 12,
|
|
},
|
|
textCols: {
|
|
type: Number,
|
|
require: false,
|
|
default: 12,
|
|
},
|
|
item: {
|
|
type: Object,
|
|
require: true,
|
|
},
|
|
bindingData: {
|
|
type: String,
|
|
require: false,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false
|
|
},
|
|
fabDisabled: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false
|
|
},
|
|
eqpmGrpDisabled: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false
|
|
},
|
|
iconShow: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: true
|
|
},
|
|
isMulti: {
|
|
type: Boolean,
|
|
require: false,
|
|
default: false
|
|
},
|
|
fabSelected: {
|
|
type: String, // or Array, depending on your data
|
|
required: false
|
|
},
|
|
eqpmGrpSelected: {
|
|
type: String, // or Array, depending on your data
|
|
required: false
|
|
},
|
|
size: {
|
|
type: String,
|
|
require: false,
|
|
default: "middle",
|
|
}
|
|
|
|
},
|
|
components: {
|
|
Grid,
|
|
selectCodeList,
|
|
dateUtility,
|
|
InputText,
|
|
SelectBox,
|
|
SelectBoxMulti,
|
|
BtnSearch
|
|
// Tree
|
|
},
|
|
data() {
|
|
return {
|
|
labelPrepend: true,
|
|
modalDataKey: 'eqpmSelectPopData',
|
|
myModalKey: 'eqpmSelectPop',
|
|
gridName: 'eqpmSelectGrid',
|
|
loadGrid: false,
|
|
setGrid: false,
|
|
popCheck: false,
|
|
dialog: false,
|
|
activeRowData: {},
|
|
checkedRowDataList: [],
|
|
|
|
localFabSelected: this.fabSelected,
|
|
localEqpmGrpSelected: this.eqpmGrpSelected,
|
|
|
|
fabList: [],
|
|
eqpmGrpList: [],
|
|
searchWord: '',
|
|
activeRowData: {},
|
|
textFieldData: '',
|
|
selectRow: {},
|
|
showDetailModal: false,
|
|
columns: [
|
|
{
|
|
title: 'FAB',
|
|
dataIndex: 'fab',
|
|
key: 'fab',
|
|
},
|
|
{
|
|
title: '설비ID',
|
|
dataIndex: 'equipmentId',
|
|
key: 'equipmentId',
|
|
},
|
|
{
|
|
title: '설비명',
|
|
dataIndex: 'equipmentName',
|
|
key: 'equipmentName',
|
|
},
|
|
],
|
|
// Table data
|
|
data: [
|
|
{
|
|
id: 1,
|
|
fab: 'FAB001',
|
|
equipmentId: 'EQ001',
|
|
equipmentName: '냉각기 A',
|
|
},
|
|
{
|
|
id: 2,
|
|
fab: 'FAB002',
|
|
equipmentId: 'EQ002',
|
|
equipmentName: '펌프 B',
|
|
},
|
|
{
|
|
id: 3,
|
|
fab: 'FAB003',
|
|
equipmentId: 'EQ003',
|
|
equipmentName: '히터 C',
|
|
},
|
|
{
|
|
id: 4,
|
|
fab: 'FAB001',
|
|
equipmentId: 'EQ004',
|
|
equipmentName: '냉각기 D',
|
|
},
|
|
{
|
|
id: 5,
|
|
fab: 'FAB002',
|
|
equipmentId: 'EQ005',
|
|
equipmentName: '펌프 E',
|
|
},
|
|
{
|
|
id: 6,
|
|
fab: 'FAB003',
|
|
equipmentId: 'EQ006',
|
|
equipmentName: '히터 F',
|
|
},
|
|
{
|
|
id: 7,
|
|
fab: 'FAB001',
|
|
equipmentId: 'EQ007',
|
|
equipmentName: '냉각기 G',
|
|
},
|
|
{
|
|
id: 8,
|
|
fab: 'FAB002',
|
|
equipmentId: 'EQ008',
|
|
equipmentName: '펌프 H',
|
|
},
|
|
],
|
|
filteredData: [],
|
|
// Row selection config
|
|
rowSelection: {
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
console.log('Selected Row Keys:', selectedRowKeys);
|
|
console.log('Selected Rows:', selectedRows);
|
|
},
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
|
|
fabSelected(newVal) {
|
|
this.localFabSelected = newVal;
|
|
},
|
|
eqpmGrpSelected(newVal) {
|
|
this.localEqpmGrpSelected = newVal;
|
|
}
|
|
|
|
},
|
|
|
|
beforeCreate() {
|
|
this.$store.commit('setPageData', {
|
|
eqpmSelectPopData: { eqpmSelectPop },
|
|
});
|
|
},
|
|
async created() {
|
|
await this.getFab();
|
|
await this.getEqpmGrp();
|
|
this.init();
|
|
},
|
|
methods: {
|
|
// ...mapMutations({
|
|
// setPageData: 'setPageData',
|
|
// setModalGridData: 'setModalGridData',
|
|
// setModalGridColumn: 'setModalGridColumn',
|
|
// setModalGridOption: 'setModalGridOption',
|
|
// }),
|
|
// ...mapActions({
|
|
// postApiReturn: 'modules/list/postApiReturn',
|
|
// }),
|
|
init() {
|
|
this.filteredData = this.data;
|
|
// this.activeRowData = {};
|
|
// this.gridInit();
|
|
},
|
|
// search() {
|
|
// this.getRowGridData();
|
|
// },
|
|
searchFab() {
|
|
console.log('tttttttttttt')
|
|
// this.filteredData = this.data.filter(item => {
|
|
// const matchGrp = this.eqpmGrpSelected ? item.group === this.eqpmGrpSelected : true;
|
|
// const matchFab = this.localFabSelected ? item.fab === this.localFabSelected : true;
|
|
// return matchGrp && matchFab;
|
|
// });
|
|
},
|
|
async getFab() {
|
|
|
|
this.fabList = [
|
|
{ label: 'FAB001', value: 'FAB001' },
|
|
{ label: 'FAB002', value: 'FAB002' },
|
|
{ label: 'FAB003', value: 'FAB003' },
|
|
];
|
|
|
|
// this.fabSelected = 'FAB001';
|
|
|
|
},
|
|
async getEqpmGrp() {
|
|
this.eqpmGrpList = [
|
|
{ label: 'EQ 1', value: 'EQ001' },
|
|
{ label: 'EQ 2', value: 'EQ002' },
|
|
{ label: 'EQ 3', value: 'EQ003' },
|
|
];
|
|
|
|
// this.eqpmGrpSelected = 'EQ001';
|
|
|
|
},
|
|
|
|
|
|
},
|
|
};
|
|
var eqpmSelectPop = {
|
|
eqpmSelectGrid: {
|
|
data: [],
|
|
column: [],
|
|
option: {}
|
|
}
|
|
}
|
|
|
|
</script>
|