it-console/code/web/IT工具综合平台/src/views/overview/Desktop.vue

<!--
 * @Author: Kane
 * @Date: 2023-01-06 15:30:12
 * @LastEditors: Kane
 * @LastEditTime: 2023-02-04 22:38:47
 * @FilePath: /IT工具综合平台/src/views/overview/desktop.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <el-form :inline="true" label-width="5em" class="query_form">
        <el-row :gutter="10">
            <el-col :span="7">
                <el-form-item label="需求编号">
                    <el-input style="width:100%;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="标题">
                    <el-input style="width:100%;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="提交人">
                    <el-input style="width:100%;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="3"></el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="7">
                <el-form-item label="状态">
                    <el-select style="width:100%;">
                        <el-option key="部门审批" value="部门审批"></el-option>
                        <el-option key="需求分析" value="需求分析">需求分析</el-option>
                        <el-option key="技术开发" value="技术开发">技术开发</el-option>
                        <el-option key="被退回" value="被退回"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="提交日期">
                    <el-date-picker style="width:100%;" v-model="start_date"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="至">
                    <el-date-picker style="width:100%;" v-model="end_date"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="3"></el-col>
        </el-row>
        <el-row>
            <el-col :span="14">
                <el-form-item label="提交日期">
                    <el-date-picker type="daterange" range-separator="至" style="width:100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="10"></el-col>
        </el-row>
    </el-form>
    <el-button type="danger" @click="testRequest">测试</el-button>
    <el-button type="danger" @click="testError">错误</el-button>
</template>

<script >
import { reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { query_requirement_status } from "@/utils/api/requirement/requirement.js";

export default {
    name: "DeskTop",
    setup()
    {
        let start_date = reactive(new Date());
        let end_date = reactive(new Date());
        const router = useRouter();

        onBeforeMount(() =>
        {
            end_date = new Date(Date.now());
            start_date = new Date();

            start_date.setMonth(end_date.getMonth() - 1);
        });

        const testRequest = () =>
        {
            //加载数据;
            query_requirement_status()
                .then((response) =>
                {
                    // debugger;
                    const data = response.data;

                    console.log(data);
                })
                .catch((error) =>
                {
                    // debugger;
                    console.log(error);
                });
        };

        const testError = () => 
        {
            router.push("/error-page");
        };

        return {
            start_date,
            end_date,
            testRequest,
            testError,
        };
    },
};
</script>

<style scoped>
.query_form {
    max-width: 63em;
}
</style>