init dev-push code ui base design
This commit is contained in:
leonard
375
components/common/modal/EqpmSelectPop_bk.vue
Normal file
375
components/common/modal/EqpmSelectPop_bk.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user