215 lines
6.7 KiB
Vue
215 lines
6.7 KiB
Vue
<template>
|
|
<Modal
|
|
:closable="false"
|
|
:mask-closable="false"
|
|
:title="'选择流量卡'"
|
|
@on-visible-change="visibleChange"
|
|
v-model="my_show"
|
|
width="1440"
|
|
:z-index="source === 0 ? 1000 : 500"
|
|
>
|
|
<div class="page-handle-wrap">
|
|
<div class="search-wrap">
|
|
<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-250">
|
|
<Select clearable placeholder="支付方式" v-model="params.pay_channel_name">
|
|
<Option :value="'银行转账'">银行转账</Option>
|
|
<Option :value="'微信支付'">微信支付</Option>
|
|
<Option :value="'支付宝'">支付宝</Option>
|
|
<Option :value="'余额支付'">余额支付</Option>
|
|
<Option :value="'天猫续费'">天猫续费</Option>
|
|
</Select>
|
|
</li>
|
|
|
|
<li class="handle-item w-250">
|
|
<Select clearable placeholder="使用状态" v-model="params.used">
|
|
<Option :value="0">未使用</Option>
|
|
<Option :value="1">部分可用</Option>
|
|
<Option :value="2">不可用</Option>
|
|
</Select>
|
|
</li>
|
|
|
|
<li class="handle-item w-250">
|
|
<DatePicker
|
|
:editable="false"
|
|
placeholder="请选择时间"
|
|
placement="bottom-start"
|
|
type="daterange"
|
|
:options="datePickerOptionsMonth"
|
|
v-model.trim="params.time"
|
|
></DatePicker>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="handle-wraper">
|
|
<li class="handle-item w-250">
|
|
<Select placeholder="企业名称" v-model.trim="params.company_name" clearable filterable>
|
|
<Option
|
|
:key="index"
|
|
:value="item ? item : ''"
|
|
v-for="(item, index) in real_companies"
|
|
>{{ item }}</Option>
|
|
</Select>
|
|
</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">
|
|
<Select placeholder="套餐名称" v-model.trim="params.package_name" clearable filterable>
|
|
<Option
|
|
:key="index"
|
|
:value="item ? item : ''"
|
|
v-for="(item, index) in real_packages"
|
|
>{{ item }}</Option>
|
|
</Select>
|
|
</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()" ghost type="primary">立即搜索</Button>
|
|
</div>
|
|
<div class="handle-item">
|
|
<Button @click="resetSearch" ghost type="warning">重置搜索</Button>
|
|
</div>
|
|
|
|
<div class="handle-item" v-has="'output'">
|
|
<Button @click="exportOrders" type="warning">导出卡表</Button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-list-wrap umar-b10">
|
|
<li class="f-l">
|
|
<Checkbox
|
|
v-model="sortChecked"
|
|
v-if="relationObj && relationObj.virtual_company_id"
|
|
@on-change="changeSortChecked"
|
|
>
|
|
<Tooltip content="将更根据最新生成的企业套餐关联关系进行排序">
|
|
<span class="fz-12">智能排序</span>
|
|
</Tooltip>
|
|
</Checkbox>
|
|
</li>
|
|
|
|
<li class="f-r">
|
|
<div class="text-exp">
|
|
<Row v-if="counts">
|
|
<a @click="sort" class="umar-r10">
|
|
<b>已选 {{counts}} 张</b>
|
|
</a>
|
|
<a @click="clearSelect" class="umar-r10">
|
|
<b>清空</b>
|
|
</a>
|
|
</Row>
|
|
<Row v-else>
|
|
<b class="umar-r10">
|
|
共 {{filterNoUsedTotal}}
|
|
<i>（可用）</i>
|
|
/ {{filterTotal}} 张
|
|
</b>
|
|
<a @click="selectAll">
|
|
<b>全选</b>
|
|
</a>
|
|
</Row>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
|
|
<div class="page-list-wrap">
|
|
<Row :gutter="8">
|
|
<Col span="18">
|
|
<Table
|
|
ref="orderSelection"
|
|
size="small"
|
|
:loading="orderLoading"
|
|
:columns="orderColumns"
|
|
:data="showOrders"
|
|
@on-row-dblclick="handleOrderRowDblclick"
|
|
stripe
|
|
border
|
|
:height="449"
|
|
></Table>
|
|
<ul class="common-tips-wraper umar-t5">
|
|
<li class="t-title">提示</li>
|
|
<li class="t-content">双击可以查看订单卡详情数据并标亮</li>
|
|
</ul>
|
|
|
|
<div class="page-turn-wrap" v-if="orders">
|
|
<Page
|
|
:current="Number(page.page)"
|
|
:page-size="Number(page.limit)"
|
|
:page-size-opts="[10, 20, 50, 100]"
|
|
:total="Number(page.total)"
|
|
@on-change="changePage"
|
|
@on-page-size-change="changeLimit"
|
|
show-elevator
|
|
show-total
|
|
show-sizer
|
|
></Page>
|
|
</div>
|
|
</Col>
|
|
<Col span="6">
|
|
<BTable
|
|
ref="cardSelection"
|
|
size="small"
|
|
:loading="cardLoading"
|
|
:columns="cardColumns"
|
|
:data="showCards ? showCards : []"
|
|
disabled-hover
|
|
stripe
|
|
border
|
|
:height="449"
|
|
></BTable>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
|
|
<footer class="ta-c" slot="footer">
|
|
<Button @click="cannel" class="w-80 umar-r5" ghost type="primary">取消</Button>
|
|
<Button v-if="source === 0" :loading="loading" @click="close" class="w-80" type="primary">确定</Button>
|
|
<Button v-if="source === 1" :loading="loading" @click="order" class="w-80" type="primary">创建订单</Button>
|
|
<Button v-if="source === 2" :loading="loading" @click="store" class="w-80" type="primary">提交</Button>
|
|
</footer>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script src="./js/cards.js"></script>
|
|
|
|
<style scoped>
|
|
>>> .ivu-modal {
|
|
top: 50px;
|
|
}
|
|
|
|
>>> .ivu-table {
|
|
font-size: 12px;
|
|
}
|
|
|
|
>>> .ivu-table .bg-yellow td {
|
|
background-color: #ffffdd !important;
|
|
}
|
|
|
|
>>> .ivu-table .bg-yellow-2n td {
|
|
background-color: #ffff88 !important;
|
|
}
|
|
</style>
|