vue3.0页面模板-示例

index.vue

<template>
    <!-- vue3.0模板 -->
 <div  v-if="isLook"></div>
</template>

<script lang="ts">
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    reactive,
    ref,
    toRefs,
    watch,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
export default defineComponent({
    name: 'index',
    // props: {
    //     index: {
    //         type: String
    //     }
    // },
    components: {
    },
    setup(props, ctx) {
        const route = useRoute();
        const state = reactive({
            dialogVisible: false,
             isLook: true,
            formData: {
                params: '',
                date: [],
            },
        });
        // 批量审批
        const batchMethods = {
            approved() {
            },
            rebut() {
              
            },
        };
        const api = {
            //获取审批详情
            getDetails(row) {
                const data = {
                    id: parseInt(row.id),
                    code: row.code, //事件编号
                };
                state.detailId = row.id;
                state.isLook = true;
                //查看详情

                MyProcess.getMyProcessDetails(data)
                    .then(res => {
                        if (!res.status) {
                            state.isLook = true;
                        } else {
                            state.result = res.data.processAuditList || [];
                            state.isLook = false;
                        }
                    })
                    .finally(() => {
                        state.isLook = false;
                    });
            },
        };
        const router = useRouter();
        onMounted(() => {
            batchMethods.approved();
        });
        watch(
            () => state.isLook,
            (n, o) => {
                n && batchMethods.approved();
            }
        );
        //不可选
        const selectable = (row, index) => {
        };

        return {
            selectable,
            // ploading,
            ...toRefs(state),
            ...batchMethods,
        };
    },
});
</script>

<style lang="scss" scoped>
:deep(.el-dropdown) {
    font-size: 12px;
}
</style>