filter.vue 3 KB
<template>
  <Page name="order-filter" flank>
    <template #content>
      <u-form :model="searchForm" ref="uForm" labelWidth="100">
        <u-form-item label="订单号"><u-input v-model="searchForm.code" /></u-form-item>
        <u-form-item label="司机姓名"><u-input v-model="searchForm.driverName" /></u-form-item>
        <u-form-item label="司机手机号"><u-input v-model="searchForm.driverMobile" /></u-form-item>
        <u-form-item label="车牌号"><u-input v-model="searchForm.vehicleLicenseNum" /></u-form-item>
        <u-form-item label="存在未处理异常" labelWidth="130">
          <u-radio-group v-model="searchForm.unHandledExceptionFlag">
            <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
              {{ item.text }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
      </u-form>
    </template>
    <template #footer>
      <view class="footer">
        <view class="reset" @click="resetChange">重置</view>
        <view class="inquiry" @click="inquiryChange">查询</view>
      </view>
    </template>
  </Page>
</template>

<script>
export default {
  name: 'order-filter',
  props: {
    searchModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      searchForm: {
        code: '', //
        driverName: '',
        driverMobile: '', // 客户
        vehicleLicenseNum: '',
        unHandledExceptionFlag: '', // 存在异常
      },
      radioList: [
        { text: '是', value: 'true' },
        { text: '否', value: 'false' },
      ],
    };
  },
  onLoad(option) {
    Object.keys(option).forEach(i => {
      this.searchForm[i] = option[i];
    });
  },
  methods: {
    // 重置
    resetChange() {
      this.searchForm = {
        code: '', //
        driverName: '',
        driverMobile: '', // 客户
        vehicleLicenseNum: '',
        unHandledExceptionFlag: '', // 存在异常
        startCityCode: '',
        startCityName: '',
        endCityCode: '',
        endCityName: '',
        projectCode: '',
        projectName: '',
      };
    },
    // 查询
    inquiryChange() {
      this.getOpenerEventChannel().emit('refreshData', this.searchForm);
      setTimeout(() => uni.navigateBack(), 500);
    },
  },
};
</script>

<style lang="scss">
.page-order-filter {
  &__footer {
    background: $color-white;
    .footer {
      display: flex;
      justify-content: space-between;
      .reset {
        text-align: center;
        width: 236upx;
        height: 82upx;
        line-height: 82upx;
        margin-right: 20upx;
        background: #dfebff;
        border-radius: 14upx;
        font-size: 30upx;
        font-weight: 500;
        color: $color-primary;
      }
      .inquiry {
        text-align: center;
        width: 450upx;
        height: 82upx;
        line-height: 82upx;
        background: $color-primary;
        border-radius: 14upx;
        font-size: 30upx;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
}
</style>