优化混炼示方，新增种类配置

2026-05-25 19:44:14 +08:00
parent c85657d199
commit dc3f305303
34 changed files with 3892 additions and 104 deletions
--- a/jeecgboot-vue3/src/views/xslmes/mesXslMixingSpec/components/MesXslMixingSpecModal.vue
+++ b/jeecgboot-vue3/src/views/xslmes/mesXslMixingSpec/components/MesXslMixingSpecModal.vue
@@ -55,7 +55,15 @@
          <tr>
            <th class="formTitle" colspan="1">换算系数</th>
            <td class="formValue" colspan="2">
-              <a-input-number v-model:value="sheetForm.convertFactor" :disabled="!showFooter" :precision="6" :bordered="false" class="form-input" style="width: 100%" />
+              <a-input-number
+                v-model:value="sheetForm.convertFactor"
+                :disabled="!showFooter"
+                :precision="6"
+                :bordered="false"
+                class="form-input"
+                style="width: 100%"
+                @update:value="handleConvertFactorChange"
+              />
            </td>
            <th class="formTitle" colspan="1">填充体积</th>
            <td class="formValue" colspan="1">
@@ -80,7 +88,7 @@
            </td>
            <th class="formTitle" colspan="1">母胶比重</th>
            <td class="formValue">
-              <a-input-number v-model:value="sheetForm.motherRubberSg" :disabled="!showFooter" :precision="6" :bordered="false" class="form-input" style="width: 100%" />
+              <a-input-number v-model:value="sheetForm.motherRubberSg" :disabled="!showFooter" :precision="6" :bordered="false" class="form-input" style="width: 100%" @update:value="recalcFillVolume" />
            </td>
            <th class="formTitle">段数</th>
            <td class="formValue" colspan="2">
@@ -104,7 +112,7 @@
          <tr>
            <th class="formTitle" colspan="1">终炼胶比重</th>
            <td class="formValue">
-              <a-input-number v-model:value="sheetForm.finalRubberSg" :disabled="!showFooter" :precision="6" :bordered="false" class="form-input" style="width: 100%" />
+              <a-input-number v-model:value="sheetForm.finalRubberSg" :disabled="!showFooter" :precision="6" :bordered="false" class="form-input" style="width: 100%" @update:value="recalcFillVolume" />
            </td>
            <th class="formTitle" colspan="1">适用工厂</th>
            <td class="formValue" colspan="2">
@@ -181,25 +189,60 @@
            </div>
          </div>
          <div class="material-table-wrap" :style="{ height: `${materialMainTableHeight}px` }">
-            <JVxeTable
-              :key="materialTableLayoutKey"
-              ref="materialRef"
-              row-number
-              keep-source
-              bordered
-              :fit="false"
-              :column-config="{ resizable: true }"
-              :row-config="materialRowConfig"
-              size="mini"
-              :height="materialMainTableHeight"
-              :scroll-x="{ enabled: false }"
-              :scroll-y="{ enabled: true }"
-              :columns="visibleMaterialColumns"
-              :dataSource="materialData"
-              :disabled="!showFooter"
-              @resizable-change="handleMaterialColumnResize"
-              @column-resizable-change="handleMaterialColumnResize"
-            />
+            <!--update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A42】橡胶及配合剂明细底部固定合计行----------- -->
+            <div class="material-table-stack" :style="{ width: `${materialTableWidth}px` }">
+              <div class="material-table-body" :style="{ height: `${materialBodyTableHeight}px` }">
+                <JVxeTable
+                  :key="materialTableLayoutKey"
+                  ref="materialRef"
+                  row-number
+                  keep-source
+                  bordered
+                  :fit="false"
+                  :column-config="{ resizable: true }"
+                  :row-config="materialRowConfig"
+                  size="mini"
+                  :height="materialBodyTableHeight"
+                  :scroll-x="{ enabled: false }"
+                  :scroll-y="{ enabled: true }"
+                  :columns="visibleMaterialColumns"
+                  :dataSource="materialData"
+                  :disabled="!showFooter"
+                  @value-change="handleMaterialValueChange"
+                  @resizable-change="handleMaterialColumnResize"
+                  @column-resizable-change="handleMaterialColumnResize"
+                >
+                  <template #mixerMaterialNameSlot="{ row }">
+                    <div
+                      class="mixing-material-name-cell"
+                      :class="{ 'is-disabled': !showFooter }"
+                      :style="{ minHeight: `${materialHeightPref.rowHeight}px` }"
+                      @click.stop="openMixingMaterialPicker(row)"
+                    >
+                      <span v-if="row.mixerMaterialName" class="mixing-material-name-text">{{ row.mixerMaterialName }}</span>
+                    </div>
+                  </template>
+                </JVxeTable>
+              </div>
+              <div class="material-table-footer">
+                <div class="material-table-footer-row">
+                  <div
+                    class="material-footer-seq"
+                    :style="{ width: `${MIXING_MATERIAL_ROW_NUMBER_WIDTH}px`, height: `${materialHeightPref.rowHeight}px` }"
+                  ></div>
+                  <div
+                    v-for="cell in materialFooterCells"
+                    :key="cell.key"
+                    class="material-footer-cell"
+                    :class="{ 'is-label': cell.isLabel, 'is-total': cell.isTotal }"
+                    :style="{ width: `${cell.width}px`, height: `${materialHeightPref.rowHeight}px` }"
+                  >
+                    {{ cell.text }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!--update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A42】橡胶及配合剂明细底部固定合计行----------- -->
          </div>
          <!--update-begin---author:cursor ---date:20260522  for：【XSLMES-20260522-A18】TCU温度条件表移至橡胶及配合剂下方----------- -->
          <div class="left-panel-section left-panel-section-tcu">
@@ -368,11 +411,11 @@
      </div>

      <BasicForm v-show="false" @register="registerForm" />
-
-      <MesXslEquipmentLedgerSelectModal @register="registerMachineModal" @select="onMachineSelect" />
-      <MesXslMixerPsCompileSelectModal @register="registerIssueNumberModal" @select="onIssueNumberSelect" />
    </div>
  </BasicModal>
+  <MesXslEquipmentLedgerSelectModal @register="registerMachineModal" @select="onMachineSelect" />
+  <MesXslMixerPsCompileSelectModal @register="registerIssueNumberModal" @select="onIssueNumberSelect" />
+  <MesXslMixingMaterialSelectModal @register="registerMixingMaterialModal" @select="onMixingMaterialSelect" />
 </template>

 <script lang="ts" setup>
@@ -411,6 +454,19 @@ import {
  DEFAULT_MIXING_STEP_ROW_COUNT,
  DEFAULT_MIXING_DOWN_STEP_ROW_COUNT,
  buildDefaultMixingTcuRows,
+  applyMixingMaterialFromSelection,
+  fillMixingMaterialAccumWeight,
+  calcMixingMaterialUnitWeightTotal,
+  calcMixingMaterialAccumWeightTotal,
+  buildMixingMaterialFooterCells,
+  normalizeMixingConvertFactor,
+  initMaterialBaseUnitWeights,
+  applyConvertFactorToMaterialRows,
+  syncMaterialBaseUnitWeightFromDisplay,
+  calcMixingFillVolume,
+  resolveMixingSpecificGravity,
+  MIXING_MATERIAL_ROW_NUMBER_WIDTH,
+  MIXING_MATERIAL_FOOTER_ROW_HEIGHT,
  MIXING_MATERIAL_MIN_COLUMN_WIDTH,
  MIXING_TCU_MIN_COLUMN_WIDTH,
  MIXING_STEP_MIN_COLUMN_WIDTH,
@@ -422,7 +478,9 @@ import MesXslMixingStepSelectCell from './MesXslMixingStepSelectCell.vue';
 import { list as mixerActionList } from '/@/views/xslmes/mesXslMixerAction/MesXslMixerAction.api';
 import { list as mixerConditionList } from '/@/views/xslmes/mesXslMixerCondition/MesXslMixerCondition.api';
 import MesXslEquipmentLedgerSelectModal from '/@/views/xslmes/mesXslEquipInspectConfig/components/MesXslEquipmentLedgerSelectModal.vue';
+import { queryById as queryEquipmentById } from '/@/views/xslmes/mesXslEquipmentLedger/MesXslEquipmentLedger.api';
 import MesXslMixerPsCompileSelectModal from '/@/views/xslmes/mesXslMixerPsCompile/components/MesXslMixerPsCompileSelectModal.vue';
+import MesXslMixingMaterialSelectModal from './MesXslMixingMaterialSelectModal.vue';

 const emit = defineEmits(['register', 'success']);
 const { createMessage } = useMessage();
@@ -437,6 +495,7 @@ const mixerConditionOptions = ref<{ title: string; value: string }[]>([]);
 //update-end---author:cursor ---date:20260522  for：【XSLMES-20260522-A34】混合步骤动作/组合下拉选项-----------

 const materialRef = ref();
+const materialPickerRow = ref<Recordable | null>(null);
 const stepRef = ref();
 const downStepRef = ref();
 const tcuRef = ref();
@@ -465,6 +524,22 @@ const stepHeightPref = ref(loadMixingTableHeightPreference('step'));
 const downStepHeightPref = ref(loadMixingTableHeightPreference('downStep'));

 const materialMainTableHeight = computed(() => calcMixingDetailTableViewportHeight('material', materialHeightPref.value));
+//update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A42】橡胶及配合剂明细底部固定合计行-----------
+const materialBodyTableHeight = computed(() =>
+  Math.max(materialMainTableHeight.value - MIXING_MATERIAL_FOOTER_ROW_HEIGHT, 80),
+);
+const materialUnitWeightTotal = ref<number | null>(null);
+//update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A46】换算系数/单重/机台有效体积联动填充体积-----------
+const machineEffectiveVolume = ref('');
+//update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A46】换算系数/单重/机台有效体积联动填充体积-----------
+const materialAccumWeightTotal = ref<number | null>(null);
+const materialFooterCells = computed(() =>
+  buildMixingMaterialFooterCells(visibleMaterialColumns.value, materialColumnWidths.value, {
+    unitWeight: materialUnitWeightTotal.value,
+    accumWeight: materialAccumWeightTotal.value,
+  }),
+);
+//update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A42】橡胶及配合剂明细底部固定合计行-----------
 const stepMainTableHeight = computed(() => calcMixingDetailTableViewportHeight('step', stepHeightPref.value));
 const tcuTableHeight = computed(() => calcMixingDetailTableViewportHeight('tcu', tcuHeightPref.value));
 const downStepTableHeight = computed(() => calcMixingDetailTableViewportHeight('downStep', downStepHeightPref.value));
@@ -509,6 +584,105 @@ function handleMaterialColumnResize(params: Recordable) {
  };
  saveMixingMaterialColumnWidths(materialColumnWidths.value);
 }
+
+//update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A41】橡胶及配合剂明细累计按种类分组合计-----------
+/** JVxe getTableData 为浅拷贝，批量改值需用 fullData 原行并强制 refresh */
+function resolveMaterialTableRawRows(): Recordable[] {
+  const fullData = materialRef.value?.getXTable?.()?.getTableData?.()?.fullData as Recordable[] | undefined;
+  if (Array.isArray(fullData) && fullData.length) {
+    return fullData;
+  }
+  return (materialRef.value?.getTableData?.() || materialData.value || []) as Recordable[];
+}
+
+function refreshMaterialTableView() {
+  materialRef.value?.getXTable?.()?.updateData?.();
+}
+
+function applyMaterialAccumWeight(rows?: Recordable[]) {
+  const targetRows = rows || resolveMaterialTableRawRows();
+  fillMixingMaterialAccumWeight(targetRows);
+  materialUnitWeightTotal.value = calcMixingMaterialUnitWeightTotal(targetRows);
+  materialAccumWeightTotal.value = calcMixingMaterialAccumWeightTotal(targetRows);
+  refreshMaterialTableView();
+  recalcFillVolume();
+}
+
+//update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A46】换算系数/单重/机台有效体积联动填充体积-----------
+async function loadMachineEffectiveVolume(machineId?: string) {
+  const id = machineId || sheetForm.machineId;
+  if (!id) {
+    machineEffectiveVolume.value = '';
+    return;
+  }
+  try {
+    const raw = await queryEquipmentById({ id });
+    const row = (raw as Recordable)?.id != null ? raw : (raw as Recordable)?.result;
+    machineEffectiveVolume.value = row?.effectiveVolume || '';
+  } catch {
+    machineEffectiveVolume.value = '';
+  }
+}
+
+function recalcFillVolume() {
+  if (!showFooter.value) {
+    return;
+  }
+  const totalWeight =
+    materialUnitWeightTotal.value ?? calcMixingMaterialUnitWeightTotal(resolveMaterialTableRawRows());
+  const specificGravity = resolveMixingSpecificGravity(sheetForm);
+  const next = calcMixingFillVolume(totalWeight, specificGravity, machineEffectiveVolume.value);
+  if (next != null) {
+    sheetForm.fillVolume = next;
+  }
+}
+//update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A46】换算系数/单重/机台有效体积联动填充体积-----------
+
+//update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A43】换算系数联动明细单重实时计算-----------
+const lastConvertFactor = ref<number>(1);
+const convertFactorApplying = ref(false);
+
+function applyConvertFactorToMaterials(factor: unknown) {
+  const rows = resolveMaterialTableRawRows();
+  applyConvertFactorToMaterialRows(rows, factor, lastConvertFactor.value);
+  lastConvertFactor.value = normalizeMixingConvertFactor(factor);
+  applyMaterialAccumWeight(rows);
+}
+
+function handleConvertFactorChange(value: unknown) {
+  if (!showFooter.value || convertFactorApplying.value) {
+    return;
+  }
+  applyConvertFactorToMaterials(value);
+  recalcFillVolume();
+}
+
+function stripMaterialRowForSave(row: Recordable) {
+  if (!row) {
+    return row;
+  }
+  const { baseUnitWeight: _baseUnitWeight, ...rest } = row;
+  return rest;
+}
+//update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A43】换算系数联动明细单重实时计算-----------
+
+function recalcMaterialAccumWeight() {
+  applyMaterialAccumWeight();
+}
+
+function handleMaterialValueChange(event) {
+  const key = event?.column?.key;
+  const row = event?.row;
+  //update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A43】换算系数联动明细单重实时计算-----------
+  if (key === 'unitWeight' && row) {
+    syncMaterialBaseUnitWeightFromDisplay(row, sheetForm.convertFactor);
+  }
+  //update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A43】换算系数联动明细单重实时计算-----------
+  if (key === 'unitWeight' || key === 'materialKind') {
+    recalcMaterialAccumWeight();
+  }
+}
+//update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A41】橡胶及配合剂明细累计按种类分组合计-----------
 //update-end---author:cursor ---date:20260522  for：【XSLMES-20260522-A17】橡胶及配合剂明细列展示设置-----------

 //update-begin---author:cursor ---date:20260522  for：【XSLMES-20260522-A19】TCU温度条件表列宽可调且表头换行-----------
@@ -710,6 +884,7 @@ const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useF
 //update-begin---author:cursor ---date:20260522  for：【XSLMES-20260522-A33】混炼示方主表选择弹窗-----------
 const [registerMachineModal, { openModal: openMachineModalInner }] = useModal();
 const [registerIssueNumberModal, { openModal: openIssueNumberModalInner }] = useModal();
+const [registerMixingMaterialModal, { openModal: openMixingMaterialModalInner }] = useModal();

 function openMachinePicker() {
  if (!showFooter.value) {
@@ -721,6 +896,11 @@ function openMachinePicker() {
 async function onMachineSelect(payload: Recordable | null) {
  sheetForm.machineId = payload?.equipmentLedgerId || '';
  sheetForm.machineName = payload?.equipmentName || '';
+  machineEffectiveVolume.value = payload?.effectiveVolume || '';
+  if (sheetForm.machineId && !machineEffectiveVolume.value) {
+    await loadMachineEffectiveVolume(sheetForm.machineId);
+  }
+  recalcFillVolume();
  await loadMixerStepOptions(sheetForm.machineId);
 }

@@ -738,6 +918,27 @@ function onIssueNumberSelect(payload: Recordable | null) {
  mixerPsCompilePickerId.value = payload.psCompileId || '';
  sheetForm.issueNumber = payload.psCode || '';
 }
+
+function openMixingMaterialPicker(row: Recordable) {
+  if (!showFooter.value || !row) {
+    return;
+  }
+  materialPickerRow.value = row;
+  openMixingMaterialModalInner(true, { picker: true, ts: Date.now() });
+}
+
+function onMixingMaterialSelect(payload: Recordable | null) {
+  if (!payload || !materialPickerRow.value) {
+    return;
+  }
+  applyMixingMaterialFromSelection(
+    materialPickerRow.value,
+    payload,
+    payload.materialKind || payload.materialMinor || '',
+  );
+  recalcMaterialAccumWeight();
+  materialPickerRow.value = null;
+}
 //update-end---author:cursor ---date:20260522  for：【XSLMES-20260522-A33】混炼示方主表选择弹窗-----------

 function ensureTcuDefaultRows(rows: Recordable[] = []) {
@@ -783,6 +984,7 @@ function resetSheetForm() {
  sheetForm.approveTime = '';
  sheetForm.changeDate = '';
  mixerPsCompilePickerId.value = '';
+  machineEffectiveVolume.value = '';
  refreshSignDisplay({});
 }

@@ -806,6 +1008,9 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
  await resetFields();
  resetSheetForm();
  materialData.value = [];
+  materialUnitWeightTotal.value = null;
+  materialAccumWeightTotal.value = null;
+  lastConvertFactor.value = 1;
  stepData.value = [];
  downStepData.value = [];
  tcuData.value = ensureTcuDefaultRows([]);
@@ -819,10 +1024,16 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
    const row = raw?.result || raw;
    Object.assign(sheetForm, row || {});
    refreshSignDisplay(row || {});
+    await loadMachineEffectiveVolume(sheetForm.machineId);
    await loadMixerStepOptions(sheetForm.machineId);
    await syncSheetToForm();
    //update-begin---author:cursor ---date:20260522  for：【XSLMES-20260522-A39】编辑页明细补齐默认空行与新增一致-----------
    materialData.value = ensureMixingDetailRows(row?.materialList || [], DEFAULT_MIXING_MATERIAL_ROW_COUNT);
+    convertFactorApplying.value = true;
+    initMaterialBaseUnitWeights(materialData.value, sheetForm.convertFactor, true);
+    lastConvertFactor.value = normalizeMixingConvertFactor(sheetForm.convertFactor);
+    applyMaterialAccumWeight(materialData.value);
+    convertFactorApplying.value = false;
    stepData.value = ensureMixingDetailRows(row?.stepList || [], DEFAULT_MIXING_STEP_ROW_COUNT);
    downStepData.value = ensureMixingDetailRows(row?.downStepList || [], DEFAULT_MIXING_DOWN_STEP_ROW_COUNT);
    //update-end---author:cursor ---date:20260522  for：【XSLMES-20260522-A39】编辑页明细补齐默认空行与新增一致-----------
@@ -838,6 +1049,7 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
    });
    //update-begin---author:cursor ---date:20260522  for：【XSLMES-20260522-A22】明细表默认空行数-----------
    materialData.value = createEmptyMaterialRows();
+    lastConvertFactor.value = normalizeMixingConvertFactor(sheetForm.convertFactor);
    stepData.value = createEmptyStepRows();
    downStepData.value = createEmptyDownStepRows();
    //update-end---author:cursor ---date:20260522  for：【XSLMES-20260522-A22】明细表默认空行数-----------
@@ -850,14 +1062,15 @@ const title = computed(() => (!showFooter.value && unref(isUpdate) ? '混炼示
 async function handleSubmit() {
  await syncSheetToForm();
  const formValues = await validate();
-  const materialList = materialRef.value?.getTableData?.() || materialData.value;
+  const materialList = resolveMaterialTableRawRows();
+  applyMaterialAccumWeight(materialList);
  const stepList = stepRef.value?.getTableData?.() || stepData.value;
  const downStepList = downStepRef.value?.getTableData?.() || downStepData.value;
  const tcuList = ensureTcuDefaultRows((tcuRef.value?.getTableData?.() || tcuData.value) as Recordable[]);
  const cleanRows = (rows: Recordable[]) => (rows || []).filter((row) => Object.values(row || {}).some((v) => v != null && v !== ''));
  const payload = {
    ...formValues,
-    materialList: cleanRows(materialList),
+    materialList: cleanRows(materialList).map(stripMaterialRowForSave),
    stepList: cleanRows(stepList),
    downStepList: cleanRows(downStepList),
    tcuList: tcuList.map((row) => ({
@@ -1008,6 +1221,25 @@ async function handleSubmit() {
    color: #262626;
  }

+  :deep(.mixing-material-name-cell) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 2px 4px;
+    cursor: pointer;
+  }
+
+  :deep(.mixing-material-name-cell.is-disabled) {
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+
+  :deep(.mixing-material-name-text) {
+    color: #262626;
+  }
+
 }
 //update-end---author:cursor ---date:20260522  for：【XSLMES-20260522-A17】顶部施工表对齐旧系统13列表格-----------

@@ -1027,6 +1259,9 @@ async function handleSubmit() {

  .material-table-wrap {
    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;

    :deep(.jeecg-j-vxe-table),
    :deep(.j-vxe-table-box),
@@ -1040,6 +1275,76 @@ async function handleSubmit() {
    }
  }

+  //update-begin---author:cursor ---date:20260525  for：【XSLMES-20260525-A42】橡胶及配合剂明细底部固定合计行-----------
+  .material-table-stack {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    min-width: min-content;
+  }
+
+  .material-table-body {
+    flex: 0 0 auto;
+    overflow: hidden;
+
+    :deep(.vxe-table--footer-wrapper) {
+      display: none;
+    }
+
+    :deep(.col--mixerMaterialName .vxe-cell) {
+      padding: 0;
+      height: 100%;
+    }
+
+    :deep(.col--mixerMaterialName .vxe-cell > div) {
+      height: 100%;
+    }
+  }
+
+  .material-table-footer {
+    flex-shrink: 0;
+    border: 1px solid #e8e8e8;
+    border-top: none;
+    background: #fafafa;
+    box-sizing: border-box;
+  }
+
+  .material-table-footer-row {
+    display: flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    font-size: 12px;
+  }
+
+  .material-footer-seq,
+  .material-footer-cell {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #e8e8e8;
+    box-sizing: border-box;
+    padding: 0 2px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .material-footer-seq {
+    background: #fafafa;
+  }
+
+  .material-footer-cell.is-label,
+  .material-footer-cell.is-total {
+    font-weight: 600;
+    color: #262626;
+  }
+  //update-end---author:cursor ---date:20260525  for：【XSLMES-20260525-A42】橡胶及配合剂明细底部固定合计行-----------
+
  //update-begin---author:cursor ---date:20260522  for：【XSLMES-20260522-A26】TCU紧凑两行且胶料表向下扩展-----------
  .material-table-wrap--fill {
    flex: 1;