smartsearch/vue/src/components/basic/query/drag-base.vue

<template>
  <div class="query-area"
       @dragover.prevent=""
       @dragenter.prevent="handleDragOver($event)"
       @drop="handleDrop($event)"
       @dragleave="handleDragleave($event)"
  >
    <template v-for="(it, index) in tagList">
      <div :class="(this.index == index?'query-area-item query-area-item-active':'query-area-item')"
           draggable="true"
           @dragstart="childDragstart($event, index)"
           @dragenter.prevent="childDragEnter($event, index)"
           @dragleave="childDragleave($event, index)">
        <div class="query-area-item-title" @click="handleDisplay(index)">{{it.displayName?it.displayName : it.fieldName}}</div>
        <div v-if="(queryType=='measure')" class="query-area-item-select">
          <a-select v-model:value="tagList[index].operation" :options="aggregates"></a-select>
        </div>
        <div class="query-area-item-close" @click="childDelete(index)"><CloseOutlined style="color: white;"/></div>
      </div>
    </template>
  </div>

  <a-modal v-model:visible="modelName.open" title="修改显示名称" @ok="handleDisplayOk">
    <div style="line-height: 30px;">属性名称：{{modelName.fieldName}}</div>
    <div>
      <a-input v-model:value="modelName.displayName"
               :placeholder="(modelName.fieldName+'...')" />
    </div>
  </a-modal>
</template>
<script lang="ts">
  import {defineComponent, computed} from "vue";
  //import {message} from "ant-design-vue";

  export  default defineComponent ({
    props:{
      queryType : String,
      keyName : String,
      subjectId : String
    },
    emits: ['change'],
    name : 'DragBase',
    data() {
      return{
        tagList : [] as any,
        counter : 0,
        index : -1,
        aggregates : [],
        modelName : {
          open : false,
          fieldName: '',
          displayName : '',
          index : -1
        }
      }
    },
    setup(props, context){
      console.log("base setup" , props);

      const dataChange = (list, obj) => {
        context.emit('change', list, obj)
      }
      const subjectId = computed(() => {
        return props.subjectId? props.subjectId : null
      });

      return{
        queryType: props.queryType ? props.queryType : 'dimen',
        keyName : props.keyName == null || props.keyName == undefined ? 'tempFeildId' : props.keyName,
        dataChange,
        subjectId
      }
    },
    mounted(){
      console.log("mounted" , "");
    },
    methods:{
      getObject:function (data){
        return {
          tempFeildId: data.tempFeildId,
          tempId: data.tempId ? data.tempId : null,
          fieldId: data.fieldId ? data.fieldId : null,
          fieldCode: data.fieldCode ? data.fieldCode : null,
          dataType : data.dataType ? data.dataType : 'int',

          fieldAlias: data.fieldAlias,
          fieldName: data.fieldName,
          isDrag: 1,
          displayName: data.displayName ? data.displayName : null,
          operation: data.operation ? data.operation : 'sum',

          subId : data.subId? data.subId : null,
          subjectName : data.subjectName? data.subjectName : null
        };
      },
      handleDragOver : function (ev) {
        ev.preventDefault();
        this.counter++;
        const data = window["dragData"];
        console.log("keyName", this.keyName, data[this.keyName])

        const tag = this.findTag(data[this.keyName]);
        if(tag != null) return;
        this.index = this.tagList.length;

        const obj = this.getObject(data);
        //检查主题是否合法
        console.log("handleDragOver", data, obj, this.tagList);
        if(obj.subId==null || obj.subjectName==null) return; //主题不合法
        if(this.subjectId && this.subjectId != obj.subId) {
          //message.error("无法放置，同一模板只能放置统一主题的维度、度量!");
          return;//有主题，但是和当前模板中的主题不同
        }

        this.tagList.push(obj);
      },
      handleDrop : function (ev) {
        ev.preventDefault();
        const data = window["dragData"];
        const tag = this.findTag(data[this.keyName]);

        console.log("handleDrop", data, tag);
        if(tag==null) return;
        this.tagList[tag.index]['isDrag'] = 0;
        this.index = -1;
        this.counter = 0;
        this.dataChange(this.getTagList(), this.tagList[tag.index]);
      },
      handleDragleave : function(ev) {
        console.log(ev);
        this.counter--;
        const data = window["dragData"];
        const tag = this.findTag(data[this.keyName]);
        console.log("handleDragleave", data, tag, this.counter);

        if(tag==null) return;
        if(this.counter==0) {
          this.tagList.splice(tag.index,1);
          this.index = -1;
          this.dataChange(this.getTagList(), null);
        }
      },
      childDragEnter : function (ev, index) {
        ev.preventDefault();
        this.counter++;
        //重新排序
        if(index == this.index || this.index==-1) return;

        const data = window["dragData"];
        //检查主题是否合法
        if(data.subId==null || data.subjectName==null) return; //主题不合法
        if(this.subjectId && this.subjectId != data.subId) return;//有主题，但是和当前模板中的主题不同

        this.tagList.splice(this.index,1)
        this.index = index;

        this.tagList.splice(index, 0, this.getObject(data));
        console.log("childDragEnter","位置切换");

        this.dataChange(this.getTagList(), this.getObject(data));
      },
      childDragleave : function (ev) {
        ev.preventDefault();
        this.counter--;
      },
      childDragstart : function (ev, index) {
        console.log(ev);
        window["dragData"] = JSON.parse(JSON.stringify(this.tagList[index]));
        this.index = -1;
        setTimeout(()=>{
          this.tagList.splice(index,1);
          console.log("childDragstart", window["dragData"], index, this.tagList);
          this.dataChange(this.getTagList(), null);
        },20);
      },
      childDelete : function (index){
        this.index = -1;
        this.tagList.splice(index,1);
        this.dataChange(this.getTagList(), null);
      },
      findTag : function (key) {
        for (let i = 0; i < this.tagList.length; i++) {
          if (this.tagList[i][this.keyName] == key) {
            console.log("findTag",this.tagList, key, this.tagList[i][this.keyName]);
            return {obj: this.tagList[i], index: i}
          }
        }
        console.log("findTag",this.tagList, key, "null");
        return null;
      },
      handleDisplay(index){
        this.modelName.index = index;
        this.modelName.open = true;
        this.modelName.fieldName = this.tagList[index]["fieldName"];
        this.modelName.displayName = this.tagList[index]["displayName"]?
          this.tagList[index]["displayName"]:this.tagList[index]["fieldName"];
      },
      handleDisplayOk(){
        if(this.modelName.displayName!=null && this.modelName.displayName!=undefined && this.modelName.displayName.length>0) {
          this.modelName.open = false;
          this.tagList[this.modelName.index]["displayName"] = this.modelName.displayName;
          this.modelName.index = -1;
        }
      },
      getTagList(){
        this.tagList.forEach((row, index)=>{
          row.disOrder = index;
        });
        return this.tagList;
      },
      setTagList(list){
        this.tagList = list;
      }
    }
  })
</script>

<style lang="less" scoped>
  @import 'drag-base.less';
</style>