client-base-v5/src/window1/tab-form-common/FormFieldDef.vue

<template>
  <div class="btn-group">
    <button
      type="button"
      class="btn btn-default dropdown-toggle"
      aria-haspopup="true"
      aria-expanded="false"
      @click="reverseShow"
    >
      <span class="fa fa-bars" />
    </button>
    <Modal v-model:show="modal">
      <template #header>{{ $t('lang.formFieldDef.formField') }}</template>
      <vuedraggable v-model="formFields" class="wrapper" item-key="id" draggable=".field-column-dragable" @end="sortChaned()">
        <template #item="{element}">
          <div class="field-column-dragable">
            <div class="column">
              <input
                :id="'FormFieldDefItem' + '_' + windowNo + '_' + tabIndex + '_' + element.fieldName + '_' + element.entityFieldIndex"
                v-model="element.visible"
                autocomplete="off"
                class="visible-checkbox"
                type="checkbox"
                :disabled="element.mandatory && element.visible"
                @change="tabFormFieldPropertyChanged(element)"
              />
              <label
                :for="'FormFieldDefItem' + '_' + 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>
    </Modal>
  </div>
</template>

<script>

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

import TabFormView from '../tabFormView/TabFormView.js';
import Language from '../../common/Language.js';


import vuedraggable from 'vuedraggable';

export default {


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

  data: function () {
    this.Language = Language;
    return {
      gridFieldItemMap: {},
      formFields: [],
      modal: false,
    };
  },
  watch: {
    'tabFormFields': function () {
      this.cloneTabFormFields();
    },
  },
  mounted: function () {
    this.cloneTabFormFields();
  },

  methods: {
    /**
         * 克隆页签表单字段
         */
    cloneTabFormFields: function () {
      var _self = this;
      if (_self.tabFormFields == null) {
        return;
      }
      _self.formFields.splice(0, _self.formFields.length);
      let tempFormFields = [];
      for (var i = 0, len1 = _self.tabFormFields.length; i < len1; i++) {
        let tempSortNo = _self.tabFormFields[i].sortNo;
        var tabFormFieldClone = {
          'fieldName': _self.tabFormFields[i].fieldName,
          'displayName': _self.tabFormFields[i].displayName,
          'displayNameEng': _self.tabFormFields[i].displayNameEng,
          'entityFieldIndex': _self.tabFormFields[i].entityFieldIndex,
          'mandatory': _self.tabFormFields[i].mandatory,
          'visible': _self.tabFormFields[i].visible,
          'key':('FormFieldDef_' + _self.windowNo + '_'+_self.tabIndex+'_' + _self.tabFormFields[i].fieldName + '_' + _self.tabFormFields[i].entityFieldIndex),
          'sortNo': (tempSortNo == null) ? 100 : tempSortNo,
          'width': _self.tabFormFields[i].width,
        };
        tempFormFields.push(tabFormFieldClone);
      }

      tempFormFields.sort(function(a,b){
        return a.sortNo - b.sortNo;
      });

      tempFormFields.forEach(function(tempFormField){
        _self.formFields.push(tempFormField);
      });
    },

    /**
         * 表单字段的属性发生改变
         */
    tabFormFieldPropertyChanged: function (formField) {
      var _self = this;
      if (formField.mandatory) {
        formField.visible = true;
        return;
      }
            
      TabFormView.saveFormFieldDef(_self.windowNo, _self.tabIndex, _self.formFields).then(successData => {
        _self.$emit('tabFormFieldPropertyChanged', _self.formFields);
      }, errorData => {
        console.log(errorData);
      });
    },

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

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

      TabFormView.saveFormFieldDef(_self.windowNo, _self.tabIndex, _self.formFields).then(successData => {
        _self.$emit('tabFormFieldPropertyChanged', _self.formFields);
      }, 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;
}
</style>