mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
'admin-21.03.08:修复按钮鉴权组件name值错误问题'
This commit is contained in:
lyt
parent
ff360e1a83
commit
356bdf2316
@ -115,6 +115,7 @@ cnpm run build
|
||||
- <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
|
||||
- <a href="https://github.com/wangeditor-team/wangEditor" target="_blank">wangeditor</a>
|
||||
- <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
|
||||
- <a href="https://github.com/antvis/g6" target="_blank">@antv/g6</a>
|
||||
|
||||
#### 特别感谢
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g6": "^4.1.16",
|
||||
"axios": "^0.21.1",
|
||||
"clipboard": "^2.0.6",
|
||||
"countup.js": "^2.0.7",
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
import { computed } from "vue";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
export default {
|
||||
name: "auth",
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: () => "",
|
||||
},
|
||||
},
|
||||
nane: "auth",
|
||||
setup(props) {
|
||||
const store = useStore();
|
||||
// 获取 vuex 中的用户权限
|
||||
|
||||
@ -9,7 +9,7 @@ import { computed } from "vue";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import { judementSameArr } from "/@/utils/arrayOperation.ts";
|
||||
export default {
|
||||
nane: "authAll",
|
||||
name: "authAll",
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
import { computed } from "vue";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
export default {
|
||||
name: "auths",
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
nane: "auths",
|
||||
setup(props) {
|
||||
const store = useStore();
|
||||
// 获取 vuex 中的用户权限
|
||||
|
||||
@ -406,6 +406,21 @@ export const dynamicRoutes = [
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-caijian'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/fun/mindMap',
|
||||
name: 'mindMap',
|
||||
component: () => import('/@/views/fun/mindMap/index.vue'),
|
||||
meta: {
|
||||
title: 'G6 思维导图',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-siweidaotu'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// 字体图标 url
|
||||
const cssCdnUrlList: Array<string> = [
|
||||
'//at.alicdn.com/t/font_2298093_sctkh48ml1.css',
|
||||
'//at.alicdn.com/t/font_2298093_eee6zjvjt5a.css',
|
||||
'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
|
||||
]
|
||||
// 第三方 js url
|
||||
|
||||
292
src/views/fun/mindMap/index.vue
Normal file
292
src/views/fun/mindMap/index.vue
Normal file
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div :style="{height: `calc(100vh - ${initTagViewHeight}`}">
|
||||
<div class="layout-view-bg-white">
|
||||
<div id="antvG6" style="height:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, onMounted, nextTick } from "vue";
|
||||
import G6 from "@antv/g6";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
export default {
|
||||
name: "mindMap",
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const state = reactive({});
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
});
|
||||
// 初始化 antv/G6
|
||||
const initAntvG6 = () => {
|
||||
console.log(G6);
|
||||
|
||||
const fontSize = 12;
|
||||
// 自定义节点
|
||||
G6.registerNode("line", {
|
||||
draw: (cfg, group) => {
|
||||
const width = cfg.label.length * 10;
|
||||
const rect = group.addShape("rect", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: -10,
|
||||
...cfg.style,
|
||||
width,
|
||||
height: 20,
|
||||
lineWidth: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
name: "rect-shape",
|
||||
draggable: true,
|
||||
});
|
||||
const label = group.addShape("text", {
|
||||
attrs: {
|
||||
text: cfg.label,
|
||||
fill: "#000",
|
||||
fontSize,
|
||||
x: 0,
|
||||
y: -5,
|
||||
},
|
||||
name: "label-shape",
|
||||
draggable: true,
|
||||
});
|
||||
const labelBBox = label.getBBox();
|
||||
// const icon = group.addShape('circle', {
|
||||
// attrs: {
|
||||
// x: labelBBox.maxX + 10,
|
||||
// y: (labelBBox.minY + labelBBox.maxY) / 2,
|
||||
// r: 5,
|
||||
// stroke: '#000'
|
||||
// },
|
||||
// name: 'circle-shape',
|
||||
// draggable: true
|
||||
// });
|
||||
const bboxWidth = label.getBBox().width + 20;
|
||||
rect.attr({ width: bboxWidth });
|
||||
group.addShape("path", {
|
||||
attrs: {
|
||||
lineWidth: 1,
|
||||
fill: "#ccc",
|
||||
stroke: "#0092ff",
|
||||
path: [
|
||||
["M", 0, 0],
|
||||
["L", bboxWidth, 0],
|
||||
],
|
||||
},
|
||||
name: "path-shape",
|
||||
draggable: true,
|
||||
});
|
||||
return rect;
|
||||
},
|
||||
});
|
||||
//获取宽度
|
||||
const width = document.getElementById("antvG6").clientWidth;
|
||||
const height = document.getElementById("antvG6").clientHeight;
|
||||
|
||||
// return false;
|
||||
const graph = new G6.TreeGraph({
|
||||
container: "antvG6",
|
||||
width,
|
||||
height,
|
||||
pixelRatio: 2,
|
||||
modes: {
|
||||
default: ["collapse-expand", "drag-canvas", "zoom-canvas"],
|
||||
},
|
||||
// 节点类型及样式
|
||||
defaultNode: {
|
||||
type: "rect",
|
||||
// size: 16,
|
||||
width: "auto",
|
||||
anchorPoints: [
|
||||
[0, 0.5],
|
||||
[1, 0.5],
|
||||
],
|
||||
style: {
|
||||
fill: "#005ff2", //背景色
|
||||
stroke: "#005ff2", //边框
|
||||
},
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: "#ffffff",
|
||||
fontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
// 连线类型及样式
|
||||
defaultEdge: {
|
||||
type: "cubic-horizontal",
|
||||
// polyline
|
||||
style: {
|
||||
stroke: "#0092ff",
|
||||
},
|
||||
},
|
||||
// 布局
|
||||
layout: {
|
||||
type: "mindmap",
|
||||
direction: "H",
|
||||
getHeight: function getHeight() {
|
||||
return 16;
|
||||
},
|
||||
getWidth: function getWidth() {
|
||||
return 16;
|
||||
},
|
||||
getVGap: function getVGap() {
|
||||
return 10;
|
||||
},
|
||||
getHGap: function getHGap() {
|
||||
return 100;
|
||||
},
|
||||
},
|
||||
});
|
||||
graph.node(function (node) {
|
||||
// depth 类似节点标识
|
||||
if (node.depth == 0) {
|
||||
return {
|
||||
// size:[100,60],
|
||||
style: {
|
||||
fill: "#005ff2", //背景色
|
||||
stroke: "#005ff2", //边框
|
||||
},
|
||||
// label:node.id
|
||||
};
|
||||
}
|
||||
if (node.depth == 1) {
|
||||
return {
|
||||
style: {
|
||||
//渐变色
|
||||
fill:
|
||||
"l(0) 0:rgba(0,36,186,1) 0.5:rgba(0,36,186,0.5) 1:rgba(0,0,0,0.1)",
|
||||
},
|
||||
};
|
||||
}
|
||||
if (node.depth == 2) {
|
||||
return {
|
||||
type: "line",
|
||||
};
|
||||
}
|
||||
return {
|
||||
// label: node.id, // 设置显示名称
|
||||
labelCfg: {
|
||||
// position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left', // 设置显示左右
|
||||
offset: 5,
|
||||
},
|
||||
};
|
||||
});
|
||||
const data = {
|
||||
id: "id1",
|
||||
label: "遗属补助小专项",
|
||||
children: [
|
||||
{
|
||||
id: "id1-1",
|
||||
label: "已死亡",
|
||||
children: [
|
||||
{
|
||||
id: "id1-1-1",
|
||||
label: "问题数：35个",
|
||||
},
|
||||
{
|
||||
id: "id1-1-2",
|
||||
label: "人数：50人",
|
||||
},
|
||||
{
|
||||
id: "id1-1-3",
|
||||
label: "资金：340万",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "id1-2",
|
||||
label: "姓名与身份证不符",
|
||||
children: [
|
||||
{
|
||||
id: "id1-2-1",
|
||||
label: "问题数：35个",
|
||||
},
|
||||
{
|
||||
id: "id1-2-2",
|
||||
label: "人数：50人",
|
||||
},
|
||||
{
|
||||
id: "id1-2-3",
|
||||
label: "资金：340万",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "id1-3",
|
||||
label: "未查到身份证信息",
|
||||
children: [
|
||||
{
|
||||
id: "id1-3-1",
|
||||
label: "问题数：35个",
|
||||
},
|
||||
{
|
||||
id: "id1-3-2",
|
||||
label: "人数：50人",
|
||||
},
|
||||
{
|
||||
id: "id1-3-3",
|
||||
label: "资金：340万",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "id1-4",
|
||||
label: "领取低保",
|
||||
children: [
|
||||
{
|
||||
id: "id1-4-1",
|
||||
label: "问题数：35个",
|
||||
},
|
||||
{
|
||||
id: "id1-4-2",
|
||||
label: "人数：50人",
|
||||
},
|
||||
{
|
||||
id: "id1-4-3",
|
||||
label: "资金：340万",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "id1-5",
|
||||
label: "年龄不符合",
|
||||
children: [
|
||||
{
|
||||
id: "id1-5-1",
|
||||
label: "问题数：35个",
|
||||
},
|
||||
{
|
||||
id: "id1-5-2",
|
||||
label: "人数：50人",
|
||||
},
|
||||
{
|
||||
id: "id1-5-3",
|
||||
label: "资金：340万",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
graph.fitView();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initAntvG6();
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -13,7 +13,6 @@ import { toRefs, reactive, onMounted } from "vue";
|
||||
import wangeditor from "wangeditor";
|
||||
export default {
|
||||
name: "wangeditor",
|
||||
components: {},
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
// 初始化富文本
|
||||
|
||||
Loading…
Reference in New Issue
Block a user