CRM_26-07-21#story#9039,服务商在调度端App与系统中能变更基础信息及对应区域经理审核功能增加
This commit is contained in:
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<van-nav-bar
|
||||
:title="isEdit ? '编辑时段电话' : '新增时段电话'"
|
||||
left-arrow
|
||||
@click-left="goBack"
|
||||
fixed
|
||||
placeholder
|
||||
class="nav-bar"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<div class="field">
|
||||
<label class="field-label">时段（开始 — 结束，格式 00:00 ~ 23:59）</label>
|
||||
<div class="period-row">
|
||||
<input type="time" v-model="form.startTime" />
|
||||
<span class="sep">—</span>
|
||||
<input type="time" v-model="form.endTime" />
|
||||
</div>
|
||||
<div v-if="periodErr" class="err-msg">{{ periodErr }}</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-block" v-for="n in 3" :key="n">
|
||||
<div class="phone-block__head">
|
||||
<span>电话 {{ n }}{{ n === 1 ? '（必填）' : '（选填）' }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n]"
|
||||
:placeholder="'电话号码'"
|
||||
/>
|
||||
<div class="sub-grid">
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n + 'Desc']"
|
||||
placeholder="备注/负责人"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n + 'WechatId']"
|
||||
placeholder="微信号"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="phoneErr[n - 1]" class="err-msg">{{ phoneErr[n - 1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<button v-if="isEdit" class="btn btn-del" @click="deleteCurrent">删除本时段</button>
|
||||
<button class="btn btn-cancel" @click="goBack">取消</button>
|
||||
<button class="btn btn-save" @click="save">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { myMixins } from '@/utils/myMixins'
|
||||
import { isValidPhone, validateTimeRange } from '@/utils/validate'
|
||||
import { Dialog, Toast } from 'vant'
|
||||
|
||||
const DRAFT_KEY_PREFIX = 'supplierTimePhoneDraft_'
|
||||
|
||||
function getDraftKey(supplierId) {
|
||||
return `${DRAFT_KEY_PREFIX}${supplierId}`
|
||||
}
|
||||
|
||||
function emptyRecord() {
|
||||
return {
|
||||
startTime: '00:00',
|
||||
endTime: '23:59',
|
||||
phone1: '',
|
||||
phone1Desc: '',
|
||||
phone1WechatId: '',
|
||||
phone2: '',
|
||||
phone2Desc: '',
|
||||
phone2WechatId: '',
|
||||
phone3: '',
|
||||
phone3Desc: '',
|
||||
phone3WechatId: ''
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'supplierTimePhoneEdit',
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
supplierId: null,
|
||||
index: -1,
|
||||
form: emptyRecord(),
|
||||
periodErr: '',
|
||||
phoneErr: ['', '', '']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return this.index >= 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.supplierId = this.$route.query.supplierId
|
||||
this.index = Number(this.$route.query.index)
|
||||
if (Number.isNaN(this.index)) {
|
||||
this.index = -1
|
||||
}
|
||||
if (this.isEdit) {
|
||||
this.loadRecord()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadRecord() {
|
||||
try {
|
||||
const raw = localStorage.getItem(getDraftKey(this.supplierId))
|
||||
const draft = raw ? JSON.parse(raw) : null
|
||||
const list = draft?.phoneList || []
|
||||
if (list[this.index]) {
|
||||
this.form = { ...emptyRecord(), ...list[this.index] }
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
validate() {
|
||||
this.periodErr = ''
|
||||
this.phoneErr = ['', '', '']
|
||||
let valid = true
|
||||
|
||||
const timeRes = validateTimeRange(this.form.startTime, this.form.endTime)
|
||||
if (!timeRes.valid) {
|
||||
this.periodErr = timeRes.message
|
||||
valid = false
|
||||
}
|
||||
|
||||
if (!this.form.phone1) {
|
||||
this.phoneErr[0] = '电话 1 为必填项'
|
||||
valid = false
|
||||
} else if (!isValidPhone(this.form.phone1)) {
|
||||
this.phoneErr[0] = '电话 1 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone1Desc) {
|
||||
this.phoneErr[0] = '电话 1 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
|
||||
if (this.form.phone2) {
|
||||
if (!isValidPhone(this.form.phone2)) {
|
||||
this.phoneErr[1] = '电话 2 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone2Desc) {
|
||||
this.phoneErr[1] = '电话 2 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
}
|
||||
if (this.form.phone3) {
|
||||
if (!isValidPhone(this.form.phone3)) {
|
||||
this.phoneErr[2] = '电话 3 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone3Desc) {
|
||||
this.phoneErr[2] = '电话 3 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
}
|
||||
|
||||
return valid
|
||||
},
|
||||
save() {
|
||||
if (!this.validate()) return
|
||||
|
||||
try {
|
||||
const key = getDraftKey(this.supplierId)
|
||||
let draft = JSON.parse(localStorage.getItem(key) || '{}')
|
||||
let list = draft.phoneList || []
|
||||
const record = {
|
||||
startTime: this.form.startTime,
|
||||
endTime: this.form.endTime,
|
||||
phone1: this.form.phone1,
|
||||
phone1Desc: this.form.phone1Desc,
|
||||
phone1WechatId: this.form.phone1WechatId,
|
||||
phone2: this.form.phone2,
|
||||
phone2Desc: this.form.phone2Desc,
|
||||
phone2WechatId: this.form.phone2WechatId,
|
||||
phone3: this.form.phone3,
|
||||
phone3Desc: this.form.phone3Desc,
|
||||
phone3WechatId: this.form.phone3WechatId
|
||||
}
|
||||
if (this.isEdit) {
|
||||
list[this.index] = record
|
||||
} else {
|
||||
list.push(record)
|
||||
}
|
||||
draft.phoneList = list
|
||||
localStorage.setItem(key, JSON.stringify(draft))
|
||||
Toast('已保存')
|
||||
this.goBack()
|
||||
} catch (e) {
|
||||
Toast('保存失败')
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
deleteCurrent() {
|
||||
Dialog.confirm({
|
||||
title: '提示',
|
||||
message: '确定删除该时段电话？'
|
||||
}).then(() => {
|
||||
try {
|
||||
const key = getDraftKey(this.supplierId)
|
||||
let draft = JSON.parse(localStorage.getItem(key) || '{}')
|
||||
let list = draft.phoneList || []
|
||||
list.splice(this.index, 1)
|
||||
draft.phoneList = list
|
||||
localStorage.setItem(key, JSON.stringify(draft))
|
||||
Toast('已删除')
|
||||
this.goBack()
|
||||
} catch (e) {
|
||||
Toast('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
box-sizing: border-box;
|
||||
background: #f4f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .nav-bar {
|
||||
.van-nav-bar {
|
||||
background: #2b6cff;
|
||||
}
|
||||
.van-nav-bar__title,
|
||||
.van-nav-bar__arrow {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.period-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
.sep {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
input[type='time'],
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
border: 1px solid #dfe1e6;
|
||||
border-radius: 10px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
background: #fafbfc;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
&:focus {
|
||||
border-color: #2b6cff;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-block {
|
||||
border: 1px solid #eef0f3;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
background: #fcfcfd;
|
||||
&__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
color: #2b6cff;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sub-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn-save {
|
||||
background: #2b6cff;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-cancel {
|
||||
background: #f2f3f5;
|
||||
color: #666;
|
||||
}
|
||||
.btn-del {
|
||||
background: #fff;
|
||||
color: #ff4d4f;
|
||||
border: 1.5px solid #ffccc7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user