268 lines
7.4 KiB
Vue
268 lines
7.4 KiB
Vue
<template>
|
|
<!-- 指派订单列表页面 -->
|
|
<page-header-wrapper
|
|
:tab-active-key="tabActiveKey"
|
|
:tab-change="handleTabChange"
|
|
:tab-list="tabsList"
|
|
:title="pageTitle">
|
|
<a-card :bordered="false">
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline">
|
|
<a-row :gutter="48">
|
|
<a-col :md="6" :sm="24">
|
|
<a-form-item label="订单编号">
|
|
<a-input v-model="queryParam.order_no" placeholder="" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="6" :sm="24">
|
|
<a-form-item label="用户名称">
|
|
<a-input v-model="queryParam.nickname" placeholder="" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
|
<a-button
|
|
class="ml8"
|
|
@click="() => ((this.queryParam = { state: tabActiveKey }), $refs.table.refresh(true))">重置</a-button>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
<s-table
|
|
ref="table"
|
|
:columns="columns"
|
|
:data="loadData"
|
|
:rowKey="(row) => row.business_order_id"
|
|
showPagination="auto"
|
|
bordered
|
|
size="default"
|
|
:scroll="{ x: 1500, y: 1000 }">
|
|
<!-- 订单单号 -->
|
|
<span slot="order_no" slot-scope="text, record">
|
|
<router-link :to="{ name: 'Detail', params: { id: record.business_order_id } }">
|
|
{{ record.order_no }}
|
|
</router-link>
|
|
</span>
|
|
<!-- 申请用户 实习顾问 法务老师 -->
|
|
<div slot="user" slot-scope="text, record">
|
|
<user-info :info="{ ...record.user, sex: record.cert.sex }" />
|
|
</div>
|
|
<div slot="transactor" slot-scope="text, record">
|
|
{{ record.transactor != '' ? record.transactor : '--' }}
|
|
</div>
|
|
<div slot="teachers" slot-scope="text, record">
|
|
{{ record.teachers != '' ? record.teachers : '--' }}
|
|
</div>
|
|
<!-- 业务类型 -->
|
|
<span slot="one" slot-scope="text, record"><a>
|
|
{{ record.item_type.one > 0 ? 'x ' + record.item_type.one : '--' }}</a></span>
|
|
<span slot="two" slot-scope="text, record"><a>
|
|
{{ record.item_type.two > 0 ? 'x ' + record.item_type.two : '--' }}</a></span>
|
|
<span slot="price" slot-scope="text, record">￥ <span>{{ record.price }}</span></span>
|
|
<span slot="total" slot-scope="text, record">￥<span>{{ record.total }}</span></span>
|
|
<!-- 订单状态 -->
|
|
<span slot="status" slot-scope="text, record">
|
|
<a-tag color="blue">{{ record.status.text }}</a-tag>
|
|
</span>
|
|
<!-- 操作 -->
|
|
<div slot="actions" slot-scope="text, record">
|
|
<a @click="dispatchOrder(record)"> 指派订单</a>
|
|
</div>
|
|
</s-table>
|
|
</a-card>
|
|
</page-header-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { STable, UserInfo } from '@/components'
|
|
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
|
|
import { getOrderList, getOrdersCount } from '@/api/order'
|
|
import DispatchOrder from '@/views/pendingOrder/modules/DispatchOrder'
|
|
|
|
const columns = [
|
|
{
|
|
title: '订单号',
|
|
dataIndex: 'order_no',
|
|
scopedSlots: { customRender: 'order_no' },
|
|
align: 'center',
|
|
width: 160,
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
title: '申请用户',
|
|
dataIndex: 'user',
|
|
key: 'user',
|
|
scopedSlots: { customRender: 'user' },
|
|
width: 180,
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '实习顾问',
|
|
dataIndex: 'manager',
|
|
key: 'manager',
|
|
scopedSlots: { customRender: 'manager' },
|
|
align: 'center',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '法务老师',
|
|
dataIndex: 'teachers',
|
|
key: 'teachers',
|
|
scopedSlots: { customRender: 'teachers' },
|
|
align: 'center',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '业务类型',
|
|
children: [
|
|
{
|
|
title: '信用卡业务',
|
|
dataIndex: 'one',
|
|
key: 'one',
|
|
scopedSlots: { customRender: 'one' },
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '网贷业务',
|
|
dataIndex: 'two',
|
|
scopedSlots: { customRender: 'two' },
|
|
key: 'two',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '总申请额度',
|
|
dataIndex: 'price',
|
|
scopedSlots: { customRender: 'price' },
|
|
key: 'price',
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '服务包总金额',
|
|
dataIndex: 'total',
|
|
scopedSlots: { customRender: 'total' },
|
|
key: 'total',
|
|
align: 'center'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '订单状态',
|
|
dataIndex: 'status',
|
|
scopedSlots: { customRender: 'status' },
|
|
align: 'center'
|
|
},
|
|
{
|
|
title: '下单时间',
|
|
dataIndex: 'created_at',
|
|
align: 'center',
|
|
sorter: true
|
|
},
|
|
{
|
|
title: '操作',
|
|
scopedSlots: { customRender: 'actions' },
|
|
align: 'center',
|
|
width: 140,
|
|
fixed: 'right'
|
|
}
|
|
]
|
|
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
STable,
|
|
UserInfo,
|
|
DeriveButton
|
|
},
|
|
data () {
|
|
this.columns = columns
|
|
return {
|
|
tabList: [
|
|
{ key: 'complete', tab: '待派发订单' } // 这个key 出接口后还需要改
|
|
],
|
|
tabsList: [],
|
|
tabActiveKey: 'complete',
|
|
pageTitle: '待派发订单 - 需将订单指配给法务老师或法务助理',
|
|
dataList: [],
|
|
queryParam: {
|
|
state: 'complete',
|
|
order_no: '',
|
|
nickname: '',
|
|
teacher: ''
|
|
},
|
|
listCount: 0,
|
|
loadData: (parameter) => {
|
|
const requestParameters = Object.assign({}, parameter, this.queryParam)
|
|
getOrderList(requestParameters).then(res => {
|
|
this.listCount = res.data.length
|
|
})
|
|
return getOrderList(requestParameters)
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
$route (to, from) {
|
|
if (
|
|
(from.name === 'Detail' && to.name === 'CompleteOrder') ||
|
|
(from.name === 'Home' && to.name === 'CompleteOrder') ||
|
|
(from.name === 'FristCheckrderIndex' && to.name === 'CompleteOrder') ||
|
|
(from.name === 'SignInrderIndex' && to.name === 'CompleteOrder') ||
|
|
(from.name === 'AssignrderIndex' && to.name === 'CompleteOrder') ||
|
|
(from.name === 'ReCheckrderIndex' && to.name === 'CompleteOrder') ||
|
|
(from.name === 'HandleService' && to.name === 'CompleteOrder')
|
|
) {
|
|
this.$refs.table.loadData()
|
|
}
|
|
}
|
|
},
|
|
activated () {
|
|
getOrdersCount({ state: this.tabList }).then(res => {
|
|
this.tabsList = []
|
|
res.map(item => {
|
|
item.tab = item.tab + '(' + item.count + ')'
|
|
this.tabsList.push(item)
|
|
})
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
methods: {
|
|
logistic (order) {
|
|
this.$router.push({
|
|
name: 'OrderLogistic',
|
|
params: { orderId: order.order_no }
|
|
})
|
|
},
|
|
handleTabChange (key) {
|
|
this.tabActiveKey = key
|
|
this.queryParam.state = key
|
|
this.$refs.table.refresh(true)
|
|
this.pageTitle = this.tabList.find((item) => item.key === key).tab
|
|
},
|
|
// 派单
|
|
dispatchOrder (record) {
|
|
this.$dialog(DispatchOrder,
|
|
{
|
|
on: {
|
|
ok: () => {
|
|
this.$refs.table.loadData()
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '指派老师/助理',
|
|
width: 500,
|
|
maskClosable: true,
|
|
closable: true,
|
|
okText: '确认指派',
|
|
cancelText: '取消'
|
|
}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ml8 {
|
|
margin-left: 8px;
|
|
}
|
|
</style>
|