forked from wangjiadong/comp
commit
a309e0aa1a
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