plat-admin/src/views/platInfo/platUpdate.vue

<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>