会員情報編集

src/api/fcbi/fcMember.js

@@ -76,4 +76,3 @@ export function getMemberPosEdit(data) {
   })
 }
 
-

src/router/index.js

@@ -230,6 +230,20 @@ export const constantRoutes = [
         redirect: 'noredirect',
         children: [
             {
+                path: 'fcMember',
+                component: () => import('@/views/fcbi/fcMember/list'),
+                name: 'fcMember',
+                meta: {title: '会員一覧', icon: 'user'}
+            }
+        ]
+    },
+    {
+        path: '/fcMemberAdmin',
+        component: Layout,
+        hidden: true,
+        redirect: 'noredirect',
+        children: [
+            {
                 path: 'fcMemberEdit/:fcMemberId',
                 component: () => import('@/views/fcbi/fcMember/edit'),
                 name: 'fcMemberEdit',

src/views/fcbi/fcMember/edit.vue

@@ -1,28 +1,103 @@
+<!-- 会員情報編集 -->
 <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-button type="primary" @click="goBack" >閉じる</el-button>
+      <el-button
+          type="primary"
+          @click="toggleMypageAccess"
+      >
+        {{ memberForm.mypageAccessAuth === 1 ? 'マイページ利用可' : 'マイページ利用停止' }}
+      </el-button>
+      <el-button  type="primary" @click="submitForm" >会員情報保存</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"
-          />
+          <template v-if="item.prop === 'activeStatus'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="アクティブ" :value="1"></el-option>
+              <el-option label="非アクティブ" :value="0"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'fcMemberType'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="消費者" :value="1"></el-option>
+              <el-option label="加盟店スタッフ" :value="2"></el-option>
+              <el-option label="地域エージェント" :value="3"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'loginInfoSent'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="送信済" :value="1"></el-option>
+              <el-option label="未送信" :value="0"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'posManagementLevel'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="不可" :value="0"></el-option>
+              <el-option label="閲覧" :value="1"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'fcMemberLevel'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="一般" :value="1"></el-option>
+              <el-option label="高級" :value="2"></el-option>
+              <el-option label="VIP" :value="3"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'mypageAccessAuth'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="利用可" :value="1"></el-option>
+              <el-option label="利用停止" :value="0"></el-option>
+            </el-select>
+          </template>
+          <el-input v-else v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-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="230px" label-position="left">
-          <el-input
-              v-model="data.form[item.prop]"
-              class="small-input"
-              :disabled="item.disabled"
-          />
+          <template v-if="item.prop === 'activeStatus'">
+            <el-select v-model="memberForm[item.prop]" class="small-input">
+              <el-option label="アクティブ" :value="1"></el-option>
+              <el-option label="非アクティブ" :value="0"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'fcMemberType'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="消費者" :value="1"></el-option>
+              <el-option label="加盟店スタッフ" :value="2"></el-option>
+              <el-option label="地域エージェント" :value="3"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'loginInfoSent'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="送信済" :value="1"></el-option>
+              <el-option label="未送信" :value="0"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'posManagementLevel'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="不可" :value="0"></el-option>
+              <el-option label="閲覧" :value="1"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'fcMemberLevel'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="一般" :value="1"></el-option>
+              <el-option label="高級" :value="2"></el-option>
+              <el-option label="VIP" :value="3"></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="item.prop === 'mypageAccessAuth'">
+            <el-select v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input">
+              <el-option label="利用可" :value="1"></el-option>
+              <el-option label="利用停止" :value="0"></el-option>
+            </el-select>
+          </template>
+          <el-input v-else v-model="memberForm[item.prop]" :disabled="item.disabled" class="small-input" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -32,53 +107,175 @@
       <span class="divider-line"></span>
     </div>
     <el-form-item>
-      <el-button type="primary" >POSレジを追加</el-button>
+      <el-button type="primary" @click="addPosForm">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>
+    <div v-for="(posForm, formIndex) in posForms" :key="formIndex" class="pos-form-container">
+      <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">
+            <template v-if="item.prop === 'posId'">
+              <el-input
+                  v-model="posForm[item.prop]"
+                  :disabled="!!posForm.posId"
+                  class="small-input"
+              />
+            </template>
+            <template v-else-if="item.prop === 'posType'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="標準型" :value="1"></el-option>
+                <el-option label="小型" :value="2"></el-option>
+                <el-option label="専用型" :value="3"></el-option>
+              </el-select>
+            </template>
+            <template v-else-if="item.prop === 'posStatus'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="有効" :value="1"></el-option>
+                <el-option label="無効" :value="0"></el-option>
+                <el-option label="メンテナンス" :value="2"></el-option>
+              </el-select>
+            </template>
+            <template v-else-if="item.prop === 'posSyncStatus'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="正常" :value="1"></el-option>
+                <el-option label="エラー" :value="0"></el-option>
+              </el-select>
+            </template>
+            <template v-else-if="item.prop === 'posUpdateRequired'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="必要" :value="1"></el-option>
+                <el-option label="不要" :value="0"></el-option>
+              </el-select>
+            </template>
+            <el-input v-else v-model="posForm[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.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="24">
+          <el-form-item label="POS連携設定" label-width="230px" label-position="left">
+            <el-input v-model="posForm.posLinkInfo" class="address-input" />
+          </el-form-item>
+          <el-form-item label="POS個別設定" label-width="230px" label-position="left">
+            <el-input v-model="posForm.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>
+        <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">
+            <template v-if="item.prop === 'posId'">
+              <el-input
+                  v-model="posForm[item.prop]"
+                  :disabled="!!posForm.posId"
+                  class="small-input"
+                  placeholder="POSレジIDを入力"
+              />
+            </template>
+            <template v-else-if="item.prop === 'posType'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="標準型" :value="1"></el-option>
+                <el-option label="小型" :value="2"></el-option>
+                <el-option label="専用型" :value="3"></el-option>
+              </el-select>
+            </template>
+            <template v-else-if="item.prop === 'posStatus'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="有効" :value="1"></el-option>
+                <el-option label="無効" :value="0"></el-option>
+                <el-option label="メンテナンス" :value="2"></el-option>
+              </el-select>
+            </template>
+            <template v-else-if="item.prop === 'posSyncStatus'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="正常" :value="1"></el-option>
+                <el-option label="エラー" :value="0"></el-option>
+              </el-select>
+            </template>
+            <template v-else-if="item.prop === 'posUpdateRequired'">
+              <el-select v-model="posForm[item.prop]" class="small-input">
+                <el-option label="必要" :value="1"></el-option>
+                <el-option label="不要" :value="0"></el-option>
+              </el-select>
+            </template>
+            <el-input v-else v-model="posForm[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="posForm.posUpdateReason" class="address-input" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="pos-divider" v-if="formIndex !== posForms.length - 1"></div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive} from 'vue';
-import { useRoute } from 'vue-router';
-import { getMemberEdit } from "@/api/fcbi/fcMember.js";
+// 1. 基础依赖导入
+import { reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { getMemberEdit, getMemberPosEdit,updateMember } from "@/api/fcbi/fcMember.js";
+import useTagsViewStore from '@/store/modules/tagsView';
+import {formatMsg} from "@/utils/yamada.js";
 
-// ルート情報の取得
+// 2. 组件实例与状态管理
 const route = useRoute();
-// ルートパラメータから顧客IDを取得
+const router = useRouter();
+const tagsViewStore = useTagsViewStore();
+const currentRoute = router.currentRoute.value;
+const {proxy} = getCurrentInstance();
+
+// 3. 基础数据与状态定义
 const fcMemberId = route.params.fcMemberId;
 
-const data = reactive({
-  form: {},
-  queryParams: {},
+// 分离存储：会员信息和POS信息使用不同的响应式对象
+const memberForm = reactive({}); // 会员基本信息
+const posForms = reactive([]); // 存储多个POS表单数据
+const currentPosIndex = ref(0); // 当前操作的POS表单索引
+
+// 创建新的POS表单数据结构
+const createNewPosForm = () => ({
+  posId: '',
+  posType: '',
+  posModel: '',
+  posSerialNumber: '',
+  posInstallDate: '',
+  lastUpdated: '',
+  posStatus: '',
+  activationCode: '',
+  apiAccessKey: '',
+  dataSyncInterval: '',
+  posSyncStatus: '',
+  lastSyncTime: '',
+  posUpdateRequired: '',
+  posConfigVersion: '',
+  posLinkInfo: '',
+  customSettings: '',
+  posUpdateReason: ''
 });
 
+// 初始添加一个POS表单
+posForms.push(createNewPosForm());
+
+// 添加新的POS表单
+const addPosForm = () => {
+  posForms.push(createNewPosForm());
+  currentPosIndex.value = posForms.length - 1; // 聚焦到新添加的表单
+};
+
+// 切换我的页面权限状态
+const toggleMypageAccess = () => {
+  memberForm.mypageAccessAuth = memberForm.mypageAccessAuth === 1 ? 0 : 1;
+};
+
+// 返回上一页
+const goBack = () => {
+  tagsViewStore.delView(currentRoute).then(() => {
+    router.push({
+      name: 'fcMember'
+    })
+  })
+}
+
 // フォーム項目の定義（ラベルと対応するデータプロパティ、禁用状態）
 const formItems = [
   { label: 'FC会員コード', prop: 'fcMemberCode', disabled: true },
@@ -87,46 +284,81 @@ const formItems = [
   { 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: '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: 'posManagementLevelName' },
+  { label: 'POS管理レベル', prop: 'posManagementLevel' },
   { label: 'デフォルトPOS ID', prop: 'defaultPosId' },
-  { label: '会員レベル', prop: 'fcMemberLevelName' },
+  { label: '会員レベル', prop: 'fcMemberLevel' },
   { label: '外部電子契約システム会員識別子', prop: 'externalContractSystemId', disabled: true },
 ];
 
+// POS表单项目定义
 const formPosItems = [
-  { label: 'POSレジID', prop: 'posId', disabled: true },
-  { label: 'POS機種タイプ', prop: 'posTypeName' },
+  { 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: 'posStatusName' },
+  { label: 'POSステータス', prop: 'posStatus' },
   { label: 'POS活性化コード', prop: 'activationCode' },
   { label: 'APIアクセスキー', prop: 'apiAccessKey' },
   { label: '同期間隔(分)', prop: 'dataSyncInterval' },
-  { label: 'POS同期状態', prop: 'posSyncStatusName' },
+  { label: 'POS同期状態', prop: 'posSyncStatus' },
   { label: 'POS最終同期日時', prop: 'lastSyncTime'},
-  { label: 'POS更新必要フラグ', prop: 'posUpdateRequiredName' },
+  { label: 'POS更新必要フラグ', prop: 'posUpdateRequired' },
   { label: 'POS設定バージョン', prop: 'posConfigVersion' },
 ];
 
-// 会員情報編集の取得
+// 获取会员基本信息
 const fetchMemberEdit = async () => {
   const requestData = { fcMemberId };
   const response = await getMemberEdit(requestData);
   if (response.code === 200) {
-    data.form = response.data || {};
+    // 将数据赋值给会员表单对象
+    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.data) {
+      posForms.push(response.data);
+    } else {
+      posForms.push(createNewPosForm());
+    }
   }
 };
 
-// ページ読み込み時に会員情報編集を取得
-fetchMemberEdit();
+// 会員情報保存方法
+const submitForm = async () => {
+  const requestData = {
+    ...memberForm
+  };
+
+  const response = await updateMember(requestData);
+
+  if (response.code === 200) {
+    proxy.$modal.msgSuccess(formatMsg('I0001'));
+     await initData();
+  }
+};
+
+// 页面加载时获取数据
+const initData = async () => {
+  await fetchMemberEdit();
+  await fetchPosEdit();
+};
+
+initData();
 </script>
 
 <style>
@@ -149,4 +381,15 @@ fetchMemberEdit();
   font-size: 14px;
   color: #333;
 }
-</style>
+.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  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>
@@ -77,11 +77,16 @@
 </template>
 
 <script name="fcMemberList" setup>
-
+// 1. 基础依赖导入
 import {listMember,resetUserPwd} from "@/api/fcbi/fcMember.js"
 import {useRouter} from 'vue-router';
 import {formatMsg, parseAlphabetNumeric} from "@/utils/yamada.js";
 
+// 2. 组件实例与状态管理
+const {proxy} = getCurrentInstance();
+const router = useRouter();
+
+// 3. 基础数据与状态定义
 // 認証項目のテーブルデータを格納するリアクティブ
 const fcMemberList = ref([]);
 // データ読み込み中のローディング状態を管理するリアクティブ
@@ -90,8 +95,6 @@ const listLoading = ref(false);
 const listTotalCnt = ref(0);
 // 初期ロードが完了したかどうかを示すリアクティブ
 const initLoadingCompleted = ref(false);
-const {proxy} = getCurrentInstance();
-const router = useRouter();
 const PWD_PATTERN = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[#?!@$%^&*-])[A-Za-z\d#?!@$%^&*-]{8,20}$/;
 
 /**