feat 商户管理员功能开发, 用户管理优化

src/views/daxpay/admin/merchant/info/Merchant.api.ts

@@ -59,6 +59,16 @@ export const del = (id) => {
   })
 }
 
+/**
+ * 创建商户管理员
+ */
+export const createMerchantAdmin = (obj: MerchantAdmin) => {
+  return defHttp.post<Result<void>>({
+    url: '/merchant/createAdmin',
+    data: obj,
+  })
+}
+
 /**
  * 商户
  */
@@ -86,3 +96,23 @@ export interface Merchant extends BaseEntity {
   // 状态
   status?: string
 }
+
+/**
+ * 商户管理员创建参数
+ */
+export interface MerchantAdmin {
+  // 商户号
+  mchNo?: string
+  // 管理员名称
+  name?: string
+  // 商户管理员账号
+  account?: string
+  // 商户管理员密码
+  password?: string
+  // 重复密码
+  confirmPassword?: string
+  // 手机号
+  phone?: string
+  // 邮箱
+  email?: string
+}

src/views/daxpay/admin/merchant/info/MerchantCreateAdmin.vue

@@ -0,0 +1,196 @@
+<template>
+  <basic-drawer
+    showFooter
+    title="创建商户管理员"
+    v-bind="$attrs"
+    :width="modalWidth"
+    :open="visible"
+    :mask-closable="false"
+    @close="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form
+        class="small-from-item"
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :validate-trigger="['blur', 'change']"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="商户名称">
+          <a-tag color="green">{{ merchant.mchName }}</a-tag>
+        </a-form-item>
+        <a-form-item label="商户号">
+          <a-tag color="green">{{ merchant.mchNo }}</a-tag>
+        </a-form-item>
+        <a-form-item label="管理员账号" name="account" validate-first>
+          <a-input v-model:value="form.account" placeholder="请输入管理员账号" />
+        </a-form-item>
+        <a-form-item label="管理员名称" name="name">
+          <a-input v-model:value="form.name" placeholder="请输入管理员名称" />
+        </a-form-item>
+        <a-form-item label="登录密码" name="password" validate-first>
+          <strength-meter
+            v-model:value="form.password"
+            placeholder="请输入登录密码"
+            @change="validateToNextPassword"
+          />
+        </a-form-item>
+        <a-form-item label="确认密码" name="confirmPassword" validate-first>
+          <a-input-password v-model:value="form.confirmPassword" placeholder="请重新输入登录密码" />
+        </a-form-item>
+        <a-form-item label="手机号" validate-first name="phone">
+          <a-input v-model:value="form.phone" placeholder="请输入用户手机号" />
+        </a-form-item>
+        <a-form-item label="邮箱" validate-first name="email">
+          <a-input v-model:value="form.email" placeholder="请输入用户邮箱" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk"
+          >保存</a-button
+        >
+      </a-space>
+    </template>
+  </basic-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { BasicDrawer } from '@/components/Drawer'
+  import useFormEdit from '@/hooks/bootx/useFormEdit'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { nextTick, reactive, ref } from 'vue'
+  import StrengthMeter from '/@/components/StrengthMeter/src/StrengthMeter.vue'
+  import { validateEmail, validateMobile } from '@/utils/validate'
+  import { existsAccount, existsEmail, existsPhone } from '@/api/sys/userAssist'
+  import { useMessage } from '@/hooks/web/useMessage'
+  import { createMerchantAdmin, Merchant, MerchantAdmin } from './Merchant.api'
+
+  const { handleCancel, labelCol, wrapperCol, modalWidth, confirmLoading, visible } = useFormEdit()
+  const { createMessage } = useMessage()
+
+  const merchant = ref<Merchant>({})
+  const formRef = ref<FormInstance>()
+  const form = ref<MerchantAdmin>({
+    name: '',
+    account: '',
+    phone: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  })
+  // 校验
+  const rules = reactive({
+    name: [{ required: true, message: '请输入用户名称' }],
+    account: [
+      { required: true, message: '请输入用户账号' },
+      { validator: checkAccount, trigger: 'blur' },
+    ],
+    password: [{ required: true, message: '请输入登录密码!' }],
+    confirmPassword: [
+      { required: true, message: '请重新输入登录密码!' },
+      { validator: compareToFirstPassword },
+    ],
+    phone: [{ validator: validatePhone }, { validator: validateBindPhone, trigger: 'blur' }],
+    email: [{ validator: validateEmailRule }, { validator: validateBindEmail, trigger: 'blur' }],
+  } as Record<string, Rule[]>)
+
+  let confirmDirty = ref(false)
+
+  // 事件
+  const emits = defineEmits(['ok'])
+
+  /**
+   * 入口
+   */
+  function init(record: Merchant) {
+    merchant.value = record
+    form.value.mchNo = record.mchNo
+    visible.value = true
+    confirmLoading.value = false
+    nextTick(() => {
+      formRef.value?.resetFields()
+    })
+  }
+
+  function handleOk() {
+    formRef.value?.validate().then(async () => {
+      confirmLoading.value = true
+      await createMerchantAdmin(form.value).finally(() => (confirmLoading.value = false))
+      createMessage.success('添加用户成功')
+      confirmLoading.value = false
+      emits('ok')
+      handleCancel()
+    })
+  }
+
+  /**
+   * 用户名检查
+   */
+  async function checkAccount() {
+    const { data } = await existsAccount(form.value.account)
+    return data ? Promise.reject('用户名已存在!') : Promise.resolve()
+  }
+  /**
+   * 密码检查
+   */
+  function validateToNextPassword() {
+    if (confirmDirty.value) {
+      formRef.value?.validateFields(['confirmPassword'])
+    }
+  }
+  function compareToFirstPassword() {
+    if (form.value.confirmPassword !== form.value.password) {
+      confirmDirty.value = true
+      return Promise.reject('密码不一致')
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  /**
+   * 校验邮箱号
+   */
+  function validateEmailRule() {
+    const { email } = form.value
+    if (!email) {
+      return Promise.resolve()
+    }
+    const { msg, result } = validateEmail(email)
+    return result ? Promise.resolve() : Promise.reject(msg)
+  }
+  /**
+   * 后台校验邮箱号是否被使用
+   */
+  async function validateBindEmail() {
+    const { email } = form.value
+    const { data } = await existsEmail(email)
+    return data ? Promise.reject('邮箱已被使用') : Promise.resolve()
+  }
+  /**
+   * 校验手机号
+   */
+  function validatePhone() {
+    const { phone } = form.value
+    if (!phone) {
+      return Promise.resolve()
+    }
+    const { msg, result } = validateMobile(phone)
+    return result ? Promise.resolve() : Promise.reject(msg)
+  }
+  /**
+   * 后台校验手机号是否被使用
+   */
+  async function validateBindPhone() {
+    const { phone } = form.value
+    const { data } = await existsPhone(phone)
+    return data ? Promise.reject('手机号已被使用') : Promise.resolve()
+  }
+  defineExpose({ init })
+</script>
+
+<style scoped></style>

src/views/daxpay/admin/merchant/info/MerchantList.vue

@@ -32,6 +32,12 @@
           <vxe-column field="companyName" title="公司名称" :min-width="180" />
           <vxe-column field="companyContact" title="联系方式" :min-width="120" />
           <vxe-column field="companyCode" title="信用编码" :min-width="180" />
+          <vxe-column field="administrator" title="关联管理员" :min-width="120">
+            <template #default="{ row }">
+              <a-tag v-if="row.administrator" color="green">已关联</a-tag>
+              <a-link danger @click="createAdmin(row)" v-else>创建管理员</a-link>
+            </template>
+          </vxe-column>
           <vxe-column field="createTime" title="创建时间" :min-width="170" />
           <vxe-column fixed="right" :width="150" :showOverflow="false" title="操作">
             <template #default="{ row }">
@@ -57,6 +63,7 @@
         @page-change="handleTableChange"
       />
       <MerchantEdit ref="merchantEdit" @ok="queryPage" />
+      <MerchantCreateAdmin ref="merchantCreateAdmin" />
     </div>
   </div>
 </template>
@@ -72,7 +79,7 @@
   import { useMessage } from '@/hooks/web/useMessage'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import ALink from '@/components/Link/Link.vue'
-  import { useDict } from '@/hooks/bootx/useDict'
+  import MerchantCreateAdmin from './MerchantCreateAdmin.vue'
 
   // 使用hooks
   const {
@@ -92,7 +99,8 @@
   ] as QueryField[]
   const xTable = ref<VxeTableInstance>()
   const xToolbar = ref<VxeToolbarInstance>()
-  const merchantEdit: any = ref()
+  const merchantEdit = ref<any>()
+  const merchantCreateAdmin = ref<any>()
 
   onMounted(() => {
     vxeBind()
@@ -141,6 +149,13 @@
       },
     })
   }
+
+  /**
+   * 创建管理员用户
+   */
+  function createAdmin(record) {
+    merchantCreateAdmin.value.init(record)
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/daxpay/admin/merchant/notify/MerchantNotifyConfigList.vue

@@ -5,7 +5,7 @@
     title="消息订阅配置"
     :open="visible"
     :mask-closable="false"
-    @cancel="handleCancel"
+    @close="handleCancel"
   >
     <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }" />
     <div class="h-80vh">

src/views/iam/role/RoleList.vue

@@ -52,8 +52,10 @@
               <a-link @click="addChildren(row)">添加子角色</a-link>
               <a-divider type="vertical" />
               <a-link @click="edit(row)">编辑</a-link>
-              <a-divider type="vertical" />
-              <a-link danger @click="remove(row)">删除</a-link>
+              <template v-if="!row.internal">
+                <a-divider type="vertical" />
+                <a-link danger @click="remove(row)">删除</a-link>
+              </template>
               <a-divider type="vertical" />
               <a-dropdown>
                 <a> 授权 <Icon icon="ant-design:down-outlined" :size="12" :min-width="280" /> </a>

src/views/iam/user/UserAdd.vue

@@ -6,6 +6,7 @@
     :width="modalWidth"
     :open="visible"
     :mask-closable="false"
+    @close="handleCancel"
   >
     <a-spin :spinning="confirmLoading">
       <a-form

src/views/iam/user/UserList.vue

@@ -52,13 +52,19 @@
           <vxe-column field="account" title="账号" />
           <vxe-column field="phone" title="手机号" />
           <vxe-column field="email" title="邮箱" />
-          <vxe-column field="administrator" title="是否管理员">
+          <vxe-column field="administrator" title="是否管理员" align="center">
             <template #default="{ row }">
               <a-tag v-if="row.administrator" color="green">是</a-tag>
               <a-tag v-else color="red">否</a-tag>
             </template>
           </vxe-column>
-          <vxe-column field="status" title="用户状态">
+          <vxe-column field="avatar" title="头像" align="center">
+            <template #default="{ row }">
+              <Avatar size="large" :src="getFileUrl(row.avatar)" />
+            </template>
+          </vxe-column>
+
+          <vxe-column field="status" title="用户状态" align="center">
             <template #default="{ row }">
               {{ dictConvert('UserStatusCode', row.status) || '无' }}
             </template>
@@ -113,6 +119,7 @@
 
 <script lang="ts" setup>
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { Avatar } from 'ant-design-vue'
   import useTablePage from '@/hooks/bootx/useTablePage'
   import { useMessage } from '@/hooks/web/useMessage'
   import { onMounted, ref } from 'vue'
@@ -127,6 +134,7 @@
   import UserResetPwd from './UserResetPwd.vue'
   import UserRoleAssign from './role/UserRoleAssign.vue'
   import ALink from '@/components/Link/Link.vue'
+  import { useFilePlatform } from "@/hooks/bootx/useFilePlatform";
 
   // 使用hooks
   const {
@@ -141,6 +149,7 @@
   } = useTablePage(queryPage)
   const { createConfirm } = useMessage()
   const { dictConvert } = useDict()
+  const {getFileUrl} = useFilePlatform()
 
   // 查询条件
   const fields = [

types/store.d.ts

@@ -34,7 +34,7 @@ export interface UserInfo {
   name: string
   // 账号
   account: string
-  // 头像图片id
+  // 头像图片url
   avatar: string
 }