语音管理员配置

src/router/modules/operateRutes.js

@@ -42,11 +42,19 @@ export default [{
         },
     },{
         path: "etaMenuConfig",
-        component: () => import("@/views/operation_manage//etaMenu_manage/etaMenuConfig.vue"),
+        component: () => import("@/views/operation_manage/etaMenu_manage/etaMenuConfig.vue"),
         name: "etaMenuConfig",
         hidden: false,
         meta: {
             title: "ETA菜单配置",
         },
+    },{
+        path: "voiceManage",
+        component: () => import("@/views/operation_manage/voice_manage/voiceManage.vue"),
+        name: "voiceManage",
+        hidden: false,
+        meta: {
+            title: "语音播报管理",
+        },
     }]
 }];

src/views/operation_manage/voice_manage/components/voicePlate.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, reactive } from 'vue'
+</script>
+
+<template>
+    <div>
+        板块配置
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/operation_manage/voice_manage/components/voiceRole.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref, reactive } from 'vue'
+import { QuestionFilled } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { interactiveInterface } from '@/api/api'
+
+let select_users = ref('')
+let userList = ref([])
+async function getAllDepart(){
+    const res=await interactiveInterface.allUserList()
+    if(res.Ret===200){
+        userList.value=res.Data.List||[]
+    }
+}
+getAllDepart()
+
+function handleSetAuth(){
+    if(!select_users.value.length>0) return ElMessage.warning('请选择用户')
+    interactiveInterface.setMessageAuth({
+        RoleTypeCode:'yb_voice_admin',
+        AdminIds: select_users.value.join(',')
+    }).then(res => {
+        if(res.Ret !== 200) return
+        getTableList()
+        select_users.value = []
+    })
+}
+
+let tableData = ref([{}])
+const tableColumns = [
+    {key:'RealName',label:'姓名'},
+    {key:'Mobile',label:'手机号'},
+    {key:'RoleName',label:'角色'},
+    {key:'DepartmentGroup',label:'部门/分组',minWidth:'180'},
+    {key:'Enabled',label:'状态'},
+]
+let tableParams = reactive({
+    pageNo:1,
+    pageSize:10,
+    totals:0
+})
+function handleCurrentChange(page){
+    tableParams.pageNo = page
+    getTableData()
+}
+async function getTableData(){
+    const res=await interactiveInterface.messageManageList({
+        RoleTypeCode:'yb_voice_admin',
+        CurrentIndex: tableParams.pageNo,
+        PageSize:tableParams.pageSize
+    })
+    if(res.Ret !== 200) return
+
+    const { List,Paging } = res.Data;
+
+    tableData.value = List || [];
+    tableParams.totals = Paging.Totals;
+}
+getTableData()
+
+function handleDel({ SysRoleAdminId }){
+    ElMessageBox.confirm('确认删除吗？','提示',{
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(()=>{
+        interactiveInterface.delMessageAuth({ SysRoleAdminId }).then(res=>{
+            if(res.Ret!==200) return 
+            ElMessage.success('删除成功')
+            handleCurrentChange(1)
+        })
+    }).catch(()=>{})
+}
+</script>
+
+<template>
+    <div class="voice-role-wrap">
+        <div class="voice-role-header">
+            <el-cascader
+                v-model="select_users"
+                placeholder="请选择用户"
+                style="width: 230px"
+                :options="userList"
+                :props="{
+                    label: 'RealName',
+                    value: 'AdminId', 
+                    children: 'ChildrenList',
+                    emitPath: false,
+                    multiple: true
+                }"
+                :show-all-levels="false"
+                collapse-tags
+                clearable
+                filterable
+            />
+            <el-button type="primary" style="margin-left:30px" @click="handleSetAuth">配置权限</el-button>
+        </div>
+        <div class="voice-role-table">
+            <el-table :data="tableData" border>
+                <el-table-column v-for="column in tableColumns" :key="column.key" 
+                    :label="column.label" 
+                    :prop="column.key" 
+                    :min-width="column.minWidth"
+                    align="center">
+                    <template #default="{row}">
+                        <span v-if="column.key==='Enabled'" :style="{color:row.Enabled===1?'':'#ef0000'}">{{row.Enabled===1?'启用':'禁用'}}</span>
+                        <span v-else>{{ row[column.key] }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center">
+                    <template #header>
+                        <el-tooltip 
+                            effect="dark" 
+                            content="此项删除只删除该用户的语音管理员权限" 
+                            placement="top-start"
+                        >   
+                            <div style="display: flex;align-items: center;justify-content: center;">
+                                <span>操作</span>
+                                <el-icon><QuestionFilled /></el-icon>
+                            </div>
+                        </el-tooltip>
+                    </template>
+                    <template #default="{row}">
+                        <span style="color:#ef0000;cursor: pointer;" @click="handleDel(row)">删除</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                layout="total,prev,pager,next,jumper"
+                background
+                :current-page="tableParams.pageNo"
+                :page-size="tableParams.pageSize"
+                :total="tableParams.totals"
+                style="margin-top: 20px;display: flex;justify-content: flex-end;"
+                @current-change="handleCurrentChange"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.voice-role-wrap{
+    .voice-role-table{
+        .el-table{
+            margin:20px 0;
+        }
+    }
+}
+</style>

src/views/operation_manage/voice_manage/voiceManage.vue

@@ -0,0 +1,41 @@
+<script setup>
+//语音播报管理
+import { ref, reactive} from 'vue'
+import voiceRole from './components/voiceRole.vue'
+import voicePlate from './components/voicePlate.vue'
+let tabActive = ref('voiceRole') // voiceRole语音管理员配置  voicePlate版块配置
+</script>
+
+<template>
+    <div class="voice-manage-page">
+        <div class="top-tab-box">
+            <span :class="tabActive=='voiceRole'?'active':''" @click="tabActive='voiceRole'">语音管理员配置</span>
+            <span :class="tabActive=='voicePlate'?'active':''" @click="tabActive='voicePlate'">版块配置</span>
+        </div>
+        <component :is="tabActive=='voiceRole'?voiceRole:voicePlate"></component>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.voice-manage-page{
+    background: #fff;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+    padding: 30px;
+    min-height: 80vh;
+    .top-tab-box{
+        margin-bottom: 30px;
+        span{
+            font-size: 16px;
+            margin-right: 50px;
+            cursor: pointer;
+            padding-bottom: 5px;
+        }
+        .active{
+            color: #409EFF;
+            border-bottom: 2px solid #409EFF;
+        }
+    }
+}
+</style>