forked from wangjiadong/comp
Compare commits
3 Commits
9bc92ee9f3
...
8b1850e85a
| Author | SHA1 | Date |
|---|---|---|
JayChou
|
8b1850e85a | 1 week ago |
|
JayChou
|
dd3aee0dc9 | 1 week ago |
|
JayChou
|
689ec5e9f3 | 2 weeks ago |
8 changed files with 1155 additions and 5 deletions
@ -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…
Reference in new issue