ds-yamada-fcbi-admin/src/views/fcbi/sales/sumSettings.vue

<!-- 売上集計条件指定 -->
<template>
  <div class="app-container">
    <div class="form-container">
      <div class="section-container">
        <div class="form-section">
          対象
        </div>
        <el-form-item class="content-group">
          <div class="radio-group-vertical">
            <!-- 月指定行 -->
            <div class="monthly-section">
                <div class="date-groups-wrapper">
                  <div class="date-group">
                    <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
                      月指定
                    </el-radio>
                    <el-select class="date-select" v-model="queryParams.startYear" placeholder=""
                               :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
                      <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
                    </el-select>
                    <span class="date-label">年</span>
                  </div>
                  <div class="date-group">
                    <el-select class="date-select-small" v-model="queryParams.startMonth" placeholder=""
                               :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
                      <el-option v-for="month in months" :key="month" :label="month" :value="month"></el-option>
                    </el-select>
                    <span class="date-label">月</span>
                  </div>
                </div>
            </div>
            <!-- 年度指定行 -->
            <div class="radio-item annual-group">
              <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
                年度指定
              </el-radio>
              <div class="annual-row">
                <div class="date-group">
                  <el-select class="date-select" v-model="queryParams.annual" placeholder=""
                             :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.ANNUAL">
                    <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
                  </el-select>
                  <span class="date-label">年度</span>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>
      <!-- 集計種別区域：使用相同的section-container结构 -->
      <div class="section-container">
        <!-- 与“対象”区域保持一致：使用form-section作为标题容器 -->
        <div class="form-section">集計種別</div>
        <el-form-item class="content-group"> <!-- 复用content-group，确保内容区域基准一致 -->
          <el-radio-group v-model="queryParams.aggregationType" class="radio-group-horizontal">
            <!-- 为每个radio添加common-radio类，与“対象”区域的单选框样式统一 -->
            <el-radio class="common-radio" :label="AGGREGATION_TYPE.FC">FC別集計</el-radio>
            <el-radio class="common-radio" :label="AGGREGATION_TYPE.AREA">エリア別集計</el-radio>
            <el-radio class="common-radio" :label="AGGREGATION_TYPE.STORE">店舗別集計</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="divider"></div>
      <PublicRange
          v-model="queryParams"
          :region-tree="regionTree"
          :yamada-fc-brand="yamadaFcBrand"
          :yamada-business-type="yamadaBusinessType"
          @check-change="handleCheckChange"
          :show-fc="true"
          :show-business-type="true"
      />
      <div class="btn-section">
        <el-button class="btn-aggregation" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
        <el-button class="btn-reset" @click="resetForm" icon="Refresh">リセット</el-button>
      </div>
    </div>
  </div>
</template>

<script name="purchaseSaleSettings" setup>
import { getRegionTree } from "@/api/fcbi/survey.js";
import { reactive, ref, onMounted, getCurrentInstance, watch, toRefs } from 'vue';
import PublicRange from '../../../components/PublicRange.vue';
import { useSurveyStore, useSalesStore } from '@/store/yamadaStore';
import { useRouter } from 'vue-router';
import { AGGREGATION_TYPE, TARGET_PERIOD_TYPE } from '@/constants';

const currentYear = new Date().getFullYear();
const years = Array.from({ length: 11 }, (_, i) => currentYear + i);
const months = Array.from({ length: 12 }, (_, i) => i + 1);
const error = ref('');
const { proxy } = getCurrentInstance();
const surveyStore = useSurveyStore();
const salesStore = useSalesStore();
const router = useRouter();

// テンプレートで定数を使用可能にするため、エクスポートします
defineExpose({ AGGREGATION_TYPE, TARGET_PERIOD_TYPE });

/**
 * データ辞書からブランドと業務タイプのデータを取得します
 */
const { yamada_fc_brand: yamadaFcBrand } = proxy.useDict('yamada_fc_brand');
const { yamada_business_type: yamadaBusinessType } = proxy.useDict('yamada_business_type');

/**
 * 地域ツリーデータと選択された地域コードの配列を保持します
 */
const regionTree = ref([]);
const selectedRegions = ref([]);

/**
 * フォームの入力データを保持するオブジェクトです
 */
const data = reactive({
  // 検索条件を格納するオブジェクト
  queryParams: {
    targetPeriodType: TARGET_PERIOD_TYPE.MONTHLY,
    aggregationType: AGGREGATION_TYPE.FC,
    startYear: null,
    startMonth: null,
    annual: null,
    brandCode: [],
    businessTypeCode: [],
    regions: []
  }
});
const { queryParams } = toRefs(data);

/**
 * 地域ツリーのデータが更新されたときに、選択された地域を更新します
 */
watch(() => regionTree.value, (newVal) => {
  if (newVal?.length) {
    updateSelectedRegions(newVal);
  }
}, { deep: true });

watch(
    () => queryParams.value.targetPeriodType,
    (newVal) => {
      if (newVal === TARGET_PERIOD_TYPE.MONTHLY) {
        queryParams.value.annual = null;
      } else {
        queryParams.value.startYear = null;
        queryParams.value.startMonth = null;
      }
    },
    { immediate: true }
);

/**
 * コンポーネントのマウント後に地域ツリーデータを初期化します
 */
onMounted(async () => {
  try {
    const response = await getRegionTree();
    if (response?.success) {
      const regions = response.data.regions || [];
      regionTree.value = regions;
      surveyStore.setRegionTree(regions)
      if (regions.length) {
        updateSelectedRegions(regions);
      }
    } else {
      error.value = response?.message || '地域データの取得に失敗しました';
      proxy.$message.error(error.value);
      console.error('地域データの取得に失敗しました:', response);
    }
  } catch (err) {
    const errorMsg = '地域データの取得中にエラーが発生しました';
    proxy.$message.error(errorMsg);
    console.error('地域データの取得中にエラーが発生しました:', err);
  }
});

/**
 * 地域のチェック状態が変更されたときのハンドラー関数です
 */
const handleCheckChange = (regionId, isChecked) => {
  const region = findRegionById(regionTree.value, regionId);
  if (!region) return;

  if (isChecked) {
    if (!selectedRegions.value.some(r => r.regionCode === region.regionCode)) {
      selectedRegions.value.push({ regionCode: region.regionCode });
    }
  } else {
    selectedRegions.value = selectedRegions.value.filter(r => r.regionCode !== region.regionCode);
  }
  queryParams.value.regions = [...selectedRegions.value];
};

/**
 * 指定されたIDを持つ地域ノードをツリーから再帰的に検索します
 */
const findRegionById = (nodes, id) => {
  if (!nodes?.length) return null;

  for (const node of nodes) {
    if (node.id === id) {
      return node;
    }
    if (node.children && node.children.length > 0) {
      const found = findRegionById(node.children, id);
      if (found) {
        return found;
      }
    }
  }
  return null;
};

/**
 * 選択されたすべての地域を再帰的に更新し、サブノードのみを収集します
 */
const updateSelectedRegions = (nodes) => {
  if (!nodes?.length) return;
  selectedRegions.value = [];
  // 最上位ノードは親ノードとしてマークされ、再帰的に子ノードを処理します
  collectSelectedRegions(nodes, true);
  queryParams.value.regions = [...selectedRegions.value];
};

/**
 * 選択されたすべてのサブエリアオブジェクトを再帰的に収集します（親ノードをスキップ）
 */
const collectSelectedRegions = (nodes, isParent = false) => {
  nodes.forEach(node => {
    // 親ノード（上位ノード）の場合は、収集をスキップして再帰的に子ノードを処理します
    if (isParent) {
      if (node.children && node.children.length > 0) {
        collectSelectedRegions(node.children, false);
      }
      return;
    }
    if (node.checked) {
      selectedRegions.value.push({
        regionCode: node.regionCode
      });
    }
    if (node.children && node.children.length > 0) {
      collectSelectedRegions(node.children, false);
    }
  });
};

/**
 * 検索条件を検証する関数です
 */
const validateForm = () => {
  const errors = [];

  if (queryParams.value.targetPeriodType === TARGET_PERIOD_TYPE.MONTHLY) {
    if (!queryParams.value.startYear) {
      errors.push('「対象 月指定」の年を選択してください');
    }
    if (!queryParams.value.startMonth) {
      errors.push('「対象 月指定」の月を選択してください');
    }
  } else if (queryParams.value.targetPeriodType === TARGET_PERIOD_TYPE.ANNUAL) {
    if (!queryParams.value.annual) {
      errors.push('「対象 年度指定」の年度を選択してください');
    }
  }

  return errors;
};

/**
 * 集計ボタンをクリックしたときの処理関数です
 */
const handleAggregate = () => {
  const errors = validateForm();
  if (errors.length) {
    errors.forEach(error => proxy.$message.warning(error));
    return;
  }

  let salesFlag = 0;
  const isMonthly = queryParams.value.targetPeriodType === TARGET_PERIOD_TYPE.MONTHLY;
  const { aggregationType } = queryParams.value;

  switch (aggregationType) {
    case AGGREGATION_TYPE.FC:
      const hasArea = queryParams.value.regions?.length > 0;
      salesFlag = isMonthly ? (hasArea ? 1 : 2) : (hasArea ? 3 : 4);
      break;
    case AGGREGATION_TYPE.AREA:
      salesFlag = isMonthly ? 7 : 8;
      break;
    case AGGREGATION_TYPE.STORE:
      salesFlag = isMonthly ? 5 : 6;
      break;
    default:
      proxy.$message.warning('集計種別を選択してください');
      return;
  }

  const transferData = {
    targetPeriodType: queryParams.value.targetPeriodType,
    startYear: isMonthly ? queryParams.value.startYear : null,
    startMonth: isMonthly ? queryParams.value.startMonth : null,
    annual: !isMonthly ? queryParams.value.annual : null,
    brandCodes: queryParams.value.brandCode,
    regionCodes: queryParams.value.regions.map(r => r.regionCode),
    aggregationType: queryParams.value.aggregationType,
    salesFlag: salesFlag
  };
  salesStore.setSalesData(transferData);
  router.push({ name: 'salesSumResult' });
};

/**
 * リセットボタンをクリックしたときの処理関数です
 */
const resetForm = () => {
  queryParams.value.targetPeriodType = TARGET_PERIOD_TYPE.MONTHLY;
  queryParams.value.aggregationType = AGGREGATION_TYPE.FC;
  queryParams.value.startYear = null;
  queryParams.value.startMonth = null;
  queryParams.value.annual = null;
  queryParams.value.brandCode = [];
  queryParams.value.regions = [];
  selectedRegions.value = [];
  if (regionTree.value.length) {
    resetRegionTreeCheck(regionTree.value);
  }
};
/**
 * 地域ツリーのチェック状態をリセットします
 */
const resetRegionTreeCheck = (nodes) => {
  nodes.forEach(node => {
    node.checked = false;
    if (node.children?.length) {
      resetRegionTreeCheck(node.children);
    }
  });
};
</script>

<style scoped>
/* 表单容器样式 - 整体布局控制 */
.form-container {
  margin-top: 0;  /* 顶部外边距 */
  padding: 0 !important; /* 清除原有左右内边距，避免干扰基准线 */
}

/* 1. 统一标题与内容的布局容器 */
.section-container {
  display: flex;
  align-items: flex-start; /* 顶部对齐，确保基准一致 */
  margin-bottom: 12px;
  gap: 10px; /* 标题与内容的固定间距 */
}

/* 2. 统一标题样式（确保“対”和“集”字对齐） */
/* 统一标题文字的垂直对齐基准（核心修正） */
.form-section {
  /* 保留原有所有属性 */
  width: 80px !important; /* 固定宽度，确保文字左侧起点一致 */
  font-size: 14px !important; /* 统一字体大小 */
  line-height: 1.4 !important; /* 统一行高，确保文字基线一致 */
  padding-left: 0 !important; /* 清除额外左内边距 */
  margin: 0 !important; /* 清除默认外边距 */
  margin-top: 5px !important; /* 保持与单选框的垂直居中对齐 */
  text-align: left !important; /* 强制左对齐 */
  letter-spacing: normal !important; /* 清除可能的字间距差异 */
  display: inline-block !important; /* 确保宽度和高度计算准确 */

  /* 修正对齐的核心属性 - 与分割线严格一致 */
  margin-left: 27px !important; /* 精确匹配分割线左侧偏移 */
  box-sizing: border-box !important; /* 确保宽度计算不包含padding */
  position: relative !important; /* 建立稳定的定位基准 */
  left: 0 !important; /* 清除可能的定位偏移 */
  top: 0 !important;
}


/* 确保标题文字的左侧起点完全一致 */
.form-section::first-letter {
  margin-left: 0 !important; /* 首个字符（対、集）左侧无额外间距 */
}

/* 公共区域标题样式 - 深层选择器修改子组件样式 */
:deep(.public-range-title) {
  text-align: left !important;  /* 强制左对齐 */
  padding-left: 20px;           /* 左侧内边距 */
}

/* 核心：将FC、業種、エリア三组控件整体向左平移 */
:deep(.public-range-container) {
  /* 计算平移量：原有左内边距(60px) - 目标左偏移(27px) = 需向左移动33px */
  padding-left: 27px !important; /* 直接设置目标左内边距为27px */
  margin-left: 0 !important;
}

.content-group {
  flex: 1; /* 占满剩余宽度 */
  margin: 0 !important; /* 清除element-ui默认margin */
  padding-left: 20px !important; /* 统一内容区左侧缩进，修复对齐问题 */
}

/* 4. 垂直排列的单选组（月指定/年度指定） */
.radio-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 月指定与年度指定的垂直间距 */
  padding: 0 !important;
  margin: 0 !important;
}

/* 5. 水平排列的单选组（集計種別） */
.radio-group-horizontal {
  display: flex;
  gap: 20px; /* 集計種別选项之间的水平间距 */
  align-items: center;
  flex-wrap: wrap; /* 确保小屏幕下不溢出 */
  margin: 0 !important; /* 清除可能的默认margin */
  padding: 0 !important;
}

/* 6. 所有单选框统一样式（核心：确保左侧对齐） */
.common-radio {
  width: 100px !important; /* 固定宽度，确保文字左侧起点对齐 */
  flex-shrink: 0 !important; /* 禁止压缩，保持宽度稳定 */
  margin: 0 !important; /* 清除默认margin */
  padding: 0 0 0 20px !important; /* 为单选框圆圈预留空间 */
  text-align: left !important; /* 文字左对齐，确保起始点一致 */
  position: relative !important; /* 建立定位基准 */
}

/* 单选框圆圈（input）定位 - 核心对齐控制 */
:deep(.common-radio .el-radio__input) {
  position: absolute !important; /* 脱离文档流，基于父元素定位 */
  left: 0 !important; /* 固定在左侧，所有单选框left=0对齐 */
  top: 50% !important; /* 垂直居中 */
  transform: translateY(-50%) !important; /* 精确垂直居中 */
  margin: 0 !important; /* 清除默认margin */
}

/* 单选框文字与圆圈的间距控制 */
:deep(.common-radio .el-radio__label) {
  padding-left: 5px !important; /* 文字与圆圈的固定间距 */
  margin: 0 !important;
}

/* 只调整月指定区域的年份下拉框，适配年度指定的样式 */
.monthly-section .date-select {
  /* 复制年度指定下拉框的宽度 */
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

/* 调整月指定单选框的宽度，与年度指定的单选框保持一致的左侧空间 */
.monthly-section .common-radio {
  /* 与年度指定的单选框宽度保持一致 */
  width: 80px !important;
}

/* 确保月指定的日期组与年度指定的布局对齐 */
.monthly-section .date-group {
  /* 消除可能的额外边距，与年度指定保持一致 */
  margin: 0 !important;
  padding: 0 !important;
}

.monthly-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.date-groups-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* 年和月下拉列表之间的间隔 */
  flex-wrap: wrap; /* 允许在小屏幕上折行 */
}

/* 7. 单选按钮与下拉框的组合容器 - 确保不折行 */
.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap; /* 强制不换行 */
}

/* 下拉框容器 - 自适应剩余宽度，与单选框同行 */
.annual-row {
  flex: 1; /* 占据剩余宽度 */
  min-width: 0; /* 允许收缩 */
  margin: 0; /* 清除默认边距 */
  padding: 2px 0; /* 减少内边距，节省空间 */
}

/* 日期项容器 - 每个整体作为独立项 */
.date-group {
  display: flex;  /* 内部元素（下拉框+标签）不折行 */
  align-items: center;
  gap: 6px; /* 下拉框与标签的间距 */
  white-space: nowrap; /* 防止内部元素折行 */
}

/* 日期选择器样式 - 年下拉框（强制适配宽度） */
.date-select {
  width: 100px !important;
  min-width: 80px !important;
  max-width: 120px !important;
  padding: 0 8px !important; /* 减少内边距 */
}

/* 日期选择器样式 - 月下拉框 */
.date-select-small {
  width: 80px !important;
  min-width: 60px !important;
  max-width: 90px !important;
  padding: 0 8px !important; /* 减少内边距 */
}

/* 日期标签样式 - "年"和"月"文字 */
.date-label {
  font-size: 14px;   /* 字体大小 */
  color: #666;       /* 文字颜色 */
  white-space: nowrap; /* 禁止文字折行 */
}

/* 分隔线样式 - 区域分隔 */
.divider {
  height: 1px;                  /* 高度 */
  background-color: #FF0066;    /* 蓝色背景 */
  margin: 10px 27px;            /* 上下外边距 */
  width: calc(100% - 27px) !important; /* 宽度自适应，保持右侧对齐 */
  box-sizing: border-box !important;
}

/* 按钮区域样式 - 集計按钮容器 */
.btn-section {
  padding-left: calc(27px + 80px + 10px); /* 动态计算与标题对齐，27px偏移+80px标题宽度+10px间距 */
  margin-top: 25px;     /* 顶部外边距 */
  display: flex;        /* 添加Flex布局 */
  gap: 10px;            /* 按钮间距 */
  align-items: center;  /* 垂直居中对齐 */
  justify-content: start; /* 子元素左对齐 */
  flex-wrap: wrap; /* 允许在极小屏幕下按钮换行 */
}

/* 操作按钮样式 - 集計 */
.btn-aggregation {
  background-color: #FF0066;  /* 蓝色背景 */
  color: white;                 /* 白色文字 */
  padding: 6px 10px;            /* 内边距 */
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
  margin-left: 0;               /* 左侧外边距 */
  white-space: nowrap;          /* 禁止文字折行 */
  width: 120px; /* 固定基础宽度 */
  height: 32px; /* 统一高度 */
}

/* 操作按钮样式 - リセット */
.btn-reset{
  background-color: #FF0066;    /* 蓝色背景 */
  color: white;                 /* 白色文字 */
  padding: 6px 10px;            /* 内边距 */
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
  margin-left: 10px;            /* 左侧外边距 */
  white-space: nowrap;          /* 禁止文字折行 */
  width: 120px; /* 固定基础宽度 */
  height: 32px; /* 统一高度 */
}

/* 年度指定整体容器样式 - 核心不折行控制 */
.annual-group {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  flex-wrap: nowrap; /* 关键修改：强制不折行 */
  min-width: 300px; /* 确保有足够宽度容纳内容 */
}

/* 年度指定单选框样式 - 统一宽度 */
.annual-group .common-radio {
  width: 100px !important; /* 与其他单选框保持一致 */
  min-width: 80px;
  flex-shrink: 0;
}

/* 年度下拉框容器样式 - 优化宽度分配 */
.annual-group .annual-row {
  flex: 1; /* 占据剩余空间 */
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* 日期组合容器样式 */
.annual-group .date-group {
  display: flex;
  align-items: center;
  gap: 100px;
}

/* 响应式样式 - 大屏幕 (>1023px) */
@media (min-width: 1024px) {
  .section-container {
    gap: 15px; /* 增大间距提升可读性 */
  }

  .radio-group-horizontal {
    gap: 30px; /* 增大选项间距 */
  }
}

/* 响应式样式 - 平板端 (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .btn-section {
    padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算 */
  }

  /* 保持与移动端相同的宽度 */
  .btn-aggregation, .btn-reset {
    width: 120px; /* 统一宽度 */
  }

  /* 平板设备适配 */
  .radio-item, .monthly-header {
    gap: 5px; /* 进一步缩小间距 */
  }

  .date-group {
    gap: 4px;
  }

  .form-section {
    margin-left: 15px !important; /* 左对齐标题，节省空间 */
    width: 70px !important; /* 缩短标题宽度，为内容区让空间 */
    font-size: 13px !important; /* 标题文字微调 */
  }
}

/* 响应式样式 - 移动端 (<768px) */
@media (max-width: 767px) {
  .btn-section {
    padding-left: 20px; /* 调整左侧内边距 */
    justify-content: flex-start; /* 左对齐避免溢出 */
  }

  /* 保持按钮宽度一致 */
  .btn-aggregation, .btn-reset {
    width: 120px;
    flex-shrink: 0;
  }

  .annual-row {
    margin-left: 20px;
    width: calc(100% - 40px);
  }

  .form-section {
    width: 80px !important;
    white-space: nowrap;
    margin-left: 0;
    padding-left: 20px;
  }

  .date-group {
    align-items: center;
    gap: 4px; /* 缩小间距 */
  }

  /* 年下拉框区域固定宽度，防止被挤压 */
  .date-group > .date-select:first-child {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    flex-shrink: 0;
  }

  /* 年标签与年下拉框绑定，不单独折行 */
  .date-group > .date-label:nth-child(2) {
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 13px; /* 日期标签字体微调 */
  }

  .radio-group-horizontal {
    gap: 10px; /* 缩小水平间距 */
  }

  /* 在小屏幕上，让日期组垂直排列 */
  .date-groups-wrapper {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-left: 0 !important;
  }

  /* 垂直单选组样式调整 */
  .radio-group-vertical {
    padding-left: 0 !important;
  }

  /* 年度指定整体容器样式 - 增强不折行控制 */
  .annual-group {
    display: flex;
    align-items: center;
    gap: 0px !important; /* 仅减少年度指定单选框与下拉列表的间隔从8px减少到4px */
    width: 100%;
    flex-wrap: nowrap; /* 关键修改：强制不折行 */
    min-width: 300px; /* 确保有足够宽度容纳内容 */
    overflow-x: auto; /* 当内容过宽时显示横向滚动条 */
    padding-bottom: 5px; /* 为滚动条预留空间 */
    scrollbar-width: thin; /* 优化滚动条样式 */
  }

  /* 防止滚动时影响其他元素 */
  .annual-group::-webkit-scrollbar {
    height: 4px;
  }

  /* 调整单选框宽度，为下拉框留出更多空间 */
  .annual-group .common-radio {
    width: 90px !important;
    min-width: 90px !important;
    padding-right: 0 !important; /* 移除右侧内边距 */
  }
}

</style>