jsh_erp_app/components/audit-reject/audit-reject.vue

<template>
  <u-popup
    :show="show"
    mode="center"
    @close="close"
    @open="open"
    :round="10"
    :closeOnClickOverlay="false"
    :safeAreaInsetBottom="false"
    width="580rpx"
  >
    <view class="location-edit-popup">
      <view class="popup-header">
        <text class="popup-title">驳回复核任务</text>
        <u-icon name="close" size="20" @click="close"></u-icon>
      </view>

      <u-form
        :model="formData"
        labelPosition="top"
        labelWidth="100%"
        :borderBottom="false"
        ref="uForm"
        :rules="rules"
      >
        <u-form-item
          label="请输入驳回原因"
          required
          prop="reason"
          :borderBottom="false"
        >
          <u--textarea
            v-model="formData.reason"
            placeholder="请输入"
            :maxlength="100"
            count
          ></u--textarea>
        </u-form-item>
      </u-form>

      <view class="btn-group">
        <u-button
          class="btn cancel-btn"
          :plain="true"
          shape="square"
          @click="onCancel"
          >取消</u-button
        >
        <u-button
          class="btn confirm-btn"
          type="primary"
          shape="square"
          @click="onConfirm"
          >确认</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "RejectPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        reason: "",
      },
      rules: {
        reason: {
          type: "string",
          required: true,
          message: "请输入驳回原因",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  watch: {},
  methods: {
    close() {
      this.$emit("update:show", false);
    },
    open() {
      this.formData = {
        reason: "",
      };
    },
    onCancel() {
      this.close();
      this.$emit("cancel");
    },
    onConfirm() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          this.$emit("ok", this.formData.reason);
        })
        .catch((errors) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.location-edit-popup {
  padding: 30rpx;
  width: 580rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  .mt-20 {
    margin-top: 20rpx;
  }

  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;

    .btn {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;

      &.cancel-btn {
        margin-right: 20rpx;
        color: #666666;
        border-color: #dddddd;
      }

      &.confirm-btn {
        background-color: #2979ff;
      }
    }
  }
}
</style>