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
            accept="image/*"
            :action="uploadUrl"
            list-type="picture-card"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handleBackgroundSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.background" :src="form.background" width="148px" height="148px" />
            <i v-else class="el-icon-plus"></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
            accept="image/*"
            :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
            accept="image/*"
            :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
            accept="image/*"
            :action="uploadUrl"
            list-type="picture-card"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handlePickImgSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.pickImg" :src="form.pickImg" width="148px" height="148px" />
            <i v-else class="el-icon-plus"></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>
      </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,
  resetMerchantPassword
} from '@/api/modules/subaccount' // Assuming some APIs can be reused
import {
  inviteJoin,
  setMerchantPermissions,
  shopBaseConfig,
  listPlatformCategory,
  getMerchantList
} 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
      }
      const selectedAccount = this.merchantAccountList.find(
        item => item.merchantId === this.form.merchantId
      )
      if (!selectedAccount) {
        this.$message.error('无法找到所选商户的详细信息')
        return
      }
      resetMerchantPassword({
        merchantAccountId: selectedAccount.merchantAccountId,
        newPassword: this.newPassword,
        marketId: this.form.selectedMarketId || this.marketId
      }).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 isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isImage && 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.status === 1
        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.merchantAccountId // Assuming this is the merchant ID
              const merchantId = res.data.data.merchantId;
              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,
                  merchantAccountId,
                  merchantId,
                  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()
                }
                debugger
                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 selectedAccount = this.merchantAccountList.find(
              item => item.merchantId === this.form.merchantId
            )
            if (!selectedAccount) {
              this.$message.error('无法找到所选商户的详细信息')
              return
            }
            const permissionsData = {
              merchantAccountId: selectedAccount.merchantAccountId,
              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;
}
</style>