|
<template>
<div class="app-container">
<div class="box-container">
<div class="contain-title">修改平台信息</div>
</div>
<div class="content-container">
<div class="main-info">
<el-form :model="formObj" ref="formObj" :rules="rulesObj" label-width="80px" class="update-wrapper demo-ruleForm">
<el-row :gutter="25">
<el-col :span="14">
<el-row :gutter="20" class="update-main">
<el-col :span="24">
<el-form-item label="平台名称">{{formObj.name}}</el-form-item>
</el-col>
<el-col :span="item.span||''" v-for="item in formItem" :key="item.index">
<el-form-item :label="item.tit" :prop="item.prop">
<el-input v-if="item.textarea" type="textarea" :rows="8" v-model="formObj[item.prop]" placeholder="请填写一个平台的简单介绍，让大家更好地了解平台" maxlength="5000"></el-input>
<!-- <cityPicker v-else-if="item.city" @paren="toshow" :addrCode='formObj[item.prop]'></cityPicker> -->
<el-input v-else v-model="formObj[item.prop]" :placeholder="`请填写${item.place||''}${item.tit}`" :maxlength="item.num||''"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item align="center">
<el-button type="primary" @click="submitForm('formObj')">保存</el-button>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="10">
<div class="fileBox" v-on:uploadfun="uploadfun">
<uploadFile :uploadImg=uploadImg></uploadFile>
<p class="teimg">上传封面图片</p>
<p class="tetype">PNG/JPG/JPEG格式，2M以内</p>
</div>
<!-- <div class="update-logo">
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
ref="uploadLogo"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div class="update-tip">PNG/JPG/JPEG格式<br>大小2M以内</div>
</div> -->
</el-col>
<el-col :offset="16">
<el-form-item>
<div style="line-height: 10px;">
<p>最后修改人: {{formObj.modifier}}</p>
<p>最后修改时间: {{formObj.modifyTime}}</p>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</template>
<script>
import {
queryPlat,
updatePlat,
uploadLogo
} from '@/api/platUpdate'
import {
requiredTip,
limitNumTip,
checkEmailV
} from '@/utils/validator'
import { parseTime } from '@/utils'
import queryDict from '@/utils/queryDict'
import queryBase from '@/utils/queryBase'
import cityPicker from '@/components/CityPicker'
import uploadFile from '@/components/uploadFile'
export default {
data() {
return {
uploadImg: {
url: uploadLogo,
width: '280px',
height: '200px',
fun: 'uploadfun'
},
AllCitys: [],
formItem: [
{
span: 24,
prop: 'url',
tit: '平台网址',
required: true
},
{
span: 24,
prop: 'manageOrg',
tit: '管理机构',
required: true
},
{
span: 12,
prop: 'addr',
city: true,
tit: '所在城市',
required: true
},
{
span: 12,
prop: 'zipCode',
tit: '平台邮编',
num: 20
},
{
span: 24,
prop: 'location',
tit: '详细地址',
num: 50,
place: '管理机构'
},
{
span: 12,
prop: 'servicePhone',
tit: '客服电话',
num: 50,
required: true
},
{
span: 12,
prop: 'serviceEmail',
tit: '客服邮箱',
num: 50,
required: true
},
{
span: 24,
prop: 'operateTime',
tit: '工作时间',
num: 50
},
{
span: 12,
prop: 'linkman',
tit: '联系人',
required: true,
place: '平台',
num: 10
},
{
span: 12,
prop: 'job',
tit: '职位',
required: true,
place: '联系人',
num: 20
},
{
span: 24,
prop: 'comp',
tit: '所在机构',
required: true,
place: '联系人',
num: 50
},
{
span: 12,
prop: 'linkphone',
tit: '联系电话',
num: 50,
required: true
},
{
span: 12,
prop: 'linkemail',
tit: '联系邮箱',
num: 50
},
{
span: 24,
prop: 'descp',
tit: '平台简介',
textarea: true,
required: true,
num: 5000
}
],
formObj: {
name: '',
logo: '',
url: '',
manageOrg: '',
addr: '',
location: '',
zipCode: '',
servicePhone: '',
serviceEmail: '',
operateTime: '',
linkman: '',
job: '',
department: '',
comp: '',
linkphone: '',
linkemail: '',
descp: ''
},
rulesObj: {}
}
},
components: {
cityPicker,
uploadFile
},
computed: {
},
created() {
this.getDictoryData()
this.pushRulesFn()
this.queryPlatInfo()
},
methods: {
getDictoryData() {
const that = this
queryDict.applyDict('XZQH', function(dictData) {
dictData.map(item => {
that.AllCitys[item.code] = item.fullCaption
})
}) // 城市级联
},
pushRulesFn() {
const formItem = this.formItem
const rulesObj = this.rulesObj
for (let i = 0; i < formItem.length; ++i) {
const ru = []
if (formItem[i].required) {
ru.push({ required: true, message: requiredTip(formItem[i].tit), trigger: 'blur' })
}
if (formItem[i].num) {
ru.push({ max: formItem[i].num, message: limitNumTip(formItem[i].tit, formItem[i].num), trigger: 'blur, change' })
}
switch (formItem[i].prop) {
case 'linkemail':
ru.push({ validator: checkEmailV, trigger: 'blur' })
break
case 'serviceEmail':
ru.push({ validator: checkEmailV, trigger: 'blur' })
break
}
rulesObj[formItem[i].prop] = ru
}
},
queryPlatInfo() {
var that = this
this.$http.get(queryPlat, {}, function(res) {
if (res.success) {
const obj = res.data
if (obj.modifyTime) {
obj.modifyTime = parseTime(obj.modifyTime)
}
if (obj.modifier) {
queryBase.getAdminUser(obj.modifier, function(sc, value) {
if (sc) {
obj.modifier = value.name
}
})
}
that.formObj = obj
}
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// this.$refs.uploadLogo.submit() // 确认上传图片
// if (this.province) {
// if (!this.city) {
// this.$alert('请您选择所在城市', '提示', {
// confirmButtonText: '确定',
// type: 'warning',
// center: true
// })
// return
// }
// }
const form = this.formObj
this.$http.put(updatePlat, {
name: form.name,
logo: form.logo,
url: form.url,
manageOrg: form.manageOrg,
addr: form.addr,
location: form.location,
zipCode: form.zipCode,
servicePhone: form.servicePhone,
serviceEmail: form.serviceEmail,
operateTime: form.operateTime,
linkman: form.linkman,
job: form.job,
department: form.department,
comp: form.comp,
linkphone: form.linkphone,
linkemail: form.linkemail,
descp: form.descp
}, function(res) {
this.$message({
message: '平台信息修改成功！',
type: 'success'
})
})
} else {
return false
}
})
},
uploadfun(value) {
console.log(value)
},
toshow(value) {
this.formObj.addr = value
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.main-info{
padding: 0 20px;
.update-logo{
width: 280px;
.avatar-uploader{
.el-upload{
/*center-items(280px,187px);*/
border: 1px dashed #d9d9d9;
cursor: pointer;
position: relative;
.el-upload:hover {
border-color: #dadada;
}
.avatar-uploader-icon{
font-size: 40px;
color: #8c939d;
width: 280px;
height: 187px;
line-height: 187px;
text-align: center;
}
}
}
.update-tip{
margin-top:15px;
text-align:center;
font-size:14px;
/*color:$secondaryFont;*/
}
}
.update-main{
.update-title{
font-size:30px;
line-height:54px;
margin-bottom:16px;
padding-left:10px;
}
}
}
</style>
|
