DESKTOP-CUI7KST\HXGK
2 years ago
6 changed files with 896 additions and 259 deletions
@ -0,0 +1,177 @@ |
|||
<!-- 添加卡片 --> |
|||
<script setup> |
|||
import { ref,computed,reactive,watch,defineProps,toRef} 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:{ |
|||
name: '', |
|||
details:'', |
|||
region: '', |
|||
date1: '', |
|||
date2: '', |
|||
delivery: false, |
|||
type: [], |
|||
resource: '', |
|||
desc: '' |
|||
}, |
|||
visible: computed({ |
|||
get(){ |
|||
return props.visible |
|||
}, |
|||
set(val) { |
|||
emits('update:visible', val) |
|||
} |
|||
}) |
|||
}) |
|||
const drawerRefadd = ref(); |
|||
|
|||
// 原element表单提交 |
|||
const onClick = () => { |
|||
if (drawerRefadd.value && typeof drawerRefadd.value.close === 'function') { |
|||
drawerRefadd.value.close(); |
|||
} else { |
|||
console.error('drawerRef.value值为空、未定义或没有close方法'); |
|||
} |
|||
} |
|||
// 修改表单提交 |
|||
// const onSubmit = () => { |
|||
// // 验证表单数据... |
|||
// if (!form.data.name) { |
|||
// ElMessage.error("标题不能为空"); |
|||
// return; |
|||
// } |
|||
// // 模拟向本地数据添加新的卡片数据 |
|||
// const newCard = { ...form.data }; |
|||
// // 关闭添加卡片的抽屉 |
|||
// drawerRefadd.value.close(); |
|||
// // 将新卡片数据发送回父组件 |
|||
// emits('data', newCard); |
|||
// // 清空表单以便下次使用 |
|||
// form.data.name = ''; |
|||
// // 提交成功后，关闭loading状态 |
|||
// loading.value = 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) |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<el-drawer |
|||
ref="drawerRefadd" |
|||
:modelValue="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.name" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<div class="picture"> |
|||
<el-image :src></el-image> |
|||
<div> |
|||
<input |
|||
type="file" |
|||
class="upinput" |
|||
ref="file" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="demo-drawer__footer"> |
|||
<el-button @click="cancelForm">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="onClick"> |
|||
{{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,152 @@ |
|||
<!-- 编辑卡片 --> |
|||
<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:{ |
|||
name: '', |
|||
details:'', |
|||
region: '', |
|||
date1: '', |
|||
date2: '', |
|||
delivery: false, |
|||
type: [], |
|||
resource: '', |
|||
desc: '' |
|||
}, |
|||
visible: computed({ |
|||
get(){ |
|||
return props.visible |
|||
}, |
|||
set(val) { |
|||
emits('update:visible', val) |
|||
} |
|||
}) |
|||
}) |
|||
const drawerRefedit = ref(); |
|||
const onClick = () => { |
|||
if (drawerRefedit.value && typeof drawerRefedit.value.close === 'function') { |
|||
drawerRefedit.value.close(); |
|||
} else { |
|||
console.error('drawerRefedit.value值为空、未定义或没有close方法'); |
|||
} |
|||
} |
|||
|
|||
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) |
|||
} |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
ref="drawerRefedit" |
|||
:modelValue="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.name" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<div class="picture"> |
|||
<el-image :src></el-image> |
|||
<div> |
|||
<input |
|||
type="file" |
|||
class="upinput" |
|||
ref="file" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="demo-drawer__footer"> |
|||
<el-button @click="cancelForm">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="onClick"> |
|||
{{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,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