forked from wangjiadong/comp
commit
ae9aa70c09
13 changed files with 1685 additions and 108 deletions
@ -0,0 +1,296 @@ |
||||
<template> |
||||
<div class="expert"> |
||||
<a-row :gutter="[16, 16]" type="flex" justify="space-between"> |
||||
<a-col :md="24" :xl="12"> |
||||
<a-row :gutter="[16, 16]" type="flex" justify="space-between"> |
||||
<a-col :span="12"> |
||||
<div class="card"> |
||||
<div class="top"> |
||||
<div class="text"> |
||||
本年度已开展比赛数 |
||||
</div> |
||||
<Icon icon="mainHome-time|svg" :size="20" /> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text"> |
||||
67 |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bot_card">国赛：12</div> |
||||
<div class="bot_card">省赛：12</div> |
||||
<div class="bot_card">校赛：24</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
<a-col :span="12"> |
||||
<div class="card"> |
||||
<div class="top"> |
||||
<div class="text"> |
||||
本年度已开展比赛数 |
||||
</div> |
||||
<Icon icon="mainHome-time|svg" :size="20" /> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text"> |
||||
67 |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bot_card">国赛：12</div> |
||||
<div class="bot_card">省赛：12</div> |
||||
<div class="bot_card">校赛：24</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
<a-row style="margin-top: 8px;width: 100%;"> |
||||
<a-col :span="24"> |
||||
<div class="foo_card"> |
||||
<div class="title"> |
||||
参与评分的比赛 |
||||
</div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="ranking">排名</div> |
||||
<div class="name">比赛名称</div> |
||||
<div class="total">比赛状态</div> |
||||
<div class="operate">操作</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="i in 6" :key="i"> |
||||
<div class="ranking"> |
||||
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div> |
||||
</div> |
||||
<div class="name">国家电网竞赛</div> |
||||
<div class="total">已完赛</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
</a-row> |
||||
|
||||
|
||||
</a-col> |
||||
<a-col :md="24" :xl="12"> |
||||
<!-- 带评分 --> |
||||
<div class="tape-score foo_card"> |
||||
<div class="title"> |
||||
参与评分的比赛 |
||||
</div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_con" v-for="i in 6" :key="i"> |
||||
<div class="name">金话筒主持人大赛</div> |
||||
<div class="total">已完赛</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
</div> |
||||
</template> |
||||
|
||||
|
||||
<script setup lang="ts"> |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.expert { |
||||
padding-top: 16px; |
||||
padding-left: 16px; |
||||
|
||||
.card { |
||||
width: 100%; |
||||
width: 100%; |
||||
height: 182px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03); |
||||
border-radius: 4px 4px 4px 4px; |
||||
padding: 20px 24px 0; |
||||
|
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.text { |
||||
height: 22px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 22px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
|
||||
.center { |
||||
margin-top: 4px; |
||||
width: 357px; |
||||
height: 78px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.text { |
||||
height: 38px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 48px; |
||||
color: rgba(51, 51, 51, 0.88); |
||||
line-height: 38px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
|
||||
.bottom { |
||||
margin-top: 18px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.bot_card { |
||||
width: 91px; |
||||
height: 22px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(51, 51, 51, 0.88); |
||||
line-height: 22px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.foo_card { |
||||
width: 100%; |
||||
height: 502px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
width: 100%; |
||||
height: 54px; |
||||
border-bottom: 1px solid #E7E7E7; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.ranking { |
||||
width: calc((80 / 756) * 100%); |
||||
} |
||||
|
||||
.name { |
||||
width: calc((542 / 756) * 100%); |
||||
} |
||||
|
||||
.total { |
||||
width: calc((74 / 756) * 100%); |
||||
} |
||||
|
||||
.operate { |
||||
width: calc((60 / 756) * 100%); |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #E7E7E7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052D9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052D9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tape-score { |
||||
height: 708px; |
||||
.table { |
||||
.t_item { |
||||
width: 100%; |
||||
height: 54px; |
||||
border-bottom: 1px solid #E7E7E7; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.name { |
||||
width: calc((542 / 676) * 100%); |
||||
} |
||||
|
||||
.total { |
||||
width: calc((74 / 676) * 100%); |
||||
} |
||||
|
||||
.operate { |
||||
width: calc((60 / 676) * 100%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,455 @@ |
||||
<template> |
||||
<div class="school"> |
||||
<a-row :gutter="[16, 16]" type="flex" justify="space-between"> |
||||
<a-col :lg="12" :xl="6" v-for="i in 4" :key="i"> |
||||
<div class="card"> |
||||
<div class="top"> |
||||
<div class="text"> |
||||
本年度已开展比赛数 |
||||
</div> |
||||
<Icon icon="mainHome-time|svg" :size="20" /> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text"> |
||||
67 |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bot_card">国赛：12</div> |
||||
<div class="bot_card">省赛：12</div> |
||||
<div class="bot_card">校赛：24</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
<a-row :gutter="[16, 16]" type="flex" justify="space-between"> |
||||
<a-col :xs="24" :xl="8"> |
||||
<div class="ec_radar-box"> |
||||
<div class="title-box"> |
||||
<div class="tit">年度维度分析</div> |
||||
<div class="p">前沿探索</div> |
||||
<div class="p">奠定基础</div> |
||||
</div> |
||||
<div class="ec_radar" ref="ec_radar"></div> |
||||
</div> |
||||
</a-col> |
||||
<a-col :xs="24" :xl="16"> |
||||
<div class="con_right"> |
||||
<div class="title-box"> |
||||
<div class="tit">部门近两年维度积分</div> |
||||
<div class="bas"></div> |
||||
</div> |
||||
<div class="ec-box"> |
||||
<!-- 柱状图 --> |
||||
<div id="ec_bar" ref="ec_bar"></div> |
||||
<div class="infor"> |
||||
<ul class="card-box"> |
||||
<li v-for="i in 12" :key="i"> |
||||
<div class="ol">{{ i }}</div> |
||||
<div class="text">奠定基础</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
|
||||
<a-row :gutter="[16, 16]" type="flex"> |
||||
<a-col :xs="24" :xl="12"> |
||||
<div class="foo_card"> |
||||
<div class="title"> |
||||
部门比赛积分排名 |
||||
</div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="ranking">排名</div> |
||||
<div class="name">比赛名称</div> |
||||
<div class="total">比赛积分</div> |
||||
<div class="operate">操作</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="i in 6" :key="i"> |
||||
<div class="ranking"> |
||||
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div> |
||||
</div> |
||||
<div class="name">国家电网竞赛</div> |
||||
<div class="total">7059</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
<a-col :xs="24" :xl="12"> |
||||
<div class="foo_card"> |
||||
<div class="title"> |
||||
部门学生积分排名 |
||||
</div> |
||||
|
||||
<div class="table"> |
||||
<div class="t_item t_head"> |
||||
<div class="ranking">排名</div> |
||||
<div class="name">参赛选手名</div> |
||||
<div class="total">比赛积分</div> |
||||
<div class="operate">操作</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="i in 6" :key="i"> |
||||
<div class="ranking"> |
||||
<div class="ol" :class="{ ac: i <= 3 }">{{ i }}</div> |
||||
</div> |
||||
<div class="name">王晨</div> |
||||
<div class="total">4221</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
</div> |
||||
</template> |
||||
|
||||
|
||||
<script setup lang="ts"> |
||||
import { onMounted, ref } from 'vue'; |
||||
import * as echarts from 'echarts'; |
||||
import { optionRadar, optionBar } from '../chDepartment/options' |
||||
|
||||
const ec_radar = ref() |
||||
const ec_bar = ref() |
||||
onMounted(() => { |
||||
const myChart = echarts.init(ec_radar.value); |
||||
myChart.setOption(optionRadar); |
||||
const bar = echarts.init(ec_bar.value); |
||||
bar.setOption(optionBar); |
||||
window.addEventListener('resize', function () { |
||||
myChart.resize() |
||||
bar.resize() |
||||
}) |
||||
}) |
||||
|
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.school { |
||||
padding: 16px 16px 0; |
||||
|
||||
.card { |
||||
width: 100%; |
||||
width: 100%; |
||||
height: 182px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03); |
||||
border-radius: 4px 4px 4px 4px; |
||||
padding: 20px 24px 0; |
||||
|
||||
.top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.text { |
||||
height: 22px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 22px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
|
||||
.center { |
||||
margin-top: 4px; |
||||
width: 357px; |
||||
height: 78px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.text { |
||||
height: 38px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 48px; |
||||
color: rgba(51, 51, 51, 0.88); |
||||
line-height: 38px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
|
||||
.bottom { |
||||
margin-top: 18px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.bot_card { |
||||
width: 91px; |
||||
height: 22px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 14px; |
||||
color: rgba(51, 51, 51, 0.88); |
||||
line-height: 22px; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ec_radar-box { |
||||
margin-top: 17px; |
||||
width: 100%; |
||||
height: 459px; |
||||
background: #FFFFFF; |
||||
border-radius: 2px 2px 2px 2px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.title-box { |
||||
height: 58px; |
||||
border-radius: 2px 2px 0px 0px; |
||||
border-bottom: 1px solid #F0F0F0; |
||||
display: flex; |
||||
|
||||
.tit { |
||||
margin-left: 4%; |
||||
height: 58px; |
||||
line-height: 58px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
} |
||||
|
||||
.p { |
||||
margin-left: 7%; |
||||
font-size: 12px; |
||||
color: #333333; |
||||
height: 27px; |
||||
align-self: flex-end; |
||||
} |
||||
} |
||||
|
||||
.ec_radar { |
||||
width: 100%; |
||||
flex-grow: 1; |
||||
} |
||||
} |
||||
|
||||
.con_right { |
||||
margin-top: 17px; |
||||
// width: 1160px; |
||||
width: 100%; |
||||
height: 458px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
border-radius: 4px 4px 4px 4px; |
||||
// padding-left: 16px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.title-box { |
||||
height: 57px; |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
padding-left: 16px; |
||||
|
||||
.tit { |
||||
height: 26px; |
||||
font-size: 16px; |
||||
color: #1890FF; |
||||
text-shadow: 0px 0px 0px #1890FF; |
||||
} |
||||
|
||||
.bas { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 16px; |
||||
width: 100%; |
||||
height: 1px; |
||||
border: 1px solid rgba(5, 5, 5, 0.06); |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 48px; |
||||
height: 2px; |
||||
background: #1890FF; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ec-box { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-grow: 1; |
||||
column-gap: 22px; |
||||
padding-left: 39px; |
||||
|
||||
#ec_bar { |
||||
flex-grow: 1; |
||||
|
||||
} |
||||
|
||||
.infor { |
||||
width: 241px; |
||||
display: flex; |
||||
|
||||
.card-box { |
||||
margin: auto; |
||||
width: 100%; |
||||
height: 177px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
flex-direction: column; |
||||
row-gap: 9px; |
||||
|
||||
li { |
||||
width: 110px; |
||||
height: 22px; |
||||
font-size: 14px; |
||||
color: rgba(51, 51, 51, 0.88); |
||||
line-height: 22px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
&:nth-child(1)>.ol, |
||||
&:nth-child(2)>.ol, |
||||
&:nth-child(3)>.ol { |
||||
background-color: #314659; |
||||
color: #fff; |
||||
} |
||||
|
||||
.ol { |
||||
width: 20px; |
||||
height: 20px; |
||||
border-radius: 50%; |
||||
line-height: 20px; |
||||
text-align: center; |
||||
background: #F5F5F5; |
||||
color: #000000; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.text { |
||||
width: 67px; |
||||
font-size: 14px; |
||||
color: rgba(51, 51, 51, 0.88); |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.foo_card { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
height: 502px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
border-radius: 6px 6px 6px 6px; |
||||
|
||||
.title { |
||||
padding-left: 23px; |
||||
height: 57px; |
||||
line-height: 57px; |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
position: relative; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgba(5, 5, 5, 0.06); |
||||
} |
||||
} |
||||
|
||||
.table { |
||||
width: 100%; |
||||
padding-left: 32px; |
||||
|
||||
.t_item { |
||||
width: 100%; |
||||
height: 54px; |
||||
border-bottom: 1px solid #E7E7E7; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.ranking { |
||||
width: calc((80 / 756) * 100%); |
||||
} |
||||
|
||||
.name { |
||||
width: calc((542 / 756) * 100%); |
||||
} |
||||
|
||||
.total { |
||||
width: calc((74 / 756) * 100%); |
||||
} |
||||
|
||||
.operate { |
||||
width: calc((60 / 756) * 100%); |
||||
} |
||||
} |
||||
|
||||
.t_head { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
} |
||||
|
||||
.t_con { |
||||
.ranking { |
||||
.ol { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #E7E7E7; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
font-size: 14px; |
||||
line-height: 24px; |
||||
text-align: center; |
||||
border-radius: 50%; |
||||
|
||||
&.ac { |
||||
background: #0052D9; |
||||
color: rgba(255, 255, 255, 0.9); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.total { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.9); |
||||
} |
||||
|
||||
.operate { |
||||
font-size: 14px; |
||||
color: #0052D9; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
</style> |
||||
@ -1 +1,3 @@ |
||||
export {default as ChDepartment } from './chDepartment/index.vue' |
||||
export {default as ChDepartment } from './chDepartment/index.vue' |
||||
export {default as ChExpert } from './chExpert/index.vue' |
||||
export {default as ChSchool } from './chSchool/index.vue' |
||||
@ -0,0 +1,172 @@ |
||||
<template> |
||||
<a-spin :spinning="confirmLoading"> |
||||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
||||
<a-row> |
||||
<a-col :span="24"> |
||||
<a-form-item label="年度" v-bind="validateInfos.annualid"> |
||||
<j-dict-select-tag v-model:value="formData.annualid" dictCode="annual,annual_name,id" placeholder="请选择年度" :disabled="disabled"/> |
||||
</a-form-item> |
||||
</a-col> |
||||
<a-col :span="24"> |
||||
<a-form-item label="年度比赛" v-bind="validateInfos.annualCompid"> |
||||
<j-search-select v-model:value="formData.annualCompid" :dict="strst" :disabled="disabled" /> |
||||
</a-form-item> |
||||
</a-col> |
||||
<a-col :span="24"> |
||||
<a-form-item label="年度比赛项目" v-bind="validateInfos.annualCompP"> |
||||
<j-search-select v-model:value="formData.annualCompP" :dict="ndbsxm" :disabled="disabled" /> |
||||
</a-form-item> |
||||
</a-col> |
||||
</a-row> |
||||
</a-form> |
||||
</a-spin> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted,watch } from 'vue'; |
||||
import { defHttp } from '/@/utils/http/axios'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
||||
import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue'; |
||||
import { getValueType } from '/@/utils'; |
||||
import { saveOrUpdate2,queryCompId } from '../ScorePersion.api'; |
||||
import { Form } from 'ant-design-vue'; |
||||
import { duplicateValidate } from '/@/utils/helper/validator' |
||||
|
||||
let strst = ref(); |
||||
let ndbsxm = ref(); |
||||
const props = defineProps({ |
||||
formDisabled: { type: Boolean, default: false }, |
||||
formData: { type: Object, default: ()=>{} }, |
||||
formBpm: { type: Boolean, default: true } |
||||
}); |
||||
const formRef = ref(); |
||||
const useForm = Form.useForm; |
||||
const emit = defineEmits(['register', 'ok']); |
||||
const formData = reactive<Record<string, any>>({ |
||||
id: '', |
||||
annualid: '', |
||||
annualCompid: '', |
||||
annualCompP: '', |
||||
enrollCode: '', |
||||
score: '', |
||||
sort: undefined, |
||||
}); |
||||
const { createMessage } = useMessage(); |
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
||||
const confirmLoading = ref<boolean>(false); |
||||
//表单验证 |
||||
const validatorRules = { |
||||
annualid: [{ required: true, message: '请输入年度!'},], |
||||
annualCompid: [{ required: true, message: '请输入年度比赛!'},], |
||||
annualCompP: [{ required: true, message: '请输入年度比赛项目!'},], |
||||
}; |
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
||||
|
||||
// 表单禁用 |
||||
const disabled = computed(()=>{ |
||||
if(props.formBpm === true){ |
||||
if(props.formData.disabled === false){ |
||||
return false; |
||||
}else{ |
||||
return true; |
||||
} |
||||
} |
||||
return props.formDisabled; |
||||
}); |
||||
|
||||
watch(formData, (newVal) => { |
||||
if(formData.annualid==null||formData.annualid==""){ |
||||
|
||||
}else{ |
||||
queryCompId("").then((result)=>{ |
||||
//console.log(result); |
||||
const str = result; |
||||
if (str!=null&&str!="") { |
||||
//const ndbs = "annual_comp,name,id,annualid='1691982939857920001' and (compid='1696134761153875969' or compid='1697137689830363138')"; |
||||
var ndbsstr="annual_comp,name,id,annualid='"+formData.annualid+"' and "+"("+str+")"; |
||||
strst.value=ndbsstr; |
||||
} |
||||
}); |
||||
} |
||||
if(formData.annualCompid!=""){ |
||||
ndbsxm.value = "annual_comp_point,obj_name,id,annual_comp_id='"+formData.annualCompid+"'"; |
||||
} |
||||
|
||||
}); |
||||
|
||||
/** |
||||
* 新增 |
||||
*/ |
||||
function add() { |
||||
edit({}); |
||||
} |
||||
|
||||
/** |
||||
* 编辑 |
||||
*/ |
||||
function edit(record) { |
||||
nextTick(() => { |
||||
resetFields(); |
||||
//赋值 |
||||
Object.assign(formData, record); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 提交数据 |
||||
*/ |
||||
async function submitForm() { |
||||
// 触发表单验证 |
||||
await validate(); |
||||
confirmLoading.value = true; |
||||
const isUpdate = ref<boolean>(false); |
||||
//时间格式化 |
||||
let model = formData; |
||||
if (model.id) { |
||||
isUpdate.value = true; |
||||
} |
||||
//循环数据 |
||||
for (let data in model) { |
||||
//如果该数据是数组并且是字符串类型 |
||||
if (model[data] instanceof Array) { |
||||
let valueType = getValueType(formRef.value.getProps, data); |
||||
//如果是字符串类型的需要变成以逗号分割的字符串 |
||||
if (valueType === 'string') { |
||||
model[data] = model[data].join(','); |
||||
} |
||||
} |
||||
} |
||||
await saveOrUpdate2(model, isUpdate.value) |
||||
.then((res) => { |
||||
if (res.success) { |
||||
createMessage.success(res.message); |
||||
emit('ok'); |
||||
} else { |
||||
createMessage.warning(res.message); |
||||
} |
||||
}) |
||||
.finally(() => { |
||||
confirmLoading.value = false; |
||||
}); |
||||
} |
||||
|
||||
|
||||
async function enrollCodeDuplicatevalidate(_r, value) { |
||||
return duplicateValidate('score_persion', 'enroll_code', value, formData.id || '') |
||||
} |
||||
defineExpose({ |
||||
add, |
||||
edit, |
||||
submitForm, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.antd-modal-form { |
||||
min-height: 500px !important; |
||||
overflow-y: auto; |
||||
padding: 24px 24px 24px 24px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,75 @@ |
||||
<template> |
||||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
||||
<ScorePersionForm2 ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ScorePersionForm2> |
||||
</a-modal> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, nextTick, defineExpose } from 'vue'; |
||||
import ScorePersionForm2 from './ScorePersionForm2.vue' |
||||
|
||||
const title = ref<string>(''); |
||||
const width = ref<number>(800); |
||||
const visible = ref<boolean>(false); |
||||
const disableSubmit = ref<boolean>(false); |
||||
const registerForm = ref(); |
||||
const emit = defineEmits(['register', 'success']); |
||||
|
||||
/** |
||||
* 新增 |
||||
*/ |
||||
function add() { |
||||
title.value = '同分复评'; |
||||
visible.value = true; |
||||
nextTick(() => { |
||||
registerForm.value.add(); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 编辑 |
||||
* @param record |
||||
*/ |
||||
function edit(record) { |
||||
title.value = disableSubmit.value ? '详情' : '编辑'; |
||||
visible.value = true; |
||||
nextTick(() => { |
||||
registerForm.value.edit(record); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* 确定按钮点击事件 |
||||
*/ |
||||
function handleOk() { |
||||
registerForm.value.submitForm(); |
||||
} |
||||
|
||||
/** |
||||
* form保存回调事件 |
||||
*/ |
||||
function submitCallback() { |
||||
handleCancel(); |
||||
emit('success'); |
||||
} |
||||
|
||||
/** |
||||
* 取消按钮回调事件 |
||||
*/ |
||||
function handleCancel() { |
||||
visible.value = false; |
||||
} |
||||
|
||||
defineExpose({ |
||||
add, |
||||
edit, |
||||
disableSubmit, |
||||
}); |
||||
</script> |
||||
|
||||
<style> |
||||
/**隐藏样式-modal确定按钮 */ |
||||
.jee-hidden { |
||||
display: none !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue