流程操作按钮操作优化

client_h5/src/components/flowForm.vue

@@ -72,20 +72,17 @@
       </template>
     </div>
     <div class="fixed-btn" v-if="isSubmitVisabled">
-      <div class="one">
-        <div v-if="isObsoleteActivity">
-          <van-button round block type="warning" @click="operationHandle('obsolete')">
-              作废
-          </van-button>
-        </div>
-        <div v-if="isCallbackActivity">
-          <van-button round block type="success" @click="operationHandle('calback')">
-              退回
-          </van-button>
-        </div>
+      <div class="one" v-if="isObsoleteActivity || isCallbackActivity">
+        <van-popover v-model:show="showPopover" placement="top" :actions="actions" @select="onSelect">
+          <template #reference>
+            <van-button  style="border-radius: 12px;"  block type="warning">
+              <van-icon name="ellipsis" style="font-size: 20px;font-weight: bold;" />
+            </van-button>
+          </template>
+        </van-popover>
       </div>
       <div class="two">
-        <van-button :disabled="isSubmitDisabled" round block type="primary" @click="submitHandle">
+        <van-button :disabled="isSubmitDisabled" style="border-radius: 12px;" block type="primary" @click="submitHandle">
             转件
         </van-button>
       </div>
@@ -292,6 +289,28 @@ const operationHandle = (type: string) => {
   visiabledType.value = type
 }
 
+type ActionItemTyp = {
+  text: string
+}
+const actions = ref<ActionItemTyp[]>([])
+if (isObsoleteActivity.value) {
+  actions.value.push({
+    text: '作废'
+  })
+}
+if(isCallbackActivity.value){
+  actions.value.push({
+    text: '退回'
+  })
+}
+const showPopover = ref<boolean>(false)
+const onSelect = (item: ActionItemTyp) => {
+  if (item.text === '作废') {
+    operationHandle('obsolete')
+  } else if (item.text === '退回') {
+    operationHandle('calback')
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -307,18 +326,14 @@ const operationHandle = (type: string) => {
   }
   >.fixed-btn {
     padding: 10px 10px;
+    display: flex;
+    align-items: center;
     >.one {
-      display: flex;
-      flex-direction: row;
-      >div {
-        display: inline-block;
-        flex: 1;
-        margin: 0px 5px;
-      }
+      text-align: right;
     }
     >.two {
+      flex: 1;
       margin: 0px 5px;
-      margin-top: 10px;
     }
   }
   .flowOpinionBox {