yjxp-web/src/views/worker/eventManagement/approvalDialog.vue

<!-- 请示批复 -->
<template>
    <van-popup v-model:show="visible">
        <van-form @submit="on_submit">
            <div class="van-doc-block__title">请示批复</div>
            <van-cell-group inset>
                <van-field
                    required
                    v-model="form.approval_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 { getCurrentInstance, ref, watch, defineEmits } from 'vue';
import { addApproval } from '@/api/emergencyCommandMap/JointDuty';
import { showSuccessToast } from 'vant';

const proxy = getCurrentInstance()?.proxy;

interface Form {
    feeback_id: string;
    approval_content: string;
}
interface Props {
    modelValue: boolean;
    data: Form;
}

const form = ref<Form>({
    feeback_id: "",
    approval_content: ""
});

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

const emits = defineEmits(['update:modelValue']);
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      form.value = props.data;
    }
    visible.value = props.modelValue;
  }
);

const visible = ref(false);

const on_submit = () => {
    console.log('on_submit');
    addApproval(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>