yjxp-web/src/views/workApproval/confirmDialog.vue

<template>
    <van-popup v-model:show="visible">
        <van-form @submit="on_submit">
            <div class="van-doc-block__title">{{ title }}</div>
            <van-cell-group inset>
                <van-field
                    required
                    v-model="form.content"
                    placeholder="请填写审批内容"
                    :rules="[{ required: true, message: '请填写审批内容'  }]"
                    rows="3"
                    autosize
                    type="textarea"
                    maxlength="150"
                    show-word-limit
                />

            </van-cell-group>
            <div style="margin: 3.0vmin;display: flex;
                flex-direction: row;
                justify-content: flex-end;">
                <div style="display: flex;        flex-direction: row;  justify-content: space-between;">
                    <van-button @click="closeDialog(false)" style="margin-right:10px;">取 消</van-button>
                    <van-button type="primary" native-type="submit">提 交</van-button>
                </div>
            </div>
        </van-form>
    </van-popup>

</template>

<script lang="ts" setup>
import { WorkApprovalConfirm } from "@/api/InformationReception/InformationReception";
import { showSuccessToast } from 'vant';

const proxy = getCurrentInstance()?.proxy;
const title = ref('');

interface Form {
    info_id: string;
    content: string;
    examine_type: string;
}
interface Props {
    modelValue: boolean;
    data: Form;
}

const form = ref<Form>({
    info_id: "",
    content: "",
    examine_type: ""
});

const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});

const emits = defineEmits(['update:modelValue']);
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      form.value = props.data;
      title.value = form.value.examine_type == 'approved' ? "审批通过": "审批不通过";
    }
    visible.value = props.modelValue;
  }
);

const visible = ref(false);

const on_submit = () => {
    console.log('on_submit');
    WorkApprovalConfirm(form.value).then((res) => {
        showSuccessToast(res.msg);
        closeDialog(true)
    }).catch((err) => {
    });
};

const closeDialog = (t) => {
  emits('update:modelValue', t);
};

</script>

<style lang="scss" scoped>
.van-doc-block__title {
    color: var(--van-doc-text-color-4);
    margin: 0px;
    padding: 3vmin;
    font-size: 4.6vmin;
    font-weight: 600;
    line-height: 6.0vmin;
}
</style>