增加表格字段的设置。

src/window1/tabGridView/GridColumnDef.vue

@@ -1,22 +1,9 @@
 <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> -->
     <div class="table_style" @click="reverseShow">
-      <ProfileTwoTone style="font-size: 16px;" /> 
-      <span style="color: black;">表格过滤</span>
+      <span>字段设置</span>
     </div>
-    <Modal v-model:show="modal">
-      <template #header>
-        {{ $t("lang.gridColumnDef.gridField") }}
-      </template>
+    <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">
@@ -39,7 +26,7 @@
           </div>
         </template>
       </vuedraggable>
-    </Modal>
+    </a-modal>
   </div>
 </template>
 
@@ -51,14 +38,12 @@ import GridColumnDef from './GridColumnDef.js';
 import Language from '../../common/Language.js';
 
 import vuedraggable from 'vuedraggable';
-import { ProfileTwoTone } from '@ant-design/icons-vue';
 
 export default {
 
 
   components: {
     vuedraggable,
-    ProfileTwoTone,
   },
   /**
      * 页签表单字段
@@ -185,5 +170,6 @@ ul label {
 }
 .table_style{
   cursor: pointer;
+  color: #277fd0;
 }
 </style>

src/window1/tabGridView/GridColumnDef1.vue

@@ -1,181 +0,0 @@
-<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.gridColumnDef.gridField") }}
-      </template>
-      <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>
-    </Modal>
-  </div>
-</template>
-
-<script>
-
-import Common from '../../common/Common.js';
-
-import GridColumnDef from './GridColumnDef.js';
-import Language from '../../common/Language.js';
-
-import vuedraggable from 'vuedraggable';
-
-
-export default {
-
-
-  components: {
-    vuedraggable,
-  },
-  /**
-     * 页签表单字段
-     */
-  // 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;
-}
-</style>

src/window1/tabGridView/NewTabButton.vue

@@ -64,15 +64,6 @@
         </a-button>
         <a-button v-else :icon="h(LayoutTwoTone)">{{ item.name }}</a-button>
       </template>
-
-      <!-- <a-space>
-        <GridColumnDef
-          :window-no="windowNo"
-          :tab-index="tabIndex"
-          :tab-grid-fields="tabGridFields"
-          @property-changed="propertyChanged($event)"
-        />
-      </a-space> -->
     </a-space>
     <a-space size="small">
       <template v-for="(item, index) in rightTabButton" :key="index">

src/window1/tabGridView/TabGridEdit.vue

@@ -7,7 +7,14 @@
       v-if="
         tab && tab.tabDataSource && tab.tabDataSource.tabDataSourceGroupDtos
       " :tab-props="tab.tabDataSource.tabDataSourceGroupDtos" @get-now-tab="getNowTab"
-    />
+    >
+      <GridColumnDef
+        :window-no="windowNo"
+        :tab-index="tabIndex"
+        :tab-grid-fields="tabGridFields"
+        @property-changed="propertyChanged($event)"
+      />
+    </WindowTab>
     <div
       class="grid-container" :style="{
         'padding-right': showComplexFilterPanel == true ? '360px' : '0px',
@@ -149,6 +156,11 @@ import { Notify, Uuid, CssUtil } from 'pc-component-v3';
 import WindowTab from './WindowTab.vue';
 import NewTabButton from './NewTabButton.vue';
 
+import GridColumnDef from '../tabGridView/GridColumnDef.vue';
+
+
+
+
 import {
   PlusCircleTwoTone,
   PlusSquareTwoTone,
@@ -182,6 +194,7 @@ export default {
     CheckSquareTwoTone,
     CloseCircleTwoTone,
     IdcardTwoTone,
+    GridColumnDef,
   },
   props: {
     windowNo: {

src/window1/tabGridView/WindowTab.vue

@@ -13,6 +13,9 @@
     <li class="help-box">
       <span>使用帮助</span>
     </li>
+    <li class="help-box">
+      <slot />
+    </li>
   </ul>
 </template>