update 新增过期时间选择组件

src/assets/styles/element-ui.scss

@@ -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;

src/components/BpmnDesign/index.vue

@@ -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;

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -1,14 +1,41 @@
 <template>
   <div>
-    <el-collapse>
-      <el-collapse-item title="常规" name="1">
     <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>
@@ -36,15 +63,17 @@
                 <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-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
-            <el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
+              <!--              <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 v-model="formData.priority"> </el-input>
+              <el-input-number v-model="formData.priority" :min="0"> </el-input-number>
-          </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-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
           <el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
         </el-form-item>
@@ -63,25 +92,24 @@
         <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>
   </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 });

src/components/BpmnDesign/panel/property/DueDate.vue

@@ -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>