integrated_traffic_vue/src/views/performance_appraisal/departmental/index.vue

102 lines
3.4 KiB
Vue

<template>
<layout-card>
<el-tabs v-model="name" @tab-change="fnTabChange">
<el-tab-pane label="年度考核" name="year" lazy>
<list-view @assessment-standards="fnAssessmentStandards" type="year">
<template v-slot="{ searchForm }">
<el-col :span="4">
<el-form-item label="时间" prop="YEAR">
<el-date-picker
v-model="searchForm.YEAR"
type="year"
range-separator="至"
value-format="YYYY"
format="YYYY"
:clearable="false"
/>
</el-form-item>
</el-col>
</template>
</list-view>
</el-tab-pane>
<el-tab-pane label="季度考核" name="season" lazy>
<list-view @assessment-standards="fnAssessmentStandards" type="season">
<template v-slot="{ searchForm }">
<el-col :span="3">
<el-form-item label="年" prop="YEAR">
<el-date-picker
v-model="searchForm.YEAR"
type="year"
range-separator="至"
value-format="YYYY"
format="YYYY"
:clearable="false"
/>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="季度" prop="QUARTER">
<el-select v-model="searchForm.QUARTER">
<el-option label="一季度" :value="1" />
<el-option label="二季度" :value="2" />
<el-option label="三季度" :value="3" />
<el-option label="四季度" :value="4" />
</el-select>
</el-form-item>
</el-col>
</template>
</list-view>
</el-tab-pane>
<el-tab-pane label="月度考核" name="month" lazy>
<list-view @assessment-standards="fnAssessmentStandards" type="month">
<template v-slot="{ searchForm }">
<el-col :span="4">
<el-form-item label="时间" prop="MONTH">
<el-date-picker
v-model="searchForm.MONTH"
type="month"
range-separator="至"
value-format="YYYY-MM"
format="YYYY-MM"
:clearable="false"
/>
</el-form-item>
</el-col>
</template>
</list-view>
</el-tab-pane>
</el-tabs>
<assessment-standards v-model:visible="assessmentStandardsVisible" />
</layout-card>
</template>
<script setup>
import { ref } from "vue";
import ListView from "./components/list.vue";
import AssessmentStandards from "./components/assessment_standards.vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
const router = useRouter();
const route = useRoute();
const defaultName = "month";
const name = ref(route.query.name || defaultName);
const assessmentStandardsVisible = ref(false);
onBeforeRouteUpdate((to, from, next) => {
name.value = to.query.name || defaultName;
next();
});
const fnTabChange = (name) => {
router.push({
path: "/performance_appraisal/departmental",
query: {
name,
},
});
};
const fnAssessmentStandards = () => {
assessmentStandardsVisible.value = true;
};
</script>
<style scoped lang="scss"></style>