cmc-oa/oa-ui-app/pages/components/returnPopup.vue

<!--
 * @Author: ysh
 * @Date: 2025-03-17 15:04:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-17 15:43:28
-->
<template>
  <view class="add-popup">
    <view class="popup-content">
      <text class="popup-title">退回菜单</text>
      <uni-forms ref="form" :modelValue="taskForm" :rules="rules" label-position="top" label-width="150">
        <uni-forms-item label="退回节点" name="targetKey" required class="form-item">
          <uv-radio-group v-model="taskForm.targetKey" placement="column">
            <uv-radio :name="item.id" :label="item.name" v-for="(item, index) in returnTaskList" :customStyle="{margin: '8px'}" 
              :key="'r' + index"></uv-radio>
          </uv-radio-group>
        </uni-forms-item>
        <uni-forms-item label="退回意见" name="comment" required class="form-item">
          <uv-textarea v-model="taskForm.comment" placeholder="请输入退回意见"></uv-textarea>
        </uni-forms-item>
        <view class="popup-buttons">
          <u-button style="margin-right: 10px;" @click="cancel">取消</u-button>
          <u-button type="primary" class="confirm" @click="taskReturn">确认</u-button>
        </view>
      </uni-forms>

    </view>
  </view>
</template>

<script>
import { complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate, flowTaskForm, } from "@/api/flowable/todo";
export default {
  props: {
    taskForm: Object,
    comment: String,
  },
  data() {
    return {
      rules: {
        targetKey: {
          rules: [{
            required: true,
            errorMessage: '请选择退回节点',
          },]
        },
        comment: {
          rules: [{
            required: true,
            errorMessage: '请填写退回意见',
          },]
        },
      },
      returnTaskList: [],
    }
  },
  created() {
    this.handleReturn();
  },
  mounted() {
    if (this.comment != '') {
      this.taskForm.comment = this.comment
    }
  },
  watch: {
    comment(newval) {
      this.taskForm.comment = newval
    }
  },
  methods: {
    /** 可退回任务列表 */
    handleReturn() {
      returnList(this.taskForm).then(res => {
        this.returnTaskList = res.data.reverse();
        this.taskForm.variables = null;
      })
    },
    /** 提交退回任务 */
    taskReturn() {
      this.$refs.form.validate().then(resopnse => {
        returnTask(this.taskForm).then(res => {
          this.$modal.msgSuccess(res.msg);
          this.$emit('goBack')
        });
      }).catch(err => {
        console.log('表单错误信息：', err);
      })
    },
    cancel() {
      this.$emit('cancel')
    },
    confirm() {

    }
  },
}
</script>

<style lang="scss" scoped>
.add-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 40rpx;
  }

  .popup-content {
    background-color: white;
    width: 600rpx;
    padding: 40rpx;
    border-radius: 20rpx;
  }

  .popup-buttons {
    display: flex;
  }
}
</style>