123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 |
- <template>
- <div class="app-container">
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
- <el-form-item label="流程图名称:">
- <el-input
- v-model.trim="queryParams.name"
- placeholder="请输入流程图名称"
- clearable
- size="small"
- style="width: 160px"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item class="right">
- <el-button plain size="mini" @click="resetQuery">重置</el-button>
- <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
- </el-form-item>
- <br>
- <el-button
- type="primary"
- size="mini"
- @click="handleAdd"
- >新增</el-button>
- </el-form>
- <el-table v-loading="loading" :data="adminList" border style="margin-top:20px;">
- <el-table-column label="流程id" align="center" prop="id" show-overflow-tooltip />
- <el-table-column label="流程图名称" align="center" prop="name" show-overflow-tooltip />
- <el-table-column label="描述" align="center" prop="procdefDescribe" show-overflow-tooltip />
- <el-table-column label="运行状态" align="center" >
- <template slot-scope="scope">
- <el-switch
- v-model="scope.row.runStatus"
- @change="handleStatusChange(scope.row)"
- ></el-switch>
- </template>
- </el-table-column>
- <el-table-column label="流程图" align="center" prop="resourceName" show-overflow-tooltip >
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- class="lans"
- @click="getBpmn(scope.row)"
- >查看</el-button>
- </template>
- </el-table-column>
- <el-table-column label="执行记录" align="center" prop="resourceName" show-overflow-tooltip >
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- class="lans"
- @click="getRecord(scope.row)"
- >查看</el-button>
- </template>
- </el-table-column>
- <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip />
- <el-table-column label="操作" align="center" width="400">
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- class="lans"
- @click="zkReProcdefRun1(scope.row)"
- >执行一次</el-button>
- <el-button
- size="mini"
- type="text"
- class="lans"
- @click="handleUpdate(scope.row)"
- >编辑</el-button>
- <el-button
- size="mini"
- type="text"
- class="hongs"
- @click="handleDelete(scope.row)"
- >删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 查看bpmn对话框 -->
- <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :before-close="cancel" :close-on-click-modal="false">
- <div class="canvas" ref="canvas"></div>
- </el-dialog>
- <pagination
- v-show="total>0"
- :total="total"
- :page.sync="queryParams.current"
- :limit.sync="queryParams.size"
- @pagination="getList"
- />
- </div>
- </template>
- <script>
- // 引入相关的依赖
- import BpmnViewer from "bpmn-js/lib/Viewer";
- import { xmlStr } from "@/mock/xmlStrPreview2";
- import { getBpmnZkNodeList, getBpmnZkNodeTreeList, addBpmnZkNode, updataBpmnZkNode,
- getBpmnZkReNodeProcdefTreeList, getBpmnZkReNodeProcdefCheckedTreeList,
- getBpmnZkReProcdefList, addBpmnZkReProcdef, updataBpmnZkReProcdef, delBpmnZkReProcdef ,zkReProcdefRun,zkReProcdefStatus} from "@/api/business/Middleware/bpmn";
- import router from "../../../../router";
- export default {
- name: "",
- created() {},
- mounted() {
- },
- data() {
- return {
- // 遮罩层
- loading: false,
- // 导出遮罩层
- exportLoading: false,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 参数表格数据
- adminList: [],
- // 弹出层标题
- title: "查看流程图",
- // 是否显示弹出层
- open: false,
- // 查询参数
- queryParams: {
- current: 1,
- size: 10,
- name:undefined
- },
- // 表单参数
- form: {},
- bpmnViewer: null,
- container: null,
- canvas: null,
- xml:undefined,
- num:0
- };
- },
- created(){
- this.getList()
- },
- mounted:function (){
- },
- // 方法集合
- methods: {
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.$router.push({path:'/Middleware/bpmn/customModeler',query:{name:row.name,id:row.id}})
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const ids = row.id
- this.$confirm('是否确认删除', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return delBpmnZkReProcdef(ids);
- }).then(() => {
- this.getList();
- this.msgSuccess("删除成功");
- }).catch(() => {});
- },
- /** 新增按钮操作 */
- handleAdd() {
- this.$router.push('/Middleware/bpmn/customModeler')
- },
- /** 查询参数列表 */
- getList() {
- this.loading = false;
- getBpmnZkReProcdefList(this.queryParams).then(response => {
- this.adminList = response.data.records;
- this.total = response.data.total;
- this.loading = false;
- }
- );
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.current = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm");
- this.queryParams.name = undefined
- this.handleQuery();
- },
- // 流程图关闭
- cancel() {
- this.open = false
- },
- //流程图查看
- getBpmn(row){
- this.xml = row.resourceName
- if(this.xml){
- this.loading = false
- this.open = true
- setTimeout(()=>{
- if(this.num == 0){
- const canvas = this.$refs.canvas;
- this.bpmnViewer = new BpmnViewer({
- container: canvas
- });
- this.num ++
- }
- this.createNewDiagram(row.resourceName);
- })
- }else{
- this.msgError("流程图渲染数据不存在");
- }
- },
- async createNewDiagram(xml) {
- try {
- const result = await this.bpmnViewer.importXML(xml);
- const { warnings } = result;
- // 屏幕自适应
- const canvas = this.bpmnViewer.get("canvas");
- canvas.zoom("fit-viewport", true);
- } catch (err) {
- console.log(err.message, err.warnings);
- }
- },
- //跳转执行记录
- getRecord(row){
- router.push({path:'/Middleware/bpmn/executionRecord',query:{'procdefId':row.id}})
- },
- //立即执行
- zkReProcdefRun1(row){
- this.loading = true
- zkReProcdefRun({id:row.id,name:row.name}).then(response => {
- if(response.status == "SUCCESS"){
- this.msgSuccess("执行成功");
- this.loading = false;
- }
- })
- },
- //运行状态
- handleStatusChange(row){
- let text = row.runStatus === true ? "启用" : "停用";
- this.$confirm('确认要'+ text + '"' + row.name + '"流程吗?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- console.log(111)
- return zkReProcdefStatus({id:row.id,runStatus:row.runStatus,runCron:row.runCron})
- }).then(() => {
- this.getList()
- this.msgSuccess(row.name + text + "成功");
- }).catch(function() {
- row.runStatus = row.runStatus === "0" ? "1" : "0";
- });
- },
- },
- };
- </script>
- <style scoped>
- .canvas {
- width: 100%;
- height: 400px;
- }
- .panel {
- position: absolute;
- right: 0;
- top: 0;
- width: 300px;
- }
- .buttons {
- position: absolute;
- left: 80px;
- bottom: 20px;
- }
- .buttons li {
- display: inline-block;
- margin: 5px;
- }
- .buttons li a {
- color: #999;
- background: #eee;
- cursor: not-allowed;
- padding: 8px;
- border: 1px solid #ccc;
- text-decoration: none;
- }
- .buttons li a.active {
- color: #333;
- background: #fff;
- cursor: pointer;
- }
- .demo-drawer-footer {
- width: 100%;
- position: absolute;
- bottom: 0;
- left: 0;
- border-top: 1px solid #e8e8e8;
- padding: 10px 16px;
- text-align: right;
- background: #fff;
- }
- .getBpmn{
- cursor: pointer !important;
- color:#1890ff;
- }
- </style>
|