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

<!-- CRUD列表  -->

<template>
  <div>
    <Navbar :title="Language.getNameTrl($i18n.locale, window)" :is-go-back="false" />
    <WindowTab
      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',
        'grid-template-rows': isHaveButtons === true ? '40px 40px auto 40px' : '40px 6px auto 40px'
      }"
    >
      <div class="operationClass">
        <div class="grid-item-row1" style="width: 400px">
          <SimpleFilterPanel
            :key="'simple-filter-panel-' + windowNo" v-model:searchText="searchText"
            :disabled="complexFilterParams != null" :window-no="windowNo" :tab-index="tabIndex"
            :filter-schema="tab.filterSchema" @simple-search="simpleSearch"
            @show-complex-filter-panel="showComplexFilterPanel = true"
          />
        </div>
        <div>
          <a-pagination
            v-model:current="pagination.current_page" v-model:pageSize="pagination.per_page"
            show-quick-jumper size="small" :total="pagination.total" :page-size-options="pageSizeOptions"
            @change="handlePageChange" @show-size-change="handleShowSizeChange"
          />
        </div>
      </div>
      <div class="grid-item-row2">
        <NewTabButton
          :window="window" :now-tab="nowTab" :simple-filter-params="searchText"
          :complex-filter-params="complexFilterParams" :uuid="uuid" :show-tab-dto="tab" :model-datas="modelDatas"
          :view-type="'Grid'" :curd-window-function-access="curdWindowFunctionAccess"
          :select-model-datas="selectModelDatas" @create-record-in-window-edit="createRecordInWindowEdit"
          @delete-records="deleteRecords" @refresh-datas="refreshDatas" @judge-is-have-buttons="judgeIsHaveButtons"
          @read-record="readRecord($event)"
        />
      </div>

      <div class="grid-item-row3-column1 tableFixHead">
        <!-- eslint-disable-next-line -->
        <div v-html="headerHtml" />
        <!-- table -->
        <div v-if="tab != null && tab.tabGridView != null">
          <div :id="scrollObject.tableOutDivUuid1" ref="tableContainer1" style="padding-left: 0px">
            <div :id="scrollObject.tableOutDivUuid2" ref="tableContainer2">
              <table class="curd-table table-striped table-bordered" :width="tableWidth">
                <thead>
                  <GridHeader
                    :is-show-edit="false" :tab-grid-fields="tabGridFields" :window-no="windowNo"
                    :tab-index="tabIndex" :is-chinese-english="window.isChineseEnglish" height="40px"
                    @on-sort="onSort($event)" @property-changed="propertyChanged($event)"
                    @select-all="selectAll($event)" @multiple-select="changeSelectMode($event)"
                  />
                </thead>
                <tbody>
                  <template v-for="(modelData, index) in modelDatas" :key="modelData.id">
                    <GridBody
                      ref="gridBody" :window-no="windowNo" :tab-index="tabIndex" :serial-number="index +
                        1 +
                        (pagination.current_page - 1) * pagination.per_page
                      " :is-show-edit="false" :tab-grid-fields="tabGridFields"
                      :tab-grid-title-fields="tabGridTitleFields" :model-data="modelData"
                      :simple-filter-params="searchText" :complex-filter-params="complexFilterParams"
                      :class-name="tab.tabDataSource.className" :scroll-object="scrollObject" :js-url="jsUrl"
                      :model-datas="modelDatas" @delete-record="deleteRecord(modelData, true)"
                      @edit-record="editRecord(modelData, index)" @click-model-data="clickModelData(modelData)"
                      @read-record="readRecord($event, modelData, index)" @refresh-datas="refreshDatas"
                      @value-changed="valueChanged($event, modelData, index)" @execute-callout="
                        executeCallout($event, modelData, index)
                      "
                    />
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <a-drawer
        v-model:open="showComplexFilterPanel" :title="$t('lang.tabGridEdit.advancedSearch')" :width="400"
        :footer-style="{ textAlign: 'right' }" :mask="false" :mask-closable="false"
        @close="showComplexFilterPanel = false"
      >
        <ComplexFilterPanel
          ref="complexFilterPanel" :key="'complex-filter-panel-' + windowNo + '-' + tabIndex"
          :window-no="windowNo" :tab-index="tabIndex" :filter-schema="tab.filterSchema"
          @complex-search="advancedSearchOk"
        />
      </a-drawer>
    </div>
    <Modal v-model:show="modal1">
      <template #header>
        {{ $t("lang.tabGridEdit.validateError") }}
      </template>
      <div>
        {{
          $t("lang.tabGridEdit.validateErrorMsg", { errorCount: errorCount })
        }}
      </div>
    </Modal>
    <Modal v-model:show="modal2" @ok="dataRestore()" @cancel="cancelRestore()">
      <template #header> 数据恢复提示 </template>
      <div>存在草稿，是否恢复数据？</div>
    </Modal>
    <Loading v-if="loading" />
  </div>


  <component
    :is="dynamicComponent" v-if="dynamicComponentOpen" v-model:open="dynamicComponentOpen"
    v-bind="dynamicComponentParam"
  />
</template>

<script>
import Common from '../../common/Common.js';

import WindowServerUtil from '../../resource/dictionary/WindowServerUtil.js';
import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import FieldUtil from '../../resource/dictionary/FieldUtil.js';
import ProcessReportResource from '../../api/dic/ProcessReportResource.js';
import GridColumnDefUtil from '../tabGridView/GridColumnDef.js';
import UserStorageResource from '../../api/base/UserStorageResource.js';
import Context from '../common/Context.js';
import Language from '../../common/Language.js';
import CurdWindowEditResource from '../../api/dic/CurdWindowEditResource.js';

import GridHeader from '../tabGridView/GridHeader.vue';
import GridBody from '../tabGridView/GridBody.vue';

import SimpleFilterPanel from '../filter/SimpleFilterPanel.vue';
import ComplexFilterPanel from '../filter/ComplexFilterPanel.vue';
import TabButton from '../tabView/TabButton.vue';

import AuthImage from '../../widget/AuthImage.vue';
import DataRecoveryResource from '../../api/base/DataRecoveryResource.js';
import CurdWindowResourceV2 from '../../api/dic/CurdWindowResourceV2.js';
import JsUtil from '../../common/JsUtil.js';
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,
  DeleteTwoTone,
  SaveTwoTone,
  WalletTwoTone,
  EditTwoTone,
  CheckSquareTwoTone,
  CloseCircleTwoTone,
  IdcardTwoTone,
} from '@ant-design/icons-vue';

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AuthImage,
    SimpleFilterPanel,
    TabButton,
    GridHeader,
    GridBody,
    NewTabButton,
    ComplexFilterPanel,
    WindowTab,
    PlusCircleTwoTone,
    PlusSquareTwoTone,
    SaveTwoTone,
    DeleteTwoTone,
    WalletTwoTone,
    EditTwoTone,
    CheckSquareTwoTone,
    CloseCircleTwoTone,
    IdcardTwoTone,
    GridColumnDef,
  },
  props: {
    windowNo: {
      type: String,
      default: null,
    },
  },

  data: function () {
    this.Language = Language;
    return {
      window: {},
      tabIndex: null,
      nowTab: null, // 当前是哪个阶段
      nowAsset: '', // 所选资产分类名称
      selectCategory: null, //所选资产分类数据
      tab: {},
      tabGridTitleFields: [], // 表格标题字段
      tabGridFields: [],      // 表格字段
      modelDatas: [],
      pageSizeOptions: ['20', '50', '100', '200', '1000'],
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 10, // required
      },
      complexFilterParams: [], // 复杂过滤条件
      gridFieldItemMap: {},
      isASC: true,
      sortStr: '', // 排序
      sortStyle: ' ASC',
      errorCount: 0,
      buttonGroupInitLeft: 0,
      buttonGroupInitTop: 0,
      tableHeadInitLeft: 0,
      tableHeadInitTop: 0,
      showSpaceRow: false,
      dataChanged: false,

      scrollObject: {
        // 表格滚动
        tableOutDivUuid1: Uuid.createUUID(), // table 的 uuid
        tableOutDivUuid2: Uuid.createUUID(), // table 外部 DIV 的 uuid
      },
      multipleSelect: true,
      uuid: null,
      refreshCommand: false, // 是否是刷新命令
      headerHtml: '', // Tab头HTML
      footerHtml: '', // Tab尾HTML
      headerApiUrl: '', // Tab头API URL
      footerApiUrl: '', // Tab尾API URL
      showComplexFilterPanel: false, // 显示复杂过滤面板
      dataRecoveryDto: undefined,
      isRestoreData: 0, //是否使用草稿恢复数据,0代表false，1代表true
      curdWindowFunctionAccess: null,
      jsUrl: null,
      loading: false,
      modal1: false,
      modal2: false,

      searchText: '', // 简单过滤条件
      dynamicComponent: null,
      dynamicComponentParam: null,
      dynamicComponentOpen: true,
      selectModelDatas: [],
      checkDatas: null,
    };
  },
  computed: {
    tableWidth: function () {
      // 第一列和第二列
      var totalWidth = 30 + 95;
      if (this.tabGridFields.length != 0) {
        this.tabGridFields.forEach(function (gridFieldItem) {
          // 列显示的时候才计算宽度
          if (gridFieldItem.visible) {
            totalWidth += Number(gridFieldItem.width);
          }
        });
      }
      return totalWidth + 'px';
    },

    /**
     * 是否显示新建按钮
     * @return {Boolean} [description]
     */
    isShowCreateRecordButton: function () {
      if (this.curdWindowFunctionAccess == null) {
        return false;
      }

      if (
        this.curdWindowFunctionAccess.allowCreate == undefined ||
        this.curdWindowFunctionAccess.allowCreate == null
      ) {
        return false;
      }

      if (this.curdWindowFunctionAccess.allowCreate == false) {
        return false;
      }

      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      } else if (this.window.tabs.length > 1) {
        return false;
      } else if (this.window.tabs.length == 1) {
        var customerWindowUrl = this.tab.customerWindowUrl;
        if (customerWindowUrl != undefined && customerWindowUrl != '') {
          return false;
        }
        return true;
      }
      return true;
    },

    /**
     * 是否显示编辑全部按钮
     * @return {Boolean} [description]
     */
    isShowEditAllButton: function () {
      if (
        this.curdWindowFunctionAccess == undefined ||
        this.curdWindowFunctionAccess.allowUpdate == undefined ||
        this.curdWindowFunctionAccess.allowUpdate == false
      ) {
        return false;
      }

      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      } else if (this.window.tabs.length > 1) {
        return false;
      } else if (this.window.tabs.length == 1) {
        var customerWindowUrl = this.tab.customerWindowUrl;
        if (customerWindowUrl != undefined && customerWindowUrl != '') {
          return false;
        }
        return true;
      }

      return false;
    },

    /**
     * 是否显示删除按钮
     * @return {Boolean} [description]
     */
    isShowDeleteButton: function () {
      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      }
      if (
        this.curdWindowFunctionAccess == undefined ||
        this.curdWindowFunctionAccess.allowDelete == undefined ||
        this.curdWindowFunctionAccess.allowDelete == false
      ) {
        return false;
      }
      return true;
    },

    /**
     * 是否显示新页面创建数据按钮
     */
    isShowNewPageCreateRecordButton: function () {
      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      } else if (
        this.tab == undefined ||
        this.tab.tabDataSource == undefined ||
        this.tab.tabGridView == undefined
      ) {
        return false;
      } else if (
        this.tab.tabDataSource.readOnly == true ||
        this.tab.tabGridView.disableCreateInFormViewButton == true
      ) {
        return false;
      }

      if (this.curdWindowFunctionAccess == null) {
        return false;
      }

      return true;
    },
  },

  watch: {
    /**
     * 监控数据模型
     * @type {Object}
     */
    modelDatas: {
      deep: true,
      handler(curVal, oldVal) {
        console.log(this.modelDatas.length);
      },
    },

    /**
     * 如果模态框关闭，那么刷新一下表格的数据
     * @param currentValue 
     * @param oldValue 
     */
    dynamicComponentOpen: function (currentValue, oldValue) {
      if (currentValue == false) {
        this.queryGridData(false);
      }
    },

    windowNo: function (curVal, oldVal) {
      var _self = this;

      _self.uuid = _self.$route.query.uuid;

      UserStorageResource.uniqueByKey(_self.uuid).then(
        successData => {
          // if(successData.errorCode != 0) {
          //   Notify.error('提示', successData.errorMessage, false);
          //   return;
          // }

          if (successData.data != null && successData.data != '') {
            let tabQueryParam = JSON.parse(successData.data);

            // 分页数据
            _self.pagination = tabQueryParam.pagination;
            // 简单过滤条件
            _self.searchText = tabQueryParam.simpleFilterParams;
            // 复杂过滤条件
            _self.complexFilterParams = tabQueryParam.complexFilterParams;
            // 排序
            _self.sortStr = tabQueryParam.sortStr;
            // 显示高级过滤
            _self.showComplexFilterPanel =
              tabQueryParam.showComplexFilterPanel == true;
          } else {
            // 简单过滤条件
            _self.searchText = null;
            // 复杂过滤条件
            _self.complexFilterParams = null;

            // 分页数据
            _self.pagination = {
              total: 0,
              per_page: Common.pageSize, // required
              current_page: 1, // required
              last_page: 10, // required
            };

            _self.rememberPageSize();
            // 切换窗口的时候清空排序字段
            _self.sortStr = '';
            // 显示高级过滤
            _self.showComplexFilterPanel = false;
          }

          _self.loadWindow();
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
  },
  created: function () {
    this.rememberPageSize();
  },

  beforeUnmount: function () {
    let _self = this;

    var tabQueryParam = {
      // 分页数据
      pagination: _self.pagination,
      // 简单过滤条件
      simpleFilterParams: _self.searchText,
      // 复杂过滤条件
      complexFilterParams: _self.complexFilterParams,
      // 排序
      sortStr: _self.sortStr,
      // 是否现在复杂查询面板
      showComplexFilterPanel: _self.showComplexFilterPanel,
    };

    let userStorageDtos = [
      {
        key: _self.uuid,
        value: JSON.stringify(tabQueryParam),
      },
    ];

    // 组装查询条件，然后放到后台数据库当中
    UserStorageResource.uploadUserStorage(userStorageDtos).then(
      successData => { },
      errorData => {
        Common.processException(errorData);
      },
    );
  },

  beforeMount: function () { },

  mounted: function () {

  },

  methods: {
    getContext: Context,

    // 获取当前tab为哪个阶段
    getNowTab: function (tab) {
      this.nowTab = tab;
      console.log(this.nowTab);
      this.pagination.current_page = 1;
      this.queryGridData(true);
    },

    // 页数改变
    handlePageChange: function (page) {
      this.pagination.current_page = page;
      setTimeout(() => {
        this.queryGridData(true);
      }, 100);
    },

    // 每页条数改变
    handleShowSizeChange: function (current, size) {
      setTimeout(() => {
        this.pagination.current_page = 1;
      });
      this.pagination.per_page = size;
      localStorage.setItem(`CurdWindowPageSize${this.windowNo}`, size);
    },

    /**
     * 删除草稿数据
     * @author GuoZhiBo 20211008
     */
    deleteDataRecoveryDto: function () {
      var _self = this;
      var dataRecoveryDto = {
        windowId: _self.windowNo,
        type: 'edit',
      };
      DataRecoveryResource.deleteDataRecoveryDto(dataRecoveryDto).then(
        successData => {
          if (successData != null) {
            console.log('删除草稿数据失败。');
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    /**
     * 恢复草稿数据
     * @author GuoZhiBo 20210926
     */
    dataRestore: function () {
      var _self = this;
      _self.isRestoreData = 1;
      _self.editRecord(_self.dataRecoveryDto.modelData, 1);
    },
    /**
     * 取消恢复
     * @author GuoZhiBo 20210926
     */
    cancelRestore: function () {
      var _self = this;
      _self.modal2 = false;
      _self.deleteDataRecoveryDto();
    },
    /**
     * 打开帮助页面
     */
    openHtmlHelp: function (htmlHelpUrl) {
      window.open(htmlHelpUrl);
    },

    // 改变多选/单选
    changeSelectMode: function (val) {
      this.multipleSelect = val;
    },
    // 记住每页条数
    rememberPageSize: function () {
      const curdPageSize = localStorage.getItem(
        `CurdWindowPageSize${this.$route.params.windowNo}`,
      );
      if (curdPageSize) {
        this.pagination.per_page = curdPageSize;
      }
    },
    /**
     * 加载窗口的定义
     */
    loadWindow: function () {
      var _self = this;
      if (_self.windowNo) {
        WindowServerUtil.uniqueByNoWithRoleNew(_self.windowNo, function (data) {
          WindowClientUtil.parseFilterSchema(data);
          _self.initWindow(data);
        });
      }
    },

    // 根据windowId获取window
    initWindow: function (window) {
      var _self = this;

      DataRecoveryResource.queryDataRecoveryDtoByUserId(
        _self.windowNo,
        'edit',
      ).then(
        successData => {
          if (successData != null) {
            _self.modal2 = true;
            _self.dataRecoveryDto = successData;
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );

      // 切换窗口的时候恢复分页插件到第一页
      // toggled by jack 2024-01-11
      // 界面后退的时候，需要记住分页数据。
      //_self.pagination = {
      //  total: 0,
      //  per_page: Common.pageSize, // required
      //  current_page: 1, // required
      //  last_page: 10, // required
      //};

      _self.rememberPageSize();
      // _self.windowNo = window.no;
      _self.window = window;
      _self.jsUrl = window.jsUrl;
      CurdWindowResourceV2.uniqueByNoAccessControl(_self.windowNo).then(
        successData => {
          if (successData.errorCode === 0) {
            this.curdWindowFunctionAccess = successData.data;
            if (
              this.curdWindowFunctionAccess.readOnly != null &&
              this.curdWindowFunctionAccess.readOnly === true
            ) {
              _self.window.readOnly = true;
            }
          } else {
            Notify.error(
              _self.$t('lang.tabGridEdit.describe1'),
              successData.errorMessage,
              false,
            );
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
      _self.tabIndex = 0;
      _self.tab = window.tabs[0];
      _self.tabGridFields = WindowClientUtil.getGridField(_self.tab);
      _self.tabGridTitleFields = WindowClientUtil.getGridTitleField(_self.tab);
      GridColumnDefUtil.restoreTabGridFieldDef(
        this.windowNo,
        this.tabIndex,
        this.tabGridFields,
      );

      console.log(_self.tabGridFields);

      if (
        _self.tab.tabDataSource.tabDataSourceGroupDtos &&
        _self.tab.tabDataSource.tabDataSourceGroupDtos.length
      ) {
        _self.nowTab =
          _self.tab.tabDataSource.tabDataSourceGroupDtos[0].groupName;
      }
      console.log(_self.nowTab, '_self.nowTab=======================');
      _self.$nextTick(function () {
        // 设置复杂查询条件
        if (
          _self.complexFilterParams != null &&
          _self.$refs.complexFilterPanel != null
        ) {
          _self.$refs.complexFilterPanel.setFilterParams(
            _self.complexFilterParams,
          );
        }
        _self.queryGridData(false);
      });

      // 初始化表头和表尾API方法
      _self.initHeaderAndFooterApiUrl();
    },

    /**
     * 初始化表头和表尾API方法
     * @return {[type]} [description]
     */
    initHeaderAndFooterApiUrl: function () {
      if (this.tab != undefined && this.tab.tabGridView != undefined) {
        this.headerApiUrl = this.tab.tabGridView.headerApiUrl;
        this.footerApiUrl = this.tab.tabGridView.footerApiUrl;
      }
    },

    /**
     * 检查数据是否发生变更，然后刷新表格
     */
    checkDataChangedQueryGridData: function () {
      this.queryGridData(true);
    },

    /**
     * 根据查询参数获取数据模型
     * checkDataChanged : 是否判断数据是否发生改变
     */
    queryGridData: function (checkDataChanged) {
      var _self = this;

      if (checkDataChanged) {
        if (_self.dataChanged == true) {
          Notify.notice(
            _self.$t('lang.tabGridEdit.describe2'),
            _self.$t('lang.tabGridEdit.describe3'),
            false,
          );
          return;
        }
      }

      _self.refreshCommand = true;
      _self.modelDatas.splice(0, _self.modelDatas.length);
      if (_self.tab == undefined) {
        return;
      }

      // 简单过滤条件
      let simpleFilterCondition = null;
      let filterParams = null;
      // BUG fixed by jack 2024-01-11
      // 不应该以仪表盘的显示隐藏状态作为判断是否是高级搜索的依据。
      // 1. 点击高级搜索的【查询】按钮。
      // 2. 保存高级搜索的查询条件 complexFilterParams
      // 3. 判断complexFilterParams是否为空，作为是否是高级搜索的依据。
      if (_self.complexFilterParams != null) {
        filterParams = _self.complexFilterParams;
      } else {
        simpleFilterCondition = _self.searchText;
      }
      let groupNameOne;
      if (
        _self.tab.tabDataSource.tabDataSourceGroupDtos &&
        _self.tab.tabDataSource.tabDataSourceGroupDtos.length
      ) {
        groupNameOne =
          _self.tab.tabDataSource.tabDataSourceGroupDtos[0].groupName;
      } else {
        groupNameOne = null;
      }
      var tabQueryParam = {
        range: {
          start:
            (_self.pagination.current_page - 1) * _self.pagination.per_page,
          length: _self.pagination.per_page,
        },
        windowNo: _self.windowNo,
        tabIndex: _self.tabIndex,
        filterParams: filterParams,
        simpleFilterCondition: simpleFilterCondition,
        sortStr: _self.sortStr,
        groupName: _self.nowTab ? _self.nowTab : groupNameOne,
      };

      _self.dataChanged = false;
      _self.loading = true;

      WindowServerUtil.queryTabData(
        tabQueryParam,
        function (data) {
          var modelDatas = data.dataList;
          if (modelDatas != undefined) {
            for (var index = 0, len = modelDatas.length; index < len; index++) {
              modelDatas[index].editMode = false;
              _self.modelDatas[index] = modelDatas[index];
            }
          }

          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(
            data.totalSize / data.range.length,
          );

          _self.loadHeaderAndFooterContent(tabQueryParam);

          _self.loading = false;
          _self.refreshCommand = false;
        },
        function () {
          _self.loading = false;
          _self.refreshCommand = false;
        },
      );
    },

    /**
     * 加载表头和表位的方法
     * @return {[type]} [description]
     */
    loadHeaderAndFooterContent: function (tabQueryParam) {
      var _self = this;
      if (this.headerApiUrl != undefined && this.headerApiUrl.length > 0) {
        $.ajax({
          url: Common.getApiURL(_self.headerApiUrl),
          type: 'post',
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: JSON.stringify(tabQueryParam),
          dataType: 'text',
          success: function (data) {
            _self.headerHtml = data;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        _self.headerHtml = '';
      }

      if (this.footerApiUrl != undefined && this.footerApiUrl.length > 0) {
        $.ajax({
          url: Common.getApiURL(_self.footerApiUrl),
          type: 'post',
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: JSON.stringify(tabQueryParam),
          dataType: 'text',
          success: function (data) {
            _self.footerHtml = data;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        _self.footerHtml = '';
      }
    },

    /**
     * 在表格中新建数据或者WindowEdit中新建数据
     * 在WindowEdit界面中新增数据
     *
     */
    createRecord: function () {
      var _self = this;
      if (
        _self.curdWindowFunctionAccess.allowCreate === null ||
        _self.curdWindowFunctionAccess.allowCreate === undefined ||
        _self.curdWindowFunctionAccess.allowCreate === false
      ) {
        Notify.error(
          _self.$t('lang.tabGridEdit.describe4'),
          _self.$t('lang.tabGridEdit.describe5'),
          false,
        );
      } else {
        // 如果存在子页签，则进入到新建的界面
        if (_self.window.tabs != undefined && _self.window.tabs.length > 1) {
          let currPage = _self.pagination.current_page;
          let totalCount = _self.pagination.total;

          _self.dynamicComponentParam = {
            viewType: 'create',
            curdWindowNo: this.windowNo,
            tabIndex: this.tabIndex,
            currentPage: currPage,
            currentIndex: 0,
            totalRecords: totalCount,
            isRestoreData: true,
            uuid: _self.uuid,
          };
          _self.dynamicComponent = 'CurdWindowModal';
          _self.dynamicComponentOpen = true;


          // this.$router.push(
          //   'window-edit/create/' +
          //   this.windowNo +
          //   '/' +
          //   this.tabIndex +
          //   '?currPage=' +
          //   currPage,
          // );
        } else {
          // 如果不存在子页签，则可以直接在当前的界面上新建数据
          _self.loading = true;
          WindowServerUtil.newModelData(
            _self.windowNo,
            _self.tabIndex,
            null,
            function (response) {
              _self.loading = false;


              if (response.errorCode != 0) {
                Notify.error('数据新建异常', response.errorMessage, false);
                return;
              }
              let modelData = response.data;

              modelData.editMode = true;
              for (var i = _self.modelDatas.length; i > 0; i--) {
                _self.modelDatas[i] = _self.modelDatas[i - 1];
              }
              _self.modelDatas[0] = modelData;
              _self.dataChanged = true;
            },
            function () {
              _self.loading = false;
            },
          );
        }
      }
    },



    /**
     * 在WindowEdit界面中新增数据
     *
     */
    createRecordInWindowEdit: async function () {
      var _self = this;
      var currPage = _self.pagination.current_page;
      var totalCount = _self.pagination.total;

      var customerWindowUrl = _self.tab.customerWindowUrl;
      if (
        _self.curdWindowFunctionAccess.allowCreate === null ||
        _self.curdWindowFunctionAccess.allowCreate === undefined ||
        _self.curdWindowFunctionAccess.allowCreate === false
      ) {
        Notify.error(
          _self.$t('lang.tabGridEdit.describe4'),
          _self.$t('lang.tabGridEdit.describe5'),
          false,
        );
      } else {

        _self.dynamicComponentParam = {
          viewType: 'create',
          curdWindowNo: _self.windowNo,
          tabIndex: _self.tabIndex,
          currentPage: currPage,
          currentIndex: 0,
          totalRecords: totalCount,
          isRestoreData: true,
          uuid: _self.uuid,
        };
        _self.dynamicComponent = 'CurdWindowModal';
        _self.dynamicComponentOpen = true;

        // if (customerWindowUrl != undefined && customerWindowUrl != '') {
        //   this.$router.push(
        //     customerWindowUrl + '/create/' + this.windowNo + '/' + this.tabIndex,
        //   );
        // } else {
        //   this.$router.push(
        //     'window-edit/create/' +
        //     this.windowNo +
        //     '/' +
        //     this.tabIndex +
        //     '?currPage=' +
        //     currPage +
        //     '&totalCount=' +
        //     totalCount +
        //     '&uuid=' +
        //     this.uuid,
        //   );
        // }
      }
    },


    /**
     * 点击编辑全部按钮
     */
    editAllTabData: function () {
      var _self = this;
      if (
        _self.curdWindowFunctionAccess.allowUpdate === null ||
        _self.curdWindowFunctionAccess.allowUpdate === undefined ||
        _self.curdWindowFunctionAccess.allowUpdate === false
      ) {
        Notify.error(
          _self.$t('lang.tabGridEdit.describe6'),
          _self.$t('lang.tabGridEdit.describe7'),
          false,
        );
      } else {
        _self.modelDatas.forEach(function (item) {
          _self.editRecord(item);
        });
      }
    },

    // 编辑
    editRecord: function (modelData, index) {
      var _self = this;
      if (
        _self.curdWindowFunctionAccess.allowUpdate === null ||
        _self.curdWindowFunctionAccess.allowUpdate === undefined ||
        _self.curdWindowFunctionAccess.allowUpdate === false
      ) {
        Notify.error(
          _self.$t('lang.tabGridEdit.describe6'),
          _self.$t('lang.tabGridEdit.describe7'),
          false,
        );
      } else {
        // 如果存在子页签，则进入到新建的界面
        if (_self.window.tabs != undefined && _self.window.tabs.length > 1) {
          var currPage = _self.pagination.current_page;
          var currIndex = (currPage - 1) * Common.pageSize + index + 1;
          var totalCount = _self.pagination.total;


          _self.dynamicComponentParam = {
            viewType: 'edit',
            curdWindowNo: _self.windowNo,
            tabIndex: _self.tabIndex,
            modelDataId: modelData.id,
            currentPage: currPage,
            currentIndex: currIndex,
            totalRecords: totalCount,
            isRestoreData: _self.isRestoreData,
            uuid: _self.uuid,
          };
          _self.dynamicComponent = 'CurdWindowModal';
          _self.dynamicComponentOpen = true;


          // this.$router.push(
          //   'window-edit/edit/' +
          //   this.windowNo +
          //   '/' +
          //   this.tabIndex +
          //   '/' +
          //   modelData.id +
          //   '?currPage=' +
          //   currPage +
          //   '&currIndex=' +
          //   currIndex +
          //   '&totalCount=' +
          //   totalCount +
          //   '&uuid=' +
          //   this.uuid +
          //   '&isRestoreData=' +
          //   _self.isRestoreData,
          // );
        } else {
          if (!modelData.editMode) {
            modelData.editMode = true;
          } else {
            this.saveTabData(modelData, index);
          }
          modelData.changed = true;
          _self.dataChanged = true;
          let index1 = this.modelDatas.indexOf(modelData);
          if (index1 != -1) {
            this.modelDatas[index1] = modelData;
          }
        }
      }
    },

    // 长按打开详细
    readRecordLongTap: function (e, args) {
      this.readRecord(args.modelData, args.index);
    },

    // 只读
    readRecord: function (isRead, modelData, index) {
      var _self = this;
      const readModelData = !_self.checkDatas ? modelData : _self.checkDatas.modelData;
      if (readModelData.editMode == true) {
        return;
      }
      if (isRead) {
        var currPage = _self.pagination.current_page;
        var currIndex = (currPage - 1) * Common.pageSize + _self.checkDatas.index + 1;
        var totalCount = _self.pagination.total;

        var customerWindowUrl = _self.tab.customerWindowUrl;
        if (customerWindowUrl != undefined && customerWindowUrl != '') {
          this.$router.push(
            customerWindowUrl +
            '/view/' +
            this.windowNo +
            '/' +
            this.tabIndex +
            '/' +
            readModelData.id +
            '?currPage=' +
            currPage +
            '&currIndex=' +
            currIndex +
            '&totalCount=' +
            totalCount +
            '&uuid=' +
            this.uuid,
          );
        } else {
          let categoryNo; let categoryValue; let displayValue;

          if (readModelData.data['category']) {
            categoryValue = readModelData.data['category'];
            displayValue = categoryValue['displayValue'];
          } else if (readModelData.data['assetCategory']) {
            categoryValue = readModelData.data['assetCategory'];
            displayValue = categoryValue['displayValue'];
          } else {
            categoryNo = this.windowNo;
          }
          categoryNo = displayValue[displayValue.length - 1];

          _self.dynamicComponentParam = {
            viewType: 'view',
            curdWindowNo: categoryNo,
            tabIndex: this.tabIndex,
            modelDataId: readModelData.id,
            currentPage: currPage,
            currentIndex: currIndex,
            totalRecords: totalCount,
            isRestoreData: false,
            uuid: this.uuid,
          };
          _self.dynamicComponent = 'CurdWindowModal';
          _self.dynamicComponentOpen = true;
        }
      } else {
        _self.checkDatas = { modelData, index };
      }
    },

    /**
     * 简单搜索
     */
    simpleSearch: function () {
      var _self = this;
      _self.pagination.current_page = 1;
      _self.showComplexFilterPanel = false;
      _self.complexFilterParams = null;
      _self.queryGridData(true);
    },

    /**
     * 高级搜索
     */
    advancedSearchOk: function (filterParams) {
      var _self = this;
      _self.pagination.current_page = 1;
      _self.complexFilterParams = filterParams;
      _self.searchText = null;
      _self.queryGridData(true);
    },

    // 刷新数据
    refreshDatas: function (flag) {
      this.queryGridData(flag);
      // 刷新时传给远程模态框组件的值设为空数组
      this.selectModelDatas = [];
    },

    // 删除选择的数据
    deleteRecords: function (isAlert) {
      var _self = this;

      if (
        _self.curdWindowFunctionAccess.allowDelete === null ||
        _self.curdWindowFunctionAccess.allowDelete === undefined ||
        _self.curdWindowFunctionAccess.allowDelete === false
      ) {
        Notify.error(
          _self.$t('lang.tabGridEdit.describe8'),
          _self.$t('lang.tabGridEdit.describe9'),
          false,
        );
      } else {
        // 待删除的数据集合
        var dataPrepareDelete = [];
        _self.modelDatas.forEach(function (modelData) {
          if (modelData.select == true) {
            dataPrepareDelete.push(modelData);
          }
        });

        if (dataPrepareDelete.length == 0) {
          Notify.error(
            _self.$t('lang.tabGridEdit.describe10'),
            _self.$t('lang.tabGridEdit.describe11'),
            false,
          );
          return;
        }

        if (isAlert) {
          Notify.show({
            title: _self.$t('lang.tabGridEdit.deleteConfirmation'),
            message:
              _self.$t('lang.tabGridEdit.someWhatOne') +
              dataPrepareDelete.length +
              _self.$t('lang.tabGridEdit.someWhatTwo'),
            buttons: [
              {
                label: _self.$t('lang.tabGridEdit.determine'),
                cssClass: 'btn-primary',
                action: function (dialogItself) {
                  dialogItself.close();
                  _self.deleteRecords(false);
                },
              },
              {
                label: _self.$t('lang.tabGridEdit.cancel'),
                action: function (dialogItself) {
                  dialogItself.close();
                },
              },
            ],
          });
          return;
        }

        var repareDeleteData = [];

        for (var index = 0; index < dataPrepareDelete.length; index++) {
          if (dataPrepareDelete[index].id < 0) {
            var index1 = _self.modelDatas.indexOf(dataPrepareDelete[index]);
            if (index1 >= 0) {
              _self.modelDatas.splice(index1, 1);
            }
          } else {
            repareDeleteData.push(dataPrepareDelete[index]);
          }
        }

        var hasChanged = false;
        _self.modelDatas.forEach(function (modelData) {
          if (modelData.changed == true) {
            hasChanged = true;
          }
        });

        if (hasChanged == false) {
          _self.dataChanged = false;
        }

        if (repareDeleteData.length == 0) {
          return;
        }

        var tabDeleteData = {
          windowNo: _self.windowNo,
          tabIndex: _self.tabIndex,
          modelDatas: repareDeleteData,
        };

        _self.loading = true;

        WindowServerUtil.deleteTabData(
          tabDeleteData,
          function (result) {
            for (var index = 0; index < dataPrepareDelete.length; index++) {
              if (dataPrepareDelete[index].id > 0) {
                var index1 = _self.modelDatas.indexOf(dataPrepareDelete[index]);
                if (index1 >= 0) {
                  _self.modelDatas.splice(index1, 1);
                }
              }
            }
            _self.queryGridData(false);
            _self.loading = false;
          },
          function () {
            _self.loading = false;
          },
        );
      }
    },

    // 删除数据
    deleteRecord: function (modelData, isAlert) {
      var _self = this;
      var index = _self.modelDatas.indexOf(modelData);
      if (index == -1) {
        return;
      }

      if (
        _self.curdWindowFunctionAccess.allowDelete === null ||
        _self.curdWindowFunctionAccess.allowDelete === undefined ||
        _self.curdWindowFunctionAccess.allowDelete === false
      ) {
        Notify.error(
          _self.$t('lang.tabGridEdit.describe12'),
          _self.$t('lang.tabGridEdit.describe13'),
          false,
        );
      } else {
        if (isAlert) {
          Notify.show({
            title: _self.$t('lang.tabGridEdit.deleteConfirmation'),
            message: _self.$t('lang.tabGridEdit.someWhatThree'),
            buttons: [
              {
                label: _self.$t('lang.tabGridEdit.determine'),
                cssClass: 'btn-primary',
                action: function (dialogItself) {
                  dialogItself.close();
                  _self.deleteRecord(modelData, false);
                },
              },
              {
                label: _self.$t('lang.tabGridEdit.cancel'),
                action: function (dialogItself) {
                  dialogItself.close();
                },
              },
            ],
          });
          return;
        }

        if (modelData.id < 0) {
          _self.modelDatas.splice(index, 1);

          var hasChanged = false;
          _self.modelDatas.forEach(function (modelData) {
            if (modelData.changed == true) {
              hasChanged = true;
            }
          });

          if (hasChanged == false) {
            _self.dataChanged = false;
          }

          return;
        }

        var tabDeleteData = {
          windowNo: _self.windowNo,
          tabIndex: _self.tabIndex,
          modelDatas: [modelData],
        };
        _self.loading = true;
        WindowServerUtil.deleteTabData(
          tabDeleteData,
          function (result) {
            _self.modelDatas.splice(index, 1);
            _self.queryGridData(false);
            _self.loading = false;
          },
          function () {
            _self.loading = false;
          },
        );
      }
    },

    gridSizeSelect: function (newPageSize) {
      this.pagination.per_page = newPageSize;
      this.pagination.current_page = 1;
      localStorage.setItem(`CurdWindowPageSize${this.windowNo}`, newPageSize);
      // 刷新界面
      // this.queryGridData(true);
    },

    propertyChanged: function (changeEvent) {
      GridColumnDefUtil.restoreTabGridFieldDef(
        this.windowNo,
        this.tabIndex,
        this.tabGridFields,
      );
    },

    onSort: function (gridFieldItem) {
      var _self = this;
      _self.sortStr = gridFieldItem.fieldName + _self.sortStyle;
      _self.queryGridData(true);
      _self.sortStyle = _self.sortStyle == ' ASC' ? ' DESC' : ' ASC';
    },

    // 表格中选择了一行
    clickModelData: function (modelData) {
      var _self = this;
      var currentStatus = modelData.select;
      if (!_self.multipleSelect) {
        _self.modelDatas.forEach(function (item) {
          item.select = false;
        });
      }
      modelData.select = !currentStatus;

      if (modelData.select === true) {
        this.selectModelDatas.push(modelData);
      } else {
        this.selectModelDatas.forEach((item, index) => {
          if (item.id === modelData.id) {
            this.selectModelDatas.splice(index, 1);
          }
        });
      }
    },

    /**
     * 全选/取消全选
     * @param  {Boolean} val 状态
     * @return {void}
     */
    selectAll: function (val) {
      var _self = this;
      _self.modelDatas.forEach(function (item) {
        item.select = val;
      });
    },

    /**
     * 验证数据
     * @return {Array} Promises
     */
    performValidate: function (index) {
      var _self = this;
      var validatePromises = [];
      if (this.$refs.gridBody != undefined) {
        if (_self.modelDatas[index].changed == true) {
          var validatePromises1 = this.$refs.gridBody[index].performValidate();
          validatePromises = validatePromises.concat(validatePromises1);
        }
      }
      return validatePromises;
    },

    /**
     * 验证所有数据
     * @return {void}
     */
    performValidateAll: function () {
      var _self = this;
      var validatePromises = [];
      if (_self.$refs.gridBody != undefined) {
        for (var i = 0, len = _self.$refs.gridBody.length; i < len; i++) {
          if (_self.modelDatas[i].changed == true) {
            var validatePromises1 = _self.$refs.gridBody[i].performValidate();
            validatePromises = validatePromises.concat(validatePromises1);
          }
        }
      }
      return validatePromises;
    },

    /**
     * 值改变事件
     * @param  {[type]} event     [description]
     * @param  {[type]} modelData [description]
     * @return {[type]}           [description]
     */
    valueChanged: function (event, modelData, index) {
      var gridFieldItem = event.gridFieldItem;
      var newFieldValue = event.newFieldValue;
      var oldFieldValue = modelData.data[gridFieldItem.fieldName];
      if (FieldUtil.isFieldValueEqual(newFieldValue, oldFieldValue) == false) {
        modelData.data[gridFieldItem.fieldName] = newFieldValue;
        if (
          gridFieldItem.calloutProcessReportNo != undefined &&
          gridFieldItem.calloutProcessReportNo != null
        ) {
          this.callout(gridFieldItem.calloutProcessReportNo, modelData, index);
        }

        if (
          gridFieldItem.calloutLogical != undefined &&
          gridFieldItem.calloutLogical != null
        ) {
          this.executeCalloutJs(
            gridFieldItem,
            gridFieldItem.calloutLogical,
            modelData,
          );
        }
      }
    },

    /**
     * 执行JS Callout
     */
    executeCalloutJs: function (gridFieldItem, scriptText, modelData) {
      var _self = this;

      let functionName =
        gridFieldItem.fieldName.replace('.', '_') + '_calloutjs';
      let executeFunction = function () {
        let context = new _self.getContext(modelData);
        try {
          _self[functionName](context);
        } catch (error) {
          console.error(error);
          Notify.error(
            '数据字典定义异常',
            '【' +
            scriptText +
            '】Callout前端逻辑定义异常,请联系管理员检查数据字典的定义。',
            false,
          );
        }
      };
      if (_self[functionName] == null) {
        // 执行服务端的脚本
        const jsUrl = _self.jsUrl;
        if (jsUrl == null || jsUrl == undefined) {
          Notify.error(
            '数据字典定义异常',
            '【' +
            scriptText +
            '】Callout前端逻辑的JS文件不存在,请联系管理员检查数据字典是否存在JS文件。',
            false,
          );
          return;
        }
        let promise = JsUtil.dynamicLoadJsFunction(jsUrl, scriptText);
        promise.then(
          targetFunction => {
            if (targetFunction == null) {
              Notify.error(
                '数据字典定义异常',
                '【' +
                scriptText +
                '】Callout前端逻辑定义异常,请联系管理员检查数据字典的定义。',
                false,
              );
              return;
            }
            _self[functionName] = targetFunction;
            executeFunction();
          },
          errorData => {
            console.error(errorData);
          },
        );
      } else {
        executeFunction();
      }
    },

    /**
     * callout
     * @param  {[type]} calloutProcessReportNo [description]
     * @return {[type]}                  [description]
     */
    callout: function (calloutProcessReportNo, modelData, index) {
      var _self = this;

      // 查询流程和报表的定义
      ProcessReportResource.uniqueByNo(calloutProcessReportNo).then(
        successData => {
          if (successData == null) {
            return;
          }

          // 执行服务端的脚本
          ProcessReportResource.runCallout(
            calloutProcessReportNo,
            modelData,
          ).then(
            successData => {
              if (successData && successData.modelData) {
                var newModelData = successData.modelData;
                newModelData.editMode = modelData.editMode;
                _self.modelDatas[index] = newModelData;
              }
            },
            errorData => {
              Common.processException(errorData);
            },
          );
        },
        errorData => {
          _self.loading = false;
          Common.processException(errorData);
        },
      );
    },

    /**
     * 保存所有数据
     * @return {void}
     */
    saveAllTabData: function () {
      var _self = this;
      var promises = [];
      var error = 0;
      var subTabPromises = _self.performValidateAll();
      if (subTabPromises != undefined) {
        subTabPromises.forEach(function (tabPromise) {
          if (tabPromise != true) {
            error++;
          }
        });
      }

      if (error == 0) {
        executeSave();
      } else {
        _self.errorCount = error;
        _self.modal1 = true;
      }

      function executeSave() {
        _self.loading = true;
        var modelDatas = _self.modelDatas;
        var tabSaveDatas = [];

        modelDatas.forEach(function (item) {
          //item.editMode = false;
          if (item.changed) {
            var tabSaveData = {
              attributeValueDtos: null,
              persistenceData: item,
            };
            tabSaveDatas.push(tabSaveData);
          }
        });
        if (tabSaveDatas.length > 0) {
          WindowServerUtil.saveTabDatas(
            tabSaveDatas,
            function (id) {
              _self.queryGridData(false);
              _self.loading = false;
              Notify.success(
                _self.$t('lang.tabGridEdit.describe14'),
                _self.$t('lang.tabGridEdit.describe15'),
                1500,
              );
            },
            function () {
              _self.loading = false;
            },
          );
        } else {
          _self.loading = false;
          Notify.error(
            _self.$t('lang.Notify.error'),
            _self.$t('lang.tabGridEdit.describe16'),
            true,
          );
        }
      }
    },

    /**
     * 保存数据
     * @param  {[type]} modelData [description]
     * @return {[type]}           [description]
     */
    saveTabData: function (modelData, index) {
      var _self = this;

      var promises = [];
      var error = 0;
      var subTabPromises = _self.performValidate(index);
      if (subTabPromises != undefined) {
        subTabPromises.forEach(function (tabPromise) {
          if (tabPromise != true) {
            error++;
          }
        });
      }

      if (error == 0) {
        executeSave();
      } else {
        _self.errorCount = error;
        _self.modal1 = true;
      }

      function executeSave() {
        modelData.editMode = false;
        modelData.changed = true;
        var tabSaveData = {
          attributeValueDtos: null,
          persistenceData: modelData,
        };
        _self.loading = true;
        WindowServerUtil.saveTabData(
          tabSaveData,
          function (id) {
            var tabLoadParam = {
              windowNo: _self.windowNo,
              tabIndex: modelData.tabIndex,
              recordId: id,
            };

            WindowServerUtil.loadTabSingleData(
              tabLoadParam,
              function (modelDataSaved) {
                Notify.success(
                  _self.$t('lang.tabGridEdit.describe14'),
                  _self.$t('lang.tabGridEdit.describe15'),
                  1500,
                );

                var index = _self.modelDatas.indexOf(modelData);

                modelDataSaved.editMode = false;
                modelDataSaved.changed = false;

                if (index != -1) {
                  _self.modelDatas[index] = modelDataSaved;
                }

                _self.loading = false;
                _self.dataChanged = false;
              },
              function () {
                _self.loading = false;
              },
            );
          },
          function () {
            _self.loading = false;
          },
        );
      }
    },

    /**
     * 在离开路由之前，判断数据是否已保存
     */
    hasDataChanged: function () {
      var _self = this;
      if (_self.refreshCommand == false && _self.dataChanged == true) {
        return true;
      } else {
        return false;
      }
    },

    /**
     * 执行Callout
     */
    executeCallout: function (gridFieldItem, modelData, index) {
      var _self = this;
      if (gridFieldItem.calloutProcessReportNo != null) {
        _self.callout(gridFieldItem.calloutProcessReportNo, modelData, index);
      }
    },

    backupView: function () {
      let _self = this;
      // 请勿修改，会影响生单的功能
      let key = _self.uuid + '_modelDatas';
      let userStorageDtos = [
        {
          key: key,
          value: JSON.stringify(_self.modelDatas),
        },
      ];
      UserStorageResource.uploadUserStorage(userStorageDtos).then(
        successData => { },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    judgeIsHaveButtons: function (flag) {
      this.isHaveButtons = flag;
    },
  },
};
</script>

<style scoped>
.grid-container {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 17px 0px;
  grid-template-rows: 40px 40px auto 40px;
  gap: 5px;
  justify-items: stretch;
  align-items: stretch;
  height: calc(100vh - 154px);
}

.grid-item-row1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
}

.grid-item-row2 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 4;
}

.grid-item-row3-column1 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3;
  overflow: auto;
}

.grid-item-row3-column2 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  overflow: hidden;

  border: 1px solid #ddd;
  border-radius: 4px;
}

.grid-item-row4 {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 4;
}

.operationClass,
.button_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tableFixHead {
  margin-top: -6px;
}

:deep( :where(.css-dev-only-do-not-override-16pw25h).ant-breadcrumb .ant-breadcrumb-link > .anticon + span,
  :where(.css-dev-only-do-not-override-16pw25h).ant-breadcrumb .ant-breadcrumb-link > .anticon + a) {
  color: black;
}

:deep( :where(.css-dev-only-do-not-override-16pw25h)[class^="ant-breadcrumb"] [class^="ant-breadcrumb"]) {
  padding: 3px 10px;
}

:deep( :where(.css-dev-only-do-not-override-16pw25h)[class^="ant-breadcrumb"] [class^="ant-breadcrumb"]:hover) {
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

:deep( :where(.css-dev-only-do-not-override-16pw25h).ant-breadcrumb .ant-breadcrumb-separator) {
  padding: 0px !important;
  margin-inline: 2px !important;
}

:deep( :where(.css-dev-only-do-not-override-16pw25h).ant-breadcrumb .ant-breadcrumb-separator:hover) {
  border: none;
  cursor: none;
}

:deep(.ant-pagination-options-quick-jumper) {
  margin-right: -18px !important;
}
</style>