sk_fems_ui commit

components/common/search/index.vue

@@ -0,0 +1,105 @@
+<template>
+	<v-card class="searchFilter">
+		<v-row align="center" no-gutters style="margin: 14px 0px 0px">
+			<v-col
+				v-if="chkSearchOptions"
+				:cols="chkSearchOptions.cols || '12'"
+				:class="chkSearchOptions.class || ''"
+			>
+				<v-row align="center" no-gutters>
+					<template v-for="(item, index) in chkSearchOptions.list">
+						<!-- <v-col
+              :cols="item.cols"
+              :class="item.class || ''"
+              :key="'searchOptions' + index"
+            >
+              <component
+                :is="item.type ? item.type : null"
+                :parentPrgmId="parentPrgmId"
+                :item="item"
+              />
+            </v-col> -->
+						<v-col :cols="item.cols" :key="'searchOptions' + index">
+							<component
+								:is="item.type ? item.type : null"
+								:parentPrgmId="parentPrgmId"
+								:item="item"
+							/>
+						</v-col>
+					</template>
+				</v-row>
+			</v-col>
+			<v-spacer v-if="chkSearchOptions && chkSearchButtons"></v-spacer>
+			<v-col
+				v-if="chkSearchButtons"
+				:cols="chkSearchButtons.cols || '12'"
+				:class="chkSearchButtons.class || ''"
+			>
+				<template v-for="(item, index) in chkSearchButtons.list">
+					<component
+						:key="'searchButtons' + index"
+						:is="item.type ? item.type : null"
+						:parentPrgmId="parentPrgmId"
+						:gridName="item.bindingData"
+						:class="{ 'mr-1': index < chkSearchButtons.list.length - 1 }"
+					/>
+				</template>
+			</v-col>
+		</v-row>
+	</v-card>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import SearchSelect from './SearchSelect';
+import SearchInput from './SearchInput';
+import SearchCmCycle from './SearchCmCycle';
+import DatePicker from './CustomDatepicker';
+import CheckBox from './CheckBox';
+import BtnSearch from '~/components/common/button/BtnSearch';
+import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
+import FtnPlcMultiPop from '~/components/common/modal/FtnPlcMultiPop';
+import UserPopPage from '~/components/common/modal/UserPopPage';
+
+export default {
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+	},
+	components: {
+		SearchSelect,
+		SearchInput,
+		SearchCmCycle,
+		DatePicker,
+		CheckBox,
+		BtnSearch,
+		BtnExcelDownload,
+		FtnPlcMultiPop,
+		UserPopPage,
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState({
+			searchItems(state) {
+				return state.pageData[this.parentPrgmId].searchItems;
+			},
+		}),
+		chkSearchOptions() {
+			// console.log("chkSearchOptions", this.searchItems);
+			return this.searchItems.options;
+		},
+		chkSearchButtons() {
+			// console.log("chkSearchButtons", this.searchItems);
+			return this.searchItems.buttons;
+		},
+	},
+	created() {},
+	methods: {},
+};
+</script>
+
+<style></style>