update 优化过期时间选择

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -42,7 +42,7 @@
                 <el-form-item label="分配人员">
                   <el-input v-model="assignee.userName" disabled>
                     <template #append>
-                      <el-button icon="Search" size="small" type="primary" @click="openSingleUserSelect" />
+                      <el-button icon="Search" type="primary" @click="openSingleUserSelect" />
                     </template>
                   </el-input>
                 </el-form-item>
@@ -92,7 +92,11 @@
             </el-tabs>
 
             <el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
-              <el-input v-model="formData.dueDate" @click="openDueDate"></el-input>
+              <el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click.native="openDueDate">
+                <template #append>
+                  <el-button icon="Search" type="primary" @click="openDueDate" />
+                </template>
+              </el-input>
             </el-form-item>
             <el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
               <el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number>
@@ -218,7 +222,7 @@
     <UserSelect ref="userSelectRef" :data="formData.candidateUsers" @confirm-call-back="userSelectCallBack"></UserSelect>
     <UserSelect ref="singleUserSelectRef" :data="formData.assignee" :multiple="false" @confirm-call-back="singleUserSelectCallBack"></UserSelect>
     <RoleSelect ref="roleSelectRef" :data="formData.candidateGroups" @confirm-call-back="roleSelectCallBack"></RoleSelect>
-    <DueDate ref="dueDateRef" v-model="formData.dueDate"></DueDate>
+    <DueDate ref="dueDateRef" v-model="formData.dueDate" :data="formData.dueDate" @confirm-call-back="dueDateCallBack"></DueDate>
   </div>
 </template>
 <script setup lang="ts">
@@ -274,7 +278,7 @@ const openSingleUserSelect = () => {
 const openRoleSelect = () => {
   roleSelectRef.value.open();
 };
-const openDueDate = () => {
+const openDueDate = (e) => {
   dueDateRef.value.openDialog();
 };
 
@@ -320,7 +324,6 @@ const userSelectCallBack = (data: UserVO[]) => {
   }
   updateProperties({ extensionElements: extensionElements });
 };
-
 const roleSelectCallBack = (data: RoleVO[]) => {
   if (data.length === 0) {
     formData.value.candidateGroups = '';
@@ -331,6 +334,9 @@ const roleSelectCallBack = (data: RoleVO[]) => {
     updateProperties({ 'flowable:candidateGroups': roleIds });
   }
 };
+const dueDateCallBack = (data: string) => {
+  updateProperties({ 'flowable:dueDate': data });
+};
 
 const taskTabClick = (e) => {
   formData.value.candidateGroups = '';
@@ -342,7 +348,6 @@ const taskTabClick = (e) => {
 const syncChange = (newVal) => {
   updateProperties({ 'flowable:async': newVal });
 };
-
 const skipExpressionChange = (newVal) => {
   updateProperties({ 'flowable:skipExpression': newVal && newVal.length > 0 ? newVal : undefined });
 };
@@ -361,7 +366,6 @@ const multiInstanceTypeChange = (newVal) => {
     updateProperties({ loopCharacteristics: undefined });
   }
 };
-
 const collectionChange = (newVal) => {
   let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
   if (!loopCharacteristics) {
@@ -394,7 +398,9 @@ const completionConditionChange = (newVal) => {
   }
   updateProperties({ loopCharacteristics: loopCharacteristics });
 };
-
+const dueDateChange = (newVal) => {
+  updateProperties({ 'flowable:dueDate': newVal && newVal.length > 0 ? newVal : undefined });
+};
 const selectUserLength = computed(() => {
   if (formData.value.candidateUsers) {
     return formData.value.candidateUsers.split(',').length;
@@ -409,16 +415,7 @@ const selectRoleLength = computed(() => {
     return 0;
   }
 });
-watch(
-  () => formData.value.dueDate,
-  (newVal: string) => {
-    if (newVal) {
-      updateProperties({ 'flowable:dueDate': newVal });
-    } else {
-      updateProperties({ 'flowable:dueDate': undefined });
-    }
-  }
-);
+
 onBeforeMount(() => {
   const extensionElements = getExtensionElements(false);
   if (extensionElements && extensionElements.get('values')) {

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog v-model="visible" :title="title" width="500px" append-to-body>
+    <el-dialog v-model="visible" :title="title" width="600px" append-to-body>
       <el-form label-width="100px">
         <el-form-item label="小时">
           <el-radio-group v-model="hourValue" @change="hourChange">
@@ -58,10 +58,14 @@
 import useDialog from '@/hooks/useDialog';
 
 interface PropType {
-  modelValue: string;
+  modelValue?: string;
+  data?: string;
 }
-const prop = defineProps<PropType>();
-const emit = defineEmits(['update:modelValue']);
+const prop = withDefaults(defineProps<PropType>(), {
+  modelValue: '',
+  data: ''
+});
+const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
 
 const { title, visible, openDialog, closeDialog } = useDialog({
   title: '设置任务到期时间'
@@ -83,11 +87,11 @@ const hourValueConst = ['4', '8', '12', '24'];
 const dayAndWeekAndMonthValueConst = ['1', '2', '3', '4'];
 
 const initValue = () => {
-  formValue.value = prop.modelValue;
-  if (prop.modelValue) {
-    const lastStr = prop.modelValue.substring(prop.modelValue.length - 1);
+  formValue.value = prop.data;
+  if (prop.data) {
+    const lastStr = prop.data.substring(prop.data.length - 1);
     if (lastStr === 'H') {
-      const hourValueValue = prop.modelValue.substring(2, prop.modelValue.length - 1);
+      const hourValueValue = prop.data.substring(2, prop.data.length - 1);
       if (hourValueConst.includes(hourValueValue)) {
         hourValue.value = hourValueValue;
       } else {
@@ -95,7 +99,7 @@ const initValue = () => {
         customHourValue.value = Number(hourValueValue);
       }
     }
-    const dayAndWeekAndMonthValue = prop.modelValue.substring(1, prop.modelValue.length - 1);
+    const dayAndWeekAndMonthValue = prop.data.substring(1, prop.data.length - 1);
     if (lastStr === 'D') {
       if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
         dayValue.value = dayAndWeekAndMonthValue;
@@ -124,8 +128,8 @@ const initValue = () => {
 };
 
 const confirm = () => {
-  // 深拷贝赋值更新modelValue
   emit('update:modelValue', formValue.value);
+  emit('confirmCallBack', formValue.value);
   closeDialog();
 };
 
@@ -232,9 +236,15 @@ const monthChange = (monthValue) => {
   customWeekValue.value = 1;
 };
 
-onMounted(() => {
-  initValue();
-});
+watch(
+  () => visible.value,
+  () => {
+    if (visible.value) {
+      initValue();
+    }
+  }
+);
+
 defineExpose({
   openDialog,
   closeDialog