forked from wangjiadong/comp
commit
c99350a977
40 changed files with 877 additions and 306 deletions
|
After Width: | Height: | Size: 908 B |
|
After Width: | Height: | Size: 805 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
@ -1,206 +1,245 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div class="main-box"> |
||||||
<!--引用表格--> |
<a-card title="年度比赛管理" :bordered="false" style="height: 100%"> |
||||||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
<div class="filter-search"> |
||||||
<!--插槽:table标题--> |
<div class="left"> |
||||||
<template #tableTitle> |
<ul> |
||||||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
<li :class="index === activeIndex ? 'active' : ''" v-for="(item, index) in filterYearList" :key="index" @click="activeIndex = index">{{ |
||||||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
item |
||||||
<!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>--> |
}}</li> |
||||||
<!-- <a-dropdown v-if="selectedRowKeys.length > 0"> |
</ul> |
||||||
<template #overlay> |
</div> |
||||||
<a-menu> |
<div class="right"> <a-input-search v-model:value="searchValue" placeholder="请输入年份" style="width: 320px" @search="onSearch" /></div> |
||||||
<a-menu-item key="1" @click="batchHandleDelete"> |
</div> |
||||||
<Icon icon="ant-design:delete-outlined" /> |
<div class="filter-search"> |
||||||
删除 |
<div class="left"> |
||||||
</a-menu-item> |
{{ filterYearList[activeIndex] }} |
||||||
</a-menu> |
</div> |
||||||
</template> |
<div class="right"> |
||||||
<a-button |
<a-radio-group v-model:value="radioValue" name="radioGroup"> |
||||||
>批量操作 |
<a-radio value="1">全部</a-radio> |
||||||
<Icon icon="mdi:chevron-down" /> |
<a-radio value="2">已审核</a-radio> |
||||||
</a-button> |
<a-radio value="3">待审核</a-radio> |
||||||
</a-dropdown>--> |
<a-radio value="4">已驳回</a-radio> |
||||||
</template> |
</a-radio-group> |
||||||
<!--操作栏--> |
</div> |
||||||
<template #action="{ record }"> |
</div> |
||||||
<TableAction :actions="getTableAction(record)" /> |
<div class="race-box"> |
||||||
</template> |
<div class="add-race item" @click="addRace"> |
||||||
<!--字段回显插槽--> |
<PlusOutlined style="font-size: 22px" /> |
||||||
<template #htmlSlot="{ text }"> |
<div>点击添加比赛</div> |
||||||
<div v-html="text"></div> |
</div> |
||||||
</template> |
<cardItem v-for="item in raceList" @click="handleDetail(item)" :key="item.id" :data="item" @editChange="handleEdit" @delChange="handleDelete"/> |
||||||
<!--省市区字段回显插槽--> |
</div> |
||||||
<template #pcaSlot="{ text }"> |
<div class="pagination"> |
||||||
{{ getAreaTextByCode(text) }} |
<Pagination v-model:current="current" :total="50" show-less-items style="width: 300px; height: 30px" /> |
||||||
</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> |
|
||||||
<!-- 表单区域 --> |
|
||||||
<AnnualCompModal @register="registerModal" @success="handleSuccess" /> |
|
||||||
</div> |
</div> |
||||||
|
</a-card> |
||||||
|
</div> |
||||||
|
<AnnualCompModal @register="registerModal" @success="handleSuccess" /> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts" name="annualcomp-annualComp" setup> |
<script lang="ts" setup> |
||||||
import { ref, computed, unref } from 'vue'; |
import { PlusOutlined } from '@ant-design/icons-vue'; |
||||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
import { Pagination } from 'ant-design-vue'; |
||||||
|
import { ref } from 'vue'; |
||||||
|
import cardItem from './components/cardItem.vue'; |
||||||
|
import { list,deleteOne } from './AnnualComp.api'; |
||||||
import { useModal } from '/@/components/Modal'; |
import { useModal } from '/@/components/Modal'; |
||||||
import { useListPage } from '/@/hooks/system/useListPage'; |
|
||||||
import AnnualCompModal from './components/AnnualCompModal.vue'; |
|
||||||
import { columns, searchFormSchema } from './AnnualComp.data'; |
|
||||||
import { list, submit, enable, deactivate, deleteOne, batchDelete, getImportUrl, getExportUrl } from './AnnualComp.api'; |
|
||||||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|
||||||
const checkedKeys = ref<Array<string | number>>([]); |
|
||||||
//注册model |
|
||||||
const [registerModal, { openModal }] = useModal(); |
const [registerModal, { openModal }] = useModal(); |
||||||
//注册table数据 |
import AnnualCompModal from './components/AnnualCompModal.vue'; |
||||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|
||||||
tableProps: { |
|
||||||
title: '年度比赛管理', |
|
||||||
api: list, |
|
||||||
columns, |
|
||||||
canResize: false, |
|
||||||
formConfig: { |
|
||||||
//labelWidth: 120, |
|
||||||
schemas: searchFormSchema, |
|
||||||
autoSubmitOnEnter: true, |
|
||||||
showAdvancedButton: true, |
|
||||||
fieldMapToNumber: [], |
|
||||||
fieldMapToTime: [], |
|
||||||
}, |
|
||||||
actionColumn: { |
|
||||||
width: 120, |
|
||||||
fixed: 'right', |
|
||||||
}, |
|
||||||
}, |
|
||||||
exportConfig: { |
|
||||||
name: '年度比赛管理', |
|
||||||
url: getExportUrl, |
|
||||||
}, |
|
||||||
importConfig: { |
|
||||||
url: getImportUrl, |
|
||||||
success: handleSuccess, |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; |
const filterYearList = ref(['全部比赛', '2024年', '2023年', '其他年份']); |
||||||
|
const activeIndex = ref(0); |
||||||
|
const current = ref(2); |
||||||
|
// 搜索 |
||||||
|
const searchValue = ref(''); |
||||||
|
const onSearch = () => { |
||||||
|
console.log(searchValue.value); |
||||||
|
}; |
||||||
|
|
||||||
/** |
// 单选 |
||||||
* 新增事件 |
const radioValue = ref('1'); |
||||||
*/ |
|
||||||
function handleAdd() { |
// 获取比赛列表 |
||||||
|
const raceList = ref<any>([]); |
||||||
|
const total = ref(0); |
||||||
|
const getList = async () => { |
||||||
|
const res = await list({ pageSize: 7 }); |
||||||
|
console.log(res); |
||||||
|
raceList.value = res.records; |
||||||
|
total.value = res.total; |
||||||
|
}; |
||||||
|
getList(); |
||||||
|
|
||||||
|
// 新增比赛 |
||||||
|
const addRace = () => { |
||||||
openModal(true, { |
openModal(true, { |
||||||
isUpdate: false, |
isUpdate: false, |
||||||
showFooter: true, |
showFooter: true, |
||||||
}); |
}); |
||||||
} |
}; |
||||||
/** |
// 成功回调 |
||||||
* 编辑事件 |
const handleSuccess = () => { |
||||||
*/ |
console.log('操作成功'); |
||||||
function handleEdit(record: Recordable) { |
getList(); |
||||||
|
}; |
||||||
|
// 编辑 |
||||||
|
const handleEdit = (record: any) => { |
||||||
openModal(true, { |
openModal(true, { |
||||||
record, |
record, |
||||||
isUpdate: true, |
isUpdate: true, |
||||||
showFooter: true, |
showFooter: true, |
||||||
}); |
}); |
||||||
} |
}; |
||||||
/** |
// 查看详情 |
||||||
* 详情 |
const handleDetail = (record: any) => { |
||||||
*/ |
|
||||||
function handleDetail(record: Recordable) { |
|
||||||
openModal(true, { |
openModal(true, { |
||||||
record, |
record, |
||||||
isUpdate: true, |
isUpdate: true, |
||||||
showFooter: false, |
showFooter: false, |
||||||
}); |
}); |
||||||
} |
} |
||||||
async function handleSubmit(record) { |
|
||||||
await submit({ id: record.id }, handleSuccess); |
|
||||||
} |
|
||||||
async function handleEnable(record) { |
|
||||||
await enable({ id: record.id }, handleSuccess); |
|
||||||
} |
|
||||||
async function handleDeactivate(record) { |
|
||||||
await deactivate({ id: record.id }, handleSuccess); |
|
||||||
} |
|
||||||
/** |
/** |
||||||
* 删除事件 |
* 删除事件 |
||||||
*/ |
*/ |
||||||
async function handleDelete(record) { |
async function handleDelete(record) { |
||||||
await deleteOne({ id: record.id }, handleSuccess); |
console.log(record,'record'); |
||||||
|
|
||||||
|
await deleteOne({ id: record.value.id }, handleSuccess); |
||||||
} |
} |
||||||
/** |
</script> |
||||||
* 批量删除事件 |
|
||||||
*/ |
<style lang="less" scoped> |
||||||
async function batchHandleDelete() { |
.main-box { |
||||||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
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; |
||||||
function handleSuccess() { |
|
||||||
(selectedRowKeys.value = []) && reload(); |
|
||||||
} |
} |
||||||
/** |
|
||||||
* 操作栏 |
|
||||||
*/ |
|
||||||
function getTableAction(record) { |
|
||||||
if (record.state_dictText == '待提交' || record.state_dictText == '已驳回') { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
label: '提交', |
|
||||||
onClick: handleSubmit.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '详情', |
|
||||||
onClick: handleDetail.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '编辑', |
|
||||||
onClick: handleEdit.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '删除', |
|
||||||
popConfirm: { |
|
||||||
title: '是否确认删除', |
|
||||||
confirm: handleDelete.bind(null, record), |
|
||||||
}, |
|
||||||
}, |
|
||||||
]; |
|
||||||
} |
|
||||||
if (record.state_dictText == '已提交') { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
label: '详情', |
|
||||||
onClick: handleDetail.bind(null, record), |
|
||||||
}, |
|
||||||
]; |
|
||||||
} else if (record.state_dictText == '已审核' && record.isopen == '0') { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
label: '启用', |
|
||||||
onClick: handleEnable.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '详情', |
|
||||||
onClick: handleDetail.bind(null, record), |
|
||||||
}, |
|
||||||
]; |
|
||||||
} else |
|
||||||
return [ |
|
||||||
{ |
|
||||||
label: '停用', |
|
||||||
onClick: handleDeactivate.bind(null, record), |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: '详情', |
|
||||||
onClick: handleDetail.bind(null, record), |
|
||||||
}, |
|
||||||
]; |
|
||||||
} |
} |
||||||
</script> |
} |
||||||
|
.right { |
||||||
|
} |
||||||
|
} |
||||||
|
.race-box { |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: 356px; |
||||||
|
height: 232px; |
||||||
|
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; |
||||||
|
|
||||||
<style scoped></style> |
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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.pagination { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -0,0 +1,206 @@ |
|||||||
|
<template> |
||||||
|
<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-dropdown v-if="selectedRowKeys.length > 0"> |
||||||
|
<template #overlay> |
||||||
|
<a-menu> |
||||||
|
<a-menu-item key="1" @click="batchHandleDelete"> |
||||||
|
<Icon icon="ant-design:delete-outlined" /> |
||||||
|
删除 |
||||||
|
</a-menu-item> |
||||||
|
</a-menu> |
||||||
|
</template> |
||||||
|
<a-button |
||||||
|
>批量操作 |
||||||
|
<Icon icon="mdi:chevron-down" /> |
||||||
|
</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> |
||||||
|
<!-- 表单区域 --> |
||||||
|
<AnnualCompModal @register="registerModal" @success="handleSuccess" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" name="annualcomp-annualComp" setup> |
||||||
|
import { ref, computed, unref } from 'vue'; |
||||||
|
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
||||||
|
import { useModal } from '/@/components/Modal'; |
||||||
|
import { useListPage } from '/@/hooks/system/useListPage'; |
||||||
|
import AnnualCompModal from './components/AnnualCompModal.vue'; |
||||||
|
import { columns, searchFormSchema } from './AnnualComp.data'; |
||||||
|
import { list, submit, enable, deactivate, deleteOne, batchDelete, getImportUrl, getExportUrl } from './AnnualComp.api'; |
||||||
|
import { downloadFile } from '/@/utils/common/renderUtils'; |
||||||
|
const checkedKeys = ref<Array<string | number>>([]); |
||||||
|
//注册model |
||||||
|
const [registerModal, { openModal }] = useModal(); |
||||||
|
//注册table数据 |
||||||
|
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
||||||
|
tableProps: { |
||||||
|
title: '年度比赛管理', |
||||||
|
api: list, |
||||||
|
columns, |
||||||
|
canResize: false, |
||||||
|
formConfig: { |
||||||
|
//labelWidth: 120, |
||||||
|
schemas: searchFormSchema, |
||||||
|
autoSubmitOnEnter: true, |
||||||
|
showAdvancedButton: true, |
||||||
|
fieldMapToNumber: [], |
||||||
|
fieldMapToTime: [], |
||||||
|
}, |
||||||
|
actionColumn: { |
||||||
|
width: 120, |
||||||
|
fixed: 'right', |
||||||
|
}, |
||||||
|
}, |
||||||
|
exportConfig: { |
||||||
|
name: '年度比赛管理', |
||||||
|
url: getExportUrl, |
||||||
|
}, |
||||||
|
importConfig: { |
||||||
|
url: getImportUrl, |
||||||
|
success: handleSuccess, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; |
||||||
|
|
||||||
|
/** |
||||||
|
* 新增事件 |
||||||
|
*/ |
||||||
|
function handleAdd() { |
||||||
|
openModal(true, { |
||||||
|
isUpdate: false, |
||||||
|
showFooter: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 编辑事件 |
||||||
|
*/ |
||||||
|
function handleEdit(record: Recordable) { |
||||||
|
openModal(true, { |
||||||
|
record, |
||||||
|
isUpdate: true, |
||||||
|
showFooter: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 详情 |
||||||
|
*/ |
||||||
|
function handleDetail(record: Recordable) { |
||||||
|
openModal(true, { |
||||||
|
record, |
||||||
|
isUpdate: true, |
||||||
|
showFooter: false, |
||||||
|
}); |
||||||
|
} |
||||||
|
async function handleSubmit(record) { |
||||||
|
await submit({ id: record.id }, handleSuccess); |
||||||
|
} |
||||||
|
async function handleEnable(record) { |
||||||
|
await enable({ id: record.id }, handleSuccess); |
||||||
|
} |
||||||
|
async function handleDeactivate(record) { |
||||||
|
await deactivate({ id: record.id }, handleSuccess); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 删除事件 |
||||||
|
*/ |
||||||
|
async function handleDelete(record) { |
||||||
|
await deleteOne({ id: record.id }, handleSuccess); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 批量删除事件 |
||||||
|
*/ |
||||||
|
async function batchHandleDelete() { |
||||||
|
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 成功回调 |
||||||
|
*/ |
||||||
|
function handleSuccess() { |
||||||
|
(selectedRowKeys.value = []) && reload(); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 操作栏 |
||||||
|
*/ |
||||||
|
function getTableAction(record) { |
||||||
|
if (record.state_dictText == '待提交' || record.state_dictText == '已驳回') { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '提交', |
||||||
|
onClick: handleSubmit.bind(null, record), |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '详情', |
||||||
|
onClick: handleDetail.bind(null, record), |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '编辑', |
||||||
|
onClick: handleEdit.bind(null, record), |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '删除', |
||||||
|
popConfirm: { |
||||||
|
title: '是否确认删除', |
||||||
|
confirm: handleDelete.bind(null, record), |
||||||
|
}, |
||||||
|
}, |
||||||
|
]; |
||||||
|
} |
||||||
|
if (record.state_dictText == '已提交') { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '详情', |
||||||
|
onClick: handleDetail.bind(null, record), |
||||||
|
}, |
||||||
|
]; |
||||||
|
} else if (record.state_dictText == '已审核' && record.isopen == '0') { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '启用', |
||||||
|
onClick: handleEnable.bind(null, record), |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '详情', |
||||||
|
onClick: handleDetail.bind(null, record), |
||||||
|
}, |
||||||
|
]; |
||||||
|
} else |
||||||
|
return [ |
||||||
|
{ |
||||||
|
label: '停用', |
||||||
|
onClick: handleDeactivate.bind(null, record), |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: '详情', |
||||||
|
onClick: handleDetail.bind(null, record), |
||||||
|
}, |
||||||
|
]; |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -0,0 +1,154 @@ |
|||||||
|
<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> |
||||||
|
<div class="footer"> |
||||||
|
<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' : ''" |
||||||
|
> |
||||||
|
<SvgIcon :name="data.state == 0 ? 'duihao' : data.state == 1 ? 'duihao' : data.state == 2 ? 'duihao' : data.state == 3 ? 'cuowu' : ''" /> <div>{{ data.state_dictText }}</div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="del" @click.stop="del"> 删除</div> |
||||||
|
<div class="edit" @click.stop="edit">修改</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { watch, ref } from 'vue'; |
||||||
|
import SvgIcon from '/@/components/Icon/src/SvgIcon.vue'; |
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}); |
||||||
|
const emits = defineEmits(['editChange', 'delChange']); |
||||||
|
const data = ref(props.data); |
||||||
|
console.log(props, 'props'); |
||||||
|
|
||||||
|
// 修改 |
||||||
|
const edit = () => { |
||||||
|
emits('editChange', data); |
||||||
|
}; |
||||||
|
const del = () => { |
||||||
|
emits('delChange', data); |
||||||
|
}; |
||||||
|
watch( |
||||||
|
() => props.data, |
||||||
|
(newVal) => { |
||||||
|
data.value = newVal; |
||||||
|
} |
||||||
|
); |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.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; |
||||||
|
.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; |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.item:hover { |
||||||
|
transform: translateY(-5px); |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue