优化常用菜单和搜索功能

wuxw
1 parent d720526e
Showing 14 changed files with 1281 additions and 6 deletions
src/api/system/menuUserManageApi.js
src/api/system/searchCommunityDataApi.js
src/api/system/viewMenuUserApi.js
src/components/system/addMenuUser.vue
src/components/system/deleteMenuUser.vue
src/components/system/searchCommunityDataList.vue
src/components/system/viewMenuUserList.vue
src/i18n/systemI18n.js
src/router/systemRouter.js
src/views/layout/layout.vue
src/views/oa/attendanceClassesStaffManageList.vue
src/views/system/menuUserManageLang.js
src/views/system/menuUserManageList.vue
src/views/system/systemInfoManageLang.js
+import request from '@/utils/request'
+
+/**
+ * 获取用户菜单列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function listMenuUser(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/menuUser.listMenuUser',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 添加用户菜单
+ * @param {Object} data 菜单数据
+ * @returns {Promise}
+ */
+export function saveMenuUser(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/menuUser.saveMenuUser',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 删除用户菜单
+ * @param {Object} data 删除参数
+ * @returns {Promise}
+ */
+export function deleteMenuUser(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/menuUser.deleteMenuUser',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取目录菜单列表
+ * @returns {Promise}
+ */
+export function listCatalogMenus() {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/menu.listCatalogMenus',
+      method: 'get'
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 搜索社区数据
+export function searchCommunityData(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/search.searchCommunityData',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取电话机信息
+export function getTelMachineInfo() {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params: {
+        page: 1,
+        row: 1,
+        communityId,
+        iotApiCode: 'queryTelMachineBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存电话机消息
+export function saveTelMachineMsg(data) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/iot.postOpenApi',
+      method: 'post',
+      data: {
+        ...data,
+        communityId,
+        iotApiCode: 'telMachineMsgBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+/**
+ * 获取用户菜单列表
+ * @param {Object} params 查询参数
+ * @returns {Promise} Promise对象
+ */
+export function listMenuUser(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/menuUser.listMenuUser',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('menuUserManage.add.title')" :visible.sync="visible" width="50%" @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('menuUserManage.add.menu')" prop="mId">
+        <el-select v-model="form.mId" :placeholder="$t('menuUserManage.add.menuPlaceholder')" style="width:100%">
+          <el-option v-for="item in menus" :key="item.mId" :label="`${item.menuGroupName}-${item.name}`"
+            :value="item.mId" :disabled="item.isShow !== 'Y'" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('menuUserManage.add.icon')" prop="icon">
+        <el-radio-group v-model="form.icon">
+          <el-radio label="fa fa-adjust">
+            <i class="fa fa-adjust"></i>
+          </el-radio>
+          <el-radio label="fa fa-bar-chart">
+            <i class="fa fa-bar-chart"></i>
+          </el-radio>
+          <el-radio label="fa fa-comment-o">
+            <i class="fa fa-comment-o"></i>
+          </el-radio>
+          <el-radio label="fa fa-folder-o">
+            <i class="fa fa-folder-o"></i>
+          </el-radio>
+          <el-radio label="fa fa-futbol-o">
+            <i class="fa fa-futbol-o"></i>
+          </el-radio>
+          <el-radio label="fa fa-globe">
+            <i class="fa fa-globe"></i>
+          </el-radio>
+          <el-radio label="fa fa-female">
+            <i class="fa fa-female"></i>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item :label="$t('menuUserManage.add.seq')" prop="seq">
+        <el-input-number v-model="form.seq" :placeholder="$t('menuUserManage.add.seqPlaceholder')" :min="1"
+          style="width:100%" />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveMenuUser,listCatalogMenus } from '@/api/system/menuUserManageApi'
+
+export default {
+  name: 'AddMenuUser',
+  data() {
+    return {
+      visible: false,
+      form: {
+        mId: '',
+        icon: 'fa fa-adjust',
+        seq: 1
+      },
+      menus: [],
+      rules: {
+        mId: [
+          { required: true, message: this.$t('menuUserManage.validate.menuRequired'), trigger: 'blur' }
+        ],
+        icon: [
+          { required: true, message: this.$t('menuUserManage.validate.iconRequired'), trigger: 'blur' }
+        ],
+        seq: [
+          { required: true, message: this.$t('menuUserManage.validate.seqRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.loadMenus()
+    },
+    async loadMenus() {
+      try {
+        const { data } = await listCatalogMenus()
+        const newMenus = []
+        data.forEach(item => {
+          item.childs.forEach(child => {
+            child.menuGroupName = item.name
+            newMenus.push(child)
+          })
+        })
+        this.menus = newMenus
+      } catch (error) {
+        console.error('Failed to load menus:', error)
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveMenuUser(this.form)
+            this.$message.success(this.$t('menuUserManage.add.success'))
+            this.$emit('success')
+            this.visible = false
+          } catch (error) {
+            this.$message.error(error.message || this.$t('menuUserManage.add.error'))
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.form.icon = 'fa fa-adjust'
+      this.form.seq = 1
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.el-radio {
+  margin-right: 15px;
+  margin-bottom: 10px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :title="$t('menuUserManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <i class="el-icon-warning" style="color:#E6A23C;font-size:24px;margin-right:10px;"></i>
+      <span>{{ $t('menuUserManage.delete.confirm') }}</span>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteMenuUser } from '@/api/system/menuUserManageApi'
+
+export default {
+  name: 'DeleteMenuUser',
+  data() {
+    return {
+      visible: false,
+      currentData: null
+    }
+  },
+  methods: {
+    open(data) {
+      this.currentData = data
+      this.visible = true
+    },
+    async handleConfirm() {
+      try {
+        await deleteMenuUser(this.currentData)
+        this.$message.success(this.$t('menuUserManage.delete.success'))
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        this.$message.error(error.message || this.$t('menuUserManage.delete.error'))
+      }
+    },
+    handleClose() {
+      this.currentData = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  padding: 20px 0;
+}
+</style>
 \ No newline at end of file
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="$t('searchCommunityData.title')"
+    width="80%"
+    @close="handleClose"
+  >
+    <el-row class="margin-bottom">
+      <el-col :span="14" :offset="2">
+        <el-input
+          v-model="searchValue"
+          :placeholder="$t('searchCommunityData.placeholder')"
+          @keyup.enter.native="doSearch"
+        />
+      </el-col>
+      <el-col :span="3" :offset="1">
+        <el-button type="primary" @click="doSearch">
+          {{ $t('common.search') }}
+        </el-button>
+      </el-col>
+      <el-col :span="3">
+        <el-button @click="queryCallInTel">
+          {{ $t('searchCommunityData.callInNumber') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-divider />
+    <div class="margin-top margin-bottom" style="min-height: 200px;">
+      <template v-if="!noData">
+        <div class="vc-search-community-item" v-if="rooms.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.roomInfo') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in rooms"
+              :key="'room'+index"
+              @click="toSimplifyAcceptance(item)"
+            >
+              {{ item.roomName }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="owners.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.ownerInfo') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in owners"
+              :key="'owner'+index"
+              :href="'/#/views/owner/ownerDetail?ownerId='+item.ownerId"
+              target="_blank"
+            >
+              {{ item.name }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="ownerMembers.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.ownerMember') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in ownerMembers"
+              :key="'ownerMember'+index"
+              :href="'/#/views/owner/ownerDetail?ownerId='+item.ownerId"
+              target="_blank"
+            >
+              {{ item.name }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="cars.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.communityCar') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in cars"
+              :key="'car'+index"
+              :href="'/#/views/car/carDetail?memberId='+item.carId"
+              target="_blank"
+            >
+              {{ item.carNum }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="carMembers.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.memberCar') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in carMembers"
+              :key="'carMember'+index"
+              :href="'/#/views/car/carDetail?memberId='+item.carId"
+              target="_blank"
+            >
+              {{ item.carNum }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="contracts.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.contract') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in contracts"
+              :key="'contract'+index"
+              :href="'/#/views/contract/contractDetail?contractId='+item.contractId"
+              target="_blank"
+            >
+              {{ item.contractName }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="repairs.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.repairOrder') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in repairs"
+              :key="'repair'+index"
+              :href="'/#/pages/property/ownerRepairDetail?repairId='+item.repairId"
+              target="_blank"
+            >
+              {{ item.repairName }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="visits.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.visitor') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in visits"
+              :key="'visit'+index"
+              :href="'/#/pages/property/visitDetail?vId='+item.vId+'&flowId='+item.flowId"
+              target="_blank"
+            >
+              {{ item.vName }}
+            </el-link>
+          </div>
+        </div>
+        <div class="vc-search-community-item" v-if="staffs.length > 0">
+          <div class="item-title">{{ $t('searchCommunityData.staff') }}</div>
+          <div class="item-content">
+            <el-link
+              v-for="(item, index) in staffs"
+              :key="'staff'+index"
+              :href="'/#/views/staff/staffDetail?staffId='+item.userId"
+              target="_blank"
+            >
+              {{ item.name }}
+            </el-link>
+          </div>
+        </div>
+      </template>
+      <div v-else class="text-center" style="font-size: 38px;color: #aaa;margin-top: 100px;">
+        {{ $t('searchCommunityData.noData') }}
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.close') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { searchCommunityData, getTelMachine, postTelMachineMsg } from '@/api/system/searchCommunityDataApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SearchCommunityData',
+  data() {
+    return {
+      visible: false,
+      searchValue: '',
+      rooms: [],
+      owners: [],
+      ownerMembers: [],
+      cars: [],
+      carMembers: [],
+      contracts: [],
+      repairs: [],
+      visits: [],
+      staffs: [],
+      noData: true,
+      machine: {},
+      ws: null,
+      componentName: '',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.initTelMachine()
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.clearSearchData()
+    },
+    handleClose() {
+      this.clearSearchData()
+    },
+    initTelMachine() {
+      if (!this.communityId || this.communityId === '-1') {
+        return
+      }
+      getTelMachine({
+        page: 1,
+        row: 1,
+        communityId: this.communityId
+      }).then(res => {
+        if (res.code !== 0 || res.data.length < 1) {
+          return
+        }
+        this.machine = res.data[0]
+        this.connectTelMachine(this.machine)
+      }).catch(error => {
+        console.error('Failed to get tel machine:', error)
+      })
+    },
+    doSearch() {
+      if (!this.searchValue) {
+        this.$message.warning(this.$t('searchCommunityData.inputTip'))
+        return
+      }
+      
+      searchCommunityData({
+        searchValue: this.searchValue,
+        communityId: this.communityId
+      }).then(res => {
+        if (res.code !== 0) {
+          this.$message.error(res.msg)
+          return
+        }
+        
+        this.noData = false
+        const data = res.data
+        this.rooms = data.rooms || []
+        this.owners = data.owners || []
+        this.ownerMembers = data.ownerMembers || []
+        this.cars = data.cars || []
+        this.carMembers = data.carMembers || []
+        this.contracts = data.contracts || []
+        this.repairs = data.repairs || []
+        this.visits = data.visitDtos || []
+        this.staffs = data.staffs || []
+        
+        this.noData = !(this.rooms.length > 0 || this.owners.length > 0 || 
+                       this.ownerMembers.length > 0 || this.cars.length > 0 || 
+                       this.carMembers.length > 0 || this.contracts.length > 0 || 
+                       this.repairs.length > 0 || this.visits.length > 0 || 
+                       this.staffs.length > 0)
+      }).catch(error => {
+        console.error('Search failed:', error)
+      })
+    },
+    toSimplifyAcceptance(room) {
+      const date = new Date()
+      localStorage.setItem("JAVA110_IS_BACK", date.getTime())
+      localStorage.setItem('simplifyAcceptanceSearch', JSON.stringify({
+        searchType: '1',
+        searchValue: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+        searchPlaceholder: this.$t('searchCommunityData.roomPlaceholder')
+      }))
+      window.open('/#/pages/property/simplifyAcceptance?tab=businessAcceptance')
+    },
+    clearSearchData() {
+      const ws = this.ws
+      const machine = this.machine
+      
+      this.searchValue = ''
+      this.noData = true
+      this.rooms = []
+      this.owners = []
+      this.ownerMembers = []
+      this.cars = []
+      this.carMembers = []
+      this.contracts = []
+      this.repairs = []
+      this.visits = []
+      this.staffs = []
+      this.machine = machine
+      this.ws = ws
+    },
+    queryCallInTel() {
+      if (!this.ws) {
+        this.$message.warning(this.$t('searchCommunityData.telNotConnected'))
+        return
+      }
+      this.ws.send(JSON.stringify({
+        action: 'Query',
+        type: 'Device',
+        cb: 'cb_data'
+      }))
+    },
+    connectTelMachine(machine) {
+      const protocol = window.location.protocol
+      let url = "ws://"
+      if (protocol.startsWith('https')) {
+        url = "wss://"
+      }
+      url = `${url}${machine.machineIp}:${machine.machinePort}/APP_2AD85C71-BEF8-463C-9B4B-B672F603542A_fast`
+      
+      const ws = new WebSocket(url)
+      
+      ws.onerror = (event) => {
+        console.log('WebSocket error:', event)
+        setTimeout(() => {
+          this.connectTelMachine(machine)
+        }, 2000)
+      }
+      
+      ws.onclose = () => {
+        console.log('WebSocket closed')
+      }
+      
+      ws.onopen = () => {
+        console.log('WebSocket connected')
+      }
+      
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data)
+          console.log('WebSocket message:', data)
+          
+          if (data.message === 'query') {
+            if (data.name === 'Device' && data.param.CallerId) {
+              this.clearSearchData()
+              this.searchValue = data.param.CallerId
+              this.doSearch()
+              return
+            }
+            if (data.name === 'Device' && Object.prototype.hasOwnProperty.call(data.param, 'CallerId')) {
+              this.$message.warning(this.$t('searchCommunityData.noCallInNumber'))
+              return
+            }
+            return
+          }
+          
+          const param = data.param
+          
+          if (param && param.status === 'CallIn') {
+            this.clearSearchData()
+            this.searchValue = param.number
+            this.visible = true
+            this.doSearch()
+            return
+          }
+          
+          if (param && param.status === 'TalkingStart') {
+            this.$emit('TalkingStart', param)
+            return
+          }
+          
+          if (param && param.status === 'TalkingEnd') {
+            this.$emit('TalkingEnd', param)
+            return
+          }
+          
+          this.saveTelMachineMsg(data)
+        } catch (error) {
+          console.error('Error parsing WebSocket message:', error)
+        }
+      }
+      
+      this.ws = ws
+    },
+    saveTelMachineMsg(data) {
+      data.communityId = this.communityId
+      data.machineId = this.machine.machineId
+      
+      postTelMachineMsg(data).then(res => {
+        if (res.code !== 0) {
+          console.error('Failed to save tel machine message:', res.msg)
+          return
+        }
+        
+        const param = res.data || {}
+        if (param.action === 'sms') {
+          this.$emit('sendTelMsg', {
+            tel: param.tel,
+            msgText: param.msgText
+          })
+        }
+      }).catch(error => {
+        console.error('Failed to post tel machine message:', error)
+      })
+    },
+    playTts(data) {
+      if (this.ws) {
+        this.ws.send(JSON.stringify({
+          action: 'PlayMusic',
+          url: data.url,
+          file_name: this.uuid() + '.wav',
+          volume: 100,
+          loop: true
+        }))
+      }
+    },
+    hangup() {
+      if (this.ws) {
+        this.ws.send(JSON.stringify({
+          action: 'Hangup'
+        }))
+      }
+    },
+    callTel(data) {
+      if (this.ws) {
+        this.ws.send(JSON.stringify({
+          action: 'CallOut',
+          number: data.tel,
+          cb: 'callout_cb'
+        }))
+        this.componentName = data.componentName
+      }
+    },
+    sendTelMsg(data) {
+      if (this.ws) {
+        this.ws.send(JSON.stringify({
+          action: 'SmsSend',
+          number: data.tel,
+          content: data.msgText
+        }))
+      }
+    },
+    uuid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = Math.random() * 16 | 0
+        const v = c === 'x' ? r : (r & 0x3 | 0x8)
+        return v.toString(16)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.vc-search-community-item {
+  margin-bottom: 20px;
+}
+
+.item-title {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.item-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-bottom {
+  margin-bottom: 20px;
+}
+
+.text-center {
+  text-align: center;
+}
+</style>
 \ No newline at end of file
+<template>
+    <div class="view-menu-user-container">
+        <el-dialog :visible.sync="dialogVisible" width="80%" :before-close="handleClose"
+            custom-class="view-menu-user-dialog">
+            <el-row>
+                <el-col :span="22"></el-col>
+                <el-col :span="2" class="text-right">
+                    <i class="el-icon-close close-icon" @click="handleClose"></i>
+                </el-col>
+            </el-row>
+
+            <el-row class="menu-items" :gutter="20">
+                <el-col v-for="(item, index) in viewMenuUserInfo.menus" :key="index" :span="4"
+                    class="text-center menu-item" @click.native="jumpToUserPage(item)">
+                    <div>
+                        <i :class="item.icon" class="menu-icon"></i>
+                    </div>
+                    <div class="menu-name">
+                        {{ item.name }}
+                    </div>
+                </el-col>
+            </el-row>
+
+            <el-row class="menu-items" :gutter="20">
+                <el-col :span="4" class="text-center menu-item" @click.native="toUserMenu">
+                    <div>
+                        <i class="el-icon-plus menu-icon"></i>
+                    </div>
+                    <div class="menu-name">
+                        {{ $t('viewMenuUser.custom') }}
+                    </div>
+                </el-col>
+            </el-row>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { listMenuUser } from '@/api/system/viewMenuUserApi'
+
+export default {
+    name: 'ViewMenuUserList',
+    data() {
+        return {
+            dialogVisible: false,
+            viewMenuUserInfo: {
+                menus: []
+            }
+        }
+    },
+    methods: {
+        open() {
+            this.dialogVisible = true
+            this.listViewMenuUsers()
+        },
+        handleClose() {
+            this.dialogVisible = false
+        },
+        async listViewMenuUsers() {
+            try {
+                const params = {
+                    page: 1,
+                    row: 100
+                }
+                const { data } = await listMenuUser(params)
+                this.viewMenuUserInfo.menus = data
+            } catch (error) {
+                console.error('Failed to fetch menu data:', error)
+            }
+        },
+        toUserMenu() {
+            this.handleClose()
+            this.$router.push('/views/system/menuUserManage?tab=commonMenu')
+        },
+        jumpToUserPage(item) {
+            this.handleClose()
+            let href = item.url
+            if (href.indexOf('/#/') > -1) {
+                href = href.replace('/#/', '/')
+            }
+            if (href.indexOf('?') > -1) {
+                href += `&tab=${item.name}`
+            } else {
+                href += `?tab=${item.name}`
+            }
+            this.$router.push(href)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.view-menu-user-container {
+    ::v-deep .view-menu-user-dialog {
+        background: rgba(66, 66, 66, 0.9);
+        color: #fff;
+        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
+
+        .el-dialog__header {
+            display: none;
+        }
+
+        .el-dialog__body {
+            color: #fff;
+            padding: 20px;
+        }
+    }
+
+    .close-icon {
+        font-size: 18px;
+        cursor: pointer;
+
+        &:hover {
+            color: #409EFF;
+        }
+    }
+
+    .menu-items {
+        margin-top: 40px;
+        cursor: pointer;
+    }
+
+    .menu-item {
+        margin-bottom: 20px;
+
+        &:hover {
+
+            .menu-icon,
+            .menu-name {
+                color: #409EFF;
+            }
+        }
+    }
+
+    .menu-icon {
+        font-size: 48px;
+        margin-bottom: 10px;
+    }
+
+    .menu-name {
+        font-size: 14px;
+    }
+}
+</style>
 \ No newline at end of file
@@ -11,6 +11,7 @@ import { messages as downloadTempFileMessages } from &#39;../views/system/downloadTe
 import { messages as assetImportLogMessages } from '../views/system/assetImportLogLang'
 import { messages as assetImportLogDetailMessages } from '../views/system/assetImportLogDetailLang'
 import { messages as payFeeQrcodeMessages } from '../views/fee/payFeeQrcodeLang'
+import { messages as menuUserManageMessages } from '../views/system/menuUserManageLang'
  
 export const messages = {
     en: {
@@ -27,6 +28,7 @@ export const messages = {
         ...assetImportLogMessages.en,
         ...assetImportLogDetailMessages.en,
         ...payFeeQrcodeMessages.en,
+        ...menuUserManageMessages.en,
     },
     zh: {
         ...communitySettingManageMessages.zh,
@@ -42,5 +44,6 @@ export const messages = {
         ...assetImportLogMessages.zh,
         ...assetImportLogDetailMessages.zh,
         ...payFeeQrcodeMessages.zh,
+        ...menuUserManageMessages.zh,
     }
 }
 \ No newline at end of file
@@ -74,4 +74,9 @@ export default [
         name: '/pages/fee/payFeeQrcode',
         component: () => import('@/views/fee/payFeeQrcodeList.vue')
     },
+    {
+        path: '/views/system/menuUserManage',
+        name: '/views/system/menuUserManage',
+        component: () => import('@/views/system/menuUserManageList.vue')
+    },
 ]
 \ No newline at end of file
@@ -71,6 +71,8 @@
       </el-main>
     </el-container>
     <more-community ref="moreCommunity" />
+    <view-menu-user-list ref="viewMenuUserModel" />
+    <search-community-data-list ref="searchCommunityDataModel" />
   </el-container>
 </template>
  
@@ -80,6 +82,8 @@ import { getStoreInfo } from &quot;@/api/user/indexApi&quot;
 import { deepCopy, setCurrentCommunity } from "@/utils/vc"
 import { getCommunityName, _loadCommunityInfo } from '@/api/community/communityApi'
 import moreCommunity from '@/components/community/moreCommunity.vue'
+import viewMenuUserList from '@/components/system/viewMenuUserList.vue'
+import searchCommunityDataList from '@/components/system/searchCommunityDataList.vue'
  
 export default {
   name: 'Layout',
@@ -113,7 +117,9 @@ export default {
     this.loadCommunity()
   },
   components: {
-    moreCommunity
+    moreCommunity,
+    viewMenuUserList,
+    searchCommunityDataList
   },
   methods: {
     async loadCommunity() {
@@ -152,7 +158,9 @@ export default {
     },
     _changeMenuCatalog(_catalog, _isJump) {
       this.activeMenu = _catalog.caId;
-
+      if (this._showModelDiv(_catalog)) {
+        return;
+      }
       if (_catalog.caId === '1') {
         this.$router.push('/#/pages/mall/product');
       }
@@ -172,7 +180,7 @@ export default {
       }
       this.loadMenuTree(_catalog)
     },
-  
+
     handleCommand(command) {
       if (command === 'logout') {
         // 处理退出登录
@@ -260,7 +268,7 @@ export default {
       console.log(_href, _tabName)
       // 子菜单默认选中
       this._setSelectedMenusChild(_href);
-      if(_href.indexOf('.html') > -1){
+      if (_href.indexOf('.html') > -1) {
         window.open(_href, '_blank')
         return
       }
@@ -275,7 +283,16 @@ export default {
         }
       })
     },
-   
+    _showModelDiv: function (_catalog) {
+      console.log(_catalog)
+      if (_catalog.url.startsWith('?')) {
+        let _modelName = _catalog.url.substring(1, _catalog.url.length);
+        this.$refs[_modelName].open()
+        return true;
+      }
+      return false;
+    }
+
   }
 }
 </script>
@@ -185,7 +185,7 @@ export default {
       this.$refs.viewImage.open(url)
     },
     openStaffDetail(staff) {
-      this.$router.push(`/staff/staffDetail?staffId=${staff.staffId}`)
+      this.$router.push(`/views/staff/staffDetail?staffId=${staff.staffId}`)
     },
     handleSizeChange(val) {
       this.page.size = val
+export const messages = {
+  en: {
+    menuUserManage: {
+      search: {
+        title: 'Search Conditions',
+        muId: 'Please enter ID',
+        name: 'Please enter menu name',
+        seq: 'Please enter sequence'
+      },
+      list: {
+        title: 'Common Menu'
+      },
+      table: {
+        muId: 'ID',
+        name: 'Menu',
+        icon: 'Icon',
+        seq: 'Sequence'
+      },
+      add: {
+        title: 'Add Menu',
+        menu: 'Menu',
+        menuPlaceholder: 'Required, please select menu',
+        icon: 'Icon',
+        seq: 'Sequence',
+        seqPlaceholder: 'Required, please enter sequence',
+        success: 'Add success',
+        error: 'Add failed'
+      },
+      delete: {
+        title: 'Confirm Operation',
+        confirm: 'Are you sure to delete this menu?',
+        success: 'Delete success',
+        error: 'Delete failed'
+      },
+      validate: {
+        menuRequired: 'Menu is required',
+        iconRequired: 'Icon is required',
+        seqRequired: 'Sequence is required'
+      },
+      fetchError: 'Failed to fetch menu data'
+    }
+  },
+  zh: {
+    menuUserManage: {
+      search: {
+        title: '查询条件',
+        muId: '请输入编号',
+        name: '请输入菜单',
+        seq: '请输入列顺序'
+      },
+      list: {
+        title: '常用菜单'
+      },
+      table: {
+        muId: '编号',
+        name: '菜单',
+        icon: '图标',
+        seq: '顺序'
+      },
+      add: {
+        title: '添加菜单',
+        menu: '菜单',
+        menuPlaceholder: '必填，请选择菜单',
+        icon: '图标',
+        seq: '列顺序',
+        seqPlaceholder: '必填，请填写列顺序',
+        success: '添加成功',
+        error: '添加失败'
+      },
+      delete: {
+        title: '请确认您的操作',
+        confirm: '确定删除常用菜单?',
+        success: '删除成功',
+        error: '删除失败'
+      },
+      validate: {
+        menuRequired: '菜单不能为空',
+        iconRequired: '图标不能为空',
+        seqRequired: '列顺序不能为空'
+      },
+      fetchError: '获取菜单数据失败'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="menu-user-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('menuUserManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.muId" :placeholder="$t('menuUserManage.search.muId')" clearable
+            @keyup.enter.native="handleSearch" />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="searchForm.name" :placeholder="$t('menuUserManage.search.name')" clearable
+            @keyup.enter.native="handleSearch" />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="searchForm.seq" :placeholder="$t('menuUserManage.search.seq')" clearable
+            @keyup.enter.native="handleSearch" />
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">{{ $t('common.search') }}</el-button>
+          <el-button @click="handleReset">{{ $t('common.reset') }}</el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 常用菜单列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('menuUserManage.list.title') }}</span>
+        <el-button type="primary" size="small" class="float-right" @click="handleAdd">
+          <i class="el-icon-plus"></i> {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="muId" :label="$t('menuUserManage.table.muId')" align="center" />
+        <el-table-column prop="name" :label="$t('menuUserManage.table.name')" align="center" />
+        <el-table-column :label="$t('menuUserManage.table.icon')" align="center">
+          <template slot-scope="scope">
+            <i :class="scope.row.icon"></i>
+          </template>
+        </el-table-column>
+        <el-table-column prop="seq" :label="$t('menuUserManage.table.seq')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 添加菜单弹窗 -->
+    <add-menu-user ref="addMenuUser" @success="handleSuccess" />
+
+    <!-- 删除菜单确认弹窗 -->
+    <delete-menu-user ref="deleteMenuUser" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listMenuUser } from '@/api/system/menuUserManageApi'
+import AddMenuUser from '@/components/system/addMenuUser'
+import DeleteMenuUser from '@/components/system/deleteMenuUser'
+
+export default {
+  name: 'MenuUserManageList',
+  components: {
+    AddMenuUser,
+    DeleteMenuUser
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        muId: '',
+        name: '',
+        seq: ''
+      },
+      tableData: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          ...this.searchForm
+        }
+        const { data, total } = await listMenuUser(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('menuUserManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        muId: '',
+        name: '',
+        seq: ''
+      }
+      this.handleSearch()
+    },
+    handleAdd() {
+      this.$refs.addMenuUser.open()
+    },
+    handleDelete(row) {
+      this.$refs.deleteMenuUser.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-user-manage-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-row {
+      margin-bottom: -20px;
+    }
+
+    .el-col {
+      margin-bottom: 20px;
+    }
+  }
+
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
 \ No newline at end of file
@@ -17,7 +17,27 @@ export const messages = {
       required: '{field} is required',
       maxLength: '{field} cannot exceed {length} characters',
       fetchError: 'Failed to fetch system information'
+    },
+    searchCommunityData: {
+      title: 'Search',
+      placeholder: 'Please enter house number, owner name, car number or family member name, etc.',
+      callInNumber: 'Calling number',
+      noData: 'Sorry, no data available',
+      inputTip: 'Please enter search criteria',
+      telNotConnected: 'Fixed telephone not connected',
+      noCallInNumber: 'No calling number returned from the telephone',
+      roomInfo: 'Room Information',
+      ownerInfo: 'Owner Information',
+      ownerMember: 'Owner Member',
+      communityCar: 'Community Vehicle',
+      memberCar: 'Member Vehicle',
+      contract: 'Contract',
+      repairOrder: 'Repair Order',
+      visitor: 'Visitor',
+      staff: 'Staff',
+      roomPlaceholder: 'Please enter room number like building-unit-room, e.g. 1-1-1'
     }
+    
   },
   zh: {
     systemInfo: {
@@ -37,6 +57,25 @@ export const messages = {
       required: '{field}不能为空',
       maxLength: '{field}不能超过{length}个字符',
       fetchError: '获取系统信息失败'
+    },
+    searchCommunityData: {
+      title: '搜索',
+      placeholder: '请输入房屋编号，业主名称，车辆编号或者家庭成员名称等',
+      callInNumber: '通话中号码',
+      noData: '抱歉，没有数据',
+      inputTip: '请输入查询条件',
+      telNotConnected: '未连接固定电话',
+      noCallInNumber: '座机未返回通话中号码',
+      roomInfo: '房屋信息',
+      ownerInfo: '业主信息',
+      ownerMember: '业主成员',
+      communityCar: '小区车辆',
+      memberCar: '成员车辆',
+      contract: '合同',
+      repairOrder: '报修工单',
+      visitor: '访客',
+      staff: '员工',
+      roomPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
     }
   }
 }
 \ No newline at end of file