mirror of
https://github.com/snltty/linker.git
synced 2025-12-18 17:36:45 +08:00
111 lines
4.6 KiB
Vue
111 lines
4.6 KiB
Vue
<template>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-checkbox v-model="state.checkAll" @change="handleCheckAllChange" label="全选" :indeterminate="state.isIndeterminate" />
|
|
</el-col>
|
|
<el-col :span="8" v-if="globalData.config.Client.FullAccess">
|
|
<el-checkbox v-model="state.full" ><span class="red">满权限(顶级管理权)</span></el-checkbox>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="access-wrap scrollbar" :style="{height:`${state.height}rem`}">
|
|
<el-checkbox-group v-model="state.checkList" @change="handleCheckedChange">
|
|
<el-row>
|
|
<template v-for="(item,index) in access" :key="index">
|
|
<el-col :xs="12" :sm="8">
|
|
<el-checkbox :value="item.Value" :label="item.Text" />
|
|
</el-col>
|
|
</template>
|
|
</el-row>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { computed, onMounted, reactive } from 'vue';
|
|
import { injectGlobalData } from '@/provide';
|
|
import { useAccess } from './access';
|
|
export default {
|
|
props:['machineid','height'],
|
|
setup(props) {
|
|
|
|
const globalData = injectGlobalData();
|
|
const allAccess = useAccess();
|
|
const access = computed(()=>{
|
|
const json = globalData.value.config.Client.Accesss;
|
|
return Object.keys(json).reduce((arr,key,index)=>{
|
|
if(globalData.value.hasAccess(key)){
|
|
const value = json[key];
|
|
value.Key = key;
|
|
arr.push(value);
|
|
}
|
|
return arr;
|
|
},[]);
|
|
});
|
|
|
|
const state = reactive({
|
|
height:props.height || 50,
|
|
checkList: [
|
|
globalData.value.config.Client.Accesss.Api.Value,
|
|
globalData.value.config.Client.Accesss.Web.Value,
|
|
globalData.value.config.Client.Accesss.NetManager.Value,
|
|
globalData.value.config.Client.Accesss.FullManager.Value,
|
|
globalData.value.config.Client.Accesss.Transport.Value,
|
|
globalData.value.config.Client.Accesss.RenameSelf.Value,
|
|
globalData.value.config.Client.Accesss.UpdateSelf.Value,
|
|
globalData.value.config.Client.Accesss.TuntapStatusSelf.Value,
|
|
globalData.value.config.Client.Accesss.TuntapChangeSelf.Value,
|
|
globalData.value.config.Client.Accesss.ForwardShowSelf.Value,
|
|
globalData.value.config.Client.Accesss.ForwardSelf.Value,
|
|
globalData.value.config.Client.Accesss.TunnelChangeSelf.Value,
|
|
globalData.value.config.Client.Accesss.TunnelRemove.Value,
|
|
globalData.value.config.Client.Accesss.Action.Value,
|
|
globalData.value.config.Client.Accesss.Socks5StatusSelf.Value,
|
|
globalData.value.config.Client.Accesss.Socks5ChangeSelf.Value,
|
|
globalData.value.config.Client.Accesss.FirewallSelf.Value,
|
|
globalData.value.config.Client.Accesss.WakeupSelf.Value,
|
|
],
|
|
checkAll:false,
|
|
full:false,
|
|
isIndeterminate:false
|
|
});
|
|
|
|
const getValue = ()=>{
|
|
const arr = state.checkList.reduce((arr,item)=>{
|
|
arr[item] = '1';
|
|
return arr;
|
|
},[]);
|
|
for(let i = 0; i < arr.length;i++){
|
|
arr[i] = arr[i] || '0';
|
|
}
|
|
return [arr.join(''),state.full];
|
|
}
|
|
const handleCheckedChange = (value)=>{
|
|
const checkedCount = value.length;
|
|
state.checkAll = checkedCount === access.value.length;
|
|
state.isIndeterminate = checkedCount > 0 && checkedCount < access.value.length;
|
|
}
|
|
const handleCheckAllChange = (value)=>{
|
|
state.checkAll = value;
|
|
state.checkList = value ? access.value.map(item=>item.Value) : [];
|
|
state.isIndeterminate = false;
|
|
}
|
|
|
|
onMounted(()=>{
|
|
if(allAccess && allAccess.value.list[props.machineid]){
|
|
const res = allAccess.value.list[props.machineid];
|
|
state.checkList = access.value.reduce((arr,item)=>{
|
|
if(res[item.Value] == '1'){
|
|
arr.push(item.Value);
|
|
}
|
|
return arr;
|
|
},[]);
|
|
}
|
|
handleCheckedChange(state.checkList);
|
|
})
|
|
|
|
return {globalData,state,access,getValue,handleCheckAllChange,handleCheckedChange};
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
.el-col {text-align:left;}
|
|
</style> |