<template>
|
<div>
|
<div class="content-bg">
|
<div class="main-content">
|
<ReturnBtn></ReturnBtn>
|
|
<el-row class="mt-6">
|
<el-text class="text-title">评价计划</el-text>
|
</el-row>
|
|
<el-row class="mt-5 custom-input">
|
<el-input
|
v-model="filter.keyword"
|
style="width: 739px;height: 70px;"
|
placeholder="搜索职业名称或职业编码进行查询"
|
>
|
<template #append>
|
<el-button class="append-btn" type="primary">
|
<el-text class="text-white text-xl">搜 索</el-text>
|
</el-button>
|
</template>
|
</el-input>
|
</el-row>
|
</div>
|
</div>
|
<div class="main-content py-4">
|
<el-form-item label="等级：" class="mb-4">
|
<el-radio-group v-model="filter.level">
|
<el-radio
|
v-for="(item,index) in levelItems"
|
:key="`radio${index}`"
|
:value="item.value"
|
>
|
{{ item.label }}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="考点：" class="mb-4">
|
<el-select v-model="filter.area" placeholder="筛选地市" style="width: 240px">
|
<el-option
|
v-for="item in areaItems"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<div v-if="calendarFlag">
|
<el-row>
|
<el-text class="text-lg ">评价计划月历</el-text>
|
</el-row>
|
<el-form-item class="my-2">
|
<el-select v-model="year" placeholder="筛选年份" style="width: 240px">
|
<el-option
|
v-for="item in yearItems"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-table :data="monthList" border style="width: 100%" class="mb-6">
|
<el-table-column
|
v-for="(item,index) in monthHeaders"
|
:prop="item.value"
|
:label="item.label"
|
:key="`month${index}`"
|
align="center"
|
>
|
<template #default="{ row }">
|
<div v-if="row[item.value]">
|
<Icon icon="iconamoon:check-duotone" width="22" height="22" style="color: var(--el-color-primary)" />
|
</div>
|
<span v-else></span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<el-table
|
:data="filterList"
|
table-layout="auto"
|
stripe
|
empty-text="暂无评价计划信息~"
|
style="width: 100%"
|
>
|
<el-table-column
|
v-for="(item,index) in headers" :key="`table${index}`"
|
:prop="item.value"
|
:label="item.label"
|
:width="item.width"
|
:align="item.align || 'start'"
|
:sortable="item.sortable"
|
>
|
<template #default="{ row }">
|
<div v-if="item.value=='signupTime'">
|
<el-row>报名开始时间：{{ row.startTime }}</el-row>
|
<el-row>报名结束时间：{{ row.endTime }}</el-row>
|
</div>
|
<div v-if="item.value=='orgInfo'">
|
<el-row>机构名称：{{ row.orgInfo.name }}</el-row>
|
<el-row>机构联系人：{{ row.orgInfo.concatName }}</el-row>
|
<el-row>机构联系方式：{{ row.orgInfo.mobile }}</el-row>
|
</div>
|
<div v-if="item.value=='operation'">
|
<el-row @click="signup(row)">
|
<el-text v-if="row.signupFlag && userInfo.id">已报名</el-text>
|
<el-text v-else tag="ins" class="text-primary cursor-p">
|
报名考试
|
</el-text>
|
</el-row>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-row justify="end" class="my-7" v-if="noticeList.length > 0">
|
<el-text class="mr-4 text-note">共{{ totalCount }}项数据</el-text>
|
<el-pagination
|
v-model:current-page="filter.pageNo"
|
v-model:page-size="filter.pageSize"
|
background
|
layout="prev, pager, next"
|
:total="totalCount"
|
/>
|
</el-row>
|
</div>
|
|
<signupDialog
|
v-model="signupDialogVisible"
|
:currentPlan="currentPlan"
|
@signupSuccess="signupSuccessDialogVisible=true"
|
>
|
</signupDialog>
|
|
<signupSuccessDialog
|
v-model="signupSuccessDialogVisible"
|
></signupSuccessDialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
import { useLoginStore } from '@/stores/login.js'
|
import { useSessionStore } from '@/stores/session.js'
|
import { storeToRefs } from 'pinia';
|
import signupDialog from '@/views/main/appraisalPlan/components/signupDialog.vue'
|
import signupSuccessDialog from '@/views/main/appraisalPlan/components/signupSuccessDialog.vue'
|
export default {
|
components: {
|
signupDialog,
|
signupSuccessDialog
|
},
|
setup() {
|
const { userInfo } = storeToRefs(useSessionStore())
|
const { loginDialogVisible } = storeToRefs(useLoginStore())
|
return { userInfo, loginDialogVisible }
|
},
|
data() {
|
return {
|
page: 1,
|
size: 5,
|
filter: {
|
pageNo: 1,
|
pageSize: 5,
|
keyword: '',
|
level: '',
|
area: '',
|
},
|
areaItems: [
|
{ label: '广东省', value: '' },
|
{ label: '广州市', value: '广州市' },
|
{ label: '深圳市', value: '深圳市' }
|
],
|
levelItems: [
|
{ label: '全部', value: '' },
|
{ label: '五级/初级工', value: '5' },
|
{ label: '四级/初级工', value: '4' },
|
{ label: '三级/初级工', value: '3' },
|
{ label: '二级/初级工', value: '2' },
|
{ label: '一级/初级工', value: '1' },
|
],
|
noticeList: [],
|
headers: [
|
{ label: '职业（工种）名称', value: 'occupationJob'},
|
{ label: '等级', value: 'level' },
|
{ label: '考点', value: 'examAddress' },
|
{ label: '评价计划名称', value: 'planName', width: 150 },
|
{ label: '报名时间', value: 'signupTime' },
|
{ label: '评价机构信息', value: 'orgInfo' },
|
{ label: '操作', value: 'operation', align: 'center' },
|
],
|
planList: [],
|
calendarFlag: true,
|
year: '2025',
|
yearItems: [
|
{ label: '2022年', value: '2022' },
|
{ label: '2023年', value: '2023' },
|
{ label: '2024年', value: '2024' },
|
{ label: '2025年', value: '2025' },
|
{ label: '2026年', value: '2026' },
|
],
|
monthHeaders: [
|
{ label: '1月', value: '1' },
|
{ label: '2月', value: '2' },
|
{ label: '3月', value: '3' },
|
{ label: '4月', value: '4' },
|
{ label: '5月', value: '5' },
|
{ label: '6月', value: '6' },
|
{ label: '7月', value: '7' },
|
{ label: '8月', value: '8' },
|
{ label: '9月', value: '9' },
|
{ label: '10月', value: '10' },
|
{ label: '11月', value: '11' },
|
{ label: '12月', value: '12' },
|
],
|
monthList: [
|
{ 1: false, 2: false, 3: true, 4: true, 5: false, 6: false, 7: true, 8: false, 9: false, 10: true, 11: true, 12: false, }
|
],
|
signupDialogVisible: false,
|
currentPlan: {},
|
signupSuccessDialogVisible: false
|
}
|
},
|
computed: {
|
filterList() {
|
return this.planList.slice((this.filter.pageNo-1)*this.filter.pageSize, this.filter.pageNo*this.filter.pageSize)
|
}
|
},
|
created() {
|
this.getPlanList()
|
},
|
methods: {
|
getPlanList() {
|
setTimeout(() => {
|
this.planList =
|
[
|
{
|
id: '1',
|
occupationJob: "互联网营销师（视频创推员）",
|
level: '三级',
|
examAddress: '中山市',
|
planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
|
startTime: '2025-11-19 09:00',
|
endTime: '2025-12-22 18:00',
|
orgInfo: {
|
name: '中山市技师学院',
|
concatName: '吴*宁',
|
mobile: '13424571164'
|
},
|
signupFlag: false
|
},
|
{
|
id: '2',
|
occupationJob: "电工",
|
level: '三级',
|
examAddress: '中山市',
|
planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
|
startTime: '2025-11-19 09:00',
|
endTime: '2025-12-22 18:00',
|
orgInfo: {
|
name: '中山市技师学院',
|
concatName: '吴*宁',
|
mobile: '13424571164'
|
},
|
signupFlag: true
|
},
|
{
|
id: '3',
|
occupationJob: "电工",
|
level: '三级',
|
examAddress: '中山市',
|
planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
|
startTime: '2025-11-19 09:00',
|
endTime: '2025-12-22 18:00',
|
orgInfo: {
|
name: '中山市技师学院',
|
concatName: '吴*宁',
|
mobile: '13424571164'
|
}
|
},
|
{
|
id: '4',
|
occupationJob: "电工",
|
level: '三级',
|
examAddress: '中山市',
|
planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
|
startTime: '2025-11-19 09:00',
|
endTime: '2025-12-22 18:00',
|
orgInfo: {
|
name: '中山市技师学院',
|
concatName: '吴*宁',
|
mobile: '13424571164'
|
},
|
signupFlag: false
|
},
|
{
|
id: '5',
|
occupationJob: "电工",
|
level: '三级',
|
examAddress: '中山市',
|
planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
|
startTime: '2025-11-19 09:00',
|
endTime: '2025-12-22 18:00',
|
orgInfo: {
|
name: '中山市技师学院',
|
concatName: '吴*宁',
|
mobile: '13424571164'
|
},
|
signupFlag: false
|
},
|
{
|
id: '6',
|
occupationJob: "电工",
|
level: '三级',
|
examAddress: '中山市',
|
planName: '2025年中山市技师学院互联网营销师视频床腿元高级工申报计划（计划号:2511002630）',
|
startTime: '2025-11-19 09:00',
|
endTime: '2025-12-22 18:00',
|
orgInfo: {
|
name: '中山市技师学院',
|
concatName: '吴*宁',
|
mobile: '13424571164'
|
},
|
signupFlag: false
|
},
|
]
|
this.totalCount = 6
|
}, 400)
|
},
|
signup(item) {
|
if (this.userInfo.id) {
|
this.signupDialogVisible = true
|
this.currentPlan = item
|
} else {
|
this.loginDialogVisible = true
|
this.$message.primary('请先登录')
|
}
|
}
|
}
|
}
|
|
</script>
|
<style scoped>
|
.content-bg {
|
height: 240px;
|
background-image: url('@/assets/images/contentBg.png');
|
background-repeat: no-repeat, no-repeat, repeat; /* 分别设置 */
|
background-size: cover;
|
}
|
.custom-input :deep(.el-input__inner) {
|
padding-left: 10px;
|
font-size: 18px;
|
}
|
.append-btn {
|
width: 114px;
|
height: 100%;
|
background-color: var(--el-color-primary) !important;
|
}
|
</style>
|
