<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="qyemail"> 
 | 
        <el-input 
 | 
            style="width: 50%" 
 | 
            type="textarea" 
 | 
            v-model="form.qyemail" 
 | 
            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> 
 | 
      <el-form-item label="企业微信" prop="faceImgFull"> 
 | 
        <div class="upload_wrap"> 
 | 
  
 | 
          <UploadAvatarImage :file="{ 'imgurlfull': form.footFullImgUrl2, 'imgurl': form.footImgUrl2 }" :uploadData="uploadData" 
 | 
                         @uploadSuccess="uploadAvatarSuccess2"   /> 
 | 
        </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> 
 | 
      <div style="margin: 100px 0 50px 0"> 
 | 
        <span style="font-size: 15px; font-weight: bold;">【4】荣誉资质:</span> 
 | 
      </div> 
 | 
      <div  v-for="(item1,index) in form.honors" :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.honors && form.honors.length >1"  icon="el-icon-delete" @click="del3(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="add3">添加荣誉资质</el-button> 
 | 
      </el-form-item> 
 | 
      <div style="margin: 100px 0 50px 0"> 
 | 
        <span style="font-size: 15px; font-weight: bold;">【5】友情链接:</span> 
 | 
      </div> 
 | 
      <div  v-for="(item1,index) in form.yqlinks" :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.yqlinks && form.yqlinks.length >1"  icon="el-icon-delete" @click="del4(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="add4">添加友情链接</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, 
 | 
        footImgUrl2: 0, 
 | 
        footFullImgUrl2: 0, 
 | 
        footWords: 0, 
 | 
        linkMobile: 0, 
 | 
        linkPhone: 0, 
 | 
        serverTime: '', 
 | 
        qyemail: '', 
 | 
        solveScheme: [{ name: '', address: '' }], 
 | 
        honors: [{ name: '', address: '' }], 
 | 
        yqlinks: [{ 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: '' }) 
 | 
    }, 
 | 
    del3 (index) { 
 | 
      if (this.form.honors.length == 1) { 
 | 
        return 
 | 
      } 
 | 
      this.form.honors.splice(index) 
 | 
    }, 
 | 
    add3 () { 
 | 
      this.form.honors.push({ name: '', address: '' }) 
 | 
    }, 
 | 
    del4 (index) { 
 | 
      if (this.form.yqlinks.length == 1) { 
 | 
        return 
 | 
      } 
 | 
      this.form.yqlinks.splice(index) 
 | 
    }, 
 | 
    add4 () { 
 | 
      this.form.yqlinks.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.footImgUrl2 = res.footImgUrl2 
 | 
            this.form.footFullImgUrl2 = res.footFullImgUrl2 
 | 
            this.form.footWords = res.footWords 
 | 
            this.form.linkMobile = res.linkMobile 
 | 
            this.form.linkPhone = res.linkPhone 
 | 
            this.form.qyemail = res.qyemail 
 | 
            this.form.serverTime = res.serverTime 
 | 
            this.form.solveScheme = res.solveScheme || [{ name: '', address: '' }] 
 | 
            this.form.wisdomSystem = res.wisdomSystem || [{ name: '', address: '' }] 
 | 
            this.form.honors = res.honors || [{ name: '', address: '' }] 
 | 
            this.form.yqlinks = res.yqlinks || [{ name: '', address: '' }] 
 | 
          } 
 | 
        }) 
 | 
    }, 
 | 
  
 | 
    // 上传图片 
 | 
    uploadAvatarSuccess(file) { 
 | 
      this.form.footImgUrl = file.imgurl 
 | 
      this.form.footFullImgUrl = file.imgurlfull 
 | 
    }, 
 | 
    uploadAvatarSuccess2(file) { 
 | 
      this.form.footImgUrl2 = file.imgurl 
 | 
      this.form.footFullImgUrl2 = 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> 
 |