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