platformFront/src/components/icss/AddPromptInfo.vue

<template>
    <div class="NoiseTemplateWrapper TemplateWrapper">
        <div class="groupTitle"><i
                class="el-icon-back"
                @click="back"
        ></i> 提示信息维护--添加</div>
        <div class="info-container">
            <el-form :rules="rules"
                     :model="form"
                     label-width="130px"
                     ref="groups">
                <el-form-item label="静态知识名称：" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <p class="line"></p>
                <el-form-item label="是否属于诊断：" prop="isReason">
                    <el-select v-model="form.isReason" placeholder="请选择">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示位置：" prop="position">
                    <el-checkbox-group v-model="form.position">
                        <el-checkbox v-for="it in positions" :key="it.key" :label="it.name" :value="it.key" name="position"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="添加段落：" prop="addPrg">
                    <div class="add-prg">
                        <el-form-item label="标题" prop="title" label-width="80px">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                        <el-form-item label="内容" prop="desc" label-width="80px">
                            <InfoUeditor v-model="msg" :config="config"></InfoUeditor>
                        </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button>添加段落</el-button >
                </el-form-item>
                <p class="line"></p>
                <TagPool :pool="tagPool"
                         :sexType="sexType"
                         @changeActionData="changeActionData"></TagPool>
                </el-form>
                <div class="btn">
                    <el-button
                            type="primary"
                            @click="submitForm"
                    >确 定</el-button>
                </div>
            </div>
        </div>
</template>
<script>
  /**
   *
   */
  import api from '@api/icss.js';
  import utils from '@api/utils.js';
  import TagPool from './PromptTagPool';
  import InfoUeditor from 'vue-ueditor-wrap';
  export default {
    name: 'AddPromptInfo',
    components: {
      TagPool,
      InfoUeditor
    },
    data() {
      return {
        msg:'',
        config:{
          initialFrameWidth: null,
          initialFrameHeight: 350,
          imageUrlPrefix:"http://192.168.2.236:82",
          serverUrl: '/api/icssman/file/uploadImage',
          UEDITOR_HOME_URL: '/UEditor/',        //静态文件路径
          toolbars:[['source','undo','redo','bold','italic','underline','fontborder','strikethrough','superscript','subscript','removeformat','formatmatch','autotypeset','blockquote',
            'pasteplain','forecolor','backcolor','insertorderedlist','insertunorderedlist','selectall',
            'cleardoc','rowspacingtop','rowspacingbottom','lineheight','customstyle','paragraph',
            'fontfamily','fontsize','directionalityltr','directionalityrtl','indent','justifyleft',
            'justifycenter','justifyright','justifyjustify','touppercase','tolowercase','link','simpleupload','insertimage','horizontal',
            'date','time','spechars','fullscreen']]      //自定义工具
        },
        tagPool:[],
        sexType:'1',
        positions:[],
        form:{
          name:'',
          isReason:'0',
          position:[]
        },
        rules: {
          name: [
            { required: true, message: '静态知识名称不能为空', trigger: 'change' }
          ],
          isReason: [
            { required: true, message: '请选择是否属于诊断', trigger: 'change' }
          ],
          position: [
            { required: true, message: '请选择显示位置', trigger: 'change' }
          ],
        }
      }
    },
    created:function(){
      const {isEdit,data} = this.$route.params;
      //显示位置枚举列表
      const pos = localStorage.getItem("icssEnumsData");
      this.positions = JSON.parse(pos)&&JSON.parse(pos).introducePositionEnum;
      if(isEdit){
        this.editData = data;
      }
    },
    methods: {
      back() { this.$router.go(-1) },
      submitForm() {      // 调用子组件的方法验证公用部分
        this.$refs.groups.validate((valid) => {
          if (valid) {
            //this.$emit('validatePass', this.form, false)
          } else {
            console.log('error submit!!');
            return false;
          }
        });;
      },
      changeActionData(){

      },
      validatePass() {      //验证成功回调，调取接口
        //仍需验证标签明细是否选择
        /*if (this.itemsTypes.includes(+this.dataPub.region2)&&this.options.length==0) {
          this.$message({
            message: '至少填一个选项',
            type: 'warning'
          });
          return;
        }*/
        const {isEdit,data} = this.$route.params;
        let param = {

        };
        this.showSaveDialog(param);
      },
      showSaveDialog(param) {
        this.showConfirmDialog('是否保存该标签？', () => {
          api.saveOrUpdate(param).then((res) => {
            if (res.data.code === '0') {
              this.warning(res.data.msg || '保存成功', 'success');
              this.$router.push("/admin/LT-YXSJWH-TSXXWH");
            } else {
              this.warning(res.data.msg)
            }
          }).catch((err) => {
            this.warning(err);
          })
        });
      },
      showConfirmDialog(msg, resolve) {
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {});
      },
      warning(msg, type) {
        this.$message({
          showClose: true,
          message: msg,
          type: type || 'warning'
        })
      },
    }
  }
</script>
<style lang="less">
    @import "../../less/common.less";
    .info-container{
        background: #fff;
        padding: 20px;
        margin: 20px 20px -20px 20px;
        .el-input__inner{
            width: 200px;
        }
        .el-form-item__label{
            text-align: left;
        }
        .add-prg .el-form-item{
            margin-bottom: 20px;
        }
    }
    .line{
        border-top:1px #dcdfe6 solid;
        margin-bottom: 25px;
    }
</style>