client-base-v5/src/window/tabGridView/SubTabGridEdit.vue

<template>
  <div class="panel panel-default">
    <div class="panel-heading" @click="collapse = !collapse">
      {{ Language.getNameTrl($i18n.locale, tab) }}
    </div>
    <div v-if="!collapse" class="panel-body">
      <div
        class="grid-container"
        :style="{ 'padding-right': showComplexFilterPanel == true ? '360px' : '0px' }"
      >
        <div class="grid-item-row1">
          <SimpleFilterPanel
            v-model:searchText="searchText"
            :disabled="showComplexFilterPanel == true"
            :window-no="windowNo"
            :tab-index="tabIndex"
            :filter-schema="tab.filterSchema"
            class="m-row"
            @simple-search="simpleSearch"
            @show-complex-filter-panel="showComplexFilterPanel = true"
          />
        </div>
        <div class="grid-item-row2">
          <div class="row m-row">
            <div class="col-md-12 table-toolbar">
              <div class="btn-group toolbar-button-group-left" role="group">
                <button
                  v-if="canEdit"
                  type="button"
                  class="btn btn-primary"
                  @click="newModelData"
                >
                  {{ $t("lang.subTabGridEdit.create") }}
                </button>
                <button
                  v-if="canEdit"
                  type="button"
                  class="btn btn-danger"
                  @click="deleteRecords(true)"
                >
                  {{ $t("lang.subTabGridEdit.remove") }}
                </button>
                <button
                  v-if="canEdit"
                  type="button"
                  class="btn btn-info"
                  @click="queryGridData"
                >
                  {{ $t("lang.subTabGridEdit.revert") }}
                </button>
                <button
                  v-if="canEdit"
                  type="button"
                  class="btn btn-primary"
                  @click="editAllTabData"
                >
                  {{ $t("lang.subTabGridEdit.editAll") }}
                </button>
                <button type="button" class="btn btn-default" @click="queryGridData">
                  {{ $t("lang.subTabGridEdit.refresh") }}
                </button>

                <TabButton
                  :show-tab-dto="tab"
                  :model-datas="modelDatas"
                  :parent-model-data="parentModelData"
                  :uuid="uuid"
                  :view-type="'Grid'"
                  :tab-buttons="tab.tabGridView ? tab.tabGridView.tabButtons : null"
                  @save-view="$emit('saveView')"
                  @process-execute-finish="refreshParent"
                />

                <GridColumnDef
                  :tab-grid-fields="tabGridFields"
                  :window-no="windowNo"
                  :tab-index="tabIndex"
                  @property-changed="propertyChanged($event)"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="grid-item-row3-column1">
          <div class="row">
            <div
              :id="scrollObject.tableOutDivUuid1"
              ref="tableContainer1"
              class="col-md-12"
            >
              <div :id="scrollObject.tableOutDivUuid2" ref="tableContainer2">
                <table
                  id="fixedTbody"
                  class="fixed-table table-striped table-bordered float-table"
                  :width="tableWidth"
                >
                  <thead>
                    <GridHeader
                      :is-show-edit="canEdit"
                      :tab-grid-fields="tabGridFields"
                      :window-no="windowNo"
                      :tab-index="tabIndex"
                      :parent-model-data="parentModelDataClone"
                      :is-chinese-english="isChineseEnglish"
                      height="40px"
                      @on-sort="onSort($event)"
                      @property-changed="propertyChanged($event)"
                      @select-all="selectAll($event)"
                      @multiple-select="changeSelectMode($event)"
                    />
                  </thead>
                  <tfoot>
                    <GridFooter
                      v-for="index in [1, 2, 3]"
                      :key="'footer' + index"
                      :tab-grid-fields="tabGridFields"
                      :is-show-edit="canEdit"
                      height="40px"
                    />
                  </tfoot>
                  <tbody>
                    <template v-for="(modelData, index) in modelDatas">
                      <GridBody
                        v-if="modelData.deleted != true && modelData.visible == true"
                        ref="gridBody1"
                        :key="modelData.id + '_' + index"
                        :is-show-edit="canEdit"
                        :serial-number="
                          index + 1 + (pagination.current_page - 1) * pagination.per_page
                        "
                        :window-no="windowNo"
                        :tab-index="tabIndex"
                        :tab-grid-fields="tabGridFields"
                        :model-data="modelData"
                        :parent-model-data="parentModelDataClone"
                        height="40px"
                        :class-name="tab.tabDataSource.className"
                        :scroll-object="scrollObject"
                        :js-url="jsUrl"
                        @delete-record="deleteRecord(modelData, true)"
                        @edit-record="editRecord(modelData, tabGridFields)"
                        @click-model-data="clickModelData(modelData)"
                        @value-changed="valueChanged($event, modelData, index)"
                        @execute-callout="executeCallout($event, modelData, index)"
                      />
                    </template>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div
          v-if="tab != null && tab.filterSchema != null"
          class="grid-item-row3-column2"
        >
          <div
            style="
              position: relative;
              top: 50%;
              transform: translateY(-50%);
              cursor: pointer;
              user-select: none;
            "
            @click="showComplexFilterPanel = !showComplexFilterPanel"
          >
            <span
              class="glyphicon glyphicon-chevron-left"
              :class="{
                'glyphicon-chevron-left': showComplexFilterPanel == false,
                'glyphicon-chevron-right': showComplexFilterPanel == true,
              }"
              aria-hidden="true"
            />
          </div>
        </div>

        <a-drawer
          v-model:visible="showComplexFilterPanel"
          :title="$t('lang.subTabGridEdit.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 class="grid-item-row4">
          <div class="row" style="margin-top: 10px">
            <div class="col-md-12">
              <div class="pull-left">
                <span>{{ $t("lang.subTabGridEdit.the") }}
                  <a class="a-audit" @click="auditData">{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
                    pagination.current_page * pagination.per_page
                  }}</a>
                  {{ $t("lang.subTabGridEdit.strip") }},{{ $t("lang.subTabGridEdit.total") }}
                  {{ pagination.total }} {{ $t("lang.subTabGridEdit.strip") }},{{ $t("lang.subTabGridEdit.displayOnEachPage") }}</span>
                <PageSizeSelect @page-size-changed="gridSizeSelect" />
                <span>{{ $t("lang.subTabGridEdit.strip") }}</span>
              </div>

              <div class="pull-right">
                <VueBootstrapPagination
                  :pagination="pagination"
                  :callback="queryGridData"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <template v-if="tab.subTabs != undefined">
        <div v-for="(subTab, index) in tab.subTabs" :key="'sub-tab-' + index" class="row">
          <div class="col-md-12">
            <SubTabGridEdit
              :ref="'subTab' + subTab.tabIndex"
              :is-show-edit="canEdit"
              :tab="subTab"
              :parent-model-data="selectModelData"
              :parent-tab="tab"
              :window-no="windowNo"
              :tab-index="subTab.tabIndex"
              @save-view="$emit('saveView')"
              @save-record-event="saveRecordEvent"
              @refresh-parent="refreshParent"
              @property-changed="propertyChanged"
            />
          </div>
        </div>
      </template>

      <Modal v-model:show="modal" @ok="saveRecord" @cancel="discardChildChangedData">
        <template #header> 请选择 </template>
        <div>您修改了子表格的数据，请先‘保存’数据，或者点击‘取消’按钮。</div>
      </Modal>

      <Modal v-model:show="modal1">
        <template #header> 无父页签/父表格的数据 </template>
        <div>请先选择父页签/父表格的数据</div>
      </Modal>

      <Modal v-model:show="modal3">
        <template #header> 数据校验失败 </template>
        <div>子表格的数据存在必填字段没有填写</div>
      </Modal>
    </div>

    <Modal
      v-model:show="modal2"
      :large="true"
      @ok="showAuditPanel = false"
      @cancel="showAuditPanel = false"
    >
      <template #header>
        记录信息{{ currIndex }}/{{ pagination.total }} - {{ tab.name }}
      </template>
      <TabAudit v-if="showAuditPanel" :tab="tab" :model-data="auditModelData" />
    </Modal>

    <Loading v-if="loading" />
  </div>
</template>

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

import FieldUtil from '../../resource/dictionary/FieldUtil.js';
import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import WindowServerUtil from '../../resource/dictionary/WindowServerUtil.js';

import ProcessReportResource from '../../api/dic/ProcessReportResource.js';
import CurdWindowEditResource from '../../api/dic/CurdWindowEditResource.js';
import Context from '../common/Context.js';
import Language from '../../common/Language.js';

import SimpleFilterPanel from '../filter/SimpleFilterPanel.vue';

import GridHeader from '../tabGridView/GridHeader.vue';
import GridBody from '../tabGridView/GridBody.vue';
import GridFooter from '../tabGridView/GridFooter.vue';
import GridColumnDef from '../tabGridView/GridColumnDef.vue';
import GridColumnDefUtil from '../tabGridView/GridColumnDef.js';
import TabButton from '../tabView/TabButton.vue';

import TabAudit from '../tabView/TabAudit.vue';
import ComplexFilterPanel from '../filter/ComplexFilterPanel.vue';
import JsUtil from '../../common/JsUtil.js';
import { Notify, Uuid } from 'pc-component-v3';
export default {
  name: 'SubTabGridEdit',

  components: {
    TabButton,
    GridHeader,
    GridBody,
    GridFooter,
    GridColumnDef,
    TabAudit,
    SimpleFilterPanel,
    ComplexFilterPanel,
  },

  props: {
    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    tab: {
      type: Object,
      default: function () {
        return null;
      },
    },
    parentTab: {
      type: Object,
      default: function () {
        return null;
      },
    },
    parentModelData: {
      type: Object,
      default: function () {
        return null;
      },
    },
    isShowEdit: {
      type: Boolean,
      default: null,
    },
    jsUrl: {
      type: String,
      default: null,
    },
    isChineseEnglish: {
      type: Boolean,
      default: null,
    },
  },

  emits: ['saveView', 'changeRootParentModelData', 'saveRecordEvent', 'propertyChanged'],

  data: function () {
    this.Language = Language;
    return {
      tabGridFields: WindowClientUtil.getGridField(this.tab), //字段
      modelDatas: [],
      collapse: false,
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 5, // required
      },
      sortStr: '', // 排序
      selectModelData: {}, // 当前选择的ModelData
      prepareSelectModelData: {}, // 选中ModelData，未生效前的数据
      sortStyle: ' ASC', //排列方式
      uuid: Uuid.createUUID(), // 创建UUID
      scrollObject: {
        // 表格滚动
        tableOutDivUuid1: Uuid.createUUID(), // table 的 uuid
        tableOutDivUuid2: Uuid.createUUID(), // table 外部 DIV 的 uuid
      },
      multipleSelect: true,
      showAuditPanel: false,
      auditModelData: {},
      currIndex: 0,
      showComplexFilterPanel: false, // 是否显示复杂查询面板
      parentModelDataClone: null,
      loading: false,
      modal: false,
      modal1: false,
      modal2: false,
      modal3: false,

      searchText: '', // 简单过滤条件
    };
  },

  computed: {
    tableWidth: function () {
      // 第一列和第二列
      var totalWidth = 30 + 95;
      if (this.tabGridFields != null && this.tabGridFields.length != 0) {
        this.tabGridFields.forEach(function (gridFieldItem) {
          // 列显示的时候才计算宽度
          if (gridFieldItem.visible) {
            totalWidth += Number(gridFieldItem.width);
          }
        });
      }
      return totalWidth + 'px';
    },

    /**
     * 表格是否可编辑
     * @return
     */
    canEdit: function () {
      if (this.isShowEdit == false) {
        return false;
      }
      if (
        this.tab != undefined &&
        this.tab.tabDataSource != null &&
        this.tab.tabDataSource.readOnly == false
      ) {
        return true;
      }
      return false;
    },

    parentModelDataStringCopy() {
      return JSON.stringify(this.parentModelData);
    },
  },

  watch: {
    parentModelDataStringCopy: {
      handler: function (newValue, oldValue) {
        if (newValue != oldValue) {
          this.parentModelDataClone = JSON.parse(newValue);
        }
      },
      deep: true,
    },

    // 监控父页签的数据，如果父页签的数据发生改变，则更新列表
    parentModelData: {
      handler: function (newValue, oldValue) {
        let needQuery = true;
        console.log(newValue);
        if (newValue != null && newValue.restore == true) {
          needQuery = false;
        }

        if (needQuery) {
          this.$nextTick(function () {
            this.queryGridData();
          });
        }
      },
      immediate: true,
    },
    
    
    
    
    showComplexFilterPanel: function (newValue, oldValue) {
      localStorage.setItem('showComplexFilterPanel', newValue ? 'true' : 'false');
    },
  },

  mounted: function () {
    var _self = this;

    console.log('SubTabGridEdit mounted.');

    this.tabGridFields = WindowClientUtil.getGridField(this.tab);
    GridColumnDefUtil.restoreTabGridFieldDef(
      this.windowNo,
      this.tabIndex,
      this.tabGridFields,
    );
    _self.showComplexFilterPanel =
      localStorage.getItem('showComplexFilterPanel') == 'true';
  },

  methods: {
    getContext: Context,

    auditData: function () {
      var _self = this;
      var selectedDatas = [];
      _self.modelDatas.forEach(function (modelData) {
        if (modelData.select == true) {
          selectedDatas.push(modelData);
        }
      });
      if (selectedDatas.length == 0 || selectedDatas.length > 1) {
        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.subTabGridEdit.describe1'), true);
      } else {
        _self.auditModelData = selectedDatas[0];

        var index = _self.modelDatas.indexOf(_self.auditModelData);
        if (index < 0) {
          index = 1;
        }
        _self.currIndex =
          (_self.pagination.current_page - 1) * _self.pagination.per_page + 1 + index;
        _self.showAuditPanel = true;
        _self.modal2 = true;
      }
    },

    // 改变多选/单选
    changeSelectMode: function (val) {
      this.multipleSelect = val;
    },

    newModelData: function () {
      var _self = this;
      // 如果 parentModelData 无数据，则不允许新建
      if (this.parentModelData == undefined || this.parentModelData.id == undefined) {
        this.modal1 = true;
      } else {
        _self.loading = true;
        WindowServerUtil.newModelData(
          _self.windowNo,
          _self.tabIndex,
          function (modelData) {
            modelData.editMode = true;
            modelData.visible = true;
            modelData.tabIndex = _self.tabIndex;
            modelData.changed = true;
            _self.loading = false;
            _self.modelDatas[_self.modelDatas.length] = modelData;
          },
          function () {
            _self.loading = false;
          },
        );
      }
    },

    /**
     * 将fieldValue添加到新的modelData中
     * @param {Object} fieldName
     * @param {Object} fieldValue
     */
    newModelDataFieldValue: function (fieldName, fieldValue) {
      var _self = this;
      // 如果 parentModelData 无数据，则不允许新建
      if (this.parentModelData == undefined || this.parentModelData.id == undefined) {
        this.modal1 = true;
      } else {
        _self.loading = true;
        WindowServerUtil.newModelData(
          _self.windowNo,
          _self.tabIndex,
          function (modelData) {
            modelData.editMode = true;
            modelData.visible = true;
            modelData.tabIndex = _self.tabIndex;
            modelData.data[fieldName] = fieldValue;
            _self.loading = false;
            _self.modelDatas[_self.modelDatas.length] = modelData;
          },
          function () {
            _self.loading = false;
          },
        );
      }
    },

    gridSizeSelect: function (newPageSize) {
      this.pagination.per_page = newPageSize;
      this.pagination.current_page = 1;
      // 刷新界面
      // this.queryGridData();
    },

    // 改变表格行元素的编辑状态
    editRecord: function (modelData, fieldItems) {
      if (modelData.visible == null) {
        modelData.visible = true;
      }
      if (modelData.editMode == undefined) {
        modelData.editMode = true;
      } else {
        var flag = true;
        if (modelData.editMode == true && fieldItems) {
          fieldItems.forEach(function (fieldItem) {
            if (fieldItem.mandatory == true) {
              if (
                FieldUtil.isSelectType(fieldItem) ||
                FieldUtil.isSearchType(fieldItem)
              ) {
                var idValue =
                  modelData.data == undefined ||
                  modelData.data[fieldItem.fieldName] == undefined
                    ? undefined
                    : modelData.data[fieldItem.fieldName].id;
                if (idValue == undefined || idValue == '' || idValue < 1) {
                  flag = false;
                }
              } else {
                var stringValue =
                  modelData.data == undefined ||
                  modelData.data[fieldItem.fieldName] == undefined
                    ? ''
                    : modelData.data[fieldItem.fieldName].displayValue[0];
                if (stringValue == undefined || stringValue === '') {
                  flag = false;
                }
              }
            }
          });
          if (!flag) {
            this.modal3 = true;
            return;
          }
        }
        modelData.editMode = !modelData.editMode;
      }
      modelData.changed = true;
      var index = this.modelDatas.indexOf(modelData);
      if (index != -1) {
        this.modelDatas[index] = modelData;
      }
    },

    // 值改变事件
    valueChanged: function (event, modelData, index) {
      var _self = this;
      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;
        // modelData.data[gridFieldItem.fieldName] = newFieldValue;
        if (
          gridFieldItem.calloutProcessReportNo != undefined &&
          gridFieldItem.calloutProcessReportNo != null
        ) {
          _self.callout(gridFieldItem.calloutProcessReportNo, modelData, index);
        }

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

        // 遍历所有的字段，判断是否有动态约束
        // 如果有关联的动态约束，则清空字段
        var fieldName0 = gridFieldItem.fieldName;
        _self.tabGridFields.forEach(function (item) {
          var fieldName1 = item.fieldName;
          var dynamicValidFields = item.dynamicValidFields;
          if (
            fieldName0 != fieldName1 &&
            dynamicValidFields != undefined &&
            dynamicValidFields.indexOf(fieldName0) >= 0
          ) {
            modelData.data[fieldName1].id = undefined;
            if (modelData.data[fieldName1].displayValue != undefined) {
              modelData.data[fieldName1].displayValue.splice(
                0,
                modelData.data[fieldName1].displayValue.length,
              );
            } else {
              modelData.data[fieldName1].displayValue = [];
            }
            _self.modelDatas[index] = modelData;
          }
        });
      }
    },

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

      let functionName = gridFieldItem.fieldName.replace('.', '_') + '_calloutjs';
      let exeuteFunction = function(){
        let actions = {
          changeParentModelData: _self.changeParentModelData,
          modelDatas: _self.modelDatas,
        };
        let context = new _self.getContext(modelData, actions);
        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;
            exeuteFunction();
            
          },
          errorData => {
            console.error(errorData);
          },
        );
      } else {
        exeuteFunction();
      }
    },

    /**
     * 修改父页签的数据
     */
    changeParentModelData: function (fieldName, fieldValue) {
      let param = {
        fieldName: fieldName,
        fieldValue: fieldValue,
      };
      this.$emit('changeRootParentModelData', param);
    },

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

      // 查询流程和报表的定义
      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;
                newModelData.visible = modelData.visible;
                _self.modelDatas[index] = newModelData;
              }
              _self.loading = false;
            },
            errorData => {
              _self.loading = false;
              Common.processException(errorData);
            },
          );
        },
        errorData => {
          _self.loading = false;
          Common.processException(errorData);
        },
      );
    },

    /**
     * 获取子页签所有的数据
     */
    getAllModelData: function () {
      var _self = this;
      // 发生改变的modelData
      var allModelDatas = [];
      this.modelDatas.forEach(function (tempModelData) {
        allModelDatas.push(tempModelData);
      });
      return allModelDatas;
    },

    // 获取发生改变的数据
    getChangedModelData: function () {
      var _self = this;
      // 发生改变的modelData
      var changedModelDatas = [];
      this.modelDatas.forEach(function (tempModelData) {
        if (tempModelData === _self.selectModelData) {
          var subTabChangedData = _self.getSubTabChangedData();
          if (subTabChangedData.length > 0) {
            tempModelData.changed = true;
            tempModelData.saveDatas = subTabChangedData;
          } else {
            tempModelData.saveDatas = null;
          }
        }

        if (tempModelData.changed == true) {
          changedModelDatas.push(tempModelData);
        }
      });
      return changedModelDatas;
    },

    // 获取子页签发生改变的数据
    getSubTabChangedData: function () {
      var subTabChangedRecords = [];
      if (this.tab.subTabs != undefined) {
        for (var index = 0; index < this.tab.subTabs.length; index++) {
          var subTabId = 'subTab' + this.tab.subTabs[index].tabIndex;
          var modelDatas = this.$refs[subTabId][0].getChangedModelData();
          if (modelDatas != undefined && modelDatas.length > 0) {
            modelDatas.forEach(function (modelData) {
              subTabChangedRecords.push(modelData);
            });
          }
        }
      }
      return subTabChangedRecords;
    },

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

      if (isAlert) {
        // 获取数据改动的数量
        var changedCount = 0;
        for (var i = 0, len = _self.modelDatas.length; i < len; i++) {
          if (_self.modelDatas[i].changed == true) {
            changedCount++;
          }
        }
        var message = '';
        if (changedCount > 0) {
          message = _self.$t('lang.subTabGridEdit.describe2',{changedCount:changedCount});
        }

        message =
          message +
          _self.$t('lang.subTabGridEdit.someWhatThree');

        Notify.show({
          title:_self.$t('lang.subTabGridEdit.deleteConfirmation'),
          message: message,
          buttons: [
            {
              label: _self.$t('lang.subTabGridEdit.determine'),
              cssClass: 'btn-primary',
              action: function (dialogItself) {
                dialogItself.close();
                _self.deleteRecord(modelData, false);
              },
            },
            {
              label: _self.$t('lang.subTabGridEdit.cancel'),
              action: function (dialogItself) {
                dialogItself.close();
              },
            },
          ],
        });
        return;
      }

      if (modelData.id < 0) {
        this.modelDatas.splice(index, 1);
        return;
      }

      modelData.deleted = true;
      modelData.changed = true;
    },

    // 删除选择的数据(多删)
    deleteRecords: function (isAlert) {
      var _self = this;
      // 待删除的数据集合
      var dataPrepareDelete = [];
      _self.modelDatas.forEach(function (modelData) {
        if (modelData.select == true) {
          dataPrepareDelete.push(modelData);
        }
      });

      if (dataPrepareDelete.length == 0) {
        Notify.error(_self.$t('lang.subTabGridEdit.noDataSelected'), _self.$t('lang.subTabGridEdit.describe3'), false);
        return;
      }

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

      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 {
          dataPrepareDelete[index].deleted = true;
          dataPrepareDelete[index].changed = true;
        }
      }
    },

    /**
     * 子页签触发父页签刷新
     * @return {[type]} [description]
     */
    refreshParent: function () {
      var _self = this;
      //   _self.queryGridData();
      _self.$emit('processExecuteFinish');
    },

    // 根据查询参数获取数据模型
    queryGridData: function () {
      var _self = this;

      // 如果没有父页签的数据，则清空界面
      if (_self.parentModelData == undefined || _self.parentModelData.id == undefined) {
        _self.modelDatas.splice(0, _self.modelDatas.length);
        _self.selectModelData = {};
        return;
      }

      // 简单过滤条件

      // 简单过滤条件
      let simpleFilterCondition = null;
      let filterParams = null;
      if (_self.showComplexFilterPanel == true) {
        if (_self.$refs.complexFilterPanel != null) {
          filterParams = _self.$refs.complexFilterPanel.getFilterParams();
        }
      } else {
        simpleFilterCondition = _self.searchText;
      }

      // 首先判断是否有未保存的数据
      // 如果有未保存的数据，则不能从服务器上进行查询
      for (let row = 0, len = _self.modelDatas.length; row < len; row++) {
        let rowData = _self.modelDatas[row];
        if (rowData.id < 0 && rowData.deleted != true) {
          // 数据未保存，且未删除
          let rowDataStr = JSON.stringify(rowData);
          if (rowDataStr.indexOf(simpleFilterCondition) >= 0) {
            rowData.visible = true;
          } else {
            rowData.visible = false;
          }
        }
        // 如果表格数据已经保存过了，那么直接移除掉。
        if (rowData.id > 0) {
          _self.modelDatas.splice(row, 1);
          row--;
          len--;
        }
      }

      var tabQueryParam = {
        range: {
          start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
          length: _self.pagination.per_page,
        },
        windowNo: _self.windowNo,
        tabIndex: _self.tabIndex,
        parentColumnId:
          _self.parentModelData == undefined ? undefined : _self.parentModelData.id,
        filterParams: filterParams,
        simpleFilterCondition: simpleFilterCondition,
        sortStr: _self.sortStr,
        isHasWorkflow: true,
      };

      $.ajax({
        url: Common.getApiURL('CurdWindowResource/tabData'),
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(tabQueryParam),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          var modelDatas = data.dataList;
          WindowClientUtil.setViewDisplayAttribute(modelDatas, 'editMode', false);
          WindowClientUtil.setViewDisplayAttribute(modelDatas, 'select', false);
          WindowClientUtil.setViewDisplayAttribute(modelDatas, 'visible', true);

          //绑定数据模型信息
          //绑定数据模型信息
          modelDatas.forEach(function (modelDataItem) {
            _self.modelDatas.push(modelDataItem);
          });
          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(data.totalSize / data.range.length);

          // 恢复选定的数据
          if (modelDatas == undefined || modelDatas.length == 0) {
            _self.selectModelData = {};
          } else {
            if (
              _self.selectModelData != undefined &&
              _self.selectModelData.id != undefined
            ) {
              var lastSelectedId = _self.selectModelData.id;
              modelDatas.forEach(function (tempData) {
                if (tempData.id == lastSelectedId) {
                  _self.selectModelData = tempData;
                  _self.selectModelData.select = true;
                }
              });
            }
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    // 点击了ModelData属性
    clickModelData: function (modelData) {
      var _self = this;
      var currentIsSelect = modelData.select;
      if (!_self.multipleSelect) {
        _self.modelDatas.forEach(function (item) {
          item.select = false;
        });
      }
      _self.prepareSelectModelData = modelData;
      _self.prepareSelectModelData.select = currentIsSelect;
      _self.checkChildrenTabIsChanged();
    },

    // 检查子页签数据是否发生改变
    checkChildrenTabIsChanged: function () {
      // 获取子页签的数据
      var changedModelDatas = this.getSubTabChangedData();
      if (changedModelDatas != undefined && changedModelDatas.length > 0) {
        // 弹出对话框,是否保存数据，或者放弃
        // 如果点击保存数据，则触发父页签保存数据
        this.modal = true;
        // 如果点击放弃，则放弃页签改变的数据
      } else {
        // 无改变的数据
        this.discardChildChangedData();
      }
    },

    // 冒泡传递保存事件
    saveRecord: function () {
      this.prepareSelectModelData.changed = true;
      this.prepareSelectModelData = {};
      this.$emit('saveRecordEvent', this.parentModelData);
    },

    onSort: function (gridFieldItem) {
      var _self = this;

      var hasChangedModelData = _self.hasChangedModelData();

      // 存在未保存的数据
      if (hasChangedModelData == true) {
        Notify.error(_self.$t('lang.subTabGridEdit.describe4'), _self.$t('lang.subTabGridEdit.describe5'), false);
        return;
      }

      if (
        gridFieldItem.entityFieldNames != undefined &&
        gridFieldItem.entityFieldNames.length > 0
      ) {
        _self.sortStr =
          gridFieldItem.fieldName +
          '.' +
          gridFieldItem.entityFieldNames[gridFieldItem.entityFieldIndex] +
          _self.sortStyle;
      } else {
        _self.sortStr = gridFieldItem.fieldName + _self.sortStyle;
      }

      _self.queryGridData();
      _self.sortStyle = _self.sortStyle == ' ASC' ? ' DESC' : ' ASC';
    },

    /**
     * 判断是否存在未保存的数据
     * @return {Boolean} [description]
     */
    hasChangedModelData: function () {
      var _self = this;
      // 检查是否存在未保存的数据
      var hasChangedModelData = false;
      for (var i = 0, len = _self.modelDatas.length; i < len; i++) {
        if (_self.modelDatas[i].changed == true) {
          hasChangedModelData = true;
          break;
        }
        if (_self.modelDatas[i].id < 0) {
          hasChangedModelData = true;
          break;
        }
      }

      return hasChangedModelData;
    },

    saveRecordEvent: function (modelData) {
      modelData.changed = true;
      this.$emit('saveRecordEvent', this.parentModelData);
    },

    // 放弃子页签修改的数据
    discardChildChangedData: function () {
      this.prepareSelectModelData.select = !this.prepareSelectModelData.select;
      if (this.prepareSelectModelData.select) {
        this.selectModelData = this.prepareSelectModelData;
      } else {
        this.selectModelData = {};
      }
      this.prepareSelectModelData = {};
    },

    // 显示状态发生改变
    propertyChanged: function (gridFieldItem) {
      GridColumnDefUtil.saveGridFieldDef(this.windowNo, this.tabIndex, gridFieldItem);
      GridColumnDefUtil.restoreTabGridFieldDef(
        this.windowNo,
        this.tabIndex,
        this.tabGridFields,
      );
      this.$emit('propertyChanged', gridFieldItem);

      /* WindowClientUtil.gridFieldItemPropertyChanged(gridFieldItem);
                   this.tabGridFields.forEach(function (item) {
                       WindowClientUtil.restoreGridFieldItemAttr(item);
                   });*/
    },

    performValidate: function () {
      var _self = this;
      var validateResults = [];
      if (this.$refs.gridBody1 != undefined) {
        for (var i = 0; i < this.$refs.gridBody1.length; i++) {
          if (_self.modelDatas[i].changed == true) {
            var validateResults1 = this.$refs.gridBody1[i].performValidate();
            validateResults = validateResults.concat(validateResults1);
          }
        }
        var validateResults2 = this.getSubTabValidePromise();
        validateResults = validateResults.concat(validateResults2);
      }
      return validateResults;
    },

    // 获取子页签发生改变的数据
    getSubTabValidePromise: function () {
      var validateResults = [];
      if (this.tab.subTabs != undefined) {
        for (var index = 0; index < this.tab.subTabs.length; index++) {
          var subTabId = 'subTab' + this.tab.subTabs[index].tabIndex;
          var validatePromises = this.$refs[subTabId][0].performValidate();
          validateResults = validateResults.concat(validatePromises);
        }
      }
      return validateResults;
    },

    // 添加 modelData
    addModelData: function (modelData) {
      // 如果 parentModelData 无数据，则不允许新建
      this.modelDatas[this.modelDatas.length] = modelData;
      if (modelData.saveDatas != undefined && modelData.saveDatas.length > 0) {
        modelData.saveDatas.forEach(function (saveData) {
          // 恢复子页签的数据
          var subTabId = 'subTab' + saveData.tabIndex;
          this.$refs[subTabId][0].addModelData(saveData);
        });
      }
    },

    /**
     * 替换modeldatas数据
     */
    replaceModelDatas: function (modelDatas) {
      let _self = this;
      this.modelDatas.splice(0, this.modelDatas.length);
      modelDatas.forEach(modelData => {
        _self.addModelData(modelData);
      });
    },

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

    /**
     * 点击编辑全部按钮
     */
    editAllTabData: function () {
      var _self = this;
      _self.modelDatas.forEach(function (item) {
        item.editMode = true;
        item.changed = true;
        item.visible = true;
      });
    },

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

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

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

    /**
     * 修改根ModelData的字段数据
     * @param { String } fieldName 字段名称
     * @param { com.leanwo.prodog.restful.base.model.FieldValue } fieldValue 字段的值
     * @author YangZhiJie 20211012
     *
     */
    changeRootParentModelData: function (fieldName, fieldValue) {
      this.$emit('changeRootParentModelData', {
        fieldName: fieldName,
        fieldValue: fieldValue,
      });
    },
  },
};
</script>

<style scoped>
.fixed-table {
  table-layout: fixed;
}

.toolbar-button-group-left {
  float: left;
}

.toolbar-button-group-right {
  float: right;
}

.table-tr-eidt {
  height: 38px;
}

.table-toolbar {
  width: 100%;
}

.m-row {
  margin-bottom: 15px;
}
.a-audit {
  cursor: pointer;
}
th {
  background-color: #f7f7f7;
}
</style>

<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;
}

.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: 2;
  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;
}
</style>