Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="roleTree">
|
<div class="roleTree">
|
||||||
<el-drawer
|
<el-drawer
|
||||||
|
@keyup.enter.native="saveUserInfo"
|
||||||
:title="isTitle"
|
:title="isTitle"
|
||||||
:visible.sync="isVisible2"
|
:visible.sync="isVisible2"
|
||||||
:wrapperClosable="false"
|
:wrapperClosable="false"
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<el-form ref="rh_pageData" :model="rh_pageData" :rules="rh_rules" label-width="150px">
|
<el-form ref="rh_pageData" :model="rh_pageData" :rules="rh_rules" label-width="150px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="协会名称:">
|
<el-form-item label="协会名称:" prop="comityName">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="rh_pageData.comityName"
|
v-model="rh_pageData.comityName"
|
||||||
placeholder="请选择标委会">
|
placeholder="请选择标委会">
|
||||||
@@ -26,12 +26,12 @@
|
|||||||
v-for="item in comityNameOptions"
|
v-for="item in comityNameOptions"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value"/>
|
:value="item.label"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item v-if="rh_pageData.comityName !== ''">
|
<el-form-item v-if="rh_pageData.comityName !== ''" prop="comityNameOne">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="rh_pageData.comityNameOne"
|
v-model="rh_pageData.comityNameOne"
|
||||||
placeholder="请选择分标委">
|
placeholder="请选择分标委">
|
||||||
@@ -39,12 +39,12 @@
|
|||||||
v-for="item in comityNameOptions"
|
v-for="item in comityNameOptions"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value"/>
|
:value="item.label"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="" v-if="rh_pageData.comityName !== '' && rh_pageData.comityNameOne !== ''">
|
<el-form-item prop="comityNameTwo" v-if="rh_pageData.comityName !== '' && rh_pageData.comityNameOne !== ''">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="rh_pageData.comityNameTwo"
|
v-model="rh_pageData.comityNameTwo"
|
||||||
placeholder="请选择工作组">
|
placeholder="请选择工作组">
|
||||||
@@ -52,7 +52,7 @@
|
|||||||
v-for="item in comityNameOptions"
|
v-for="item in comityNameOptions"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value"/>
|
:value="item.label"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -134,29 +134,30 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="资质:">
|
<el-form-item label="资质:">
|
||||||
<el-input v-model="rh_pageData.comityMake.makeQualification"></el-input>
|
<el-input
|
||||||
|
v-model="rh_pageData.comityMake.makeQualification" placeholder="请填写资质"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="成员:">
|
<el-form-item label="成员:">
|
||||||
<el-input v-model="rh_pageData.comityMake.makeRole"></el-input>
|
<el-input v-model="rh_pageData.comityMake.makeRole" placeholder="请填写成员"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="费用估计:">
|
<el-form-item label="费用估计:">
|
||||||
<el-input v-model="rh_pageData.comityMake.makeCost"></el-input>
|
<el-input v-model="rh_pageData.comityMake.makeCost" placeholder="请填写费用估计"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="职责:">
|
<el-form-item label="职责:">
|
||||||
<el-input v-model="rh_pageData.comityMake.makeDuties"></el-input>
|
<el-input v-model="rh_pageData.comityMake.makeDuties" placeholder="请填写职责"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="任期:">
|
<el-form-item label="任期:">
|
||||||
<el-input v-model="rh_pageData.comityMake.makeTime"></el-input>
|
<el-input v-model="rh_pageData.comityMake.makeTime" placeholder="请填写任期"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -164,7 +165,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-divider/>
|
<el-divider/>
|
||||||
<el-form-item label="工作方向:" prop="workPath">
|
<el-form-item label="工作方向:" prop="workPath">
|
||||||
<el-input v-model="rh_pageData.workPath" type="textarea"></el-input>
|
<el-input v-model="rh_pageData.workPath" type="textarea"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-divider/>
|
<el-divider/>
|
||||||
<el-form-item label="协会外部联系方式:" style="margin-bottom: 50px">
|
<el-form-item label="协会外部联系方式:" style="margin-bottom: 50px">
|
||||||
@@ -455,9 +456,17 @@ export default {
|
|||||||
engineerUserId: '',
|
engineerUserId: '',
|
||||||
|
|
||||||
},
|
},
|
||||||
rh_rules: {},
|
rh_rules: {
|
||||||
|
comityName: [{required: true, message: "请选择协会名称", trigger: ['blur', 'change']}],
|
||||||
|
comityNameOne: [{required: true, message: "请选择分标委", trigger: ['blur', 'change']}],
|
||||||
|
comityNameTwo: [{required: true, message: "请选择工作组", trigger: ['blur', 'change']}]
|
||||||
|
},
|
||||||
roleFormRules: {
|
roleFormRules: {
|
||||||
dockUserName: [{required: true, message: "请选择标准法规工程师", trigger: ['blur', 'change']}]
|
dockUserName: [{required: true, message: "请选择标准法规工程师", trigger: ['blur', 'change']}],
|
||||||
|
startUserName: [{required: true, message: "请选择标准法规部人员", trigger: ['blur', 'change']}],
|
||||||
|
leaderUser: [{required: true, message: "请选择标准法规部主管领导", trigger: ['blur', 'change']}],
|
||||||
|
feeUser: [{required: true, message: "请选择费用管理部门人员", trigger: ['blur', 'change']}],
|
||||||
|
engineerUser: [{required: true, message: "请选择技术委员会常务副主任/总院院长", trigger: ['blur', 'change']}],
|
||||||
},
|
},
|
||||||
roleShowflag: false,
|
roleShowflag: false,
|
||||||
roleShowflagOne: false,
|
roleShowflagOne: false,
|
||||||
@@ -700,6 +709,8 @@ export default {
|
|||||||
this.isSubmit = false
|
this.isSubmit = false
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
this.$message.warning('请完成流程信息的人员选择')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -269,7 +269,9 @@ export default {
|
|||||||
engineerUserId: '',
|
engineerUserId: '',
|
||||||
engineerUser: '',
|
engineerUser: '',
|
||||||
},
|
},
|
||||||
roleFormRules: {},
|
roleFormRules: {
|
||||||
|
engineerUser: [{required: true, message: "选择法规工程师", trigger: ['blur', 'change']}],
|
||||||
|
},
|
||||||
|
|
||||||
upDialog: false,
|
upDialog: false,
|
||||||
upThemeDialog: false,
|
upThemeDialog: false,
|
||||||
|
|||||||
@@ -378,7 +378,11 @@ export default {
|
|||||||
engineerUserId: '',
|
engineerUserId: '',
|
||||||
},
|
},
|
||||||
roleFormRules: {
|
roleFormRules: {
|
||||||
dockUserName: [{required: true, message: "请选择标准法规工程师", trigger: ['blur', 'change']}]
|
dockUserName: [{required: true, message: "请选择标准法规工程师", trigger: ['blur', 'change']}],
|
||||||
|
startUserName: [{required: true, message: "请选择标准法规部人员", trigger: ['blur', 'change']}],
|
||||||
|
leaderUser: [{required: true, message: "请选择标准法规部主管中心主任", trigger: ['blur', 'change']}],
|
||||||
|
feeUser: [{required: true, message: "请选择管理推荐部", trigger: ['blur', 'change']}],
|
||||||
|
engineerUser: [{required: true, message: "请选择技术委员会常务副主任/总院院长", trigger: ['blur', 'change']}],
|
||||||
},
|
},
|
||||||
deleteDataList: [],
|
deleteDataList: [],
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,298 @@
|
|||||||
|
<template>
|
||||||
|
<div class="workingGroup1" ref="wrap">
|
||||||
|
<div id="container"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import G6 from '@antv/g6'
|
||||||
|
export default {
|
||||||
|
name: "workingGroup1",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeName: 'workingGroup1',
|
||||||
|
graphData: {},
|
||||||
|
graph: null,
|
||||||
|
currentNode: '',
|
||||||
|
currentNodeData: {},
|
||||||
|
addForm: {
|
||||||
|
pMenuName: '',
|
||||||
|
menuType: '',
|
||||||
|
sarGroupMenuEO: {
|
||||||
|
pid: '',
|
||||||
|
menuType: '',
|
||||||
|
menuLevel: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pMenuName: '',
|
||||||
|
menuType: '',
|
||||||
|
detailData: {
|
||||||
|
menuId: '',
|
||||||
|
nodeType: '',
|
||||||
|
nodeName: '',
|
||||||
|
parentId: '',
|
||||||
|
standFlag: '',
|
||||||
|
data: ''
|
||||||
|
},
|
||||||
|
delData: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData () {
|
||||||
|
this.$http.get('wg_work_group/researchData', {
|
||||||
|
type: '0'
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.renderGraph(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleNodeClick (node) {
|
||||||
|
},
|
||||||
|
handleEdgeClick (node) {},
|
||||||
|
renderGraph(row) {
|
||||||
|
this.graphData = row
|
||||||
|
G6.registerNode(
|
||||||
|
'tree-node',
|
||||||
|
{
|
||||||
|
drawShape: function drawShape(cfg, group) {
|
||||||
|
const level = cfg.level
|
||||||
|
const nodeType = cfg.nature
|
||||||
|
if (nodeType === '0') {
|
||||||
|
const circle = group.addShape('circle', {
|
||||||
|
attrs: {
|
||||||
|
fill: '#CD7326'
|
||||||
|
// stroke: '#666',
|
||||||
|
},
|
||||||
|
name: 'circle-shape',
|
||||||
|
});
|
||||||
|
const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : ''
|
||||||
|
const text = group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
text: content,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
textAlign: 'center',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
name: 'text-shape',
|
||||||
|
});
|
||||||
|
const bbox = text.getBBox();
|
||||||
|
const hasChildren = cfg.children && cfg.children.length > 0;
|
||||||
|
let marker
|
||||||
|
if (hasChildren) {
|
||||||
|
marker = group.addShape('marker', {
|
||||||
|
attrs: {
|
||||||
|
x: bbox.maxX + 16,
|
||||||
|
y: 0,
|
||||||
|
r: 6,
|
||||||
|
symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
|
||||||
|
stroke: '#666',
|
||||||
|
lineWidth: 2,
|
||||||
|
},
|
||||||
|
name: 'collapse-icon',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
circle.attr({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
r: (bbox.width + 12) / 2,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const rect = group.addShape('rect', {
|
||||||
|
attrs: {
|
||||||
|
fill: '#fff',
|
||||||
|
// stroke: '#666',
|
||||||
|
},
|
||||||
|
name: 'rect-shape',
|
||||||
|
});
|
||||||
|
const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : ''
|
||||||
|
const text = group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
text: content,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
textAlign: 'center',
|
||||||
|
textBaseline: 'middle',
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
name: 'text-shape',
|
||||||
|
});
|
||||||
|
const bbox = text.getBBox();
|
||||||
|
const hasChildren = cfg.children && cfg.children.length > 0;
|
||||||
|
let marker
|
||||||
|
if (hasChildren) {
|
||||||
|
marker = group.addShape('marker', {
|
||||||
|
attrs: {
|
||||||
|
x: bbox.maxX + 16,
|
||||||
|
y: 0,
|
||||||
|
r: 6,
|
||||||
|
symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
|
||||||
|
stroke: '#666',
|
||||||
|
lineWidth: 2,
|
||||||
|
},
|
||||||
|
name: 'collapse-icon',
|
||||||
|
nodeStateStyles: {
|
||||||
|
selected: {
|
||||||
|
fill: 'steelblue'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
rect.attr({
|
||||||
|
x: bbox.minX - 6,
|
||||||
|
y: bbox.minY - 6,
|
||||||
|
width: bbox.width + 12,
|
||||||
|
height: bbox.height + 12,
|
||||||
|
radius: (bbox.height + 12) / 2
|
||||||
|
});
|
||||||
|
// 自定义层级颜色
|
||||||
|
if (nodeType === '1') {
|
||||||
|
rect.attr({
|
||||||
|
fill: '#1C98B8'
|
||||||
|
});
|
||||||
|
} else if (nodeType === '2') {
|
||||||
|
rect.attr({
|
||||||
|
fill: '#5165D4'
|
||||||
|
});
|
||||||
|
} else if (nodeType === '3') {
|
||||||
|
rect.attr({
|
||||||
|
fill: '#E23335'
|
||||||
|
});
|
||||||
|
} else if (nodeType === '4') {
|
||||||
|
rect.attr({
|
||||||
|
fill: '#ADAAA1'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return group;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'single-node',
|
||||||
|
);
|
||||||
|
this.graph = new G6.TreeGraph({
|
||||||
|
container: 'container',
|
||||||
|
width: this.$refs['wrap'].scrollWidth,
|
||||||
|
height: this.$refs['wrap'].scrollHeight,
|
||||||
|
modes: {
|
||||||
|
default: [
|
||||||
|
{
|
||||||
|
type: 'collapse-expand',
|
||||||
|
onChange: function onChange(item, collapsed) {
|
||||||
|
console.log(1);
|
||||||
|
const data = item.get('model');
|
||||||
|
const icon = item.get('group').find((element) => element.get('name') === 'collapse-icon');
|
||||||
|
console.log(data);
|
||||||
|
console.log(icon);
|
||||||
|
if (collapsed) {
|
||||||
|
icon.attr('symbol', G6.Marker.expand);
|
||||||
|
} else {
|
||||||
|
icon.attr('symbol', G6.Marker.collapse);
|
||||||
|
}
|
||||||
|
data.collapsed = collapsed;
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
shouldBegin: (e) => {
|
||||||
|
const target = e.target
|
||||||
|
const nodeType = target.cfg.nature
|
||||||
|
if (nodeType === 'collapse-icon') return true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'drag-canvas',
|
||||||
|
'zoom-canvas',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
defaultNode: {
|
||||||
|
type: 'tree-node',
|
||||||
|
anchorPoints: [
|
||||||
|
[0, 0.5],
|
||||||
|
[1, 0.5],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
defaultEdge: {
|
||||||
|
type: 'cubic-horizontal',
|
||||||
|
style: {
|
||||||
|
stroke: '#A3B1BF',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
type: 'compactBox',
|
||||||
|
direction: 'LR',
|
||||||
|
getId: function getId(d) {
|
||||||
|
return d.id;
|
||||||
|
},
|
||||||
|
getHeight: function getHeight() {
|
||||||
|
return 16;
|
||||||
|
},
|
||||||
|
getWidth: function getWidth() {
|
||||||
|
return 16;
|
||||||
|
},
|
||||||
|
getVGap: function getVGap() {
|
||||||
|
return 20;
|
||||||
|
},
|
||||||
|
getHGap: function getHGap() {
|
||||||
|
return 80;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let graphData = this.graphData
|
||||||
|
this.graph.data(graphData);
|
||||||
|
this.graph.render();
|
||||||
|
this.graph.fitView();
|
||||||
|
this.handleGraphNodeClickEvent(this.graph)
|
||||||
|
this.handleGraphEdgeClickEvent(this.graph)
|
||||||
|
this.handleGraphDraw(this.graph)
|
||||||
|
},
|
||||||
|
destoryGraph() {
|
||||||
|
this.graph.destroy()
|
||||||
|
},
|
||||||
|
handleGraphDraw () {},
|
||||||
|
handleGraphNodeClickEvent(graph) {
|
||||||
|
// 点击节点
|
||||||
|
graph.on('node:click', (e) => {
|
||||||
|
// 先将所有当前是 click 状态的节点置为非 click 状态
|
||||||
|
const clickNodes = graph.findAllByState('node', 'click');
|
||||||
|
clickNodes.forEach((cn) => {
|
||||||
|
graph.setItemState(cn, 'click', false);
|
||||||
|
});
|
||||||
|
const nodeItem = e.item; // 获取被点击的节点元素对象
|
||||||
|
this.handleNodeClick(nodeItem)
|
||||||
|
graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleGraphEdgeClickEvent(graph) {
|
||||||
|
// 点击边
|
||||||
|
graph.on('edge:click', (e) => {
|
||||||
|
// 先将所有当前是 click 状态的边置为非 click 状态
|
||||||
|
const clickEdges = graph.findAllByState('edge', 'click');
|
||||||
|
clickEdges.forEach((ce) => {
|
||||||
|
graph.setItemState(ce, 'click', false);
|
||||||
|
});
|
||||||
|
const edgeItem = e.item; // 获取被点击的边元素对象
|
||||||
|
console.log('EdgeClick', edgeItem)
|
||||||
|
graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
|
||||||
|
this.handleEdgeClick (edgeItem)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.getData();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.destoryGraph()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.workingGroup1{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user