update 新增过期时间选择组件
This commit is contained in:
LiuHao
parent
21554d2bfa
commit
e35cf04d68
@ -1,4 +1,15 @@
|
||||
// cover some element-ui styles
|
||||
|
||||
.el-collapse {
|
||||
.collapse__title {
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.0em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin-bottom: 10px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="containers">
|
||||
<el-dialog ref="flowDialogRef" v-model="dialog.visible" width="100%" fullscreen :title="dialog.title" @close="closeDialog">
|
||||
<el-dialog ref="flowDialogRef" v-model="dialog.visible" width="100%" fullscreen :title="dialog.title">
|
||||
<div class="app-containers">
|
||||
<el-container class="h-full">
|
||||
<el-container style="align-items: stretch">
|
||||
@ -408,7 +408,6 @@ const getProcessElement = () => {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
}
|
||||
.process-panel {
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -1,87 +1,115 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-collapse>
|
||||
<el-collapse-item title="常规" name="1">
|
||||
<el-form ref="formRef" size="small" :model="formData" :rules="formRules" label-width="90px">
|
||||
<el-form-item prop="id" label="节点 ID">
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="name" label="节点名称">
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.auditUserType" prop="auditUserType" label="人员类型">
|
||||
<el-select v-model="formData.auditUserType">
|
||||
<el-option v-for="item in AuditUserTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.USER && showConfig.users" style="">
|
||||
<el-badge :value="formData.users.length" :max="99">
|
||||
<el-button type="primary" @click="openUserSelect">选择人员</el-button>
|
||||
<UserSelect ref="userSelectRef" v-model="formData.users"></UserSelect>
|
||||
</el-badge>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.ROLE && showConfig.roles" style="">
|
||||
<el-badge :value="formData.users.length" :max="99">
|
||||
<el-button type="primary" disabled @click="openUserSelect">选择角色</el-button>
|
||||
<UserSelect ref="userSelectRef" v-model="formData.roles"></UserSelect>
|
||||
</el-badge>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.SPECIFY && showConfig.specifyDesc" style="">
|
||||
<el-radio-group v-model="formData.specifyDesc" class="ml-4">
|
||||
<el-radio v-for="item in SpecifyDesc" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.multipleUserAuditType" prop="multipleUserAuditType" label="多人审批方式">
|
||||
<el-radio-group v-model="formData.multipleUserAuditType" class="ml-4 block-radio">
|
||||
<el-radio v-for="item in MultipleUserAuditType" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.async" prop="sync" label="是否异步">
|
||||
<el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
|
||||
<el-input v-model="formData.priority"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
|
||||
<el-input v-model="formData.skipExpression"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
|
||||
<el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发">
|
||||
<el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量">
|
||||
<el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量">
|
||||
<el-input v-model="formData.ruleVariablesInput"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.exclude" prop="exclude" label="排除">
|
||||
<el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.class" prop="class" label="类">
|
||||
<el-input v-model="formData.class"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
|
||||
<el-date-picker v-model="formData.dueDate" type="datetime" @change="dueDateChange" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.executionListener" label="执行监听器" style="margin-bottom: 0"> </el-form-item>
|
||||
<ExecutionListener v-if="showConfig.executionListener" :modeler="modeler" :element="element"></ExecutionListener>
|
||||
<el-form-item v-if="showConfig.taskListener" label="任务监听器" style="margin-bottom: 0"> </el-form-item>
|
||||
<TaskListener v-if="showConfig.taskListener" :modeler="modeler" :element="element"></TaskListener>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<el-form ref="formRef" size="small" :model="formData" :rules="formRules" label-width="90px">
|
||||
<el-collapse>
|
||||
<el-collapse-item name="1">
|
||||
<template #title>
|
||||
<div class="collapse__title">
|
||||
<el-icon>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
常规
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-form-item prop="id" label="节点 ID">
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="name" label="节点名称">
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
|
||||
<el-input v-model="formData.skipExpression"> </el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="2">
|
||||
<template #title>
|
||||
<div class="collapse__title">
|
||||
<el-icon>
|
||||
<Checked />
|
||||
</el-icon>
|
||||
任务
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-form-item v-if="showConfig.async" prop="sync" label="是否异步">
|
||||
<el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.auditUserType" prop="auditUserType" label="人员类型">
|
||||
<el-select v-model="formData.auditUserType">
|
||||
<el-option v-for="item in AuditUserTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.USER && showConfig.users" style="">
|
||||
<el-badge :value="formData.users.length" :max="99">
|
||||
<el-button type="primary" @click="openUserSelect">选择人员</el-button>
|
||||
<UserSelect ref="userSelectRef" v-model="formData.users"></UserSelect>
|
||||
</el-badge>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.ROLE && showConfig.roles" style="">
|
||||
<el-badge :value="formData.users.length" :max="99">
|
||||
<el-button type="primary" disabled @click="openUserSelect">选择角色</el-button>
|
||||
<UserSelect ref="userSelectRef" v-model="formData.roles"></UserSelect>
|
||||
</el-badge>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.auditUserType === AuditUserTypeEnum.SPECIFY && showConfig.specifyDesc" style="">
|
||||
<el-radio-group v-model="formData.specifyDesc" class="ml-4">
|
||||
<el-radio v-for="item in SpecifyDesc" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.multipleUserAuditType" prop="multipleUserAuditType" label="多人审批方式">
|
||||
<el-radio-group v-model="formData.multipleUserAuditType" class="ml-4 block-radio">
|
||||
<el-radio v-for="item in MultipleUserAuditType" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
|
||||
<!-- <el-date-picker v-model="formData.dueDate" type="datetime" @change="dueDateChange" />-->
|
||||
<el-input v-model="formData.dueDate" @click="openDueDate"></el-input>
|
||||
<DueDate ref="dueDateRef" v-model="formData.dueDate"></DueDate>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
|
||||
<el-input-number v-model="formData.priority" :min="0"> </el-input-number>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
|
||||
<el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发">
|
||||
<el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量">
|
||||
<el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量">
|
||||
<el-input v-model="formData.ruleVariablesInput"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.exclude" prop="exclude" label="排除">
|
||||
<el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showConfig.class" prop="class" label="类">
|
||||
<el-input v-model="formData.class"> </el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="showConfig.executionListener" label="执行监听器" style="margin-bottom: 0"> </el-form-item>
|
||||
<ExecutionListener v-if="showConfig.executionListener" :modeler="modeler" :element="element"></ExecutionListener>
|
||||
<el-form-item v-if="showConfig.taskListener" label="任务监听器" style="margin-bottom: 0"> </el-form-item>
|
||||
<TaskListener v-if="showConfig.taskListener" :modeler="modeler" :element="element"></TaskListener>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import UserSelect from '@/components/UserSelect';
|
||||
import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue';
|
||||
import { Element, Modeler } from 'bpmn';
|
||||
import { TaskPanel } from 'bpmnDesign';
|
||||
import { AuditUserTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
|
||||
import { Checked, InfoFilled } from '@element-plus/icons-vue';
|
||||
|
||||
interface PropType {
|
||||
modeler: Modeler;
|
||||
@ -100,6 +128,7 @@ const { parse, formData } = useParseElement<TaskPanel>({
|
||||
name: '',
|
||||
users: [],
|
||||
roles: [],
|
||||
dueDate: '',
|
||||
multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
|
||||
auditUserType: AuditUserTypeEnum.USER,
|
||||
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
|
||||
@ -107,10 +136,13 @@ const { parse, formData } = useParseElement<TaskPanel>({
|
||||
});
|
||||
|
||||
const userSelectRef = ref<InstanceType<typeof UserSelect>>();
|
||||
|
||||
const dueDateRef = ref<InstanceType<typeof DueDate>>();
|
||||
const openUserSelect = () => {
|
||||
userSelectRef.value.open();
|
||||
};
|
||||
const openDueDate = () => {
|
||||
dueDateRef.value.openDialog();
|
||||
};
|
||||
|
||||
const syncChange = (newVal) => {
|
||||
updateProperties({ 'flowable:async': newVal });
|
||||
|
||||
211
src/components/BpmnDesign/panel/property/DueDate.vue
Normal file
211
src/components/BpmnDesign/panel/property/DueDate.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-model="visible" :title="title" width="500px" append-to-body>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="小时">
|
||||
<el-radio-group v-model="hourValue" @change="hourChange">
|
||||
<el-radio-button label="4" />
|
||||
<el-radio-button label="8" />
|
||||
<el-radio-button label="12" />
|
||||
<el-radio-button label="24" />
|
||||
<el-radio-button label="自定义" />
|
||||
<el-input-number v-show="hourValue === '自定义'" v-model="customHourValue" :min="1" @change="customHourValueChange"></el-input-number>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="天">
|
||||
<el-radio-group v-model="dayValue" @change="dayChange">
|
||||
<el-radio-button label="1" />
|
||||
<el-radio-button label="2" />
|
||||
<el-radio-button label="3" />
|
||||
<el-radio-button label="4" />
|
||||
<el-radio-button label="自定义" />
|
||||
<el-input-number v-show="dayValue === '自定义'" v-model="customDayValue" :min="1" @change="customDayValueChange"></el-input-number>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="周">
|
||||
<el-radio-group v-model="weekValue" @change="weekChange">
|
||||
<el-radio-button label="1" />
|
||||
<el-radio-button label="2" />
|
||||
<el-radio-button label="3" />
|
||||
<el-radio-button label="4" />
|
||||
<el-radio-button label="自定义" />
|
||||
<el-input-number v-show="weekValue === '自定义'" v-model="customWeekValue" :min="1" @change="customWeekValueChange"></el-input-number>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="月">
|
||||
<el-radio-group v-model="monthValue" @change="monthChange">
|
||||
<el-radio-button label="1" />
|
||||
<el-radio-button label="2" />
|
||||
<el-radio-button label="3" />
|
||||
<el-radio-button label="4" />
|
||||
<el-radio-button label="自定义" />
|
||||
<el-input-number v-show="monthValue === '自定义'" v-model="customMonthValue" :min="1" @change="customMonthValueChange"></el-input-number>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="confirm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useDialog from '@/hooks/useDialog';
|
||||
|
||||
interface PropType {
|
||||
modelValue: string;
|
||||
}
|
||||
const prop = defineProps<PropType>();
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const { title, visible, openDialog, closeDialog } = useDialog({
|
||||
title: '设置任务到期时间'
|
||||
});
|
||||
const formValue = ref();
|
||||
const valueType = ref();
|
||||
|
||||
const hourValue = ref('');
|
||||
const dayValue = ref('');
|
||||
const weekValue = ref('');
|
||||
const monthValue = ref('');
|
||||
|
||||
const customHourValue = ref(1);
|
||||
const customDayValue = ref(1);
|
||||
const customWeekValue = ref(1);
|
||||
const customMonthValue = ref(1);
|
||||
|
||||
const hourValueConst = ['4', '8', '12', '24'];
|
||||
const dayAndWeekAndMonthValueConst = ['1', '2', '3', '4'];
|
||||
|
||||
const initValue = () => {};
|
||||
|
||||
const confirm = () => {
|
||||
// 深拷贝赋值更新modelValue
|
||||
emit('update:modelValue', formValue.value);
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
const customHourValueChange = (customHourValue) => {
|
||||
valueType.value = 'H';
|
||||
formValue.value = `PT${customHourValue}H`;
|
||||
|
||||
dayValue.value = '';
|
||||
weekValue.value = '';
|
||||
monthValue.value = '';
|
||||
customDayValue.value = 1;
|
||||
customWeekValue.value = 1;
|
||||
customMonthValue.value = 1;
|
||||
};
|
||||
const customDayValueChange = (customDayValue) => {
|
||||
valueType.value = 'D';
|
||||
formValue.value = `P${customDayValue}D`;
|
||||
hourValue.value = '';
|
||||
weekValue.value = '';
|
||||
monthValue.value = '';
|
||||
|
||||
customHourValue.value = 1;
|
||||
customWeekValue.value = 1;
|
||||
customMonthValue.value = 1;
|
||||
};
|
||||
|
||||
const customWeekValueChange = (customWeekValue) => {
|
||||
valueType.value = 'W';
|
||||
formValue.value = `P${customWeekValue}W`;
|
||||
hourValue.value = '';
|
||||
dayValue.value = '';
|
||||
monthValue.value = '';
|
||||
|
||||
customHourValue.value = 1;
|
||||
customDayValue.value = 1;
|
||||
customMonthValue.value = 1;
|
||||
};
|
||||
|
||||
const customMonthValueChange = (customMonthValue) => {
|
||||
valueType.value = 'M';
|
||||
formValue.value = `P${customMonthValue}M`;
|
||||
hourValue.value = '';
|
||||
dayValue.value = '';
|
||||
weekValue.value = '';
|
||||
|
||||
customHourValue.value = 1;
|
||||
customDayValue.value = 1;
|
||||
customWeekValue.value = 1;
|
||||
};
|
||||
|
||||
const hourChange = (hourValue) => {
|
||||
valueType.value = 'H';
|
||||
if (hourValue === '自定义') {
|
||||
formValue.value = `PT${customHourValue.value}H`;
|
||||
} else {
|
||||
formValue.value = `PT${hourValue}H`;
|
||||
}
|
||||
|
||||
dayValue.value = '';
|
||||
weekValue.value = '';
|
||||
monthValue.value = '';
|
||||
customDayValue.value = 1;
|
||||
customWeekValue.value = 1;
|
||||
customMonthValue.value = 1;
|
||||
};
|
||||
const dayChange = (dayValue) => {
|
||||
valueType.value = 'D';
|
||||
if (dayValue === '自定义') {
|
||||
formValue.value = `P${customDayValue.value}D`;
|
||||
} else {
|
||||
formValue.value = `P${dayValue}D`;
|
||||
}
|
||||
|
||||
hourValue.value = '';
|
||||
weekValue.value = '';
|
||||
monthValue.value = '';
|
||||
|
||||
customHourValue.value = 1;
|
||||
customWeekValue.value = 1;
|
||||
customMonthValue.value = 1;
|
||||
};
|
||||
const weekChange = (weekValue) => {
|
||||
valueType.value = 'W';
|
||||
if (weekValue === '自定义') {
|
||||
formValue.value = `P${customWeekValue.value}W`;
|
||||
} else {
|
||||
formValue.value = `P${weekValue}W`;
|
||||
}
|
||||
|
||||
hourValue.value = '';
|
||||
dayValue.value = '';
|
||||
monthValue.value = '';
|
||||
|
||||
customHourValue.value = 1;
|
||||
customDayValue.value = 1;
|
||||
customMonthValue.value = 1;
|
||||
};
|
||||
const monthChange = (monthValue) => {
|
||||
valueType.value = 'M';
|
||||
if (monthValue === '自定义') {
|
||||
formValue.value = `P${customMonthValue.value}M`;
|
||||
} else {
|
||||
formValue.value = `P${monthValue}M`;
|
||||
}
|
||||
|
||||
hourValue.value = '';
|
||||
dayValue.value = '';
|
||||
weekValue.value = '';
|
||||
|
||||
customHourValue.value = 1;
|
||||
customDayValue.value = 1;
|
||||
customWeekValue.value = 1;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initValue();
|
||||
});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
closeDialog
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user