|
@@ -1,33 +1,51 @@
|
|
|
<template>
|
|
|
- <a-card :bordered="false">
|
|
|
- <div class="table-page-search-wrapper">
|
|
|
+ <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
|
|
|
+ <div class="shopOrder-searchForm">
|
|
|
<a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
|
|
|
<a-row :gutter="48">
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item label="企业名称">
|
|
|
- <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入企业名称" />
|
|
|
+ <a-form-item label="下单时间" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
|
|
|
+ <a-range-picker
|
|
|
+ id="shopOrder-time"
|
|
|
+ v-model="time"
|
|
|
+ :format="dateFormat"
|
|
|
+ :placeholder="['开始时间','结束时间']"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ @change="onChange" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item label="负责人手机">
|
|
|
- <a-input allowClear v-model.trim="queryParam.contactPhone" placeholder="请输入申请人手机" />
|
|
|
+ <a-form-item label="用户手机" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
|
|
|
+ <a-input allowClear v-model.trim="queryParam.contactPhone" :maxLength="11" placeholder="请输入用户手机" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item label="启用状态">
|
|
|
- <v-select ref="status" allowClear placeholder="状态" v-model="queryParam.status" code="ENABLE_FLAG"></v-select>
|
|
|
+ <a-form-item label="订单编号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
|
|
|
+ <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入订单编号" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
- <a-button type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
|
|
|
- <a-button type="" @click="reset">重置</a-button>
|
|
|
+ <a-form-item label="订单状态" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
|
|
|
+ <v-select
|
|
|
+ v-model="queryParam.status"
|
|
|
+ ref="salesChannelSettleStatus"
|
|
|
+ id="shopOrder-status"
|
|
|
+ code="SETTLE_STATUS_ALL"
|
|
|
+ placeholder="请选择订单状态"
|
|
|
+ allowClear></v-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-button class="handle-btn serach-btn" id="shopOrder-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
|
|
+ <a-button class="handle-btn" type="" id="shopOrder-reset" @click="handleReset">重置</a-button>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
<div class="table-operator">
|
|
|
- <a-button type="primary" icon="plus" @click="openModal">新增</a-button>
|
|
|
+ <!-- <a-button type="primary" icon="plus" @click="openModal">新增</a-button> -->
|
|
|
+ <a-button class="export-btn" id="shopOrder-export" type="" :loading="loading" @click="handleExport">导出</a-button>
|
|
|
</div>
|
|
|
<s-table
|
|
|
ref="table"
|
|
@@ -36,15 +54,15 @@
|
|
|
:columns="columns"
|
|
|
:data="loadData"
|
|
|
bordered>
|
|
|
+ <!-- 订单状态 -->
|
|
|
+ <template slot="orderStatus" slot-scope="text, record">
|
|
|
+ <span :class="[record.orderStatus==1 ? 'green' : 'red']">{{ record.orderStatus==1 ? '已启用' : '已禁用' }}</span>
|
|
|
+ </template>
|
|
|
<!-- 操作 -->
|
|
|
<template slot="action" slot-scope="text, record">
|
|
|
<a-icon title="编辑" type="edit" class="actionBtn icon-blues" @click="openModal(record)" />
|
|
|
<!-- <a-icon title="删除" type="delete" class="actionBtn icon-red" v-if="record.status == '0'" @click="delect(record)" /> -->
|
|
|
</template>
|
|
|
- <!-- 启用禁用 -->
|
|
|
- <template slot="enable" slot-scope="text, row">
|
|
|
- <span :class="[text==1 ? 'green' : 'red']">{{ text==1 ? '已启用' : '已禁用' }}</span>
|
|
|
- </template>
|
|
|
</s-table>
|
|
|
</a-card>
|
|
|
|
|
@@ -59,82 +77,35 @@ import {
|
|
|
getTenantsList,
|
|
|
tenantsDelete
|
|
|
} from '@/api/tenants.js'
|
|
|
+import getDate from '@/libs/getDate.js'
|
|
|
import moment from 'moment'
|
|
|
export default {
|
|
|
name: 'ShopOrder',
|
|
|
- components: {
|
|
|
- STable,
|
|
|
- VSelect
|
|
|
- },
|
|
|
+ components: { STable, VSelect },
|
|
|
data () {
|
|
|
return {
|
|
|
- moment,
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
openTenantsModal: false, // 打开授权弹窗
|
|
|
itemId: '', // 要编辑的租户id
|
|
|
// 查询参数
|
|
|
queryParam: {
|
|
|
+ beginDate: null, // 开始时间
|
|
|
+ endDate: null, // 结束时间
|
|
|
name: '',
|
|
|
contactPhone: '',
|
|
|
status: '' // 状态
|
|
|
},
|
|
|
+ loading: false, // 导出loading
|
|
|
// 表头
|
|
|
- columns: [{
|
|
|
- title: '序号',
|
|
|
- dataIndex: 'no',
|
|
|
- width: '40',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '创建时间',
|
|
|
- dataIndex: 'createDate',
|
|
|
- width: '200',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '企业名称',
|
|
|
- dataIndex: 'name',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '负责人名称',
|
|
|
- dataIndex: 'contactName',
|
|
|
- width: '120',
|
|
|
- align: 'center',
|
|
|
- customRender: (text) => {
|
|
|
- return text || '--'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '负责人手机',
|
|
|
- width: '120',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'contactPhone'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '有效期至',
|
|
|
- width: '200',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'expireDate'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '启用状态',
|
|
|
- width: '200',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'status',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'enable'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- width: '200',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'action'
|
|
|
- }
|
|
|
- }
|
|
|
+ columns: [
|
|
|
+ { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
|
|
|
+ { title: '下单时间', dataIndex: 'orderDate', width: 200, align: 'center' },
|
|
|
+ { title: '用户手机', dataIndex: 'userMoblie', width: 200, align: 'center' },
|
|
|
+ { title: '订单编号', dataIndex: 'orderNo', width: 200, align: 'center' },
|
|
|
+ { title: '订单状态', scopedSlots: { customRender: 'orderStatus' }, width: 80, align: 'center' },
|
|
|
+ { title: '订单总额', dataIndex: 'orderPrice', width: 200, align: 'center' },
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
|
|
|
],
|
|
|
// 加载数据方法 必须为 Promise 对象
|
|
|
loadData: parameter => {
|
|
@@ -150,15 +121,33 @@ export default {
|
|
|
return res.data
|
|
|
}
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 将默认当天时间日期回显在时间选择框中
|
|
|
+ time: [
|
|
|
+ moment(getDate.getToday().starttime, this.dateFormat),
|
|
|
+ moment(getDate.getToday().endtime, this.dateFormat)
|
|
|
+ ],
|
|
|
+ dateFormat: 'YYYY-MM-DD'
|
|
|
}
|
|
|
},
|
|
|
beforeRouteEnter (to, from, next) {
|
|
|
next(vm => {
|
|
|
- vm.reset()
|
|
|
+ vm.handleReset()
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ moment,
|
|
|
+ // 不可选日期
|
|
|
+ disabledDate (date, dateStrings) {
|
|
|
+ return date && date.valueOf() > Date.now()
|
|
|
+ },
|
|
|
+ // 创建时间change
|
|
|
+ onChange (dates, dateStrings) {
|
|
|
+ if ((dates, dateStrings)) {
|
|
|
+ this.searchForm.beginDate = dateStrings[0]
|
|
|
+ this.searchForm.endDate = dateStrings[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
// 打开新增/编辑 弹窗
|
|
|
openModal (row) {
|
|
|
this.itemId = row ? row.id : ''
|
|
@@ -186,64 +175,97 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
// 重置
|
|
|
- reset () {
|
|
|
- this.queryParam = {
|
|
|
- name: '',
|
|
|
- contactPhone: '',
|
|
|
- status: '' // 状态
|
|
|
- }
|
|
|
+ handleReset () {
|
|
|
+ this.queryParam.beginDate = getDate.getToday().starttime
|
|
|
+ this.queryParam.endDate = getDate.getToday().endtime
|
|
|
+ this.time = [
|
|
|
+ moment(getDate.getToday().starttime, this.dateFormat),
|
|
|
+ moment(getDate.getToday().endtime, this.dateFormat)
|
|
|
+ ]
|
|
|
+ this.queryParam.bundleName = ''
|
|
|
+ this.queryParam.number = ''
|
|
|
+ this.queryParam.orderFlag = null
|
|
|
this.$refs.table.refresh(true)
|
|
|
+ },
|
|
|
+ // 导出
|
|
|
+ handleExport () {
|
|
|
+ const params = {
|
|
|
+ beginDate: this.searchForm.beginDate == null ? getDate.getToday().starttime : this.searchForm.beginDate,
|
|
|
+ endDate: this.searchForm.endDate == null ? getDate.getToday().endtime : this.searchForm.endDate,
|
|
|
+ bundleName: this.searchForm.bundleName,
|
|
|
+ number: this.searchForm.number,
|
|
|
+ queryWord: this.searchForm.queryWord,
|
|
|
+ orderFlag: this.searchForm.orderFlag,
|
|
|
+ salesChannelSettleStatus: this.searchForm.salesChannelSettleStatus
|
|
|
+ }
|
|
|
+ if (!params.beginDate && !params.endDate) {
|
|
|
+ this.$message.error('请先选择需要导出的下单时间区间再进行导出!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 判断两个时间段是否相差m个月
|
|
|
+ if (!completeDate(params.beginDate, params.endDate, 3)) {
|
|
|
+ this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ exportBundle(params).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ this.download(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ download (data) {
|
|
|
+ if (!data) { return }
|
|
|
+ const url = window.URL.createObjectURL(new Blob([data]))
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.style.display = 'none'
|
|
|
+ link.href = url
|
|
|
+ const a = moment().format('YYYYMMDDhhmmss')
|
|
|
+ const fname = '已购套餐记录-' + a
|
|
|
+ link.setAttribute('download', fname + '.xlsx')
|
|
|
+ document.body.appendChild(link)
|
|
|
+ link.click()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style>
|
|
|
- .table-page-search-wrapper,
|
|
|
- .addButton {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .table-page-search-wrapper .ant-form-inline .ant-form-item {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .textCount {
|
|
|
- border: 1px solid #91d5ff;
|
|
|
- background-color: #e6f7ff;
|
|
|
- padding: 10px 0;
|
|
|
- border-radius: 5px;
|
|
|
- padding-left: 20px;
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .action-button {
|
|
|
- line-height: 40px;
|
|
|
- white-space: nowrap;
|
|
|
- padding: 5px 10px;
|
|
|
- background-color: #1890ff;
|
|
|
- border-radius: 4px;
|
|
|
- color: #fff;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-text {
|
|
|
- background-color: #f90;
|
|
|
- }
|
|
|
-
|
|
|
- .actionBtn {
|
|
|
- font-size: 20px;
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .blue {
|
|
|
- color: #1890FF;
|
|
|
- }
|
|
|
-
|
|
|
- .green {
|
|
|
- color: #16b50e;
|
|
|
- }
|
|
|
-
|
|
|
- .red {
|
|
|
- color: red;
|
|
|
- }
|
|
|
+<style lang="less" scoped>
|
|
|
+ .shopOrder-table-page-search-wrapper{
|
|
|
+ .shopOrder-searchForm{
|
|
|
+ .ant-form-inline .ant-form-item{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ // 搜索框的下间距
|
|
|
+ .ant-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .handle-btn{
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .serach-btn{
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .export-btn{
|
|
|
+ background-color: #ff9900;
|
|
|
+ border-color: #ff9900;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
|
|
|
+ color: #fff;
|
|
|
+ border-color: #ff9900;
|
|
|
+ }
|
|
|
+ .actionBtn {
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .blue {
|
|
|
+ color: #1890FF;
|
|
|
+ }
|
|
|
+ .green {
|
|
|
+ color: #16b50e;
|
|
|
+ }
|
|
|
+ .red {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|