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-field v-model="queryDateValue" is-link readonly :label="$t('orderCenter.orderDate')"
            :placeholder="$t('orderCenter.orderDatePlaceholder')" @click="showOrderDate = true" />
          <!-- 操作 -->
          <van-row justify="space-around" style="padding: 2em;">
            <van-button class="clearBtn" span="5" round plain type="primary" style="height: 2em; padding: 0 2em;"
              @click="registerClick">{{ $t('device.emptyingConditions') }}</van-button>
            <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" position="bottom">
      <van-date-picker v-model="startDateValue" :title="$t('orderCenter.selectFullTime')"
        @confirm="startDateConFirm($event)" @cancel="startDateCancel()" :min-date="minDate" :max-date="maxDate" />
    </van-popup>
    <van-popup v-model:show="endDateShow" position="bottom">
      <van-date-picker v-model="endDateValue" :title="$t('orderCenter.selectFullTime')"
        @confirm="endDateConFirm($event)" @cancel="endDateCancel()" :min-date="minDate" :max-date="maxDate" />
    </van-popup>
    <van-calendar color="#4d6add" v-model:show="showOrderDate" @confirm="calendarConfirm" type="range"
      :show-confirm="false" :allow-same-day="true" :min-date="minDate" :max-date="maxDate" :max-range="31" />
  </div>
</template>

<script>
import { ref } from 'vue';
import { showToast } from 'vant';
import { useI18n } from "vue-i18n";
import dateUtil from "@/utils/dateUtil";

export default {
  name: 'orderSearch',
  setup(prop, context) {
    const { t } = useI18n();
    const sheetShow = ref(false);
    const startDateShow = ref(false);
    const endDateShow = ref(false);
    const minDate = new Date(2022, 0, 1);
    const maxDate = new Date();

    // 创建一个Date对象，表示当前时间
    const dateTime = new Date();
    // 获取当前时间的年份
    const currentYear = dateTime.getFullYear();
    // 获取当前时间的月份（注意，月份是从0开始的，所以要加1）
    const currentMonth = dateTime.getMonth() + 1;
    // 获取当前时间的日期
    const currentDate = dateTime.getDate();
    const startDateValue = ref([currentYear, currentMonth, currentDate])
    const endDateValue = ref([currentYear, currentMonth, currentDate])

    // 订单日期弹窗显示
    const showOrderDate = ref(false);
    // 订单日期弹窗确认
    const calendarConfirm = (value) => {
      showOrderDate.value = false;
      queryDateValue.value = dateUtil.formateDate(value[0], "yyyy/MM/dd") + "——" + dateUtil.formateDate(value[1], "yyyy/MM/dd");
      startDate.value = dateUtil.formateDate(value[0], "yyyy-MM-dd") + " 00:00:00";
      endDate.value = dateUtil.formateDate(value[1], "yyyy-MM-dd") + " 23:59:59";

      console.log(startDate, endDate);
    }


    const queryDateValue = ref(''); // 订单时间
    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 = () => {
      startDateShow.value = true;
    }
    const startDateConFirm = ({ selectedValues }) => {
      startDate.value = selectedValues.join("-") + " 00:00:00";
      startDateShow.value = false;
      startTime.value = selectedValues.join("-");
    }
    const startDateCancel = () => {
      startDateShow.value = false;
    }
    const endTimeClick = () => {
      endDateShow.value = true;
    }
    const endDateConFirm = ({ selectedValues }) => {
      endDate.value = selectedValues.join("-") + " 23:59:59";
      endDateShow.value = false;
      endTime.value = selectedValues.join("-");
    }
    const endDateCancel = () => {
      endDateShow.value = false;
    }
    // 提交搜索表单触发搜索
    const onSubmit = () => {
      if (userName.value == '' && sn.value == '' && trxNo.value == '' && clientId.value == '') {
        showToast(t('orderCenter.searchCriteria'));
        return;
      }
      if (queryDateValue.value == '') {
        showToast(t('orderCenter.searchDate'));
        return;
      }
      // if (clientId.value != '' || userName.value != '') {
      //   if (startTime.value == '' || endTime.value == '') {
      //     showToast(t('orderCenter.searchDate'));
      //     return;
      //   } else {
      //     let start = new Date(startTime.value);
      //     let end = new Date(endTime.value);
      //     let diff = (end - start) / 1000 / 60 / 60 / 24;
      //     if (diff > 30) {
      //       showToast(t('orderCenter.searchDateTips'));
      //       return;
      //     }
      //   }
      // }
      const searchParam = {
        userName: userName.value,
        sn: sn.value,
        trxNo: trxNo.value,
        clientId: clientId.value,
        startDate: startDate.value,
        endDate: endDate.value,
      };
      context.emit('search', searchParam);
      sheetShow.value = false;
    }

    // 清空条件
    const registerClick = () => {
      userName.value = '';
      sn.value = '';
      trxNo.value = '';
      clientId.value = '';
      startDate.value = '';
      endDate.value = '';
      queryDateValue.value = '';
    };

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

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

      showSearch,
      startTimeClick,
      endTimeClick,
      onSubmit,
      startTime,
      endTime,
      maxDate,
      startDateValue,
      endDateValue,

      showOrderDate,
      calendarConfirm,
      queryDateValue,
      registerClick
    };
  },
  components: {},
};
</script>

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

  .clearBtn {
    border-color: #4d6add;
    background-color: #fff;
  }

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

  .content {
    padding-top: 1em;
  }

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