yjxp-web/src/views/worker/eventManagement/requestDialog.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
                    v-model="form.leader_unit"
                    label="领导单位："
                    placeholder="请选择领导所属单位名称"
                    :rules="[{ required: true, message: '请选择领导所属单位名称'  }]"
                />
                <van-field
                    v-model="form.leader_name"
                    label="领导姓名："
                    placeholder="请选择领导姓名"
                    :rules="[{ required: true, message: '请选择领导姓名'  }]"
                />
                <div style="font-size:14px;color:var(--van-field-label-color);margin-top:10px;padding-left: 15px;">请示信息：</div>
                <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 { getCurrentInstance, ref, watch, defineEmits } from 'vue';
import { addLeaderRequest } from '@/api/emergencyCommandMap/JointDuty';
import { showSuccessToast } from 'vant';

const proxy = getCurrentInstance()?.proxy;

interface Form {
    task_id: string;
    content: string;
    processing_status: string;
    feeback_type: string;
    leader_unit: string;
    leader_name: string;
}
interface Props {
    modelValue: boolean;
    data: Form;
}

const form = ref<Form>({
    task_id: "",
    content: "",
    processing_status: "",
    feeback_type: "",
    leader_unit: "",
    leader_name: ""
});

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');
    addLeaderRequest(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>