jinna
3 years ago
parent
eac4d451fc
commit
42507f829b
9 changed files with 880 additions and 136 deletions
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,94 +1,105 @@ |
||||
|
||||
import { Message } from 'element-ui'; |
||||
import { Message } from "element-ui"; |
||||
export default { |
||||
tabs: true, |
||||
tabsActive: 1, |
||||
column: [ |
||||
{ |
||||
label:'tabs', |
||||
prop:'tabs', |
||||
display: false |
||||
} |
||||
label: "tabs", |
||||
prop: "tabs", |
||||
display: false, |
||||
}, |
||||
], |
||||
group: [ |
||||
{ |
||||
label: '个人信息', |
||||
prop: 'info', |
||||
column: [{ |
||||
label: '头像', |
||||
type: 'upload', |
||||
listType: 'picture-img', |
||||
propsHttp: { |
||||
res: 'data', |
||||
url: 'link', |
||||
}, |
||||
// canvasOption: {
|
||||
// text: ' ',
|
||||
// ratio: 0.1
|
||||
// },
|
||||
action: '/api/blade-resource/oss/endpoint/put-file', |
||||
fileType: 'img',//img/video/audio,
|
||||
accept: 'image/png, image/jpeg', |
||||
tip: '只能上传jpg/png用户头像，且不超过500kb', |
||||
span: 12, |
||||
row: true, |
||||
prop: 'avatar', |
||||
uploadBefore: (file, done, loading) => { |
||||
if (['image/png', 'image/jpeg'].indexOf(file.type) == -1) { |
||||
Message({ |
||||
message: '只能上传jpg/png用户头像', |
||||
type: 'error' |
||||
}); |
||||
loading(); |
||||
} |
||||
else { |
||||
done(); |
||||
} |
||||
label: "个人信息", |
||||
prop: "info", |
||||
column: [ |
||||
{ |
||||
label: "头像", |
||||
type: "upload", |
||||
listType: "picture-img", |
||||
propsHttp: { |
||||
res: "data", |
||||
url: "link", |
||||
}, |
||||
// canvasOption: {
|
||||
// text: ' ',
|
||||
// ratio: 0.1
|
||||
// },
|
||||
action: "/api/blade-resource/oss/endpoint/put-file", |
||||
fileType: "img", //img/video/audio,
|
||||
accept: "image/png, image/jpeg", |
||||
tip: "只能上传jpg/png用户头像，且不超过500kb", |
||||
span: 12, |
||||
row: true, |
||||
prop: "avatar", |
||||
uploadBefore: (file, done, loading) => { |
||||
if (["image/png", "image/jpeg"].indexOf(file.type) == -1) { |
||||
Message({ |
||||
message: "只能上传jpg/png用户头像", |
||||
type: "error", |
||||
}); |
||||
loading(); |
||||
} else if (file.size / 1024 / 1024 > 0.48) { |
||||
Message({ |
||||
message: "上传的用户头像大小应小于500k", |
||||
type: "error", |
||||
}); |
||||
loading(); |
||||
} else { |
||||
done(); |
||||
} |
||||
}, |
||||
}, |
||||
}, { |
||||
label: '姓名', |
||||
span: 12, |
||||
row: true, |
||||
prop: 'realName' |
||||
}, { |
||||
label: '用户名', |
||||
span: 12, |
||||
row: true, |
||||
prop: 'name' |
||||
}, { |
||||
label: '手机号', |
||||
span: 12, |
||||
row: true, |
||||
prop: 'phone' |
||||
}, { |
||||
label: '邮箱', |
||||
prop: 'email', |
||||
span: 12, |
||||
row: true, |
||||
}] |
||||
// {
|
||||
// label: '姓名',
|
||||
// span: 12,
|
||||
// row: true,
|
||||
// prop: 'realName'
|
||||
// }, {
|
||||
// label: '用户名',
|
||||
// span: 12,
|
||||
// row: true,
|
||||
// prop: 'name'
|
||||
// }, {
|
||||
// label: '手机号',
|
||||
// span: 12,
|
||||
// row: true,
|
||||
// prop: 'phone'
|
||||
// }, {
|
||||
// label: '邮箱',
|
||||
// prop: 'email',
|
||||
// span: 12,
|
||||
// row: true,
|
||||
// }
|
||||
], |
||||
}, |
||||
{ |
||||
label: '修改密码', |
||||
prop: 'password', |
||||
column: [{ |
||||
label: '原密码', |
||||
span: 12, |
||||
row: true, |
||||
type: 'password', |
||||
prop: 'oldPassword' |
||||
}, { |
||||
label: '新密码', |
||||
span: 12, |
||||
row: true, |
||||
type: 'password', |
||||
prop: 'newPassword' |
||||
}, { |
||||
label: '确认密码', |
||||
span: 12, |
||||
row: true, |
||||
type: 'password', |
||||
prop: 'newPassword1' |
||||
}] |
||||
} |
||||
label: "修改密码", |
||||
prop: "password", |
||||
column: [ |
||||
{ |
||||
label: "原密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "oldPassword", |
||||
}, |
||||
{ |
||||
label: "新密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "newPassword", |
||||
}, |
||||
{ |
||||
label: "确认密码", |
||||
span: 12, |
||||
row: true, |
||||
type: "password", |
||||
prop: "newPassword1", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
} |
||||
}; |
||||
|
||||
@ -0,0 +1,296 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<div class="title_box"> |
||||
<div class="left"> |
||||
<div class="img_box" ><img src="~@/assets/image/time.png" alt=""></div> |
||||
<div class="left_txt" >{{form.name}}</div> |
||||
</div> |
||||
<div class="right" @click="handleCancel">X</div> |
||||
</div> |
||||
<el-form class="form_box" ref="form" :model="form" :inline="true" label-width="80px" label-position="top" :rules="rules"> |
||||
<el-form-item v-show="form.type == '编辑'" label="早高峰时间段"> |
||||
<el-time-picker |
||||
v-model="mornStart" |
||||
:picker-options="{ |
||||
selectableRange: '00:00:00 - 12:00:00' |
||||
}" |
||||
placeholder="开始时间段" |
||||
value-format="HH:mm" |
||||
format="HH:mm" |
||||
> |
||||
</el-time-picker> |
||||
- |
||||
<el-time-picker |
||||
v-model="mornEnd" |
||||
:picker-options="{ |
||||
selectableRange: '00:00:00 - 12:00:00', |
||||
}" |
||||
value-format="HH:mm" |
||||
format="HH:mm" |
||||
placeholder="结束时间段"> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
<el-form-item v-show="form.type == '编辑'" label="晚高峰时间段"> |
||||
<el-time-picker |
||||
v-model="evenStart" |
||||
:picker-options="{ |
||||
selectableRange: '12:00:00 - 23:59:00' |
||||
}" |
||||
placeholder="任意时间点" |
||||
value-format="HH:mm" |
||||
format="HH:mm"> |
||||
</el-time-picker> |
||||
- |
||||
<el-time-picker |
||||
v-model="evenEnd" |
||||
:picker-options="{ |
||||
selectableRange: '12:00:00 - 23:59:00', |
||||
}" |
||||
value-format="HH:mm" |
||||
format="HH:mm" |
||||
placeholder="任意时间点"> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
<el-form-item v-show="form.type == '查看'" label="早高峰时间段"> |
||||
<el-time-picker |
||||
v-model="mornStart" |
||||
:picker-options="{ |
||||
selectableRange: '00:00:00 - 12:00:00' |
||||
}" |
||||
placeholder="开始时间段" |
||||
value-format="HH:mm" |
||||
format="HH:mm" |
||||
disabled> |
||||
</el-time-picker> |
||||
- |
||||
<el-time-picker |
||||
v-model="mornEnd" |
||||
:picker-options="{ |
||||
selectableRange: '00:00:00 - 12:00:00', |
||||
}" |
||||
value-format="HH:mm" |
||||
format="HH:mm" |
||||
placeholder="结束时间段" |
||||
disabled> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
<el-form-item v-show="form.type == '查看'" label="晚高峰时间段"> |
||||
<el-time-picker |
||||
v-model="evenStart" |
||||
:picker-options="{ |
||||
selectableRange: '12:00:00 - 23:59:00' |
||||
}" |
||||
placeholder="任意时间点" |
||||
value-format="HH:mm" |
||||
format="HH:mm" |
||||
disabled> |
||||
</el-time-picker> |
||||
- |
||||
<el-time-picker |
||||
v-model="evenEnd" |
||||
:picker-options="{ |
||||
selectableRange: '12:00:00 - 23:59:00', |
||||
}" |
||||
value-format="HH:mm" |
||||
format="HH:mm" |
||||
placeholder="任意时间点" |
||||
disabled> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
<el-form-item class="btn_box" v-show="form.type == '查看'"> |
||||
<el-button class="sub_btn" @click="editForm">编辑</el-button> |
||||
</el-form-item> |
||||
<el-form-item class="btn_box" v-show="form.type == '编辑'"> |
||||
<el-button class="can_btn" type="primary" @click="handleCancel">取消</el-button> |
||||
<el-button class="sub_btn" @click="submitForm">发布</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
</div> |
||||
</template> |
||||
<script> |
||||
import {editPeak} from "@/api/station/station" |
||||
import {mapGetters} from "vuex"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
form:{}, |
||||
mornStart: '08:30', |
||||
mornEnd: '10:30', |
||||
evenStart: "17:30", |
||||
evenEnd: "18:30", |
||||
startTime:null, |
||||
rules:{ |
||||
// mornpeak: [ |
||||
// { required: true, message: '请选择早高峰时间段', trigger: 'blur' }, |
||||
// ], |
||||
// evenpeak: [ |
||||
// { required: true, message: '请选择晚高峰时间段', trigger: 'blur' }, |
||||
// ], |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
this.form = this.$route.query; |
||||
console.log(this.form) |
||||
this.mornStart = this.form.morningStart; |
||||
this.mornEnd = this.form.morningEnd; |
||||
this.evenStart = this.form.eveningStart; |
||||
this.evenEnd = this.form.eveningEnd; |
||||
}, |
||||
computed:{ |
||||
...mapGetters(["tagWel", "tagList", "tag", "website"]), |
||||
}, |
||||
methods: { |
||||
findTag(value) { |
||||
let tag, key; |
||||
this.tagList.map((item, index) => { |
||||
if (item.value === value) { |
||||
tag = item; |
||||
key = index; |
||||
} |
||||
}); |
||||
return {tag: tag, key: key}; |
||||
}, |
||||
handleCancel(){ |
||||
let {tag, key} = this.findTag(this.$route.fullPath); |
||||
this.$store.commit("DEL_TAG", tag); |
||||
if (tag.value === this.tag.value) { |
||||
tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个 |
||||
this.$router.push({ |
||||
path:"/peak/index" |
||||
}) |
||||
} |
||||
}, |
||||
editForm(){ |
||||
this.form.type = '编辑' |
||||
this.form.name = '时间段编辑' |
||||
}, |
||||
submitForm(){ |
||||
console.log(this.mornStart,this.mornEnd) |
||||
console.log(this.mornStart > this.mornEnd) |
||||
if(this.mornStart == null || this.mornEnd == null || this.evenStart == null || this.evenEnd == null){ |
||||
this.$message.error('请选择早晚高峰时间段') |
||||
}else{ |
||||
if(this.mornStart > this.mornEnd || this.evenStart > this.evenEnd){ |
||||
this.$message.error('结束时间不应该小于开始时间') |
||||
}else{ |
||||
let tmp = { |
||||
id: this.form.id, |
||||
morningStart: this.mornStart, |
||||
morningEnd: this.mornEnd, |
||||
eveningStart: this.evenStart, |
||||
eveningEnd: this.evenEnd |
||||
} |
||||
console.log(tmp) |
||||
this.$confirm('是否修改为当前车辆信息？', '提示信息', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
editPeak(tmp).then(res =>{ |
||||
console.log(res) |
||||
if(res.data.code == 200){ |
||||
this.$message.success('修改成功') |
||||
setTimeout(() =>{ |
||||
let {tag, key} = this.findTag(this.$route.fullPath); |
||||
this.$store.commit("DEL_TAG", tag); |
||||
if (tag.value === this.tag.value) { |
||||
tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个 |
||||
this.$router.push({ |
||||
path:"/peak/index" |
||||
}) |
||||
} |
||||
},500) |
||||
|
||||
} |
||||
}) |
||||
}) |
||||
|
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.container{ |
||||
width: 98%; |
||||
height: 95%; |
||||
background: #FFF; |
||||
margin: 0 auto; |
||||
overflow: auto; |
||||
|
||||
.title_box{ |
||||
width: 95%; |
||||
height: 80px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin: 0 auto; |
||||
|
||||
.left{ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.img_box{ |
||||
width: 30px; |
||||
height: 30px; |
||||
margin:0px 18px 0px 0px; |
||||
} |
||||
|
||||
.left_txt{ |
||||
font-size: 20px; |
||||
font-weight: 800; |
||||
color: #333333; |
||||
} |
||||
} |
||||
.right{ |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.form_box{ |
||||
width: 95%; |
||||
margin: 0 auto; |
||||
|
||||
/deep/ .el-form-item{ |
||||
width: 49%; |
||||
margin-bottom: 7px; |
||||
|
||||
.el-date-editor{ |
||||
width: 48%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .btn_box{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100% !important; |
||||
margin-top: 60px; |
||||
|
||||
.can_btn{ |
||||
width: 118px; |
||||
height: 48px; |
||||
background: #E2E2E2; |
||||
box-shadow: inset 3px 4px 5px 1px rgba(0,0,0,0.07); |
||||
border-radius: 2px 2px 2px 2px; |
||||
border: none; |
||||
color: #999999; |
||||
} |
||||
|
||||
.sub_btn{ |
||||
width: 120px; |
||||
height: 50px; |
||||
background: url("~@/assets/image/btn.png") no-repeat; |
||||
background-size: 100% 100%; |
||||
color: #fff; |
||||
border: none; |
||||
margin-left: 30px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue