|
@@ -8,67 +8,6 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="search--modules type2">
|
|
|
|
|
- <div class="search--inner">
|
|
|
|
|
- <div class="form--cont--filter">
|
|
|
|
|
- <v-select
|
|
|
|
|
- v-model="filter"
|
|
|
|
|
- :items="filderArr"
|
|
|
|
|
- variant="outlined"
|
|
|
|
|
- class="custom-select"
|
|
|
|
|
- >
|
|
|
|
|
- </v-select>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="form--cont--text">
|
|
|
|
|
- <v-text-field
|
|
|
|
|
- v-model="searchModel"
|
|
|
|
|
- class="custom-input mini"
|
|
|
|
|
- style="width: 100%"
|
|
|
|
|
- placeholder="검색어를 입력하세요"
|
|
|
|
|
- ></v-text-field>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="search--inner">
|
|
|
|
|
- <div class="calendar-wrap ml--0">
|
|
|
|
|
- <div class="calendar">
|
|
|
|
|
- <VueDatePicker
|
|
|
|
|
- :format="datePickerFormat"
|
|
|
|
|
- v-model="searchStartDate"
|
|
|
|
|
- placeholder="날짜를 선택하세요"
|
|
|
|
|
- :auto-apply="true"
|
|
|
|
|
- week-start="0"
|
|
|
|
|
- ></VueDatePicker>
|
|
|
|
|
- </div>
|
|
|
|
|
- <span class="text">~</span>
|
|
|
|
|
- <div class="calendar">
|
|
|
|
|
- <VueDatePicker
|
|
|
|
|
- v-model="searchEndDate"
|
|
|
|
|
- :format="datePickerFormat"
|
|
|
|
|
- placeholder="날짜를 선택하세요"
|
|
|
|
|
- :auto-apply="true"
|
|
|
|
|
- week-start="0"
|
|
|
|
|
- ></VueDatePicker>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="month--selector">
|
|
|
|
|
- <v-btn
|
|
|
|
|
- v-for="option in dateOptions"
|
|
|
|
|
- :key="option.value"
|
|
|
|
|
- :class="{ actv: selectedRange === option.value }"
|
|
|
|
|
- @click="setDateRange(option.value)"
|
|
|
|
|
- elevation="0"
|
|
|
|
|
- >
|
|
|
|
|
- {{ option.label }}
|
|
|
|
|
- </v-btn>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <v-btn
|
|
|
|
|
- class="custom-btn btn-blue mini sch--btn"
|
|
|
|
|
- @click="fnSearch(searchModel, filter)"
|
|
|
|
|
- >검색</v-btn
|
|
|
|
|
- >
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
<div class="data--list--wrap">
|
|
<div class="data--list--wrap">
|
|
|
<!-- <div class="btn--actions--wrap">
|
|
<!-- <div class="btn--actions--wrap">
|
|
|
<div class="left--sections">
|
|
<div class="left--sections">
|
|
@@ -94,6 +33,49 @@
|
|
|
<div class="cs--header">
|
|
<div class="cs--header">
|
|
|
<h3>나의 공동구매</h3>
|
|
<h3>나의 공동구매</h3>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 검색 영역 -->
|
|
|
|
|
+ <div class="cs--search-area">
|
|
|
|
|
+ <div class="search-controls">
|
|
|
|
|
+ <div class="search-filter">
|
|
|
|
|
+ <v-select
|
|
|
|
|
+ v-model="filter"
|
|
|
|
|
+ :items="filderArr"
|
|
|
|
|
+ variant="outlined"
|
|
|
|
|
+ density="compact"
|
|
|
|
|
+ hide-details
|
|
|
|
|
+ ></v-select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="search-input">
|
|
|
|
|
+ <v-text-field
|
|
|
|
|
+ v-model="searchModel"
|
|
|
|
|
+ placeholder="검색어를 입력하세요"
|
|
|
|
|
+ variant="outlined"
|
|
|
|
|
+ density="compact"
|
|
|
|
|
+ hide-details
|
|
|
|
|
+ prepend-inner-icon="mdi-magnify"
|
|
|
|
|
+ @keyup.enter="fnSearch(searchModel, filter)"
|
|
|
|
|
+ ></v-text-field>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="search-actions">
|
|
|
|
|
+ <v-btn
|
|
|
|
|
+ class="custom-btn mini btn--pp"
|
|
|
|
|
+ color="primary"
|
|
|
|
|
+ @click="fnSearch(searchModel, filter)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 검색
|
|
|
|
|
+ </v-btn>
|
|
|
|
|
+ <v-btn
|
|
|
|
|
+ class="custom-btn mini btn-white"
|
|
|
|
|
+ color="secondary"
|
|
|
|
|
+ variant="outlined"
|
|
|
|
|
+ @click="resetSearch"
|
|
|
|
|
+ >
|
|
|
|
|
+ 초기화
|
|
|
|
|
+ </v-btn>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
<div class="cs--list" v-if="itemList.length > 0">
|
|
<div class="cs--list" v-if="itemList.length > 0">
|
|
|
<div v-for="(items, index) in paginatedItems" :key="index" class="">
|
|
<div v-for="(items, index) in paginatedItems" :key="index" class="">
|
|
|
<!-- <div v-if="itemType == 'E'" @click="toItemDetail(items.SEQ)" class="item-content">
|
|
<!-- <div v-if="itemType == 'E'" @click="toItemDetail(items.SEQ)" class="item-content">
|
|
@@ -141,7 +123,6 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import VueDatePicker from "@vuepic/vue-datepicker";
|
|
|
|
|
import "@vuepic/vue-datepicker/dist/main.css";
|
|
import "@vuepic/vue-datepicker/dist/main.css";
|
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
|
/************************************************************************
|
|
/************************************************************************
|
|
@@ -185,6 +166,7 @@ import dayjs from 'dayjs';
|
|
|
const filderArr = ref([
|
|
const filderArr = ref([
|
|
|
{ title: "전체", value: "" },
|
|
{ title: "전체", value: "" },
|
|
|
{ title: "제품명", value: "name" },
|
|
{ title: "제품명", value: "name" },
|
|
|
|
|
+ { title: "회사명", value: "company" },
|
|
|
]);
|
|
]);
|
|
|
const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
|
|
const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
@@ -193,7 +175,8 @@ import dayjs from 'dayjs';
|
|
|
//return memberType === 'INFLUENCER' ? '제품 관리 (파트너십)' : '제품 관리 (자사)';
|
|
//return memberType === 'INFLUENCER' ? '제품 관리 (파트너십)' : '제품 관리 (자사)';
|
|
|
});
|
|
});
|
|
|
const itemList = ref([]);
|
|
const itemList = ref([]);
|
|
|
- const itemsPerPage = 5;
|
|
|
|
|
|
|
+ const allItemList = ref([]); // 전체 데이터 저장용
|
|
|
|
|
+ const itemsPerPage = 10;
|
|
|
const currentPage = ref(1);
|
|
const currentPage = ref(1);
|
|
|
|
|
|
|
|
/* eslint-disable */
|
|
/* eslint-disable */
|
|
@@ -275,38 +258,52 @@ import dayjs from 'dayjs';
|
|
|
await useAxios()
|
|
await useAxios()
|
|
|
.post("/item/list", _req)
|
|
.post("/item/list", _req)
|
|
|
.then((res) => {
|
|
.then((res) => {
|
|
|
- itemList.value = res.data;
|
|
|
|
|
- console.log(res.data);
|
|
|
|
|
|
|
+ allItemList.value = res.data; // 전체 데이터 저장
|
|
|
|
|
+ itemList.value = res.data; // 초기 표시용
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const fnSearch = (__KEYWORD, __FILTER) => {
|
|
const fnSearch = (__KEYWORD, __FILTER) => {
|
|
|
- let _req = {
|
|
|
|
|
- filter: __FILTER,
|
|
|
|
|
- keyword: __KEYWORD,
|
|
|
|
|
- startDate: searchStartDate.value ? dayjs(searchStartDate.value).format('YYYY-MM-DD') : '',
|
|
|
|
|
- endDate: searchEndDate.value ? dayjs(searchEndDate.value).format('YYYY-MM-DD') : '',
|
|
|
|
|
- TYPE: itemType.value,
|
|
|
|
|
- showYN: "Y"
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ let filteredItems = [...allItemList.value];
|
|
|
|
|
|
|
|
- if (memberType === "INFLUENCER") {
|
|
|
|
|
- // 인플루언서의 경우: 파트너십이 체결된 제품만 검색 + 노출된 제품만
|
|
|
|
|
- _req.showYN = "Y";
|
|
|
|
|
- _req.MEMBER_TYPE = "INFLUENCER";
|
|
|
|
|
- _req.MEMBER_SEQ = useAtStore.auth.seq;
|
|
|
|
|
- } else {
|
|
|
|
|
- // 벤더사의 경우: 자사 제품만 검색
|
|
|
|
|
- _req.MEMBER_TYPE = "VENDOR";
|
|
|
|
|
- _req.COMPANY_NUMBER = useAtStore.auth.companyNumber || "1";
|
|
|
|
|
|
|
+ // 키워드 검색
|
|
|
|
|
+ if (__KEYWORD && __KEYWORD.trim() !== '') {
|
|
|
|
|
+ const keyword = __KEYWORD.toLowerCase();
|
|
|
|
|
+ filteredItems = filteredItems.filter(item => {
|
|
|
|
|
+ if (__FILTER === 'name') {
|
|
|
|
|
+ return item.NAME && item.NAME.toLowerCase().includes(keyword);
|
|
|
|
|
+ } else if (__FILTER === 'company') {
|
|
|
|
|
+ return item.COMPANY_NAME && item.COMPANY_NAME.toLowerCase().includes(keyword);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 전체 검색 (이름 또는 회사명)
|
|
|
|
|
+ return (item.NAME && item.NAME.toLowerCase().includes(keyword)) ||
|
|
|
|
|
+ (item.COMPANY_NAME && item.COMPANY_NAME.toLowerCase().includes(keyword));
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ // 날짜 필터링 (마감일 기준)
|
|
|
|
|
+ // if (searchStartDate.value && searchEndDate.value) {
|
|
|
|
|
+ // const startDate = dayjs(searchStartDate.value).format('YYYY-MM-DD');
|
|
|
|
|
+ // const endDate = dayjs(searchEndDate.value).format('YYYY-MM-DD');
|
|
|
|
|
+ // filteredItems = filteredItems.filter(item => {
|
|
|
|
|
+ // const orderEndDate = dayjs(item.ORDER_END_DATE).format('YYYY-MM-DD');
|
|
|
|
|
+ // return orderEndDate >= startDate && orderEndDate <= endDate;
|
|
|
|
|
+ // });
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ itemList.value = filteredItems;
|
|
|
|
|
+ currentPage.value = 1; // 검색 시 첫 페이지로 이동
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
- useAxios()
|
|
|
|
|
- .post("/item/search", _req)
|
|
|
|
|
- .then((res) => {
|
|
|
|
|
- itemList.value = res.data;
|
|
|
|
|
- })
|
|
|
|
|
- .catch((error) => {});
|
|
|
|
|
|
|
+ // 검색 초기화
|
|
|
|
|
+ const resetSearch = () => {
|
|
|
|
|
+ searchModel.value = '';
|
|
|
|
|
+ searchStartDate.value = null;
|
|
|
|
|
+ searchEndDate.value = null;
|
|
|
|
|
+ selectedRange.value = '';
|
|
|
|
|
+ itemList.value = [...allItemList.value];
|
|
|
|
|
+ currentPage.value = 1;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
|