|
|
@@ -0,0 +1,152 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" >閉じる</el-button>
|
|
|
+ <el-button type="primary" >マイページ利用</el-button>
|
|
|
+ <el-button type="primary" >会員情報保存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <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="230px" label-position="left">
|
|
|
+ <el-input
|
|
|
+ v-model="data.form[item.prop]"
|
|
|
+ class="small-input"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </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="230px" label-position="left">
|
|
|
+ <el-input
|
|
|
+ v-model="data.form[item.prop]"
|
|
|
+ class="small-input"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="custom-divider">
|
|
|
+ <span class="divider-line"></span>
|
|
|
+ <span class="divider-text">POSレジ設定</span>
|
|
|
+ <span class="divider-line"></span>
|
|
|
+ </div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" >POSレジを追加</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12" v-for="(item, index) in formPosItems.slice(0, 6)" :key="index">
|
|
|
+ <el-form-item :label="item.label" label-width="230px" label-position="left">
|
|
|
+ <el-input v-model="data.form[item.prop]" :disabled="item.disabled" class="small-input" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="POS連携設定" label-width="230px" label-position="left">
|
|
|
+ <el-input v-model="data.form.posLinkInfo" class="address-input" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="POS個別設定" label-width="230px" label-position="left">
|
|
|
+ <el-input v-model="data.form.customSettings" class="address-input" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12" v-for="(item, index) in formPosItems.slice(6)" :key="index + 6">
|
|
|
+ <el-form-item :label="item.label" label-width="230px" label-position="left">
|
|
|
+ <el-input v-model="data.form[item.prop]" class="small-input" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="POS更新理由" label-width="230px" label-position="left">
|
|
|
+ <el-input v-model="data.form.posUpdateReason" class="address-input" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { reactive} from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { getMemberEdit } from "@/api/fcbi/fcMember.js";
|
|
|
+
|
|
|
+// ルート情報の取得
|
|
|
+const route = useRoute();
|
|
|
+// ルートパラメータから顧客IDを取得
|
|
|
+const fcMemberId = route.params.fcMemberId;
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ form: {},
|
|
|
+ queryParams: {},
|
|
|
+});
|
|
|
+
|
|
|
+// フォーム項目の定義（ラベルと対応するデータプロパティ、禁用状態）
|
|
|
+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: 'activeStatusName' },
|
|
|
+ { label: '会員タイプ', prop: 'fcMemberTypeName' },
|
|
|
+ { label: 'マイページ権限', prop: 'mypageAccessAuthName', disabled: true },
|
|
|
+ { label: 'ログイン情報送信状態', prop: 'loginInfoSentName', disabled: true },
|
|
|
+ { label: '最終ログイン日時', prop: 'lastLoginDate', disabled: true },
|
|
|
+ { label: 'ログイン情報送信日時', prop: 'loginInfoSentTime', disabled: true },
|
|
|
+ { label: 'POS管理レベル', prop: 'posManagementLevelName' },
|
|
|
+ { label: 'デフォルトPOS ID', prop: 'defaultPosId' },
|
|
|
+ { label: '会員レベル', prop: 'fcMemberLevelName' },
|
|
|
+ { label: '外部電子契約システム会員識別子', prop: 'externalContractSystemId', disabled: true },
|
|
|
+];
|
|
|
+
|
|
|
+const formPosItems = [
|
|
|
+ { label: 'POSレジID', prop: 'posId', disabled: true },
|
|
|
+ { label: 'POS機種タイプ', prop: 'posTypeName' },
|
|
|
+ { label: 'POSモデル', prop: 'posModel'},
|
|
|
+ { label: 'POSシリアル番号', prop: 'posSerialNumber' },
|
|
|
+ { label: 'POS設置日', prop: 'posInstallDate' },
|
|
|
+ { label: 'POS設定最終更新日時', prop: 'lastUpdated' },
|
|
|
+ { label: 'POSステータス', prop: 'posStatusName' },
|
|
|
+ { label: 'POS活性化コード', prop: 'activationCode' },
|
|
|
+ { label: 'APIアクセスキー', prop: 'apiAccessKey' },
|
|
|
+ { label: '同期間隔(分)', prop: 'dataSyncInterval' },
|
|
|
+ { label: 'POS同期状態', prop: 'posSyncStatusName' },
|
|
|
+ { label: 'POS最終同期日時', prop: 'lastSyncTime'},
|
|
|
+ { label: 'POS更新必要フラグ', prop: 'posUpdateRequiredName' },
|
|
|
+ { label: 'POS設定バージョン', prop: 'posConfigVersion' },
|
|
|
+];
|
|
|
+
|
|
|
+// 顧客詳細の取得
|
|
|
+const fetchCustomerDetail = async () => {
|
|
|
+ const requestData = { fcMemberId };
|
|
|
+ const response = await getMemberEdit(requestData);
|
|
|
+ if (response.code === 200) {
|
|
|
+ data.form = response.data || {};
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// ページ読み込み時に顧客詳細情報を取得
|
|
|
+fetchCustomerDetail();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.small-input,
|
|
|
+.address-input {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.custom-divider {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+.divider-line {
|
|
|
+ flex: 1;
|
|
|
+ height: 4px;
|
|
|
+ background-color: #0080c7;
|
|
|
+}
|
|
|
+.divider-text {
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+</style>
|
