thoth-frontend-test/src/views/monthly/components/createdMonthly.vue

<template>
  <el-dialog :show="show" :title="title" :visible.sync="monthly_show" width="60%" class="public_task" @close="$emit('update:show', false)">
    <div class="blueStripe" />
    <el-form ref="monthly_form" :model="monthly_form" :rules="rules" label-position="left" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="monthly_form.title" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="缩略图" prop="thumb">
        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreview" :on-remove="handleRemove">
          <i class="el-icon-plus" />
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="素材" prop="content">
        <el-upload action="http://star.xiaojukeji.com/upload/img.node" list-type="picture-card" :limit="1" :multiple="false" :on-success="handlePictureCardPreviewTow" :on-remove="handleRemoveTow">
          <i class="el-icon-plus" />
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5MB</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="monthly_show = false">取 消</el-button>
      <el-button type="primary" @click="monthly_dialog">创 建</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    show: { type: Boolean, default: false },
    title: { type: String, required: true }
  },
  data() {
    return {
      monthly_show: this.show,
      monthly_form: {},
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
        thumb: [{ required: true, message: '缩略图不能为空', trigger: 'change' }],
        content: [{ required: true, message: '素材不能为空', trigger: 'change' }]
      }
    }
  },
  watch: {
    show: {
      handler(newV) {
        this.monthly_show = newV
      },
      immediate: true
    }
  },
  methods: {
    monthly_dialog() {
      this.$refs.monthly_form.validate((valid) => {
        if (valid) {
          this.$emit('monthly_created', this.monthly_form)
          this.$emit('update:show', false)
        }
      })
    },
    handleClose(done) {
      this.monthly_show = false
    },
    handleRemoveTow(file, fileList) {
      if (fileList.length === 0) {
        this.kfFormRules.content = [{ required: true, message: '素材不能为空', trigger: 'change' }]
      }
    },
    handlePictureCardPreviewTow(file) {
      this.monthly_form.content = 'http:' + file.url
      this.$refs.monthly_form.clearValidate('content')
    },
    handleRemove(file, fileList) {
      if (fileList.length === 0) {
        this.kfFormRules.thumb = [{ required: true, message: '缩略图不能为空', trigger: 'change' }]
      }
    },
    handlePictureCardPreview(file) {
      this.monthly_form.thumb = 'http:' + file.url
      this.$refs.monthly_form.clearValidate('thumb')
    }
  }
}
</script>

<style lang="scss" scoped>
.public_task {
  /deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 16px;
    color: #303133;
    padding-left: 10px;
}

.blueStripe {
  width:4px;
  height:17px;
  background:#409EFF;
  border-radius:1px;
  position: absolute;
  top: 23px;
  left: 20px;
}
}
</style>