|
|
@@ -126,23 +126,45 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 公司选择器 -->
|
|
|
- <van-popup v-model:show="showCompanyPicker" round position="bottom">
|
|
|
- <van-picker
|
|
|
- :columns="companyOptions"
|
|
|
- show-toolbar
|
|
|
- @confirm="onCompanyConfirm"
|
|
|
- @cancel="showCompanyPicker = false"
|
|
|
- />
|
|
|
+ <van-popup v-model:show="showCompanyPicker" round position="bottom" :style="{ maxHeight: '70vh' }">
|
|
|
+ <div class="company-picker-container">
|
|
|
+ <div class="search-container">
|
|
|
+ <van-search
|
|
|
+ v-model="companySearchKeyword"
|
|
|
+ placeholder="搜索往来单位名称"
|
|
|
+ @search="handleCompanySearch"
|
|
|
+ @clear="handleCompanySearch"
|
|
|
+ shape="round"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <van-picker
|
|
|
+ :columns="filteredCompanyOptions"
|
|
|
+ show-toolbar
|
|
|
+ @confirm="onCompanyConfirm"
|
|
|
+ @cancel="showCompanyPicker = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</van-popup>
|
|
|
|
|
|
<!-- 货物选择器 -->
|
|
|
- <van-popup v-model:show="showCargoPicker" round position="bottom">
|
|
|
- <van-picker
|
|
|
- :columns="cargoOptions"
|
|
|
- show-toolbar
|
|
|
- @confirm="onCargoConfirm"
|
|
|
- @cancel="showCargoPicker = false"
|
|
|
- />
|
|
|
+ <van-popup v-model:show="showCargoPicker" round position="bottom" :style="{ maxHeight: '70vh' }">
|
|
|
+ <div class="company-picker-container">
|
|
|
+ <div class="search-container">
|
|
|
+ <van-search
|
|
|
+ v-model="cargoSearchKeyword"
|
|
|
+ placeholder="搜索产品名称"
|
|
|
+ @search="handleCargoSearch"
|
|
|
+ @clear="handleCargoSearch"
|
|
|
+ shape="round"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <van-picker
|
|
|
+ :columns="filteredCargoOptions"
|
|
|
+ show-toolbar
|
|
|
+ @confirm="onCargoConfirm"
|
|
|
+ @cancel="showCargoPicker = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</van-popup>
|
|
|
|
|
|
<!-- 开始日期选择器 -->
|
|
|
@@ -162,7 +184,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, computed, onMounted } from 'vue'
|
|
|
+import { ref, reactive, computed, onMounted, watch } from 'vue'
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
import { showToast } from 'vant'
|
|
|
import { planApi, type Plan, type PlanCreate } from '@/api/plansApi'
|
|
|
@@ -187,6 +209,28 @@ const endDateSelected = ref<Date | null>(null)
|
|
|
const companyOptions = ref<{ text: string; value: string }[]>([])
|
|
|
const cargoOptions = ref<{ text: string; value: string }[]>([])
|
|
|
|
|
|
+// 搜索相关 - 往来单位
|
|
|
+const companySearchKeyword = ref('')
|
|
|
+const allCompanyOptions = ref<{ text: string; value: string }[]>([])
|
|
|
+const filteredCompanyOptions = computed(() => {
|
|
|
+ if (!companySearchKeyword.value) return [allCompanyOptions.value]
|
|
|
+ const filtered = allCompanyOptions.value.filter(item =>
|
|
|
+ item.text.toLowerCase().includes(companySearchKeyword.value.toLowerCase())
|
|
|
+ )
|
|
|
+ return [filtered]
|
|
|
+})
|
|
|
+
|
|
|
+// 搜索相关 - 产品
|
|
|
+const cargoSearchKeyword = ref('')
|
|
|
+const allCargoOptions = ref<{ text: string; value: string }[]>([])
|
|
|
+const filteredCargoOptions = computed(() => {
|
|
|
+ if (!cargoSearchKeyword.value) return [allCargoOptions.value]
|
|
|
+ const filtered = allCargoOptions.value.filter(item =>
|
|
|
+ item.text.toLowerCase().includes(cargoSearchKeyword.value.toLowerCase())
|
|
|
+ )
|
|
|
+ return [filtered]
|
|
|
+})
|
|
|
+
|
|
|
const formData = reactive<PlanCreate>({
|
|
|
planNo: '',
|
|
|
planDate: dayjs().format('YYYY-MM-DD'),
|
|
|
@@ -205,10 +249,11 @@ startDateSelected.value = dayjs().toDate()
|
|
|
const loadCompanies = async () => {
|
|
|
try {
|
|
|
const companies = await companyApi.list()
|
|
|
- companyOptions.value = companies.map(item => ({
|
|
|
+ allCompanyOptions.value = companies.map(item => ({
|
|
|
text: item.name,
|
|
|
value: item.name
|
|
|
}))
|
|
|
+ companyOptions.value = allCompanyOptions.value
|
|
|
} catch (error) {
|
|
|
console.error('加载公司列表失败', error)
|
|
|
}
|
|
|
@@ -217,10 +262,11 @@ const loadCompanies = async () => {
|
|
|
const loadCargos = async () => {
|
|
|
try {
|
|
|
const cargos = await cargoApi.list()
|
|
|
- cargoOptions.value = cargos.map(item => ({
|
|
|
+ allCargoOptions.value = cargos.map(item => ({
|
|
|
text: item.name,
|
|
|
value: item.name
|
|
|
}))
|
|
|
+ cargoOptions.value = allCargoOptions.value
|
|
|
} catch (error) {
|
|
|
console.error('加载货物列表失败', error)
|
|
|
}
|
|
|
@@ -236,6 +282,14 @@ const onCargoConfirm = ({ selectedOptions }: any) => {
|
|
|
showCargoPicker.value = false
|
|
|
}
|
|
|
|
|
|
+const handleCompanySearch = () => {
|
|
|
+ // 触发 computed 过滤
|
|
|
+}
|
|
|
+
|
|
|
+const handleCargoSearch = () => {
|
|
|
+ // 触发 computed 过滤
|
|
|
+}
|
|
|
+
|
|
|
const onStartDateConfirm = (value: Date | Date[]) => {
|
|
|
const date = Array.isArray(value) ? value[0] : value
|
|
|
formData.startDate = dayjs(date).format('YYYY-MM-DD')
|
|
|
@@ -313,6 +367,14 @@ onMounted(async () => {
|
|
|
await loadData()
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+// 打开弹窗时重置搜索关键词
|
|
|
+watch(showCompanyPicker, (val) => {
|
|
|
+ if (val) companySearchKeyword.value = ''
|
|
|
+})
|
|
|
+watch(showCargoPicker, (val) => {
|
|
|
+ if (val) cargoSearchKeyword.value = ''
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -419,5 +481,30 @@ onMounted(async () => {
|
|
|
margin-top: 24px;
|
|
|
padding: 0 16px;
|
|
|
}
|
|
|
+
|
|
|
+.company-picker-container {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.search-container {
|
|
|
+ padding: 16px;
|
|
|
+ border-bottom: 1px solid #ebedf0;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ :deep(.van-search) {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-search__content) {
|
|
|
+ background: #f7f8fa;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__control) {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|