client-base-v5/src/window1/tabGridView/GridColumnDef.vue

<template>
  <div class="btn-group">
    <div class="table_style" @click="reverseShow">
      <span>字段设置</span>
    </div>
    <a-modal v-model:open="modal" :title="$t('lang.gridColumnDef.gridField')" :footer="null">
      <vuedraggable v-model="gridFields" item-key="id" class="wrapper" draggable=".column-dragable" @end="sortChaned()">
        <template #item="{element}">
          <div class="column-dragable">
            <div class="column">
              <input
                :id="'GridFieldDefItem' + '_' + windowNo + '_' + tabIndex + '_' + element.fieldName + '_' + element.entityFieldIndex"
                v-model="element.visible"
                autocomplete="off"
                class="visible-checkbox"
                type="checkbox"
                :disabled="element.mandatory && element.visible"
                @change="visibleChanged(element)"
              />
              <label
                :for="'GridFieldDefItem' + '_' + windowNo + '_' + tabIndex + '_' + element.fieldName + '_' + element.entityFieldIndex"
                class="column-name"
                :class="{'column-red' : element.mandatory == true}"
              >{{ Language.getDisplayNameTrl($i18n.locale, element) }}</label>
            </div>
          </div>
        </template>
      </vuedraggable>
    </a-modal>
  </div>
</template>

<script>

import Common from '../../common/Common.js';

import GridColumnDef from './GridColumnDef.js';
import Language from '../../common/Language.js';
import { OrderedListOutlined } from '@ant-design/icons-vue';
import vuedraggable from 'vuedraggable';

export default {


  components: {
    vuedraggable, OrderedListOutlined,
  },
  /**
     * 页签表单字段
     */
  // eslint-disable-next-line
  props: ['windowNo', 'tabIndex', 'tabGridFields'],

  data: function () {
    this.Language = Language;
    return {
      gridFieldItemMap: {},
      gridFields: [],
      modal: false,
    };
  },
  watch: {
    'tabGridFields': function () {
      this.cloneTabGridFields();
    },
  },
  mounted: function () {
    this.cloneTabGridFields();
  },

  methods: {
    /**
         * 克隆页签表单字段
         */
    cloneTabGridFields: function () {
      var _self = this;
      if (_self.tabGridFields == null) {
        return;
      }
      _self.gridFields.splice(0, _self.gridFields.length);
      let tempGridFields = [];
      for (var i = 0, len1 = _self.tabGridFields.length; i < len1; i++) {
        let tempSortNo = _self.tabGridFields[i].sortNo;
        var tabGridFieldClone = {
          'fieldName': _self.tabGridFields[i].fieldName,
          'displayName': _self.tabGridFields[i].displayName,
          'displayNameEng': _self.tabGridFields[i].displayNameEng,
          'entityFieldIndex': _self.tabGridFields[i].entityFieldIndex,
          'mandatory': _self.tabGridFields[i].mandatory,
          'visible': _self.tabGridFields[i].visible,
          'key':('GridFieldDef_' + _self.windowNo + '_'+_self.tabIndex+'_' + _self.tabGridFields[i].fieldName + '_' + _self.tabGridFields[i].entityFieldIndex),
          'sortNo': (tempSortNo == null) ? 100 : tempSortNo,
          'width':_self.tabGridFields[i].width,
        };
        tempGridFields.push(tabGridFieldClone);
      }
      tempGridFields.sort(function(a,b){
        return a.sortNo - b.sortNo;
      });
      tempGridFields.forEach(function(tempGridField){
        _self.gridFields.push(tempGridField);
      });

    },

    /**
         * 表格字段的显示属性发生改变
         * @param { object } gridField 表格字段
         */
    visibleChanged: function (gridField) {
      var _self = this;
      if (gridField.mandatory) {
        gridField.visible = true;
        return;
      }
      GridColumnDef.saveGridFieldDef(_self.windowNo, _self.tabIndex, _self.gridFields).then(successData => {
        _self.$emit('propertyChanged', _self.gridFields);
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 显示表单编辑模态框
         */
    reverseShow: function () {
      this.modal = true;
    },

    /**
         * 排序发生改变
         */
    sortChaned:function(){
      console.log('sortChaned');
      var _self = this;
      for (var i = 0, len1 = _self.gridFields.length; i < len1; i++) {
        _self.gridFields[i].sortNo = i * 10;
      }
      GridColumnDef.saveGridFieldDef(_self.windowNo, _self.tabIndex, _self.gridFields).then(successData => {
        _self.$emit('propertyChanged', _self.gridFields);
      }, errorData => {
        console.log(errorData);
      });
    },
  },
};

</script>
<style scoped>
.visible-checkbox {
    width: 17px;
    height: 17px;
    text-align: center;
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 8px;
}
.column-name {
    height: 25px;
    line-height: 25px;
}
.column-red {
    color: red;
}
.m-dropdown-menu {
    display: block;
}
ul label {
    cursor: pointer;
}
.table_style{
  cursor: pointer;
  color: #277fd0;
}
</style>