iview1.0结合vue1.0 js拼接JSON串、拼接复杂字符串、标签重复添加

最新推荐文章于 2023-05-28 10:38:34 发布
kingrome2009
最新推荐文章于 2023-05-28 10:38:34 发布
阅读量545
点赞数
分类专栏： vuejs2.0
本文链接：https://blog.csdn.net/kingrome2017/article/details/102756385
版权
vuejs2.0 专栏收录该内容
27 篇文章 0 订阅
订阅专栏
在这里插入图片描述
<template>
    <div>
      <div class="form-wrapper" style="position:relative;height:100%" @click="initStatusEvent">
        <p class="head-wrapper">
            <span class="title-wrapper">{{tagLabel}}<a class="tittle-hint">( 重要提示:选多个标签时，只能一个一个的勾选！)</a></span>
        </p>
        <!-- 默认 展示项 -->
        <div class="tagBox" @click.stop="tagBoxClick(e)">
          <div class="ivu-tag" v-for="item in tagListSelected" :key="item[0].id" style="margin: 2px 4px 5px 0;">
              <span class="ivu-tag-text">{{item[0].name}}</span>
              <i v-show="isShowDelIcon" class="ivu-icon ivu-icon-ios-close-empty" @click.stop="tagDelClick('',item[0].id)"></i>
          </div>
          <Icon v-if="isShowCascader" type="ios-arrow-up" class="arrowUp"></Icon>
          <Icon v-else type="ios-arrow-down" class="arrowUp"></Icon>
        </div>
        <div v-show="isShowCascader" class="dropDownBox" style="min-width:90%">
          <pcheck-tree :data="tagList" @click.stop="getItemObjInfo('')" @change="changeTag"></pcheck-tree> 
        </div>
        <div style="width:90%">
          <div class="splitLine"></div>
        </div>
        <!-- 遍历 新增项 -->
        <div v-for="(index,itemObj) in conditions" :key='itemObj' style="position:relative">
          <div style="width:90%">
            <div class="TagIfBox">
              <div v-for="(indexs,item) in itemObj.tagifArr" :class="{'active':indexs==itemObj.indexs}" @click.stop="linkClick(indexs,item.value,itemObj)" :key="indexs">{{item.name}}</div>
            </div>
          </div>
          <div style="width:90%">
            <div class="splitLine"></div>
          </div>
          <div class="tagBox" @click.stop="tagBoxClick(e,itemObj)">
            <div class="ivu-tag" v-for="items in itemObj.tagDataList" :key="items[0].id" style="margin: 2px 4px 5px 0;">
                <span class="ivu-tag-text">{{items[0].name}}</span>
                <i class="ivu-icon ivu-icon-ios-close-empty" @click.stop="tagDelClick(index, items[0].id)"></i>
            </div>
            <Icon v-if="itemObj.isShowCascader" type="ios-arrow-up" class="arrowUp"></Icon>
            <Icon v-else type="ios-arrow-down" class="arrowUp"></Icon>
          </div>
          <div v-if="itemObj.isShowCascader" class="dropDownBox">
            <pcheck-tree ref="tagTree" :key="index" :data="itemObj.tagListS" @click.stop="getItemObjInfo(index)" @change="changeTag" ></pcheck-tree> 
          </div>
          <div style="width:90%">
            <div class="splitLine"></div>
          </div>
          <Icon type="android-close" class="closeCircled" @click.stop="modalDels(index)">
        </div>
        <!-- 新增按钮 -->
        <div class="addBox">
          <i-button type="primary" @click.stop="addBtn" shape="circle" icon="plus-round"></i-button>
        </div>
        <Spin v-show="isLoading">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
        </Spin>
      </div>
      <!-- <div class="form-wrapper">
         <p class="head-wrapper">
            <span class="title-wrapper">{{expression}}111</span>
        </p>
            <Radio-group :model="selectedId" >
                <Radio :value="item.id"   v-for="item in tagExpressionList" @change="upadateExpressionForm({id:item.id,name:item.name})">{{item.name}}</Radio>
            </Radio-group>
      </div> -->
    </div>
</template>

<script>
import {
        getTagFormData,
        updateTagFormSelected,
        upadateExpressionForm,
        resultFillterString,
        setResultDataInfos,
    } from '../../../vuex/actions';
import TdPcheckTree from '../../../lib/checktree/pcheckTree.vue';
export default {
    data() {
      return {
        isLoading:false,
        isShowCascader: false,
        tagListSelected: [],
        resultIndex: -1,
        parentString: '',
        conditions: [],
        allString: '',
        childString: '',
        activeFillter: '',
        tagDefinition: {},
        parentArr: [],
        activeItem: {},
        LinkObj: [],
        resultFilter: '',
        isShowDelIcon: true,
        resultFillterStrings: '',
      }
    },
    created(){
        // if(!this.tagList.children){
            this.getTagFormData();
        // }
    },
    ready(){     
      if (this.backTagdefinition.tagDefinition) {
        // console.log(this.backTagdefinition);
        this.conditions = this.backTagdefinition.tagDefinition.backInfoChild;
        this.tagListSelected = this.backTagdefinition.tagDefinition.backInfoParent;
        // console.log(this.tagListSelected);
        // console.log(this.conditions);
        this.resultRelationship();
        this.submitBtn();
      }
    },
    methods: {
      // bodyClickEvent() {
      
      // },
      format (labels, selectedData) {
        const index = labels.length - 1;
        const data = selectedData[index] || false;
        if (data) {
          return labels[index];
        }
        return labels[index];
      },
      changeCascader(value, selectedData) {
        // console.log(value);
        const aggArr = this.optionList;
        aggArr.push(selectedData[selectedData.length - 1])
        this.optionList = aggArr;
        if (aggArr.length > 0) {
          this.isShowCascader = false;
          this.optionList.forEach(element => {
              this.tagValue.push(element.value);
          });
          // console.log(this.optionList);
        }
      },
      initStatusEvent() {
        this.isShowCascader = false;
        this.conditions.forEach((item) =>{
          item.isShowCascader = false;
        })
      },
      tagBoxClick(e,itemObj) {
        if (!itemObj) {
          this.isShowCascader = !this.isShowCascader;
          this.conditions.forEach((item) =>{
            item.isShowCascader = false;
          })
        } else {
          this.isShowCascader = false;
          if (this.backTagdefinition.tagDefinition && !itemObj.tagListS.name) {
            itemObj.tagListS = JSON.parse(JSON.stringify(this.tagList));
            // console.log(itemObj);
          }
          if (itemObj.isShowCascader) {
            itemObj.isShowCascader = false
          } else {
            itemObj.isShowCascader = true
          }
        }
      },
      linkClick(index,value,itemObj) {
        itemObj.indexs = index;
        // itemObj.relation = value;
        if (itemObj.indexs === 0) {
          itemObj.relation = 'and'
        } else if (itemObj.indexs === 1) {
          itemObj.relation = 'or'
        } else{
          itemObj.relation = 'andNot'
        }
        this.resultRelationship();
        this.submitBtn();
      },
      modalDels(index) {
        this.conditions.forEach((item,indx) => {
          if (index === indx) {
            this.conditions.splice(indx, 1);
          }
        })
        this.resultRelationship();
        this.submitBtn();
      },
      // 删除事件
      tagDelClick(indx, ids) {
        // console.log(indx, ids);
        let strings = '';
        if (indx!== '') {
          this.conditions.forEach((item,index) => {
            if (index === indx) {
              item.tagDataList.forEach((it,indexs) => {
                if(it[0].id === ids) {
                  item.tagDataList.splice(indexs, 1);
                  this.fibs(item.tagListS, ids);
                  item.tagDataList.forEach((key) => {
                    strings += `${key[0].name}or`;
                  })
                  item.termString = `(${strings.substring(0, strings.length - 2)})`
                }
              })
            }
          })
          this.resultRelationship();
          this.submitBtn();
        } else {
          let inspectName = '';
          // console.log(this.tagListSelected);
          if (this.tagListSelected.length > 1) {
            this.isShowDelIcon = true;
            this.tagListSelected.forEach((item,index) => {
              if (item[0].id === ids) {
                this.tagListSelected.splice(index, 1);
                this.fibs(this.tagList, ids);
                if (this.tagListSelected.length <2) {
                  this.isShowDelIcon = false;
                }
              } else {
                inspectName += `${item[0].name}or`;
              }
            })
            this.resultRelationship();
            this.submitBtn();
            this.parentString = `(${inspectName.substring(0, inspectName.length - 2)})`
          }        
        }
      },
      getItemObjInfo(index) {
        if (index!== '') {
          this.resultIndex = index;
        } else {
          this.resultIndex = -1;
        }
      },
      // 最终的筛选关系
      resultRelationship() {
        
        let inspectName = '';
        this.tagListSelected.forEach((item,index) => {
          inspectName += `${item[0].name}or`;
        })
        this.parentString = `(${inspectName.substring(0, inspectName.length - 2)})`;
        // console.log(this.parentString);

        let resultFillterStrings = '';
        // console.log(this.conditions.length);
        if (this.conditions.length <= 0) {
          resultFillterStrings = this.parentString;
        } else {
          this.conditions.forEach((item,index) => {
            if (index === 0) {
              resultFillterStrings = this.parentString+item.relation+item.termString;
            } else {
              resultFillterStrings = `(${resultFillterStrings})${item.relation}${item.termString}`;
            }
          })
        }

        // console.log(resultFillterStrings)
        this.resultFillterStrings = resultFillterStrings;
        // console.log(this.resultFillterStrings);
        this.resultFillterString(resultFillterStrings);
      },
      submitBtn() {
        // console.log(this.conditions);
        // console.log(this.tagListSelected);
        let tagFilter = {};
        let condition = [];
        if (this.conditions.length <= 0) {
          // const arr = [];
          // arr.push({"condition": "condition0"});
          // tagFilter['and'] = arr;
          tagFilter = {"condition": "condition0"};
          const condition0 = {};
          const tagArr = [];
          this.tagListSelected.forEach((item) => {
            tagArr.push(item[0].id);
          });
          condition0['condition'+(0)] = {};
          condition0['condition'+(0)].query = {};
          condition0['condition'+(0)].query.term = {};
          condition0['condition'+(0)].query.term.tag = {};
          condition0['condition'+(0)].query.term.tag.eq = {};
          condition0['condition'+(0)].query.term.tag.eq = tagArr;
          condition.push(condition0);
        }

        this.conditions.forEach((item,index) => {
          if (index === 0) {
            const arr = [];
            arr.push({"condition": "condition0"});
            arr.push({"condition": "condition"+(index+1)});
            tagFilter[item.relation] = arr
            const condition0 = {};
            const conditions = {};
            const tagArr = [];
            this.tagListSelected.forEach((item) => {
              tagArr.push(item[0].id);
            });
            const newtagArr = [];
            item.tagDataList.forEach((item) => {
              newtagArr.push(item[0].id);
            });
            condition0['condition'+(index)] = {};
            condition0['condition'+(index)].query = {};
            condition0['condition'+(index)].query.term = {};
            condition0['condition'+(index)].query.term.tag = {};
            condition0['condition'+(index)].query.term.tag.eq = {};
            condition0['condition'+(index)].query.term.tag.eq = tagArr;

            conditions['condition'+(index+1)] = {};
            conditions['condition'+(index+1)].query = {};
            conditions['condition'+(index+1)].query.term = {};
            conditions['condition'+(index+1)].query.term.tag = {};
            conditions['condition'+(index+1)].query.term.tag.eq = {};
            conditions['condition'+(index+1)].query.term.tag.eq = newtagArr;

            condition.push(condition0);
            condition.push(conditions);
          } else {
            const newObj = {};
            const arr = [];
            arr.push(tagFilter);
            arr.push({"condition": "condition"+(index+1)});
            newObj[item.relation] = arr;
            tagFilter = newObj;
            
            const newtagArr = [];
            item.tagDataList.forEach((item) => {
              newtagArr.push(item[0].id);
            });
            const conditions = {};
            conditions['condition'+(index+1)] = {};
            conditions['condition'+(index+1)].query = {};
            conditions['condition'+(index+1)].query.term = {};
            conditions['condition'+(index+1)].query.term.tag = {};
            conditions['condition'+(index+1)].query.term.tag.eq = {};
            conditions['condition'+(index+1)].query.term.tag.eq = newtagArr;
            condition.push(conditions);
          }
        })
        const tagDefinition = {};  
        
        let obj = {}
        condition.forEach((it)=>{
          for(var key in it){
            obj[key] = it[key];
          }
        })
        tagDefinition.condition = obj;
        tagDefinition.tagFilter = tagFilter;
        tagDefinition.resultFillterStrings = this.resultFillterStrings
        tagDefinition.backInfoChild = this.conditions;
        tagDefinition.backInfoParent = this.tagListSelected;
        // console.log(tagDefinition);
        this.setResultDataInfos(tagDefinition);
      },
      // 添加 标签
      changeTag(data) {
        // console.log(data);
        if (this.resultIndex === -1) {
          this.isShowDelIcon = true;
          const arr = [];
          this.tagListSelected.forEach((item) => {
            arr.push(item[0].name);
          });
          if (arr.indexOf(data[0].name) === -1) {
            this.tagListSelected.push(data);
            this.resultRelationship();
            this.submitBtn();
          } else {
            this.tagListSelected.forEach((it,idx) => {
              if (it[0].id === data[0].id) {
                if (data[0].checked) {

                } else {
                  this.tagListSelected.splice(idx, 1);
                  this.resultRelationship();
                  this.submitBtn();
                }
              }
            })
          }
        } else {
          let inspect = '';
          this.conditions.forEach((item,index) => {
            if (index === this.resultIndex) {
              const arr = [];
              item.tagDataList.forEach((item) => {
                arr.push(item[0].name);
              });
              if (arr.indexOf(data[0].name) === -1) {
                item.tagDataList.push(data);
                let teamId = [];
                item.tagDataList.forEach((key) => {
                  inspect += `${key[0].name}or`;
                  teamId.push(key[0].name);
                })
                item.termString = `(${inspect.substring(0, inspect.length - 2)})`
                let relation = '';
                if (item.indexs === 0) {
                  relation = 'and'
                } else if (item.indexs === 1) {
                  relation = 'or'
                } else{
                  relation = 'andNot'
                }
                // console.log(relation+item.termString);
                this.childString = relation+item.termString;
                // this.parentString
                let resultFilter = '';
                // resultFilter = (this.parentString) + this.childString;
                this.resultFilter = resultFilter;

                const resultFilterIndexOf = resultFilter.lastIndexOf(relation,resultFilter.length-1);
                // 当前的条件加 数据  格式：and(人口属性)
                const activeInfo = resultFilter.substring(resultFilterIndexOf, resultFilter.length);
                // 当前条件的 关系 格式：and
                const activeFillter = activeInfo.slice(0, relation.length);
                this.activeFillter = activeFillter;
                // console.log(resultFilter);

                this.resultRelationship();
                this.submitBtn();
              } else {
                let inspect = '';
                this.conditions.forEach((item,index) => {
                  if (index === this.resultIndex) {
                    item.tagDataList.forEach((its,idx) => {
                      if (its[0].id === data[0].id) {
                        if (data[0].checked) {

                        } else {
                          item.tagDataList.splice(idx, 1);
                          item.tagDataList.forEach((key) => {
                            inspect += `${key[0].name}or`;
                          })
                          item.termString = `(${inspect.substring(0, inspect.length - 2)})`
                          this.resultRelationship();
                          this.submitBtn();
                        }
                      }
                    })
                  }
                })
              }
            }
          })
        }
      },
      fib(item) {
        if (item.children.length) {
          item.children.forEach((todo) => {
            item.checked = false;
            this.fib(todo);
          });
        }
      },
      fibs(item,ids) {
        if(item.id === ids) {
          item.checked = false
        }

        if (item.children.length) {
          item.children.forEach((todo) => {
            if (todo.id === ids) {
              todo.checked = false;
            }
            this.fibs(todo, ids);
          });
        }
      },
      addBtn() {
        // this.isLoading = true;
        let timer;
        if (this.tagListSelected.length < 1) {
          this.$Message.warning('标签不能为空!');
          return false;
        }
        clearTimeout(timer);
        timer = setTimeout(() => {
          if (this.conditions.length > 0) {
            const result = this.conditions.every((items) => {
              return items.tagDataList.length > 0;
            });
            if (result) {
              this.conditions.push({
                tagifArr: [
                  { name: '交'},
                  { name: '并'},
                  { name: '差'},
                ],
                indexs: 0,
                isShowCascader: false,
                tagDataList: [],
                termString: '',
                tagListS: {},
                relation: '',
              });
              let mewTagList = {};
              mewTagList = JSON.parse(JSON.stringify(this.tagList));
              this.fib(mewTagList);
              this.resultRelationship();
              this.submitBtn();
              this.conditions[this.conditions.length-1].id = this.conditions.length-1;
              if (this.conditions[this.conditions.length-1].indexs === 0){
                this.conditions[this.conditions.length-1].relation = 'and'
              }
              this.conditions[this.conditions.length-1].tagListS = mewTagList
              // this.isLoading = false;
              if (this.childString) {
                this.parentString = `(${this.parentString}${this.childString})`
              } else {
                this.parentString = this.parentString
              }
            } else {
              this.$Message.warning('标签不能为空!');
            }
          } else {
            this.conditions.push({
              tagifArr: [
                { name: '交'},
                { name: '并'},
                { name: '差'},
              ],
              indexs: 0,
              isShowCascader: false,
              tagDataList: [],
              termString: '',
              tagListS: {},
              relation: '',
            });
            let mewTagList = {};
            mewTagList = this.tagList
            this.fib(mewTagList);
            this.resultRelationship();
            this.submitBtn();
            this.conditions[this.conditions.length-1].id = this.conditions.length-1;
            if (this.conditions[this.conditions.length-1].indexs === 0){
              this.conditions[this.conditions.length-1].relation = 'and'
            }
            this.conditions[this.conditions.length-1].tagListS = JSON.parse(JSON.stringify(mewTagList));

            if (this.childString) {
              this.parentString = `(${this.parentString}${this.childString})`
            } else {
              this.parentString = this.parentString
            }
          }
          this.isLoading = false;
        }, 10);
      },
    },
    vuex: {
        getters: {
            tagLabel:({tagForm})=>tagForm.tagLabel,
            tagList:({tagForm})=>tagForm.tagList,
            tagData:({tagForm})=>tagForm.tagData,
            expression:({tagForm})=>tagForm.expression,
            tagExpressionList:({tagForm})=>tagForm.tagExpressionList,
            selectedId:({tagForm})=>tagForm.selectedId,
            backTagdefinition:({tagForm})=>tagForm.backTagdefinition,
        },
        actions:{
            getTagFormData,
            updateTagFormSelected,
            upadateExpressionForm,
            setResultDataInfos,
            resultFillterString,
        }
    }
}
</script>

<style scoped>
  .tagBox{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #d7dde4;
    width: 90%;
    min-height: 30px;
    line-height: 30px;
    font-size: 12px;
    overflow: hidden;
    padding-left: 8px;
    padding-right: 24px;
    position: relative;
  }
  .tagBox:hover {
    border-color: #5cadff;
    cursor: pointer;
  }
  .ivu-tag:hover{
    border-color: #5cadff;
  }
  .TagIfBox{
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #d7dde4;
    width: 100px;
    height: 30px;
    margin: 0 auto;
  }
  .TagIfBox div{
    float: left;
    line-height: 30px;
    text-align: center;
    color: #464c5b;
    width:33.33%;
    cursor: pointer;
  }
  .TagIfBox div:hover{
    background: #2D8CF0;
    color: #fff;
  }
  .TagIfBox div.active{
    background: #2D8CF0;
    color: #fff;
  }
  .TagIfBox div:nth-child(2){
    border-left: 1px solid #d7dde4;
    border-right: 1px solid #d7dde4;
  }
  .addBox{
    overflow: hidden;
    text-align: center;
    width:90%;
  }
  .splitLine{
    width:1px;
    height: 30px;
    border-left: 1px dashed #d7dde4;
    margin: 0 auto;
  }
  .dropDownBox{
    min-width: 90%;
    max-height: 200px;
    overflow: auto;
    margin: 0;
    padding: 5px 0;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    position: absolute;
    z-index: 900;
  }
  .arrowUp{
    position: absolute;
    right:10px;
    top: 9px;
  }
  .closeCircled{
    position: absolute;
    padding: 5px;
    right: 12px;
    bottom: 27%;
    cursor: pointer;
  }
  .closeCircled:hover{
    color: #2D8CF0;
  }
  .ivu-spin{
    width: 91%;
    margin-top: 20px;
  }
</style>

<style>
  .ivu-spin-fix .ivu-spin-main{
    margin-left: 85%;
    margin-top: 50%;
  }
</style>