mirror of
https://gitee.com/vben/vben-web.git
synced 2026-10-06 06:12:56 +08:00
登录页增加演示账号
This commit is contained in:
zsvg
+102
-104
@@ -1,67 +1,67 @@
|
||||
<template>
|
||||
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
|
||||
<template #header>
|
||||
<div class='zjustify'>
|
||||
<div>
|
||||
<div style='line-height: 32px'>角色信息</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type='success' @click='save' plain>保 存</el-button>
|
||||
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div style='margin-top: 8px;margin-bottom: 8px'>
|
||||
<el-form ref='formRef' :inline='true' class='zform' :model='form' label-width='140px'>
|
||||
<el-tabs type='card' v-model='activeName'>
|
||||
<el-tab-pane label='基本信息' name='tab1'>
|
||||
<div class='zform-div'>
|
||||
<el-form-item label='角色名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]" style='width: 100%;'>
|
||||
<el-input v-model='form.name' />
|
||||
</el-form-item>
|
||||
<el-form-item label='指派用户：' prop='orgs' :rules="[{ required: true, message: '用户不能为空'}]" style='width: 100%;'>
|
||||
<el-input type='textarea' :rows='4' placeholder='这里可以选择用户，部门，岗位，群组或者外部协同公司与用户。权限都会生效' v-model='orgsName' readonly @click='openOrgsModal' />
|
||||
</el-form-item>
|
||||
<el-form-item label='排序号：'>
|
||||
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
|
||||
</el-form-item>
|
||||
<el-form-item label='是否可用：'>
|
||||
<el-switch v-model='form.avtag' />
|
||||
</el-form-item>
|
||||
<el-form-item label='备注：' style='width: 100%;'>
|
||||
<el-input type='textarea' :rows='4' v-model='form.notes' />
|
||||
</el-form-item>
|
||||
<div v-show='form.crtim'>
|
||||
<el-form-item label='创建人：' style='width: 25%'>
|
||||
<div class='zinput'>{{ form.crman ? form.crman.name : '' }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='创建时间：' style='width: 25%'>
|
||||
<div class='zinput'> {{ form.crtim }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='更新人：' style='width: 25%'>
|
||||
<div class='zinput'>{{ form.upman ? form.upman.name : '' }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='更新时间：' style='width: 25%'>
|
||||
<div class='zinput'> {{ form.uptim }}</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='接口分配' name='tab3'>
|
||||
<div style='margin-bottom: 10px'>
|
||||
<el-button @click='expandAll' plain>展 开</el-button>
|
||||
<el-button @click='collapseAll' plain>折 叠</el-button>
|
||||
<span style='margin-left: 10px;color: green'>按钮通过绑定接口授权</span>
|
||||
</div>
|
||||
<div style='border: 1px solid #eee'>
|
||||
<el-tree ref='treeRef' :data='treeData' show-checkbox node-key='id' :props="{children: 'children',label: 'name'}" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</div>
|
||||
<OrgModal ref='orgModal' @close='closeOrgModal' />
|
||||
</el-card>
|
||||
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
|
||||
<template #header>
|
||||
<div class='zjustify'>
|
||||
<div>
|
||||
<div style='line-height: 32px'>角色信息</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type='success' @click='save' plain>保 存</el-button>
|
||||
<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div style='margin-top: 8px;margin-bottom: 8px'>
|
||||
<el-form ref='formRef' :inline='true' class='zform' :model='form' label-width='140px'>
|
||||
<el-tabs type='card' v-model='activeName'>
|
||||
<el-tab-pane label='基本信息' name='tab1'>
|
||||
<div class='zform-div'>
|
||||
<el-form-item label='角色名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]" style='width: 100%;'>
|
||||
<el-input v-model='form.name' />
|
||||
</el-form-item>
|
||||
<el-form-item label='指派用户：' prop='orgs' :rules="[{ required: true, message: '用户不能为空'}]" style='width: 100%;'>
|
||||
<el-input type='textarea' :rows='4' placeholder='这里可以选择用户，部门，岗位，群组或者外部协同公司与用户。权限都会生效' v-model='orgsName' readonly @click='openOrgsModal' />
|
||||
</el-form-item>
|
||||
<el-form-item label='排序号：'>
|
||||
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%' />
|
||||
</el-form-item>
|
||||
<el-form-item label='是否可用：'>
|
||||
<el-switch v-model='form.avtag' />
|
||||
</el-form-item>
|
||||
<el-form-item label='备注：' style='width: 100%;'>
|
||||
<el-input type='textarea' :rows='4' v-model='form.notes' />
|
||||
</el-form-item>
|
||||
<div v-show='form.crtim'>
|
||||
<el-form-item label='创建人：' style='width: 25%'>
|
||||
<div class='zinput'>{{ form.crman ? form.crman.name : '' }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='创建时间：' style='width: 25%'>
|
||||
<div class='zinput'> {{ form.crtim }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='更新人：' style='width: 25%'>
|
||||
<div class='zinput'>{{ form.upman ? form.upman.name : '' }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='更新时间：' style='width: 25%'>
|
||||
<div class='zinput'> {{ form.uptim }}</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='接口分配' name='tab3'>
|
||||
<div style='margin-bottom: 10px'>
|
||||
<el-button @click='expandAll' plain>展 开</el-button>
|
||||
<el-button @click='collapseAll' plain>折 叠</el-button>
|
||||
<span style='margin-left: 10px;color: green'>按钮通过绑定接口授权</span>
|
||||
</div>
|
||||
<div style='border: 1px solid #eee'>
|
||||
<el-tree ref='treeRef' :data='treeData' show-checkbox node-key='id' :props="{children: 'children',label: 'name'}" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</div>
|
||||
<OrgModal ref='orgModal' @close='closeOrgModal' />
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang='ts'>
|
||||
export default { name: 'SysApiRoleEdit' };
|
||||
@@ -80,31 +80,31 @@ const { proxy } = getCurrentInstance() as any;
|
||||
const activeName = ref('tab1');
|
||||
|
||||
const state = reactive({
|
||||
url: '/sys/api/role',
|
||||
params: { path: '', query: '' },
|
||||
form: { avtag: true, apis: [] } as any,
|
||||
treeData: [] as any,
|
||||
url: '/sys/api/role',
|
||||
params: { path: '', query: '' },
|
||||
form: { avtag: true, apis: [] } as any,
|
||||
treeData: [] as any,
|
||||
});
|
||||
|
||||
const { form, treeData } = toRefs(state);
|
||||
|
||||
onMounted(async () => {
|
||||
await editInit({ state, route });
|
||||
await treeDataInit();
|
||||
await editInit({ state, route });
|
||||
await treeDataInit();
|
||||
|
||||
});
|
||||
|
||||
//region -----d 展开折叠逻辑-----
|
||||
const expandAll = () => {
|
||||
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
|
||||
treeRef.value!.store._getAllNodes()[i].expanded = true;
|
||||
}
|
||||
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
|
||||
treeRef.value!.store._getAllNodes()[i].expanded = true;
|
||||
}
|
||||
};
|
||||
|
||||
const collapseAll = () => {
|
||||
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
|
||||
treeRef.value!.store._getAllNodes()[i].expanded = false;
|
||||
}
|
||||
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
|
||||
treeRef.value!.store._getAllNodes()[i].expanded = false;
|
||||
}
|
||||
};
|
||||
//
|
||||
|
||||
@@ -112,15 +112,13 @@ const collapseAll = () => {
|
||||
//region -----c 保存逻辑-----
|
||||
const treeRef = ref();
|
||||
const save = async () => {
|
||||
const nodes = treeRef.value.getCheckedNodes();
|
||||
const apis = [];
|
||||
for (const node of nodes) {
|
||||
if(node.type){
|
||||
apis.push({ id: node.id, name: node.name });
|
||||
}
|
||||
}
|
||||
form.value.apis = apis;
|
||||
await tabSave({ formRef: formRef.value, state, proxy, route,flush:state.url });
|
||||
const nodes = treeRef.value.getCheckedNodes();
|
||||
const apis = [];
|
||||
for (const node of nodes) {
|
||||
apis.push({ id: node.id, name: node.name });
|
||||
}
|
||||
form.value.apis = apis;
|
||||
await tabSave({ formRef: formRef.value, state, proxy, route,flush:state.url });
|
||||
};
|
||||
//endregion
|
||||
|
||||
@@ -129,37 +127,37 @@ const save = async () => {
|
||||
const orgModal = ref();
|
||||
|
||||
const openOrgsModal = () => {
|
||||
orgModal.value.openModal({
|
||||
orgType: 31,
|
||||
coopType: 7,
|
||||
selectMode: 2,
|
||||
orgs: toRaw(form.value.orgs),
|
||||
});
|
||||
orgModal.value.openModal({
|
||||
orgType: 31,
|
||||
coopType: 7,
|
||||
selectMode: 2,
|
||||
orgs: toRaw(form.value.orgs),
|
||||
});
|
||||
};
|
||||
|
||||
const closeOrgModal = (data: any) => {
|
||||
form.value.orgs = data.orgs;
|
||||
form.value.orgs = data.orgs;
|
||||
};
|
||||
|
||||
const orgsName = computed(() => {
|
||||
let names = '';
|
||||
if (form.value.orgs && form.value.orgs.length > 0) {
|
||||
for (const user of form.value.orgs) {
|
||||
names += user.name + '；';
|
||||
}
|
||||
}
|
||||
return names;
|
||||
let names = '';
|
||||
if (form.value.orgs && form.value.orgs.length > 0) {
|
||||
for (const user of form.value.orgs) {
|
||||
names += user.name + '；';
|
||||
}
|
||||
}
|
||||
return names;
|
||||
});
|
||||
//endregion
|
||||
|
||||
//region -----b 菜单分配逻辑-----
|
||||
async function treeDataInit() {
|
||||
treeData.value = await request({ url: '/sys/api/main/tree', method: 'get' });
|
||||
const apis = [];
|
||||
for (const api of form.value.apis) {
|
||||
apis.push(api.id);
|
||||
}
|
||||
treeRef.value.setCheckedKeys(apis);
|
||||
treeData.value = await request({ url: '/sys/api/main/tree', method: 'get' });
|
||||
const apis = [];
|
||||
for (const api of form.value.apis) {
|
||||
apis.push(api.id);
|
||||
}
|
||||
treeRef.value.setCheckedKeys(apis);
|
||||
}
|
||||
|
||||
//endregion
|
||||
|
||||
@@ -19,7 +19,8 @@
|
||||
<span class="login-right-warp-two"></span>
|
||||
<div class="login-right-warp-mian">
|
||||
<div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您！</div>
|
||||
<div class="login-right-warp-main-form">
|
||||
<div class="login-right-warp-main-form">
|
||||
<span style='color: green'>流程测试：张三账号z3,李四账号l4,王五账号w5,赵六账号z6,孙七账号s7,赵八账号z8。密码都是1</span>
|
||||
<div v-if="!isScan">
|
||||
<el-tabs v-model="tabsActiveName">
|
||||
<el-tab-pane :label="$t('message.label.one1')" name="account">
|
||||
|
||||
Reference in New Issue
Block a user