travel/admin/src/views/order/used.vue

539 lines
18 KiB
Vue
Raw Normal View History

2024-06-28 17:30:56 +08:00
<template>
<div class="app-container">
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" fixed label="电话" width="120" prop="mobile" />
<el-table-column align="center" fixed label="平台" width="80" prop="os_name" />
<el-table-column align="center" fixed label="直播" width="60">
<template slot-scope="scope">
<el-tag v-if="scope.row.is_zhibo"></el-tag>
<el-tag v-else type="info"></el-tag>
</template>
</el-table-column>
<el-table-column align="center" fixed label="客服" width="80" prop="admin.username" />
<el-table-column align="center" label="订单号" width="180" prop="sn" />
<el-table-column width="138px" align="center" label="下单时间">
<template slot-scope="scope">
<span>{{ scope.row.create_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column width="160px" align="center" label="派单时间">
<template slot-scope="scope">
<span>{{ scope.row.give_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="状态" width="80">
<template slot-scope="scope">
<div style="padding: 1px 5px; border-radius: 3px;" :style="{color:order_status[scope.row.order_status],border:`1px solid ${order_status[scope.row.order_status]}`}" type="primary">{{ scope.row.order_status_name }}</div>
</template>
</el-table-column>
<el-table-column align="center" label="跟进状态" width="90">
<template slot-scope="scope">
<div style="padding: 1px 5px; border-radius: 3px;" :style="{color:follow_status[scope.row.status],border:`1px solid ${follow_status[scope.row.status]}`}" type="primary">{{ scope.row.status_name }}</div>
</template>
</el-table-column>
<el-table-column align="center" width="500px" label="标题" prop="product_name" />
<el-table-column width="500px" align="center" label="跟进备注" prop="remark" />
<el-table-column align="center" label="联系人" width="120" prop="contact" />
<!-- <el-table-column align="center" label="微信" width="80">
<template slot-scope="scope">
<i v-if="scope.row.is_wechat>0" class="el-icon-circle-check"></i>
</template>
</el-table-column> -->
<el-table-column width="138px" align="center" label="出行时间">
<template slot-scope="scope">
<span>{{ scope.row.travel_date | parseTime('{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column width="138px" align="center" label="最后跟进时间">
<template slot-scope="scope">
<span>{{ scope.row.last_follow | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="核单" width="80">
<template slot-scope="scope">
<i v-if="scope.row.is_check == 1" class="el-icon-check" />
<i v-if="scope.row.is_check == 2" class="el-icon-close" />
</template>
</el-table-column>
<el-table-column align="center" width="138px" label="分类" prop="category_desc" />
<el-table-column align="center" label="总金额" width="120">
<template slot-scope="scope">
<span>{{ scope.row.total_price/100 }}</span>
</template>
</el-table-column>
<el-table-column align="center" width="80px" label="人数" prop="quantity" />
<el-table-column align="center" label="主播" width="80" prop="anchor.username" />
<el-table-column width="138px" align="center" label="修改时间">
<template slot-scope="scope">
<span>{{ scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>
<el-dialog title="订单跟进" :visible.sync="dialogVisible">
<el-form label-width="130px" :model="item">
<el-form-item label="产品名称">
{{ item.product_name }}
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="产品状态">
{{ item.order_status_name }}
</el-form-item>
<el-form-item label="数量">
{{ item.quantity }}
</el-form-item>
<el-form-item label="联系人">
{{ item.contact }}
</el-form-item>
<el-form-item label="手机">
{{ item.mobile }}
</el-form-item>
<el-form-item label="下单时间">
{{ item.create_at | parseTime('{y}-{m}-{d} {h}:{i}') }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="人员">
<el-row>
<el-col :span="3">大人</el-col>
<el-col :span="5"><el-input v-model="item.personnel.adult" name="adult" placeholder="大人" /></el-col>
<el-col :span="3">老人</el-col>
<el-col :span="5"><el-input v-model="item.personnel.old" name="old" placeholder="老人" /></el-col>
<el-col :span="3">小孩</el-col>
<el-col :span="5"><el-input v-model="item.personnel.child" name="child" placeholder="小孩" /></el-col>
</el-row>
</el-form-item>
<el-form-item v-if="item.status!==1" label="核销码">
<el-input v-model="item.check_sn" name="check_sn" placeholder="请输入平台核销码" />
</el-form-item>
<el-form-item label="加微信" v-if="item.status!==2">
<el-checkbox v-model="item.is_wechat" :true-label="1" :false-label="0">已加微信</el-checkbox>
</el-form-item>
<el-form-item label="出游日期">
<el-date-picker
v-model="item.travel_date"
type="date"
placeholder="选择日期时间"
/>
</el-form-item>
<el-form-item v-if="item.status!==1" label="返回日期">
<el-date-picker
v-model="item.travel_end"
type="date"
placeholder="选择日期时间"
/>
</el-form-item>
<el-form-item label="下次跟进时间" v-if="item.status!==2">
<el-date-picker
v-model="next_follow"
type="datetime"
placeholder="选择日期时间"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="跟进状态">
<template v-for="(v,k) in status_arr">
<el-radio v-if="k > 0" v-model="item.status" :label="k" border>{{ v }}</el-radio>
</template>
</el-form-item>
<!-- <el-form-item label="快捷跟进" style="width: 600px;">
<el-select v-model="value" placeholder="请选择" @change="onChange">
<el-form-item style="display: inline-flex;text-align: left;width: 770px;">
<el-option
v-for="item in options"
:key="item.value"
style="width: 250px;display: inline-flex;word-break: break-all;"
:label="item.label"
:value="item.label"
/>
</el-form-item>
</el-select>
</el-form-item>-->
<el-form-item label="跟进说明">
<el-input v-model="item.desc" type="textarea" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="onSave(item)"> </el-button>
</div>
<el-tabs v-model="active" type="border-card">
<el-tab-pane name="follow" label="跟进记录">
<el-table
:data="item.follow"
style="width: 100%"
>
<el-table-column
label="日期"
width="138"
>
<template slot-scope="scope">
<span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column
label="跟进人"
width="110"
prop="name"
/>
<el-table-column
label="状态"
width="80"
>
<template slot-scope="scope">
<span>{{ status_arr[scope.row.status] }}</span>
</template>
</el-table-column>
<el-table-column
prop="desc"
label="跟进说明"
/>
</el-table>
</el-tab-pane>
<el-tab-pane name="finance" label="财务记录">
<el-table
:data="item.finance"
style="width: 100%"
>
<el-table-column
label="日期"
>
<template slot-scope="scope">
<span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column
label="类型"
width="110"
>
<template slot-scope="scope">
<span>{{ type_arr[scope.row.type] }}</span>
</template>
</el-table-column>
<el-table-column
label="状态"
width="120"
>
<template slot-scope="scope">
<span>{{ scope.row.total/100 }}</span>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-dialog>
<el-dialog title="纯核销" :visible.sync="dialog2Visible">
<el-form label-width="160px" :model="form">
<el-form-item label="平台">
<el-radio v-model="form.os" label="1">美团</el-radio>
</el-form-item>
<el-form-item label="核销码">
<el-input v-model="form.check_sn" placeholder="请输入平台核销码" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="onPass(form)"> </el-button>
</div>
</el-dialog>
<el-dialog title="申请转出订单" :visible.sync="applyVisible">
<el-form label-width="160px" :model="item3" :rules="rules" ref="ruleForm">
<el-form-item label="标题:">
<el-input v-model="item3.product_name" disabled />
</el-form-item>
<el-form-item label="订单号:">
<el-input v-model="item3.sn" disabled />
</el-form-item>
<el-form-item label="流转对象:" style="width: 600px;" prop="flowObj">
<el-select v-model="item3.flowObj" placeholder="请选择" @change="onChange2">
<el-form-item style="display: inline-flex;text-align: left;width: 770px;">
<el-option
v-for="item in adminList"
:key="item.value"
style="width: 250px;display: inline-flex;word-break: break-all;"
:label="item.username"
:value="item.id"
/>
</el-form-item>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<!-- scope.row.backs&&scope.row.backs.status==2? -->
<el-button v-if="item3.backs&&item3.backs.status==0" type="primary" @click="onCancel(item3.flowObj)"> </el-button>
<el-button v-else type="primary" @click="onCirculationSave(item3.flowObj)"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import Pagination from '@/components/Pagination'
import Pagination from '@/components/PaginationFixed'
import {orderBack} from '@/api/order'
export default {
name: 'Orderlist',
components: { Pagination },
data() {
return {
active: 'follow',
types: { 0: '', 1: '', 2: '', 3: 'primary', 4: 'success', 5: 'warning', 6: 'danger', 7: 'info' },
types2: { 1: 'primary', 2: 'success', 3: 'warning' },
status_arr: ['待跟进', '跟进中', '已核销', '核销失败', '放弃跟单'],
type_arr: ['-', '收益', '支出'],
timetype_arr: {},
order_status: ['#9e9f9c', '#04bcd9', '#fc9904', '#1193f4', '#48b14b', '#eb1662', '#9d1cb5'],
follow_status: ['#9e9f9c', '#04bcd9', '#fc9904', '#1193f4', '#48b14b', '#eb1662'],
options: [],
value: null,
next_follow: null,
list: [],
total: 0,
listLoading: true,
listQuery: {
page: 1,
limit: 10,
times: [],
status: null,
admin: null,
zhubo: null,
os_status:[]
},
item: { next_follow: '', personnel: {}},
follow: [],
dialogVisible: false,
dialog2Visible: false,
applyVisible: false,
oss: [],
item3: {
sn: null,
backs:null,
flowObj:'',
os: null // 初始值,你可以根据需要设置为 1、2 或 3
},
os_arr: { 1: '美团', 2: '快手', 3: '抖音' },
adminList: [],
form: {},
rules:{
flowObj: [
{ required: true, message: '请选择流转对象', trigger: 'change' }
],
}
}
},
created() {
// this.listQuery.status = this.$route.query.status || null
this.listQuery.zhubo = this.$route.query.zhubo || null
if (this.$route.query.start && this.$route.query.end) {
this.listQuery.times = [this.$route.query.start, this.$route.query.end]
}
this.setQuery('status')
this.setQuery('os_status')
this.setQuery('times')
this.getList()
this.getShortcutContent()
this.getAdminList()
},
methods: {
setQuery(key){
if (this.$route.query.hasOwnProperty(key)) {
this.listQuery[key] = this.$route.query[key]
} else {
this.listQuery[key] = ''
}
},
getList($is_excel) {
this.listQuery.excel = null
if ($is_excel == 1) {
this.listQuery.excel = 1
const isdate = this.listQuery.times[0] instanceof Date
const params = {
...this.listQuery,
times: [isdate ? this.listQuery.times[0].toISOString() : '', isdate ? this.listQuery.times[1].toISOString() : '']
}
window.open('/admin/order/index?' + this.objectToQuery(params))
return
}
this.listQuery.os_status = [4,2] //todo 现在只查已使用订单
this.$axios.get('/admin/order/index', { params: this.listQuery }).then(response => {
this.list = response.data.data
this.total = response.data.total
this.timetype_arr = response.ext.timetype,
this.oss = response.ext.oss
this.listLoading = false
})
},
objectToQuery(obj) {
return Object.keys(obj).map(key => {
const value = obj[key]
if (value == undefined || value == null) return ''
return encodeURIComponent(key) + '=' + encodeURIComponent(value)
}).join('&')
},
onInfo(item) {
this.value = null
this.next_follow = null
this.$set(item, 'next_follow', null)
this.item = item
this.active = 'follow'
this.$axios.get('/admin/order/info', { params: { id: item.id }}).then(res => {
this.item = res.data
this.dialogVisible = true
}).catch(err => {
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
getAdminList() {
this.$axios.get('/admin/admin/index', { params: { limit: 100, status: 1, is_order: 1 }}).then(response => {
this.adminList = response.data.data
this.listLoading = false
}).catch(err => {
})
},
onCirculation(item) {
this.applyVisible = true
this.item3 = { ...item, os: Number(item.os) }
console.log(this.item3);
if(this.item3.backs&&this.item3.backs.admin_id){
this.item3.flowObj = this.item3.backs.admin_id
}else{
this.resetForm('ruleForm')
}
},
//确定
onCirculationSave(to_admin_id) {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
orderBack({ sn: this.item3.sn, os: this.item3.os, to_admin_id: to_admin_id }).then((res)=>{
this.applyVisible = false
this.getList()
})
} else {
return false;
}
});
},
// 取消
onCancel() {
this.$refs.ruleForm.validate((valid) => {
if(valid){
this.$axios.post('/admin/order/backcancel', { id: this.item3.id }).then(res => {
this.applyVisible = false
this.getList()
}).catch(err => {
console.log(err)
})
}else{
return false
}
});
},
onBack() {
this.$axios.post('/admin/order/back', this.item).then(res => {
this.dialogVisible = false
this.item = {}
this.getList()
}).catch(err => {
})
},
onSave(item) {
console.log(this.next_follow)
this.$axios.post('/admin/order/save', { id: item.id, check_sn: item.check_sn, is_wechat: item.is_wechat, travel_end: item.travel_end, travel_date: item.travel_date, desc: item.desc, status: item.status, next_follow: this.next_follow, personnel: this.item.personnel }).then(res => {
this.dialogVisible = false
this.item = { next_follow: '', personnel: {}}
}).catch(err => {
})
},
onPass(form) {
this.$axios.post('/admin/order/pass', { check_sn: form.check_sn }).then(res => {
this.dialog2Visible = false
this.form = {}
}).catch(err => {
})
},
onChange(from) {
this.$set(this.item, 'desc', from + (this.item.desc != undefined ? this.item.desc : ''))
},
onChange2(from) {
this.$set(this.item, 'to_admin_id', from + (this.item.admin_id != undefined ? this.item.admin_id : ''))
},
handleChange(os) {
console.log(os)
},
getShortcutContent() {
this.listLoading = true
this.$axios.get('/admin/shortcutContent/list', { params: { page: 1, limit: 50, status: 1 }}).then(response => {
for (const r of response.data.data) {
this.options.push({ value: r.id, label: r.content })
}
}).catch(() => {
})
}
}
}
</script>
<style scoped>
.app-container {
position: relative;
padding-bottom: 60px; /* 分页条的高度 */
}
.filter-container,
.el-table {
padding-bottom: 52px; /* 分页条的高度,以避免内容重叠 */
}
</style>