shenze-sysMan/src/views/orderExport/index.vue

<template>
  <!-- 订单分析 -->
  <div class="page flex-col">
    <s-header :name="$t('orderExport.orderAnalysis')" :noback="false"></s-header>
    <div class="Body flex-col">
      <div class="mod3 flex-col">
        <div class="group1 flex-col">
          <div class="titleBox flex-col">
            <div class="layer2 flex-row">
              <div class="section5 flex-col"></div>
              <div class="TextGroup2 flex-col">
                <span class="txt4">{{ $t("orderExport.dataOverview") }}</span>
              </div>
            </div>
          </div>
          <div class="dateSelectBox">
            <dateSelectList @update="update($event)"></dateSelectList>
          </div>
          <div class="l-f l-flex-e o-plr-15 o-pt-10">
            <span class="o-mr-6 c-text-13 c-text-color">{{ $t("orderExport.groupType") }}:</span>
            <kTabs @tabchg="tabChg" :tabList="tabList"></kTabs>
          </div>
          <div class="mod7 flex-col">
            <div class="box1 flex-col justify-between">
              <div class="group4 l-flex-between">
                <div class="ImageText2 l-flex-RC">
                  <div class="mod8 l-flex-RC">
                    <div class="group5 flex-col"></div>
                    <div class="TextGroup2 flex-col">
                      <span class="txt1 c-text-w6">{{
                          $t("orderExport.orderDetails")
                        }}</span>
                    </div>
                  </div>
                </div>
                <div class="l-flex-RC">
                  <div class="c-text-13 l-flex-RC text5">
                    <span @click="noticeClk" class="">{{
                        $t("orderExport.clickFilter")
                      }}</span>
                    <div class="outer4 flex-col o-ml-6"></div>
                  </div>
                  <div @click="exportOrder()" class="c-text-13 l-flex-RC o-ml-20 c-text-color">
                    <span class="">{{
                        $t("orderExport.exportToExcel")
                      }}</span>
                    <div class="outer4 flex-col o-ml-6"></div>
                  </div>
                </div>
              </div>
              <img class="img2" referrerpolicy="no-referrer"
                   src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a" />
            </div>
          </div>
          <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" :finished-text="$t('common.noMoreTxt')" @load="onLoad"
                      :offset="300" :immediate-check="false">
              <div v-for="(item, index) in tableData" :key="index" class="orderItem">
                <div class="mod9 flex-row">
                  <span class="info7">&yen;</span>
                  <span class="info8">{{ item.priceTotal }}</span>
                  <span class="word9">{{ $t("orderExport.totalSales") }}</span>
                </div>
                <div class="mod10 flex-row">
                  <span class="txt3 o-mr-10">{{ item.username }}</span>
                  <span class="txt4 c-text-line1">{{ item.name }},{{ item.phone }}</span>
                </div>
                <span class="info9">{{ item.address }}</span>
                <div class="mod11 flex-col">
                  <span v-if="type == 2" class="txt5">{{ item.equipmentTotal }}{{ $t("orderExport.machines") }}，{{
                      $t("orderExport.superior")
                    }}：{{ item.lastUsername }}</span>
                  <div v-else class="txt5 l-flex-RC">
                    <div>{{ item.equipmentType }}</div>
                    <div class="lineCon o-mlr-6"></div>
                    <div>{{ item.clientId }}</div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <!-- 筛选弹窗 -->
    <kDialog :dialogTitle="$t('orderExport.searchPop.title')" :cancelBtnTxt="$t('orderExport.searchPop.clearFilter')"
             :confirmBtnTxt="$t('orderExport.searchPop.filter')" ref="kDialogRef" @confirmclk="confirmClk"
             :isCloseForCancel="false" @cancelclk="cancelClk">
      <template #content>
        <div class="cust_vantBorder">
          <van-field clearable v-model="searchForm.orderNo" :placeholder="$t('orderExport.searchPop.orderNoPlace')"
                     :label="$t('orderExport.searchPop.orderNo')" />
          <van-field clearable v-model="searchForm.busiName" :placeholder="$t('orderExport.searchPop.busiNamePlace')"
                     :label="$t('orderExport.searchPop.busiName')" />
          <van-field @click-input="changeTypeInpClk" readonly clearable v-model="searchForm.ifForeignName"
                     :placeholder="$t('orderExport.searchPop.mainOverPlace')" :label="$t('orderExport.searchPop.mainOver')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.ifForeignName" @click="
                  searchForm.ifForeignName = '';
                searchForm.ifForeign = '';
                                                                      " class="o-mr-6" name="clear" />
                <van-icon @click="changeTypeInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
        </div>
      </template>
    </kDialog>
    <!-- 大陆或海外弹窗 -->
    <van-popup v-model:show="changeTypeShow" position="bottom">
      <van-picker :title="$t('orderExport.searchPop.mainOverPlace')" :columns="changeTypePopList"
                  :columns-field-names="changeTypePopFieldName" @confirm="changeTypePopConfirm" @cancel="changeTypeShow = false" />
    </van-popup>
  </div>
</template>
<script>
import { getOrderList, Api_getOrderExport } from "@/service/orderExport";
import { onMounted, reactive, toRefs, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getLoginUser, $M_ExportFile } from "@/common/js/utils";
import dateSelectList from "@/components/dateSelectList";
import dateUtil from "@/utils/dateUtil";
import kTabs from "@/components/commom/kTabs/index.vue";
import { useI18n } from "vue-i18n";
import kDialog from "@/components/commom/kDialog/index.vue";
import moment from 'moment';
import { styleUrl } from "../../common/js/utils";
export default {
  name: "orderExport",
  components: { sHeader, dateSelectList, kTabs, kDialog },
  setup() {
    // 分页
    const pageNo = ref(1);
    const pageSize = ref(20);
    let ruleData = reactive({
      tableData: [],
    });
    // 上拉刷新
    const loading = ref(true);
    const finished = ref(false);
    // 下拉刷新
    const refreshing = ref(false);
    // 初始化页面获取列表
    onMounted(() => {
      // 加载样式
      styleUrl('orderExport');
      const user = getLoginUser();
      // 今日
      searchParams.startDate = moment().format("YYYY-MM-DD") + " 00:00:00";
      searchParams.endDate = moment().format("YYYY-MM-DD") + " 23:59:59";
      if (user) {
        onRefresh();
      }
    });
    // 下拉刷新
    const onRefresh = (idx) => {
      ruleData.tableData = [];
      // 解决请求两次问题
      if (!idx) {
        finished.value = false;
      }
      loading.value = true;
      // 初始化分页
      pageNo.value = 1;
      pageSize.value = 20;
      getList();
    };
    // 上拉加载
    const onLoad = () => {
      pageNo.value++;
      getList();
    };
    // 获取列表数据
    const getList = () => {
      // 如果存在chartType去掉
      if (searchParams.chartType) {
        delete searchParams.chartType;
      }
      let param = {
        current: pageNo.value,
        size: pageSize.value,
      };
      getOrderList(Object.assign(param, searchParams)).then((res) => {
        const { data } = res.data;
        console.log('data的值是 >>>', data)
        if (data) {
          refreshing.value = false;
          ruleData.tableData.push(...data.records);
          // 加载状态结束
          loading.value = false;
          if (ruleData.tableData.length >= data.total) {
            finished.value = true;
          }
        }
      });
    };
    // 引入语言
    const { t } = useI18n();
    // 大陆或海外弹窗
    // 控制显示
    const changeTypeShow = ref(false);
    // 点击显示弹窗
    const changeTypeInpClk = () => {
      changeTypeShow.value = true;
    };
    // 弹窗选中的值
    const changeTypePopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 弹窗选项
    const changeTypePopList = [
      {
        name: t('orderExport.searchPop.mainland'),
        id: 1,
      },
      {
        name: t('orderExport.searchPop.overseas'),
        id: 0,
      },
    ];
    // 点击弹窗的确定按钮
    const changeTypePopConfirm = (e) => {
      console.log('e')
      searchForm.ifForeign = e.id;
      searchForm.ifForeignName = e.name;
      changeTypeShow.value = false;
    };
    // 点击导出按钮
    const exportOrder = async () => {
      const param = {
        current: pageNo.value,
        size: pageSize.value,
      };
      const { headers, data } = await Api_getOrderExport(Object.assign(param, searchParams));
      console.log('headers', headers)
      console.log('data', data)
      $M_ExportFile(data, headers);
    };
    // 筛选弹窗的元素
    const kDialogRef = ref(null);
    // 点击筛选
    const noticeClk = () => {
      kDialogRef.value.openDialog();
    };
    // 筛选弹窗
    const searchForm = reactive({
      orderNo: "",
      busiName: "",
      ifForeign: "0",
      ifForeignName: "大陆",
    });
    // 点击筛选条件的清空条件按钮
    const cancelClk = () => {
      searchForm.orderNo = '';
      searchForm.busiName = '';
      searchForm.ifForeign = '0';
      searchForm.ifForeignName = '大陆';
    };
    // 点击筛选条件的筛选按钮
    const confirmClk = () => {
      searchParams.clientId = searchForm.orderNo;
      searchParams.username = searchForm.busiName;
      searchParams.ifForeign = searchForm.ifForeign;
      getList();
    };
    // 商户设备tab栏
    const tabList = ref([
      {
        name: t("orderExport.merchant"),
        icon: "",
        id: 1,
      },
      {
        name: t("orderExport.equipment"),
        icon: "",
        id: 2,
      },
    ]);
    // 点击tab
    const tabChg = (e) => {
      if (e == 1) {
        searchParams.type = 1;
      } else {
        searchParams.type = 2;
      }
      getList();
    };
    let searchParams = reactive({
      type: "2", // 分组类型
      clientId: "", // 设备编号
      username: "",
      startDate: "",
      endDate: "",
      ifForeign: '0'
    });
    // 搜索点击
    const searchClick = () => {
      console.log("searchClick");
    };
    // 今日、明日、本周、本月、其他时间选择回调
    const update = (uDate) => {
      searchParams = Object.assign(searchParams, uDate);
      searchParams.startDate = dateUtil.formateDate(
          new Date(searchParams.startDate),
          "yyyy-MM-dd hh:mm:ss"
      );
      searchParams.endDate = dateUtil.formateDate(
          new Date(searchParams.endDate),
          "yyyy-MM-dd hh:mm:ss"
      );
      onRefresh(1);
    };
    return {
      ...toRefs(searchParams),
      searchClick,
      update,
      exportOrder,
      tabChg,
      tabList,
      confirmClk,
      searchForm,
      noticeClk,
      kDialogRef,
      cancelClk,
      changeTypePopList,
      changeTypePopConfirm,
      changeTypeShow,
      changeTypeInpClk,
      changeTypePopFieldName,
      pageNo,
      pageSize,
      loading,
      finished,
      refreshing,
      onRefresh,
      onLoad,
      getList,
      ...toRefs(ruleData),
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";
</style>