feat: 权限设置静态交互主体完成
parent
bf96269ef4
commit
1f2db187a5
@ -0,0 +1,18 @@
|
||||
// 最小化
|
||||
export const clientMinimizeWeb = () => {
|
||||
electron.ipcRenderer.invoke('renderer-to-main', {
|
||||
name: 'min-win'
|
||||
})
|
||||
}
|
||||
// 最大化
|
||||
export const clientMaximizeWeb = () => {
|
||||
electron.ipcRenderer.invoke('renderer-to-main', {
|
||||
name: 'max-win'
|
||||
})
|
||||
}
|
||||
// 关闭
|
||||
export const clientCloseWeb = () => {
|
||||
electron.ipcRenderer.invoke('renderer-to-main', {
|
||||
name: 'win-close'
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,262 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-04 10:36:19
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-07 17:29:54
|
||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\Settings\permission.vue
|
||||
* @Description: 权限设置
|
||||
3、完善交互效果
|
||||
-->
|
||||
<template>
|
||||
<div class="settings_permission_wrap">
|
||||
<el-form
|
||||
style="max-width: 472px"
|
||||
:model="formData"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
size="default"
|
||||
>
|
||||
<div>
|
||||
<div class="el-form-item--label-top">
|
||||
<div class="el-form-item__label">
|
||||
<span>权限导入导出</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<el-form-item label="" class="mr-[8px]">
|
||||
<el-button :type="formData?.import ? 'primary' : ''" @click="handleImport"
|
||||
>导入</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button :type="formData?.export ? 'primary' : ''" @click="handleExport"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="">
|
||||
<span>{{ formData.encryption ? '开启' : '关闭' }}加密</span>
|
||||
<el-switch v-model="formData.encryption" class="pl-[12px]" />
|
||||
</el-form-item>
|
||||
<div v-if="formData.encryption">
|
||||
<el-form-item label="修改管理员密码">
|
||||
<el-button @click="handleUpdatePassword">修改密码</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="技术员权限">
|
||||
<el-switch v-model="formData.technicianPermission" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="技术员密码">
|
||||
<el-input
|
||||
v-model="formData.technicianPassword"
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="技术员权限配置">
|
||||
<el-button @click="() => (showPermissionDialog = true)">配置</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作员权限">
|
||||
<el-switch v-model="formData.operatorPermission" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="操作员密码">
|
||||
<el-input
|
||||
v-model="formData.operatorPassword"
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作员使能">
|
||||
<el-switch v-model="formData.operatorEnabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 修改管理员密码 -->
|
||||
<el-dialog
|
||||
align-center
|
||||
v-model="showTechnicianPswDialog"
|
||||
width="520"
|
||||
@close="showTechnicianPswDialog = false"
|
||||
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="p-[24px]">
|
||||
<el-form
|
||||
ref="updatePswFormRef"
|
||||
style="max-width: 472px"
|
||||
:model="updatePswFromData"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
size="default"
|
||||
:rules="pswFormRules"
|
||||
>
|
||||
<el-form-item label="设置密码" prop="pass">
|
||||
<el-input v-model="updatePswFromData.pass" type="password" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input v-model="updatePswFromData.checkPass" type="password" autocomplete="off" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer mr-[24px] pb-[24px] pt-[16px]">
|
||||
<el-button type="info" size="default" @click="resetPswFromData(updatePswFormRef)" class=""
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="default"
|
||||
@click="submitUpdatePswForm(updatePswFormRef)"
|
||||
class=""
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- //TODO 配置操作员权限 -->
|
||||
<el-dialog
|
||||
align-center
|
||||
v-model="showPermissionDialog"
|
||||
width="520"
|
||||
@close="showPermissionDialog = false"
|
||||
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="p-[24px]">
|
||||
<el-form
|
||||
style="max-width: 472px"
|
||||
:model="permissionFromData"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
size="default"
|
||||
>
|
||||
<el-form-item label="选择开放给技术员的工具权限" prop="pass">
|
||||
<el-checkbox label="所有权限"></el-checkbox>
|
||||
<!-- <el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>
|
||||
</el-checkbox> -->
|
||||
<!-- @change="handleCheckedPermissionChange" -->
|
||||
<el-checkbox-group v-model="permissionFromData.permission" >
|
||||
<el-checkbox
|
||||
v-for="v in ['权限1', '权限2', '权限3', '权限4', '权限5']"
|
||||
:key="v"
|
||||
:label="v"
|
||||
:value="v"
|
||||
>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer mr-[24px] pb-[24px] pt-[16px]">
|
||||
<el-button type="info" size="default" @click="resetPermission()" class="">取消</el-button>
|
||||
<el-button type="primary" size="default" @click="submitPermission()" class=""
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const formData = reactive({
|
||||
import: false, // 导入权限
|
||||
export: false, // 导出权限
|
||||
encryption: false, // 关闭加密权限
|
||||
technicianPermission: false, // 技术员权限
|
||||
technicianPassword: '', // 技术员密码
|
||||
operatorPermission: false, // 操作员权限
|
||||
operatorPassword: '', // 操作员密码
|
||||
operatorEnabled: true
|
||||
})
|
||||
|
||||
const showTechnicianPswDialog = ref<boolean>(false) // 技术员密码弹窗
|
||||
|
||||
const updatePswFormRef = ref<FormInstance>() // 技术员密码表单
|
||||
const updatePswFromData = reactive({
|
||||
pass: '',
|
||||
checkPass: ''
|
||||
})
|
||||
|
||||
const showPermissionDialog = ref<boolean>(false) // 操作员权限弹窗
|
||||
const permissionFromData = reactive({
|
||||
permission: [],
|
||||
})
|
||||
|
||||
/**管理员重置密码 */
|
||||
const validatePass = (rule: any, value: any, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
if (updatePswFromData.checkPass !== '') {
|
||||
if (!updatePswFormRef.value) return
|
||||
updatePswFormRef.value.validateField('checkPass')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass2 = (rule: any, value: any, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== updatePswFromData.pass) {
|
||||
callback(new Error('两次密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const pswFormRules = reactive<FormRules<typeof updatePswFromData>>({
|
||||
pass: [{ validator: validatePass, trigger: 'blur' }],
|
||||
checkPass: [{ validator: validatePass2, trigger: 'blur' }]
|
||||
})
|
||||
|
||||
const handleUpdatePassword = () => {
|
||||
console.log('Technician Config')
|
||||
showTechnicianPswDialog.value = true
|
||||
}
|
||||
|
||||
const submitUpdatePswForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetPswFromData = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
|
||||
/**导入、导出 */
|
||||
|
||||
const handleImport = () => {
|
||||
console.log('Import')
|
||||
formData.import = !formData.import
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
console.log('Export')
|
||||
formData.export = !formData.export
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
方案设置
|
||||
</div>
|
||||
</template>
|
||||
@ -1,58 +1,53 @@
|
||||
.settings-dialog {
|
||||
/* Your dialog styles */
|
||||
|
||||
background-color: #363940 !important;
|
||||
height: 736px;
|
||||
// background-color: #363940 !important;
|
||||
|
||||
background-color: #2d3a4b;
|
||||
|
||||
.settings-container {
|
||||
display: flex;
|
||||
height: 400px; /* Adjust as needed */
|
||||
}
|
||||
|
||||
.settings-sidebar {
|
||||
width: 200px;
|
||||
background-color: #2d3a4b; /* Dark background */
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sidebar-item:hover,
|
||||
.sidebar-item.active {
|
||||
background-color: #3c4b64;
|
||||
}
|
||||
|
||||
.sidebar-item .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-group .el-button {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
min-height: 632px;
|
||||
}
|
||||
|
||||
.settings-sidebar {
|
||||
width: 120px;
|
||||
padding: 24px;
|
||||
}
|
||||
.settings-line {
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
width: 1px;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.sidebar-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.3;
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// .sidebar-item:hover,
|
||||
// .sidebar-item.active {
|
||||
// background-color: #3c4b64;
|
||||
// }
|
||||
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
padding: 24px 24px 12px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
软件设置
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,13 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-04 10:57:20
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-04 10:58:12
|
||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\Settings\strategy.vue
|
||||
* @Description: 运行策略
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
运行策略
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue