feat: 商户账号管理

src/api/modules/merchant.js

@@ -0,0 +1,17 @@
+import request from '@/utils/httpRequest'
+
+export function inviteJoin(data) {
+  return request({
+    url: '/merchant-api/merchant/invite_join',
+    method: 'post',
+    data
+  })
+}
+
+export function setMerchantPermissions(data) {
+  return request({
+    url: '/merchant-api/subaccount/set-merchant-permissions',
+    method: 'post',
+    data
+  })
+}

src/views/modules/operation-management/permission/merchant-account/index.vue

@@ -1,13 +1,326 @@
 <template>
-  <div>商户账号管理</div>
+  <div class="app-container">
+    <el-form
+      ref="ruleFormRef"
+      :model="form"
+      label-position="left"
+      label-width="auto"
+      :rules="rules"
+      style="max-width: 600px"
+    >
+      <el-form-item v-if="!marketId && markets.length > 0" label="选择市场" prop="selectedMarketId">
+        <el-select v-model="form.selectedMarketId" placeholder="请选择市场" style="width: 100%">
+          <el-option
+            v-for="market in markets"
+            :key="market.marketId"
+            :label="market.marketName"
+            :value="market.marketId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="操作类型" prop="operationType">
+        <el-select v-model="form.operationType" placeholder="请选择操作类型" style="width: 100%">
+          <el-option label="创建新商户" value="create"></el-option>
+          <el-option label="维护商户信息" value="update"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <template v-if="form.operationType === 'create'">
+        <el-form-item label="商户账号" prop="mobile">
+          <el-input v-model="form.mobile" placeholder="请输入商户账号"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
+        </el-form-item>
+      </template>
+
+      <template v-if="form.operationType === 'update'">
+        <el-form-item label="选择商户账号" prop="accountId">
+          <el-select v-model="form.accountId" placeholder="请选择要更新的商户账号" @change="handleAccountChange" style="width: 100%">
+            <el-option
+              v-for="item in merchantAccountList"
+              :key="item.accountId"
+              :label="item.name"
+              :value="item.accountId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="warning" @click="openResetPasswordDialog">重置密码</el-button>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.enable" active-text="启用" inactive-text="禁用"></el-switch>
+        </el-form-item>
+      </template>
+
+      <el-form-item label="权限分配" prop="permissionCodes">
+        <el-tree
+          ref="permissionTree"
+          :data="permissionList"
+          show-checkbox
+          node-key="id"
+          :props="defaultProps"
+          @check="handleTreeCheck"
+        >
+        </el-tree>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="save">保存</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-dialog
+      title="重置密码"
+      :visible.sync="resetPasswordDialogVisible"
+      width="30%"
+      @close="newPassword = ''"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="新密码">
+          <el-input v-model="newPassword" type="password" placeholder="请输入新密码"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetPasswordDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleResetPassword">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import {
+  getAvailablePermissions,
+  checkUsername,
+  resetPassword
+} from '@/api/modules/subaccount' // Assuming some APIs can be reused
+import { inviteJoin, setMerchantPermissions } from '@/api/modules/merchant' // New merchant API
+import routerConfig from '@/router/full-routers'
+import { mapState } from 'vuex'
+
+// Function to filter the full menu tree based on available permissions
+const filterTreeByPerms = (tree, availablePerms) => {
+  if (!Array.isArray(tree)) {
+    return [];
+  }
+  return tree.reduce((acc, node) => {
+    const children = node.list && node.list.length > 0
+      ? filterTreeByPerms(node.list, availablePerms)
+      : [];
+
+    if (availablePerms.includes(node.perms) || children.length > 0) {
+      acc.push({
+        ...node,
+        list: children,
+      });
+    }
+    return acc;
+  }, []);
+};
+
+// Function to map the filtered tree to the format required by el-tree
+const mapTreeForElTree = (tree) => {
+  return tree.map((item) => ({
+    id: item.perms,
+    label: item.name,
+    children: item.list && item.list.length > 0 ? mapTreeForElTree(item.list) : [],
+  }));
+};
+
 export default {
-  name: 'MerchantAccount'
+  name: 'MerchantAccount',
+  data() {
+    const validateMobile = (rule, value, callback) => {
+      if (this.form.operationType !== 'create') {
+        return callback();
+      }
+      if (!value) {
+        return callback(new Error('请输入商户账号'));
+      }
+      checkUsername(value, this.form.selectedMarketId || this.marketId).then(res => {
+        if (res && res.data && res.data.data && res.data.data.available === true) {
+          callback();
+        } else {
+          callback(new Error('商户账号已被占用'));
+        }
+      }).catch(() => {
+        callback(new Error('商户账号校验失败'));
+      });
+    };
+
+    return {
+      resetPasswordDialogVisible: false,
+      newPassword: '',
+      form: {
+        operationType: 'create',
+        mobile: '',
+        password: '',
+        permissionCodes: [],
+        accountId: null,
+        enable: true,
+        selectedMarketId: ''
+      },
+      merchantAccountList: [], // To be populated with merchant accounts
+      permissionList: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      rules: {
+        operationType: [
+          { required: true, message: "请选择操作类型", trigger: "change" },
+        ],
+        mobile: [
+          { required: true, validator: validateMobile, trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+        ],
+        permissionCodes: [
+          { required: true, message: "请选择菜单权限", trigger: "change", type: 'array' },
+        ],
+        accountId: [
+          { required: true, message: "请选择要更新的商户账号", trigger: "change" },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState("userData", [
+      "isMerchant",
+      "marketList",
+      "storeList",
+      "marketId",
+      "shopId",
+      "markets"
+    ])
+  },
+  watch: {
+    'form.operationType'(newType) {
+      this.form.mobile = '';
+      this.form.password = '';
+      this.form.permissionCodes = [];
+      this.form.accountId = null;
+
+      this.$nextTick(() => {
+        this.$refs.ruleFormRef.clearValidate();
+      });
+
+      if (this.$refs.permissionTree) {
+        this.$refs.permissionTree.setCheckedKeys([]);
+      }
+
+      if (newType === 'update') {
+        // this.loadMerchantAccountList(); // To be implemented
+      }
+    }
+  },
+  created() {
+    this.getPermissions();
+  },
+  methods: {
+    getPermissions() {
+      getAvailablePermissions().then((res) => {
+        const availablePerms = (res && res.data && Array.isArray(res.data.data)) ? res.data.data : [];
+        const menuList = (routerConfig && Array.isArray(routerConfig.menuList)) ? routerConfig.menuList : [];
+        const filteredTree = filterTreeByPerms(menuList, availablePerms);
+        this.permissionList = mapTreeForElTree(filteredTree);
+      });
+    },
+    openResetPasswordDialog() {
+      if (!this.form.accountId) {
+        this.$message.error('请先选择要更新的商户账号');
+        return;
+      }
+      this.resetPasswordDialogVisible = true;
+    },
+    handleResetPassword() {
+      if (!this.newPassword) {
+        this.$message.error('请输入新密码');
+        return;
+      }
+      resetPassword(this.form.accountId, this.newPassword, this.form.selectedMarketId || this.marketId).then(() => {
+        this.$message.success('密码重置成功');
+        this.resetPasswordDialogVisible = false;
+      });
+    },
+    handleTreeCheck() {
+      this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true);
+    },
+    // To be implemented
+    // loadMerchantAccountList() {
+    //   getMerchantAccountList().then(res => {
+    //     this.merchantAccountList = res.data.data.data || [];
+    //   });
+    // },
+    handleAccountChange(accountId) {
+      if (!accountId) return;
+      // getMerchantAccountDetail(accountId).then(res => {
+      //   const accountDetails = res.data.data;
+      //   this.form.permissionCodes = accountDetails.permissionCodes || [];
+      //   this.form.enable = accountDetails.enabled;
+      //   this.$nextTick(() => {
+      //     this.$refs.permissionTree.setCheckedKeys(this.form.permissionCodes);
+      //   });
+      // });
+    },
+    save() {
+      this.$refs.ruleFormRef.validate((valid) => {
+        if (valid) {
+          const marketId = this.form.selectedMarketId || this.marketId;
+          if (!marketId) {
+            this.$message.error('请选择市场');
+            return;
+          }
+
+          if (this.form.operationType === 'create') {
+            const createData = {
+              marketId,
+              name: this.form.mobile,
+              mobile: this.form.mobile,
+              remark: '',
+              username: this.form.mobile,
+              password: this.form.password
+            };
+            inviteJoin(createData).then((res) => {
+              const merchantAccountId = res.data.data.merchantId; // Assuming this is the merchant ID
+              const permissionsData = {
+                merchantAccountId,
+                permissionCodes: this.form.permissionCodes,
+                marketId
+              };
+              setMerchantPermissions(permissionsData).then(() => {
+                this.$message.success('商户创建成功且权限已设置');
+                this.$refs.ruleFormRef.resetFields();
+              });
+            });
+          } else if (this.form.operationType === 'update') {
+            if (!this.form.accountId) {
+              this.$message.error('请先选择要更新的商户账号');
+              return;
+            }
+            const updateData = {
+              subAccountId: this.form.accountId,
+              permissionCodes: this.form.permissionCodes,
+              enabled: this.form.enable,
+              marketId
+            };
+            // updateMerchantAccount(updateData).then(() => { // To be implemented
+            //   this.$message.success('商户信息更新成功');
+            //   this.$refs.ruleFormRef.resetFields();
+            // });
+          }
+        }
+      });
+    }
+  },
 }
 </script>
 
 <style scoped>
-
+.app-container {
+  padding: 20px;
+}
 </style>

src/views/modules/operation-management/permission/sub-operator/index.vue

@@ -8,6 +8,17 @@
       :rules="rules"
       style="max-width: 600px"
     >
+      <el-form-item v-if="!marketId && markets.length > 0" label="选择市场" prop="selectedMarketId">
+        <el-select v-model="form.selectedMarketId" placeholder="请选择市场" style="width: 100%">
+          <el-option
+            v-for="market in markets"
+            :key="market.marketId"
+            :label="market.marketName"
+            :value="market.marketId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
       <el-form-item label="操作类型" prop="operationType">
         <el-select v-model="form.operationType" placeholder="请选择操作类型" style="width: 100%">
           <el-option label="创建新账号" value="create"></el-option>
@@ -100,6 +111,7 @@ import {
   resetPassword
 } from '@/api/modules/subaccount'
 import routerConfig from '@/router/full-routers'
+import { mapState } from 'vuex'
 
 // Function to filter the full menu tree based on available permissions
 const filterTreeByPerms = (tree, availablePerms) => {
@@ -143,7 +155,7 @@ export default {
       if (!value) {
         return callback(new Error('请输入账号'));
       }
-      checkUsername(value).then(res => {
+      checkUsername(value, this.form.selectedMarketId || this.marketId).then(res => {
         if (res && res.data && res.data.data && res.data.data.available === true) {
           callback();
         } else {
@@ -166,7 +178,8 @@ export default {
         permissionCodes: [],
         remark: '',
         accountId: null,
-        enable: true
+        enable: true,
+        selectedMarketId: ''
       },
       subAccountList: [],
       permissionList: [],
@@ -199,6 +212,16 @@ export default {
       },
     };
   },
+  computed: {
+    ...mapState("userData", [
+      "isMerchant",
+      "marketList",
+      "storeList",
+      "marketId",
+      "shopId",
+      "markets"
+    ])
+  },
   watch: {
     'form.operationType'(newType) {
       // Manually reset form fields to avoid resetting the operationType
@@ -249,7 +272,7 @@ export default {
         this.$message.error('请输入新密码');
         return;
       }
-      resetPassword(this.form.accountId, this.newPassword).then(() => {
+      resetPassword(this.form.accountId, this.newPassword, this.form.selectedMarketId || this.marketId).then(() => {
         this.$message.success('密码重置成功');
         this.resetPasswordDialogVisible = false;
       });
@@ -259,13 +282,13 @@ export default {
       this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true);
     },
     loadSubAccountList() {
-      getSubAccountList().then(res => {
+      getSubAccountList(this.form.selectedMarketId || this.marketId).then(res => {
         this.subAccountList = res.data.data.data || [];
       });
     },
     handleAccountChange(accountId) {
       if (!accountId) return;
-      getSubAccountDetail(accountId).then(res => {
+      getSubAccountDetail(accountId, this.form.selectedMarketId || this.marketId).then(res => {
         const accountDetails = res.data.data;
         this.form.name = accountDetails.name;
         this.form.mobile = accountDetails.mobile;
@@ -280,8 +303,14 @@ export default {
     save() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
+          const marketId = this.form.selectedMarketId || this.marketId;
+          if (!marketId) {
+            this.$message.error('请选择市场');
+            return;
+          }
+
           if (this.form.operationType === 'create') {
-            const createData = { ...this.form };
+            const createData = { ...this.form, marketId };
             if (createData.accountId === null) {
               delete createData.accountId;
             }
@@ -300,7 +329,8 @@ export default {
               mobile: this.form.mobile,
               permissionCodes: this.form.permissionCodes,
               remark: this.form.remark,
-              enabled: this.form.enable
+              enabled: this.form.enable,
+              marketId
             };
             updateSubAccount(updateData).then(() => {
               this.$message.success('更新成功');