ds-yamada-fcbi-admin/src/views/fcbi/customer/detail.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12" v-for="(item, index) in formItems.slice(0, 6)" :key="index">
        <el-form-item :label="item.label" label-width="125px" label-position="left">
          <el-input v-model="data.form[item.prop]" disabled class="small-input" />
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="住所" label-width="125px" label-position="left">
          <el-input v-model="data.form.address1" disabled class="address-input" />
        </el-form-item>
      </el-col>

      <el-col :span="12" v-for="(item, index) in formItems.slice(6)" :key="index + 6">
        <el-form-item :label="item.label" label-width="125px" label-position="left">
          <el-input v-model="data.form[item.prop]" disabled class="small-input" />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive} from 'vue';
import { useRoute } from 'vue-router';
import { getCustomerDetail } from "@/api/fcbi/customer.js";

// ルート情報の取得
const route = useRoute();
// ルートパラメータから顧客IDを取得
const customerId = route.params.customerId;

const data = reactive({
  form: {},
  queryParams: {},
});

// フォーム項目の定義（ラベルと対応するデータプロパティ）
const formItems = [
  { label: '顧客名', prop: 'customerName' },
  { label: '顧客名(カナ)', prop: 'customerNameKana' },
  { label: '性別', prop: 'genderFlagDesc' },
  { label: '生年月日', prop: 'birthDate' },
  { label: '郵便番号', prop: 'postalCode' },
  { label: 'お電話番号', prop: 'mobilePhone' },
  { label: 'メールアドレス', prop: 'email' },
  { label: '会員レベル', prop: 'memberLevelFlagDesc' },
  { label: '直近購入年月', prop: 'lastPurchaseMonth' },
  { label: '最終購入日', prop: 'lastPurchaseDate' },
  { label: '購入頻度', prop: 'purchaseFrequency' },
  { label: '累計有効購入金額', prop: 'totalValidSpending' },
  { label: 'DM対象', prop: 'dmTargetFlagDesc' },
  { label: 'DM配信', prop: 'dmAllowedFlagDesc' },
  { label: 'メール配信', prop: 'emailAllowedFlagDesc' },
  { label: 'SMS配信', prop: 'smsAllowedFlagDesc' },
];

// 顧客詳細の取得
const fetchCustomerDetail = async () => {
  const requestData = { customerId };
  const response = await getCustomerDetail(requestData);
  if (response.code === 200) {
      data.form = response.data || {};
    }
};

// ページ読み込み時に顧客詳細情報を取得
fetchCustomerDetail();
</script>

<style>
.small-input,
.address-input {
  width: 100%;
}
</style>