'修改年度比赛项目审核通过的项目不能删除'

gst4base
JayChou 1 week ago
parent dd3aee0dc9
commit 8b1850e85a
  1. 2
      jeecgboot-vue3-master/index.html
  2. 7
      jeecgboot-vue3-master/src/views/annualCompPoint/committee/components/cardItem.vue
  3. 406
      jeecgboot-vue3-master/src/views/annualCompPoint/student/components/AnnualCompPointFormscgl.vue
  4. 75
      jeecgboot-vue3-master/src/views/annualCompPoint/student/components/AnnualCompPointModalscgl.vue
  5. 255
      jeecgboot-vue3-master/src/views/annualCompPoint/student/components/cardItem.vue
  6. 150
      jeecgboot-vue3-master/src/views/annualcomp/school/AnnualCompList copy.vue
  7. 263
      jeecgboot-vue3-master/src/views/annualcomp/school/components/cardItem.vue

@ -161,7 +161,7 @@
<div class="app-loading">
<div class="app-loading-wrap">
<!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />-->
<img src="/resource/img/comp/appLogo.png" class="app-loading-logo" id="change-logo" alt="Logo" />
<!-- <img src="/resource/img/comp/appLogo.png" class="app-loading-logo" id="change-logo" alt="Logo" /> -->
<div class="app-loading-dots">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
</div>

@ -21,8 +21,8 @@
<li @click="handleEditxmnl" style="margin-right: 0">项目(赛道)能力管理</li>
<li @click="updateApply">{{ statusText(data.annualCompState) }}</li>
<li @click="edit">编辑</li>
<li @click="del">删除</li>
<li @click="edit" v-if="data.annualCompState == '0'">编辑</li>
<li class="del" @click="del" v-if="data.annualCompState == '0'">删除</li>
</ul>
</div>
<div class="footer-setting">
@ -219,7 +219,8 @@
margin-top: 13px;
cursor: pointer;
}
li:last-child {
.del{
color: #f53f3f;
background-color: #ffece8;
}

@ -0,0 +1,406 @@
<template>
<a-spin :spinning="confirmLoading">
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row>
<a-col :span="12">
<a-form-item label="年度比赛" v-bind="validateInfos.annualCompId" :labelCol="labelCol"
:wrapperCol="wrapperCol">
<j-popup
placeholder="请选择年度比赛"
v-model:value="formData.annualCompId_dictText"
code="ndbs"
:fieldConfig="[
{ source: 'name', target: 'annualCompId_dictText' },
{ source: 'id', target: 'annualCompId' },
]"
:multi="true"
:setFieldsValue="setFieldsValue"
disabled="true"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="项目(赛道)名称" v-bind="validateInfos.objName" :labelCol="labelCol"
:wrapperCol="wrapperCol">
<a-input v-model:value="formData.objName" placeholder="请输入项目(赛道)名称"
disabled="true"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="开始时间" v-bind="validateInfos.starttime">
<a-date-picker placeholder="请选择开始时间" v-model:value="formData.starttime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
disabled="true"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="结束时间" v-bind="validateInfos.endtime">
<a-date-picker placeholder="请选择结束时间" v-model:value="formData.endtime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
disabled="true"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="项目(赛道)层次" v-bind="validateInfos.objLevel" :labelCol="labelCol" :wrapperCol="wrapperCol7">
<j-dict-select-tag type="radio" v-model:value="formData.objLevel" placeholder="请选择项目(赛道)层次" dict-code="obj_lever" disabled="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="简介" v-bind="validateInfos.introduce" :labelCol="labelCol1"
:wrapperCol="wrapperCol1">
<a-textarea v-model:value="formData.introduce" rows="4" placeholder="请输入简介"
disabled="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="11">
<a-form-item label="参与形式" v-bind="validateInfos.entryForm" :labelCol="labelCol"
:wrapperCol="wrapperCol8">
<j-dict-select-tag type="radio" v-model:value="formData.entryForm" placeholder="请选择参与形式" dict-code="joinType" disabled="true"/>
</a-form-item>
</a-col>
<a-col :span="6" v-if="formData.entryForm==='Y'">
<a-form-item label="是否需要领队" v-bind="validateInfos.requireLeader" :labelCol="labelCol3"
:wrapperCol="wrapperCol3">
<j-switch v-model:value="formData.requireLeader" disabled="true"></j-switch>
</a-form-item>
</a-col>
<a-col :span="7" v-if="formData.entryForm==='Y'">
<a-form-item label="是否需要队伍名称" v-bind="validateInfos.requireTeamName" :labelCol="labelCol3"
:wrapperCol="wrapperCol3" >
<j-switch type='radio' v-model:value="formData.requireTeamName" dictCode=""
placeholder="请选择是否需要队伍名称" disabled="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12" v-if="formData.entryForm==='Y'">
<a-form-item label="队伍人数" v-bind="validateInfos.teamNumber">
<a-input-number v-model:value="formData.teamNumber" placeholder="请输入队伍人数"
style="width: 100%" disabled="true"/>
</a-form-item>
</a-col>
<a-col :span="12" v-if="formData.entryForm==='Y'">
<a-form-item label="指导老师人数" v-bind="validateInfos.teacherNumber">
<a-input-number v-model:value="formData.teacherNumber" placeholder="请输入指导老师人数"
style="width: 100%" disabled="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="5">
<a-form-item label="是否报名" v-bind="validateInfos.requireApply" :labelCol="labelCol4"
:wrapperCol="wrapperCol4">
<j-switch v-model:value="formData.requireApply" :disabled="disabled"></j-switch>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireApply==='Y'">
<a-form-item label="开始时间" v-bind="validateInfos.applyStartTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择报名开始时间" v-model:value="formData.applyStartTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireApply==='Y'">
<a-form-item label="结束时间" v-bind="validateInfos.applyEndTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择报名结束时间" v-model:value="formData.applyEndTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="5">
<a-form-item label="是否选题" v-bind="validateInfos.requireTopic" :labelCol="labelCol4"
:wrapperCol="wrapperCol4">
<j-switch v-model:value="formData.requireTopic" :disabled="disabled"></j-switch>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireTopic==='Y'">
<a-form-item label="开始时间" v-bind="validateInfos.topicStartTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择选题开始时间" v-model:value="formData.topicStartTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireTopic==='Y'">
<a-form-item label="结束时间" v-bind="validateInfos.topicEndTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择选题结束时间" v-model:value="formData.topicEndTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="5">
<a-form-item label="上传作品" v-bind="validateInfos.requireUploadWorks" :labelCol="labelCol4"
:wrapperCol="wrapperCol4">
<j-switch v-model:value="formData.requireUploadWorks" :disabled="disabled"></j-switch>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireUploadWorks==='Y'">
<a-form-item label="开始时间" v-bind="validateInfos.uploadStartTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择上传作品开始时间" v-model:value="formData.uploadStartTime"
showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireUploadWorks==='Y'">
<a-form-item label="结束时间" v-bind="validateInfos.uploadEndTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择上传作品结束时间" v-model:value="formData.uploadEndTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="24" v-if="formData.requireUploadWorks==='Y'">
<a-form-item label="上传作品类型" v-bind="validateInfos.uploadWorksType" :labelCol="labelCol6"
:wrapperCol="wrapperCol6">
<j-select-multiple type="list_multi" v-model:value="formData.uploadWorksType"
dictCode="updateWorksType" placeholder="请选择上传作品类型" :disabled="disabled"
:triggerChange="false"/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="5">
<a-form-item label="是否评分" v-bind="validateInfos.requireScore" :labelCol="labelCol4"
:wrapperCol="wrapperCol4">
<j-switch v-model:value="formData.requireScore" :disabled="disabled"></j-switch>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireScore==='Y'">
<a-form-item label="开始时间" v-bind="validateInfos.scoreStartTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择评分开始时间" v-model:value="formData.scoreStartTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
<a-col :span="9" v-if="formData.requireScore==='Y'">
<a-form-item label="结束时间" v-bind="validateInfos.scoreEndTime" :labelCol="labelCol5"
:wrapperCol="wrapperCol5">
<a-date-picker placeholder="请选择评分结束时间" v-model:value="formData.scoreEndTime" showTime
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"
:disabled="disabled"/>
</a-form-item>
</a-col>
</a-row>
<p style="color: red">如果需要评分则需要添加开启选题</p>
<a-row v-if="formData.annualCompState==='4'">
<a-col :span="24">
<a-form-item label="驳回原因" v-bind="validateInfos.introduce" :labelCol="labelCol1"
:wrapperCol="wrapperCol1">
<a-textarea v-model:value="formData.backinfo" rows="4" placeholder="请输入简介"
:disabled="true"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</template>
<script lang="ts" setup>
import {ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted} 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 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 {getValueType} from '/@/utils';
import {saveOrUpdate1} from '../AnnualCompPoint.api';
import {Form} from 'ant-design-vue';
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: '',
annualCompId: '',
objName: '',
introduce: '',
objLevel: '3',
entryForm: 'Y',
teamNumber: undefined,
teacherNumber: undefined,
requireLeader: '',
requireTeamName: '',
requireApply: 'Y',
requireTopic: 'Y',
requireUploadWorks: 'Y',
uploadWorksType: '',
requireScore: 'Y',
starttime: '',
endtime: '',
annualCompSwitch: '',
message: '',
applyStartTime: '',
applyEndTime: '',
topicStartTime: '',
topicEndTime: '',
uploadStartTime: '',
uploadEndTime: '',
scoreStartTime: '',
scoreEndTime: '',
});
const {createMessage} = useMessage();
const labelCol = ref<any>({xs: {span: 24}, sm: {span: 6}});
const wrapperCol = ref<any>({xs: {span: 24}, sm: {span: 16}});
const labelCol1 = ref<any>({xs: {span: 24}, sm: {span: 3}});
const wrapperCol1 = ref<any>({xs: {span: 24}, sm: {span: 20}});
const labelCol2 = ref<any>({xs: {span: 24}, sm: {span: 9}});
const wrapperCol2 = ref<any>({xs: {span: 24}, sm: {span: 5}});
const labelCol3 = ref<any>({xs: {span: 24}, sm: {span: 13}});
const wrapperCol3 = ref<any>({xs: {span: 24}, sm: {span: 5}});
const labelCol4 = ref<any>({xs: {span: 24}, sm: {span: 14}});
const wrapperCol4 = ref<any>({xs: {span: 24}, sm: {span: 1}});
const labelCol5 = ref<any>({xs: {span: 24}, sm: {span: 8}});
const wrapperCol5 = ref<any>({xs: {span: 24}, sm: {span: 16}});
const labelCol6 = ref<any>({xs: {span: 24}, sm: {span: 8}});
const wrapperCol6 = ref<any>({xs: {span: 24}, sm: {span: 6}});
const labelCol7 = ref<any>({xs: {span: 24}, sm: {span: 8}});
const wrapperCol7 = ref<any>({xs: {span: 24}, sm: {span: 24}});
const wrapperCol8 = ref<any>({xs: {span: 24}, sm: {span: 14}});
const confirmLoading = ref<boolean>(false);
//
const validatorRules = {
annualCompId: [{required: true, message: '请输入年度比赛id!'},],
objName: [{required: true, message: '请输入项目名称!'},],
entryForm: [{required: true, message: '请输入参与形式!'},],
requireApply: [{required: true, message: '请输入是否报名!'},],
requireTopic: [{required: true, message: '请输入是否选题!'},],
requireUploadWorks: [{required: true, message: '请输入是否上传作品!'},],
requireScore: [{required: true, message: '请输入是否评分!'},],
starttime: [{required: true, message: '请输入开始时间!'},],
endtime: [{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;
});
/**
* 新增
*/
function add() {
edit({});
}
/**
* 编辑
*/
function edit(record) {
nextTick(() => {
resetFields();
// record.applyStartTime='';
// record.applyStartTime='';
// record.applyEndTime='';
// record.topicStartTime='';
// record.topicEndTime='';
// record.uploadStartTime='';
// record.uploadEndTime='';
// record.scoreStartTime='';
// record.scoreEndTime='';
// record.uploadWorksType='';
//
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 saveOrUpdate1(model, isUpdate.value)
.then((res) => {
if (res.success) {
createMessage.success(res.message);
emit('ok');
} else {
createMessage.warning(res.message);
}
})
.finally(() => {
confirmLoading.value = false;
});
}
/**
* popup组件值改变事件
*/
function setFieldsValue(map) {
Object.keys(map).map((key) => {
formData[key] = map[key];
});
}
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="关闭">
<AnnualCompPointFormscgl ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></AnnualCompPointFormscgl>
</a-modal>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import AnnualCompPointFormscgl from './AnnualCompPointFormscgl.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>

@ -0,0 +1,255 @@
<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 = () => {
console.log(data.value,'子');
emits('infoChange', data);
};
const editscgl = () => {
console.log(data.value,'子');
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) => {
console.log(newVal,'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>

@ -0,0 +1,150 @@
<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"></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>
<!-- 表单区域 -->
<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, 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 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) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
},
];
}
</script>
<style scoped></style>

@ -0,0 +1,263 @@
<template>
<div>
<div class="item">
<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="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' : ''"
>
<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>
</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','infoChange','submitChange','enableChange','deactivateChange']);
const data = ref(props.data);
console.log(props, 'props');
//
const edit = () => {
emits('editChange', data);
};
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;
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 {
margin-top: 5px;
font-size: 20px;
font-weight: 700;
}
.time {
font-size: 15px;
color: #86909c;
}
.center {
margin-top: 20px;
ul {
display: flex;
flex-wrap: wrap;
li {
display: flex;
width: 50%;
.label {
color: #86909c;
}
}
li:nth-child(1) {
width: 100%;
}
}
}
.footer {
// 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: 37px;
font-size: 16px;
cursor: pointer;
}
.status-1 {
background-color: #00c7be;
color: #fff;
}
.status-2 {
background-color: #34c759;
color: #fff;
}
.status-3 {
background-color: #ff3b30;
color: #fff;
}
.status-0 {
background-color: #e4e4e6;
color: #000000;
}
}
}
.item:hover {
transform: translateY(-5px);
}
</style>
Loading…
Cancel
Save