Merge remote-tracking branch 'origin/develop' into develop

This commit is contained in:
super_liu
2021-11-06 23:18:48 +08:00
7 changed files with 699 additions and 322 deletions
+1
View File
@@ -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