antdv编辑表格，根据选择时间区间展示动态列

喔烨鸭2026-01-16 9:22
c 复制代码 
<template>
  <div class="guns-layout">
    <div class="guns-layout-content">
      <div class="guns-layout">
        <div class="guns-layout-content-application">
          <div class="content-mian">
            <div class="content-mian-header">
              <a-form ref="formRef" :model="formState" v-bind="layout" layout="horizontal">
                <a-row :gutter="20">
                  <a-col
                    :span="8"
                    v-for="(item, indexK) in forms"
                    :key="item.label"
                    v-show="indexK <= 1 || state.isToggle"
                    style="padding-left: 16px"
                  >
                    <!-- input -->
                    <a-form-item v-if="!item.type || item.type === 'input'" :label="item.label" :name="item.name" :rules="item.rules">
                      <a-input
                        v-model:value="formState[item.name]"
                        :allow-clear="true"
                        :placeholder="`请输入${item.label}`"
                        v-bind="item.others"
                      />
                    </a-form-item>
                    <!-- date -->
                    <a-form-item v-if="item.type === 'date'" :label="item.label" :name="item.name" :rules="item.rules">
                      <a-date-picker
                        v-model:value="formState[item.name]"
                        :placeholder="`请输入${item.label}`"
                        style="width: 100%"
                        v-bind="item.others"
                      />
                    </a-form-item>
                    <!-- daterange -->
                    <a-form-item v-if="item.type === 'daterange'" :label="item.label" :name="item.name" :rules="item.rules">
                      <a-range-picker
                        v-model:value="formState[item.name]"
                        :placeholder="[`开始${item.label}`, `结束${item.label}`]"
                        style="width: 100%"
                        v-bind="item.others"
                        @change="handleDateChange"
                      />
                    </a-form-item>
                    <!-- select -->
                    <a-form-item v-if="item.type === 'select'" :label="item.label" :name="item.name" :rules="item.rules">
                      <a-select
                        v-model:value="formState[item.name]"
                        :allow-clear="true"
                        :placeholder="`请选择${item.label}`"
                        v-bind="item.others"
                      >
                        <a-select-option v-for="option in item.options" :key="option.label" :value="option.value">
                          {{ option.label }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col flex="auto" :class="['m-b24', { 'm-b-20': forms.length > 5 }]" style="text-align: right">
                    <a-button type="primary" class="btn-table-form border-radius" size="small" @click="searchFun">
                      <template #icon><SearchOutlined /></template>
                      查询</a-button
                    >
                    <a-button class="ml10 btn-table-form border-radius" size="small" @click="resetFun">
                      <template #icon><redo-outlined /></template>
                      重置</a-button
                    >
                    <template v-if="forms.length >= 3">
                      <div class="table-form-btn-toggle mr10" @click="state.isToggle = !state.isToggle">
                        <span>{{ state.isToggle ? '收起' : '展开' }}</span>
                        <down-outlined v-if="state.isToggle == true" />
                        <up-outlined v-else-if="state.isToggle == false" />
                      </div>
                    </template>
                  </a-col>
                </a-row>
                <!-- <a-row :gutter="20" style="padding-top: 8px">
                  <a-col :span="7" style="padding-left: 16px">
                    <a-form-item label="订单信息" name="key1">
                      <a-input v-model:value="formState.key1" :allow-clear="true" placeholder="`请输入生产批号/订单号/客户编码/出口国家" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="7" style="padding-left: 16px">
                    <a-form-item label="交货日期" name="key2">
                      <a-range-picker v-model:value="formState.key2" :placeholder="[`开始范围日期`, `结束范围日期`]" style="width: 100%" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="7" style="padding-left: 16px">
                    <a-form-item label="生产线" name="key3">
                      <a-select
                        v-model:value="formState.key3"
                        :field-names="{ label: 'name', value: 'name' }"
                        :options="options"
                        :allow-clear="true"
                        :placeholder="`请选择`"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="3" style="text-align: right">
                    <a-button type="primary" class="btn-table-form border-radius" size="small" @click="searchFun">
                      <template #icon><SearchOutlined /></template>
                      查询</a-button
                    >
                    <a-button class="ml10 btn-table-form border-radius" size="small" @click="resetFun">
                      <template #icon><redo-outlined /></template>
                      重置</a-button
                    >
                  </a-col>
                </a-row> -->
              </a-form>
              <!-- <a-row :gutter="20" style="justify-content: end">
                <a-col :xs="24" :sm="8" :md="8" :lg="8">
                  <a-form-item label="排程日期区域" name="appDate">
                    <a-range-picker
                      v-model:value="form.appDate"
                      :disabled-date="disabledDate"
                      style="width: 100%"
                      @openChange="handelOpenChange"
                    />
                  </a-form-item>
                </a-col>
              </a-row> -->
            </div>
            <div class="content-mian-body">
              <div class="table-content">
                <a-form ref="formRef" :model="formData">
                  <a-table
                    class="table"
                    ref="ctTableRef"
                    :loading="tableLoading"
                    :data-source="formData.tableData"
                    bordered
                    size="small"
                    :pagination="false"
                    :columns="columns"
                    :defaultExpandAllRows="true"
                  >
                    <template #bodyCell="{ column, record }">
                      <template v-if="column.dataIndex === 'productionLine'">
                        <a-form-item
                          style="margin-bottom: 0"
                          :name="['tableData', formData.tableData.indexOf(record), 'productionLine']"
                          :rules="rules.requiredName"
                        >
                          <a-select
                            v-model:value="record[column.dataIndex]"
                            style="width: 100%"
                            :options="options"
                            :field-names="{ label: 'name', value: 'name' }"
                            @change="onProductionLineChange(record, column.dataIndex, $event)"
                        /></a-form-item>
                      </template>

                      <template v-if="column.dataIndex === 'totalPlannedQuantity'">
                        <a-form-item
                          style="margin-bottom: 0"
                          :name="['tableData', formData.tableData.indexOf(record), 'totalPlannedQuantity']"
                          :rules="rules.requiredAge"
                        >
                          <a-date-picker
                            v-model:value="record[column.dataIndex]"
                            style="width: 160px"
                            value-format="YYYY-MM-DD"
                            @change="onDatePickerChange(record, column.dataIndex, $event)"
                          />
                        </a-form-item>
                      </template>
                      <template v-else-if="column.key === 'date'">
                        <a-form-item
                          style="margin-bottom: 0"
                          :name="['tableData', formData.tableData.indexOf(record), `${column.dataIndex}`]"
                          :rules="rules.requiredAge"
                        >
                          <a-input-number
                            :min="1"
                            v-model:value="record[column.dataIndex]"
                            allowClear
                            @focus="storeOriginalValue(record, `${column.dataIndex}`)"
                            @blur="handleBlur(formData.tableData.indexOf(record), `${column.dataIndex}`, record)"
                            @pressEnter="validateField(formData.tableData.indexOf(record), `${column.dataIndex}`)"
                          />
                        </a-form-item>
                      </template>
                    </template>
                    <template #title>
                      <a-table :columns="columnsmini" :data-source="datamini" bordered size="small" :pagination="false" />
                    </template>
                  </a-table>
                  <!-- <div style="margin-top: 16px">
        <a-button type="primary" @click="saveForm">保存</a-button>
      </div> -->
                </a-form>
                <!-- <div>
      <a-button @click="switchColumns">切换列</a-button>
      <a-table :dataSource="dataSource" :columns="currentColumns" />
    </div> -->
              </div>
            </div>
          </div>
          <!--  -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import moment from 'moment';
import { DepartmentApi } from '@/api/department.js';
import { SchedulingApi } from '@/api/scheduling.js';
import seniorPlanSchedulingdata from '@/views/system/supplier/seniorPlanScheduling/data.json';
import { getWeekdaysInRange } from '@/utils/common/util';
import dayjs from 'dayjs';
import { message } from 'ant-design-vue';
const formRef = ref();
const originalValues = ref({}); // 存储原始值
const where = ref({});
const form = ref({});
const tableLoading = ref(false);
const formState = reactive({});
const state = ref({
  isToggle: false
});
const options = ref([
  // { label: '装配线', value: '装配线' },
  // { label: '涂装线', value: '涂装线' },
  // { label: '检测线', value: '检测线' }
]);
const totalOrderQuantity = ref(0);
const forms = ref([
  { type: 'daterange', label: '排程日期', name: 'cust_field13__c', others: {} },
  {
    type: 'input',
    label: '订单号',
    name: 'cust_field6__c',
    others: {}
  },
  { type: 'input', label: '生产批号', name: 'cust_field8__c', others: {} },
  {
    type: 'input',
    label: '客户编码',
    name: 'cust_field7__c',
    others: {}
  },
  {
    type: 'input',
    label: '出口国家',
    name: 'cust_field17__c',
    others: {}
  },
  {
    type: 'select',
    label: '生产线',
    name: 'cust_field4__c',
    options: [
      { label: '装配线', value: '装配线' },
      { label: '涂装线', value: '涂装线' },
      { label: '检测线', value: '检测线' }
    ],
    others: {}
  },
  { type: 'date', label: '预计提货时间', name: 'cust_field5__c', others: {} }
]);
const layout = ref({
  labelCol: { span: 5 },
  wrapperCol: { span: 19 }
});
const columnsmini = ref([
  // {
  //   title: '生产批号',
  //   dataIndex: 'name',
  //   width: 720
  // },
  {
    title: '',
    dataIndex: 'cons1',
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: '#327cd1' } })
  },
  {
    title: '',
    dataIndex: 'cons2',
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: '#327cd1' } })
    // width: 120
  },
  {
    title: '',
    dataIndex: 'cons3',
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: '#327cd1' } })
  },
  {
    title: '',
    dataIndex: 'cons4',
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: '#327cd1' } })
  },
  {
    title: '',
    dataIndex: 'cons5',
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: '#327cd1' } })
  },
  {
    title: '',
    dataIndex: 'cons6',
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: '#327cd1' } })
  },
  {
    title: '订单总数量',
    dataIndex: 'totalOrderQuantity',
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '',
    dataIndex: 'productionLine',
    width: 150,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '',
    dataIndex: 'orderStatus',
    width: 150,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '计划总数合计',
    dataIndex: 'totalPlannedQuantity',
    width: 140,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '当日计划数合计',
    dataIndex: '2025-12-29',
    colSpan: 5,
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '2025-12-30',
    dataIndex: '2025-12-30',
    colSpan: 0,
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '2025-12-31',
    dataIndex: '2025-12-31',
    width: 120,
    colSpan: 0,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '2026-01-01',
    dataIndex: '2026-01-01',
    colSpan: 0,
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  },
  {
    title: '2026-01-02',
    dataIndex: '2026-01-02',
    colSpan: 0,
    width: 120,
    customCell: () => ({ style: { background: '#f2fbfe' } }),
    customHeaderCell: () => ({ style: { background: '#daeeff', fontWeight: 'bold', color: 'red' } })
  }
  // {
  //   title: '当日计划数合计',
  //   colSpan: 5,
  //   customHeaderCell: () => ({ style: { background: '#daeeff' } })

  // }
]);
const disabledDate = current => {
  const todayStart = dayjs().startOf('day');

  // 如果传入的 date 小于今天开始时间，则禁用
  return dayjs(current).isBefore(todayStart);
  // return current && current < dayjs().endOf('day');
};
const datamini = ref([
  {
    key: '1',
    name: '',
    totalOrderQuantity: '',
    productionLine: '',
    totalPlannedQuantity: '',
    '2025-12-30': '/',
    '2025-12-31': '/'
  }
]);
const rules = ref({
  requiredName: [{ required: false, message: '非空项', trigger: 'change' }],
  requiredAge: [{ required: false, message: '非空项', trigger: 'change' }]
});
const getRowSpan = (data, record, index, dataIndex) => {
  let span = 1;
  // 从当前行开始向下查找相同值
  for (let i = index + 1; i < data.length; i++) {
    if (data[i][dataIndex] === record[dataIndex]) {
      span++;
    } else {
      break;
    }
  }
  return span;
};
const selectedDates = ref([]);
const createRowSpanCell = fieldKey => {
  return (record, index) => {
    // 防止 tableRef.value.list 为 null 或 undefined
    const list = formData.value.tableData;
    if (!list || !Array.isArray(list) || index >= list.length) {
      return { rowSpan: 1 };
    }

    // 防止访问不存在的索引
    const prevRecord = index > 0 ? list[index - 1] : null;

    // 获取当前行的行跨度
    const span = getRowSpan(list, record, index, fieldKey);

    // 检查当前记录与前一条记录的字段值是否不同，或者是否为第一条记录
    if (index === 0 || !prevRecord || record[fieldKey] !== prevRecord[fieldKey]) {
      return {
        rowSpan: span
      };
    } else {
      // 相同值的后续单元格隐藏
      return {
        rowSpan: 0
      };
    }
  };
};
const filterOption = (input, option) => {
  return option.value.indexOf(input) >= 0;
};
const initializeForm = () => {
  const endDate = dayjs(); // 当前日期
  const startDate = dayjs().subtract(7, 'day'); // 7天前
  // const startDate = dayjs();
  // const endDate = dayjs().add(7, 'day');
  form.value.appDate = [startDate, endDate];
  const [searchBeginTime, searchEndTime] = form.value.appDate
    ? form.value.appDate.map(item => {
        return item.format('YYYY-MM-DD');
      })
    : [];

  selectedDates.value = getWeekdaysInRange(searchBeginTime, searchEndTime);
  console.log(selectedDates.value);
};

initializeForm();
const columns = computed(() => {
  const baseCols = [
    {
      title: '生产批号',
      dataIndex: 'productionBatchNumber',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 120,
      customCell: createRowSpanCell('productionBatchNumber')
    },
    {
      title: '订单号',
      dataIndex: 'orderNumber',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      customCell: createRowSpanCell('orderNumber')
    },
    {
      title: '客户编码',
      dataIndex: 'customerCode',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 120,
      customCell: createRowSpanCell('customerCode')
    },
    {
      title: '出口国家',
      dataIndex: 'exportCountry',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 120,
      customCell: createRowSpanCell('exportCountry')
    },
    {
      title: '客户型号',
      dataIndex: 'customerModel',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 120
    },
    {
      title: '工厂型号',
      dataIndex: 'factoryModel',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 120
    },
    {
      title: '订单数量',
      dataIndex: 'orderQuantity',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 120,
      customCell: createRowSpanCell('exportCountry')
    }, //data.scheduledWorkOrderList[7].schedules[0].scheduleQuantity
    {
      title: '生产线',
      dataIndex: 'productionLine',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 150
    },
    {
      title: '排程状态',
      dataIndex: 'orderStatus',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 150
    },
    {
      title: '交货日期',
      dataIndex: 'totalPlannedQuantity',
      customHeaderCell: () => ({ style: { background: '#fadb14' } }),
      width: 140
      // customCell: createRowSpanCell('productionBatchNumber')
    }
    // {
    //   title: '生产时间',
    //   customHeaderCell: () => ({ style: { background: '#fadb14' } }),
    //   children: [
    //     {
    //       title: '2025-12-29',
    //       dataIndex: '2025-12-29',
    //       width: 120,
    //       key: 'date',
    //       customHeaderCell: () => ({ style: { background: '#fadb14', fontWeight: 'bold', color: '#393d39' } })
    //     },
    //     {
    //       title: '2025-12-30',
    //       dataIndex: '2025-12-30',
    //       width: 120,
    //       key: 'date',
    //       customHeaderCell: () => ({ style: { background: '#fadb14', fontWeight: 'bold', color: '#393d39' } })
    //     },
    //     {
    //       title: '2025-12-31',
    //       dataIndex: '2025-12-31',
    //       width: 120,
    //       key: 'date',
    //       customHeaderCell: () => ({ style: { background: '#fadb14', fontWeight: 'bold', color: '#393d39' } })
    //     },
    //     {
    //       title: '2026-01-01',
    //       dataIndex: '2026-01-01',
    //       width: 120,
    //       key: 'date',
    //       customHeaderCell: () => ({ style: { background: '#fadb14', fontWeight: 'bold', color: '#393d39' } })
    //     },
    //     {
    //       title: '2026-01-02',
    //       dataIndex: '2026-01-02',
    //       width: 120,
    //       key: 'date',
    //       customHeaderCell: () => ({ style: { background: '#fadb14', fontWeight: 'bold', color: '#393d39' } })
    //     }
    //   ]
    // }
  ];
  if (selectedDates.value.length > 0) {
    const dateCols = selectedDates.value.map(date => ({
      title: date,
      dataIndex: date,
      width: 120,
      key: 'date',
      customHeaderCell: () => ({ style: { background: '#fadb14', fontWeight: 'bold', color: '#393d39' } })
    }));
    let allTime = [
      {
        title: '生产时间',
        customHeaderCell: () => ({ style: { background: '#fadb14' } }),
        children: dateCols
      }
    ];
    return [...baseCols, ...allTime];
  } else {
    return [...baseCols];
  }
});

const formData = ref({
  tableData: [
    // {
    //   key: '1',
    //   name: '251041',
    //   age: '20251226001-19',
    //   tel: 'AQ226',
    //   phone: '奥地利',
    //   address: 'MSRC120',
    //   address2: 'FBQHCNbO9B',
    //   totalOrderQuantity: 24,
    //   productionLine: '装涂线',
    //   '2025-12-30': 4,
    //   '2025-12-31': 20
    // },
    // {
    //   key: '2',
    //   name: '251041',
    //   age: '20251226001-19',
    //   tel: 'AQ226',
    //   phone: '奥地利',
    //   address: 'MSRC120',
    //   address2: 'FBQHCNbO9B',
    //   totalOrderQuantity: 84,
    //   productionLine: '装涂线',
    //   '2025-12-30': 4,
    //   '2025-12-31': 20
    // },
    // {
    //   key: '3',
    //   name: '251047',
    //   age: '20251226001-18',
    //   tel: 'AQ278',
    //   phone: '阿根廷',
    //   address: 'MSRC120',
    //   address2: 'FBQHCNbO9B',
    //   totalOrderQuantity: 36,
    //   productionLine: '装涂线',
    //   '2025-12-30': 4,
    //   '2025-12-31': 20
    // },
    // {
    //   key: '4',
    //   name: '251047',
    //   age: '20251226001-18',
    //   tel: 'AQ278',
    //   phone: '阿根廷',
    //   address: 'MSRC130',
    //   address2: 'FBQHCNbO9B',
    //   totalOrderQuantity: 36,
    //   productionLine: '装涂线',
    //   '2025-12-30': 4,
    //   '2025-12-31': 20
    // },
    // {
    //   key: '5',
    //   name: '251048',
    //   age: '20251226001-16',
    //   tel: 'AQ229',
    //   phone: '匈牙利',
    //   address: 'XYLRC130',
    //   address2: 'FBQHCNbO9B',
    //   totalOrderQuantity: 36,
    //   productionLine: '装涂线',
    //   '2025-12-30': 4,
    //   '2025-12-31': 20
    // }
  ]
});
const dataSource = ref([]);
const dataSourceA = ref([
  { key: '1', value: 'John Brown', age: 32, address: 'New York' },
  { key: '2', value: 'Jim Green', age: 42, address: 'London' }
]);
const dataSourceB = ref([
  { key: '1', name: 'John Brown', age: 32, address: 'New York' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London' }
]);
const columnsA = ref([
  { title: '姓名', dataIndex: 'value', key: 'value' },
  { title: '年龄', dataIndex: 'age', key: 'age' }
]);
const columnsB = ref([
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '地址', dataIndex: 'address', key: 'address' }
]);
const currentColumns = ref([]); // 当前显示的列
currentColumns.value = columnsA.value;

const switchColumns = () => {
  // 动态切换 columns
  currentColumns.value = currentColumns.value === columnsA.value ? columnsB.value : columnsA.value;
  dataSource.value = currentColumns.value === columnsA.value ? dataSourceB.value : dataSourceA.value;
};
const getTableList = wheredata => {
  let res = seniorPlanSchedulingdata;
  options.value = res.data.lineCategories;
  totalOrderQuantity.value = res.data.totalOrderQuantity;
  datamini.value[0].totalOrderQuantity = res.data.totalOrderQuantity;
  datamini.value[0].totalPlannedQuantity = res.data.totalPlannedQuantity;

  formData.value.tableData = transformData(res.data.scheduledWorkOrderList); //res.data.scheduledWorkOrderList;
  console.log(formData.value.tableData);
  // tableLoading.value = true;
  // SchedulingApi.advancedSchedulingInfo(wheredata)
  //   .then(res => {
  //     if (res.code == 200) {
  //       options.value = res.data.lineCategories;
  //       totalOrderQuantity.value = res.data.totalOrderQuantity;
  //       datamini.value[0].totalOrderQuantity = res.data.totalOrderQuantity;
  //       datamini.value[0].totalPlannedQuantity = res.data.totalPlannedQuantity;

  //       formData.value.tableData = transformData(res.data.scheduledWorkOrderList); //res.data.scheduledWorkOrderList;
  //       console.log(formData.value.tableData);
  //     } else {
  //       message.error(res.message);
  //     }
  //   })
  //   .finally(() => {
  //     tableLoading.value = false;
  //   });
};
// 提取并重组数据
function transformData(response) {
  const result = [];
  response.forEach(item => {
    if (item.schedules && item.schedules.length > 0) {
      item.schedules.forEach(instance => {
        const newData2 = {
          customerCode: item.customerCode,
          customerModel: item.customerModel,
          deliveryDate: item.deliveryDate,
          exportCountry: item.exportCountry,
          factoryModel: item.factoryModel,
          orderHangId: item.orderHangId,
          orderNumber: item.orderNumber,
          orderQuantity: item.orderQuantity,
          orderStatus: item.orderStatus,
          productionBatchNumber: item.productionBatchNumber
        };
        let datatimes = moment(instance.scheduleDate).format('YYYY-MM-DD');
        newData2[datatimes] = instance.scheduleQuantity;

        newData2['productionLine'] = instance.productionLine;
        console.log(newData2['productionLine']);
        result.push(newData2);
      });
    } else {
      const newData = {
        customerCode: item.customerCode,
        customerModel: item.customerModel,
        deliveryDate: item.deliveryDate,
        exportCountry: item.exportCountry,
        factoryModel: item.factoryModel,
        orderHangId: item.orderHangId,
        orderNumber: item.orderNumber,
        orderQuantity: item.orderQuantity,
        orderStatus: item.orderStatus,
        productionBatchNumber: item.productionBatchNumber
      };
      result.push(newData);
    }
  });
  return result;
}
// 生产线选择改变事件
const onProductionLineChange = (record, dataIndex, value) => {
  console.log(`生产线选择改变: ${record.id}, ${dataIndex}, ${value}`);
  // callApiToUpdateData(record, dataIndex, value);
};

// 日期选择器改变事件
const onDatePickerChange = (record, dataIndex, value) => {
  console.log(`日期选择改变: ${record.id}, ${dataIndex}, ${value}`);
  // callApiToUpdateData(record, dataIndex, value);
};
// 存储原始值
const storeOriginalValue = (record, field) => {
  originalValues.value[`${record.key}-${field}`] = record[field];
};
const handelOpenChange = e => {
  if (e === false) {
    const [searchBeginTime, searchEndTime] = form.value.appDate
      ? form.value.appDate.map(item => {
          return item.format('YYYY-MM-DD');
        })
      : [];

    selectedDates.value = getWeekdaysInRange(searchBeginTime, searchEndTime);
    console.log(selectedDates.value);
  }
};
// 处理失焦事件
const handleBlur = (index, field, record) => {
  // 检查值是否发生变化
  const originalValue = originalValues.value[`${record.key}-${field}`];
  const currentValue = record[field];

  // 如果值发生了变化才进行验证
  if (originalValue !== currentValue) {
    validateField(index, field);
  }
};
const resetFun = () => {
  // 重置表单
  where.value = {};
};
const searchFun = () => {
  // 搜索表单
  let whereData = {
    selectFlag: 0
  };

  whereData.customFields = [{ fieldCode: 'cust_field3__c', fieldValue: '待生产' }];
  whereData.singleTextCondition = [];
  Object.keys(formState).forEach(key => {
    if (key == 'cust_field6__c' && formState[key]) {
      whereData.customFields.push({ fieldCode: 'cust_field6__c', fieldValue: formState.cust_field6__c });
    } else if (key == 'cust_field8__c' && formState[key]) {
      whereData.customFields.push({ fieldCode: 'cust_field8__c', fieldValue: formState.cust_field8__c });
    } else if (key == 'cust_field7__c' && formState[key]) {
      whereData.customFields.push({ fieldCode: 'cust_field7__c', fieldValue: formState.cust_field7__c });
    } else if (key == 'cust_field17__c' && formState[key]) {
      whereData.customFields.push({ fieldCode: 'cust_field17__c', fieldValue: formState.cust_field17__c });
    } else if (key == 'cust_field4__c' && formState.data[key]) {
      where.value.singleTextCondition.push({ fieldCode: 'cust_field4__c', fieldValues: [formState.data.cust_field4__c] });
    } else if (key == 'cust_field5__c' && formState.data[key]) {
      where.value.singleTextCondition.push({
        fieldCode: 'cust_field5__c',
        fieldValues: formState.data.cust_field5__c ? [formState.data.cust_field5__c.format('YYYY-MM-DD')] : []
      });
    } else if (key == 'cust_field13__c' && formState[key]) {
      const [searchBeginTime, searchEndTime] = formState.cust_field13__c
        ? formState.cust_field13__c.map(item => {
            return item.format('YYYY-MM-DD');
          })
        : [];
      if (searchBeginTime) {
        whereData.datetimeCondition = [
          {
            fieldCode: 'cust_field13__c',
            fieldValues: [dayjs(searchBeginTime, 'YYYY-MM-DD').valueOf(), dayjs(searchEndTime, 'YYYY-MM-DD').valueOf()]
          }
        ];
      }
    }
  });
  where.value = whereData;
  getTableList(where.value);
};
onMounted(() => {
  getTableList(where.value);
});
// 验证特定字段
const validateField = async (index, field) => {
  try {
    await formRef.value.validateFields([['tableData', index, field]]);
  } catch (error) {
    // 验证失败，Ant Design会自动显示错误信息
    console.log('验证失败:', error);
  }
};

// 处理字段变化（可用于其他业务逻辑）
const handleFieldChange = (record, field) => {
  // 这里可以添加其他业务逻辑
  console.log(`字段 ${field} 发生变化:`, record[field]);
};
// 保存表单
const saveForm = async () => {
  try {
    // 验证整个表单
    await formRef.value.validate();
    console.log('表单验证通过，可以保存数据');
    // 这里可以添加保存数据的逻辑
  } catch (error) {
    console.log('表单验证失败:', error);
    // Ant Design Vue 会自动显示错误信息
  }
};
</script>
<style lang="less" scoped>
.yituo-layout {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex: auto;
  height: 100%;
  min-height: 0px;
  position: relative;
  background-color: #fff;
  // padding: 12px;
}
:deep(.ant-table-small .ant-table-title) {
  padding: 0;
}
.ml10 {
  margin-left: 10px;
}
:deep(.ant-table-body) {
  overflow-y: auto;
}
:deep(.table) {
  width: 100%;
  flex: auto;
  ::-webkit-scrollbar {
    width: 10px !important;
  }
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
  .ant-spin-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .ant-table-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    .ant-table-body {
      position: relative;
      flex: 1;
      table {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
  .ant-table {
    flex: 1;
  }
}
.table-form-btn-toggle {
  display: inline-block;
  padding: 0 8px;
  color: #4e4e4e;
  cursor: pointer;
}
</style>

seniorPlanScheduling/data.json使用的模拟数据

c 复制代码 
{
  "code": 200,
  "message": "查询成功",
  "data": {
    "scheduledWorkOrderList": [
      {
        "schedules": [],
        "productionBatchNumber": "220000",
        "orderNumber": "250930Cc01",
        "customerCode": "FL152",
        "exportCountry": "以色列",
        "customerModel": "IXNC17",
        "factoryModel": "FBQHCNb13B",
        "orderQuantity": 3.0,
        "deliveryDate": null,
        "orderStatus": "待排产",
        "orderHangId": "150173"
      },
      {
        "schedules": [],
        "productionBatchNumber": "250946",
        "orderNumber": "MO20251225003-9",
        "customerCode": "FL112",
        "exportCountry": "澳大利亚",
        "customerModel": "NHX26",
        "factoryModel": "BXC56.1BX107",
        "orderQuantity": 10.0,
        "deliveryDate": null,
        "orderStatus": "待排产",
        "orderHangId": "150136"
      },
      {
        "schedules": [],
        "productionBatchNumber": "250946",
        "orderNumber": "MO20251225003-8",
        "customerCode": "FL112",
        "exportCountry": "澳大利亚",
        "customerModel": "NHX26",
        "factoryModel": "BXC56.1BX107",
        "orderQuantity": 10.0,
        "deliveryDate": null,
        "orderStatus": "待排产",
        "orderHangId": "150135"
      },
      {
        "schedules": [],
        "productionBatchNumber": "251034",
        "orderNumber": "MO20251224003-5",
        "customerCode": "FL152",
        "exportCountry": "以色列",
        "customerModel": "X20-26CT",
        "factoryModel": "BX20HC56sBW103d",
        "orderQuantity": 24.0,
        "deliveryDate": null,
        "orderStatus": "待排产",
        "orderHangId": "152794"
      },
      {
        "schedules": [],
        "productionBatchNumber": "test123123",
        "orderNumber": "MO20251216004-8",
        "customerCode": "FL147",
        "exportCountry": "澳大利亚",
        "customerModel": "HLIHP-14 / AXCR14",
        "factoryModel": "BXC28.1BX106",
        "orderQuantity": 3.0,
        "deliveryDate": null,
        "orderStatus": "待排产",
        "orderHangId": "152786"
      },
      {
        "schedules": [
          {
            "workOrderCode": "150172",
            "productionLine": "电控板",
            "scheduleQuantity": 1.0,
            "scheduleDate": 1767801600000
          },
          {
            "workOrderCode": "150172",
            "productionLine": "预焊",
            "scheduleQuantity": 1.0,
            "scheduleDate": 1767801600000
          },
          {
            "workOrderCode": "150172",
            "productionLine": "电控板",
            "scheduleQuantity": 1.0,
            "scheduleDate": 1767801600000
          }
        ],
        "productionBatchNumber": "220000",
        "orderNumber": "250930Cc01",
        "customerCode": "FL152",
        "exportCountry": "以色列",
        "customerModel": "IXNC14",
        "factoryModel": "FBQHCNb09B",
        "orderQuantity": 3.0,
        "deliveryDate": null,
        "orderStatus": "待生产",
        "orderHangId": "150172"
      },
      {
        "schedules": [
          {
            "workOrderCode": "150137",
            "productionLine": "电控板",
            "scheduleQuantity": 1.0,
            "scheduleDate": 1767801600000
          }
        ],
        "productionBatchNumber": "250946",
        "orderNumber": "MO20251225003-10",
        "customerCode": "FL112",
        "exportCountry": "澳大利亚",
        "customerModel": "NHX26",
        "factoryModel": "BXC56.1BX107",
        "orderQuantity": 7.0,
        "deliveryDate": null,
        "orderStatus": "待生产",
        "orderHangId": "150137"
      }
    ],
    "lineCategories": [
      {
        "id": 1767121491986185,
        "code": "00111",
        "name": "电控板",
        "orgId": 20746567,
        "supportActive": true
      },
      {
        "id": 1767121491986197,
        "code": "00112",
        "name": "预焊",
        "orgId": 20746567,
        "supportActive": true
      },
      {
        "id": 1767104055436182,
        "code": "00113",
        "name": "湾管",
        "orgId": 20746567,
        "supportActive": true
      },
      {
        "id": 1767139209889446,
        "code": "00114",
        "name": "包装",
        "orgId": 20746567,
        "supportActive": true
      },
      {
        "id": 1767121491986215,
        "code": "00121",
        "name": "a",
        "orgId": 20746567,
        "supportActive": true
      },
      {
        "id": 1767139684795263,
        "code": "00122",
        "name": "b",
        "orgId": 20746567,
        "supportActive": true
      },
      {
        "id": 1767104055436201,
        "code": "00123",
        "name": "d",
        "orgId": 20746567,
        "supportActive": true
      },
      {
        "id": 1767104055436211,
        "code": "00124",
        "name": "商务线",
        "orgId": 20746567,
        "supportActive": true
      }
    ],
    "totalOrderQuantity": 60.0,
    "dailyPlannedQuantity": 4.0,
    "totalPlannedQuantity": 0.0
  },
  "timestamp": 1767954233205
}
相关推荐
天天向上10242 小时前
el-table 解决一渲染数据页面就卡死
前端·javascript·vue.js
bjzhang752 小时前
使用 HTML + JavaScript 实现单会议室周日历管理系统
前端·javascript·html
weixin_431600442 小时前
开发中遇到需要对组件库组件结构调整的两种落地方案实践
前端·组件库
Code知行合壹2 小时前
Vue3入门
前端·javascript·vue.js
LawrenceLan2 小时前
17.Flutter 零基础入门（十七）：StatelessWidget 与 State 的第一次分离
开发语言·前端·flutter·dart
桃子叔叔2 小时前
react-wavesurfer录音组件2：前端如何处理后端返回的仅Blob字段
前端·react.js·状态模式
nie_xl2 小时前
VS/TRAE中设置本地maven地址的方法
运维·服务器·前端
LV技术派2 小时前
适合很多公司和团队的 AI Coding 落地范式（三）
前端·ai编程·cursor
一只小bit2 小时前
Qt 对话框全方面详解，包含示例与解析
前端·c++·qt·cpp·页面
热门推荐
01GitHub 镜像站点02Linux下V2Ray安装配置指南03Labelme从安装到标注：零基础完整指南04网站改了域名，如何查找？05Claude Code Skills 实用使用手册06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07UV安装并设置国内源08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09百度网盘偷偷给电脑“降频”？102025年大语言模型技术全景报告