vd/frontend/src/views/virtual/orders/index.vue

<template>
  <div class="page-wrap">
    <ui-loading :show="page_loading.show"></ui-loading>

    <div class="page-handle-wrap">
      <ul class="handle-wraper bd-b">
        <li class="f-l">
          <div class="text-exp">
            <b>全部信息</b>
          </div>
        </li>
        <li class="f-r">
          <div class="handle-item">
            <Button
              @click="openCards(true, 1, null)"
              icon="md-eye"
              type="primary"
              v-has="'create'"
            >RD订单</Button>
          </div>
          <div class="handle-item">
            <Button
              @click="openEdit(true, 0, null)"
              icon="md-add"
              type="primary"
              v-has="'create'"
            >创建订单</Button>
          </div>
          <div class="handle-item">
            <Button @click="search.show=!search.show" ghost icon="ios-search" type="primary">搜索</Button>
          </div>

          <div class="handle-item">
            <Button @click="index(1)" icon="md-refresh">刷新</Button>
          </div>
        </li>
      </ul>

      <div class="search-wrap" v-show="search.show">
        <ul class="handle-wraper">
          <li class="handle-item w-250">
            <Input clearable placeholder="订单编号" v-model.trim="params.sn"></Input>
          </li>

          <li class="handle-item w-250">
            <Input clearable placeholder="流水号" v-model.trim="params.transaction_no"></Input>
          </li>

          <li class="handle-item w-120" v-if="type === 0">
            <Select clearable placeholder="订单状态" v-model="params.order_status">
              <Option :value="0">已下单</Option>
              <Option :value="1">已取消</Option>
              <Option :value="2">已排单</Option>
              <Option :value="3">已出库</Option>
              <Option :value="4">已发货</Option>
              <Option :value="5">已签收</Option>
            </Select>
          </li>

          <li class="handle-item w-120" v-if="type === 0">
            <Select clearable placeholder="收款状态" v-model="params.transaction_status">
              <Option :value="0">未收款</Option>
              <Option :value="1">已收款</Option>
              <Option :value="2">已退款</Option>
            </Select>
          </li>

          <li class="handle-item w-250">
            <Select clearable placeholder="支付方式" v-model="params.pay_channel">
              <Option :value="'bank'">银行转账</Option>
              <Option :value="'wx'">微信支付</Option>
              <Option :value="'alipay'">支付宝</Option>
              <Option :value="'account'">余额支付</Option>
              <Option :value="'tmall'">天猫续费</Option>
            </Select>
          </li>

          <li class="handle-item w-250">
            <DatePicker
              :editable="false"
              placeholder="请选择时间"
              placement="bottom-start"
              type="daterange"
              v-model.trim="params.time"
            ></DatePicker>
          </li>
        </ul>

        <ul class="handle-wraper">
          <li class="handle-item w-250">
            <AutoComplete
              @on-search="handleCompleteCompanies"
              icon="ios-search"
              placeholder="企业名称"
              v-model.trim="params.company_name"
            >
              <Option
                :key="item.id"
                :value="item.name"
                v-for="item in completeHandledCompanies"
              >{{ item.name }}</Option>
            </AutoComplete>
          </li>

          <li class="handle-item w-250">
            <Select clearable placeholder="运营商" v-model="params.carrier_operator">
              <Option :value="0">联通</Option>
              <Option :value="1">移动</Option>
              <Option :value="2">电信</Option>
            </Select>
          </li>

          <li class="handle-item w-250">
            <AutoComplete
              @on-search="handleMyCompletePackages"
              icon="ios-search"
              placeholder="套餐名称"
              v-model.trim="params.package_name"
              placement="bottom"
            >
              <Option
                :key="item.id"
                :value="item.name"
                v-for="item in completeHandledPackages"
              >{{ item.name }}</Option>
            </AutoComplete>
          </li>
          <li class="handle-item w-250">
            <Input placeholder="SIM" type="textarea" v-model="params.sim"/>
          </li>

          <li class="f-r">
            <div class="handle-item">
              <Button @click="index(1)" ghost type="primary">立即搜索</Button>
            </div>
            <div class="handle-item">
              <Button @click="resetSearch" ghost type="warning">重置搜索</Button>
            </div>
            <div class="handle-item">
              <Button @click="exportOrders" type="warning">导出订单</Button>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="page-list-wrap">
      <Table :columns="table_titles" :data="list_data ? list_data.data : []" stripe></Table>
    </div>

    <div class="page-turn-wrap" v-if="list_data">
      <Page
        :current="Number(list_data.current_page)"
        :page-size="Number(list_data.per_page)"
        :total="Number(list_data.total)"
        @on-change="index"
        show-elevator
        show-total
      ></Page>
    </div>

    <ui-edit
      :data="editObj.data"
      :show.sync="editObj.show"
      :source="editObj.source"
      :type="type"
      @add-success="handleOrderSuccess(0)"
      @update-success="handleOrderSuccess(1)"
      @select-cards="openCards(true)"
    ></ui-edit>

    <ui-detail :data="detailObj.data" :show.sync="detailObj.show"></ui-detail>

    <ui-cards
      :orderObj="cardsObj.orderObj"
      :source="cardsObj.source"
      :show.sync="cardsObj.show"
      :type="type"
      @create-order="openEdit(true, 1, null)"
      @store-success="handleOrderSuccess(1)"
    ></ui-cards>

    <Modal v-model="orderConfirmShow" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>订单操作</span>
      </p>
      <div style="text-align:center">
        <p>请选择您要进行的操作</p>
      </div>
      <div slot="footer">
        <Row class="ta-c" :gutter="2">
          <Col span="12">
            <Button type="error" long @click="orderCannel">取消订单</Button>
          </Col>
          <Col span="12">
            <Button type="primary" long @click="orderShip">确认排单</Button>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script src="./js/index.js"></script>