GCLS_Page_BMS/src/views/org_manager/UpdateOrg.vue

<template>
  <el-dialog :visible="visible" width="700px" title="修改机构" :before-close="close" :close-on-click-modal="false">
    <main class="update-org">
      <div class="update-org-info">
        <el-form ref="form" :model="orgInfo" :rules="rules" :hide-required-asterisk="true" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="orgInfo.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学员限额">
            <el-input
              v-model="orgInfo.max_count_student"
              @input="orgInfo.max_count_student = orgInfo.max_count_student.replace(/[^\d]/g, '')"
            />
          </el-form-item>
          <el-form-item label="教师限额">
            <el-input
              v-model="orgInfo.max_count_teacher"
              @input="orgInfo.max_count_teacher = orgInfo.max_count_teacher.replace(/[^\d]/g, '')"
            />
          </el-form-item>
          <el-form-item label="到期日期">
            <el-date-picker
              v-model="orgInfo.due_date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input v-model="orgInfo.intro" type="textarea" :rows="3" resize="none" autocomplete="off" />
          </el-form-item>
        </el-form>
      </div>

      <div class="update-org-image">
        <el-upload
          action="no"
          class="avatar-uploader"
          :http-request="upload"
          :before-upload="beforeUpload"
          :show-file-list="false"
          accept="image/*"
        >
          <img v-if="orgInfo.picture_url" :src="orgInfo.picture_url" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </div>
    </main>

    <footer slot="footer">
      <el-button type="primary" @click="updateOrg">确定</el-button>
      <el-button @click="close">关闭</el-button>
    </footer>
  </el-dialog>
</template>

<script>
import { GetOrgInfo, UpdateOrg } from '@/api/org';
import { fileUpload } from '@/api/app';

export default {
  props: {
    orgId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      visible: false,
      orgInfo: {
        name: '',
        intro: '',
        picture_url: '',
        picture_id: '',
        max_count_student: 0,
        max_count_teacher: 0,
        due_date: ''
      },
      rules: {
        name: [{ required: true, message: '名称不能为空' }]
      }
    };
  },
  watch: {
    visible(newValue) {
      if (newValue) {
        GetOrgInfo({ id: this.orgId }).then(res => {
          this.orgInfo = res;
        });
      } else {
        this.orgInfo = {};
      }
    }
  },
  methods: {
    updateOrg() {
      this.$refs.form.validate(valid => {
        if (!valid) return false;

        const { name, intro, picture_id, max_count_student, max_count_teacher, due_date } = this.orgInfo;
        UpdateOrg({ id: this.orgId, name, intro, picture_id, max_count_student, max_count_teacher, due_date }).then(
          () => {
            this.$message.success('修改机构成功');
            this.visible = false;
            this.$emit('refresh');
          }
        );
      });
    },

    beforeUpload(file) {
      let isImage = /^image/.test(file.type);
      if (!isImage) {
        this.$message.error('上传的文件不是图片，请重新上传！');
      }
      return isImage;
    },
    upload(file) {
      fileUpload('Open', file).then(({ file_info_list }) => {
        if (file_info_list.length > 0) {
          const { file_url, file_id } = file_info_list[0];
          this.orgInfo.picture_url = file_url;
          this.orgInfo.picture_id = file_id;
        }
      });
    },

    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  }
};
</script>

<style lang="scss">
$avatar-w: 198px;

.update-org {
  display: flex;

  &-info {
    flex: 7;
    margin-right: 12px;
  }

  &-image {
    flex: 3;

    .avatar-uploader {
      display: inline-block;

      .el-upload {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;

        &:hover {
          border-color: #409eff;
        }
      }

      &-icon {
        width: $avatar-w;
        height: $avatar-w;
        font-size: 28px;
        line-height: $avatar-w;
        color: #8c939d;
        text-align: center;
      }

      .avatar {
        display: block;
        width: $avatar-w;
        height: $avatar-w;
      }
    }
  }
}
</style>