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

<template>
  <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>

        <h3>店铺基础信息</h3>
        <el-form-item label="摊位名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入摊位名称"></el-input>
        </el-form-item>
        <el-form-item label="主营类目" prop="categoryId">
          <el-select v-model="form.categoryId" placeholder="请选择主营类目" style="width: 100%">
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="摊位背景图" prop="background">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handleBackgroundSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.background" :src="form.background" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="摊位联系电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入联系电话/手机号"></el-input>
        </el-form-item>
        <el-form-item label="摊位照片" prop="fileList">
          <el-upload
            :action="uploadUrl"
            :headers="uploadHeaders"
            list-type="picture-card"
            :file-list="form.fileList"
            :on-success="handleFileListSuccess"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="摊位位置" prop="address">
          <el-input v-model="form.address" placeholder="请输入摊位位置"></el-input>
        </el-form-item>
        <el-form-item label="摊位详细地址" prop="detailAddress">
          <el-input v-model="form.detailAddress" placeholder="请输入摊位详细地址"></el-input>
        </el-form-item>
        <el-form-item label="许可证" prop="permits">
          <el-upload
            :action="uploadUrl"
            :headers="uploadHeaders"
            list-type="picture-card"
            :file-list="form.permits"
            :on-success="handlePermitsSuccess"
            :before-upload="beforeAvatarUpload"
            :on-remove="handlePermitsRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否自动营业" prop="isAutoBusiness">
          <el-switch v-model="form.isAutoBusiness"></el-switch>
        </el-form-item>
        <el-form-item v-if="form.isAutoBusiness" label="营业时间">
          <el-time-picker
            is-range
            v-model="businessHours"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="顾客自提点位置" prop="pickName">
          <el-input v-model="form.pickName" placeholder="请输入顾客自提点位置"></el-input>
        </el-form-item>
        <el-form-item label="自提点详细地址" prop="pickAddress">
          <el-input v-model="form.pickAddress" placeholder="请输入自提点详细地址"></el-input>
        </el-form-item>
        <el-form-item label="自提点位置示意图" prop="pickImg">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handlePickImgSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.pickImg" :src="form.pickImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="承诺送达自提点时间" prop="promisePickDeliveryTime">
          <el-input v-model.number="form.promisePickDeliveryTime" placeholder="请输入小时数">
            <template slot="append">小时以内</template>
          </el-input>
        </el-form-item>
      </template>

      <template v-if="form.operationType === 'update'">
        <el-form-item label="选择商户账号" prop="merchantId">
          <el-select v-model="form.merchantId" placeholder="请选择要更新的商户账号" @change="handleAccountChange" style="width: 100%">
            <el-option
              v-for="item in merchantAccountList"
              :key="item.merchantId"
              :label="item.name"
              :value="item.merchantId"
            ></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,
} from '@/api/modules/subaccount' // Assuming some APIs can be reused
import { inviteJoin, setMerchantPermissions, shopBaseConfig, listPlatformCategory, getMerchantList, updatePassword } from '@/api/modules/merchant' // New merchant API
import { mer_admin } from '@/api/modules/mer_admin'
import routerConfig from '@/router/full-routers'
import { mapState } from 'vuex'
import cookie from 'js-cookie'

// 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',
  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: [],
        merchantId: null,
        enable: true,
        selectedMarketId: '',
        name: '',
        categoryId: '',
        background: '',
        isAutoBusiness: true,
        businessDays: '1111111',
        startBusinessTime: 0,
        endBusinessTime: 1440,
        contactPhone: '',
        fileList: [],
        address: '',
        permits: [],
        lng: '',
        lat: '',
        detailAddress: '',
        pickName: '',
        pickLng: '',
        pickAddress: '',
        pickLat: '',
        pickImg: '',
        promisePickDeliveryTime: '',
      },
      businessHours: [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)],
      categoryList: [],
      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" },
        ],
        name: [
          { required: true, message: "请输入摊位名称", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "请选择主营类目", trigger: "change" },
        ],
        background: [
          { required: true, message: "请上传摊位背景图", trigger: "change" },
        ],
        fileList: [
          { required: true, message: "请上传摊位照片", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入摊位位置", trigger: "blur" },
        ],
        detailAddress: [
          { required: true, message: "请输入摊位详细地址", trigger: "blur" },
        ],
        pickName: [
          { required: true, message: "请输入顾客自提点位置", trigger: "blur" },
        ],
        pickAddress: [
          { required: true, message: "请输入自提点详细地址", trigger: "blur" },
        ],
        promisePickDeliveryTime: [
          { required: true, message: "请输入承诺送达自提点时间", trigger: "blur" },
          { type: 'number', message: '必须为数字值'}
        ],
        permissionCodes: [
          { required: true, message: "请选择菜单权限", trigger: "change", type: 'array' },
        ],
        merchantId: [
          { required: true, message: "请选择要更新的商户账号", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId",
      "markets"
    ]),
    uploadUrl() {
      return mer_admin.uploadFile();
    },
    uploadHeaders() {
      return {
        token: cookie.get('token')
      };
    }
  },
  watch: {
    'form.operationType'(newType) {
      this.form.mobile = '';
      this.form.password = '';
      this.form.permissionCodes = [];
      this.form.merchantId = null;

      this.$nextTick(() => {
        this.$refs.ruleFormRef.clearValidate();
      });

      if (this.$refs.permissionTree) {
        this.$refs.permissionTree.setCheckedKeys([]);
      }

      if (newType === 'update') {
        this.loadMerchantAccountList();
      }
    }
  },
  created() {
    this.getPermissions();
    this.getPlatformCategory();
  },
  methods: {
    getPlatformCategory() {
      listPlatformCategory({ type: this.isCloudShop ? 1 : 0 }).then(res => {
        this.categoryList = res.data.data;
      });
    },
    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.merchantId) {
        this.$message.error('请先选择要更新的商户账号');
        return;
      }
      this.resetPasswordDialogVisible = true;
    },
    handleResetPassword() {
      if (!this.newPassword) {
        this.$message.error('请输入新密码');
        return;
      }
      updatePassword({ password: this.newPassword }).then(() => {
        this.$message.success('密码重置成功');
        this.resetPasswordDialogVisible = false;
      });
    },
    handleTreeCheck() {
      this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true);
    },
    handleBackgroundSuccess(res) {
      this.form.background = res.data;
    },
    handleFileListSuccess(res, file, fileList) {
      this.form.fileList = fileList;
    },
    handlePermitsSuccess(res, file, fileList) {
      this.form.permits = fileList;
    },
    handlePickImgSuccess(res) {
      this.form.pickImg = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      this.form.fileList = fileList;
    },
    handlePermitsRemove(file, fileList) {
      this.form.permits = fileList;
    },
    loadMerchantAccountList() {
      getMerchantList({ marketId: this.form.selectedMarketId || this.marketId }).then(res => {
        this.merchantAccountList = res.data.data || [];
      });
    },
    handleAccountChange(merchantId) {
      if (!merchantId) return;
      const accountDetails = this.merchantAccountList.find(item => item.merchantId === merchantId);
      if (accountDetails) {
        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 shopId = res.data.data.shopId; // Assuming this is the shop ID
              const permissionsData = {
                merchantAccountId,
                permissionCodes: this.form.permissionCodes,
                marketId
              };
              setMerchantPermissions(permissionsData).then(() => {
                const shopData = {
                  ...this.form,
                  imgs: this.form.fileList.map(f => f.url).join(','),
                  permits: this.form.permits.map(f => f.url).join(','),
                  startBusinessTime: this.businessHours[0].getHours() * 60 + this.businessHours[0].getMinutes(),
                  endBusinessTime: this.businessHours[1].getHours() * 60 + this.businessHours[1].getMinutes(),
                };
                shopBaseConfig({ shopId }, shopData).then(() => {
                  this.$message.success('商户创建成功，权限及店铺信息已设置');
                  this.$refs.ruleFormRef.resetFields();
                });
              });
            });
          } else if (this.form.operationType === 'update') {
            if (!this.form.merchantId) {
              this.$message.error('请先选择要更新的商户账号');
              return;
            }
            const permissionsData = {
              merchantAccountId: this.form.merchantId,
              permissionCodes: this.form.permissionCodes,
              marketId
            };
            setMerchantPermissions(permissionsData).then(() => {
              this.$message.success('商户信息更新成功');
              this.$refs.ruleFormRef.resetFields();
            });
          }
        }
      });
    }
  },
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }