parent
b332158556
commit
5575c862d9
11 changed files with 234 additions and 254 deletions
@ -0,0 +1,166 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="flex-between"> |
||||
<div class="per_title" v-preventReClick @click="back"> |
||||
<i class="el-icon-arrow-left"></i> |
||||
<span class="per_back">返回</span> |
||||
<span class="per_school">商务经理订单</span> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div> |
||||
<div class="flex-center mgb20"> |
||||
<p class="hr_tag"></p> |
||||
<span>筛选</span> |
||||
</div> |
||||
<div style="text-align: right"> |
||||
<el-input style="width: 300px" placeholder="请输入订单编号/产品名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="card"> |
||||
<div class="flex-between mgb20"> |
||||
<div class="flex-center"> |
||||
<p class="hr_tag"></p> |
||||
<span>订单列表</span> |
||||
</div> |
||||
</div> |
||||
<el-table :data="orderData" class="table" ref="table" stripe header-align="center" |
||||
@selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderNumber" label="订单编号" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="customerName" label="客户名称" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ customerName }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="productName" label="产品内容" align="center"></el-table-column> |
||||
<el-table-column prop="totalAmount" label="订单金额（元）" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="createTime" label="订单日期" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderType" label="订单类型" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderStatus" label="订单状态" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderNature" label="订单性质" align="center"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="toDetail(scope.row)">查看</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" |
||||
@current-change="handleCurrentChange" :current-page="page" :total="totals"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
businessManagerId: this.$route.query.businessManagerId, |
||||
customerId: this.$route.query.customerId, |
||||
customerName: this.$route.query.customerName, |
||||
keyword: "", |
||||
orderData: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
totals: 0, |
||||
searchTimer: null |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
created() { |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
let data = { |
||||
businessManagerId: this.businessManagerId, |
||||
keywords: this.keyword, |
||||
customerId: this.customerId, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
}; |
||||
this.$post(this.api.getBusinessManagerOrder, data).then(({ data }) => { |
||||
const { records } = data |
||||
records.forEach(e => { |
||||
e.orderType = this.orderTypeFn(e.orderType); |
||||
e.orderStatus = this.orderStatusFn(e.orderStatus); |
||||
e.orderNature = this.orderNatureFn(e.orderNature); |
||||
}); |
||||
this.orderData = records |
||||
this.totals = data.total |
||||
}).catch(res => {}) |
||||
}, |
||||
initData() { |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
toDetail(row) { |
||||
this.$router.push({ |
||||
path:'/AddOrder', |
||||
query:{ |
||||
val: 'watch', |
||||
orderId: row.orderId, |
||||
orderStatus: row.orderStatus === '已完成' ? 1 : 0 |
||||
} |
||||
}) |
||||
}, |
||||
back() { |
||||
this.$router.back() |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.card { |
||||
min-height: calc(100vh - 300px); |
||||
} |
||||
.mag { |
||||
margin-right: 20px; |
||||
} |
||||
.cell{ |
||||
white-space:pre-wrap; |
||||
width: 140px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
.tags{ |
||||
border: none; |
||||
background: none;color: #000; |
||||
white-space:pre-wrap; |
||||
width: 140px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,193 +0,0 @@ |
||||
<template> |
||||
<div class="join"> |
||||
<el-form class="form" ref="form" :model="form" :rules="rules"> |
||||
<el-form-item prop="userName" label="姓名"> |
||||
<el-input v-model.trim="form.userName" placeholder="请输入姓名"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="account" label="账号"> |
||||
<el-input v-model.trim="form.account" placeholder="请输入账号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="phone" label="手机号"> |
||||
<el-input v-model.trim="form.phone" placeholder="请输入手机号" maxlength="11"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="email" label="邮箱"> |
||||
<el-input v-model.trim="form.email" placeholder="请输入邮箱"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="btn-wrap"> |
||||
<el-button type="primary" @click="submit">提交</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util" |
||||
import Setting from "@/setting" |
||||
export default { |
||||
data() { |
||||
const accountPass = (rule, value, callback) => { |
||||
if (value === '') { |
||||
callback(new Error('请输入账号')) |
||||
} else { |
||||
const pattern = /^[A-Za-z0-9]*$/ |
||||
if(pattern.test(value)){ |
||||
this.accountChange() |
||||
callback() |
||||
}else{ |
||||
callback(new Error('请输入正确账号格式')) |
||||
} |
||||
} |
||||
} |
||||
const phonePass = (rule, value, callback) => { |
||||
if (value) { |
||||
const pattern = /^1[3456789]\d{9}$/ |
||||
if(pattern.test(value)){ |
||||
this.phoneChange() |
||||
callback() |
||||
}else{ |
||||
callback(new Error('请输入正确手机号格式')) |
||||
} |
||||
} else { |
||||
callback(new Error('请输入手机号')) |
||||
} |
||||
} |
||||
const emailPass = (rule, value, callback) => { |
||||
if (value) { |
||||
const pattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/ |
||||
if(pattern.test(value)){ |
||||
// this.emailChange() |
||||
callback() |
||||
}else{ |
||||
callback(new Error('请输入正确邮箱格式')) |
||||
} |
||||
} else { |
||||
callback() |
||||
} |
||||
} |
||||
return { |
||||
token: window.atob(decodeURI(this.$route.query.token)), |
||||
form: { |
||||
partnerClassificationId: this.$route.query.id, |
||||
isTeam: 0, |
||||
account: '', |
||||
email: '', |
||||
phone: '', |
||||
userName: '' |
||||
}, |
||||
rules: { |
||||
account: [ |
||||
{ required: true, validator: accountPass, trigger: 'blur' } |
||||
], |
||||
userName: [ |
||||
{ required: true, message: "请输入姓名", trigger: "blur" } |
||||
], |
||||
phone: [ |
||||
{ required: true, validator: phonePass, trigger: 'blur' } |
||||
], |
||||
email: [ |
||||
{ validator: emailPass, trigger: 'blur' } |
||||
] |
||||
}, |
||||
submiting: false // 新增编辑防抖标识 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
sessionStorage.setItem('token', this.token) |
||||
this.form.token = this.token |
||||
}, |
||||
methods: { |
||||
// 账号判重 |
||||
accountChange() { |
||||
const form = this.form |
||||
const { account } = form |
||||
if (account === this.originAccount) { |
||||
this.accountReapeat = false |
||||
} else { |
||||
const { accountId } = form |
||||
this.$post(`${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=2&account=${account}${accountId ? `&accountId=${accountId}` : ''}`).then(res => { |
||||
this.accountReapeat = false |
||||
}).catch(err => { |
||||
this.accountReapeat = true |
||||
}) |
||||
} |
||||
}, |
||||
// 手机号判重 |
||||
phoneChange() { |
||||
const form = this.form |
||||
const { phone } = form |
||||
if (phone) { |
||||
const { accountId } = form |
||||
this.$post(`${this.api.checkEmailOrPhone}?phone=${phone}${accountId ? `&accountId=${accountId}` : ''}`).then(res => { |
||||
this.phoneRepeat = false |
||||
}).catch(err => { |
||||
this.phoneRepeat = true |
||||
}) |
||||
} |
||||
}, |
||||
// 邮箱判重 |
||||
emailChange() { |
||||
const form = this.form |
||||
const { email } = form |
||||
if (email) { |
||||
const { accountId } = form |
||||
this.$post(`${this.api.checkEmailOrPhone}?email=${email}${accountId ? `&accountId=${accountId}` : ''}`).then(res => { |
||||
this.emailRepeat = false |
||||
}).catch(err => { |
||||
this.emailRepeat = true |
||||
}) |
||||
} |
||||
}, |
||||
// 提交 |
||||
submit() { |
||||
this.$refs.form.validate((valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
if (this.accountReapeat) return util.warningMsg("该账号已存在") |
||||
if (this.phoneRepeat) return util.warningMsg("该手机号已存在") |
||||
if (this.emailRepeat) return util.warningMsg("该邮箱已存在") |
||||
const { form } = this |
||||
form.uniqueIdentification = Date.now() |
||||
this.submiting = true |
||||
this.$post(this.api.savePartnerAccount, form).then(res => { |
||||
util.successMsg('加入成功！') |
||||
setTimeout(location.reload, 1000) |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.join { |
||||
.form{ |
||||
width: 436px; |
||||
padding: 38px 38px 60px; |
||||
margin: 0 auto 0; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
.title{ |
||||
margin-bottom: 25px; |
||||
font-size: 26px; |
||||
color: #0B1D30; |
||||
letter-spacing: 4px; |
||||
} |
||||
} |
||||
/deep/.el-form-item{ |
||||
margin-bottom: 20px; |
||||
} |
||||
/deep/.el-input__inner{ |
||||
position: relative; |
||||
height: 52px; |
||||
padding: 0 20px 0 34px; |
||||
line-height: 50px; |
||||
background-color: #FBFBFB; |
||||
border: 1px solid #E1E6F2; |
||||
border-radius: 4px !important; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue