You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
424 lines
12 KiB
424 lines
12 KiB
<template> |
|
<div class="page"> |
|
<div class="action"> |
|
<el-button v-if="!editing" |
|
type="primary" |
|
@click="edit">编辑</el-button> |
|
</div> |
|
<el-form label-width="170px" |
|
label-suffix=":" |
|
class="input-form model" |
|
size="small" |
|
:disabled="!editing"> |
|
<el-form-item label="LOGO"> |
|
<el-upload class="avatar-uploader" |
|
accept=".jpg,.png,.jpeg,.gif" |
|
:limit="1" |
|
:on-exceed="handleExceed" |
|
:before-remove="beforeRemove" |
|
:on-remove="e => handleRemove('logoUrl')" |
|
:on-error="uploadError" |
|
action="" |
|
:http-request="e => handleRequest(e, 'logoUrl')"> |
|
<img v-if="form.logoUrl" |
|
:src="form.logoUrl" |
|
class="avatar"> |
|
<div class="uploader-default" |
|
v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传LOGO</p> |
|
</div> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="幼儿园名称"> |
|
<div class="d-inline-block"> |
|
<el-input v-model="form.classificationName" /> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="幼儿园slogan"> |
|
<el-input type="textarea" |
|
rows="4" |
|
v-model="form.slogan" /> |
|
</el-form-item> |
|
<el-form-item label="省份"> |
|
<el-select v-model="form.province" |
|
clearable |
|
placeholder="请选择省份" |
|
@change="getCity" |
|
@clear="clearprovince"> |
|
<el-option v-for="(item, i) in provinceList" |
|
:key="i" |
|
:value="item.provinceName"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="城市"> |
|
<el-select v-model="form.city" |
|
clearable |
|
placeholder="请选择城市" |
|
:disabled="form.province ? false : true"> |
|
<el-option v-for="(item, i) in cityList" |
|
:key="i" |
|
:value="item.cityName"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="地址"> |
|
<el-input type="textarea" |
|
rows="4" |
|
v-model="form.address" /> |
|
</el-form-item> |
|
<el-form-item label="幼儿园简介"> |
|
<el-input type="textarea" |
|
rows="4" |
|
v-model="form.briefIntroduction" /> |
|
<el-upload class="m-t-10" |
|
action="#" |
|
list-type="picture-card" |
|
:on-remove="handlePicRemove" |
|
:limit="3" |
|
:file-list="pics" |
|
:on-exceed="handlePicExceed" |
|
:http-request="uploadPicSuccess"> |
|
<i class="el-icon-plus"></i> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="二维码一"> |
|
<el-input v-model="form.qrCodeOneName" |
|
placeholder="请输入二维码描述" /> |
|
|
|
<el-upload class="avatar-uploader m-t-10" |
|
accept=".jpg,.png,.jpeg,.gif" |
|
:limit="1" |
|
:on-exceed="handleExceed" |
|
:before-remove="beforeRemove" |
|
:on-remove="e => handleRemove('qrCodeOneUrl')" |
|
:on-error="uploadError" |
|
action="" |
|
:http-request="e => handleRequest(e, 'qrCodeOneUrl')"> |
|
<img v-if="form.qrCodeOneUrl" |
|
:src="form.qrCodeOneUrl" |
|
class="avatar"> |
|
<div class="uploader-default" |
|
v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传第一张二维码</p> |
|
</div> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="二维码二"> |
|
<el-input v-model="form.qrCodeTwoName" |
|
placeholder="请输入二维码描述" /> |
|
<el-upload class="avatar-uploader m-t-10" |
|
accept=".jpg,.png,.jpeg,.gif" |
|
:limit="1" |
|
:on-exceed="handleExceed" |
|
:before-remove="beforeRemove" |
|
:on-remove="e => handleRemove('qrCodeTwoUrl')" |
|
:on-error="uploadError" |
|
action="" |
|
:http-request="e => handleRequest(e, 'qrCodeTwoUrl')"> |
|
<img v-if="form.qrCodeTwoUrl" |
|
:src="form.qrCodeTwoUrl" |
|
class="avatar"> |
|
<div class="uploader-default" |
|
v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传第二张二维码</p> |
|
</div> |
|
</el-upload> |
|
</el-form-item> |
|
<el-form-item label="二维码三"> |
|
<el-input v-model="form.qrCodeThreeName" |
|
placeholder="请输入二维码描述" /> |
|
|
|
<el-upload class="avatar-uploader m-t-10" |
|
accept=".jpg,.png,.jpeg,.gif" |
|
:limit="1" |
|
:on-exceed="handleExceed" |
|
:before-remove="beforeRemove" |
|
:on-remove="e => handleRemove('qrCodeThreeUrl')" |
|
:on-error="uploadError" |
|
action="" |
|
:http-request="e => handleRequest(e, 'qrCodeThreeUrl')"> |
|
<img v-if="form.qrCodeThreeUrl" |
|
:src="form.qrCodeThreeUrl" |
|
class="avatar"> |
|
<div class="uploader-default" |
|
v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传第三张二维码</p> |
|
</div> |
|
</el-upload> |
|
</el-form-item> |
|
</el-form> |
|
|
|
<div class="btns"> |
|
<el-button v-if="editing" |
|
type="primary" |
|
@click="submit">保存</el-button> |
|
<el-button @click="$router.back()">返回</el-button> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Util from "@/libs/util"; |
|
import Setting from "@/setting"; |
|
import Upload from '@/components/upload'; |
|
import Oss from '@/components/upload/upload.js' |
|
export default { |
|
data () { |
|
return { |
|
id: this.$route.query.id, |
|
teamId: this.$route.query.teamId, |
|
form: { |
|
address: '', |
|
briefIntroduction: '', |
|
city: '', |
|
classificationName: '', |
|
id: '', |
|
logoUrl: '', |
|
pictureUrl: '', |
|
province: '', |
|
qrCodeOneName: '', |
|
qrCodeOneUrl: '', |
|
qrCodeThreeName: '', |
|
qrCodeThreeUrl: '', |
|
qrCodeTwoName: '', |
|
qrCodeTwoUrl: '', |
|
slogan: '', |
|
}, |
|
provinceList: [], |
|
cityList: [], |
|
pics: [], |
|
editing: false, |
|
submiting: false, |
|
}; |
|
}, |
|
components: { |
|
Upload |
|
}, |
|
watch: { |
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
form: { |
|
handler () { |
|
this.updateTime++ |
|
}, |
|
deep: true |
|
}, |
|
}, |
|
mounted () { |
|
this.$store.commit('user/setCrumbs', [ |
|
{ |
|
name: '幼儿园管理', |
|
route: '/preschool' |
|
}, |
|
{ |
|
name: '基本信息' |
|
}, |
|
]) |
|
this.getProvince() |
|
this.getData() |
|
}, |
|
methods: { |
|
getData () { |
|
this.$get(`${this.api.queryTeamInfo}?teamId=${this.teamId}`).then(res => { |
|
const data = res.teamInfo |
|
Object.assign(this.form, data) |
|
|
|
// 描述图片回显 |
|
if (data.pictureUrl) { |
|
const urls = data.pictureUrl.split(',') |
|
this.pics = urls.map(e => { |
|
return { |
|
name: e, |
|
url: e |
|
} |
|
}) |
|
} |
|
}).catch(err => { }) |
|
}, |
|
|
|
getProvince () { |
|
this.$get(this.api.queryProvince).then(res => { |
|
this.provinceList = res.list |
|
}).catch(res => { }) |
|
}, |
|
clearprovince () { |
|
this.form.city = '' |
|
}, |
|
// 获取城市 |
|
getCity () { |
|
this.clearprovince() |
|
this.getCityData() |
|
}, |
|
getCityData () { |
|
this.$get(this.api.queryCity, { |
|
provinceId: this.provinceList.find(e => e.provinceName === this.form.province).provinceId |
|
}).then(res => { |
|
this.cityList = res.list |
|
}).catch(res => { }) |
|
}, |
|
|
|
// 编辑 |
|
edit () { |
|
this.editing = true |
|
}, |
|
handleExceed (files, fileList) { |
|
Util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
|
}, |
|
beforeRemove (file, fileList) { |
|
return this.$confirm(`确定移除 ${file.name}？`); |
|
}, |
|
handleRemove (field) { |
|
Oss.del(this.form[field]) |
|
this.form[field] = '' |
|
}, |
|
uploadError (err, file, fileList) { |
|
this.$message({ |
|
message: "上传出错，请重试！", |
|
type: "error", |
|
center: true |
|
}) |
|
}, |
|
// logo自定义上传 |
|
async handleRequest ({ file }, field) { |
|
this.form[field] && Oss.del(this.form[field]) |
|
Oss.upload(file).then(res => { |
|
this.form[field] = res.url |
|
}) |
|
}, |
|
|
|
|
|
// 简介自定义上传 |
|
async uploadPicSuccess ({ file }) { |
|
Oss.upload(file).then(({ url }) => { |
|
this.pics.push({ |
|
url |
|
}) |
|
}) |
|
}, |
|
handlePicExceed (files, fileList) { |
|
Util.warningMsg(`当前限制选择 3 个文件，如需更换，请删除上一个文件再重新选择！`); |
|
}, |
|
handlePicRemove (file, fileList) { |
|
Oss.del(file.url) |
|
this.pics = fileList |
|
}, |
|
|
|
// 提交 |
|
async submit () { |
|
const { form } = this |
|
if (!form.classificationName) return Util.warningMsg('请输入幼儿园名称') |
|
if (this.submiting) return false |
|
this.submiting = true |
|
|
|
// 简介图片处理 |
|
if (this.pics) { |
|
form.pictureUrl = this.pics.map(e => e.url).join() |
|
} |
|
try { |
|
await this.$post(this.api.updateTeamInfo, form).then(res => { |
|
Util.successMsg('保存成功！'); |
|
this.$router.back() |
|
}) |
|
} catch (e) { |
|
this.submiting = true |
|
} |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page { |
|
position: relative; |
|
padding-bottom: 80px; |
|
.action { |
|
z-index: 1; |
|
position: absolute; |
|
right: 50px; |
|
.status { |
|
margin-right: 10px; |
|
color: #2962ff; |
|
} |
|
} |
|
} |
|
$upload-width: 140px; |
|
$upload-height: 140px; |
|
$upload-lg-height: 150px; |
|
/deep/ .avatar-uploader { |
|
.el-upload { |
|
position: relative; |
|
width: $upload-width; |
|
height: $upload-height; |
|
border: 1px dashed #d9d9d9; |
|
border-radius: 6px; |
|
cursor: pointer; |
|
overflow: hidden; |
|
|
|
&:hover { |
|
border-color: #cb221c; |
|
} |
|
|
|
.uploader-default { |
|
display: flex; |
|
height: $upload-height; |
|
flex-direction: column; |
|
justify-content: center; |
|
text-align: center; |
|
background: rgba(0, 0, 0, 0.04); |
|
|
|
i { |
|
font-size: 20px; |
|
font-weight: bold; |
|
color: #8c939d; |
|
} |
|
|
|
p { |
|
margin-top: 10px; |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.65); |
|
line-height: 1; |
|
} |
|
} |
|
} |
|
|
|
&.avatar-uploader-lg { |
|
.el-upload { |
|
width: 100%; |
|
max-width: 960px; |
|
height: $upload-lg-height; |
|
|
|
.uploader-default { |
|
height: $upload-lg-height; |
|
} |
|
} |
|
} |
|
|
|
.avatar { |
|
display: block; |
|
width: $upload-width; |
|
height: $upload-height; |
|
} |
|
|
|
.avatar-lg { |
|
display: block; |
|
width: 100%; |
|
height: $upload-lg-height; |
|
} |
|
|
|
.el-upload__tip { |
|
margin-top: 0; |
|
|
|
p { |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.45); |
|
line-height: 1; |
|
|
|
&:first-child { |
|
margin-bottom: 5px; |
|
} |
|
} |
|
} |
|
} |
|
</style> |