1

src/common/utils/client-util.ts

@@ -0,0 +1,38 @@
+import Colls from '@/common/utils/colls.ts'
+
+const clientList = [
+  {
+    txt: '电脑端',
+    val: 1,
+  },
+  {
+    txt: '微信小程序',
+    val: 2,
+  },
+]
+
+function hasClient(client: number, clientCode: number) {
+  const find = clientList.find(it => it.val === client)
+  if (find == null) return false
+  return (client & clientCode) !== 0
+}
+
+function getClientCode(clients: number[]) {
+  if (Colls.isEmpty(clients)) return 0
+  let clientCode = 0
+  for (let client of clients) {
+    clientCode |= client
+  }
+  return clientCode
+}
+
+function getClients(clientCode: number) {
+  return clientList.filter(it => hasClient(it.val, clientCode))
+}
+
+export default {
+  clients: clientList,
+  hasClient,
+  getClientCode,
+  getClients,
+}

src/pages/login/Login.vue

@@ -17,7 +17,7 @@ const loginFormIns = useTemplateRef<FormInstance>('loginFormRef')
 const loginForm = reactive<LoginTypes.LoginForm>({
   account: '',
   secret: '',
-  clientCode: 0,
+  clientCode: 1,
 })
 const rules = reactive<FormRules<LoginTypes.LoginForm>>({
   account: [

src/pages/sys/menus/MenuForm.vue

@@ -6,6 +6,11 @@
       <ElFormItem label="上级">
         <ElTreeSelect v-model="menuForm.pid" :data="menuTreeDataSource" :default-expanded-keys="['0']" :disabled="status === 'view'" :render-after-expand="false" check-strictly placeholder="选择上级菜单"/>
       </ElFormItem>
+      <ElFormItem label="客户端" prop="clients">
+        <ElCheckboxGroup v-model="menuForm.clients">
+          <ElCheckbox v-for="client in  ClientUtil.clients" :key="client.val" :label="client.txt" :value="client.val"/>
+        </ElCheckboxGroup>
+      </ElFormItem>
       <ElFormItem label="类型">
         <ElSelect v-model="menuForm.menuCategory" :data="menuCategoryData" :disabled="status === 'view'" placeholder="选择类型">
           <ElOption v-for="menuCategory in menuCategoryData" :key="menuCategory.key" :label="menuCategory.label" :value="menuCategory.key"/>
@@ -77,6 +82,7 @@ import {
   icons,
 } from '@/components/a-icon/iconfont.ts'
 import AIcon from '@/components/a-icon/AIcon.tsx'
+import ClientUtil from '@/common/utils/client-util.ts'
 
 const emits = defineEmits([ 'editSucc' ])
 
@@ -136,9 +142,12 @@ const menuCategoryData = computed(() => {
 
 const menuTreeDataSource = ref<MenuTypes.SysMenu[]>()
 
+
 function submitHandler() {
   if (status.value === 'view') return
   submiting.value = true
+
+  menuForm.value.clientCode = ClientUtil.getClientCode(menuForm.value.clients!)
   if (menuForm.value.id != null) {
     MenuApi.modify(menuForm.value)
       .then(() => {

src/pages/sys/menus/menu.d.ts

@@ -50,6 +50,8 @@ declare global {
       iconName?: string
       // 排序
       sort?: number
+      clients?: number[]
+      clientCode?: number
       // 路由名称
       routeName?: string
       routePath?: string

src/pages/sys/user/User.vue

@@ -52,11 +52,10 @@
       <ElTableColumn label="登录手机号" prop="account.phone"/>
       <ElTableColumn label="用户名" prop="account.username"/>
       <ElTableColumn label="微信标识" prop="account.wechatOpenid"/>
-      <ElTableColumn label="已授权客户端" prop="account.clientCode">
+      <ElTableColumn label="已授权客户端" prop="account.clientCode" width="110">
         <template #default="{row}">
           <ElCheckboxGroup v-model="row.account.clients" :disabled="row.id == '1'" @change="clientChangeHandler($event,row)">
-            <ElCheckbox :value="0" label="电脑端"/>
-            <ElCheckbox :value="1" label="微信小程序"/>
+            <ElCheckbox v-for="client in  ClientUtil.clients" :key="client.val" :label="client.txt" :value="client.val"/>
           </ElCheckboxGroup>
         </template>
       </ElTableColumn>
@@ -93,6 +92,7 @@ import {
 } from 'element-plus'
 import AppApi from '@/common/app/app-api.ts'
 import BindRole from '@/pages/sys/user/BindRole.vue'
+import ClientUtil from '@/common/utils/client-util.ts'
 
 const tableData = ref<UserTypes.SearchUserResult[]>([])
 const searchForm = reactive<UserTypes.SearchUserParam>({
@@ -189,7 +189,7 @@ function paging() {
     .then(res => {
       tableData.value = res.data?.records ?? []
       tableData.value.map(it => {
-        it.account.clients = UserApi.clients(it.account.clientCode!).map(it => it.val)
+        it.account.clients = ClientUtil.getClients(it.account.clientCode!).map(it => it.val)
         return it
       })
     })

src/pages/sys/user/user-api.ts

@@ -2,6 +2,7 @@ import {
   get,
   post,
 } from '@/common/utils/http-util.ts'
+import ClientUtil from '@/common/utils/client-util.ts'
 
 const Clients = [ {
   txt: '电脑端',
@@ -48,10 +49,7 @@ export default {
     })
   },
   bindClient(id: string, clients: number[]) {
-    let clientCode = (1 << Clients.length) - 1
-    for (let client of clients) {
-      clientCode = (1 << client) ^ clientCode
-    }
+    let clientCode = ClientUtil.getClientCode(clients)
     return get('/user/bind_client', {id, clientCode})
   },
 }