playlet/project/src/components/dataBoard/yxOrderData....

<template>
  <div>
    <div class="screenBox">
      <div class="flex-align-center" style="flex-wrap: wrap;margin-right: 60px;">
        <datePicker title="" :quickFlag="true" :afferent_time="default_time" :clearFlag='false' :reset="resetFlag" @changeTime="onChangeTime" style="margin-right: 10px;" />
        <selfInput style="margin-right: 10px;" width="220px" :hasLabel="false" :reset="resetFlag" label_name="订单ID" @inputChange='onInputOrderId' @onChange="onChangeOrderId" />
        <selfChannelMultiple style="margin-right: 10px;" title="" type='adqAccount' :reset="resetFlag" :labelWidth="true" @channelDefine="onChangeAccountId" />
        <selfInput style="margin-right: 10px;" width="220px" :hasLabel="false" :reset="resetFlag" label_name="自定义参数" @inputChange="onInputCpsId" @onChange="onChangeCpsId" />
        <!-- <selfChannel style="margin-right: 10px;" title="" type="" :reset="resetFlag" :labelWidth="true" @onChange="onChangeOrderStatus"/> -->
      </div>
      <div class="reset" @click="resetEvent">重置</div>
      <!-- <el-button v-if="isCanExport" class="export-btn" type="primary" size="mini" @click="onClickExport">导出Excel</el-button> -->
    </div>
    <div v-loading="loading">
      <ux-grid class="uxGridBox" ref="plxTable" :border="false" @row-click="() => { return }"
        :header-cell-style="headerColor" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip"
        size="mini">
        <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop"
          :title="item.label" :min-width="item.min_width ? item.min_width : 120" :fixed="item.fixed ? item.fixed : ''"
          align="center">
          <template #header>
            <div class="flex-align-jus-center">{{ item.label }}
              <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
                <div><i class="el-icon-question"></i></div>
              </el-tooltip>
            </div>
          </template>
          <template v-slot="{ row, $index }">
            <div v-if="item.prop == 'actionBtn'">
              <template>
                <span v-if="row.ad_report_order_status == '成功'" class="c-A5A5A5 pointer fWeight600 disabled">已回传</span>
                <span v-else-if="row.order_status != 4 && row.predict_commission_fee > 0" class="c-00B38A pointer fWeight600" @click="onClickReport(row)">回传</span>
              </template>
            </div>

            <span v-else-if="item.prop == 'order_id'">
              {{ row[item.prop] || row[item.prop] == 0 ? row[item.prop] : '-' }}
            </span>
            <span v-else-if="item.prop == 'account_id'">
              {{ row[item.prop] || row[item.prop] == 0 ? row[item.prop] : '-' }}
            </span>
            <span v-else>{{ (row[item.prop] || row[item.prop] == 0) && row[item.prop] != '' ? $formatNum(row[item.prop])
                : '-'
            }}</span>
          </template>
        </ux-table-column>
      </ux-grid>
      <div class="pagination" v-show="total > 0">
        <el-pagination
          background :current-page="page"
          layout="prev, pager, next, sizes, jumper"
          :page-sizes="[20, 50, 100]" :page-count='Number(pages)'
          @current-change="handleCurrentChange" @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import datePicker from '@/components/assembly/screen/datePicker.vue'
import selfChannel from '@/components/assembly/screen/channel.vue'
import selfInput from '@/components/assembly/screen/input.vue'
import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
import selfChannelMultiple from '@/components/assembly/screen/channelMultiple.vue'

import { incomeSourceDesc, launchTypeDesc } from '@/assets/js/staticTypes'
export default {
  name: 'orderData',
  components: {
    datePicker,
    selfChannel,
    selfInput,
    selfChannelV2,
    selfChannelMultiple,
  },
  data () {
    return {
      dataLoading: false,
      loading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 20,
      default_time: [this.$getDay(0, false), this.$getDay(0, false)],
      height: '',
      resetFlag: false,
      dataInfo_stat: {},
      trendX: [],
      trendData: {
        key: 1,
        dds: [],
        zfje: []
      },
      desCol: [
        { prop: "id", label: "订单编号",fixed: 'left' },
        { prop: "order_id", label: "订单ID", min_width: 180 },
        { prop: "payment_amount", label: "实际支付金额"},
        { prop: "predict_commission_fee", label: "预估佣金" },
        { prop: "payed_time", label: "支付时间", min_width: 160 },
        { prop: "predict_report_time", label: "预估回传时间", min_width: 160 },
        { prop: "order_status_desc", label: "订单状态"},
        // { prop: "goods_name", label: "商品名称"},
        { prop: "account_id", label: "投放账户", },
        { prop: "tx_cps_id", label: "自定义参数"},
        { prop: "ad_report_action_type", label: "回传类型"},
        { prop: "ad_report_order_status", label: "回传状态"},
        { prop: "adgroup_name", label: "回传广告名称"},
        { prop: "actionBtn", label: "操作", fixed: 'right' },
      ],

      filter: {
        time: [],
        order_id: '', // 订单ID
        order_status: '', // 支付状态
        account_id: [], // ADQ账号
        money: [], // 预估佣金
        cps_id: '',// 自定义参数
      },
    }
  },
  computed: {
    // 是否有“导出”权限
    isCanExport() {
      return !!this.$store.state.dataBoardAuth.can_export
    },
  },
  created () {
    this.height = document.documentElement.clientHeight - 280 > 400 ? document.documentElement.clientHeight - 280 : 400
    this.filter.time = this.default_time
    this.init(1)
    // this.init_predata()
  },
  methods: {
    getIncomeSourceDesc(code) {
      if (code || code === 0) {
        return incomeSourceDesc[code] || '-'
      } else {
        return '-'
      }
    },
    getLaunchTypeDesc(code) {
      if (code || code === 0) {
        return launchTypeDesc[code] || '-'
      } else {
        return '-'
      }
    },
    headerColor ({ row, column, rowIndex, columnIndex }) {
      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
    },
    initCharts () {
      let myChart = this.$echarts.init(this.$refs.chart);
      myChart.setOption({
        xAxis: {
          show: false,
          boundaryGap: false,
          data: this.trendX
        },
        yAxis: {
          show: false
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: '1%'
        },
        series: [{
          name: '订单数',
          type: 'line',
          data: this.trendData.dds,
          color: '#00B38A',
        }, {
          name: '支付金额',
          type: 'line',
          data: this.trendData.zfje,
          color: '#FF8704',
        }]
      });
    },

    async init_predata () {
      const url = this.URL.BASEURL + this.URL.charge_pre_data
      const params = {
        start_date: this.filter.time[0],
        end_date: this.filter.time[1],
        account_id: this.filter.account_id.join(','),
      }
      try {
        this.dataLoading = true
        const { data: res = {} } = await this.$axios.post(url, params)
        if (res && res.errno == 0) {
          this.dataInfo_stat = res.rst.data.stat;
          this.trendX = []
          this.trendData.dds = []
          this.trendData.zfje = []
          res.rst.data.trend.forEach(i => {
            this.trendX.push(i.ref_date)
            this.trendData.dds.push(i.order_count)
            this.trendData.zfje.push(i.pay_money)
          })
          this.trendData.key += 1
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      } catch (error) {
        console.log('error => ', error)
      } finally {
        this.dataLoading = false
      }
    },
    async init (page, type) {
      this.page = page ? page : this.page;
      this.loading = true
      const url = `${this.URL.BASEURL}${this.URL.dataBoard_orderData_yxOrderList}`
      const params = {
        order_id: this.filter.order_id,
        start_date: this.filter.time[0],
        end_date: this.filter.time[1],
        account_id: this.filter.account_id.join(','),
        order_status: this.filter.order_status,
        tx_cps_id: this.filter.cps_id,
        sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
        page: this.page,
        page_size: this.page_size,
      }
      try {
        const { data: res = {} } = await this.$axios.get(url, { params })
        if (res && res.errno == 0) {
          this.datas = res.rst.data // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
          this.$refs.plxTable.reloadData(this.datas)
          this.total = res.rst.pageInfo.total;
          this.pages = res.rst.pageInfo.pages;
        } else if (res.errno != 4002) {
          this.$message.warning(res.err)
        }
      } catch (error) {
        console.log('error => ', error)
      } finally {
        this.loading = false
      }
    },

    // 支付状态变化
    onChangeOrderStatus(val) {
      this.filter.order_status = val;
      this.init(1);
      // this.init_predata;
    },
    //筛选时间变化
    onChangeTime(time) {
      if (!time || time && time.length == 0) {
        this.filter.time = []
      } else {
        this.filter.time = time
      }
      // this.init_predata()
      this.init(1)
    },
    onInputOrderId(val) {
      this.filter.order_id = val
      this.init(1)
    },
    onChangeOrderId(val) {
      this.filter.order_id = val
    },
    onInputCpsId(val) {
      this.filter.cps_id = val
      this.init(1)
    },
    onChangeCpsId(val) {
      this.filter.cps_id = val
    },
    onChangePlatOrderType(val) {
      this.filter.plat_order_type = val;
      this.init(1);
      // this.init_predata()
    },
    onChangeAccountId(val) {
      this.filter.account_id = val;
      this.init(1);
      // this.init_predata();
    },
    handleCurrentChange (val) {
      this.init(val)
    },
    handleSizeChange (page_size) {
      this.page_size = page_size
      this.init(1)
    },
    resetEvent () {//重置
      this.resetFlag = !this.resetFlag
      this.system_enterprise = []
      this.enterprise = {} 
      this.filter.time = [this.$getDay(-30, false), this.$getDay(0, false)]    
      this.filter.order_id = ''
      this.filter.account_id = []
      // this.init_predata()
      this.init(1)
    },
    async onClickReport(row) {
      try {
        await this.$confirm(`订单ID【${row.order_id}】，确定手动回传吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.handleReport(row)
      } catch (error) {
        console.log(error)
      }
    },
    async handleReport({ order_id, id }) {
      try {
        this.loading = true
        const url = `${this.URL.BASEURL}${this.URL.dataBoard_orderData_yxOrderActionReport}`
        const params = {
          order_id,
          order_data_id: id,
        }
        const { data: res = {} } = await this.$axios.get(url,{ params })
        if (res && res.errno == 0) {
          this.$message.success('操作成功')
          this.init()
        } else if (res.errno != 4002) {
          this.$message.warning(res.err || '操作失败')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 监听点击"导出" - 离线导出
    async onClickExport() {
      try {
        await this.$confirm(`确定根据当前筛选条件导出报表吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.handleCreateOrderExport()
      } catch (error) {
        console.log('error => ', error)
      }
    },
    // 创建订单离线导出任务
    async handleCreateOrderExport() {
      try {
        this.loading = true
        const url = `${this.URL.BASEURL}${this.URL.dataBoard_orderData_orderExportOffline}`
        const params = {
          sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
          start_date: this.filter.time[0],
          end_date: this.filter.time[1],
          order_id: this.filter.order_id,
          account_id: this.filter.account_id.join(','),
        }
        const { data: res = {} } = await this.$axios.get(url, { params })
        if (res && res.errno == 0) {
          this.$alert('导出预约成功，请稍候到【导出列表】下载文件！', '提示', {
            confirmButtonText: '知道了',
            type: 'success',
          })
        } else if (res.errno != 4002) {
          this.$message.warning(res.err || '操作失败')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.select-cls {
  /deep/ &.el-select .el-input.is-focus .el-input__inner,
  /deep/ &.el-select .el-input__inner:focus,
  /deep/ &.el-cascader .el-input.is-focus .el-input__inner,
  /deep/ &.el-cascader .el-input__inner:focus {
    border-color: #DCDFE6;
  }
  /deep/ .el-input__suffix {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #DCDFE6;
    right: 0;
    width: 30px;
    background-color: #F1F1F1;
    .el-input__icon {
      color: #909399;
    }
  }
  &.cascader {
    /deep/ .el-input__suffix {
      height: 32px;
      top: 2px;
    }
  }
}
.disabled {
  cursor: not-allowed;
}
.screenBox {
  background: #fff;
  padding: 5px 20px 26px;
  position: relative;
  .export-btn {
    position: absolute;
    top: 17px;
    right: 4px;
  }

  .reset {
    width: 80px;
    height: 30px;
    background: #00b38a;
    border-radius: 100px 3px 3px 3px;
    border: 1px solid #d2d2d2;
    color: #ffffff;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 2px;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.dataInfoBox {
  display: flex;
  margin-top: 10px;
  // justify-content: space-between;
  flex-wrap: wrap;

  .dataInfoItem {
    background: #ffffff;
    border-radius: 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    //padding: 15px 80px 19px 20px;
    min-width: 200px;
    //max-width: 240px;
    height: 85px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    .dataItemTitle {
      display: flex;
      align-items: center;
      color: #6f6f6f;
      font-size: 13px;
      line-height: 17px;
      font-weight: bold;

      .titleIcon {
        height: 16px;
        margin-right: 4px;
      }
    }

    .dataItem-data {
      color: #000000;
      font-size: 19px;
      line-height: 28px;
      font-weight: bold;
      margin-top: 2px;
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
    }
  }
}
</style>