clearticker_merchant/src/pages/merchant/order/list.vue

<template>
  <div>
    <a-card title="订单列表">
      <template #extra>
        <a-button @click="getOrders">刷新</a-button>
        <!-- <a-button type="primary" @click="$refs.modal.showModal('add')" v-if="permissionsList.indexOf('merchant_orders:order_create')>-1">新建订单</a-button> -->
      </template>
      <SearchForm :span="[8,8,24]" :form="queryParam" @submit="getOrders">
        <template #basic>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="status" label="状态">
              <a-select
                v-model:value="queryParam.status"
                :options="orderStatusArr"
                mode="multiple"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="merchantOrderId" label="商户订单号">
              <a-input v-model:value="queryParam.merchantOrderId" />
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="outOrderNo" label="外部订单号">
              <a-input v-model:value="queryParam.outOrderNo" />
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="otaChannelId" label="OTA渠道">
              <a-select
                v-model:value="queryParam.otaChannelId"
                allowClear
                :options="otaList"
                showSearch
                :filterOption="true"
                optionFilterProp="label">
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="otaOrderNo">
              <template #label>
                OTA订单号
                <a-tooltip>
                  <template #title>对应ota平台的“分销平台订单号”</template>
                  <QuestionCircleOutlined style="color:red; margin-left:3px"/>
                </a-tooltip>
              </template>
              <a-input v-model:value="queryParam.otaOrderNo" />
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="projectId" label="景区">
              <ProjectSelector v-model:value="queryParam.projectId"></ProjectSelector>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="merchantProductId" label="产品">
              <AgentProductSelector v-model:value="queryParam.merchantProductId"></AgentProductSelector>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="merchantPricecodeId" label="产品价格码">
              <MerchantPricecodeSelector v-model:value="queryParam.merchantPricecodeId"></MerchantPricecodeSelector>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="startTime" label="开始时间">
              <a-date-picker class="w100" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" v-model:value="queryParam.startTime"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="endTime" label="结束时间">
              <a-date-picker class="w100" :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }" v-model:value="queryParam.endTime"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="playDateStart" label="使用开始时间">
              <a-date-picker class="w100" v-model:value="queryParam.playDateStart"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="playDateEnd" label="使用结束时间">
              <a-date-picker class="w100" v-model:value="queryParam.playDateEnd"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="buyerName" label="购买人姓名">
              <a-input v-model:value="queryParam.buyerName" />
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="buyerIdentity" label="购买人证件号">
              <a-input v-model:value="queryParam.buyerIdentity" />
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item name="buyerPhone" label="购买人手机号">
              <a-input v-model:value="queryParam.buyerPhone" />
            </a-form-item>
          </a-col>

        </template>
      </SearchForm>
      <a-table
        :columns="columns"
        :data-source="orderList"
        :pagination="pagination"
        :loading="loading"
        :scroll="{x:1200}"
        :rowKey="record => record.id">
        <!-- <template #channel="{text:channel}">
          <span>
            {{ channel.name }}
          </span>
        </template>
        <template #buyerPapersType="{text:buyerPapersType}">
          <span>
            {{ paperType(buyerPapersType) }}
          </span>
        </template>
        <template #createTime="{text:createTime}">
          <span>
            {{ dayjs(createTime).format('YYYY-MM-DD HH:mm:ss') }}
          </span>
        </template>
        <template #status="{text:status}">
          <span>
            <a-tag :color="orderStatus[status]&&orderStatus[status].color"> {{ orderStatus[status]&&orderStatus[status].label }}</a-tag>
          </span>
        </template>
        <template #action="{ record }">
          <span>
            <a-button size="small" type="primary" ghost @click="$refs.detail.show(record.projectOrders)">景点订单</a-button>
            <a-popconfirm
              v-if="record.status ==='WAIT_USE'"
              title="确定取消此订单?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="cancelOrders(record)"
            >
              <a-button size="small" type="primary" danger v-if="permissionsList.indexOf('merchant_orders:order_cancel')>-1">取消订单</a-button>
            </a-popconfirm>
          </span>
        </template>
        <template #expandedRowRender="{ record }">
          <a-table
            style="max-width:100%"
            :scroll="{x:1500}"
            :dataSource="record.products"
            :columns="productsColumns"
            :pagination="false"
            bordered
            :rowKey="record => record.id">
            <template #title>商品列表</template>
            <template #pricecodeNo="{record:record2}">
              <span>
                {{ record2.merchantPricecode.pricecodeNo }}
              </span>
            </template>
            <template #name="{record:record2}">
              <span>
                {{ record2.merchantPricecode.name }}
              </span>
            </template>
            <template #product="{record:record2}">
              <span>
                {{ record2.merchantProduct.name }}
              </span>
            </template>
            <template #guestPapersType="{text:guestPapersType}">
              <span>
                {{ paperType(guestPapersType) }}
              </span>
            </template>
            <template #status="{text:status}">
              <span>
                <a-tag :color="productOrderStatus[status]&&productOrderStatus[status].color"> {{ productOrderStatus[status]&&productOrderStatus[status].label }}</a-tag>
              </span>
            </template>
            <template #action="{record:record2}">
              <a-popconfirm
                v-if="record2.status === 'WAIT_USE'"
                title="确定取消此产品?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="cancelOrders(record,record2.ticketNo)"
              >
                <a-button type="link">取消</a-button>
              </a-popconfirm>
              <a-button type="link" v-if="record2.status === 'USED' || record2.status === 'PART_USE'" @click="showGoodsDetail(record2.id)">查看商品信息</a-button>
              <a-button v-if="record.channel.code==='MERCHANTSELF'" type="link" @click="qrcode.show(record2)">二维码</a-button>
            </template>

          </a-table>
        </template> -->
      </a-table>
    </a-card>
    <Modal ref="modal" @update="getOrders"></Modal>
    <Detail ref="goodDetailRef"></Detail>
    <Detail ref="detail"></Detail>
    <QRcode ref="qrcode"></QRcode>
  </div>
</template>

<script>
import moment from 'moment'
import { columns, productsColumns } from './column'
import { AgentProductSelector, MerchantPricecodeSelector, ProjectSelector } from '@/components'
import SearchForm from '@/components/SearchForm.vue'
import useData from './useData'
import Modal from './Modal.vue'
import Detail from './Detail.vue'
import QRcode from './QRcode.vue'
import { ref } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'


export default {
  components: {
    Modal,
    Detail,
    QRcode,
    SearchForm,
    QuestionCircleOutlined,
    AgentProductSelector,
    MerchantPricecodeSelector,
    ProjectSelector
  },
  setup() {
    const qrcode = ref()
    return {
      qrcode,
      moment,
      columns,
      productsColumns,
      ...useData()
    }
  }

}
</script>

<style lang="scss" scoped>
.ant-table-wrapper{
  margin: 10px 0!important ;
}
.ant-col{
  margin-bottom: 8px;
}
</style>