cmc-oa/oa-ui-app/pages/oa/borrow/borrowList.vue

<template>
  <view class="container">
    <uv-tabs :list="tabList" @click="clickTab"></uv-tabs>
    <view>
      
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      tabList: [{
        name: '项目借款',
      }, {
        name: '非项目借款',
      }, {
        name: '工会借款'
      }, {
        name: '党委借款'
      }, {
        name: '团委借款'
      }],
      selectedTab: '项目借款',
      isSearchExpanded: false,
      queryParams: {
        projectId: '',
        applier: '',
        borrowUsage: ''
      },
      borrowUsageList: [
        {
          value: '0',
          text: '项目借款'
        },
        {
          value: '1',
          text: '非项目借款'
        },
        {
          value: '2',
          text: '工会借款'
        },
        {
          value: '3',
          text: '党委借款'
        },
        {
          value: '4',
          text: '团委借款'
        }
      ],
      selectedBorrowUsage: '项目借款'
    }
  },
  methods: {
    toggleSearch() {
      this.isSearchExpanded = !this.isSearchExpanded;
    },
    handleQuery() {
      console.log(this.queryParams);
    },
    resetQuery() {
      this.queryParams = {
        projectNumber: '',
        projectName: '',
        leader: '',
        dept: ''
      };
    },
    handleBorrowUsageChange(e) {
      this.selectedBorrowUsage = this.borrowUsageList[e.target.value].text;
    },
    clickTab(obj) {
      console.log(obj);
      let index = obj.index;
      this.selectedTab = this.tabList[index].name;
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-box {
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.search-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
}

.search-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.search-icon {
  font-size: 28rpx;
  color: #909399;
}

.search-content {
  padding: 20rpx;
}

.search-item {
  margin-bottom: 20rpx;
}

.search-item text {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.search-item input,
.search-item .picker {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1px solid #dcdfe6;
  border-radius: 4rpx;
  box-sizing: border-box;
}

.search-item .picker {
  line-height: 80rpx;
  color: #606266;
}

.search-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.search-buttons button {
  flex: 1;
}
</style>