shenze-sysMan/src/views/orderCenter/orderSearch.vue

<template>
  <!-- 订单中心 - 搜索弹窗 -->
  <div class="orderSearch flex-col">
    <van-popup v-model:show="sheetShow" round class="orderSearchPopup">
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field v-model="userName" name="userName" :label="$t('orderCenter.userNameLabel')"
            :placeholder="$t('orderCenter.userNamePlaceholder')" />
          <van-field v-model="sn" name="sn" :label="$t('orderCenter.orderNo')"
            :placeholder="$t('orderCenter.orderNoPlaceholder')" />
          <van-field v-model="trxNo" name="trxNo" :label="$t('orderCenter.orderSerialNumberLabel')"
            :placeholder="$t('orderCenter.orderSerialNumberPlaceholder')" />
          <van-field v-model="clientId" name="clientId" :label="$t('orderCenter.equipmentNo')"
            :placeholder="$t('orderCenter.equipmentNoPlaceholder')" />

          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label">
              <label id="van-field-4-label" for="van-field-4-input">{{ $t('orderCenter.orderDate') }}</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" :placeholder="$t('orderCenter.startTime')"
                  style="text-align: center; width: 50%;" v-model="startTime" @click="startTimeClick()" />
                <span>{{ $t('orderCenter.to') }}</span>
                <input type="text" class="van-field__control" :placeholder="$t('orderCenter.endTime')"
                  style="text-align: center; width: 50%;" v-model="endTime" @click="endTimeClick()" />
              </div>
            </div>
          </div>

          <!-- 操作 -->
          <van-row justify="space-around" style="padding: 1em;">
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">
              {{ $t('orderCenter.clickSearch') }}
            </van-button>
          </van-row>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model:show="startDateShow" round position="bottom">
      <van-datetime-picker v-model="startDate" type="datetime" :title="$t('orderCenter.selectFullTime')"
        @confirm="startDateConFirm($event)" @cancel="startDateCancel()" :min-date="minDate" />
    </van-popup>
    <van-popup v-model:show="endDateShow" round position="bottom">
      <van-datetime-picker v-model="endDate" type="datetime" :title="$t('orderCenter.selectFullTime')"
        @confirm="endDateConFirm($event)" @cancel="endDateCancel()" :min-date="minDate" />
    </van-popup>
  </div>
</template>

<script>
import { ref } from 'vue';
import dateUtil from "@/utils/dateUtil";
import { Toast } from 'vant';
export default {
  name: 'orderSearch',
  setup(prop, context) {
    const sheetShow = ref(false);
    const startDateShow = ref(false);
    const endDateShow = ref(false);
    const minDate = new Date(2018, 1, 1);

    const userName = ref(''); // 用户名
    const sn = ref(''); // 订单编号
    const trxNo = ref(''); // 订单流水号
    const clientId = ref(''); // 设备唯一码_设备编号
    const startDate = ref(''); // 订单时间-起始时间
    const endDate = ref('');
    const startTime = ref('');
    const endTime = ref('');
    // 父组件页面触发展示及初始化
    const showSearch = () => { sheetShow.value = true; };
    const startTimeClick = () => { if (startDate.value === '') { startDate.value = new Date(); } startDateShow.value = true; }
    const startDateConFirm = (data) => {
      startDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss");
      startDateShow.value = false;
      startTime.value = startDate.value;
    }
    const startDateCancel = () => {
      // startDate.value = dateUtil.formateDate(new Date(startDate.value), "yyyy-MM-dd hh:mm:ss"); 
      startDateShow.value = false;
      // startTime.value = startDate.value;
    }
    const endTimeClick = () => { if (endDate.value === '') { endDate.value = new Date(); } endDateShow.value = true; }
    const endDateConFirm = (data) => {
      endDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss");
      endDateShow.value = false;
      endTime.value = endDate.value;
    }
    const endDateCancel = () => {
      // endDate.value = dateUtil.formateDate(new Date(endDate.value), "yyyy-MM-dd hh:mm:ss"); 
      endDateShow.value = false;
      // endTime.value = endDate.value;
    }
    // 提交搜索表单触发搜索
    const onSubmit = () => {
      console.log('startTime.value', startTime.value)
      if (userName.value == '' && sn.value == '' && trxNo.value == '' && clientId.value == '') {
        if (startTime.value != '' || endTime.value != '') {
          Toast("请输入正确时间");
          return;
        } else {
          Toast("请输入搜索条件");
          return;
        }
      }
      const searchParam = {
        userName: userName.value,
        sn: sn.value,
        trxNo: trxNo.value,
        clientId: clientId.value,
        startDate: startTime.value,
        endDate: endTime.value,
      };
      context.emit('search', searchParam);
      sheetShow.value = false;
    }

    return {
      sheetShow,
      startDateShow,
      startDateConFirm,
      startDateCancel,
      endDateShow,
      endDateConFirm,
      endDateCancel,
      minDate,

      userName,
      sn,
      trxNo,
      clientId,
      startDate,
      endDate,

      showSearch,
      startTimeClick,
      endTimeClick,
      onSubmit,
      startTime,
      endTime,
    };
  },
  components: {},
};
</script>

<style lang="less" scoped>
.orderSearch {
  width: 100%;

  :deep(.orderSearchPopup) {
    width: 90%;
  }

  .content {
    padding-top: 1em;
  }

  .field .van-field__label {
    width: auto;
  }
}
</style>