platform/src/components/form-views/UpdateInfo.vue

<template>
  <div class="updateInfo">
    <div class="content-wrapper block-wrapper">
      <el-form :model="ruleFormUpdate" :rules="rules" ref="ruleFormUpdate" label-width="80px" class="update-wrapper demo-ruleForm">
        <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>
        <div class="update-main">
          <div class="update-title">{{plf_name}}</div>
          <el-form-item label="联系人" prop="linkman">
            <el-input v-model="ruleFormUpdate.linkman" class="shortW" placeholder="请填写平台联系人姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="tel">
            <el-input v-model="ruleFormUpdate.tel" placeholder="请填写联系电话"></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱" prop="mail">
            <el-input v-model="ruleFormUpdate.mail" placeholder="请填写联系邮箱"></el-input>
          </el-form-item>
          <CityPick
            :labelW="80"
            :widthselect="200"
            :prov="province"
            :city="city"
            v-on:selectProv="getSelectProv($event)"
            v-on:selectCity="getSelectCity($event)">
          </CityPick>
          <!-- <el-form-item label="所在城市" prop="selectedOptions">
            <el-cascader
              :options="optionsCity"
              v-model="selectedOptions"
              class="shortW"
              placeholder="请选择所在的城市">
            </el-cascader>
          </el-form-item> -->
          <el-form-item label="联系地址" prop="address">
            <el-input v-model="ruleFormUpdate.address" placeholder="如：北京市海淀区学院路方兴大厦"></el-input>
          </el-form-item>
          <el-form-item label="官方网址" prop="website">
            <el-input v-model="ruleFormUpdate.website" placeholder="如：www.ekexiu.com"></el-input>
          </el-form-item>
          <dynamicTags :tagInfo="tagInfo" :dyStr="ruleFormUpdate.industry" v-on:turnTags="turnTags($event)" :dynamicTagsLength="10"></dynamicTags>
          <el-form-item label="平台介绍" prop="desc">
            <el-input type="textarea" :rows="8" v-model="ruleFormUpdate.desc" placeholder="请填写一个简单的介绍，让大家更好地了解平台"></el-input>
          </el-form-item>
          <el-form-item></el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleFormUpdate')">保存</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  // import Vue from 'vue';
  // import {
  //   provinceAndCityData,
  //   CodeToText,
  //   TextToCode
  // } from 'element-china-area-data';

  import Cookies from 'js-cookie';
  import util from '@/libs/util';
  import httpUrl from '@/libs/http';

  import dynamicTags from '../sub-component/DynamicTags';

  export default {
    inject: ['reload'],
    props: {
      plat: {
        type: Object
      }
    },
    data() {
      return {
        tagInfo: {
          lableTit: '面向行业',
          placeholder: '请填写园区面向的行业，如：互联网/智能制造/新材料'
        },
        plf_user: '',
        plf_name: '',
        imageUrl: '', // 临时地址
        imgName: '', // 图片的name
        uploadUrl: httpUrl.hQuery.baseInfo.upload,
        // optionsCity: provinceAndCityData,
        // selectedOptions: [],
        dynamicTags: [],
        isShowAdd: true,
        inputVisible: false,
        inputValue: '',
        province: '',
        city: '',
        ruleFormUpdate: {
          linkman: '',
          tel: '',
          mail: '',
          address: '',
          website: '',
          industry: '',
          desc: ''
        },
        rules: {
          linkman: [
            { required: true, message: '请填写平台联系人姓名', trigger: 'blur' },
            { max: 10, message: '不得超过10个字', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请填写联系电话', trigger: 'blur' },
            { max: 50, message: '不得超过50个字', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '请填写联系邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
            { max: 50, message: '不得超过50个字', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写平台介绍', trigger: 'blur' },
            { max: 1000, message: '不得超过1000个字', trigger: 'blur' }
          ],
          address: [
            { max: 50, message: '不得超过50个字', trigger: 'blur' }
          ],
          website: [
            { max: 50, message: '不得超过50个字', trigger: 'blur' }
          ]
        }
      };
    },
    computed: {
    },
    created() {
      this.plf_user = Cookies.get('plf_user');
      this.getPlatInfo(this.plf_user);
    },
    methods: {
      turnTags(msg) {
        this.ruleFormUpdate.industry = msg;
      },
      getSelectProv(prov) {
        this.province = prov;
      },
      getSelectCity(city) {
        this.city = city;
      },
      getPlatInfo(id) {
        this.$axios.get(httpUrl.hQuery.baseInfo.query, {
          params: {
            id: id
          }
        }).then((res) => {
          console.log(res);
          let str = res.data;
          this.plf_name = str.name;
          this.imageUrl = str.logo ? util.ImageUrl('platform' + str.logo) : util.defaultSet.img.plat;
          this.imgName = str.logo;
          this.ruleFormUpdate.linkman = str.linkman;
          this.ruleFormUpdate.tel = str.linkphone;
          this.ruleFormUpdate.mail = str.linkemail;
          if (str.province) {
            this.province = str.province;
          }
          if (str.city) {
            this.city = str.city;
          }
          this.ruleFormUpdate.address = str.addr;
          this.ruleFormUpdate.website = str.url;
          if (str.industry) {
            this.ruleFormUpdate.industry = str.industry;
            this.dynamicTags = str.industry.split(',');
            if (this.dynamicTags.length === 10) {
              this.isShowAdd = false;
            }
          }
          this.ruleFormUpdate.desc = str.descp;
        });
      },
      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;
              }
            }
            let paramsData = {
              'id': this.plf_user,
              'name': this.plf_name,
              'linkman': this.ruleFormUpdate.linkman,
              'logo': this.imgName,
              'linkphone': this.ruleFormUpdate.tel,
              'linkemail': this.ruleFormUpdate.mail,
              'province': this.province,
              'city': this.city,
              'addr': this.ruleFormUpdate.address,
              'url': this.ruleFormUpdate.website,
              'industry': this.ruleFormUpdate.industry,
              'descp': this.ruleFormUpdate.desc
            };
            this.$axios.post(httpUrl.hQuery.baseInfo.update, paramsData).then((res) => {
              this.$message({
                message: '平台信息修改成功！',
                type: 'success'
              });
              Cookies.set('plf_logo', this.imgName);
              this.$router.push({path: '/WorkHome'});
              this.reload();
            }).catch(error => {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$router.push({path: '/WorkHome'});
      },
      // upload img
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.imgName = res.data[0].uri;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('请上传PNG/JPG/JPEG格式的图片');
        }
        if (!isLt2M) {
          this.$message.error('上传logo大小不能超过 2MB!');
        }
        return (!isJPG || !isPNG) && isLt2M;
      },
      // upload img
      // add tag
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        this.ruleFormUpdate.industry = this.dynamicTags.join(',');
        if (this.dynamicTags.length < 10) {
          this.isShowAdd = true;
        }
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue.length > 15) {
          this.$message.error('面向行业不得超过15个字,添加失败！');
        }
        if (this.dynamicTags.length === 10) {
          this.isShowAdd = false;
        }
        if (inputValue && inputValue.length < 15 && this.dynamicTags.length < 10) {
          this.dynamicTags.push(inputValue);
        }
        this.ruleFormUpdate.industry = this.dynamicTags.join(',');
        this.inputVisible = false;
        this.inputValue = '';
      }
      // add tag
    },
    components: {
      dynamicTags
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
.updateInfo
  .update-wrapper
    display:flex
    .update-logo
      width:280px
      .avatar-uploader
        .el-upload
          center-items(280px,187px)
          border: 1px dashed #d9d9d9
          cursor: pointer
          position: relative
          &:hover
            border-color: $mainColor
          .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
      flex:1 0 280px
      padding-left:25px
      .update-title
        font-size:30px
        line-height:54px
        margin-bottom:16px
        padding-left:10px

      .el-tag + .el-tag
        margin-left: 10px
      .button-new-tag
        height: 32px
        line-height: 30px
        padding-top: 0
        padding-bottom: 0
      .input-new-tag
        width: 90px
        margin-left: 10px
        vertical-align: bottom
    .shortW
      width:300px
</style>