<template>
|
<el-button v-if="isDev" style="margin-left: 10px" @click="autoCreate">{{
|
$t('自动添加')
|
}}</el-button>
|
|
<cl-form ref="Form">
|
<template #slot-list="{ scope }">
|
<el-scrollbar class="scrollbar">
|
<div v-for="(item, index) in scope.list" :key="index" class="list">
|
<el-divider content-position="left">{{ item.prefix }}</el-divider>
|
|
<div v-for="(a, ai) in item.api" :key="ai" class="item">
|
<!-- 是否开启 -->
|
<el-switch v-model="a.checked"></el-switch>
|
|
<!-- 名称 -->
|
<el-input
|
v-model="a.summary"
|
clearable
|
:placeholder="$t('权限名称')"
|
:disabled="!a.checked"
|
/>
|
|
<!-- 权限 -->
|
<cl-menu-perms v-model="a.perms" :disabled="!a.checked" />
|
</div>
|
</div>
|
</el-scrollbar>
|
</template>
|
</cl-form>
|
</template>
|
|
<script setup lang="ts">
|
defineOptions({
|
name: 'auto-perms'
|
});
|
|
import { useForm } from '@cool-vue/crud';
|
import { useCool } from '/@/cool';
|
import { deepPaths } from '/@/cool/utils';
|
import { ElMessage } from 'element-plus';
|
import { isDev } from '/@/config';
|
import { useI18n } from 'vue-i18n';
|
|
const props = defineProps({
|
menuId: [String, Number]
|
});
|
|
const emit = defineEmits(['open', 'close']);
|
|
const { service } = useCool();
|
const { t } = useI18n();
|
const Form = useForm();
|
|
// 获取实体数据
|
async function getEntity() {
|
return service.base.open.eps().then((eps: EpsData) => {
|
const modules: EpsModule[] = [];
|
const paths: string[] = [];
|
|
// 遍历实体
|
for (const i in eps) {
|
eps[i].forEach(e => {
|
e.prefix = e.prefix?.replace('/admin/', '');
|
|
if (e.prefix) {
|
paths.push(e.prefix);
|
}
|
|
modules.push(e);
|
});
|
}
|
|
return {
|
prop: 'entity',
|
label: t('实体数据'),
|
component: {
|
name: 'el-cascader',
|
props: {
|
options: deepPaths(paths),
|
separator: '.',
|
props: {
|
multiple: true
|
},
|
onChange(arr: string[][]) {
|
const list: any[] = [];
|
|
arr.forEach(v => {
|
const d = modules.find(e => e.prefix == v.join('/'));
|
|
if (d) {
|
d.api.forEach(e => {
|
e.perms = (d.prefix + e.path).replace(/\//g, ':');
|
e.checked = true;
|
});
|
|
list.push(d);
|
}
|
});
|
|
// 渲染列表
|
Form.value?.setForm('list', list);
|
}
|
}
|
}
|
};
|
});
|
}
|
|
// 自动创建
|
async function autoCreate() {
|
emit('open');
|
|
Form.value?.open({
|
title: t('自动添加权限'),
|
width: '800px',
|
dialog: {
|
draggable: true,
|
controls: ['close']
|
},
|
props: {
|
labelPosition: 'top'
|
},
|
op: {
|
saveButtonText: t('一键添加')
|
},
|
items: [
|
await getEntity(),
|
{
|
prop: 'list',
|
label: t('权限列表'),
|
value: [],
|
hidden({ scope }) {
|
return !scope.entity;
|
},
|
component: {
|
name: 'slot-list'
|
}
|
}
|
],
|
on: {
|
submit(data: { list: any[]; entity: any }, { done, close }) {
|
if (!data.entity) {
|
ElMessage.error(t('请选择实体数据'));
|
done();
|
return;
|
}
|
|
// 选中权限
|
const checked: EpsApi[] = data.list
|
.map(e => e.api)
|
.flat()
|
.filter(e => e.checked);
|
|
if (checked.find(e => !e.summary)) {
|
ElMessage.error(t('请填写权限名称'));
|
done();
|
return;
|
}
|
|
if (checked.length == 0) {
|
ElMessage.error(t('请至少选择一个权限'));
|
done();
|
return;
|
}
|
|
Promise.all(
|
checked.map(e => {
|
return service.base.sys.menu.add({
|
type: 2,
|
parentId: props.menuId,
|
name: e.summary,
|
perms: e.perms
|
});
|
})
|
)
|
.then(() => {
|
ElMessage.success(t('添加权限成功'));
|
close();
|
emit('close');
|
})
|
.catch(err => {
|
done();
|
ElMessage.error(err.message);
|
});
|
}
|
}
|
});
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.scrollbar {
|
max-height: 500px;
|
|
.list {
|
.item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
|
.el-input {
|
margin: 0 10px;
|
width: 200px;
|
}
|
|
.cl-menu-perms {
|
flex: 1;
|
}
|
}
|
}
|
}
|
</style>
|
