my_loan/htmldev/TBTools/src/views/modules/mine/order/order-check-package.vue

<template>
  <div class="mod-log">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="创建时间：" prop="time">
        <el-date-picker
          v-model="dataForm.time"
          type="datetimerange"
          :picker-options="pickerOptions"
          :default-value="computedDatePickerDefaultValue()"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="创建时间开始时间"
          end-placeholder="创建时间结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="包裹状态："
                    prop="productStatus"
                    v-if="packageStatus && packageStatus.length">
        <el-select v-model="dataForm.productStatus"
                   clearable
                   placeholder="请选择包裹状态">
          <el-option :label="item.name"
                     :value="item.value"
                     v-for="(item, index) in packageStatus"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号：" prop="receiverPhone">
        <el-input type="tel" v-model="dataForm.receiverPhone" placeholder="手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="平台订单号：" prop="orderNumber">
        <el-input v-model="dataForm.orderNumber" placeholder="平台订单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="快递单号：" prop="productExpressCode">
        <el-input v-model="dataForm.productExpressCode" placeholder="快递单号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sizeChangeHandle(pageSize)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%">
      <el-table-column
        prop="orderNumber"
        header-align="center"
        align="center"
        width="160"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        width="200"
        label="商品信息">
      </el-table-column>
      <el-table-column
        prop="receiverName"
        header-align="center"
        align="center"
        width="140"
        label="收货人姓名">
      </el-table-column>
      <el-table-column
        prop="receiverPhone"
        header-align="center"
        align="center"
        width="140"
        label="收货人手机">
      </el-table-column>
      <el-table-column
        prop="receiverAddress"
        header-align="center"
        align="center"
        width="220"
        label="收货人地址">
      </el-table-column>
      <el-table-column
        prop="productPrice"
        header-align="center"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
        label="商品费用">
      </el-table-column>
      <el-table-column
        prop="warehpusePrice"
        header-align="center"
        align="center"
        width="100"
        :show-overflow-tooltip="true"
        label="快递费用">
      </el-table-column>
      <el-table-column
        prop="productStatus"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="商品状态">
        <template slot-scope="scope">
          <p>{{ ['待支付', '已支付', '已发货', '已取消'][scope.row.productStatus] }}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="productExpressCode"
        header-align="center"
        align="center"
        width="200"
        label="快递单号">
      </el-table-column>
      <el-table-column
        prop="productExpressName"
        header-align="center"
        align="center"
        width="150"
        label="快递公司">
      </el-table-column>
      <el-table-column
        prop="createdAt"
        header-align="center"
        align="center"
        width="180"
        label="创建时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button @click="handleCancelOrderBridge(scope.row, scope.$index)" size="small"
                     v-if="scope.row.productStatus === 1 ">
            取消发货
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>确认取消发货吗？</span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCancelOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'order-check-package',
  props: {
    orderNumber: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dataForm: {
        time: [],
        productStatus: '', // 包裹状态
        receiverPhone: '', // 收件人手机号
        orderNumber: '', // 订单编号
        productExpressCode: '' // 快递单号
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dialogVisible: false,
      packageCancelParams: {
        obj: {},
        index: 0
      }
    }
  },
  computed: {
    ...mapState({
      packageStatus: state => state.common.webConfig.packageStatus
    })
  },
  activated () {
    if (this.orderNumber) {
      this.$set(this.dataForm, 'orderNumber', this.orderNumber)
      this.$route.meta.isUseCache = false
    }
    if (!this.$route.meta.isUseCache) {
      this.dataForm = {
        time: [],
        productStatus: '',
        receiverPhone: '',
        orderNumber: '',
        productExpressCode: ''
      }
      this.dataList = []
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.dataListLoading = false
      this.dialogVisible = false
      this.packageCancelParams = {
        obj: {},
        index: 0
      }
      this.getDataList()
    }
  },
  methods: {
    // 设置data-picker默认值
    computedDatePickerDefaultValue () {
      // 当前时间
      const nowTime = new Date()
      const year = nowTime.getFullYear()
      const month = nowTime.getMonth() + 1
      const day = nowTime.getDate()
      let preYear = year
      let preMonth = month - 1
      if (preMonth === 0) {
        preYear = preYear - 1
        preMonth = 12
      }
      let preDays = new Date(preYear, preMonth, 1)
      return [`${preYear}-${preMonth}-${preDays.getDate()} 00:00:00`, `${year}-${month}-${day} 00:00:00`]
    },
    handleCancelOrderBridge (obj = {}, index) {
      this.packageCancelParams = {
        obj: obj,
        index: index
      }
      this.dialogVisible = true
    },
    handleCancelOrder () {
      const { obj, index } = this.packageCancelParams
      this.$http({
        url: this.$http.adornUrl('/gift/order/package/cancel'),
        method: 'get',
        params: this.$http.adornParams({
          'id': obj.id
        })
      }).then(({ data }) => {
        if (data.status) {
          this.$message({
            message: data.msg,
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.$set(this.dataList[index], 'productStatus', 3)
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取数据列表
    getDataList () {
      const { time, productStatus, receiverPhone, orderNumber, productExpressCode } = this.dataForm
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/gift/order/package/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'pageSize': this.pageSize,
          'startCreateTime': Array.isArray(time) && time.length ? time[0] : '',
          'endStartTime': Array.isArray(time) && time.length ? time[1] : '',
          'orderNumber': orderNumber,
          'productStatus': productStatus,
          'receiverPhone': receiverPhone,
          'productExpressCode': productExpressCode
        })
      }).then(({ data }) => {
        if (data.status) {
          const { total, list } = data.data
          this.dataList = list
          this.totalPage = total
          this.$route.meta.isUseCache = true
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>