From e35cf04d683fae53cf9bb9e14724db759e32e713 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Thu, 25 Jan 2024 17:18:48 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=96=B0=E5=A2=9E=E8=BF=87=E6=9C=9F?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/element-ui.scss             |  13 +-
 src/components/BpmnDesign/index.vue           |   3 +-
 src/components/BpmnDesign/panel/TaskPanel.vue | 180 +++++++++------
 .../BpmnDesign/panel/property/DueDate.vue     | 211 ++++++++++++++++++
 4 files changed, 330 insertions(+), 77 deletions(-)
 create mode 100644 src/components/BpmnDesign/panel/property/DueDate.vue

diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index d4ce352..4657483 100644
--- a/src/assets/styles/element-ui.scss
+++ b/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;
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 89bf37c..2ee5e8c 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/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;
diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue
index 114cb7b..90851ee 100644
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/src/components/BpmnDesign/panel/TaskPanel.vue
@@ -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 });
diff --git a/src/components/BpmnDesign/panel/property/DueDate.vue b/src/components/BpmnDesign/panel/property/DueDate.vue
new file mode 100644
index 0000000..af3fc64
--- /dev/null
+++ b/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>