会員情報詳細

src/router/index.js

@@ -251,6 +251,21 @@ export const constantRoutes = [
             }
         ]
     },
+
+    {
+        path: '/fcMemberAdmin',
+        component: Layout,
+        hidden: true,
+        redirect: 'noredirect',
+        children: [
+            {
+                path: 'fcMemberPresent/:fcMemberId',
+                component: () => import('@/views/fcbi/fcMember/detail'),
+                name: 'fcMemberPresent',
+                meta: {title: '会員情報詳細', icon: 'user'}
+            }
+        ]
+    },
 ]
 
 // ダイナミックルート、ユーザー権限に基づいて動的に読み込みます

src/views/fcbi/fcMember/detail.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+      <el-tab-pane label="会員詳細" name="first">
+        <!-- 会员信息区域 -->
+        <el-descriptions column="2" border label-width="240px">
+          <template v-for="(item, index) in formItems" :key="index">
+            <el-descriptions-item :label="item.label">
+              <template v-if="item.prop === 'activeStatus'">
+                <el-select
+                    v-model="memberForm[item.prop]"
+                    placeholder="選択してください"
+                    disabled
+                >
+                  <el-option label="アクティブ" :value="1"></el-option>
+                  <el-option label="非アクティブ" :value="0"></el-option>
+                </el-select>
+              </template>
+              <template v-else-if="item.prop === 'fcMemberType'">
+                {{ memberForm[item.prop] === 1 ? '消費者' :
+                  memberForm[item.prop] === 2 ? '加盟店スタッフ' :
+                      memberForm[item.prop] === 3 ? '地域エージェント' : '' }}
+              </template>
+              <template v-else-if="item.prop === 'loginInfoSent'">
+                {{ memberForm[item.prop] === 1 ? '送信済' : memberForm[item.prop] === 0 ? '未送信':'' }}
+              </template>
+              <template v-else-if="item.prop === 'posManagementLevel'">
+                {{ memberForm[item.prop] === 0 ? '不可' : memberForm[item.prop] === 1 ? '閲覧':'' }}
+              </template>
+              <template v-else-if="item.prop === 'fcMemberLevel'">
+                {{ memberForm[item.prop] === 1 ? '一般' :
+                  memberForm[item.prop] === 2 ? '高級' :
+                      memberForm[item.prop] === 3 ? 'VIP' : '' }}
+              </template>
+              <template v-else-if="item.prop === 'myPageAccessAuth'">
+                {{ memberForm[item.prop] === 1 ? '利用可' : memberForm[item.prop] === 0 ? '利用停止':'' }}
+              </template>
+              <template v-else>
+                {{ memberForm[item.prop] || '' }}
+              </template>
+            </el-descriptions-item>
+          </template>
+        </el-descriptions>
+
+        <div class="custom-divider">
+          <span class="divider-line"></span>
+          <span class="divider-text">POSレジ設定</span>
+          <span class="divider-line"></span>
+        </div>
+
+        <div v-for="(posForm, formIndex) in posForms" :key="formIndex" class="pos-form-container">
+          <el-descriptions column="2" border label-width="230px">
+            <!-- 遍历所有POS表单项目 -->
+            <template v-for="(item, index) in formPosItems" :key="index">
+              <!-- 正常渲染当前项目 -->
+              <el-descriptions-item :label="item.label">
+                <template v-if="item.prop === 'posType'">
+                  {{ posForm[item.prop] === 1 ? '標準型' :
+                    posForm[item.prop] === 2 ? '小型' :
+                        posForm[item.prop] === 3 ? '専用型' : '' }}
+                </template>
+                <template v-else-if="item.prop === 'posStatus'">
+                  {{ posForm[item.prop] === 1 ? '有効' :
+                    posForm[item.prop] === 0 ? '無効' :
+                        posForm[item.prop] === 2 ? 'メンテナンス' : '' }}
+                </template>
+                <template v-else-if="item.prop === 'posSyncStatus'">
+                  {{ posForm[item.prop] === 1 ? '正常' : memberForm[item.prop] === 0 ? 'エラー':'' }}
+                </template>
+                <template v-else-if="item.prop === 'posUpdateRequired'">
+                  {{ posForm[item.prop] === 1 ? '必要' : memberForm[item.prop] === 0 ? '不要':'' }}
+                </template>
+                <template v-else>
+                  {{ posForm[item.prop] || '' }}
+                </template>
+              </el-descriptions-item>
+
+              <!-- 在POS設定最終更新日時之后插入两行 -->
+              <template v-if="item.prop === 'lastUpdated'">
+                <el-descriptions-item label="POS連携設定" :span="2">
+                  {{ posForm.posLinkInfo || '' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="POS個別設定" :span="2">
+                  {{ posForm.customSettings || '' }}
+                </el-descriptions-item>
+              </template>
+            </template>
+
+            <!-- POS更新理由保持在最后 -->
+            <el-descriptions-item label="POS更新理由" :span="2">
+              {{ posForm.posUpdateReason || '' }}
+            </el-descriptions-item>
+          </el-descriptions>
+
+          <div class="pos-divider" v-if="formIndex !== posForms.length - 1"></div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="店舗別売上" name="second"/>
+      <el-tab-pane label="請求履歴" name="third"/>
+      <el-tab-pane label="アンケート履歴" name="fourth"/>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { getMemberEdit, getMemberPosEdit } from "@/api/fcbi/fcMember.js";
+
+const activeTab = ref('first');
+const route = useRoute();
+const fcMemberId = route.params.fcMemberId;
+
+const memberForm = reactive({});
+const posForms = reactive([]);
+
+const createNewPosForm = () => ({
+  posId: '',
+  posType: '',
+  posModel: '',
+  posSerialNumber: '',
+  posInstallDate: '',
+  lastUpdated: '',
+  posStatus: '',
+  activationCode: '',
+  apiAccessKey: '',
+  dataSyncInterval: '',
+  posSyncStatus: '',
+  lastSyncTime: '',
+  posUpdateRequired: '',
+  posConfigVersion: '',
+  posLinkInfo: '',
+  customSettings: '',
+  posUpdateReason: '',
+  isSaved: false
+});
+
+// 初始添加一个POS表单
+posForms.push(createNewPosForm());
+
+const formItems = [
+  { label: 'FC会員コード', prop: 'fcMemberCode', disabled: true },
+  { label: 'FC会員名', prop: 'fcMemberName' },
+  { label: '会員登録日時', prop: 'registrationDate', disabled: true },
+  { label: '申込者ID', prop: 'fcApplicantId', disabled: true },
+  { label: '連絡者', prop: 'contactPerson' },
+  { label: '連絡先電話番号', prop: 'contactPhone' },
+  { label: '会員活性状態', prop: 'activeStatus' },
+  { label: '会員タイプ', prop: 'fcMemberType' },
+  { label: 'マイページ権限', prop: 'myPageAccessAuth', disabled: true },
+  { label: 'ログイン情報送信状態', prop: 'loginInfoSent', disabled: true },
+  { label: '最終ログイン日時', prop: 'lastLoginDate', disabled: true },
+  { label: 'ログイン情報送信日時', prop: 'loginInfoSentTime', disabled: true },
+  { label: 'POS管理レベル', prop: 'posManagementLevel' },
+  { label: 'デフォルトPOS ID', prop: 'defaultPosId' },
+  { label: '会員レベル', prop: 'fcMemberLevel' },
+  { label: '外部電子契約システム会員識別子', prop: 'externalContractSystemId', disabled: true },
+];
+
+const formPosItems = [
+  { label: 'POSレジID', prop: 'posId' },
+  { label: 'POS機種タイプ', prop: 'posType' },
+  { label: 'POSモデル', prop: 'posModel'},
+  { label: 'POSシリアル番号', prop: 'posSerialNumber' },
+  { label: 'POS設置日', prop: 'posInstallDate' },
+  { label: 'POS設定最終更新日時', prop: 'lastUpdated' },
+  { label: 'POSステータス', prop: 'posStatus' },
+  { label: 'POS活性化コード', prop: 'activationCode' },
+  { label: 'APIアクセスキー', prop: 'apiAccessKey' },
+  { label: '同期間隔(分)', prop: 'dataSyncInterval' },
+  { label: 'POS同期状態', prop: 'posSyncStatus' },
+  { label: 'POS最終同期日時', prop: 'lastSyncTime'},
+  { label: 'POS更新必要フラグ', prop: 'posUpdateRequired' },
+  { label: 'POS設定バージョン', prop: 'posConfigVersion' },
+];
+
+// 获取会员信息
+const fetchMemberEdit = async () => {
+  const requestData = { fcMemberId };
+  const response = await getMemberEdit(requestData);
+  if (response.code === 200) {
+    Object.assign(memberForm, response.data || {});
+  }
+};
+
+// 获取POS信息
+const fetchPosEdit = async () => {
+  const requestData = { fcMemberId };
+  const response = await getMemberPosEdit(requestData);
+  if (response.code === 200) {
+    posForms.length = 0; // 清空原有表单
+    if (response.rows && response.rows.length > 0) {
+      // 从 rows 中取数据，逐个处理为带 isSaved 的结构
+      response.rows.forEach(item => {
+        posForms.push({ ...item, isSaved: true });
+      });
+    } else {
+      // 无数据时，初始化一个空表单
+      posForms.push(createNewPosForm());
+    }
+  }
+};
+
+const handleTabChange = (tabName) => {
+  if (tabName === 'first') {
+    nextTick(() => {
+      initData();
+    });
+  }
+};
+
+// 初始化数据
+const initData = async () => {
+  await fetchMemberEdit();
+  await fetchPosEdit();
+};
+
+nextTick(() => {
+  initData();
+});
+</script>
+
+<style>
+.custom-divider {
+  display: flex;
+  align-items: center;
+  margin: 15px 0;
+}
+.divider-line {
+  flex: 1;
+  height: 4px;
+  background-color: #0080c7;
+}
+.divider-text {
+  padding: 0 10px;
+  font-size: 14px;
+  color: #333;
+}
+.pos-form-container {
+  padding: 15px 0;
+}
+.pos-divider {
+  height: 3px;
+  background-color: #fdd000;
+  margin: 15px 0;
+  border-radius: 2px;
+}
+</style>

src/views/fcbi/fcMember/list.vue

@@ -59,7 +59,7 @@
            <el-table-column align="center" class-name="small-padding fixed-width" label="操作" min-width="180" width="300">
         <template #default="scope">
           <el-button @click="fcMemberEdit(scope.row)" v-hasPermi="['fcbi:fcMember:edit']"  icon="Edit" link type="primary" >編集</el-button>
-          <el-button  v-hasPermi="['fcbi:fcMember:detail']" icon="Edit" link type="primary" >照会</el-button>
+          <el-button @click="fcMemberPresent(scope.row)" v-hasPermi="['fcbi:fcMember:detail']" icon="Edit" link type="primary" >照会</el-button>
           <el-tooltip  content="パスワードをリセット" placement="top">
             <el-button icon="Key" link type="primary"
                        @click="handleResetPwd(scope.row)"></el-button>
@@ -125,6 +125,15 @@ const fcMemberEdit = (row) => {
   });
 };
 
+const fcMemberPresent = (row) => {
+  router.push({
+    name: 'fcMemberPresent',
+    params: {
+      fcMemberId: row.fcMemberId
+    }
+  });
+};
+
 /**
  * 検索ボタンのクリックイベントハンドラー
  * 検索条件を初期ページに設定して検索を実行する