shuhi-ui/src/views/recycleOrder/detail/order-specified-discount.vue

<!-- 编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="460"
    v-model="visible"
    title="指定回收折扣"
    @open="handleOpen"
  >
    <SimpleForm
      :items="items"
      labelWidth="90px"
      ref="formRef"
      :initKeys="form"
    ></SimpleForm>
    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
      <el-button type="primary" @click="handleSumbit">确定</el-button>
    </template>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, nextTick } from 'vue';
  import { Flag, ChatDotSquare } from '@element-plus/icons-vue';
  import orderTimeline from '@/views/recycleOrder/components/order-timeline.vue';
  import SimpleForm from '@/components/CommonPage/SimpleForm.vue';
  import validators from '@/utils/validators';

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });

  /** 关闭弹窗 */
  const handleCancel = () => {
    visible.value = false;
    nextTick(() => {
      formRef.value?.resetForm();
    });
  };

  const form = reactive({
    discount: '0.01'
  });
  /** 弹窗打开事件 */
  const handleOpen = () => {
    visible.value = true;
    nextTick(() => {
      formRef.value?.assignFields(form);
    });
  };

  const items = reactive([
    {
      label: '回收折扣',
      prop: 'discount',
      type: 'input',
      required: true,
      itemProps: {
        rules: [validators.decimalRange]
      }
    }
  ]);

  const formRef = ref();
  const handleSumbit = () => {
    formRef.value?.submitForm().then((data) => {
      visible.value = false;
    });
  };

  defineExpose({
    handleOpen
  });
</script>