FE_preschoolEdu_server/src/pages/preschool/manage/basic.vue

<template>
  <div class="page">
    <div class="action">
      <el-button v-if="!editing"
                 type="primary"
                 @click="edit">编辑</el-button>
    </div>
    <el-form label-width="170px"
             label-suffix=":"
             class="input-form model"
             size="small"
             :disabled="!editing">
      <el-form-item label="LOGO">
        <el-upload class="avatar-uploader"
                   accept=".jpg,.png,.jpeg,.gif"
                   :limit="1"
                   :on-exceed="handleExceed"
                   :before-remove="beforeRemove"
                   :on-remove="e => handleRemove('logoUrl')"
                   :on-error="uploadError"
                   action=""
                   :http-request="e => handleRequest(e, 'logoUrl')">
          <img v-if="form.logoUrl"
               :src="form.logoUrl"
               class="avatar">
          <div class="uploader-default"
               v-else>
            <i class="el-icon-plus"></i>
            <p>上传LOGO</p>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="幼儿园名称">
        <div class="d-inline-block">
          <el-input v-model="form.classificationName" />
        </div>
      </el-form-item>
      <el-form-item label="幼儿园slogan">
        <el-input type="textarea"
                  rows="4"
                  v-model="form.slogan" />
      </el-form-item>
      <el-form-item label="省份">
        <el-select v-model="form.province"
                   clearable
                   placeholder="请选择省份"
                   @change="getCity"
                   @clear="clearprovince">
          <el-option v-for="(item, i) in provinceList"
                     :key="i"
                     :value="item.provinceName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市">
        <el-select v-model="form.city"
                   clearable
                   placeholder="请选择城市"
                   :disabled="form.province ? false : true">
          <el-option v-for="(item, i) in cityList"
                     :key="i"
                     :value="item.cityName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址">
        <el-input type="textarea"
                  rows="4"
                  v-model="form.address" />
      </el-form-item>
      <el-form-item label="幼儿园简介">
        <el-input type="textarea"
                  rows="4"
                  v-model="form.briefIntroduction" />
        <el-upload class="m-t-10"
                   action="#"
                   list-type="picture-card"
                   :on-remove="handlePicRemove"
                   :limit="3"
                   :file-list="pics"
                   :on-exceed="handlePicExceed"
                   :http-request="uploadPicSuccess">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="二维码一">
        <el-input v-model="form.qrCodeOneName"
                  placeholder="请输入二维码描述" />

        <el-upload class="avatar-uploader m-t-10"
                   accept=".jpg,.png,.jpeg,.gif"
                   :limit="1"
                   :on-exceed="handleExceed"
                   :before-remove="beforeRemove"
                   :on-remove="e => handleRemove('qrCodeOneUrl')"
                   :on-error="uploadError"
                   action=""
                   :http-request="e => handleRequest(e, 'qrCodeOneUrl')">
          <img v-if="form.qrCodeOneUrl"
               :src="form.qrCodeOneUrl"
               class="avatar">
          <div class="uploader-default"
               v-else>
            <i class="el-icon-plus"></i>
            <p>上传第一张二维码</p>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="二维码二">
        <el-input v-model="form.qrCodeTwoName"
                  placeholder="请输入二维码描述" />
        <el-upload class="avatar-uploader m-t-10"
                   accept=".jpg,.png,.jpeg,.gif"
                   :limit="1"
                   :on-exceed="handleExceed"
                   :before-remove="beforeRemove"
                   :on-remove="e => handleRemove('qrCodeTwoUrl')"
                   :on-error="uploadError"
                   action=""
                   :http-request="e => handleRequest(e, 'qrCodeTwoUrl')">
          <img v-if="form.qrCodeTwoUrl"
               :src="form.qrCodeTwoUrl"
               class="avatar">
          <div class="uploader-default"
               v-else>
            <i class="el-icon-plus"></i>
            <p>上传第二张二维码</p>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="二维码三">
        <el-input v-model="form.qrCodeThreeName"
                  placeholder="请输入二维码描述" />

        <el-upload class="avatar-uploader m-t-10"
                   accept=".jpg,.png,.jpeg,.gif"
                   :limit="1"
                   :on-exceed="handleExceed"
                   :before-remove="beforeRemove"
                   :on-remove="e => handleRemove('qrCodeThreeUrl')"
                   :on-error="uploadError"
                   action=""
                   :http-request="e => handleRequest(e, 'qrCodeThreeUrl')">
          <img v-if="form.qrCodeThreeUrl"
               :src="form.qrCodeThreeUrl"
               class="avatar">
          <div class="uploader-default"
               v-else>
            <i class="el-icon-plus"></i>
            <p>上传第三张二维码</p>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>

    <div class="btns">
      <el-button v-if="editing"
                 type="primary"
                 @click="submit">保存</el-button>
      <el-button @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import Util from "@/libs/util";
import Setting from "@/setting";
import Upload from '@/components/upload';
import Oss from '@/components/upload/upload.js'
export default {
  data () {
    return {
      id: this.$route.query.id,
      teamId: this.$route.query.teamId,
      form: {
        address: '',
        briefIntroduction: '',
        city: '',
        classificationName: '',
        id: '',
        logoUrl: '',
        pictureUrl: '',
        province: '',
        qrCodeOneName: '',
        qrCodeOneUrl: '',
        qrCodeThreeName: '',
        qrCodeThreeUrl: '',
        qrCodeTwoName: '',
        qrCodeTwoUrl: '',
        slogan: '',
      },
      provinceList: [],
      cityList: [],
      pics: [],
      editing: false,
      submiting: false,
    };
  },
  components: {
    Upload
  },
  watch: {
    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
    form: {
      handler () {
        this.updateTime++
      },
      deep: true
    },
  },
  mounted () {
    this.$store.commit('user/setCrumbs', [
      {
        name: '幼儿园管理',
        route: '/preschool'
      },
      {
        name: '基本信息'
      },
    ])
    this.getProvince()
    this.getData()
  },
  methods: {
    getData () {
      this.$get(`${this.api.queryTeamInfo}?teamId=${this.teamId}`).then(res => {
        const data = res.teamInfo
        Object.assign(this.form, data)

        // 描述图片回显
        if (data.pictureUrl) {
          const urls = data.pictureUrl.split(',')
          this.pics = urls.map(e => {
            return {
              name: e,
              url: e
            }
          })
        }
      }).catch(err => { })
    },

    getProvince () {
      this.$get(this.api.queryProvince).then(res => {
        this.provinceList = res.list
      }).catch(res => { })
    },
    clearprovince () {
      this.form.city = ''
    },
    // 获取城市
    getCity () {
      this.clearprovince()
      this.getCityData()
    },
    getCityData () {
      this.$get(this.api.queryCity, {
        provinceId: this.provinceList.find(e => e.provinceName === this.form.province).provinceId
      }).then(res => {
        this.cityList = res.list
      }).catch(res => { })
    },

    // 编辑
    edit () {
      this.editing = true
    },
    handleExceed (files, fileList) {
      Util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove (field) {
      Oss.del(this.form[field])
      this.form[field] = ''
    },
    uploadError (err, file, fileList) {
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true
      })
    },
    // logo自定义上传
    async handleRequest ({ file }, field) {
      this.form[field] && Oss.del(this.form[field])
      Oss.upload(file).then(res => {
        this.form[field] = res.url
      })
    },


    // 简介自定义上传
    async uploadPicSuccess ({ file }) {
      Oss.upload(file).then(({ url }) => {
        this.pics.push({
          url
        })
      })
    },
    handlePicExceed (files, fileList) {
      Util.warningMsg(`当前限制选择 3 个文件，如需更换，请删除上一个文件再重新选择！`);
    },
    handlePicRemove (file, fileList) {
      Oss.del(file.url)
      this.pics = fileList
    },

    // 提交
    async submit () {
      const { form } = this
      if (!form.classificationName) return Util.warningMsg('请输入幼儿园名称')
      if (this.submiting) return false
      this.submiting = true

      // 简介图片处理
      if (this.pics) {
        form.pictureUrl = this.pics.map(e => e.url).join()
      }
      try {
        await this.$post(this.api.updateTeamInfo, form).then(res => {
          Util.successMsg('保存成功！');
          this.$router.back()
        })
      } catch (e) {
        this.submiting = true
      }
    },
  }
};
</script>

<style scoped lang="scss">
.page {
    position: relative;
    padding-bottom: 80px;
    .action {
        z-index: 1;
        position: absolute;
        right: 50px;
        .status {
            margin-right: 10px;
            color: #2962ff;
        }
    }
}
$upload-width: 140px;
$upload-height: 140px;
$upload-lg-height: 150px;
/deep/ .avatar-uploader {
    .el-upload {
        position: relative;
        width: $upload-width;
        height: $upload-height;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;

        &:hover {
            border-color: #cb221c;
        }

        .uploader-default {
            display: flex;
            height: $upload-height;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            background: rgba(0, 0, 0, 0.04);

            i {
                font-size: 20px;
                font-weight: bold;
                color: #8c939d;
            }

            p {
                margin-top: 10px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
                line-height: 1;
            }
        }
    }

    &.avatar-uploader-lg {
        .el-upload {
            width: 100%;
            max-width: 960px;
            height: $upload-lg-height;

            .uploader-default {
                height: $upload-lg-height;
            }
        }
    }

    .avatar {
        display: block;
        width: $upload-width;
        height: $upload-height;
    }

    .avatar-lg {
        display: block;
        width: 100%;
        height: $upload-lg-height;
    }

    .el-upload__tip {
        margin-top: 0;

        p {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
            line-height: 1;

            &:first-child {
                margin-bottom: 5px;
            }
        }
    }
}
</style>