qa-prevention-xgf-app/pages/door_access_control/vehicle_info/index.vue

<template>
  <view class="content">
    <view class="search card">
      <u--input
          prefixIcon="search"
          placeholder="请输入关键字"
          border="surround"
          v-model="keyword"
          clearable
          shape="circle"
      ></u--input>
      <view class="bth-mini ml-10">
        <u-button type="success" text="确定" @click="resetList"></u-button>
      </view>

    </view>
    <u-list @scrolltolower="scrolltolower" v-if="list.length > 0">
      <u-list-item v-for="(item, index) in list" :key="index">
        <view>
          <view class="flex-between main-title">
            <text>车牌号：{{ item.LICENCE_NO }}</text>
          </view>
          <view class="flex-between mt-10 subtitle">
            <text>车牌类型：{{ VEHICLE_LICENSE_PLATE_TYPE_MAP[item.LICENCE_TYPE] }}</text>
            <text>车辆类型：{{ VEHICLE_TYPE_MAP[item.VEHICLE_TYPE] }}</text>
          </view>
          <view class="flex-between mt-10 subtitle">
            <text>车辆所属部门：{{ item.JG_DEPT_NAME }}</text>
            <text>车辆归属人：{{ item.JG_USER_NAME }}</text>
          </view>
          <view class="flex-between mt-10 subtitle">
            <text>车辆进/出港状态：{{ item.vehicleArrivalStatus || '出港' }}</text>
          </view>
          <view class="flex-between mt-10 subtitle">
            <text>车辆来源：{{ VEHICLE_OWNERSHIP_TYPE_MAP[item.CAR_FROM] }}</text>
          </view>
          <view class="mt-10 see_btn">
            <view class="wrap">
              <u-button type="primary" text="查看" size="mini"
                        @click="fnNavigatorView(item.VEHICLE_ID)"></u-button>
            </view>
            <view class="wrap ml-10">
              <u-button type="primary" text="修改" size="mini"
                        @click="fnNavigatorAdd(item.VEHICLE_ID)"></u-button>
            </view>
            <view class="wrap ml-10">
              <u-button type="error" text="删除" size="mini"
                        @click="fnDelete(item.VEHICLE_ID)"></u-button>
            </view>
          </view>
        </view>
      </u-list-item>
    </u-list>
    <empty v-else></empty>
    <fab-button @click="fnNavigatorAdd('')"/>
  </view>
</template>

<script>
import FabButton from '@/components/fab_button/index.vue'

import {getVehiclemessagePageList, setVehiclemessageDelete} from "@/api";
export default {
  components: {
    FabButton,
  },
  data() {
    return {
      VEHICLE_LICENSE_PLATE_TYPE_MAP: {
        0: "白牌",
        1: "蓝牌",
        2: "黄牌",
        3: "绿牌",
        4: "黑牌",
      },
      VEHICLE_TYPE_MAP: {
        0: "货车",
        1: "轿车",
        2: "大巴客车",
      },
      AUDIT_STATUS_MAP: {
        1: "待审核",
        2: "已审核",
        3: "审核驳回",
      },
      VEHICLE_OWNERSHIP_TYPE_MAP: {
        0: "员工车辆",
        1: "单位车辆",
      },
      keyword: '',
      pageSize: 10,
      currentPage: 1,
      totalPage: 0,
      list: [],
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  onShow() {
    // this.resetList()
  },
  methods: {
    async getData() {
      const resData = await getVehiclemessagePageList({ type: 1, CAR_FROM: 0,  curPage: this.currentPage, limit: this.pageSize});
      this.list = [...this.list, ...resData.varList];
      console.info(this.list)
      this.totalPage = resData.page.totalPage;
    },
    resetList() {
      this.pageSize = 10
      this.currentPage = 1
      this.list = []
      this.getData()
    },
    fnNavigatorView(VEHICLE_ID) {
      uni.$u.route({
        url: '/pages/door_access_control/vehicle_info/view',
        params: {
          VEHICLE_ID,
        }
      })
    },
    fnNavigatorAdd(VEHICLE_ID) {
      uni.$u.route({
        url: '/pages/door_access_control/vehicle_info/add',
        params: {
          VEHICLE_ID,
        }
      })
    },
    scrolltolower() {
      this.currentPage++;
      if (this.totalPage >= this.currentPage) this.getData();
    },
  }
}
</script>

<style scoped lang="scss">
.ml-10 {
  margin-left: 10rpx;
}

.search {
  display: flex;

  .ml-10 {
    margin-left: 10rpx;
  }

  .bth-mini {
    width: 100rpx;
  }

}

.see_btn {
  display: flex;
  justify-content: flex-end;

  .wrap {
    //width: 200rpx;
    margin: 0 10rpx;
  }


}

</style>