|
@@ -1,58 +1,99 @@
|
|
|
<template>
|
|
|
- <!-- <ion-segment>
|
|
|
- <ion-segment-button value="first" content-id="first">
|
|
|
- <ion-label>当前</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="second" content-id="second">
|
|
|
- <ion-label>历史</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- </ion-segment>
|
|
|
- <ion-segment-view class="inspect-segment">
|
|
|
- <ion-segment-content id="first">
|
|
|
+ <van-tabs v-model="active" @click-tab="onClickTab">
|
|
|
+ <van-tab title="当前">
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <div class="filter-wrapper">
|
|
|
+ <div class="filter-item">
|
|
|
+ <div class="filter-btn" @click="showPicker = true">
|
|
|
+ {{ getTypeName(fieldValue) }}
|
|
|
+ <van-icon name="arrow-down" color="#ebecf0" size="1rem" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup v-model:show="showPicker" round position="bottom">
|
|
|
+ <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
|
|
|
+ </van-popup>
|
|
|
+ <list01 class="ducha-group-wrapper" :type="fieldValue"></list01>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="历史">
|
|
|
<current-component></current-component>
|
|
|
- </ion-segment-content>
|
|
|
- <ion-segment-content id="second">
|
|
|
- lishi
|
|
|
- </ion-segment-content>
|
|
|
- </ion-segment-view> -->
|
|
|
- <div class="filter-wrapper">
|
|
|
- <ion-select class="filter-item" aria-label="类型" value="当前">
|
|
|
- <ion-select-option value="当前">当前</ion-select-option>
|
|
|
- <ion-select-option value="历史">历史</ion-select-option>
|
|
|
- </ion-select>
|
|
|
- <ion-select class="filter-item" aria-label="督察类型" value="稽查工作">
|
|
|
- <ion-select-option value="稽查工作">稽查工作</ion-select-option>
|
|
|
- </ion-select>
|
|
|
- </div>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { onMounted } from "vue";
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
import CurrentComponent from "./current.vue";
|
|
|
-import { getRStLLMaxDate } from "@/api/home";
|
|
|
+import List01 from "@/components/list01.vue";
|
|
|
+import { showToast } from 'vant';
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ { text: '稽查工作', value: '008' },
|
|
|
+];
|
|
|
+const fieldValue = ref('008');
|
|
|
+const showPicker = ref(false);
|
|
|
+
|
|
|
+const onConfirm = ({ selectedOptions }) => {
|
|
|
+ showPicker.value = false;
|
|
|
+ fieldValue.value = selectedOptions[0].text;
|
|
|
+};
|
|
|
+
|
|
|
+const active = ref('当前');
|
|
|
+const onClickTab = ({ title }) => showToast(title);
|
|
|
+
|
|
|
+function getTypeName(code) {
|
|
|
+ if (!code) return '';
|
|
|
+ return columns.find(item => item.value === code)?.text;
|
|
|
+}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- getRStLLMaxDate().then(res => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
})
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.content-wrapper {
|
|
|
+ padding-top: 8px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .ducha-group-wrapper {
|
|
|
+ height: calc(100% - 35px);
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
.filter-wrapper {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- margin: 5px;
|
|
|
+ margin: 0 8px 8px 8px;
|
|
|
|
|
|
.filter-item {
|
|
|
width: auto;
|
|
|
padding: 0 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .filter-btn {
|
|
|
+ padding: 3px 1px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
-ion-segment-view.inspect-segment {
|
|
|
- height: calc(100% - 48px);
|
|
|
+.van-tabs {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.van-tabs__content {
|
|
|
+ height: calc(100% - 44px);
|
|
|
+
|
|
|
+ .van-tab__panel {
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|