html/qyp/qyp_plat.git

<template>
    <div class="main_index">
      <div class="search_from">
        <el-form
          :model="formInline"
          inline
          label-width="100px"
          class="form-flex"
          size="small"
        >
          <div style="width: 90%">
            <el-form-item label="订单编号：">
              <el-input
                v-model.trim="formInline.orderId"
                style="width: 240px"
                @keyup.native="keyupEvent($event)"
                type="tel"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话号码：">
              <el-input
                v-model.trim="formInline.mblNo"
                style="width: 240px"
                @keyup.native="keyupEvent($event)"
                type="tel"
                clearable
                placeholder="请输入"
              ></el-input>
            </el-form-item>
           
            <el-form-item label="签约时间：">
              <el-date-picker
                v-model="createdTime"
                style="width: 240px"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="推广位：">
                <el-select
                    v-model="formInline.promId"
                    style="width:240px"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="全部" value="all"></el-option>
                    <el-option
                      v-for="item in relustObj.promoteList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="订单状态：">
                  <el-select
                    v-model="formInline.orderStatus"
                    style="width:240px"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="全部" value="all"></el-option>
                    <el-option
                      v-for="item in relustObj.orderStatusList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="代理名称：">
                  <el-select
                    v-model="formInline.agencyName"
                    style="width:240px"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="全部" value="all"></el-option>
                    <el-option
                      v-for="item in relustObj.agencyList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
            </el-form-item>
          </div>
          <el-form-item style="text-align: right;">
 
            <el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;" @click="onSearch">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <div  style="margin-left: 10px;text-align: right;">
          <el-button type="primary" size="small" @click="addProduct">导出excel</el-button>
        </div>
        <Etable
          hasIndex
          hasSelection
          rowKey="orderId"
          httpUrl="orderList"
          :columns="columns"
          :searchData="searchData"
          @getDataList="getDataList"
          @handleSelectionChange="handleSelectionChange"
          :exportUrl="{
            url: '/qyp/order/orderExport',
            powerId: '',
            name: '订单列表',
          }"
        ></Etable>
      </div>
      <el-dialog top="2vh"  :title="title" :visible.sync="addProd" width="60%">
        <el-descriptions>
            <el-descriptions-item label="订单编号">{{ orderDetail.orderId }}</el-descriptions-item>
            <el-descriptions-item label="订单创建时间">{{ orderDetail.creTime }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{ orderDetail.orderStatusStr }}</el-descriptions-item>
            <el-descriptions-item label="电话号码">{{ orderDetail.mblNo }}</el-descriptions-item>
            <el-descriptions-item label="代理名称">{{ orderDetail.agencyName }}</el-descriptions-item>
            <el-descriptions-item label="推广位名称">{{ orderDetail.promName }}</el-descriptions-item>
            <el-descriptions-item label="签约时间">{{ orderDetail.signTime }}</el-descriptions-item>
            <el-descriptions-item label="解约时间">{{ orderDetail.terminateTime }}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ orderDetail.projName }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
      <el-dialog top="2vh"  :title="subTitle" fullscreen :visible.sync="productShow" width="60%">
          <history v-if="isWhith==1"></history>
          <plan  v-else-if="isWhith==2"></plan>
          <draw  v-else-if="isWhith==3"></draw>
      </el-dialog>
    </div>
  </template>
  <script>
  import Etable from "@/components/table.vue";
  import history from './history.vue';
  import plan from './plan.vue';
  import draw from './draw.vue';
  import {orderInit,orderDtl,orderExport} from "@/api/order";
  import uploadImg from "@/components/upload.vue";
  import downloadUrl from "@/utils/excelDownLoadConfig";
  export default {
    name: "order",
    components: { Etable,uploadImg,history,plan,draw },
    data() {
      return {
          formInline: {promId:"all",orderStatus:"all",agencyName:'all'},
          searchData: {},
          columns: [
            {
              lable: "订单编号",
              prop: "orderId",
              align: "center",
              width: "300",
            },
            {
              lable: "签约时间",
              prop: "signTime",
              align: "center",
              width: "180",
            },
            {
              lable: "订单状态",
              prop: "orderStatusStr",
              align: "center"
            },
            {
              lable: "电话号码",
              prop: "mblNo",
              align: "center",
              width: "150",
            },
            {
              lable: "代理名称",
              prop: "agencyName",
              align: "center",
              width: "180",
            },
            {
              lable: "推广位名称",
              prop: "promName",
              align: "center",
              width: "180"
            },
            {
              lable: "支付金额",
              prop: "payAmt",
              align: "center",
              width: "180"
            },
            {
              lable: "支付方式",
              prop: "payType",
              align: "center",
              width: "180"
            },
            {
              lable: "是否使用优惠券",
              prop: "useCoup",
              align: "center",
              width: "180"
            },
            {
              lable: "",
            },
            {
              lable: "操作",
              align: "center",
              width: "300",
              fixed: "right",
              render: (h, scope) => {
                return h("div", [
                  h(
                    "el-button",
                    {
                      props:{
                        type:'text'
                      },
                      style: {
                        // display: this.filterBtnById(150101)
                        //   ? "inline-block"
                        //   : "none",
                      },
                      on: {
                        click: () => {
                          this.title = '订单详情'; 
                          let {orderId} = scope.row;
                          this.getProductDetail(orderId);
                        },
                      },
                    },
                    "查看详情"
                  ),
                  h(
                    "el-button",
                    {
                      props:{
                        type:'text'
                      },
                      style: {
                        // display: this.filterBtnById(150101)
                        //   ? "inline-block"
                        //   : "none",
                      },
                      on: {
                        click: () => {
 
                          this.isWhith = 1;
                          this.productShow  = true;
                          // this.title = '订单详情'; 
                          // let {orderId} = scope.row;
                          // this.getProductDetail(orderId);
                        },
                      },
                    },
                    "支付历史"
                  ),
                  h(
                    "el-button",
                    {
                      props:{
                        type:'text'
                      },
                      style: {
                        // display: this.filterBtnById(150101)
                        //   ? "inline-block"
                        //   : "none",
                      },
                      on: {
                        click: () => {
                          this.isWhith = 2;
                          this.productShow  = true;
                          // this.title = '订单详情'; 
                          // let {orderId} = scope.row;
                          // this.getProductDetail(orderId);
                        },
                      },
                    },
                    "扣款计划"
                  ),
                  h(
                    "el-button",
                    {
                      props:{
                        type:'text'
                      },
                      style: {
                        // display: this.filterBtnById(150101)
                        //   ? "inline-block"
                        //   : "none",
                      },
                      on: {
                        click: () => {
                          this.isWhith = 3;
                          this.productShow  = true;
                          // this.title = '订单详情'; 
                          // let {orderId} = scope.row;
                          // this.getProductDetail(orderId);
                        },
                      },
                    },
                    "权益领取"
                  )
                ]);
              },
            },
          ],
          relustObj: {},
          addProd:false,
          productShow:false,
          createdTime:[],
          title:"新增项目",
          orderDetail:{},
          exportExcelList:[],
          isWhith:''
      }
    },
    computed:{
      subTitle(){
        let text ='支付历史';
        if(this.isWhith==2){
          text = '扣款计划'
        }else if(this.isWhith==3){
          text = '权益领取'
        }
        return text;
      }
    },
    watch:{
      addProd:{
        handler: function(val) {
          if(!val){
          }
        },
        deep: true
      },
      productShow:{
        handler: function(val) {
          if(!val){
            this.isWhith ='';
          }
        },
        deep: true
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.initSerch();
    },
    methods: {
      addProduct(){
        if(!this.exportExcelList.length){
          return this.$message.error("请选择订单后导出");
        }
        orderExport({orderIdList:this.exportExcelList.join(',')}).then((res) => {
          downloadUrl.configDate2(res, '管理员订单列表');
        });
      },
      keyupEvent(e) {
        //只能输入整数
        e.target.value = e.target.value.replace(/[^\d]/g, "");
      },
      onSearch() {
        if (this.createdTime && this.createdTime.length) {
          this.formInline.signStartTime = this.createdTime[0];
          this.formInline.signEndTime = this.createdTime[1];
        } else {
          this.formInline.signStartTime = null;
          this.formInline.signEndTime = null;
        }
        let objForm = JSON.parse(JSON.stringify(this.formInline));
        for (let key in objForm) {
          if (objForm[key] === "all") {
            delete objForm[key];
          }
        }
        this.searchData = { ...objForm };
      },
      initSerch() {
        orderInit().then(({ body }) => {
          this.relustObj = body;
        });
      },
      getDataList(e) {
      },
      handleSelectionChange(list){
        this.exportExcelList = list.map(d=>{
          return d.orderId
        });
      },
      getProductDetail(orderId){
        orderDtl({orderId:orderId}).then(({body})=>{
         this.orderDetail = body;
         this.addProd = true;
        })
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .main_index {
    background-color: #f0f2f5;
    .table_box_num {
      margin-top: 5px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #666;
      font-size: 14px;
      font-weight: bold;
      padding-right: 16px;
      box-sizing: border-box;
      span {
        display: inline-block;
        &:nth-child(even) {
          margin-right: 20px;
          color: #333;
        }
      }
    }
    .el-form-div {
      width: 100%;
      display: flex;
    }
    .tips{
      color: #f56c6c;
    }
  }
  </style>