8 changed files with 1212 additions and 232 deletions
|
After Width: | Height: | Size: 1.1 MiB |
@ -0,0 +1,195 @@ |
|||
<!-- |
|||
@ 作者: 袁纪菲 |
|||
@ 时间: 2024.3.18 |
|||
@ 备注: 添加卡片 |
|||
--> |
|||
<script setup> |
|||
import { ref,computed,reactive,watch,toRef} from 'vue'; |
|||
|
|||
const props = defineProps({ |
|||
visible:Boolean |
|||
}); |
|||
const emits = defineEmits(["update:visible", "data"]); |
|||
|
|||
const formLabelWidth = '80px' |
|||
let timer |
|||
const dialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
const form = reactive({ |
|||
data:{ |
|||
id: '', |
|||
name: '', |
|||
imageUrl: '', |
|||
}, |
|||
visible: computed({ |
|||
get(){ |
|||
return props.visible |
|||
}, |
|||
set(val) { |
|||
emits('update:visible', val) |
|||
} |
|||
}) |
|||
}) |
|||
const drawerRefadd = ref(); |
|||
|
|||
// 图片预览地址 |
|||
const previewImageUrl = ref(''); |
|||
// 图片上传前的钩子函数 |
|||
const beforeUpload = (file) => { |
|||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJPG) { |
|||
ElMessage.error('只能上传 JPG 或 PNG 格式的图片'); |
|||
return false; |
|||
} |
|||
const isLt2M = file.size / 1024 / 1024 < 2; |
|||
if (!isLt2M) { |
|||
ElMessage.error('图片大小不能超过 2MB'); |
|||
return false; |
|||
} |
|||
// 如果验证通过，则可以将本地图片转为 URL 显示预览 |
|||
const reader = new FileReader(); |
|||
reader.readAsDataURL(file); |
|||
reader.onload = () => { |
|||
previewImageUrl.value = reader.result; |
|||
form.data.imageUrl = reader.result; // 更新到表单数据 |
|||
}; |
|||
return isJPG && isLt2M; |
|||
}; |
|||
// 表单提交 |
|||
const onSubmit = async () => { |
|||
// 验证表单数据... |
|||
if (!form.data.name) { |
|||
ElMessage.error("标题不能为空"); |
|||
return; |
|||
} |
|||
// 模拟向本地数据添加新的卡片数据 |
|||
const newCard = { ...form.data }; |
|||
// 关闭添加卡片的抽屉 |
|||
drawerRefadd.value.close(); |
|||
// 将新卡片数据发送回父组件 |
|||
emits('data', newCard); |
|||
// 清空表单以便下次使用 |
|||
form.data.name = ''; |
|||
// 提交成功后，关闭loading状态 |
|||
loading.value = false; |
|||
emits('update:visible', false) |
|||
}; |
|||
|
|||
// }; |
|||
// 关闭 |
|||
const handleClose = () => { |
|||
if (loading.value) { |
|||
return |
|||
} |
|||
ElMessageBox.confirm( |
|||
'你是否要提交数据?', |
|||
"温馨提示", |
|||
{ |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
} |
|||
) |
|||
.then(() => { |
|||
loading.value = true |
|||
timer = setTimeout(() => { |
|||
// done() 不能用done |
|||
// 动画关闭需要一定的时间 |
|||
setTimeout(() => { |
|||
loading.value = false |
|||
emits('update:visible', false) |
|||
}, 400) |
|||
}, 2000) |
|||
}) |
|||
|
|||
.catch(() => { |
|||
// catch error |
|||
cancelForm(); |
|||
}) |
|||
} |
|||
// 取消 |
|||
const cancelForm = () => { |
|||
loading.value = false |
|||
dialog.value = false |
|||
emits('update:visible', false) |
|||
clearTimeout(timer) |
|||
form.data.name = '' |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<el-drawer |
|||
ref="drawerRefadd" |
|||
:model-value="visible" |
|||
title="添加" |
|||
:before-close="handleClose" |
|||
direction="ltr" |
|||
class="demo-drawer" |
|||
size="400px" |
|||
> |
|||
<div class="demo-drawer__content"> |
|||
<el-form :model="form"> |
|||
<el-form-item label="标题" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.data.name" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item label="图片" :label-width=formLabelWidth> |
|||
<el-upload |
|||
class="picture-uploader" |
|||
action="" |
|||
:auto-upload="false" |
|||
:before-upload="beforeUpload" |
|||
:on-change="handleChange" |
|||
list-type="picture-card"> |
|||
<i class="el-icon-plus"></i> |
|||
</el-upload> |
|||
<!-- 预览区域 --> |
|||
<div v-if="form.data.imageUrl" class="preview-image"> |
|||
<img :src="form.data.imageUrl" alt="预览图片" /> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="demo-drawer__footer"> |
|||
<el-button @click="cancelForm">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="onSubmit"> |
|||
{{loading ? '正在提交 ...' : '提交'}} |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.el-form { |
|||
margin: 30px 15px 10px 0; |
|||
.el-image { |
|||
width: 120px; |
|||
height: 120px; |
|||
border: 1px solid #ccc; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.picture { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
.uppicture { |
|||
flex: 1; |
|||
position: relative; |
|||
border: 1px solid #ccc; |
|||
input { |
|||
width: 100%; |
|||
height: 100%; |
|||
vertical-align: middle; |
|||
opacity: 0; |
|||
} |
|||
i { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,190 @@ |
|||
<!-- |
|||
@ 作者: 袁纪菲 |
|||
@ 时间: 2024.3.18 |
|||
@ 备注: 编辑卡片 |
|||
--> |
|||
<script setup> |
|||
import { ref,computed,reactive} from 'vue'; |
|||
import { ElDrawer, ElMessageBox } from 'element-plus' |
|||
const props = defineProps({ |
|||
visible:Boolean |
|||
}); |
|||
const emits = defineEmits(["update:visible", "data"]); |
|||
|
|||
const formLabelWidth = '80px' |
|||
let timer |
|||
const dialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
const form = reactive({ |
|||
data:{ |
|||
id: '', |
|||
name: '', |
|||
imageUrl: '', |
|||
}, |
|||
visible: computed({ |
|||
get(){ |
|||
return props.visible |
|||
}, |
|||
set(val) { |
|||
emits('update:visible', val) |
|||
} |
|||
}) |
|||
}) |
|||
const drawerRefedit = ref(); |
|||
|
|||
// 图片预览地址 |
|||
const previewImageUrl = ref(''); |
|||
// 图片上传前的钩子函数 |
|||
const beforeUpload = (file) => { |
|||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; |
|||
if (!isJPG) { |
|||
ElMessage.error('只能上传 JPG 或 PNG 格式的图片'); |
|||
return false; |
|||
} |
|||
const isLt2M = file.size / 1024 / 1024 < 2; |
|||
if (!isLt2M) { |
|||
ElMessage.error('图片大小不能超过 2MB'); |
|||
return false; |
|||
} |
|||
// 如果验证通过，则可以将本地图片转为 URL 显示预览 |
|||
const reader = new FileReader(); |
|||
reader.readAsDataURL(file); |
|||
reader.onload = () => { |
|||
previewImageUrl.value = reader.result; |
|||
form.data.imageUrl = reader.result; // 更新到表单数据 |
|||
}; |
|||
return isJPG && isLt2M; |
|||
}; |
|||
// 表单提交 |
|||
const onSubmit = async () => { |
|||
// 验证表单数据... |
|||
if (!form.data.name) { |
|||
ElMessage.error("标题不能为空"); |
|||
return; |
|||
} |
|||
// 模拟向本地数据添加新的卡片数据 |
|||
const newCard = { ...form.data }; |
|||
// 关闭添加卡片的抽屉 |
|||
drawerRefadd.value.close(); |
|||
// 将新卡片数据发送回父组件 |
|||
emits('data', newCard); |
|||
// 清空表单以便下次使用 |
|||
form.data.name = ''; |
|||
// 提交成功后，关闭loading状态 |
|||
loading.value = false; |
|||
drawerRefedit.value = false; |
|||
}; |
|||
const handleClose = () => { |
|||
if (loading.value) { |
|||
return |
|||
} |
|||
ElMessageBox.confirm( |
|||
'你是否要提交数据?', |
|||
"温馨提示", |
|||
{ |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
} |
|||
) |
|||
.then(() => { |
|||
loading.value = true |
|||
timer = setTimeout(() => { |
|||
// done() |
|||
// 动画关闭需要一定的时间 |
|||
setTimeout(() => { |
|||
loading.value = false |
|||
emits('update:visible', false) |
|||
}, 400) |
|||
}, 2000) |
|||
}) |
|||
.catch(() => { |
|||
// catch error |
|||
cancelForm(); |
|||
}) |
|||
} |
|||
// 取消 |
|||
const cancelForm = () => { |
|||
loading.value = false |
|||
dialog.value = false |
|||
emits('update:visible', false) |
|||
clearTimeout(timer) |
|||
form.data.name = '' |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
ref="drawerRefedit" |
|||
:model-value="visible" |
|||
title="编辑" |
|||
:before-close="handleClose" |
|||
direction="ltr" |
|||
class="demo-drawer" |
|||
size="400px" |
|||
> |
|||
<div class="demo-drawer__content"> |
|||
<el-form :model="form"> |
|||
<el-form-item label="标题" :label-width="formLabelWidth"> |
|||
<el-input v-model="form.data.name" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item label="图片" :label-width=formLabelWidth> |
|||
<el-upload |
|||
class="picture-uploader" |
|||
action="" |
|||
:auto-upload="false" |
|||
:before-upload="beforeUpload" |
|||
:on-change="handleChange" |
|||
list-type="picture-card"> |
|||
<i class="el-icon-plus"></i> |
|||
</el-upload> |
|||
<!-- 预览区域 --> |
|||
<div v-if="form.data.imageUrl" class="preview-image"> |
|||
<img :src="form.data.imageUrl" alt="预览图片" /> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="demo-drawer__footer"> |
|||
<el-button @click="cancelForm">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="onSubmit"> |
|||
{{loading ? '正在提交 ...' : '提交'}} |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.el-form { |
|||
margin: 30px 15px 10px 0; |
|||
.el-image { |
|||
width: 120px; |
|||
height: 120px; |
|||
border: 1px solid #ccc; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.picture { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
.uppicture { |
|||
flex: 1; |
|||
position: relative; |
|||
border: 1px solid #ccc; |
|||
input { |
|||
width: 100%; |
|||
height: 100%; |
|||
vertical-align: middle; |
|||
opacity: 0; |
|||
} |
|||
i { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 30px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -1,241 +1,213 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-20 08:59:00 |
|||
@ 备注: 实验表单 |
|||
@ 作者: 袁纪菲 |
|||
@ 时间: 2024.3.18 |
|||
@ 备注: 应用管理父组件 |
|||
--> |
|||
<script lang='ts' setup> |
|||
<script lang = "ts" setup> |
|||
import cardedit from './cardedit.vue'; |
|||
import cardadd from './cardadd.vue'; |
|||
import {ref,onMounted,onUnmounted,watch} from 'vue'; |
|||
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue' |
|||
|
|||
const size = ref('default') |
|||
const labelPosition = ref('right') |
|||
// 弹窗状态 |
|||
const props = defineProps({ |
|||
visible:Boolean |
|||
}); |
|||
const drawerRefadd = ref(false); |
|||
const drawerRefedit = ref(false) |
|||
|
|||
const ruleForm = reactive<any>({ |
|||
name: 'Hello', |
|||
region: '', |
|||
count: '', |
|||
date1: '', |
|||
date2: '', |
|||
delivery: false, |
|||
type: [], |
|||
resource: '', |
|||
desc: '', |
|||
}) |
|||
|
|||
const editMycontRules = reactive({ |
|||
name: [{ required: true, message: "请输入姓名", trigger: "blur" }], |
|||
}) |
|||
const editPostFormRef = ref(ElForm); //编辑表单 |
|||
const submitForm = async (formEl: FormInstance | undefined) => { |
|||
editPostFormRef.value.validate((isValid: boolean) => { |
|||
if (isValid) { |
|||
// 卡片数据 |
|||
interface cardDatass { |
|||
id: number; |
|||
name: string; |
|||
imageUrl: '', |
|||
} |
|||
const cardData = ref<cardDatass[]>([]); |
|||
const emits = defineEmits(["update:visible", "data"]); |
|||
//添加 |
|||
const opencardadd = () => { |
|||
drawerRefadd.value = true; |
|||
cardadd.value.onSubmit = handleAddCard; |
|||
}; |
|||
// 新增卡片数据的接收与处理 |
|||
const handleAddCard = (newCard: cardDatass) => { |
|||
cardData.value.push(newCard); |
|||
}; |
|||
//编辑 |
|||
const opencardedit = (index: number) => { |
|||
drawerRefedit.value = true; |
|||
// 将当前卡片的数据传给cardedit组件 |
|||
cardedit.value.cardData = cardData.value[index]; |
|||
cardedit.value.onSubmit = handleEditCard; |
|||
}; |
|||
// 编辑卡片数据的接收与处理 |
|||
const handleEditCard = (newCard: cardDatass) => { |
|||
cardData.value.splice(0,1,newCard); |
|||
}; |
|||
//删除 |
|||
const deleteCard = (index: number) => { |
|||
cardData.value.splice(index, 1); |
|||
emits('data', cardData.value); |
|||
}; |
|||
//监听子组件发来的 'data' 事件 |
|||
watch(() => props.visible, () => { |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
// 监听子组件返回的新卡片数据 |
|||
const handleNewCard = (newCard: cardDatass) => { |
|||
cardData.value.push(newCard); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
for(let i = 0;i<9;i++){ |
|||
cardData.value.push({ |
|||
id: i, |
|||
name: '卡片' + i, |
|||
imageUrl: '' |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
const options = Array.from({ length: 10000 }).map((_, idx) => ({ |
|||
value: `${idx + 1}`, |
|||
label: `${idx + 1}`, |
|||
})) |
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
const inline = ref(false) |
|||
const labelWidth = ref<any>("") |
|||
const labelSuffix = ref<any>("") |
|||
const hideRequiredAsterisk = ref(false) |
|||
const requireAsteriskPosition = ref('right') |
|||
const showMessage = ref(true) |
|||
const inlineMessage = ref(false) |
|||
const statusIcon = ref(false) |
|||
}); |
|||
</script> |
|||
<template> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">对齐方式：</el-col> |
|||
<el-col :span="16"> |
|||
<el-radio-group v-model="labelPosition" label="label position"> |
|||
<el-radio-button label="left">Left</el-radio-button> |
|||
<el-radio-button label="right">Right</el-radio-button> |
|||
<el-radio-button label="top">Top</el-radio-button> |
|||
</el-radio-group> |
|||
<cardadd v-model:visible="drawerRefadd" :keyval="props.visible" @data="handleNewCard"/> |
|||
<cardedit v-model:visible="drawerRefedit" :keyval="props.visible" @data="handleNewCard"/> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> |
|||
<div class="grid-content ep-bg-purple" > |
|||
<el-card class="cardlarge"> |
|||
<template #header> |
|||
<div class="cardhead-large"> |
|||
<el-row class="block-col-2"> |
|||
<el-col style="text-align: right;"> |
|||
<el-dropdown> |
|||
<span class="el-dropdown-link"> |
|||
<el-icon><MoreFilled /></el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="opencardadd" >添加</el-dropdown-item> |
|||
<el-dropdown-item >编辑</el-dropdown-item> |
|||
<el-dropdown-item >删除</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</el-col> |
|||
<el-col style="text-align: left;"> |
|||
<span>标题一</span> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">尺寸控制：</el-col> |
|||
<el-col :span="16"> |
|||
<el-radio-group v-model="size" label="size control"> |
|||
<el-radio-button label="large">large</el-radio-button> |
|||
<el-radio-button label="default">default</el-radio-button> |
|||
<el-radio-button label="small">small</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">行内表单模式：</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="inline" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">标签宽度：</el-col> |
|||
<el-col :span="16"> |
|||
<el-input v-model="labelWidth" placeholder="Please input"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">标签后缀：</el-col> |
|||
<el-col :span="16"> |
|||
<el-input v-model="labelSuffix" placeholder="Please input"> |
|||
</el-input> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否隐藏必填字段标签旁边的红色星号。：</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="hideRequiredAsterisk" active-text="Open" inactive-text="Close" /> |
|||
</div> |
|||
</template> |
|||
<div class="grid-content ep-bg-purple" > |
|||
<el-row :gutter="10" > |
|||
<el-col v-for="(card, index) in cardData" :key="card.id" :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
v-if="card.imageUrl" |
|||
src="card.imageUrl" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>{{ card.name }}</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit(index)"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">星号的位置</el-col> |
|||
<el-col :span="16"> |
|||
<el-radio-group v-model="requireAsteriskPosition" label="label position"> |
|||
<el-radio-button label="left">Left</el-radio-button> |
|||
<el-radio-button label="right">Right</el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否显示校验错误信息:</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="showMessage" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否以行内形式展示校验信息:</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="inlineMessage" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否在输入框中显示校验结果反馈图标:</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="statusIcon" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<!-- 分页 --> |
|||
<div class="example-pagination-block"> |
|||
<div class="example-demonstration"></div> |
|||
<el-pagination layout="prev, pager, next" :total="50" /> |
|||
</div> |
|||
|
|||
<el-form |
|||
ref="editPostFormRef" |
|||
:model="ruleForm" |
|||
:label-width="labelWidth" |
|||
:label-position="labelPosition" |
|||
:size="size" |
|||
:rules="editMycontRules" |
|||
:inline="inline" |
|||
:label-suffix="labelSuffix" |
|||
:hide-required-asterisk="hideRequiredAsterisk" |
|||
:require-asterisk-position="requireAsteriskPosition" |
|||
:show-message="showMessage" |
|||
:inline-message="inlineMessage" |
|||
:status-icon="statusIcon" |
|||
form-row-2 |
|||
> |
|||
<el-form-item label="Activity name" prop="name"> |
|||
<el-input v-model="ruleForm.name" /> |
|||
</el-form-item> |
|||
<el-form-item label="Activity zone" prop="region"> |
|||
<el-select v-model="ruleForm.region" placeholder="Activity zone"> |
|||
<el-option label="Zone one" value="shanghai" /> |
|||
<el-option label="Zone two" value="beijing" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="Activity count" prop="count"> |
|||
<el-select-v2 |
|||
v-model="ruleForm.count" |
|||
placeholder="Activity count" |
|||
:options="options" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="Activity time" required> |
|||
<el-col :span="11"> |
|||
<el-form-item prop="date1"> |
|||
<el-date-picker |
|||
v-model="ruleForm.date1" |
|||
type="date" |
|||
label="Pick a date" |
|||
placeholder="Pick a date" |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col class="text-center" :span="2"> |
|||
<span class="text-gray-500">-</span> |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-form-item prop="date2"> |
|||
<el-time-picker |
|||
v-model="ruleForm.date2" |
|||
label="Pick a time" |
|||
placeholder="Pick a time" |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form-item> |
|||
<el-form-item label="Instant delivery" prop="delivery"> |
|||
<el-switch v-model="ruleForm.delivery" /> |
|||
</el-form-item> |
|||
<el-form-item label="Activity type" prop="type"> |
|||
<el-checkbox-group v-model="ruleForm.type"> |
|||
<el-checkbox label="Online activities" name="type" /> |
|||
<el-checkbox label="Promotion activities" name="type" /> |
|||
<el-checkbox label="Offline activities" name="type" /> |
|||
<el-checkbox label="Simple brand exposure" name="type" /> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
<el-form-item label="Resources" prop="resource"> |
|||
<el-radio-group v-model="ruleForm.resource"> |
|||
<el-radio label="Sponsorship" /> |
|||
<el-radio label="Venue" /> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="Activity form" prop="desc"> |
|||
<el-input v-model="ruleForm.desc" type="textarea" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="submitForm(ruleFormRef)"> |
|||
Create |
|||
</el-button> |
|||
<el-button @click="resetForm(ruleFormRef)">Reset</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
<style scoped> |
|||
/* 小卡片 */ |
|||
.cardpattern{ |
|||
padding-bottom: 0px; |
|||
margin-bottom: 10px; |
|||
min-width: 100px; |
|||
} |
|||
/* 小卡片标题 */ |
|||
.cardhead{ |
|||
padding: 10px; |
|||
font-size: 15px; |
|||
} |
|||
/* 大卡片 */ |
|||
.cardlarge{ |
|||
max-width: 480px; |
|||
} |
|||
/* 大卡片标题 */ |
|||
.cardhead-large{ |
|||
font-size: 20px; |
|||
} |
|||
|
|||
/* 按钮整体 */ |
|||
.bottom { |
|||
margin-top: 20px; |
|||
line-height: 10px; |
|||
display: flex; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
|
|||
} |
|||
/* 单个按钮 */ |
|||
.button { |
|||
padding: 0px; |
|||
min-height: auto; |
|||
margin-bottom: 1px; |
|||
} |
|||
/* 图片 */ |
|||
.picture { |
|||
height: 100%; |
|||
min-height: 50px; |
|||
max-height: 100px; |
|||
display: block; |
|||
width: 100%; |
|||
min-width: 50px; |
|||
} |
|||
|
|||
.el-col { |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.grid-content { |
|||
border-radius: 4px; |
|||
min-height: 36px; |
|||
} |
|||
|
|||
.app_box{ |
|||
margin: 15px 0 0 0px; |
|||
} |
|||
|
|||
.block-col-2 .demonstration { |
|||
display: block; |
|||
color: var(--el-text-color-secondary); |
|||
font-size: 14px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.block-col-2 .el-dropdown-link { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
/* 分页 */ |
|||
.example-pagination-block + .example-pagination-block { |
|||
margin-top: 10px; |
|||
} |
|||
.example-pagination-block .example-demonstration { |
|||
margin-bottom: 16px; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,368 @@ |
|||
<!-- |
|||
@ 作者: 袁纪菲 |
|||
@ 时间: 2024.3.18 |
|||
@ 备注: 应用管理父组件 |
|||
--> |
|||
<script lang = "ts" setup> |
|||
import cardedit from './cardedit.vue'; |
|||
import cardadd from './cardadd.vue'; |
|||
import {ref,onMounted,onUnmounted,watch} from 'vue'; |
|||
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue' |
|||
|
|||
const props = defineProps({ |
|||
visible:Boolean |
|||
}); |
|||
// 弹窗状态 |
|||
const drawerRefadd = ref(false); |
|||
const drawerRefedit = ref(false) |
|||
|
|||
// 卡片数据 |
|||
interface cardDatass { |
|||
id: number; |
|||
name: string; |
|||
} |
|||
const cardData = ref<cardDatass[]>([]); |
|||
const emits = defineEmits(["update:visible", "data"]); |
|||
//添加 |
|||
const opencardadd = () => { |
|||
drawerRefadd.value = true; |
|||
cardadd.value.onSubmit = handleAddCard; |
|||
}; |
|||
// 新增卡片数据的接收与处理 |
|||
const handleAddCard = (newCard: cardDatass) => { |
|||
cardData.value.push(newCard); |
|||
}; |
|||
//编辑 |
|||
const opencardedit = (index: number) => { |
|||
drawerRefedit.value = true; |
|||
cardedit.value.onSubmit = handleEditCard; |
|||
}; |
|||
// 编辑卡片数据的接收与处理 |
|||
const handleEditCard = (newCard: cardDatass) => { |
|||
cardData.value.splice(0,1,newCard); |
|||
}; |
|||
//删除 |
|||
const deleteCard = (index: number) => { |
|||
cardData.value.splice(index, 1); |
|||
emits('data', cardData.value); |
|||
}; |
|||
//监听子组件发来的 'data' 事件 |
|||
watch(() => props.visible, () => { |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
// 监听子组件返回的新卡片数据 |
|||
const handleNewCard = (newCard: cardDatass) => { |
|||
cardData.value.push(newCard); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
for(let i = 0;i<5;i++){ |
|||
cardData.value.push({ |
|||
id: i, |
|||
name: '卡片' + i |
|||
}); |
|||
} |
|||
}); |
|||
</script> |
|||
<template> |
|||
<cardadd v-model:visible="drawerRefadd" :keyval="props.visible" @data="handleNewCard"/> |
|||
<cardedit v-model:visible="drawerRefedit" :keyval="props.visible" /> |
|||
<el-row :gutter="10"> |
|||
<el-col v-for="(card, index) in cardData" :key="card.id" :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> |
|||
<div class="grid-content ep-bg-purple" > |
|||
<el-card class="cardlarge"> |
|||
<template #header> |
|||
<div class="cardhead-large"> |
|||
<el-row class="block-col-2"> |
|||
<el-col style="text-align: right;"> |
|||
<el-dropdown> |
|||
<span class="el-dropdown-link"> |
|||
<el-icon><MoreFilled /></el-icon> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="opencardadd" >添加</el-dropdown-item> |
|||
<el-dropdown-item >编辑</el-dropdown-item> |
|||
<el-dropdown-item @click="deleteCard">删除</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</el-col> |
|||
<el-col style="text-align: left;"> |
|||
<span>标题一</span> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
<div class="grid-content ep-bg-purple" > |
|||
<el-row :gutter="10" > |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>{{ card.name }}</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit(index)"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button> |
|||
</div> |
|||
|
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>{{ card.name }}</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
|
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>卡片3</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>卡片4</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>卡片5</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>卡片6</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>卡片7</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>卡片8</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8"> |
|||
<el-card class="cardpattern"> |
|||
<img |
|||
src="../../../assets/1.png" |
|||
title="示例图片" |
|||
class="picture" |
|||
/> |
|||
<div class="cardhead"> |
|||
<span>卡片9</span> |
|||
</div> |
|||
<div class="bottom"> |
|||
<el-button size="small" circle class="button" :icon="View"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button> |
|||
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> |
|||
<div class="grid-content ep-bg-purple-light"> |
|||
<el-card class="cardlarge"> |
|||
|
|||
</el-card> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> |
|||
<div class="grid-content ep-bg-purple"> |
|||
<el-card class="cardlarge"> |
|||
|
|||
</el-card> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> |
|||
<div class="grid-content ep-bg-purple-light"> |
|||
<el-card class="cardlarge"> |
|||
|
|||
</el-card> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="example-pagination-block"> |
|||
<div class="example-demonstration"></div> |
|||
<el-pagination layout="prev, pager, next" :total="50" /> |
|||
</div> |
|||
|
|||
</template> |
|||
<style scoped> |
|||
/* 小卡片 */ |
|||
.cardpattern{ |
|||
padding-bottom: 0px; |
|||
margin-bottom: 10px; |
|||
min-width: 100px; |
|||
} |
|||
/* 小卡片标题 */ |
|||
.cardhead{ |
|||
padding: 10px; |
|||
font-size: 15px; |
|||
} |
|||
/* 大卡片 */ |
|||
.cardlarge{ |
|||
max-width: 480px; |
|||
} |
|||
/* 大卡片标题 */ |
|||
.cardhead-large{ |
|||
font-size: 20px; |
|||
} |
|||
|
|||
/* 按钮整体 */ |
|||
.bottom { |
|||
margin-top: 20px; |
|||
line-height: 10px; |
|||
display: flex; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
|
|||
} |
|||
/* 单个按钮 */ |
|||
.button { |
|||
padding: 0px; |
|||
min-height: auto; |
|||
margin-bottom: 1px; |
|||
} |
|||
/* 图片 */ |
|||
.picture { |
|||
height: 100%; |
|||
min-height: 50px; |
|||
max-height: 100px; |
|||
display: block; |
|||
width: 100%; |
|||
min-width: 50px; |
|||
} |
|||
|
|||
.el-col { |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.grid-content { |
|||
border-radius: 4px; |
|||
min-height: 36px; |
|||
} |
|||
|
|||
.app_box{ |
|||
margin: 15px 0 0 0px; |
|||
} |
|||
|
|||
.block-col-2 .demonstration { |
|||
display: block; |
|||
color: var(--el-text-color-secondary); |
|||
font-size: 14px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.block-col-2 .el-dropdown-link { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
/* 分页 */ |
|||
.example-pagination-block + .example-pagination-block { |
|||
margin-top: 10px; |
|||
} |
|||
.example-pagination-block .example-demonstration { |
|||
margin-bottom: 16px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,241 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-02-20 08:59:00 |
|||
@ 备注: 实验表单 |
|||
--> |
|||
<script lang='ts' setup> |
|||
|
|||
const size = ref('default') |
|||
const labelPosition = ref('right') |
|||
|
|||
const ruleForm = reactive<any>({ |
|||
name: 'Hello', |
|||
region: '', |
|||
count: '', |
|||
date1: '', |
|||
date2: '', |
|||
delivery: false, |
|||
type: [], |
|||
resource: '', |
|||
desc: '', |
|||
}) |
|||
|
|||
const editMycontRules = reactive({ |
|||
name: [{ required: true, message: "请输入姓名", trigger: "blur" }], |
|||
}) |
|||
const editPostFormRef = ref(ElForm); //编辑表单 |
|||
const submitForm = async (formEl: FormInstance | undefined) => { |
|||
editPostFormRef.value.validate((isValid: boolean) => { |
|||
if (isValid) { |
|||
|
|||
} |
|||
}) |
|||
} |
|||
const options = Array.from({ length: 10000 }).map((_, idx) => ({ |
|||
value: `${idx + 1}`, |
|||
label: `${idx + 1}`, |
|||
})) |
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
} |
|||
const inline = ref(false) |
|||
const labelWidth = ref<any>("") |
|||
const labelSuffix = ref<any>("") |
|||
const hideRequiredAsterisk = ref(false) |
|||
const requireAsteriskPosition = ref('right') |
|||
const showMessage = ref(true) |
|||
const inlineMessage = ref(false) |
|||
const statusIcon = ref(false) |
|||
</script> |
|||
<template> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">对齐方式：</el-col> |
|||
<el-col :span="16"> |
|||
<el-radio-group v-model="labelPosition" label="label position"> |
|||
<el-radio-button label="left">Left</el-radio-button> |
|||
<el-radio-button label="right">Right</el-radio-button> |
|||
<el-radio-button label="top">Top</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">尺寸控制：</el-col> |
|||
<el-col :span="16"> |
|||
<el-radio-group v-model="size" label="size control"> |
|||
<el-radio-button label="large">large</el-radio-button> |
|||
<el-radio-button label="default">default</el-radio-button> |
|||
<el-radio-button label="small">small</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">行内表单模式：</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="inline" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">标签宽度：</el-col> |
|||
<el-col :span="16"> |
|||
<el-input v-model="labelWidth" placeholder="Please input"> |
|||
<template #append>PX</template> |
|||
</el-input> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">标签后缀：</el-col> |
|||
<el-col :span="16"> |
|||
<el-input v-model="labelSuffix" placeholder="Please input"> |
|||
</el-input> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否隐藏必填字段标签旁边的红色星号。：</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="hideRequiredAsterisk" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">星号的位置</el-col> |
|||
<el-col :span="16"> |
|||
<el-radio-group v-model="requireAsteriskPosition" label="label position"> |
|||
<el-radio-button label="left">Left</el-radio-button> |
|||
<el-radio-button label="right">Right</el-radio-button> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否显示校验错误信息:</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="showMessage" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否以行内形式展示校验信息:</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="inlineMessage" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-row> |
|||
<el-col :span="8">是否在输入框中显示校验结果反馈图标:</el-col> |
|||
<el-col :span="16"> |
|||
<el-switch v-model="statusIcon" active-text="Open" inactive-text="Close" /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
|
|||
<el-form |
|||
ref="editPostFormRef" |
|||
:model="ruleForm" |
|||
:label-width="labelWidth" |
|||
:label-position="labelPosition" |
|||
:size="size" |
|||
:rules="editMycontRules" |
|||
:inline="inline" |
|||
:label-suffix="labelSuffix" |
|||
:hide-required-asterisk="hideRequiredAsterisk" |
|||
:require-asterisk-position="requireAsteriskPosition" |
|||
:show-message="showMessage" |
|||
:inline-message="inlineMessage" |
|||
:status-icon="statusIcon" |
|||
form-row-2 |
|||
> |
|||
<el-form-item label="Activity name" prop="name"> |
|||
<el-input v-model="ruleForm.name" /> |
|||
</el-form-item> |
|||
<el-form-item label="Activity zone" prop="region"> |
|||
<el-select v-model="ruleForm.region" placeholder="Activity zone"> |
|||
<el-option label="Zone one" value="shanghai" /> |
|||
<el-option label="Zone two" value="beijing" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="Activity count" prop="count"> |
|||
<el-select-v2 |
|||
v-model="ruleForm.count" |
|||
placeholder="Activity count" |
|||
:options="options" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="Activity time" required> |
|||
<el-col :span="11"> |
|||
<el-form-item prop="date1"> |
|||
<el-date-picker |
|||
v-model="ruleForm.date1" |
|||
type="date" |
|||
label="Pick a date" |
|||
placeholder="Pick a date" |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col class="text-center" :span="2"> |
|||
<span class="text-gray-500">-</span> |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<el-form-item prop="date2"> |
|||
<el-time-picker |
|||
v-model="ruleForm.date2" |
|||
label="Pick a time" |
|||
placeholder="Pick a time" |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form-item> |
|||
<el-form-item label="Instant delivery" prop="delivery"> |
|||
<el-switch v-model="ruleForm.delivery" /> |
|||
</el-form-item> |
|||
<el-form-item label="Activity type" prop="type"> |
|||
<el-checkbox-group v-model="ruleForm.type"> |
|||
<el-checkbox label="Online activities" name="type" /> |
|||
<el-checkbox label="Promotion activities" name="type" /> |
|||
<el-checkbox label="Offline activities" name="type" /> |
|||
<el-checkbox label="Simple brand exposure" name="type" /> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
<el-form-item label="Resources" prop="resource"> |
|||
<el-radio-group v-model="ruleForm.resource"> |
|||
<el-radio label="Sponsorship" /> |
|||
<el-radio label="Venue" /> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="Activity form" prop="desc"> |
|||
<el-input v-model="ruleForm.desc" type="textarea" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="submitForm(ruleFormRef)"> |
|||
Create |
|||
</el-button> |
|||
<el-button @click="resetForm(ruleFormRef)">Reset</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue