修改表格过滤字段样式

src/window/tabGridView/GridColumnDef.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="btn-group">
-    <button
+    <!-- <button
       type="button"
       class="btn btn-default dropdown-toggle"
       aria-haspopup="true"
@@ -8,7 +8,11 @@
       @click="reverseShow"
     >
       <span class="fa fa-bars" />
-    </button>
+    </button> -->
+    <div class="table_style" @click="reverseShow">
+      <ProfileTwoTone style="font-size: 16px;" /> 
+      <span style="color: black;">表格过滤</span>
+    </div>
     <Modal v-model:show="modal">
       <template #header>
         {{ $t("lang.gridColumnDef.gridField") }}
@@ -47,13 +51,14 @@ 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,
   },
   /**
      * 页签表单字段
@@ -178,4 +183,13 @@ export default {
 ul label {
     cursor: pointer;
 }
+.table_style{
+  margin-left: 4px;
+  cursor: pointer;
+  padding: 1px 6px;
+}
+.table_style:hover{
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
 </style>

src/window/tabGridView/GridColumnDef1.vue

@@ -0,0 +1,181 @@
+<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/window/tabGridView/TabGridEdit.vue

@@ -1961,8 +1961,8 @@ export default {
   border: none;
   cursor: none;
 }
-:deep(.btn-group > .btn:first-child) {
+/* :deep(.btn-group > .btn:first-child) {
   margin-top: -8px;
   margin-left: 8px;
-}
+} */
 </style>