提示信息添加

src/api/icss.js

@@ -53,7 +53,10 @@ export default {
         return axios.post(urls.modifDeptInfo, param)
     },
     saveOrUpdate(param) {
-        return axios.post(urls.saveOrUpdate, param)
+        return axios.post(urls.saveOrUpdate, param);
+    },
+    savePrompts(param){
+      return axios.post(urls.addPromptInfo, param);
     },
     deleteTagGroup(param) {
         return axios.post(urls.deleteTagGroup, param)

src/components/icss/AddPromptInfo.vue

@@ -12,35 +12,23 @@
                 <el-form-item label="静态知识名称：" prop="name">
                     <el-input v-model="form.name"></el-input>
                 </el-form-item>
+                <InfoParagraph v-for="(f,i) in form.prags"
+                               :data="f"
+                               :index="i"
+                               @change="getPgValues"
+                               @add="addParagraph"
+                               @del="delParagraph" ref="subForm"></InfoParagraph>
                 <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 label="关联标签：" prop="tags">
+                    <el-form-item label="标签归属：">
+                        <el-select placeholder="标签归属" v-model="form.tagFor" clearable>
+                            <el-option v-for="item in Adscriptions" :label="item.name" :value="item.val" :key="item.id" ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <TagPool :pool="tagPool"
+                             :type="form.tagFor"
+                             @changeActionData="changeActionData"></TagPool>
                 </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
@@ -58,92 +46,126 @@
   import api from '@api/icss.js';
   import utils from '@api/utils.js';
   import TagPool from './PromptTagPool';
-  import InfoUeditor from 'vue-ueditor-wrap';
+  import schema from 'async-validator';
+  import InfoParagraph from './InfoParagraph';
+
   export default {
     name: 'AddPromptInfo',
     components: {
       TagPool,
-      InfoUeditor
+      InfoParagraph
     },
     data() {
+      const validateTags = (rule,value,callback)=>{
+        if(this.form.selectedTags.length==0){
+          this.warning('请选择关联标签！');
+          return;
+        }
+        callback();
+      };
       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:[],
+        tagPool:[],                 //标签池数据
+        Adscriptions:[],            //归属列表
         form:{
           name:'',
-          isReason:'0',
-          position:[]
+          selectedTags:[],            //关联标签
+          prags:[{              //单个段落相关
+            title:'',
+            content:'',
+            isReason:'0',
+            orderNo:0,
+            position:[],
+            text:''}]
         },
         rules: {
           name: [
             { required: true, message: '静态知识名称不能为空', trigger: 'change' }
           ],
-          isReason: [
-            { required: true, message: '请选择是否属于诊断', trigger: 'change' }
-          ],
-          position: [
-            { required: true, message: '请选择显示位置', trigger: 'change' }
-          ],
+          tags:[
+            { required: true, validator: validateTags, trigger: 'submit' }
+          ]
         }
       }
     },
     created:function(){
       const {isEdit,data} = this.$route.params;
-      //显示位置枚举列表
-      const pos = localStorage.getItem("icssEnumsData");
-      this.positions = JSON.parse(pos)&&JSON.parse(pos).introducePositionEnum;
+      this.getDropList();           //标签归属列表获取
       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;
-          }
-        });;
+      addParagraph(){
+        this.form.prags.push({title:'',
+          content:'',
+          isReason:'0',
+          orderNo:0,
+          position:[],
+          text:''});
       },
-      changeActionData(){
-
+      delParagraph(i){
+        if(this.form.prags.length==1){
+          this.warning('只剩一个段落，不能再删啦！');
+          return;
+        }
+        this.showConfirmDialog('确定要删除该段落？', () => {
+            this.form.prags.splice(i,1);
+        });
+      },
+      getPgValues(i,data){
+        this.form.prags[i] = data;
+        console.log(data,this.form.prags);
+      },
+      getDropList() {
+        return api.getDropList().then((res) =>{
+          if(res.data.code === '0') {
+            this.Adscriptions = res.data.data[1];
+          }
+        })
       },
-      validatePass() {      //验证成功回调，调取接口
-        //仍需验证标签明细是否选择
-        /*if (this.itemsTypes.includes(+this.dataPub.region2)&&this.options.length==0) {
-          this.$message({
-            message: '至少填一个选项',
-            type: 'warning'
+      submitForm() {
+        //验证外层表单
+        this.$refs.groups.validate((valid) =>{
+          if(!valid){
+            return false;
+          }
+        });
+        //验证段落表单
+        let goOn=true,it=null;console.log(this.$refs.subForm)
+        for(let i=0;i<this.$refs.subForm.length;i++){
+          it=this.$refs.subForm[i];console.log(i)
+          it.$refs.form.validate((valid) =>{
+            if(!valid){
+              goOn = false;
+            }
           });
+        };
+        console.log(goOn,'验证通过')
+        if(!goOn){
           return;
-        }*/
-        const {isEdit,data} = this.$route.params;
-        let param = {
-
+        }
+        //通过必填验证，提交保存
+       const param = {
+          name:this.form.name,
+          detailVOList:Object.assign(this.form.prags),
+          mapVOList:Object.assign(this.form.selectedTags)
         };
-        this.showSaveDialog(param);
+        //console.log(param);
+         this.showSaveDialog(param);
+      },
+      parseTagsForSubmit(data){
+        return data.map((it)=>{
+          return {questionId:it.id,introduceId:'',type:it.type};
+        });
+      },
+      changeActionData(selectedTags){
+        this.form.selectedTags = this.parseTagsForSubmit(selectedTags);
+        console.log(selectedTags)
       },
       showSaveDialog(param) {
-        this.showConfirmDialog('是否保存该标签？', () => {
-          api.saveOrUpdate(param).then((res) => {
+        this.showConfirmDialog('是否保存该静态知识？', () => {
+          api.savePrompts(param).then((res) => {
             if (res.data.code === '0') {
               this.warning(res.data.msg || '保存成功', 'success');
               this.$router.push("/admin/LT-YXSJWH-TSXXWH");

src/components/icss/InfoParagraph.vue

@@ -0,0 +1,103 @@
+<template>
+    <el-form :rules="rules" :model="data" ref="form" class="sub-form">
+            <p class="line"></p>
+            <el-input v-model="data.orderNo" :value="index" type="hidden"></el-input>
+            <el-form-item label="是否属于诊断：" prop="isReason" @change="emitVal">
+                <el-select v-model="data.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" label-width="130px">
+                <el-checkbox-group v-model="data.position" @change="emitVal">
+                    <el-checkbox v-for="it in positions" :key="it.key" :label="it.key">{{it.name}}</el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="标题" prop="title" label-width="130px">
+                <el-input v-model="data.title" @change="emitVal"></el-input>
+            </el-form-item>
+            <el-form-item label="内容" prop="content" label-width="130px">
+                <InfoUeditor v-model="data.content" :config="config"></InfoUeditor>
+            </el-form-item>
+            <el-form-item label-width="130px">
+                <el-button @click="addEmit">添加段落</el-button >
+                <el-button @click="delEmit" type="info">删除本段落</el-button>
+            </el-form-item>
+    </el-form>
+</template>
+
+<script>
+  import InfoUeditor from 'vue-ueditor-wrap';
+  export default{
+    props:['data','index'],
+    name:'InfoParagraph',
+    components:{
+      InfoUeditor
+    },
+    data(){
+        return {
+          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']]      //自定义工具
+          },
+          form:{},
+          positions:[],               //位置列表
+          rules:{
+            isReason: [
+              { required: true, message: '请选择是否属于诊断', trigger: 'change' }
+            ],
+            position: [
+              { required: true, message: '请选择显示位置', trigger: 'change' }
+            ],
+            title: [
+              { required: true, message: '请输入段落标题', trigger: 'change' }
+            ],
+            content: [
+              { required: true, message: '请输入段落内容', trigger: 'change' }
+            ],
+          }
+        }
+    },
+    watch:{
+      'data.content':{          //content改变时传值
+        handler(newVal,oldVal){
+          this.emitVal();
+        }
+      }
+    },
+    created(){
+      //显示位置枚举列表
+      const pos = localStorage.getItem("icssEnumsData");
+      this.positions = JSON.parse(pos)&&JSON.parse(pos).introducePositionEnum;
+      this.form = this.data;
+    },
+    methods:{
+      addEmit(){
+        this.$emit("add");
+      },
+      delEmit(){
+        this.$emit("del",this.index);
+      },
+      emitVal(){
+        const data = Object.assign({},this.data,{position:this.data.position.join(",")});
+        this.$emit("change",this.index,data);
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+   .is-error .el-form-item__error{
+        top:auto;
+    }
+
+</style>

src/components/icss/PromptTagPool.vue

@@ -4,7 +4,7 @@
       <p class="poolTitle">标签池：</p>
       <div class="pool">
         <el-input placeholder="请输入搜索内容"
-                v-model="searchVal">
+                v-model="searchVal" clearable>
           <i slot="prefix"
              class="el-input__icon el-icon-search"
           ></i>
@@ -27,7 +27,7 @@
       <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
     </div>
     <div class="bottomPartRight ">
-      <p class="poolTitle">操作界面：</p>
+      <p class="poolTitle">已选标签：</p>
       <ul class="tagList operationPool">
         <li class = "tagItem operationItem"
             v-for="(item) in rightTagsList"
@@ -56,10 +56,6 @@
         default: '',
         type: String
       },
-      sexType: {
-        default: '',
-        type: String
-      },
     },
     data() {
       return {
@@ -84,25 +80,24 @@
       },
       searchVal(newVal, preVal){
         if(newVal.trim() == ''){
-          this.searchTagList()
-        }else if(newVal.trim() != preVal.trim()){
-          this.searchTagList()
-        }
-      },
-      sexType(newVal, preVal) {
-        if (newVal != preVal) {
-          if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
+          if(this.type==''){    //清空搜索时清空或回到原始
             this.leftTagsList = [];
-            this.selectLeftTagsList = [];
-            this.rightTagsList = [];
-            this.selectRightTagsList = [];
-            this.searchVal = '';
+          }else{
             this.searchTagList();
           }
+        }else if(newVal.trim() != preVal.trim()){
+          this.searchTagList()
         }
       },
-
-
+      type(newVal, preVal) {
+        if(newVal.trim()==''&&this.searchVal.trim()==''){
+          this.leftTagsList = [];
+          return ;
+        }
+        if(this.searchVal.trim()!=''||newVal != preVal){
+          this.searchTagList()
+        }
+      }
     },
     methods: {
       selectLeftTag(tag, index, e) {
@@ -133,8 +128,6 @@
         return false;
       },
       getStyle(item){       //左侧选中状态
-        // console.log('selected',utils.filterArr(this.leftTagsList,item,2))
-        // return utils.filterArr(this.selectLeftTagsList,item,2)
         return this.isHasTag(item, this.selectLeftTagsList)
       },
       getStyle2(item) {
@@ -174,7 +167,7 @@
           "controlType": [],
           "type": this.type || '',
           "notIds": notIds,
-          "sexType": this.sexType,
+          "sexType": 3,
 
         }
         api.searchTagList(param).then((res) => {