mirror of
https://gitee.com/vben/vben-web.git
synced 2026-10-06 06:12:56 +08:00
工作流优化补充
This commit is contained in:
zsvg
@@ -1,312 +0,0 @@
|
||||
<template>
|
||||
|
||||
<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
|
||||
<template #header>
|
||||
<div class='zjustify'>
|
||||
<div>
|
||||
<div style='line-height: 32px'>流程模板</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type='success' @click='save(state)' plain>保 存</el-button>
|
||||
<el-button type='info' plain>复 制</el-button>
|
||||
<el-button type='info' @click='pageClose' plain>关 闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<CateModal url='oa/flow/cate/tree' ref='cateModal' @close='cateChoose' />
|
||||
<div style='margin-top: 8px;margin-bottom: 8px'>
|
||||
<el-form ref='formRef' :model='form' label-width='140px'>
|
||||
<el-tabs type='card' v-model='activeName'>
|
||||
|
||||
<el-tab-pane label='基本信息' name='tab1' class='zform el-form--inline'>
|
||||
<div class="zform-div">
|
||||
<el-form-item label='模板名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
|
||||
<el-input v-model='form.name'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label='所属分类：' prop='cate' :rules="[{ required: true, message: '分类不能为空'}]">
|
||||
<el-input :value='form.cate?.name' :suffix-icon='Search' :readonly='true' @click='openCateModal'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label='排序号：'>
|
||||
<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
|
||||
</el-form-item>
|
||||
<el-form-item label='是否可用：'>
|
||||
<el-switch v-model='form.avtag'>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label='流程配置' name='tab3'>
|
||||
<div style='width: 100%;height: 720px'>
|
||||
<BpmTmplEdit/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label='其他信息' name='tab9' class='zform el-form--inline'>
|
||||
<div class="zform-div">
|
||||
<el-form-item label='备注：' style="width: 100%">
|
||||
<el-input style="font-family: 'Courier New', Helvetica, Arial, sans-serif; font-size:16px"
|
||||
type='textarea' :rows='4' v-model='form.notes'>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label='创建人：' style="width: 25%">
|
||||
<div class='zinput'> {{ form.crman ? form.crman.name : '' }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='创建时间：' style="width: 25%">
|
||||
<div class='zinput'> {{ form.crtim }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='更新人：' style="width: 25%">
|
||||
<div class='zinput'> {{ form.upman ? form.upman.name : '' }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label='更新时间：' style="width: 25%">
|
||||
<div class='zinput'> {{ form.uptim }}</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script lang='ts'>
|
||||
export default { name: 'OaFlowTmplEditNew' };
|
||||
</script>
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import { pageSave, pageClose } from '/@/comps/page/edit';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { NextLoading } from '/@/utils/loading';
|
||||
import CateModal from '/@/comps/gen/GenTreeModal.vue';
|
||||
import BpmTmplEdit from '/@/comps/bpm/tmpl/edit';
|
||||
import { FormInstance } from 'element-plus';
|
||||
import request from '/@/utils/request';
|
||||
|
||||
const route = useRoute();
|
||||
const formRef = ref<FormInstance>();
|
||||
const activeName = ref('tab1');
|
||||
|
||||
const state = reactive({
|
||||
url: '/oa/flow/tmpl',
|
||||
params: { path: '', query: {} as any},
|
||||
form: { avtag: true } as any,
|
||||
});
|
||||
|
||||
const { form } = toRefs(state);
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
NextLoading.done();
|
||||
state.params = <any>route;
|
||||
let id = state.params.query?.id;
|
||||
if (id) {
|
||||
state.form = await request({
|
||||
url: state.url + '/one/' + id,
|
||||
method: 'get',
|
||||
});
|
||||
} else {
|
||||
let catid = state.params.query?.catid;
|
||||
if (catid) {
|
||||
state.form.cate = { id: catid, name: state.params.query?.catna };
|
||||
}
|
||||
state.form.avtag = true;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
async function save(state: any) {
|
||||
await pageSave({formRef:formRef.value, state});
|
||||
}
|
||||
|
||||
|
||||
|
||||
const defxml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
|
||||
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="sample-diagram" targetNamespace="http://activiti.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">\n' +
|
||||
' <bpmn2:process id="Process_1" name="1" isExecutable="true">\n' +
|
||||
' <bpmn2:startEvent id="N1" name="开始节点">\n' +
|
||||
' <bpmn2:outgoing>L1</bpmn2:outgoing>\n' +
|
||||
' </bpmn2:startEvent>\n' +
|
||||
' <bpmn2:sequenceFlow id="L1" sourceRef="N1" targetRef="N2" />\n' +
|
||||
' <bpmn2:exclusiveGateway id="N9" name="条件分支">\n' +
|
||||
' <bpmn2:documentation>判断审批金额是否大于100</bpmn2:documentation>\n' +
|
||||
' <bpmn2:incoming>L4</bpmn2:incoming>\n' +
|
||||
' <bpmn2:outgoing>L6</bpmn2:outgoing>\n' +
|
||||
' <bpmn2:outgoing>L5</bpmn2:outgoing>\n' +
|
||||
' </bpmn2:exclusiveGateway>\n' +
|
||||
' <bpmn2:sequenceFlow id="L4" sourceRef="N4" targetRef="N9" />\n' +
|
||||
' <bpmn2:sequenceFlow id="L6" name="王五分支线" sourceRef="N9" targetRef="N6">\n' +
|
||||
' <bpmn2:extensionElements>\n' +
|
||||
' <activiti:executionListener expression="money<=100" event="take" />\n' +
|
||||
' </bpmn2:extensionElements>\n' +
|
||||
' </bpmn2:sequenceFlow>\n' +
|
||||
' <bpmn2:sequenceFlow id="L5" name="李四分支线" sourceRef="N9" targetRef="N5">\n' +
|
||||
' <bpmn2:extensionElements>\n' +
|
||||
' <activiti:executionListener expression="money>100" event="take" />\n' +
|
||||
' </bpmn2:extensionElements>\n' +
|
||||
' </bpmn2:sequenceFlow>\n' +
|
||||
' <bpmn2:sequenceFlow id="L7" sourceRef="N5" targetRef="N7" />\n' +
|
||||
' <bpmn2:sequenceFlow id="L8" sourceRef="N6" targetRef="N7" />\n' +
|
||||
' <bpmn2:endEvent id="N3" name="结束节点">\n' +
|
||||
' <bpmn2:incoming>L2</bpmn2:incoming>\n' +
|
||||
' </bpmn2:endEvent>\n' +
|
||||
' <bpmn2:sequenceFlow id="L2" sourceRef="N7" targetRef="N3" />\n' +
|
||||
' <bpmn2:sequenceFlow id="L3" sourceRef="N2" targetRef="N4" />\n' +
|
||||
' <bpmn2:userTask id="N2" name="起草节点" activiti:assignee="z3" activiti:candidateUsers="">\n' +
|
||||
' <bpmn2:documentation>起草节点，表单数据一般从绑定的表单提取</bpmn2:documentation>\n' +
|
||||
' <bpmn2:extensionElements>\n' +
|
||||
' <activiti:formProperty id="userid" type="string" />\n' +
|
||||
' <activiti:formProperty id="money" type="int" />\n' +
|
||||
' <activiti:properties>\n' +
|
||||
' <activiti:property name="编辑" value="edit" />\n' +
|
||||
' <activiti:property name="撤回" value="back" />\n' +
|
||||
' <activiti:property name="提交" value="commit" />\n' +
|
||||
' </activiti:properties>\n' +
|
||||
' </bpmn2:extensionElements>\n' +
|
||||
' <bpmn2:incoming>L1</bpmn2:incoming>\n' +
|
||||
' <bpmn2:outgoing>L3</bpmn2:outgoing>\n' +
|
||||
' </bpmn2:userTask>\n' +
|
||||
' <bpmn2:userTask id="N4" name="张三审批" activiti:assignee="z3" activiti:candidateUsers="">\n' +
|
||||
' <bpmn2:documentation>审批节点</bpmn2:documentation>\n' +
|
||||
' <bpmn2:extensionElements>\n' +
|
||||
' <activiti:properties>\n' +
|
||||
' <activiti:property name="审批" value="approve" />\n' +
|
||||
' <activiti:property name="驳回" value="reject" />\n' +
|
||||
' </activiti:properties>\n' +
|
||||
' </bpmn2:extensionElements>\n' +
|
||||
' <bpmn2:incoming>L3</bpmn2:incoming>\n' +
|
||||
' <bpmn2:outgoing>L4</bpmn2:outgoing>\n' +
|
||||
' </bpmn2:userTask>\n' +
|
||||
' <bpmn2:userTask id="N5" name="李四审批" activiti:assignee="l4" activiti:candidateUsers="">\n' +
|
||||
' <bpmn2:extensionElements>\n' +
|
||||
' <activiti:properties>\n' +
|
||||
' <activiti:property name="审批" value="approve" />\n' +
|
||||
' <activiti:property name="驳回" value="reject" />\n' +
|
||||
' </activiti:properties>\n' +
|
||||
' </bpmn2:extensionElements>\n' +
|
||||
' <bpmn2:incoming>L5</bpmn2:incoming>\n' +
|
||||
' <bpmn2:outgoing>L7</bpmn2:outgoing>\n' +
|
||||
' </bpmn2:userTask>\n' +
|
||||
' <bpmn2:userTask id="N6" name="王五审批" activiti:assignee="w5" activiti:candidateUsers="">\n' +
|
||||
' <bpmn2:extensionElements>\n' +
|
||||
' <activiti:properties>\n' +
|
||||
' <activiti:property name="审批" value="approve" />\n' +
|
||||
' <activiti:property name="驳回" value="reject" />\n' +
|
||||
' </activiti:properties>\n' +
|
||||
' </bpmn2:extensionElements>\n' +
|
||||
' <bpmn2:incoming>L6</bpmn2:incoming>\n' +
|
||||
' <bpmn2:outgoing>L8</bpmn2:outgoing>\n' +
|
||||
' </bpmn2:userTask>\n' +
|
||||
' <bpmn2:userTask id="N7" name="赵六审批" activiti:assignee="z6" activiti:candidateUsers="">\n' +
|
||||
' <bpmn2:extensionElements>\n' +
|
||||
' <activiti:formProperty id="userid" type="string" />\n' +
|
||||
' <activiti:taskListener class="do some thing" event="complete" />\n' +
|
||||
' <activiti:properties>\n' +
|
||||
' <activiti:property name="审批" value="approve" />\n' +
|
||||
' </activiti:properties>\n' +
|
||||
' </bpmn2:extensionElements>\n' +
|
||||
' <bpmn2:incoming>L7</bpmn2:incoming>\n' +
|
||||
' <bpmn2:incoming>L8</bpmn2:incoming>\n' +
|
||||
' <bpmn2:outgoing>L2</bpmn2:outgoing>\n' +
|
||||
' </bpmn2:userTask>\n' +
|
||||
' </bpmn2:process>\n' +
|
||||
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
|
||||
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_0uh8wmt_di" bpmnElement="L3">\n' +
|
||||
' <di:waypoint x="560" y="200" />\n' +
|
||||
' <di:waypoint x="560" y="250" />\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_01hb865_di" bpmnElement="L2">\n' +
|
||||
' <di:waypoint x="560" y="670" />\n' +
|
||||
' <di:waypoint x="560" y="732" />\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_1t81399_di" bpmnElement="L8">\n' +
|
||||
' <di:waypoint x="690" y="550" />\n' +
|
||||
' <di:waypoint x="690" y="630" />\n' +
|
||||
' <di:waypoint x="610" y="630" />\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_00vdr2t_di" bpmnElement="L7">\n' +
|
||||
' <di:waypoint x="430" y="550" />\n' +
|
||||
' <di:waypoint x="430" y="630" />\n' +
|
||||
' <di:waypoint x="510" y="630" />\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_1bnjbaa_di" bpmnElement="L5">\n' +
|
||||
' <di:waypoint x="535" y="400" />\n' +
|
||||
' <di:waypoint x="430" y="400" />\n' +
|
||||
' <di:waypoint x="430" y="470" />\n' +
|
||||
' <bpmndi:BPMNLabel>\n' +
|
||||
' <dc:Bounds x="456" y="382" width="55" height="14" />\n' +
|
||||
' </bpmndi:BPMNLabel>\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_12ug1tp_di" bpmnElement="L6">\n' +
|
||||
' <di:waypoint x="585" y="400" />\n' +
|
||||
' <di:waypoint x="690" y="400" />\n' +
|
||||
' <di:waypoint x="690" y="470" />\n' +
|
||||
' <bpmndi:BPMNLabel>\n' +
|
||||
' <dc:Bounds x="611" y="382" width="56" height="14" />\n' +
|
||||
' </bpmndi:BPMNLabel>\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_1miguqf_di" bpmnElement="L4">\n' +
|
||||
' <di:waypoint x="560" y="330" />\n' +
|
||||
' <di:waypoint x="560" y="375" />\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNEdge id="Flow_1u6pmzo_di" bpmnElement="L1">\n' +
|
||||
' <di:waypoint x="560" y="68" />\n' +
|
||||
' <di:waypoint x="560" y="120" />\n' +
|
||||
' </bpmndi:BPMNEdge>\n' +
|
||||
' <bpmndi:BPMNShape id="Event_0byql27_di" bpmnElement="N1">\n' +
|
||||
' <dc:Bounds x="542" y="32" width="36" height="36" />\n' +
|
||||
' <bpmndi:BPMNLabel>\n' +
|
||||
' <dc:Bounds x="539" y="2" width="43" height="14" />\n' +
|
||||
' </bpmndi:BPMNLabel>\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' <bpmndi:BPMNShape id="Gateway_0qd58o6_di" bpmnElement="N9" isMarkerVisible="true">\n' +
|
||||
' <dc:Bounds x="535" y="375" width="50" height="50" />\n' +
|
||||
' <bpmndi:BPMNLabel>\n' +
|
||||
' <dc:Bounds x="538" y="432" width="44" height="14" />\n' +
|
||||
' </bpmndi:BPMNLabel>\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' <bpmndi:BPMNShape id="Event_1h4oob7_di" bpmnElement="N3">\n' +
|
||||
' <dc:Bounds x="542" y="732" width="36" height="36" />\n' +
|
||||
' <bpmndi:BPMNLabel>\n' +
|
||||
' <dc:Bounds x="539" y="775" width="43" height="14" />\n' +
|
||||
' </bpmndi:BPMNLabel>\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' <bpmndi:BPMNShape id="Activity_0g48n8q_di" bpmnElement="N2">\n' +
|
||||
' <dc:Bounds x="510" y="120" width="100" height="80" />\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' <bpmndi:BPMNShape id="Activity_04wpn1b_di" bpmnElement="N4">\n' +
|
||||
' <dc:Bounds x="510" y="250" width="100" height="80" />\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' <bpmndi:BPMNShape id="Activity_0j8meci_di" bpmnElement="N5">\n' +
|
||||
' <dc:Bounds x="380" y="470" width="100" height="80" />\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' <bpmndi:BPMNShape id="Activity_0pa1f64_di" bpmnElement="N6">\n' +
|
||||
' <dc:Bounds x="640" y="470" width="100" height="80" />\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' <bpmndi:BPMNShape id="Activity_0qmb4lo_di" bpmnElement="N7">\n' +
|
||||
' <dc:Bounds x="510" y="590" width="100" height="80" />\n' +
|
||||
' </bpmndi:BPMNShape>\n' +
|
||||
' </bpmndi:BPMNPlane>\n' +
|
||||
' </bpmndi:BPMNDiagram>\n' +
|
||||
'</bpmn2:definitions>\n';
|
||||
|
||||
|
||||
//region -----分类弹框逻辑-----
|
||||
const cateModal = ref();
|
||||
const openCateModal = () => {
|
||||
cateModal.value.openModal();
|
||||
};
|
||||
const cateChoose = (node: any) => {
|
||||
if (node == null) {
|
||||
form.value.cate = null;
|
||||
} else {
|
||||
form.value.cate = { id: node.id, name: node.name };
|
||||
}
|
||||
};
|
||||
//endregion
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user