forked from wangjiadong/comp
Compare commits
1 Commits
8b1850e85a
...
9bc92ee9f3
| Author | SHA1 | Date |
|---|---|---|
 王家东
|
9bc92ee9f3 | 2 weeks ago |
9 changed files with 7 additions and 1157 deletions
@ -1,406 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,75 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,255 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,150 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,263 +0,0 @@ |
|||||||
<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