parent
130f181872
commit
662d8ebd1c
@ -0,0 +1,247 @@ |
||||
<template> |
||||
<a-card :bordered="false"> |
||||
<div class="card-title">{{ $route.meta.title }}</div> |
||||
<div class="table-operator"> |
||||
<!-- 搜索板块 --> |
||||
<a-row class="row-item-search"> |
||||
<a-form class="search-form" layout="inline"> |
||||
<a-form-item label="服务名称"> |
||||
<a-input v-model="queryParam.server_name" placeholder="请输入服务名称" /> |
||||
</a-form-item> |
||||
<a-form-item label="用户手机号"> |
||||
<a-input v-model="queryParam.user_mobile" placeholder="请输入用户手机号" /> |
||||
</a-form-item> |
||||
<a-form-item label="订单号"> |
||||
<a-input v-model="queryParam.order_no" placeholder="请输入订单号" /> |
||||
</a-form-item> |
||||
<a-form-item class="search-btn"> |
||||
<a-button type="primary" icon="search" @click="handleSearch">搜索</a-button> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-row> |
||||
<!-- 操作板块 --> |
||||
<div class="row-item-tab clearfix"> |
||||
<div class="tab-list fl-l"> |
||||
<a-radio-group :defaultValue="queryParam.order_status" @change="handleTabs"> |
||||
<a-radio-button value="0">全部</a-radio-button> |
||||
<a-radio-button v-for="(items, index) in orderStatusList" :key="index" :value="items.value">{{ |
||||
items.name |
||||
}}</a-radio-button> |
||||
</a-radio-group> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<s-table |
||||
ref="table" |
||||
rowKey="order_id" |
||||
:loading="isLoading" |
||||
:columns="columns" |
||||
:data="loadData" |
||||
:rowSelection="rowSelection" |
||||
:pageSize="15" |
||||
> |
||||
<!-- 服务图片 --> |
||||
<span slot="server_image" slot-scope="text, item"> |
||||
<a title="点击查看原图" :href="item.server_image" target="_blank"> |
||||
<img width="50" height="50" :src="item.server_image" alt="服务图片" /> |
||||
</a> |
||||
</span> |
||||
|
||||
<!-- 操作项 --> |
||||
<span slot="action" slot-scope="text, item"> |
||||
<template> |
||||
<a |
||||
v-if="item.order_status == 20" |
||||
v-action:edit |
||||
style="margin-right: 8px" |
||||
@click="handleDispatch(item.order_id)" |
||||
>派单</a |
||||
> |
||||
<a v-if="item.order_status == 10 || item.order_status == 20" @click="handleCancel(item.order_id)">取消</a> |
||||
</template> |
||||
</span> |
||||
</s-table> |
||||
<dispatch ref="dispatchRef" @handleSubmit="handleRefresh" /> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server' |
||||
import { ContentHeader, STable } from '@/components' |
||||
import Dispatch from './modules/Dispatch' |
||||
// 表格表头 |
||||
const columns = [ |
||||
{ |
||||
title: '订单号', |
||||
dataIndex: 'order_no', |
||||
}, |
||||
{ |
||||
title: '订单价格', |
||||
dataIndex: 'total_price', |
||||
}, |
||||
{ |
||||
title: '优惠金额', |
||||
dataIndex: 'coupon_money', |
||||
}, |
||||
{ |
||||
title: '支付金额', |
||||
dataIndex: 'pay_price', |
||||
}, |
||||
{ |
||||
title: '订单状态', |
||||
dataIndex: 'order_status_text', |
||||
}, |
||||
{ |
||||
title: '用户手机号', |
||||
dataIndex: 'user_mobile', |
||||
}, |
||||
{ |
||||
title: '工程师手机号', |
||||
dataIndex: 'dealer_mobile', |
||||
}, |
||||
{ |
||||
title: '服务名称', |
||||
dataIndex: 'server_name', |
||||
}, |
||||
{ |
||||
title: '服务图片', |
||||
dataIndex: 'server_image', |
||||
scopedSlots: { customRender: 'server_image' }, |
||||
}, |
||||
{ |
||||
title: '下单时间', |
||||
width: '180px', |
||||
dataIndex: 'create_time', |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
width: '150px', |
||||
fixed: 'right', |
||||
scopedSlots: { customRender: 'action' }, |
||||
}, |
||||
] |
||||
|
||||
export default { |
||||
name: 'Index', |
||||
components: { |
||||
ContentHeader, |
||||
STable, |
||||
Dispatch, |
||||
}, |
||||
data() { |
||||
return { |
||||
// 当前表单元素 |
||||
searchForm: this.$form.createForm(this), |
||||
// 商品分类列表 |
||||
categoryList: [], |
||||
//订单状态 |
||||
orderStatusList: [], |
||||
// 查询参数 |
||||
queryParam: { |
||||
order_status: '0', |
||||
server_name: '', |
||||
category_id: '', |
||||
page: 1, |
||||
}, |
||||
// 正在加载 |
||||
isLoading: false, |
||||
// 表头 |
||||
columns, |
||||
// 选择的元素 |
||||
selectedRowKeys: [], |
||||
// 加载数据方法 必须为 Promise 对象 |
||||
loadData: (param) => { |
||||
const requestParameters = Object.assign({}, param, this.queryParam) |
||||
return Api.orderList(requestParameters).then((response) => { |
||||
return response.data.list |
||||
}) |
||||
}, |
||||
} |
||||
}, |
||||
created() { |
||||
// 默认的查询参数 |
||||
if (this.$route.query.order_status) { |
||||
this.queryParam.order_status = this.$route.query.order_status |
||||
} |
||||
this.getOrderStatusList() |
||||
}, |
||||
computed: { |
||||
rowSelection() { |
||||
return { |
||||
selectedRowKeys: this.selectedRowKeys, |
||||
onChange: this.onSelectChange, |
||||
} |
||||
}, |
||||
}, |
||||
methods: { |
||||
// 选中项发生变化时的回调 |
||||
onSelectChange(selectedRowKeys) { |
||||
this.selectedRowKeys = selectedRowKeys |
||||
}, |
||||
|
||||
// 切换tab |
||||
handleTabs(e) { |
||||
this.queryParam.order_status = e.target.value |
||||
this.handleRefresh(true) |
||||
}, |
||||
|
||||
// 确认搜索 |
||||
handleSearch(e) { |
||||
this.handleRefresh(true) |
||||
}, |
||||
|
||||
// 重置搜索表单 |
||||
handleReset() { |
||||
this.searchForm.resetFields() |
||||
}, |
||||
|
||||
// 取消订单 |
||||
handleCancel(orderId) { |
||||
const app = this |
||||
const modal = this.$confirm({ |
||||
title: '您确定要取消该订单吗?', |
||||
content: '', |
||||
onOk() { |
||||
return Api.cancelOrder({ orderId }) |
||||
.then((result) => { |
||||
app.$message.success(result.message, 1.5) |
||||
app.handleRefresh() |
||||
}) |
||||
.finally((result) => modal.destroy()) |
||||
}, |
||||
}) |
||||
}, |
||||
//获取订单状态 |
||||
getOrderStatusList() { |
||||
this.isLoading = true |
||||
Api.orderStatusList() |
||||
.then((result) => { |
||||
this.orderStatusList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 派单 |
||||
handleDispatch(order_id) { |
||||
this.$refs.dispatchRef.add(order_id) |
||||
}, |
||||
/** |
||||
* 刷新列表 |
||||
* @param Boolean bool 强制刷新到第一页 |
||||
*/ |
||||
handleRefresh(bool = false) { |
||||
this.selectedRowKeys = [] |
||||
this.$refs.table.refresh(bool) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.ant-card-body { |
||||
padding: 22px 29px 25px; |
||||
} |
||||
// 筛选tab |
||||
.tab-list { |
||||
margin-right: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,115 @@ |
||||
<template> |
||||
<a-modal |
||||
title="派单" |
||||
:width="400" |
||||
:visible="visible" |
||||
:confirmLoading="confirmLoading" |
||||
:maskClosable="false" |
||||
:destroyOnClose="true" |
||||
@ok="handleSubmit" |
||||
@cancel="handleCancel" |
||||
> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form :form="form"> |
||||
<a-form-item label="服务人员" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-select |
||||
v-decorator="['dealer_id', { initialValue: 0, rules: [{ required: true, message: '请选择服务人员' }] }]" |
||||
> |
||||
<a-select-option :value="0">选择服务人员</a-select-option> |
||||
<a-select-option v-for="(item, index) in engineerList" :key="index" :value="item.user_id" |
||||
>{{ item.real_name }}<span v-if="item.mobile">({{ item.mobile }}) </span></a-select-option |
||||
> |
||||
</a-select> |
||||
</a-form-item> |
||||
</a-form> |
||||
</a-spin> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as Api from '@/api/server' |
||||
export default { |
||||
components: {}, |
||||
props: { |
||||
// 分类列表 |
||||
}, |
||||
data() { |
||||
return { |
||||
engineerList: [], |
||||
// 对话框标题 |
||||
title: '', |
||||
// 标签布局属性 |
||||
labelCol: { |
||||
span: 7, |
||||
}, |
||||
order_id: '', |
||||
// 输入框布局属性 |
||||
wrapperCol: { |
||||
span: 13, |
||||
}, |
||||
// modal(对话框)是否可见 |
||||
visible: false, |
||||
// modal(对话框)确定按钮 loading |
||||
confirmLoading: false, |
||||
// 当前表单元素 |
||||
form: this.$form.createForm(this), |
||||
} |
||||
}, |
||||
methods: { |
||||
// 显示对话框 |
||||
add(order_id) { |
||||
// 显示窗口 |
||||
this.getEngineerList() |
||||
this.order_id = order_id |
||||
this.visible = true |
||||
}, |
||||
// 获取服务人员列表 |
||||
getEngineerList() { |
||||
this.isLoading = true |
||||
Api.getEngineer() |
||||
.then((result) => { |
||||
this.engineerList = result.data.list |
||||
}) |
||||
.finally(() => (this.isLoading = false)) |
||||
}, |
||||
// 确认按钮 |
||||
handleSubmit(e) { |
||||
e.preventDefault() |
||||
// 表单验证 |
||||
const { |
||||
form: { validateFields }, |
||||
} = this |
||||
validateFields((errors, values) => { |
||||
// 提交到后端api |
||||
if (!errors) { |
||||
values.order_id = this.order_id |
||||
this.onFormSubmit(values) |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 关闭对话框事件 |
||||
handleCancel() { |
||||
this.visible = false |
||||
this.form.resetFields() |
||||
}, |
||||
|
||||
// 提交到后端api |
||||
onFormSubmit(values) { |
||||
this.confirmLoading = true |
||||
Api.dispatchOrders({ form: values }) |
||||
.then((result) => { |
||||
// 显示成功 |
||||
this.$message.success(result.message, 1.5) |
||||
// 关闭对话框事件 |
||||
this.handleCancel() |
||||
// 通知父端组件提交完成了 |
||||
this.$emit('handleSubmit', values) |
||||
}) |
||||
.finally((result) => { |
||||
this.confirmLoading = false |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue