样式修改

src/views/fcbi/customer/detail.vue

@@ -2,20 +2,20 @@
   <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">
-          <el-input v-model="data.form[item.prop]" readonly class="small-input" />
+        <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">
-          <el-input v-model="data.form.address1" readonly class="address-input" />
+        <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">
-          <el-input v-model="data.form[item.prop]" readonly class="small-input" />
+        <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>

src/views/fcbi/customer/history.vue

@@ -18,25 +18,25 @@
     </el-form>
 
     <el-table v-show="initLoadingCompleted" v-loading="listLoading" :border="true" :data="CustomerList">
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="left" label="FC" min-width="60"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="FC" min-width="60"
                        prop="brandName"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="left" label="店舗名" min-width="90"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="店舗名" min-width="90"
                        prop="storeName"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="商品名" min-width="100"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="商品名" min-width="100"
                        prop="purchaseProductName"
                        width=""/>
       <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="購入年月日" min-width="70"
                        prop="purchaseMonth" :formatter="formatPurchaseMonth"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="単価" min-width="60"
+      <el-table-column :show-overflow-tooltip="true" align="right" header-align="center" label="単価" min-width="60"
                        prop="purchaseCost" :formatter="formatPrice"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="数量" min-width="70"
+      <el-table-column :show-overflow-tooltip="true" align="right" header-align="center" label="数量" min-width="70"
                        prop="purchaseQuantity"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="購入金額" min-width="70"
+      <el-table-column :show-overflow-tooltip="true" align="right" header-align="center" label="購入金額" min-width="70"
                        prop="purchaseAmount" :formatter="formatPrice"
                        width=""/>
       <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="購入状態" min-width="70"

src/views/fcbi/customer/list.vue

@@ -37,34 +37,34 @@
     </el-form>
 
     <el-table v-show="initLoadingCompleted" v-loading="listLoading" :border="true" :data="CustomerList">
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="left" label="顧客" min-width="60"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="顧客" min-width="60"
                        prop="customerName"
       >
       </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" align="left" header-align="left" label="顧客名(カナ)" min-width="70"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="顧客名(カナ)" min-width="70"
                        prop="customerNameKana"
       >
       </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="FC" min-width="80"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="FC" min-width="80"
                        prop="brandName"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="店舗名" min-width="60"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="店舗名" min-width="60"
                        prop="storeName"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="住所" min-width="90"
+      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="住所" min-width="90"
                        prop="address1"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="left" header-align="center" label="郵便番号" min-width="70"
+      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="郵便番号" min-width="70"
                        prop="postalCode"
                        width=""/>
       <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="お電話番号" min-width="60"
                        prop="mobilePhone"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="center" header-align="left" label="生年月日" min-width="70"
+      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="生年月日" min-width="70"
                        prop="birthDate"
                        width=""/>
-      <el-table-column :show-overflow-tooltip="true" align="right" header-align="left" label="直近購入年月" min-width="70"
-                       prop="lastPurchaseMonth"
+      <el-table-column :show-overflow-tooltip="true" align="center" header-align="center" label="直近購入年月" min-width="70"
+                       prop="lastPurchaseMonth"  :formatter="formatPurchaseMonth"
                        width=""/>
       <el-table-column align="center" class-name="small-padding fixed-width" label="操作" min-width="180" width="300">
         <template #default="scope">
@@ -117,6 +117,12 @@ const data = reactive({
   },
 });
 
+const formatPurchaseMonth = (row) => {
+  const monthStr = row.lastPurchaseMonth;
+  if (!monthStr) return '';
+  return `${monthStr.slice(0, 4)}-${monthStr.slice(4)}`;
+};
+
 // リアクティブオブジェクトからプロパティを参照可能なオブジェクトに変換
 const {queryParams} = toRefs(data);