<template>
|
<div class="box" style="max-height:calc(100% - 60px);margin-bottom:50px;overflow-y: auto" >
|
<el-form :model="form" ref="form" label-width="140px">
|
<div style="margin: 0px 0 50px 0">
|
<span style="font-size: 15px; font-weight: bold">【1】网站配置：</span>
|
</div>
|
<el-form-item label="公司地址:" prop="address">
|
<el-input
|
style="width: 50%"
|
type="textarea"
|
v-model="form.address"
|
placeholder="请输入公司地址"
|
v-trim
|
/>
|
</el-form-item>
|
<el-form-item label="固定电话:" prop="linkPhone">
|
<el-input
|
style="width: 50%"
|
type="textarea"
|
v-model="form.linkPhone"
|
placeholder="请输入固定电话"
|
v-trim
|
/>
|
</el-form-item>
|
<el-form-item label="联系手机号:" prop="linkMobile">
|
<el-input
|
style="width: 50%"
|
type="textarea"
|
v-model="form.linkMobile"
|
placeholder="请输入固定电话"
|
v-trim
|
/>
|
</el-form-item>
|
<el-form-item label="服务时间:" prop="serverTime">
|
<el-input
|
style="width: 50%"
|
type="textarea"
|
v-model="form.serverTime"
|
placeholder="请输入服务时间"
|
v-trim
|
/>
|
</el-form-item>
|
<el-form-item label="备案号:" prop="footWords">
|
<el-input
|
style="width: 50%"
|
type="textarea"
|
v-model="form.footWords"
|
placeholder="请输入备案号"
|
v-trim
|
/>
|
</el-form-item>
|
<el-form-item label="二维码" prop="faceImgFull">
|
<div class="upload_wrap">
|
|
<UploadAvatarImage :file="{ 'imgurlfull': form.footFullImgUrl, 'imgurl': form.footImgUrl }" :uploadData="uploadData"
|
@uploadSuccess="uploadAvatarSuccess" />
|
</div>
|
</el-form-item>
|
<div style="margin:20px 0 50px 0">
|
<span style="font-size: 15px; font-weight: bold">【2】解决方案：</span>
|
</div>
|
<div v-for="(item,index) in form.solveScheme" :key="'解决方案'+index" style="display: flex;width: 100%">
|
<div style="flex: 1">
|
<el-form-item label="标题:" :required="true">
|
<el-input style="width: 100%"
|
type="text"
|
v-model="item.name"
|
placeholder="请输入标题"
|
v-trim
|
/>
|
</el-form-item>
|
</div>
|
<div style="display: block;flex: 3">
|
<el-form-item label="跳转地址:" style="display:inline-block; width: 80%" >
|
<el-input
|
style="width: 100%"
|
type="text"
|
v-model="item.address"
|
placeholder="请输入跳转地址"
|
v-trim
|
/>
|
</el-form-item>
|
<el-form-item label-width="30px" style="display:inline-block;" >
|
<el-button type="danger" v-if="form.solveScheme && form.solveScheme.length >1" icon="el-icon-delete" @click="del1(index)">删除</el-button>
|
</el-form-item>
|
</div>
|
</div>
|
<el-form-item style="display: block">
|
<el-button type="primary" icon="el-icon-plus" @click="add1">添加解决方案</el-button>
|
</el-form-item>
|
<div style="margin: 100px 0 50px 0">
|
<span style="font-size: 15px; font-weight: bold;">【3】智慧系统：</span>
|
</div>
|
<div v-for="(item1,index) in form.wisdomSystem" :key="'智慧系统'+index" style="display: flex">
|
<div style="flex: 1;">
|
<el-form-item label="标题:" :required="true" >
|
<el-input
|
style="width: 100%"
|
type="text"
|
v-model="item1.name"
|
placeholder="请输入标题"
|
v-trim
|
/>
|
</el-form-item>
|
</div>
|
<div style="display: block;flex: 3">
|
<el-form-item label="跳转地址:" style="display:inline-block; width: 80%">
|
<el-input
|
style="width: 100%"
|
type="text"
|
v-model="item1.address"
|
placeholder="请输入跳转地址"
|
v-trim
|
/>
|
</el-form-item>
|
<el-form-item label-width="30px" style="display:inline-block;">
|
<el-button type="danger" v-if="form.wisdomSystem && form.wisdomSystem.length >1" icon="el-icon-delete" @click="del2(index)">删除</el-button>
|
</el-form-item>
|
</div>
|
<div>
|
</div>
|
</div>
|
<el-form-item style="display: block">
|
<el-button type="primary" icon="el-icon-plus" @click="add2">添加指挥系统</el-button>
|
</el-form-item>
|
<el-form-item style="margin-top: 100px;width: 100%;text-align: center">
|
<el-button type="primary" style="width: 300px" :loading="working" @click="submit">保存配置项</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { getFoodDataVO, updFoodData } from '@/api/business/carousel'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
export default {
|
name: '',
|
components: {UploadAvatarImage },
|
data () {
|
return {
|
uploadData: {
|
folder: ''
|
},
|
isUploading: false,
|
working: false,
|
form: {
|
address: null,
|
footImgUrl: 0,
|
footFullImgUrl: 0,
|
footWords: 0,
|
linkMobile: 0,
|
linkPhone: 0,
|
serverTime: '',
|
solveScheme: [{ name: '', address: '' }],
|
wisdomSystem: [{ name: '', address: '' }]
|
}
|
}
|
},
|
|
created () {
|
this.getData()
|
},
|
|
methods: {
|
del1 (index) {
|
if (this.form.solveScheme.length == 1) {
|
return
|
}
|
this.form.solveScheme.splice(index)
|
},
|
add1 () {
|
this.form.solveScheme.push({ name: '', address: '' })
|
},
|
del2 (index) {
|
if (this.form.wisdomSystem.length == 1) {
|
return
|
}
|
this.form.wisdomSystem.splice(index)
|
},
|
add2 () {
|
this.form.wisdomSystem.push({ name: '', address: '' })
|
},
|
getData () {
|
getFoodDataVO({})
|
.then(res => {
|
if (res) {
|
this.form.address = res.address
|
this.form.footImgUrl = res.footImgUrl
|
this.form.footFullImgUrl = res.footFullImgUrl
|
this.form.footWords = res.footWords
|
this.form.linkMobile = res.linkMobile
|
this.form.linkPhone = res.linkPhone
|
this.form.serverTime = res.serverTime
|
this.form.solveScheme = res.solveScheme || [{ name: '', address: '' }]
|
this.form.wisdomSystem = res.wisdomSystem || [{ name: '', address: '' }]
|
}
|
})
|
},
|
|
// 上传图片
|
uploadAvatarSuccess(file) {
|
this.form.footImgUrl = file.imgurl
|
this.form.footFullImgUrl = file.imgurlfull
|
},
|
submit () {
|
console.log(this.form)
|
this.$refs.form.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
// 调用新建接口
|
this.isWorking = true
|
updFoodData(this.form).then(res => {
|
this.$message.success('保存成功')
|
this.getData()
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.el-container /deep/ .el-main{
|
width: 100%;
|
overflow-y: auto !important ;
|
height: calc(100% - 94px);
|
}
|
/deep/ .el-main{
|
width: 100%;
|
//height: 100%;
|
overflow-y: auto !important ;
|
height: calc(100% - 94px);
|
}
|
.box {
|
width: 100%;
|
padding: 30px;
|
box-sizing: border-box;
|
background: #ffffff;
|
}
|
</style>
|
