pc-component-v5/packages/info/src/InfoHeader.vue

<template>
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand">{{ headerName }}</a>
    </div>

    <div
      id="bs-example-navbar-collapse-2"
      class="collapse navbar-collapse"
    >
      <div
        class="navbar-form navbar-left"
        role="search"
      >
        <div class="dropdown float-left">
          <button
            id="dropdownMenuQueryFilter"
            class="btn btn-default dropdown-toggle"
            type="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="true"
          >
            <span class="glyphicon glyphicon-list-alt" />
          </button>

          <template v-if="infoFilterFieldsClone != null">
            <draggable
              v-model="infoFilterFieldsClone"
              item-key="key"
              class="dropdown-menu"
              @change="filterFieldSortChaned()"
              @click="stopPropagation($event)"
            >
              <template #item="{element}">
                <div style="margin-left: 15px;margin-right: 15px;">
                  <div class="column">
                    <input
                      :id="'InfoForm' + '_' + infoWindowNo + '_' + element.fieldName"
                      v-model="element.isShow"
                      autocomplete="off"
                      class="isShow-checkbox"
                      type="checkbox"
                      :disabled="element.mandatory && element.isShow"
                      @change="visibleChanged(element)"
                    />
                    <label
                      :for="'InfoForm' + '_' + infoWindowNo + '_' + element.fieldName"
                      class="column-name"
                      :class="{'column-red' : element.mandatory == true}"
                    >{{ element.name }}</label>
                  </div>
                </div>
              </template>
            </draggable>
          </template>
        </div>

        <div class="dropdown float-left dropdown-infoGrid">
          <button
            id="dropdownMenuQueryFilter2"
            class="btn btn-default dropdown-toggle"
            type="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="true"
          >
            <span class="glyphicon glyphicon-calendar" />
          </button>

          <template v-if="infoGridFieldsClone != null">
            <draggable
              v-model="infoGridFieldsClone"
              item-key="key"
              class="dropdown-menu"
              @change="gridFieldSortChaned()" 
              @click="stopPropagation($event)"
            >
              <template #item="{element}">
                <div style="margin-left: 15px;margin-right: 15px;">
                  <div class="column">
                    <input
                      :id="'InfoGrid' + '_' + infoWindowNo + '_' + element.fieldName"
                      v-model="element.isShow"
                      autocomplete="off"
                      class="isShow-checkbox"
                      type="checkbox"
                      :disabled="element.mandatory && element.isShow"
                      @change="gridFieldvisibleChanged(element)"
                    />
                    <label
                      :for="'InfoGrid' + '_' + infoWindowNo + '_' + element.fieldName"
                      class="column-name"
                      :class="{'column-red' : element.mandatory == true}"
                    >{{ element.name }}</label>
                  </div>
                </div>
              </template>
            </draggable>
          </template>
        </div>
        <button
          v-if="htmlHelpUrl != undefined && htmlHelpUrl != ''"
          class="btn btn-default btn-help"
          @click="openHtmlHelp(htmlHelpUrl)"
        >
          <span class="glyphicon glyphicon-question-sign" />
        </button>
      </div>
    </div>
  </div>
</template>

<script>

import draggable from 'vuedraggable';

export default {


  components: {
    draggable,
  },
  props: {
    'infoFilterFields': {
      type: Object,
      default: null,
    },
    'headerName': {
      type: String,
      default: null,
    }, 
    'infoGridFields': {
      type: Object,
      default: null,
    },
    'htmlHelpUrl': {
      type: String,
      default: null,
    }, 
    'infoWindowNo': {
      type: String,
      default: null,
    }, 
  },

  emits: ['gridFieldPropertyChanged', 'filterFieldPropertyChanged'],
    
  data: function () {
    return {
      sortMap: {},
      infoFilterFieldsClone: [],
      infoGridFieldsClone: [],
    };
  },

  watch: {
    'infoFilterFields': function () {
      this.cloneInfoFilterFields();
    },
    'infoGridFields': function () {
      this.cloneInfoGridFields();
    },
  },
  mounted: function () {
    this.cloneInfoFilterFields();
    this.cloneInfoGridFields();
  },

  methods: {
    cloneInfoFilterFields: function () {
      var _self = this;
      if (_self.infoFilterFields != null) {
        _self.infoFilterFieldsClone.splice(0, _self.infoFilterFieldsClone.length);

                
        let tempInfoFilterFields = [];

        for (var i = 0, len1 = _self.infoFilterFields.length; i < len1; i++) {
          var fieldClone = {
            'key': ('InfoFormField' + '_' + _self.infoWindowNo + '_' + _self.infoFilterFields[i].fieldName),
            'fieldName': _self.infoFilterFields[i].fieldName,
            'name': _self.infoFilterFields[i].name,
            'mandatory': _self.infoFilterFields[i].mandatory,
            'isShow': _self.infoFilterFields[i].isShow,
            'sortNo': _self.infoFilterFields[i].sortNo,
          };
          tempInfoFilterFields.push(fieldClone);
        }

        tempInfoFilterFields.sort(function (item1, item2) {
          return item1.sortNo - item2.sortNo;
        });

        tempInfoFilterFields.forEach(function(tempInfoFilterField){
          _self.infoFilterFieldsClone.push(tempInfoFilterField);
        });
      }
    },
    cloneInfoGridFields: function () {

      var _self = this;

      if (_self.infoGridFields != null) {
        _self.infoGridFieldsClone.splice(0, _self.infoGridFieldsClone.length);

        let tempInfoGridFields = [];

        for (var i = 0, len1 = _self.infoGridFields.length; i < len1; i++) {
          var fieldClone = {
            'key': ('InfoGridField' + '_' + _self.infoWindowNo + '_' + _self.infoGridFields[i].fieldName),
            'fieldName': _self.infoGridFields[i].fieldName,
            'name': _self.infoGridFields[i].name,
            'mandatory': _self.infoGridFields[i].mandatory,
            'isShow': _self.infoGridFields[i].isShow,
            'sortNo': _self.infoGridFields[i].sortNo,
            'width': _self.infoGridFields[i].width,
          };
          tempInfoGridFields.push(fieldClone);
        }

        tempInfoGridFields.sort(function (item1, item2) {
          return item1.sortNo - item2.sortNo;
        });

        tempInfoGridFields.forEach(function(tempInfoGridField){
          _self.infoGridFieldsClone.push(tempInfoGridField);
        });
      }
            
    },
    /**
         * 打开帮助页面
         */
    openHtmlHelp: function (htmlHelpUrl) {
      window.open(htmlHelpUrl);
    },

    //将数据传递给父组件
    visibleChanged: function (infoFilterFieldItem) {
      var _self = this;
      _self.$nextTick(function () {
        if (infoFilterFieldItem.mandatory) {
          infoFilterFieldItem.ishow = true;
          return;
        }
        _self.$emit('filterFieldPropertyChanged', _self.infoFilterFieldsClone);
      });
    },

    gridFieldvisibleChanged: function (item) {
      var _self = this;
      _self.$nextTick(function () {
        if (item.mandatory) {
          item.ishow = true;
          return;
        }
        this.$emit('gridFieldPropertyChanged', _self.infoGridFieldsClone);
      });
    },

    // 停止冒泡
    stopPropagation: function (e) {
      e.stopPropagation();
    },
        
    filterFieldSortChaned: function () {
      console.log('filterFieldSortChaned');
      var _self = this;
      for (var i = 0, len1 = _self.infoFilterFieldsClone.length; i < len1; i++) {
        _self.infoFilterFieldsClone[i].sortNo = i * 10;
      }
      this.$emit('filterFieldPropertyChanged', _self.infoFilterFieldsClone);
    },

    gridFieldSortChaned: function () {
      console.log('gridFieldSortChaned');
      var _self = this;
      for (var i = 0, len1 = _self.infoGridFieldsClone.length; i < len1; i++) {
        _self.infoGridFieldsClone[i].sortNo = i * 10;
      }
      this.$emit('gridFieldPropertyChanged', _self.infoGridFieldsClone);
    },

  },
};

</script>
<style scoped>
.visible-checkbox {
    width: 17px;
    height: 17px;
    text-align: center;
    margin-right: 5px;
    margin-left: 15px;
}

.column-name {
    height: 25px;
    line-height: 25px;
}

.fa-arrow-up {
    float: right;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}

.fa-arrow-down {
    float: right;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-left: 10px;
}

.column-prop {
    display: block;
    width: 260px;
}

.clear-fix {
    clear: both;
}

.float-left {
    float: left;
}

.dropdown-infoGrid {
    margin-left: 10px;
}
.btn-help {
    margin-left: 20px;
}
</style>