'修改登录页年度比赛年度项目'

gst4base
JayChou 2 months ago
parent 396c19dd29
commit 310efc2276
  1. BIN
      jeecgboot-vue3-master/public/resource/img/comp/jingsaibjc.png
  2. 1
      jeecgboot-vue3-master/src/assets/icons/gengduo.svg
  3. 1
      jeecgboot-vue3-master/src/assets/icons/status0.svg
  4. 1
      jeecgboot-vue3-master/src/assets/icons/status1.svg
  5. 1
      jeecgboot-vue3-master/src/assets/icons/status2.svg
  6. 1
      jeecgboot-vue3-master/src/assets/icons/status3.svg
  7. 766
      jeecgboot-vue3-master/src/views/annualCompPoint/committee/AnnualCompPointList.vue
  8. 528
      jeecgboot-vue3-master/src/views/annualCompPoint/committee/AnnualCompPointList1.vue
  9. 250
      jeecgboot-vue3-master/src/views/annualCompPoint/committee/components/cardItem.vue
  10. 111
      jeecgboot-vue3-master/src/views/annualcomp/uncommitted/AnnualCompList.vue
  11. 0
      jeecgboot-vue3-master/src/views/annualcomp/uncommitted/AnnualCompList2.vue
  12. 243
      jeecgboot-vue3-master/src/views/annualcomp/uncommitted/components/cardItem.vue

Binary file not shown.

After

Width:  |  Height:  |  Size: 484 KiB

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726047825508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23428" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M192 448c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64-28.8-64-64-64z m640 0c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64-28.8-64-64-64zM512 448c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64-28.8-64-64-64z" fill="#909399" p-id="23429"></path></svg>

After

Width:  |  Height:  |  Size: 595 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726046828808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14566" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 1024C228.072727 1024 0 795.927273 0 512S228.072727 0 512 0s512 228.072727 512 512-228.072727 512-512 512z m0-744.727273c-130.327273 0-232.727273 102.4-232.727273 232.727273s102.4 232.727273 232.727273 232.727273 232.727273-102.4 232.727273-232.727273-102.4-232.727273-232.727273-232.727273z" p-id="14567" data-spm-anchor-id="a313x.search_index.0.i36.3c3a3a81r81mAa" class="" fill="#979797"></path></svg>

After

Width:  |  Height:  |  Size: 742 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726046828808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14566" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 1024C228.072727 1024 0 795.927273 0 512S228.072727 0 512 0s512 228.072727 512 512-228.072727 512-512 512z m0-744.727273c-130.327273 0-232.727273 102.4-232.727273 232.727273s102.4 232.727273 232.727273 232.727273 232.727273-102.4 232.727273-232.727273-102.4-232.727273-232.727273-232.727273z" p-id="14567" data-spm-anchor-id="a313x.search_index.0.i36.3c3a3a81r81mAa" class="" fill="#0CB6FF"></path></svg>

After

Width:  |  Height:  |  Size: 742 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726046828808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14566" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 1024C228.072727 1024 0 795.927273 0 512S228.072727 0 512 0s512 228.072727 512 512-228.072727 512-512 512z m0-744.727273c-130.327273 0-232.727273 102.4-232.727273 232.727273s102.4 232.727273 232.727273 232.727273 232.727273-102.4 232.727273-232.727273-102.4-232.727273-232.727273-232.727273z" p-id="14567" data-spm-anchor-id="a313x.search_index.0.i36.3c3a3a81r81mAa" class="" fill="#52D16C"></path></svg>

After

Width:  |  Height:  |  Size: 742 B

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726046828808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14566" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 1024C228.072727 1024 0 795.927273 0 512S228.072727 0 512 0s512 228.072727 512 512-228.072727 512-512 512z m0-744.727273c-130.327273 0-232.727273 102.4-232.727273 232.727273s102.4 232.727273 232.727273 232.727273 232.727273-102.4 232.727273-232.727273-102.4-232.727273-232.727273-232.727273z" p-id="14567" data-spm-anchor-id="a313x.search_index.0.i36.3c3a3a81r81mAa" class="" fill="#FF6247"></path></svg>

After

Width:  |  Height:  |  Size: 742 B

@ -1,528 +1,320 @@
<template>
<div>
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam"
:label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24">
</a-row>
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
</a-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出
</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
导入报名
</j-upload-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsMb"> 导入报名的模版
</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
<Icon icon="ant-design:delete-outlined"></Icon>
删除
</a-menu-item>
</a-menu>
</template>
<a-button>批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<!--字段回显插槽-->
<template #htmlSlot="{text}">
<div v-html="text"></div>
</template>
<!--省市区字段回显插槽-->
<template #pcaSlot="{text}">
{{ getAreaTextByCode(text) }}
</template>
<template #fileSlot="{text}">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined"
size="small" @click="downloadFile(text)">下载
</a-button>
</template>
</BasicTable>
<!-- 表单区域 -->
<AnnualCompPointModal ref="registerModal" @success="handleSuccess"></AnnualCompPointModal>
<AnnualCompPointModalscgl ref="registerModalscgl" @success="handleSuccess"></AnnualCompPointModalscgl>
<!-- 项目题目-->
<div class="main-box">
<a-card title="年度比赛管理" :bordered="false" style="height: 100%">
<div class="filter-search">
<div class="left">
<ul>
<li
:class="index === activeIndex ? 'active' : ''"
v-for="(item, index) in yearList"
:key="index"
@click="filteryear(item.value, index)"
>{{ item.title }}</li
>
</ul>
</div>
<div class="right"> <a-input-search v-model:value="searchValue" placeholder="请输入年份" style="width: 320px" @search="onSearch" /></div>
</div>
<div class="race-box">
<div class="add-race item" @click="handleAdd">
<PlusOutlined style="font-size: 22px" />
<div>点击添加比赛</div>
</div>
<cardItem
v-for="item in raceList"
@infoChange="handleDetail"
@editscglChange="handleEditscgl"
@editChange="handleEdit"
@delChange="handleDelete"
@updateApplyChange="handleSubmitandApply"
@scoreApplyChange="handleCollectScoreApply"
@evaluationChange="handlePersonalAbilityEvaluation"
:key="item.annualCompId"
:data="item"
/>
</div>
<div class="pagination">
<Pagination v-model:current="current" :total="total" show-less-items style="width: 300px; height: 30px" @change="pageChange" :pageSize="7" />
</div>
</a-card>
</div>
<AnnualCompPointModal ref="registerModal" @success="handleSuccess"></AnnualCompPointModal>
<AnnualCompPointModalscgl ref="registerModalscgl" @success="handleSuccess"></AnnualCompPointModalscgl>
</template>
<script lang="ts" name="AnnualCompPoint-annualCompPoint" setup>
import {ref, reactive} from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import {award} from '/@/views/award/AwardManagement.api.ts';
import {useListPage} from '/@/hooks/system/useListPage';
import {columns} from './AnnualCompPoint.data';
import {
list,
deleteOne,
batchDelete,
getExportUrl,
getExportUrlMb,
updateApply,
collectScore,
pj,
cjhz,
tongfenfuping,
} from './AnnualCompPoint.api';
import {downloadFile} from '/@/utils/common/renderUtils';
import AnnualCompPointModal from './components/AnnualCompPointModal.vue';
<script lang="ts" setup>
import AnnualCompPointModalscgl from './components/AnnualCompPointModalscgl.vue';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
import {router} from "/@/router";
import {useRouter} from "vue-router";
import {personalAbilityEvaluation} from "/@/views/awardpersion/AwardPersion.api";
import {useMessage} from "../../../hooks/web/useMessage";
import {useMethods} from "../../../hooks/system/useMethods";
const { handleImportXls } = useMethods();
const formRef = ref();
const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const registerModalscgl = ref();
const annualCompAwardModal = ref();
const { createMessage } = useMessage();
//table
const {prefixCls, tableContext, onExportXls,onExportXlsMb} = useListPage({
tableProps: {
title: '年度比赛项目管理',
api: list,
columns,
canResize: false,
useSearchForm: false,
actionColumn: {
width: 220,
fixed: 'right',
},
beforeFetch: (params) => {
return Object.assign(params, queryParam);
},
},
exportConfig: {
name: "年度比赛项目(赛道)管理",
url: getExportUrl,
params: queryParam,
},
exportConfigMb: {
name: "报名模板",
url: getExportUrlMb,
params: null,
},
});
const [registerTable, {
reload,
collapseAll,
updateTableDataRecord,
findTableDataRecord,
getDataSource
}, {rowSelection, selectedRowKeys}] = tableContext;
const labelCol = reactive({
xs: {span: 24},
sm: {span: 7},
});
const wrapperCol = reactive({
xs: {span: 24},
sm: {span: 16},
});
/**
* 新增事件
*/
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.edit({...record,teamSeqFirst:1,teamSeqSecond: 2, teamSeqThird: 3,
teamSeqFourth: 4,
teamSeqFifth: 5,});
}
/**
* 项目赛程管理事件
*/
function handleEditscgl(record: Recordable) {
registerModalscgl.value.disableSubmit = false;
registerModalscgl.value.edit(record);
}
import { PlusOutlined } from '@ant-design/icons-vue';
import { Pagination } from 'ant-design-vue';
import { ref } from 'vue';
import cardItem from './components/cardItem.vue';
// import { useModal } from '/@/components/Modal';
// import { useMessage } from '/@/hooks/web/useMessage';
import AnnualCompPointModal from './components/AnnualCompPointModal.vue';
/* /!**
* 比赛奖项管理事件
*!/
function handleEditbsjx(record: Recordable) {
console.log(annualCompAwardModal.value)
annualCompAwardModal.value.disableSubmit = false;
annualCompAwardModal.value.edit(record);
}*/
import { getDictItems } from '/@/api/common/api';
import { list, deleteOne, updateApply, collectScore } from './AnnualCompPoint.api';
import {personalAbilityEvaluation} from "/@/views/awardpersion/AwardPersion.api";
// const [registerModal, { openModal }] = useModal();
// const { createMessage } = useMessage();
const activeIndex = ref(0);
const current = ref(1);
//
const searchValue = ref('');
const onSearch = () => {
console.log(searchValue.value);
};
//
const raceList = ref<any>([]);
const total = ref(0);
const page = {
pageSize: 7,
pageNo: 1,
annualid: '',
};
const getList = async () => {
for (const key in page) {
if (!page[key]) {
delete page[key];
}
}
const res = await list(page);
console.log(res);
raceList.value = res.records || [];
total.value = res.total;
};
getList();
//
const handleSuccess = () => {
console.log('操作成功');
getList();
};
/**
* 项目能力管理事件
* 删除事件
*/
function handleEditxmnl(record: Recordable) {
router.push({
path: '/compp/compskill',
query: {id: record.id}
});
}
//
const pageChange = (pageNo) => {
console.log(pageNo);
page.pageNo = pageNo;
getList();
};
//
const yearList = ref<any>([{ title: '全部比赛', value: '' }]);
const getDictItemsEvent = async () => {
const date = new Date().getTime();
const res = await getDictItems('annual,annual_name,id?_t=' + date);
yearList.value = res.reverse();
yearList.value.unshift({ title: '全部比赛', value: '' });
};
getDictItemsEvent();
//
const filteryear = (id: any, index: number) => {
activeIndex.value = index;
page.annualid = id;
getList();
};
/**
* 项目题目管理事件
* 新增事件
*/
function handleEdittopic(record: Recordable) {
router.push({
path: '/compp/topic',
query: {annualCompid: record.id}
});
}
function onImportXls(d) {
if(selectedRowKeys.value.length===1){
handleImportXls(d, '/AnnualCompPoint/annualCompPoint/importExcel?ndbsxmid='+selectedRowKeys.value[0],() => {
handleSuccess;
});
}else {
createMessage.warning("请选择一条数据进行导入报名");
}
}
const registerModal = ref();
const handleAdd = () => {
registerModal.value.disableSubmit = false;
registerModal.value.add();
};
/**
* 详情
*/
function handleDetail(record: Recordable) {
const handleDetail = (record) => {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
/**
* 年度项目管理 评奖
*/
const router = useRouter()
function pingjiang(record: Recordable) {
router.push({
path: '/compp/annualcompaward',
query: {id: record.id}
});
}
registerModal.value.edit(record.value);
};
/**
* 年度项目管理 作品管理
*/
function workManage(record: Recordable) {
router.push({
path: '/workManage/works',
query: {annualCompPointId: record.id}
});
}
/**
* 评分标准
*/
function pfbz(record: Recordable) {
router.push({
path: '/topic/topic/list5',
query: {acpid: record.id}
});
}
/**
* 比赛奖项管理
*/
function bsjxgl(record: Recordable) {
router.push({
path: '/compp/annualcompaward',
query: {acpid: record.id}
});
}
/**
* 个人积分汇总
* 项目赛程管理事件
*/
function handleCollectScoreApply(record: Recordable) {
collectScore({id: record.id, annualCompId: record.annualCompId, annualCompP: record.id}, handleSuccess);
}
const registerModalscgl = ref();
const handleEditscgl = (record) => {
registerModalscgl.value.disableSubmit = false;
registerModalscgl.value.edit(record.value);
};
/**
* 个人能力量化
* 编辑事件
*/
function handlePersonalAbilityEvaluation(record: Recordable) {
personalAbilityEvaluation({id: record.id, annualCompId: record.annualCompId}, handleSuccess);
}
const handleEdit = (record) => {
registerModal.value.disableSubmit = false;
registerModal.value.edit({ ...record.value, teamSeqFirst: 1, teamSeqSecond: 2, teamSeqThird: 3, teamSeqFourth: 4, teamSeqFifth: 5 });
};
/**
* 同分复评
* 删除事件
*/
async function cltongfenfuping(record: Recordable) {
await tongfenfuping({id: record.id}, handleSuccess);
}
const handleDelete = async (record) => {
await deleteOne({ id: record.value.id }, handleSuccess);
};
/**
* 年度项目管理 提交审核按钮
*/
function handleSubmitandApply(record: Recordable) {
updateApply({id: record.id, annualCompState: record.annualCompState}, handleSuccess);
}
const handleSubmitandApply = async (record) => {
updateApply({ id: record.value.id, annualCompState: record.value.annualCompState }, handleSuccess);
};
/**
* 删除事件
* 个人积分汇总
*/
async function handleDelete(record) {
await deleteOne({id: record.id}, handleSuccess);
}
const handleCollectScoreApply = (record: Recordable) => {
collectScore({ id: record.value.id, annualCompId: record.value.annualCompId, annualCompP: record.value.id }, handleSuccess);
};
/**
* 评奖事件
* 个人能力量化
*/
async function pjgl(record) {
await pj({id: record.id}, handleSuccess);
}
const handlePersonalAbilityEvaluation = (record) => {
personalAbilityEvaluation({ id: record.id, annualCompId: record.annualCompId }, handleSuccess);
};
</script>
/**
* 成绩汇总事件
*/
async function cjhzgl(record) {
await cjhz({id: record.id}, handleSuccess);
<style lang="less" scoped>
:deep(.ant-popover-inner-content) {
padding: 0 !important;
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
:deep(.ant-pagination) {
display: flex;
justify-content: center;
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
const actions = [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
label: '项目(赛道)赛程管理',
onClick: handleEditscgl.bind(null, record),
},
/* {
label: '比赛奖项管理',
onClick: handleEditbsjx.bind(null, record),
},*/
{
label: '项目(赛道)能力管理',
onClick: handleEditxmnl.bind(null, record),
},
{
label: '题目管理',
onClick: handleEdittopic.bind(null, record),
},
{
label: '详情',
onClick: handleDetail.bind(null, record),
}, {
label: '删除',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
.main-box {
width: 100%;
// height: calc(100vh - 100px);
padding: 20px;
.filter-search {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
.left {
ul {
padding: 0;
margin: 0;
display: flex;
align-items: center;
li {
width: 105px;
height: 43px;
line-height: 43px;
text-align: center;
background-color: #fff;
border-radius: 20px;
color: #4e5969;
margin: 10px;
font-weight: 600;
cursor: pointer;
}
.active {
background-color: #f2f3f5;
color: #01dbaf;
}
}
},
];
if(Date.parse(new Date())>Date.parse(record.scoreEndTime)){
actions.unshift({
label: '评奖',
popConfirm: {
title: '是否确认评奖',
confirm: pjgl.bind(null, record),
}
});
}
.right {
}
}
if(Date.parse(new Date())>Date.parse(record.scoreEndTime)){
actions.unshift({
label: '成绩汇总',
popConfirm: {
title: '是否确认成绩汇总',
confirm: cjhzgl.bind(null, record),
.race-box {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 创建四个等宽的列 */
grid-template-rows: repeat(2, 1fr);
gap: 32px; /* 项目之间的间距 */
.add-race {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center !important;
cursor: pointer;
div {
margin-top: 20px;
}
});
}
if (record.annualCompState === "0") { // 01()234
actions.unshift({
label: '提交',
onClick: handleSubmitandApply.bind(null, record),
});
} else if (record.annualCompState === "1") {
actions.unshift({
label: '申请修改',
onClick: handleSubmitandApply.bind(null, record),
});
} else if (record.annualCompState === "2") {
actions.unshift({
label: '申请修改',
onClick: handleSubmitandApply.bind(null, record),
});
} else if (record.annualCompState === "3") {
actions.unshift({
label: '待驳回'
});
} else if (record.annualCompState === "4") {
actions.unshift({
label: '提交',
onClick: handleSubmitandApply.bind(null, record),
});
}
/**
* 个人积分汇总
* 触发条件评奖完成后操作且更新项目状态为积分已汇总并且不可再进行个人积分汇总
*
是否已凭奖为1且未汇总过时可以积分汇总操作
* 状态0待提交1已提交(待审核)2已审核(已通过)3待驳回4已驳回5-已报名6-已选题7-已上传作品8-已评分9-已评奖,10-积分已汇总
*/
if (record.isPj == 1 /*&& record.annualCompState != "10"*/) {
actions.unshift({
label: '个人积分汇总',
onClick: handleCollectScoreApply.bind(null, record),
});
}
/**
* 个人能力量化
* 触发条件个人积分汇总完成后操作可以重复进行个人能力量化操作
*/
if (record.isPj == 1 && record.annualCompState == "10" ) {
actions.unshift({
label: '个人能力量化',
onClick: handlePersonalAbilityEvaluation.bind(null, record),
});
}
/* if (record.isCjhz == 1 && record.annualCompState != "9") {
actions.unshift({
label: '同分复评',
onClick: cltongfenfuping.bind(null, record),
});
}*/
/* if (record.annualCompState === "8") {
actions.unshift({
label: '评奖',
onClick: pingjiang.bind(null, record),
});
}*/
actions.unshift({
label: '作品管理',
onClick: workManage.bind(null, record),
});
actions.unshift({
label: '评分标准',
onClick: pfbz.bind(null, record),
});
actions.unshift({
label: '比赛奖项管理',
onClick: bsjxgl.bind(null, record),
});
// if (record.requireUploadWorks === 'Y' && record.annualCompState === "2") {
// actions.unshift({
// label: '',
// onClick: handleSubmitandApply.bind(null, record),
// });
// }
// if (record.requireTopic === 'Y' && record.annualCompState === "2") {
// actions.unshift({
// label: '',
// onClick: handleSubmitandApply.bind(null, record),
// });
// }
// if (record.requireApply === 'Y' && record.annualCompState === "2") {
// actions.unshift({
// label: '',
// onClick: handleSubmitandApply.bind(null, record),
// });
// }
return actions;
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//
reload();
}
/**
* popup组件值改变事件
*/
function setFieldsValue(map) {
Object.keys(map).map((key) => {
queryParam[key] = map[key];
});
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust {
width: calc(50% - 15px);
min-width: 100px !important;
}
.item {
width: 356px;
height: 336px;
border: 1px solid #e5e6eb;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-size: 22px;
font-weight: 700;
}
.time {
font-size: 16px;
color: #86909c;
}
.center {
ul {
display: flex;
flex-wrap: wrap;
li {
display: flex;
width: 50%;
.label {
color: #86909c;
}
}
li:nth-child(3) {
width: 100%;
}
}
}
.footer {
display: flex;
justify-content: space-between;
.left {
width: 90px;
height: 43px;
background-color: #e8ffea;
text-align: center;
line-height: 43px;
color: #00b42a;
display: flex;
align-items: center;
justify-content: center;
div {
margin-left: 5px;
}
}
.right {
display: flex;
div {
width: 80px;
height: 43px;
text-align: center;
line-height: 43px;
font-size: 16px;
}
.del {
background-color: #f2f3f5;
color: #4e5969;
}
.edit {
background-color: #00c7be;
color: #fff;
margin-left: 10px;
}
}
}
}
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center
.pagination {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
}
</style>

@ -0,0 +1,528 @@
<template>
<div>
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam"
:label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter="24">
</a-row>
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
</a-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出
</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">
导入报名
</j-upload-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsMb"> 导入报名的模版
</a-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
<Icon icon="ant-design:delete-outlined"></Icon>
删除
</a-menu-item>
</a-menu>
</template>
<a-button>批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<!--字段回显插槽-->
<template #htmlSlot="{text}">
<div v-html="text"></div>
</template>
<!--省市区字段回显插槽-->
<template #pcaSlot="{text}">
{{ getAreaTextByCode(text) }}
</template>
<template #fileSlot="{text}">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined"
size="small" @click="downloadFile(text)">下载
</a-button>
</template>
</BasicTable>
<!-- 表单区域 -->
<AnnualCompPointModal ref="registerModal" @success="handleSuccess"></AnnualCompPointModal>
<AnnualCompPointModalscgl ref="registerModalscgl" @success="handleSuccess"></AnnualCompPointModalscgl>
<!-- 项目题目-->
</div>
</template>
<script lang="ts" name="AnnualCompPoint-annualCompPoint" setup>
import {ref, reactive} from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import {award} from '/@/views/award/AwardManagement.api.ts';
import {useListPage} from '/@/hooks/system/useListPage';
import {columns} from './AnnualCompPoint.data';
import {
list,
deleteOne,
batchDelete,
getExportUrl,
getExportUrlMb,
updateApply,
collectScore,
pj,
cjhz,
tongfenfuping,
} from './AnnualCompPoint.api';
import {downloadFile} from '/@/utils/common/renderUtils';
import AnnualCompPointModal from './components/AnnualCompPointModal.vue';
import AnnualCompPointModalscgl from './components/AnnualCompPointModalscgl.vue';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
import {router} from "/@/router";
import {useRouter} from "vue-router";
import {personalAbilityEvaluation} from "/@/views/awardpersion/AwardPersion.api";
import {useMessage} from "../../../hooks/web/useMessage";
import {useMethods} from "../../../hooks/system/useMethods";
const { handleImportXls } = useMethods();
const formRef = ref();
const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const registerModalscgl = ref();
const annualCompAwardModal = ref();
const { createMessage } = useMessage();
//table
const {prefixCls, tableContext, onExportXls,onExportXlsMb} = useListPage({
tableProps: {
title: '年度比赛项目管理',
api: list,
columns,
canResize: false,
useSearchForm: false,
actionColumn: {
width: 220,
fixed: 'right',
},
beforeFetch: (params) => {
return Object.assign(params, queryParam);
},
},
exportConfig: {
name: "年度比赛项目(赛道)管理",
url: getExportUrl,
params: queryParam,
},
exportConfigMb: {
name: "报名模板",
url: getExportUrlMb,
params: null,
},
});
const [registerTable, {
reload,
collapseAll,
updateTableDataRecord,
findTableDataRecord,
getDataSource
}, {rowSelection, selectedRowKeys}] = tableContext;
const labelCol = reactive({
xs: {span: 24},
sm: {span: 7},
});
const wrapperCol = reactive({
xs: {span: 24},
sm: {span: 16},
});
/**
* 新增事件
*/
function handleAdd() {
registerModal.value.disableSubmit = false;
registerModal.value.add();
}
/**
* 编辑事件
*/
function handleEdit(record: Recordable) {
registerModal.value.disableSubmit = false;
registerModal.value.edit({...record,teamSeqFirst:1,teamSeqSecond: 2, teamSeqThird: 3,
teamSeqFourth: 4,
teamSeqFifth: 5,});
}
/**
* 项目赛程管理事件
*/
function handleEditscgl(record: Recordable) {
registerModalscgl.value.disableSubmit = false;
registerModalscgl.value.edit(record);
}
/* /!**
* 比赛奖项管理事件
*!/
function handleEditbsjx(record: Recordable) {
console.log(annualCompAwardModal.value)
annualCompAwardModal.value.disableSubmit = false;
annualCompAwardModal.value.edit(record);
}*/
/**
* 项目能力管理事件
*/
function handleEditxmnl(record: Recordable) {
router.push({
path: '/compp/compskill',
query: {id: record.id}
});
}
/**
* 项目题目管理事件
*/
function handleEdittopic(record: Recordable) {
router.push({
path: '/compp/topic',
query: {annualCompid: record.id}
});
}
function onImportXls(d) {
if(selectedRowKeys.value.length===1){
handleImportXls(d, '/AnnualCompPoint/annualCompPoint/importExcel?ndbsxmid='+selectedRowKeys.value[0],() => {
handleSuccess;
});
}else {
createMessage.warning("请选择一条数据进行导入报名");
}
}
/**
* 详情
*/
function handleDetail(record: Recordable) {
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
/**
* 年度项目管理 评奖
*/
const router = useRouter()
function pingjiang(record: Recordable) {
router.push({
path: '/compp/annualcompaward',
query: {id: record.id}
});
}
/**
* 年度项目管理 作品管理
*/
function workManage(record: Recordable) {
router.push({
path: '/workManage/works',
query: {annualCompPointId: record.id}
});
}
/**
* 评分标准
*/
function pfbz(record: Recordable) {
router.push({
path: '/topic/topic/list5',
query: {acpid: record.id}
});
}
/**
* 比赛奖项管理
*/
function bsjxgl(record: Recordable) {
router.push({
path: '/compp/annualcompaward',
query: {acpid: record.id}
});
}
/**
* 个人积分汇总
*/
function handleCollectScoreApply(record: Recordable) {
collectScore({id: record.id, annualCompId: record.annualCompId, annualCompP: record.id}, handleSuccess);
}
/**
* 个人能力量化
*/
function handlePersonalAbilityEvaluation(record: Recordable) {
personalAbilityEvaluation({id: record.id, annualCompId: record.annualCompId}, handleSuccess);
}
/**
* 同分复评
*/
async function cltongfenfuping(record: Recordable) {
await tongfenfuping({id: record.id}, handleSuccess);
}
/**
* 年度项目管理 提交审核按钮
*/
function handleSubmitandApply(record: Recordable) {
updateApply({id: record.id, annualCompState: record.annualCompState}, handleSuccess);
}
/**
* 删除事件
*/
async function handleDelete(record) {
await deleteOne({id: record.id}, handleSuccess);
}
/**
* 评奖事件
*/
async function pjgl(record) {
await pj({id: record.id}, handleSuccess);
}
/**
* 成绩汇总事件
*/
async function cjhzgl(record) {
await cjhz({id: record.id}, handleSuccess);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
}
/**
* 成功回调
*/
function handleSuccess() {
(selectedRowKeys.value = []) && reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
const actions = [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
label: '项目(赛道)赛程管理',
onClick: handleEditscgl.bind(null, record),
},
/* {
label: '比赛奖项管理',
onClick: handleEditbsjx.bind(null, record),
},*/
{
label: '项目(赛道)能力管理',
onClick: handleEditxmnl.bind(null, record),
},
{
label: '题目管理',
onClick: handleEdittopic.bind(null, record),
},
{
label: '详情',
onClick: handleDetail.bind(null, record),
}, {
label: '删除',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
}
},
];
if(Date.parse(new Date())>Date.parse(record.scoreEndTime)){
actions.unshift({
label: '评奖',
popConfirm: {
title: '是否确认评奖',
confirm: pjgl.bind(null, record),
}
});
}
if(Date.parse(new Date())>Date.parse(record.scoreEndTime)){
actions.unshift({
label: '成绩汇总',
popConfirm: {
title: '是否确认成绩汇总',
confirm: cjhzgl.bind(null, record),
}
});
}
if (record.annualCompState === "0") { // 01()234
actions.unshift({
label: '提交',
onClick: handleSubmitandApply.bind(null, record),
});
} else if (record.annualCompState === "1") {
actions.unshift({
label: '申请修改',
onClick: handleSubmitandApply.bind(null, record),
});
} else if (record.annualCompState === "2") {
actions.unshift({
label: '申请修改',
onClick: handleSubmitandApply.bind(null, record),
});
} else if (record.annualCompState === "3") {
actions.unshift({
label: '待驳回'
});
} else if (record.annualCompState === "4") {
actions.unshift({
label: '提交',
onClick: handleSubmitandApply.bind(null, record),
});
}
/**
* 个人积分汇总
* 触发条件评奖完成后操作且更新项目状态为积分已汇总并且不可再进行个人积分汇总
*
是否已凭奖为1且未汇总过时可以积分汇总操作
* 状态0待提交1已提交(待审核)2已审核(已通过)3待驳回4已驳回5-已报名6-已选题7-已上传作品8-已评分9-已评奖,10-积分已汇总
*/
if (record.isPj == 1 /*&& record.annualCompState != "10"*/) {
actions.unshift({
label: '个人积分汇总',
onClick: handleCollectScoreApply.bind(null, record),
});
}
/**
* 个人能力量化
* 触发条件个人积分汇总完成后操作可以重复进行个人能力量化操作
*/
if (record.isPj == 1 && record.annualCompState == "10" ) {
actions.unshift({
label: '个人能力量化',
onClick: handlePersonalAbilityEvaluation.bind(null, record),
});
}
/* if (record.isCjhz == 1 && record.annualCompState != "9") {
actions.unshift({
label: '同分复评',
onClick: cltongfenfuping.bind(null, record),
});
}*/
/* if (record.annualCompState === "8") {
actions.unshift({
label: '评奖',
onClick: pingjiang.bind(null, record),
});
}*/
actions.unshift({
label: '作品管理',
onClick: workManage.bind(null, record),
});
actions.unshift({
label: '评分标准',
onClick: pfbz.bind(null, record),
});
actions.unshift({
label: '比赛奖项管理',
onClick: bsjxgl.bind(null, record),
});
// if (record.requireUploadWorks === 'Y' && record.annualCompState === "2") {
// actions.unshift({
// label: '',
// onClick: handleSubmitandApply.bind(null, record),
// });
// }
// if (record.requireTopic === 'Y' && record.annualCompState === "2") {
// actions.unshift({
// label: '',
// onClick: handleSubmitandApply.bind(null, record),
// });
// }
// if (record.requireApply === 'Y' && record.annualCompState === "2") {
// actions.unshift({
// label: '',
// onClick: handleSubmitandApply.bind(null, record),
// });
// }
return actions;
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//
reload();
}
/**
* popup组件值改变事件
*/
function setFieldsValue(map) {
Object.keys(map).map((key) => {
queryParam[key] = map[key];
});
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust {
width: calc(50% - 15px);
min-width: 100px !important;
}
.query-group-split-cust {
width: 30px;
display: inline-block;
text-align: center
}
}
</style>

@ -0,0 +1,250 @@
<template>
<div>
<div class="item">
<div class="title">
<a-popover placement="top">
<template #content>
<p>{{ data.annualCompId_dictText }}</p>
</template>
<div class="label">{{ splitTile(data.annualCompId_dictText) }}</div>
</a-popover>
<div class="info-btn" @click="info">查看详情</div>
</div>
<div class="description">
<div>项目层次{{ data.objLevel_dictText }}</div>
<div>参与形式个人赛</div>
</div>
<div class="center-setting">
<ul>
<li @click="editscgl">项目(赛道)赛程管理</li>
<li @click="handleEditxmnl" style="margin-right: 0">项目(赛道)能力管理</li>
<li @click="updateApply">{{ statusText(data.annualCompState) }}</li>
<li @click="edit">编辑</li>
<li @click="del">删除</li>
</ul>
</div>
<div class="footer-setting">
<ul>
<li @click="handleEdittopic">题目管理</li>
<li @click="pfbz">评分管理</li>
<li @click="workManage">作品管理</li>
<li v-if="data.isPj == 1" @click="scoreApply">个人积分汇总</li>
<li v-if="data.isPj == 1 && data.annualCompState == '10'" @click="evaluation">个人能力量化</li>
<li @click="bsjxgl">比赛奖项管理</li>
</ul>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';
// import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
data: {
type: Object,
required: true,
},
});
const emits = defineEmits(['editChange', 'delChange', 'infoChange', 'editscglChange', 'updateApplyChange', 'scoreApplyChange', 'evaluationChange']);
const data = ref(props.data);
console.log(props, 'props');
//
const edit = () => {
emits('editChange', data);
};
const del = () => {
emits('delChange', data);
};
const info = () => {
emits('infoChange', data);
};
const editscgl = () => {
emits('editscglChange', data);
};
const updateApply = () => {
if (data.value.annualCompState === '3') return;
emits('updateApplyChange', data);
};
/**
* 项目能力管理事件
*/
const handleEditxmnl = () => {
router.push({
path: '/compp/compskill',
query: { id: data.value.id },
});
};
/**
* 项目题目管理事件
*/
const handleEdittopic = () => {
router.push({
path: '/compp/topic',
query: { annualCompid: data.value.id },
});
};
/**
* 评分标准
*/
const pfbz = () => {
router.push({
path: '/topic/topic/list5',
query: { acpid: data.value.id },
});
};
/**
* 年度项目管理 作品管理
*/
const workManage = () => {
router.push({
path: '/workManage/works',
query: { annualCompPointId: data.value.id },
});
};
const scoreApply = () => {
emits('scoreApplyChange', data);
};
const evaluation = () => {
emits('evaluationChange', data);
};
/**
* 比赛奖项管理
*/
const bsjxgl = () => {
router.push({
path: '/compp/annualcompaward',
query: {acpid: data.value.id}
});
}
watch(
() => props.data,
(newVal) => {
data.value = newVal;
}
);
const splitTile = (str: string) => {
if (str.length > 9) {
const newStr = str.slice(0, 8);
return newStr + '...';
} else {
return str;
}
};
const statusText = (state: any) => {
switch (state) {
case '0':
return '提交';
case '1':
return '申请修改';
case '2':
return '申请修改';
case '3':
return '待驳回';
case '4':
return '提交';
}
};
</script>
<style lang="less" scoped>
:deep(.ant-popover-inner-content) {
padding: 0 !important;
}
.item {
width: 356px;
height: 336px;
border: 1px solid #e5e6eb;
padding: 20px;
transition: all 0.3s;
.title {
display: flex;
align-items: center;
justify-content: space-between;
.label {
font-size: 19px;
color: #000000;
}
.info-btn {
width: 96px;
height: 32px;
font-size: 16px;
text-align: center;
line-height: 32px;
border-radius: 2px;
color: #4e5969;
background-color: #f2f3f5;
cursor: pointer;
}
}
.description {
display: flex;
margin-top: 10px;
div {
width: 50%;
font-size: 16px;
color: #86909c;
}
}
.center-setting {
margin-top: 15px;
ul {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
li {
text-align: center;
line-height: 32px;
padding: 0 15px;
height: 32px;
background-color: #f2f3f5;
color: #165dff;
margin-right: 13px;
margin-top: 13px;
cursor: pointer;
}
li:last-child {
color: #f53f3f;
background-color: #ffece8;
}
}
}
.footer-setting {
border-top: 1px solid rgba(0, 0, 0, 0.2);
margin-top: 20px;
padding-top: 7px;
ul {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
margin: 0;
li {
padding: 0 15px;
height: 32px;
text-align: center;
line-height: 32px;
margin-right: 13px;
margin-top: 13px;
color: rgba(0, 0, 0, 0.65);
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
}
}
}
.item:hover {
transform: translateY(-5px);
}
</style>

@ -4,24 +4,28 @@
<div class="filter-search">
<div class="left">
<ul>
<li :class="index === activeIndex ? 'active' : ''" v-for="(item, index) in filterYearList" :key="index" @click="activeIndex = index">{{
item
}}</li>
<li
:class="index === activeIndex ? 'active' : ''"
v-for="(item, index) in yearList"
:key="index"
@click="filteryear(item.value, index)"
>{{ item.title }}</li
>
</ul>
</div>
<div class="right"> <a-input-search v-model:value="searchValue" placeholder="请输入年份" style="width: 320px" @search="onSearch" /></div>
</div>
<div class="filter-search">
<div class="left">
{{ filterYearList[activeIndex] }}
{{ yearList[activeIndex].title }}
</div>
<div class="right">
<a-radio-group v-model:value="radioValue" name="radioGroup">
<!-- <a-radio-group v-model:value="radioValue" name="radioGroup">
<a-radio value="1">全部</a-radio>
<a-radio value="2">已审核</a-radio>
<a-radio value="3">待审核</a-radio>
<a-radio value="4">已驳回</a-radio>
</a-radio-group>
</a-radio-group> -->
</div>
</div>
<div class="race-box">
@ -29,10 +33,20 @@
<PlusOutlined style="font-size: 22px" />
<div>点击添加比赛</div>
</div>
<cardItem v-for="item in raceList" @click="handleDetail(item)" :key="item.id" :data="item" @editChange="handleEdit" @delChange="handleDelete"/>
<cardItem
v-for="item in raceList"
@infoChange="handleDetail"
:key="item.id"
:data="item"
@editChange="handleEdit"
@delChange="handleDelete"
@submitChange="handleSubmit"
@enableChange="handleEnable"
@deactivateChange="handleDeactivate"
/>
</div>
<div class="pagination">
<Pagination v-model:current="current" :total="50" show-less-items style="width: 300px; height: 30px" />
<Pagination v-model:current="current" :total="total" show-less-items style="width: 300px; height: 30px" @change="pageChange" :pageSize="7" />
</div>
</a-card>
</div>
@ -44,19 +58,29 @@
import { Pagination } from 'ant-design-vue';
import { ref } from 'vue';
import cardItem from './components/cardItem.vue';
import { list,deleteOne } from './AnnualComp.api';
import { list, deleteOne, submit, enable, deactivate } from './AnnualComp.api';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
const [registerModal, { openModal }] = useModal();
import AnnualCompModal from './components/AnnualCompModal.vue';
import { getDictItems } from '/@/api/common/api';
const [registerModal, { openModal }] = useModal();
const { createMessage } = useMessage();
const filterYearList = ref(['全部比赛', '2024年', '2023年', '其他年份']);
const activeIndex = ref(0);
const current = ref(2);
const current = ref(1);
//
const searchValue = ref('');
const onSearch = () => {
console.log(searchValue.value);
const value = yearList.value.find((item) => item.title === searchValue.value);
console.log(value);
if (value) {
page.annualid = value.values;
getList();
}else{
createMessage.warn(`没有查询到${searchValue.value}年的信息`)
}
};
//
@ -65,8 +89,18 @@
//
const raceList = ref<any>([]);
const total = ref(0);
const page = {
pageSize: 7,
pageNo: 1,
annualid: '',
};
const getList = async () => {
const res = await list({ pageSize: 7 });
for (const key in page) {
if (!page[key]) {
delete page[key];
}
}
const res = await list(page);
console.log(res);
raceList.value = res.records;
total.value = res.total;
@ -100,18 +134,61 @@
isUpdate: true,
showFooter: false,
});
}
/**
};
/**
* 删除事件
*/
async function handleDelete(record) {
console.log(record,'record');
console.log(record, 'record');
await deleteOne({ id: record.value.id }, handleSuccess);
}
//
const handleSubmit = async (record) => {
await submit({ id: record.value.id }, handleSuccess);
};
//
const handleEnable = async (record) => {
await enable({ id: record.value.id }, handleSuccess);
};
//
const handleDeactivate = async (record) => {
await deactivate({ id: record.value.id }, handleSuccess);
};
//
const pageChange = (pageNo) => {
console.log(pageNo);
page.pageNo = pageNo;
getList();
};
//
const yearList = ref<any>([{ title: '全部比赛', value: '' }]);
const getDictItemsEvent = async () => {
const date = new Date().getTime();
const res = await getDictItems('annual,annual_name,id?_t=' + date);
yearList.value = res.reverse();
yearList.value.unshift({ title: '全部比赛', value: '' });
};
getDictItemsEvent();
//
const filteryear = (id: any, index: number) => {
activeIndex.value = index;
page.annualid = id;
getList();
};
</script>
<style lang="less" scoped>
:deep(.ant-popover-inner-content) {
padding: 0 !important;
}
:deep(.ant-pagination) {
display: flex;
justify-content: center;
}
.main-box {
width: 100%;
height: calc(100vh - 100px);

@ -1,19 +1,41 @@
<template>
<div>
<div class="item">
<div class="top">
<div class="title">{{ data.compname }}</div>
<div class="time">报名时间{{ data.starttime }}~{{ data.endtime }}</div>
</div>
<div class="center">
<ul>
<li><div class="label">比赛权重</div> <div class="content">4</div></li>
<li><div class="label">负责人</div> <div class="content">无糖</div></li>
<li><div class="label">负责部门</div> <div class="content">国际教育学院</div></li>
</ul>
<div class="status-setting">
<div class="left"
><SvgIcon :name="data.state == 0 ? 'status0' : data.state == 1 ? 'status1' : data.state == 2 ? 'status2' : data.state == 3 ? 'status3' : ''" /><div :class="data.state == 0 ? 'color0' : data.state == 1 ? 'color1' : data.state == 2 ? 'color2' : data.state == 3 ? 'color3' : ''">{{ data.state_dictText }}</div></div
>
<div class="right">
<a-popover placement="bottomLeft" v-if="data.state == 0 || data.state == 3 ">
<template #content>
<p class="setting-item" @click="edit">编辑</p>
<p class="setting-item" @click="del">删除</p>
<p class="setting-item" @click="info">详情</p>
</template>
<!-- <template #title>
<span>Title</span>
</template> -->
<SvgIcon name="gengduo"></SvgIcon>
</a-popover>
</div>
</div>
<div class="footer">
<div
<div class="item-main" @click="info">
<div class="top">
<div class="title">{{ data.compname }}</div>
<div class="time">报名时间{{ data.starttime }}~{{ data.endtime }}</div>
</div>
<div class="center">
<ul>
<li><div class="label">负责部门</div> <div class="content">国际教育学院</div></li>
<li><div class="label">比赛权重</div> <div class="content">4</div></li>
<li><div class="label">负责人</div> <div class="content">无糖</div></li>
</ul>
</div>
<div class="footer">
<div class="submt status-1" @click.stop="submit" v-if="data.state == 0 || data.state == 3 ">{{ data.state == 3 ? '重新提交' : '提交' }}</div>
<div class="submt status-2" @click.stop="enable" v-if="data.state == 2 && data.isopen == 0">启用</div>
<div class="submt status-3" @click.stop="deactivate" v-if="data.state == 2 && data.isopen == 1">停用</div>
<!-- <div
class="left"
:class="data.state == 0 ? ' status-color-1' : data.state == 1 ? ' status-color-1' : data.state == 2 ? ' status-color-2' : data.state == 3 ? ' status-color-3' : ''"
>
@ -22,6 +44,7 @@
<div class="right">
<div class="del" @click.stop="del"> 删除</div>
<div class="edit" @click.stop="edit">修改</div>
</div> -->
</div>
</div>
</div>
@ -37,7 +60,7 @@
required: true,
},
});
const emits = defineEmits(['editChange', 'delChange']);
const emits = defineEmits(['editChange', 'delChange','infoChange','submitChange','enableChange','deactivateChange']);
const data = ref(props.data);
console.log(props, 'props');
@ -48,34 +71,94 @@
const del = () => {
emits('delChange', data);
};
const info = () => {
emits('infoChange',data)
}
watch(
() => props.data,
(newVal) => {
data.value = newVal;
}
);
const submit = () => {
emits('submitChange',data)
}
const enable = () => {
emits('enableChange',data)
}
const deactivate = () => {
emits('deactivateChange',data)
}
</script>
<style lang="less" scoped>
:deep(.ant-popover-inner-content) {
padding: 0 !important;
}
.setting-item {
text-align: center;
height: 30px;
line-height: 30px;
cursor: pointer;
margin: 0;
}
.setting-item:hover {
color: #00c7be;
}
.item {
width: 356px;
height: 232px;
border: 1px solid #e5e6eb;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s;
.status-setting {
width: 100%;
height: 40px;
border-bottom: 1px solid #e8ebf6;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
.left {
display: flex;
align-items: center;
div {
margin-left: 10px;
}
.color0 {
color: #979797;
}
.color1 {
color: #0cb6ff;
}
.color2 {
color: #52d16c;
}
.color3 {
color: #ff6247;
}
}
}
.item-main {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 20px;
}
.title {
font-size: 22px;
margin-top: 5px;
font-size: 20px;
font-weight: 700;
}
.time {
font-size: 16px;
font-size: 15px;
color: #86909c;
}
.center {
margin-top: 20px;
ul {
display: flex;
flex-wrap: wrap;
@ -87,64 +170,90 @@
color: #86909c;
}
}
li:nth-child(3) {
li:nth-child(1) {
width: 100%;
}
}
}
.footer {
display: flex;
justify-content: space-between;
.left {
width: 90px;
height: 43px;
// margin-top: 10px;
width: 100%;
// display: flex;
// justify-content: space-between;
// .left {
// width: 90px;
// height: 43px;
// text-align: center;
// line-height: 43px;
// display: flex;
// align-items: center;
// justify-content: center;
// div {
// margin-left: 5px;
// }
// }
// .status-color-1 {
// color: #165dff;
// background-color: #e8f3ff;
// }
// .status-color-2 {
// color: #00b42a;
// background-color: #e8ffea;
// }
// .status-color-3 {
// color: #f53f3f;
// background-color: #ffece8;
// }
// .right {
// display: flex;
// div {
// width: 80px;
// height: 43px;
// text-align: center;
// line-height: 43px;
// font-size: 16px;
// cursor: pointer;
// }
// .del {
// background-color: #f2f3f5;
// color: #4e5969;
// }
// .del:hover {
// border: 1px solid #ccc;
// }
// .edit {
// background-color: #00c7be;
// color: #fff;
// margin-left: 10px;
// }
// .edit:hover {
// border: 1px solid #348d89;
// }
// }
.submt {
width: 100%;
height: 37px;
text-align: center;
line-height: 43px;
display: flex;
align-items: center;
justify-content: center;
div {
margin-left: 5px;
}
line-height: 37px;
font-size: 16px;
cursor: pointer;
}
.status-color-1 {
color: #165dff;
background-color: #e8f3ff;
.status-1 {
background-color: #00c7be;
color: #fff;
}
.status-color-2 {
color: #00b42a;
background-color: #e8ffea;
.status-2 {
background-color: #34c759;
color: #fff;
}
.status-color-3 {
color: #f53f3f;
background-color: #ffece8;
.status-3 {
background-color: #ff3b30;
color: #fff;
}
.right {
display: flex;
div {
width: 80px;
height: 43px;
text-align: center;
line-height: 43px;
font-size: 16px;
cursor: pointer;
}
.del {
background-color: #f2f3f5;
color: #4e5969;
}
.del:hover {
border: 1px solid #ccc;
}
.edit {
background-color: #00c7be;
color: #fff;
margin-left: 10px;
}
.edit:hover {
border: 1px solid #348d89;
}
.status-0 {
background-color: #e4e4e6;
color: #000000;
}
}
}

Loading…
Cancel
Save