learning-system-portal/src/components/Qa/addQuestion.vue

<!--
 * @Author: zhaohg
 * @Date: 2022-03-14 09:54:51
 * @Description:
-->
<template>
<div>
   <el-row class="article-add">
       <el-form ref="askForm" :rules="askFormRules" :model="askForm" label-position="right" label-width="80px">
         <el-dialog :close-on-click-modal='false' title="提问题" label-width="80px" :visible.sync="askQuestionDialog">
           <!-- <el-form ref="askForm" :model="askForm" :rules="askFormRules" label-position="right" > -->
             <el-form-item label="标题:" prop="title">
        <el-input class="title-input"   v-model="askForm.title" show-word-limit placeholder="请输入问题标题,字符长度不能高于50" maxlength="50"></el-input>
      </el-form-item>
        <el-form-item label="封面">
        <imageUpload :value="imageShowUrl" dir="qa" width="410px" height="168px"  @success="handleUploadSuccess" @remove="handleRemoveSuccess"></imageUpload>
        <!-- <el-upload
          :action="uploadFileUrl"
          :show-file-list="false"         
          :headers="headers"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          class="avatar-uploader"
        >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <span class="icon-text">上传图片</span>
        </el-upload> -->
      </el-form-item>
      <el-form-item label="内容:" prop="content">
        <el-input type="textarea" v-model="askForm.content" placeholder="请输入问题内容" :rows="8"></el-input>
      </el-form-item>

    <!-- </el-form> -->
    <el-form-item   >
      <div class="btnbox">
        <div class="check-right">
          <el-checkbox style="margin-left:10px" v-model="askForm.checked"> </el-checkbox><span style="font-size:14px;color:#787878;margin-left:10px">我已阅读并遵守</span><span style="font-size:14px;color:#588afc;margin-right:10px;cursor: pointer;" @click="askFormCheckedShow = true">平台内容发布要求</span>
        </div>
        <div class="button-left">
 <el-button type="primary" @click="addQaData" :disabled="!askForm.checked">发布问题</el-button>
      <el-button @click="askQuestionDialog = false">取 消</el-button>
        </div>

      </div>

    </el-form-item>
     <el-dialog class="checked-show" :visible.sync="askFormCheckedShow" top="14vh"  width="800px" :show-close="false" :modal="false">
        <agreement></agreement>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="askFormCheckedShow = false">取 消</el-button> -->
          <el-button style="margin-right:10px" type="primary" @click="askFormCheckedShow = false">确 定</el-button>
        </span>
      </el-dialog>
  </el-dialog>
    </el-form>
   </el-row>
</div>

</template>

<script>
  import { mapGetters } from 'vuex';
  import apiQa from '@/api/modules/qa.js';
  import imageUpload from '@/components/ImageUpload/artimgUpload.vue';
  import agreement from '@/components/Portal/agreement.vue'
  export default{
    data(){
      return {
        fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
        askFormCheckedShow:false,
        askFormRules: {
          title: [{ required: true, message: '请输入问题标题', trigger: 'blur' }, { max: 100, message: '字符长度不能高于100', trigger: 'blur' }],
          content: [{ required: true, message: '请输入问题内容', trigger: 'blur' }]
        }, //表单验证
        askForm: {}, //发布问答绑定的数据
        imageShowUrl: '', //组件绑定的值,不知道用处
        askQuestionDialog: false, //控制提问题弹窗
      }
    },
    components:{imageUpload,agreement},
    computed: {
    ...mapGetters(['userInfo'])
  },
    methods:{
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleUploadSuccess(file) {
		// console.log(file.result.httpPath,'是否会fig以后关于和',file.result.filePath)
        this.askForm.images=file.result.filePath
        this.imageShowUrl= this.fileBaseUrl + file.result.filePath;
        // console.log(this.fileBaseUrl)
        console.log(file)
      },
      handleRemoveSuccess(file) {
        this.imageShowUrl=''
        this.askForm.images=''
        // console.log(file);//移除页面的触发事件没有
      },
      //发布问答时点击发布时的增加接口
      addQaData() {
        this.$refs.askForm.validate(valid => {
          if (valid) {
            apiQa.save(this.askForm).then(res => {
              if (res.status == 200) {
                if(res.message=='服务处理成功'){
                  this.$message.success("发布问题成功")
                  let event = {
                    key: "PulishQuestion",//后台的事件key  发布文章且审核通过
                    title: '发布问题',//事件的标题
                    parameters:"",//用户自定义参数 name:value,name:value
                    content: "提出了问题",//事件的内容
                    objId: res.result.id,//关联的id
                    objType: "4",//关联的类型
                    objInfo: this.askForm.title,
                    aid: this.userInfo.aid, //当前登录人的id
                    aname: this.userInfo.name,//当前人的姓名
                    status: 1 //状态，直接写1
                  }
                  this.$store.dispatch("userTrigger", event);

                }
                if(res.message.indexOf('审核')!=-1){
                  this.$message.warning("发布失败，因包含敏感词,请等待人工审核")
                }
                this.askForm = {};
                this.imageShowUrl='',
                this.askQuestionDialog = false;
                this.$emit('sure',true,res.result)
              } else {
                this.$message({
                  type:'error',
                  message:res.message
                });
              }
            }).catch(err=>{
              // this.message({
              //   message:'发布问答失败',
              //   type:'error'
              // })
            });
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header{
  padding-top: 40px !important;
}
::v-deep .el-dialog__title{
  font-size: 20px !important;
  color: #333333 !important;
  padding-left: 20px;
  font-weight: 600 !important;
}
::v-deep.el-dialog__footer{
  text-align: left !important;
}
.btnbox{
  display: flex;
  width: 100%;
  .check-right{
    flex: 1;
  }
  .button-left{
    margin-left: auto;
  }
}
::v-deep .el-textarea__inner{
  width: 90% !important;
}
::v-deep .el-input{
    width: 90% !important;
  }
  ::v-deep .el-form-item__label{
  font-size: 18px !important;
  color: #333 !important;
  font-weight: 600 !important;
}
.el-form-item__content{
   display: flex;
  justify-content: flex-start;

  dl {
        margin: 0;
        padding: 10px;
        margin-left: 20px;
        line-height: 1.5;
        dt {
          font-size: 18px;
          font-weight: 600;
        }
        dd {
          margin: 0;
        }
      }
}
::v-deep .checked-show{
  .el-dialog__header{
    padding:0;
  }
}
</style>