<template>
|
<div class="from-panel" ref="panel">
|
<div class="from-title">
|
<span>流程面板</span>
|
<div>
|
<el-button type="primary" icon="el-icon-plus" size="mini" @click="newProcess">新建表单</el-button>
|
</div>
|
</div>
|
<div class="form-group">
|
<draggable style="width: 100%; min-height:25px" :list="groups" group="from" @end="groupSort" v-show="!groupsSort"
|
filter=".undrag"
|
:options="{animation: 300, delay: 200, chosenClass:'choose', scroll: true, sort:true}">
|
<div :class="{'form-group-item':true}" v-for="(item, index) in groups"
|
:key="index" title="长按0.5S后可拖拽表单进行排序">
|
<div>
|
<span>{{ item.name }}</span><br>
|
</div>
|
<div style="float: right">
|
<el-button type="text" icon="el-icon-edit-outline" size="mini" @click="editFrom(item, groups)">编辑
|
</el-button>
|
|
<el-button type="text" size="mini" @click="viewGroup(item,groups)">查看流程</el-button>
|
|
<el-popover placement="left" trigger="click" width="400" style="margin-left: 10px"
|
@show="moveSelect === null" >
|
<el-radio-group v-model="moveSelect" size="mini">
|
<el-radio :label="g.id" border v-for="g in groups" :key="g.id" v-show="g.id > 1"
|
:disabled="g.id === groups.id" style="margin: 10px;">{{ g.name }}
|
</el-radio>
|
</el-radio-group>
|
<div style="text-align: right; margin: 0">
|
<el-button type="primary" size="mini" @click="moveFrom(item)">提交</el-button>
|
</div>
|
</el-popover>
|
</div>
|
</div>
|
</draggable>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import draggable from "vuedraggable";
|
import {
|
groupItemsSort, getEntitySet
|
} from '@/api/design'
|
|
export default {
|
name: "FormsPanel",
|
components: {draggable},
|
data() {
|
return {
|
moveSelect: '',
|
visible: false,
|
groupsSort: false,
|
groups: []
|
}
|
},
|
mounted() {
|
this.getGroups()
|
},
|
methods: {
|
getGroups() {
|
let template = {"dataname": "sys_state_approve"}
|
getEntitySet(template).then(rsp => {
|
console.log("getEntitySet", rsp.data.data)
|
this.groups = rsp.data.data.entityset
|
console.log("this.groups", this.groups)
|
//this.groups = rsp.data
|
}).catch(err => this.$message.error('获取审批流程异常'))
|
},
|
newProcess(groupId) {
|
// this.$store.commit("setTemplate", this.getTemplateData());
|
// this.$store.commit("setIsEdit", false);
|
this.$router.push("/admin/design?groupId=" + groupId);
|
},
|
groupSort() {
|
this.groupsSort = false
|
groupItemsSort(this.groups).then(rsp => {
|
this.$message.success("排序成功")
|
this.getGroups()
|
}).catch(err => {
|
this.getGroups()
|
this.$message.error(err.response.data)
|
})
|
},
|
|
|
viewGroup(item, group) {
|
console.log("viewGroup",item)
|
this.$router.push(
|
{
|
path: "/workspace/process/instance/tabs",
|
query: {
|
processInstanceId: item.id,
|
type: "doneTask",
|
},
|
}
|
);
|
},
|
|
|
editFrom(item, group) {
|
console.log("item",item)
|
this.$router.push("/admin/design?code=" + item.id);
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
body {
|
background: #ffffff !important;
|
}
|
|
.undrag {
|
background: #ebecee !important;
|
}
|
|
.from-panel {
|
padding: 50px 100px;
|
min-width: 500px;
|
background: #ffffff;
|
|
/deep/ .from-title {
|
div {
|
float: right;
|
|
.el-button {
|
border-radius: 15px;
|
}
|
}
|
}
|
|
//height: 100vh;
|
}
|
|
.choose {
|
background: #e9ebee;
|
}
|
|
.form-group {
|
margin: 20px 0;
|
padding: 5px 0px;
|
border-radius: 10px;
|
//border: 1px solid #d3d3d3;
|
box-shadow: 1px 1px 10px 0 #d2d2d2;
|
|
&:hover {
|
box-shadow: 1px 1px 12px 0 #b3b3b3;
|
}
|
|
.form-group-title {
|
padding: 5px 20px;
|
height: 40px;
|
line-height: 40px;
|
border-bottom: 1px solid #d3d3d3;
|
|
.el-icon-rank {
|
display: none;
|
cursor: move;
|
}
|
|
&:hover {
|
.el-icon-rank {
|
display: inline-block;
|
}
|
}
|
|
div {
|
display: inline-block;
|
float: right;
|
}
|
|
span:first-child {
|
margin-right: 5px;
|
font-size: 15px;
|
font-weight: bold;
|
}
|
|
span:nth-child(2) {
|
color: #656565;
|
font-size: small;
|
margin-right: 10px;
|
}
|
|
/deep/ .el-button {
|
color: #404040;
|
margin-left: 20px;
|
|
&:hover {
|
color: #2b2b2b;
|
}
|
}
|
}
|
|
.form-group-item:nth-child(1) {
|
border-top: none !important;
|
}
|
|
.form-group-item {
|
color: #3e3e3e;
|
font-size: small;
|
padding: 10px 0;
|
margin: 0 20px;
|
height: 40px;
|
position: relative;
|
line-height: 40px;
|
border-top: 1px solid #d3d3d3;
|
|
div {
|
display: inline-block;
|
}
|
|
i {
|
border-radius: 10px;
|
padding: 7px;
|
font-size: 20px;
|
color: #ffffff;
|
margin-right: 10px;
|
}
|
|
div:nth-child(1) {
|
float: left;
|
}
|
|
div:nth-child(2) {
|
//position: absolute;
|
color: #7a7a7a;
|
font-size: 12px;
|
left: 200px;
|
max-width: 300px;
|
overflow: hidden;
|
}
|
|
div:nth-child(3) {
|
position: absolute;
|
right: 30%;
|
}
|
|
div:nth-child(4) {
|
float: right;
|
}
|
}
|
}
|
|
@media screen and (max-width: 1000px) {
|
.desp {
|
display: none !important;
|
}
|
}
|
|
@media screen and (max-width: 800px) {
|
.from-panel {
|
padding: 50px 10px;
|
}
|
}
|
</style>
|
