|
|
|
|
@ -2,179 +2,134 @@
|
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
|
* @Date: 2025-07-03 11:12:04
|
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
|
* @LastEditTime: 2025-07-03 15:38:41
|
|
|
|
|
* @LastEditTime: 2025-07-07 15:51:03
|
|
|
|
|
* @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Settings\setPermissions.vue
|
|
|
|
|
* @Description: 设置权限
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="设置"
|
|
|
|
|
v-model="dialogVisible"
|
|
|
|
|
align-center
|
|
|
|
|
v-model="show"
|
|
|
|
|
width="800"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
:destroy-on-close="true"
|
|
|
|
|
:show-close="true"
|
|
|
|
|
@close="handleClose"
|
|
|
|
|
class="settings-dialog design-dialog"
|
|
|
|
|
>
|
|
|
|
|
<!-- 自定义标题栏 -->
|
|
|
|
|
<template #header="{ close, titleId, titleClass }">
|
|
|
|
|
<div class="flex items-center justify-between h-full dialog-header pl-[24px]">
|
|
|
|
|
<p class="overflow-hidden whitespace-nowrap text-ellipsis">设置</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="settings-container">
|
|
|
|
|
<div class="settings-sidebar">
|
|
|
|
|
<div
|
|
|
|
|
class="sidebar-item"
|
|
|
|
|
:class="{ active: activeTab === 'permission' }"
|
|
|
|
|
@click="setActiveTab('permission')"
|
|
|
|
|
>
|
|
|
|
|
<el-icon><Setting /></el-icon>
|
|
|
|
|
权限设置
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="sidebar-item"
|
|
|
|
|
:class="{ active: activeTab === 'software' }"
|
|
|
|
|
@click="setActiveTab('software')"
|
|
|
|
|
>
|
|
|
|
|
<el-icon><Edit /></el-icon>
|
|
|
|
|
软件设置
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="sidebar-item"
|
|
|
|
|
:class="{ active: activeTab === 'plan' }"
|
|
|
|
|
@click="setActiveTab('plan')"
|
|
|
|
|
>
|
|
|
|
|
<el-icon><Document /></el-icon>
|
|
|
|
|
方案设置
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="sidebar-item"
|
|
|
|
|
:class="{ active: activeTab === 'strategy' }"
|
|
|
|
|
@click="setActiveTab('strategy')"
|
|
|
|
|
class="flex flex-col items-center justify-center sidebar-item"
|
|
|
|
|
:class="{ active: activeTab === v.value }"
|
|
|
|
|
@click="setActiveTab(v)"
|
|
|
|
|
v-for="(v, k) in settings"
|
|
|
|
|
:key="k"
|
|
|
|
|
>
|
|
|
|
|
<el-icon><VideoPlay /></el-icon>
|
|
|
|
|
运行策略
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-content">
|
|
|
|
|
<div v-if="activeTab === 'permission'">
|
|
|
|
|
<ThemeSwitcher />
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="mb-0 section-title">权限导入导出</div>
|
|
|
|
|
<div class="button-group">
|
|
|
|
|
<el-button @click="handleImport">导入</el-button>
|
|
|
|
|
<el-button @click="handleExport">导出</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center section">
|
|
|
|
|
<div class="section-title">关闭加密</div>
|
|
|
|
|
<el-switch v-model="closeEncryption" class="pl-[12px]" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="section-title">修改管理员密码</div>
|
|
|
|
|
<el-button type="primary" @click="handleChangePassword"> 修改密码 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="section-title">技术员权限</div>
|
|
|
|
|
<el-switch v-model="technicianPermission" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="section-title">技术员密码</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="technicianPassword"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
type="password"
|
|
|
|
|
show-password
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="section-title">技术员权限配置</div>
|
|
|
|
|
<el-button @click="handleTechnicianConfig">配置</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="section-title">操作员权限</div>
|
|
|
|
|
<el-switch v-model="operatorPermission" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex section">
|
|
|
|
|
<div class="section-title">操作员密码</div>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="operatorPassword"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
type="password"
|
|
|
|
|
show-password
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="section">
|
|
|
|
|
<div class="section-title">操作员使能</div>
|
|
|
|
|
<el-switch v-model="operatorEnabled" />
|
|
|
|
|
<!-- // TODO 替换icon -->
|
|
|
|
|
<img src="@/assets/electron.svg" alt="" class="w-[32px]" />
|
|
|
|
|
<span>{{ v.label }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-line"></div>
|
|
|
|
|
<ul class="settings-content">
|
|
|
|
|
<li v-if="activeTab === 'permission'">
|
|
|
|
|
<Permission />
|
|
|
|
|
</li>
|
|
|
|
|
<!-- Add other tabs' content here -->
|
|
|
|
|
<div v-if="activeTab === 'software'">
|
|
|
|
|
<li v-if="activeTab === 'software'">
|
|
|
|
|
<p>Software Settings Content</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="activeTab === 'plan'">
|
|
|
|
|
</li>
|
|
|
|
|
<li v-if="activeTab === 'plan'">
|
|
|
|
|
<p>Plan Settings Content</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="activeTab === 'strategy'">
|
|
|
|
|
</li>
|
|
|
|
|
<li v-if="activeTab === 'strategy'">
|
|
|
|
|
<p>Strategy Settings Content</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
|
|
|
<span class="pt-0 dialog-footer">
|
|
|
|
|
<el-button type="primary" size="default" @click="handleConfirm" class="mr-[24px] mb-[24px]"
|
|
|
|
|
>确定</el-button
|
|
|
|
|
>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
|
|
|
|
|
const dialogVisible = ref<boolean>(false) // Assuming you have a v-model to control the dialog's visibility
|
|
|
|
|
const activeTab = ref('permission')
|
|
|
|
|
|
|
|
|
|
// Data Bindings
|
|
|
|
|
const closeEncryption = ref(false)
|
|
|
|
|
const technicianPermission = ref(false)
|
|
|
|
|
const technicianPassword = ref('')
|
|
|
|
|
const operatorPermission = ref(false)
|
|
|
|
|
const operatorPassword = ref('')
|
|
|
|
|
const operatorEnabled = ref(true)
|
|
|
|
|
|
|
|
|
|
// Methods
|
|
|
|
|
const setActiveTab = (tab: string) => {
|
|
|
|
|
activeTab.value = tab
|
|
|
|
|
// import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
|
|
|
|
|
import Permission from './permission.vue'
|
|
|
|
|
interface Props {
|
|
|
|
|
/** 弹窗显隐 */
|
|
|
|
|
value: boolean
|
|
|
|
|
info: Record<string, any>
|
|
|
|
|
image: any
|
|
|
|
|
}
|
|
|
|
|
interface Emits {
|
|
|
|
|
(e: 'update:value', val: boolean): void
|
|
|
|
|
}
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
|
|
value: false
|
|
|
|
|
})
|
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
|
|
|
|
|
|
// 处理对话框关闭事件
|
|
|
|
|
const handleClose = () => {
|
|
|
|
|
// emits('close');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleImport = () => {
|
|
|
|
|
console.log('Import')
|
|
|
|
|
// Implement import logic here
|
|
|
|
|
const show = computed({
|
|
|
|
|
get() {
|
|
|
|
|
return props.value
|
|
|
|
|
},
|
|
|
|
|
set(val: boolean) {
|
|
|
|
|
emit('update:value', val)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const activeTab = ref('permission')
|
|
|
|
|
|
|
|
|
|
const handleExport = () => {
|
|
|
|
|
console.log('Export')
|
|
|
|
|
// Implement export logic here
|
|
|
|
|
interface SettingItem {
|
|
|
|
|
label: string
|
|
|
|
|
value: string // 可以是路由地址或者其他唯一标识
|
|
|
|
|
icon?: string // 可选的图标类名或URL
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleChangePassword = () => {
|
|
|
|
|
console.log('Change Password')
|
|
|
|
|
// Implement change password logic here
|
|
|
|
|
const settings: SettingItem[] = [
|
|
|
|
|
{
|
|
|
|
|
label: '权限设置',
|
|
|
|
|
value: 'permission',
|
|
|
|
|
icon: 'fa fa-cog' // 或者自定义的图标类名
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '软件设置',
|
|
|
|
|
value: 'software',
|
|
|
|
|
icon: 'fa fa-file-code-o' // 或者自定义的图标类名
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '方案设置',
|
|
|
|
|
value: 'scheme',
|
|
|
|
|
icon: 'fa fa-clipboard' // 或者自定义的图标类名
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '运行策略',
|
|
|
|
|
value: 'strategy',
|
|
|
|
|
icon: 'fa fa-play-circle-o' // 或者自定义的图标类名
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const handleTechnicianConfig = () => {
|
|
|
|
|
console.log('Technician Config')
|
|
|
|
|
// Implement technician configuration logic here
|
|
|
|
|
const setActiveTab = (tab: SettingItem) => {
|
|
|
|
|
activeTab.value = tab.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleConfirm = () => {
|
|
|
|
|
console.log('Confirm')
|
|
|
|
|
// Implement confirm logic here (e.g., save the changes)
|
|
|
|
|
dialogVisible.value = false // Close the dialog
|
|
|
|
|
show.value = false // Close the dialog
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
