Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="roleTree">
|
||||
<el-drawer
|
||||
@keyup.enter.native="saveUserInfo"
|
||||
:title="isTitle"
|
||||
:visible.sync="isVisible2"
|
||||
:wrapperClosable="false"
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<el-form ref="rh_pageData" :model="rh_pageData" :rules="rh_rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="协会名称:">
|
||||
<el-form-item label="协会名称:" prop="comityName">
|
||||
<el-select
|
||||
v-model="rh_pageData.comityName"
|
||||
placeholder="请选择标委会">
|
||||
@@ -26,12 +26,12 @@
|
||||
v-for="item in comityNameOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
:value="item.label"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item v-if="rh_pageData.comityName !== ''">
|
||||
<el-form-item v-if="rh_pageData.comityName !== ''" prop="comityNameOne">
|
||||
<el-select
|
||||
v-model="rh_pageData.comityNameOne"
|
||||
placeholder="请选择分标委">
|
||||
@@ -39,12 +39,12 @@
|
||||
v-for="item in comityNameOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
:value="item.label"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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
|
||||
v-model="rh_pageData.comityNameTwo"
|
||||
placeholder="请选择工作组">
|
||||
@@ -52,7 +52,7 @@
|
||||
v-for="item in comityNameOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
:value="item.label"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -134,29 +134,30 @@
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<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-col>
|
||||
<el-col :span="8">
|
||||
<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-col>
|
||||
<el-col :span="8">
|
||||
<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-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<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-col>
|
||||
<el-col :span="8">
|
||||
<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-col>
|
||||
</el-row>
|
||||
@@ -164,7 +165,7 @@
|
||||
</el-form-item>
|
||||
<el-divider/>
|
||||
<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-divider/>
|
||||
<el-form-item label="协会外部联系方式:" style="margin-bottom: 50px">
|
||||
@@ -455,9 +456,17 @@ export default {
|
||||
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: {
|
||||
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,
|
||||
roleShowflagOne: false,
|
||||
@@ -700,6 +709,8 @@ export default {
|
||||
this.isSubmit = false
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('请完成流程信息的人员选择')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -269,7 +269,9 @@ export default {
|
||||
engineerUserId: '',
|
||||
engineerUser: '',
|
||||
},
|
||||
roleFormRules: {},
|
||||
roleFormRules: {
|
||||
engineerUser: [{required: true, message: "选择法规工程师", trigger: ['blur', 'change']}],
|
||||
},
|
||||
|
||||
upDialog: false,
|
||||
upThemeDialog: false,
|
||||
|
||||
@@ -378,7 +378,11 @@ export default {
|
||||
engineerUserId: '',
|
||||
},
|
||||
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: [],
|
||||
|
||||
|
||||
@@ -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