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

<template>
  <tr v-if="showTabGridTitleFields" height="40px" :style="{ 'background-color': warningColor }" :class="{ 'warning': isSelected }">
    <td rowspan="2" class="sticky-col">{{ serialNumber }}</td>
    <td rowspan="2" class="text-center sticky-col" style="left:50px">
      <input v-model="isSelected" autocomplete="off" type="checkbox" @click="clickModelData(modelData)" />
    </td>

    <td v-if="isShowEdit == undefined || isShowEdit" rowspan="2" class="sticky-col" style="left:80px">
      <template v-if="showEditButton">
        <span class="operation-delete" aria-hidden="true" @click="editRecord">
          <i class="fa" :class="{ 'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode }" />
        </span>
        <span class="operation-edit" aria-hidden="true" @click="deleteRecord">
          <i class="fa fa-remove" />
        </span>
      </template>
    </td>

    <td :colspan="tabGridFields.length + 1" style="text-align: left; padding-left: 2rem;">
      <a-space align="center">
        <div v-for="tabGridTitleField in tabGridTitleFields" :key="tabGridTitleField.fieldName" @click="clickRecord">
          <a-space align="center">
            <span style="font-weight: normal;">{{ Language.getDisplayNameTrl($i18n.locale, tabGridTitleField) }}</span>
            <CellTextItem
              v-if="!modelData.editMode" :grid-field-item="tabGridTitleField" :model-data="modelData"
              :class-name="className" style="display: inline-block; font-weight: normal; padding-top: 3px;"
              @execute-callout="executeCallout(tabGridTitleField)"
            />
            <CellItem
              v-else :ref="'cellItem' + index" :scroll-object="scrollObject" :field-item="tabGridTitleField"
              :model-data="modelData" :parent-model-data="parentModelData" :class-name="className" :window-no="windowNo"
              :tab-index="tabIndex" style="display: inline-block; min-width: 200px;"
              :class="{ 'table-cell-searchwidget': fieldUtil.isSearchType(tabGridTitleField) }"
              @value-changed="valueChanged($event, tabGridTitleField)"
              @execute-callout="executeCallout(tabGridTitleField)"
            />
          </a-space>
        </div>
      </a-space>
    </td>
  </tr>
  <tr :style="{ 'background-color': warningColor }" :class="{ 'warning': isSelected }" height="40px">
    <template v-if="!showTabGridTitleFields">
      <td class="sticky-col">{{ serialNumber }}</td>
      <td class="text-center sticky-col" style="left:50px">
        <input v-model="isSelected" autocomplete="off" type="checkbox" @click="clickModelData(modelData)" />
      </td>

      <td v-if="isShowEdit == undefined || isShowEdit" class="sticky-col" style="left:80px">
        <template v-if="showEditButton">
          <span class="operation-delete" aria-hidden="true" @click="editRecord">
            <i class="fa" :class="{ 'fa-pencil': !modelData.editMode, 'fa-check': modelData.editMode }" />
          </span>
          <span class="operation-edit" aria-hidden="true" @click="deleteRecord">
            <i class="fa fa-remove" />
          </span>
        </template>
      </td>
    </template>


    <template
      v-for="(gridFieldItem, index) in tabGridFields"
      :key="'TabGridField_' + gridFieldItem.fieldName + '_' + index"
    >
      <td v-if="!modelData.editMode" v-show="gridFieldItem.visible" @click="clickRecord">
        <div v-if="gridFieldItem.displayType === 'GridButtonEditor'">
          <template
            v-for="tabGridButtonItem in gridFieldItem.tabGridButtonDtos" :key="tabGridButtonItem.name"
          >
            <a-button v-if="tabGridButtonItem.action === 'CREATE' || tabGridButtonItem.action === 'SAVE' || tabGridButtonItem.action === 'RUN' || tabGridButtonItem.action === 'EXPORT' || tabGridButtonItem.action === 'NOTICE' || tabGridButtonItem.action === 'REFRESH'" type="link" @click="buttonClick">{{ tabGridButtonItem.name }}</a-button>
            <a-button v-if="tabGridButtonItem.action === 'DELETE'" type="link" danger @click="deleteRecord">{{ tabGridButtonItem.name }}</a-button>
            <a-button v-if="tabGridButtonItem.action === 'EDIT'" type="link" @click="editRecord">{{ tabGridButtonItem.name }}</a-button>           
            <a-button v-if="tabGridButtonItem.action === 'SEE'" type="link" @click="readRecord">{{ tabGridButtonItem.name }}</a-button>
            <a-button v-if="tabGridButtonItem.action === 'RUN_PROCESS_REPORT'" type="link" @click="execute(tabGridButtonItem)">{{ tabGridButtonItem.name }}</a-button>
            <a-button v-if="tabGridButtonItem.action === 'OPEN_CUSTOMER_WINDOW'" type="link" @click="execute(tabGridButtonItem)">{{ tabGridButtonItem.name }}</a-button>
            <a-button v-if="tabGridButtonItem.action === 'OPEN_HTML_WINDOW'" type="link" @click="execute(tabGridButtonItem)">{{ tabGridButtonItem.name }}</a-button>
            <a-button v-if="tabGridButtonItem.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'" type="link" @click="openRemoteComponentModule(tabGridButtonItem)">{{ tabGridButtonItem.name }}</a-button>
          </template>          
        </div>
        <div v-else>
          <CellTextItem
            :grid-field-item="gridFieldItem" :model-data="modelData" :class-name="className"
            @execute-callout="executeCallout(gridFieldItem)"
          />
        </div>
      </td>
      <td
        v-else v-show="gridFieldItem.visible"
        :class="{ 'table-cell-searchwidget': fieldUtil.isSearchType(gridFieldItem) }" @click="clickRecord"
      >        
        <CellItem
          :ref="'cellItem' + index" :scroll-object="scrollObject" :field-item="gridFieldItem"
          :model-data="modelData" :parent-model-data="parentModelData" :class-name="className" :window-no="windowNo"
          :tab-index="tabIndex" @value-changed="valueChanged($event, gridFieldItem)"
          @execute-callout="executeCallout(gridFieldItem)"
        />
      </td>
    </template>
  </tr>
  <Modal v-model:show="modal" :full="true">
    <ProcessReportResultPreview
      v-if="
        processReportResult != null &&
          (processReportResult.reportResults != null ||
            processReportResult.processResult != null)
      "
      :process-report-result="processReportResult"
      :pdf-only="false"
      :excel-only="false"
    />
    <template #header>
      {{ $t("lang.tabButton.executeResult") }}
    </template>
  </Modal>
  <Modal
    v-model:show="titleModal"
    :show-canel-button="false"
    :show-ok-button="false"
  >
    <template #header>
      {{ tabButtonModel.tipsTitle }}
    </template>
    {{ tabButtonModel.tipsContent }}
    <template #footer>      
      <button type="button" class="btn btn-default" @click="titleModalClose">
        {{ $t("lang.tabButton.cancel") }}
      </button>
      <button type="primary" class="btn btn-default" @click="executeProcess">
        确认
      </button>
    </template>
  </Modal>
  <component :is="modal1Component" v-model:open="modal1Open" :model-data="modelData" @refresh-data="refreshDatas" />
</template>

<script>
import {
  ref,
  defineAsyncComponent,
} from 'vue';
import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import FieldUtil from '../../resource/dictionary/FieldUtil.js';
import CellItem from './CellItem.vue';
import CellTextItem from './CellTextItem.vue';
import Common from '../../common/Common.js';
import CustomerWindowResource from '../../api/dic/CustomerWindowResource.js';
import HtmlWindowResource from '../../api/dic/HtmlWindowResource.js';
import ProcessReportResource from '../../api/dic/ProcessReportResource.js';
import Context from '../common/Context.js';
import JsUtil from '../../common/JsUtil.js';
import Language from '../../common/Language.js';
import { Notify, Uuid , CssUtil} from 'pc-component-v3';
import { Spin as ASpin, Empty as AEmpty } from 'ant-design-vue';
export default {

  components: {
    CellItem, CellTextItem,
  },


  props: {

    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    /** 表格标题字段 */
    tabGridTitleFields: {
      type: Array,
      default: function () {
        return null;
      },
    },
    /** 表格字段 */
    tabGridFields: {
      type: Array,
      default: function () {
        return null;
      },
    },
    modelData: {
      type: Object,
      default: function () {
        return null;
      },
    },
    parentModelData: {
      type: Object,
      default: function () {
        return null;
      },
    },
    className: {
      type: String,
      default: null,
    },
    isShowEdit: {
      type: Boolean,
      default: false,
    },
    scrollObject: {
      type: Object,
      default: null,
    },
    serialNumber: {
      type: Number,
      default: null,
    },
    jsUrl: {
      type: String,
      default: null,
    },    
    simpleFilterParams: {
      type: String,
      default: null,
    },
    complexFilterParams: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  emits: ['deleteRecord', 'editRecord', 'readRecord', 'clickModelData', 'executeCallout', 'valueChanged', 'refreshDatas'],


  data: function () {
    return {
      tabGridFields1: this.tabGridFields,
      lastClickTime: 0,
      fieldUtil: FieldUtil,
      Language: Language,
      modal1Open: false,
      modal1Component: null,
      processReportResult: {},
      modal: false,
      titleModal: false,
      tabButtonModel:{},
    };
  },
  computed: {
    modelDataCopy: function () {
      return JSON.parse(JSON.stringify(this.modelData));
    },

    isSelected: {
      get: function () {
        return this.modelData.select == true;
      },
      set: function () {

      },
    },
    /**
         * 获取报警颜色
         */
    warningColor: function () {
      if (this.modelData.data['warningColor'] != undefined && this.modelData.data['warningColor'].displayValue.length > 0) {
        return this.modelData.data['warningColor'].displayValue[0];
      } else {
        return 'none';
      }

    },

    /**
         * 是否显示编辑按钮
         */
    showEditButton: function () {
      if (this.isShowEdit == undefined || this.isShowEdit) {
        if (this.modelData != undefined
          && this.modelData.data != undefined
          && this.modelData.data['documentStatus'] != undefined
          && this.modelData.data['documentStatus'].displayValue != undefined
          && (this.modelData.data['documentStatus'].displayValue[0] == 'APPROVED'
            || this.modelData.data['documentStatus'].displayValue[0] == 'REJECTED'
            || this.modelData.data['documentStatus'].displayValue[0] == 'PROCESSING')) {
          return false;
        }
        return true;
      }
      return false;
    },

    /**
     * 是否显示标题行
     */
    showTabGridTitleFields: function () {
      if (this.tabGridTitleFields == null || this.tabGridTitleFields.length == 0) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {
    'parentModelData': {
      deep: true,
      handler(curVal, oldVal) {
        var _self = this;
        for (let index = 0; index < _self.tabGridFields.length; index++) {
          const tabGridField = _self.tabGridFields[index];
          let oldTabGridFieldString = JSON.stringify(tabGridField);

          const columnShowLogical = tabGridField.columnShowLogical;
          if (columnShowLogical != null && columnShowLogical.length > 0) {
            let functionName = tabGridField.fieldName.replace('.', '_') + '_showLogical';

            let executeFunction = function () {
              let parentCtx = new _self.getContext(_self.parentModelData);
              try {
                tabGridField.visible = _self[functionName](null, parentCtx.modelData);
              } catch (e) {
                console.error('js代码 %s 执行异常 %o', columnShowLogical, e);
                tabGridField.visible = true;
              }
            };

            if (_self[functionName] == null) {
              // 执行服务端的脚本
              const jsUrl = _self.jsUrl;
              if (jsUrl == null || jsUrl == undefined) {
                Notify.error('数据字典定义异常', '【' + tabGridField.fieldName + '】列显示逻辑的JS文件不存在,请联系管理员检查数据字典是否JS文件。', false);
                return;
              }
              let promise = JsUtil.dynamicLoadJsFunction(jsUrl, columnShowLogical);
              promise.then(dynamicFunction => {
                let targetFunction = dynamicFunction;

                if (targetFunction == null) {
                  Notify.error('数据字典定义异常', '【' + tabGridField.fieldName + '】列显示逻辑定义异常,请联系管理员检查数据字典的定义。', false);
                  return;
                }

                _self[functionName] = targetFunction;

                executeFunction();
              }, errorData => {
                console.error(errorData);
              });
            } else {
              executeFunction();
            }
          } else {
            tabGridField.visible = true;
          }

          let newTabGridFieldString = JSON.stringify(tabGridField);

          // bug fixed by jack 2022-01-17
          // 只有当数据发生改变以后，才重新设置数据，解决当子表数据量很打的时候，输入卡顿的问题。
          if (oldTabGridFieldString != newTabGridFieldString) {
            _self.tabGridFields[index] = tabGridField;
          }
        }
        console.log(_self.tabGridFields);
      },
    },
  },


  methods: {
    /**
         * 获取Context
         */
    getContext: Context,

    deleteRecord: function () {
      this.$emit('deleteRecord');
    },
    refreshDatas: function(){
      this.$emit('refreshDatas');
    },

    buttonClick: function(){
      Notify.error('提示', '暂不支持该组件', false);
    },

    closeModal: function(){
      var _self = this;
      _self.modal1Open.value = false;
    },

    // 改变表格行元素的编辑状态
    editRecord: function () {
      this.$emit('editRecord');
    },

    readRecord: function () {
      this.$emit('readRecord');
    },

    clickModelData: function () {
      this.$emit('clickModelData');
    },

    // 值发生改变
    valueChanged: function (newFieldValue, gridFieldItem) {
      var valueObject = {
        newFieldValue: newFieldValue,
        gridFieldItem: gridFieldItem,
      };
      this.$emit('valueChanged', valueObject);

      this.refreshSelectField(this.modelData, gridFieldItem.fieldName);
    },

    // 刷新下拉选择框keyValues
    refreshSelectField: function (modelData, valueChangedFieldName) {
      var _self = this;
      if (_self.tabGridFields1) {
        _self.tabGridFields1.forEach(function (item) {
          if (item.displayType == 'ListBoxEditor') {
            var name1 = ':' + valueChangedFieldName;
            var showLogical = item.showLogical;
            if (showLogical != undefined && showLogical.indexOf(name1) >= 0) {
              refresh(item);
            }
          }
        });
      }

      function refresh(item) {
        var obj = {
          fieldId: item.id,
          modelData: modelData,
        };

        console.log('GridBody RefreshField');
        $.ajax({
          url: Common.getApiURL('FieldResource/refreshField'),
          async: false,
          dataType: 'json',
          type: 'post',
          data: JSON.stringify(obj),
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          success: function (data) {
            if (data != undefined) {
              item.keyValues = data.keyValues;
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      }
    },

    performValidate: function () {
      var validateResults = [];
      for (var i = 0; i < this.tabGridFields1.length; i++) {
        let cellId = 'cellItem' + i;
        if (this.$refs[cellId] && this.$refs[cellId][0]) {
          var result = this.$refs[cellId][0].performValidate();
          validateResults.push(result);
        }
      }
      return validateResults;
    },
    clickRecord: function () {
      var now = new Date().getTime();
      if (now - this.lastClickTime < 500) {
        this.readRecord();
      }
      this.lastClickTime = now;
    },

    /**
     * 执行Callout
     */
    executeCallout: function (gridFieldItem) {
      this.$emit('executeCallout', gridFieldItem);
    },
    //跳转或执行流程
    execute: function (tabButton) {
      var _self = this;
      _self.tabButtonModel = tabButton;
      if (tabButton.customerWindowNo != undefined && tabButton.customerWindowNo != '') {
        CustomerWindowResource.uniqueByNo(tabButton.customerWindowNo).then(
          successData => {
            tabButton.customerWindowRouteUrl = successData.routeUrl;
            if(tabButton.customerWindowNo == '20221101_151823'){
              localStorage.setItem('AssetInstance_ComplexFilterParams',JSON.stringify(_self.complexFilterParams));
              localStorage.setItem('AssetInstance_SimpleFilterParams', _self.simpleFilterParams);
            }
            //跳转到tabButton.routeUrl
            _self.switchFormRoute(tabButton);
          },
          errorData => {
            Common.processException(errorData);
          },
        );
      } else if (
        tabButton.processReportNo != undefined &&
        tabButton.processReportNo != ''
      ) {
        // 判断流程报表是否有参数
        // 如果有参数则直接跳转到流程和报表的界面。
        if (tabButton.routerRedirect == undefined || tabButton.routerRedirect == false) {
          if(tabButton.tipsTitle == undefined || tabButton.tipsTitle.length == 0){
            _self.executeProcess();
          }else{
            _self.titleModal = true;
          }
        } else {
          this.$router.push({
            path: '/desktop/process-report/' + tabButton.processReportNo,
          });
        }
      } else if (tabButton.htmlWindowNo != undefined) {
        HtmlWindowResource.uniqueByNo(tabButton.htmlWindowNo).then(
          htmlWindowDto => {
            if (htmlWindowDto != undefined) {
              var htmlWindowUrl = htmlWindowDto.htmlFileName;
              var autoCloseInterval = htmlWindowDto.autoCloseInterval;
              var regExp = new RegExp('[{].*?[}]', 'g');
              var result = htmlWindowUrl.match(regExp);
              if (htmlWindowUrl != undefined && htmlWindowUrl != '') {
                for (var index = 0, len = result.length; index < len; index++) {
                  var tempResult = result[index];
                  console.log('{' + tempResult + '}匹配');
                  if (tempResult == '{URL}') {
                    htmlWindowUrl = htmlWindowUrl.replace(
                      '{URL}',
                      Common.getHostPageBaseURL(),
                    );
                  } else if (tempResult == '{RecordIds}') {
                    var recordId = _self.modelData.id;
                    htmlWindowUrl = htmlWindowUrl.replace('{RecordIds}', recordId);
                  } else if (tempResult == '{Token}') {
                    htmlWindowUrl = htmlWindowUrl.replace('{Token}', Common.getToken());
                  } else {
                    if (_self.selectedModelDatas.length == 0) {
                      Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe3'), true);
                      return;
                    } else if (_self.selectedModelDatas.length > 1) {
                      Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe2'), true);
                      return;
                    }
                    var tempResult1 = tempResult.replace('{', '').replace('}', '');
                    htmlWindowUrl = htmlWindowUrl.replace(
                      tempResult,
                      _self.getFirstSelectModelDataFieldValue(tempResult1),
                    );
                  }
                }

                var openWindow = window.open(htmlWindowUrl);

                // 自动关闭
                if (autoCloseInterval != undefined) {
                  setTimeout(function () {
                    openWindow.close();
                    openWindow = undefined;
                  }, autoCloseInterval * 1000);
                }
              }
            }
          },
          errorData => {
            Common.processException(errorData);
          },
        );
      }      
    },
    // 切换到Form表单的路由
    switchFormRoute: function (tabButton) {
      const _self = this;
      var routeDate = {
        path: tabButton.customerWindowRouteUrl,
        params: {
          modelData: this.modelData,
        },
      };
      // 请勿修改，会影响生单的功能
      var uuid = _self.uuid;
      if (uuid != undefined) {
        routeDate.path = routeDate.path + '/' + uuid;
      }

      const frameUrl = Common.getRedirectUrl(
        '#' + routeDate.path,
      );

      // 供子页面iframe调用，修改modelData，(举例：生单界面修改参数)。
      // window.modelDataChanged = this.modelDataChanged;

      // window.getModelData = this.getModelData;
      let modelData = JSON.stringify(this.modelData);
      console.log(modelData);
      localStorage.setItem(_self.uuid + '#GenerateDocumentTool', modelData);

      var iWidth = 1280;//弹出窗口的宽度;
      var iHeight = 720; //弹出窗口的高度;
      var iTop = (window.screen.availHeight-30-iHeight)/2;//获得窗口的垂直位置;
      var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
      window.open(frameUrl,'_blank','height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
      // window.open(frameUrl);
    },
    // 执行流程
    executeProcess: function () {
      var _self = this;
      var ids = [_self.modelData.id];
      ProcessReportResource.runProcessByIds(_self.tabButtonModel.processReportNo, ids).then(
        successData => {
          _self.modal = true;
          _self.processReportResult = successData;

          if (
            _self.processReportResult.reportResults != undefined &&
            _self.processReportResult.reportResults.length > 0
          ) {
            _self.processReportResult.reportResults.forEach(function (item, index) {
              if(item.reportDefinitionType!=='ExcelReport'){
                item.previewIndex=1;
              }else{
                item.previewIndex=2;
              }
              if (index == 0) {
                item.showPreview=true;
              } else {
                item.showPreview=false;
              }
            });
          }
          _self.titleModal = false;
        },
        errorData => {
          _self.titleModal = false;
          Common.processException(errorData);
        },
      );
      _self.refreshDatas();
      // }
    },
    /**
     * 获取字符串的哈希值
     * @param input
     */
    getHash: function (input) {
      let hash = 0;
      if (input.length === 0) {
        return hash;
      }
      for (let i = 0; i < input.length; i++) {
        const char = input.charCodeAt(i);
        hash = (hash << 5) - hash + char;
        hash = hash & hash; // 确保返回值是一个32位有符号整数
      }
      return Math.abs(hash).toString();
    },
    /**
     * 远程加载ES VUE组件模块，并在模态框中打开。
     * @param jsUrl js路径
     * @param cssUrl css路径
     */
    openRemoteComponentModule: function (tabButton) {
      var _self = this;
      let jsUrl = tabButton.remoteComponentModuleJsUrl;
      let cssUrl = tabButton.remoteComponentModuleCssUrl;

      // 显示模态框
      // 异步的加载js组件
      //let jsUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.js';
      //let cssUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.css';

      if (cssUrl != null && cssUrl.length > 0) {
        let cssUrlHash = _self.getHash(cssUrl);
        CssUtil.dynamicLoadCss(cssUrl, cssUrlHash);
      }
      // webpackIgnore：设置为 true 时，禁用动态导入解析。
      // const testAsyncRemoteComponent  = await import(/* webpackIgnore: true */ jsUrl);

      // console.log(testAsyncRemoteComponent);
      if (jsUrl != null && jsUrl.length > 0) {
        const testAsyncRemoteComponent = defineAsyncComponent({
          // 加载函数
          loader: () => {
            return import(/* webpackIgnore: true */ jsUrl);
          },
          // 加载异步组件时使用的组件
          loadingComponent: ASpin,
          // 展示加载组件前的延迟时间，默认为 200ms
          delay: 200,
          // 加载失败后展示的组件
          errorComponent: AEmpty,
          // 如果提供了一个 timeout 时间限制，并超时了
          // 也会显示这里配置的报错组件，默认值是：Infinity
          timeout: 10000,
        });

        _self.modal1Component = testAsyncRemoteComponent;
        _self.modal1Open = true;
        console.log(_self.modal1Component);
      }
    },
    //关闭表头按钮提示框
    titleModalClose: function (){
      var _self = this;
      _self.titleModal = false;
    },
  },
};
</script>

<style scoped>
.table-cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/** 搜索框，自动提示表格， */
.table-cell-searchwidget {
  position: relative;
}

.text-center {
  text-align: center;
}

.warning {
  background-color: #fcf8e3 !important;
}

.operation-delete {
  margin-left: 10px;
  margin-right: 5px;
}

.operation-edit {
  margin-left: 5px;
  margin-right: 10px;
}


/* 固定列 */
.sticky-col {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  left: 0;
  background: #fafafa;
  z-index: 1; /* 确保固定列在其他内容之上 */
}
</style>