wangjunping/his
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端最新版本同步

Browse Source
This commit is contained in:
Zhang.WH
2025-09-25 10:36:07 +08:00
parent a3a06d6f3c
commit 1276dc4adb
117 changed files with 11964 additions and 2466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
openhis-ui-vue3/src/template/index.js Normal file
View File

@@ -0,0 +1,17 @@
// 动态引入 template 目录下的所有 .vue 文件
const templates = import.meta.glob('./*.vue', { eager: true });
const components = [];
// 遍历所有引入的文件
for (const path in templates) {
const component = templates[path].default;
components.push(component);
}
const registerComponents = (app) => {
components.forEach((component) => {
app.component(component.name, component);
})
}
export { components, registerComponents };

695
openhis-ui-vue3/src/template/surgicalPatientHandover.vue Normal file
View File

@@ -0,0 +1,695 @@
<!--
* @Author: sjjh
* @Date: 2025-09-19 13:04:49
* @Description: 手术患者移交
-->
<template>
<div class="surgicalPatientHandover-container">
<div class="handover-form">
<div class="form-header">
<h1 class="hospital-name">**医院</h1>
<h2 class="form-title">手术患者交接单</h2>
</div>
<div class="patient-info">
<el-row :gutter="20">
<el-col :span="6">
<div class="info-item">日期：{{ state.formData.date }}</div>
</el-col>
<el-col :span="6">
<div class="info-item">姓名：{{ state.formData.patientName }}</div>
</el-col>
<el-col :span="6">
<div class="info-item">性别：{{ state.formData.gender }}</div>
</el-col>
<el-col :span="6">
<div class="info-item">年龄：{{ state.formData.age }}岁</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="info-item">科室：{{ state.formData.department }}</div>
</el-col>
<el-col :span="6">
<div class="info-item">床号：{{ state.formData.bedNumber }}</div>
</el-col>
<el-col :span="6">
<div class="info-item">住院号：{{ state.formData.hospitalNumber }}</div>
</el-col>
<el-col :span="6">
<div class="info-item">术前诊断：{{ state.formData.preDiagnosis }}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="info-item">拟行手术方式：{{ state.formData.surgeryMethod }}</div>
</el-col>
</el-row>
</div>
<el-form :model="state.formData" label-width="0" class="handover-form-content">
<!-- 一、病房护士与手术室护士交接记录 -->
<div class="form-section">
<div class="section-title">一、病房护士与手术室护士交接记录</div>
<el-row :gutter="20">
<el-col :span="12">
<div class="form-item">
<span class="item-label">药物过敏史</span>
<el-radio-group v-model="state.formData.drugAllergy">
<el-radio :label="1">无</el-radio>
<el-radio :label="2">有</el-radio>
</el-radio-group>
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<span v-if="state.formData.drugAllergy === 2"
>药物名称：
<el-input v-model="state.formData.allergyDrugName" class="inline-input"
/></span>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">身份确认</span>
<el-checkbox-group v-model="state.formData.identityConfirm">
<el-checkbox :label="1">患者姓名核实</el-checkbox>
<el-checkbox :label="2">病例核实</el-checkbox>
<el-checkbox :label="3">腕带核</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">手术标识</span>
<el-radio-group v-model="state.formData.surgeryMark">
<el-radio :label="1">无</el-radio>
<el-radio :label="2">有</el-radio>
</el-radio-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">生命体征</span>
<span>
<el-input v-model="state.formData.temperature" class="inline-input">
<template #prepend>T</template>
<template #append>℃</template>
</el-input>
</span>
<span class="ml-20"
><el-input v-model="state.formData.pulse" class="inline-input">
<template #prepend>P</template>
<template #append>次/分</template>
</el-input></span
>
<span class="ml-20"
><el-input v-model="state.formData.respiration" class="inline-input">
<template #prepend>R</template>
<template #append>次/分</template>
</el-input></span
>
<span class="ml-20"
><el-input v-model="state.formData.respiration" class="inline-input">
<template #prepend>BP</template>
<template #append>mmHg</template>
</el-input></span
>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">意识状态</span>
<el-checkbox-group v-model="state.formData.consciousness">
<el-checkbox :label="1">清醒</el-checkbox>
<el-checkbox :label="2">嗜睡</el-checkbox>
<el-checkbox :label="3">意识模糊</el-checkbox>
<el-checkbox :label="4">躁动</el-checkbox>
<el-checkbox :label="5">偏瘫</el-checkbox>
<el-checkbox :label="6">昏迷</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">皮肤情况</span>
<el-checkbox-group v-model="state.formData.skinCondition">
<el-checkbox :label="1">正常</el-checkbox>
<el-checkbox :label="2">破损</el-checkbox>
<el-checkbox :label="3">压力性损伤</el-checkbox>
<el-checkbox :label="4">其他</el-checkbox>
</el-checkbox-group>
<span v-if="state.formData.skinCondition.includes(4)"
>其他： <el-input v-model="state.formData.skinOther" class="inline-input"
/></span>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="form-item">
<span class="item-label">皮肤情况</span>
<span>部位</span>
<el-input v-model="state.formData.skinPosition1" class="inline-input" style="width: 50px" />
<span>面积</span>
<el-input
v-model="state.formData.skinArea1"
class="inline-input"
style="width: 50px"
/>
<span>×</span>
<el-input
v-model="state.formData.skinArea2"
class="inline-input"
style="width: 50px"
/>
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<span>部位</span>
<el-input v-model="state.formData.skinPosition2" class="inline-input" style="width: 50px" />
<span>面积</span>
<el-input
v-model="state.formData.skinArea3"
class="inline-input"
style="width: 50px"
/>
<span>×</span>
<el-input
v-model="state.formData.skinArea4"
class="inline-input"
style="width: 50px"
/>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">留置管路</span>
<el-checkbox-group v-model="state.formData.preOperativePipeline">
<el-checkbox :label="1">无</el-checkbox>
<el-checkbox :label="2">中心静脉置管</el-checkbox>
<el-checkbox :label="3">动脉置管</el-checkbox>
<el-checkbox :label="4">气管插管</el-checkbox>
<el-checkbox :label="5">胃管</el-checkbox>
<el-checkbox :label="6">尿管</el-checkbox>
<el-checkbox :label="7">引流管</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">外周静脉通路</span>
<el-input
v-model="state.formData.peripheralVein"
class="inline-input"
style="width: 50px"
/>
<span>条</span>
<el-checkbox-group v-model="state.formData.veinPosition" class="ml-20">
<el-checkbox :label="1">右上肢</el-checkbox>
<el-checkbox :label="2">右下肢</el-checkbox>
<el-checkbox :label="3">左上肢</el-checkbox>
<el-checkbox :label="4">左下肢</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">确认事项</span>
<el-checkbox-group v-model="state.formData.confirmItems">
<el-checkbox :label="1">禁食水</el-checkbox>
<el-checkbox :label="2">备皮</el-checkbox>
<el-checkbox :label="3">无活动义齿</el-checkbox>
<el-checkbox :label="4">无随形眼镜</el-checkbox>
<el-checkbox :label="5">摘首饰</el-checkbox>
<el-checkbox :label="6">非月经期</el-checkbox>
<el-checkbox :label="7">病员服</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">携带物品</span>
<el-checkbox-group v-model="state.formData.carryItems">
<el-checkbox :label="1">病例</el-checkbox>
<el-checkbox :label="2">药物</el-checkbox>
<el-checkbox :label="3">影像资料</el-checkbox>
<el-checkbox :label="4">胸/腹带</el-checkbox>
<el-checkbox :label="5">血制品</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="form-item">
<span class="item-label">病房护士签名</span>
<el-input v-model="state.formData.wardNurseName" class="inline-input" />
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<span class="item-label">手术护士签名</span>
<el-input v-model="state.formData.surgeryNurseName" class="inline-input" />
</div>
</el-col>
<el-col :span="8">
<div class="form-item">
<span class="item-label">交接时间</span>
<el-input v-model="state.formData.handoverTime" class="inline-input" />
</div>
</el-col>
</el-row>
</div>
<!-- 二、手术室护士与麻醉复苏室护士/病房护士交接记录 -->
<div class="form-section">
<div class="section-title">二、手术室护士与麻醉复苏室护士/病房护士交接记录</div>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">生命体征</span>
<span>P</span>
<el-input
v-model="state.formData.postPulse"
class="inline-input"
style="width: 50px"
/>
<span>次/分</span>
<span class="ml-20">R</span>
<el-input
v-model="state.formData.postRespiration"
class="inline-input"
style="width: 50px"
/>
<span>次/分</span>
<span class="ml-20">BP</span>
<el-input v-model="state.formData.postBloodPressure" class="inline-input" />
<span>mmHg</span>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">意识状态</span>
<el-checkbox-group v-model="state.formData.postConsciousness">
<el-checkbox :label="1">清醒</el-checkbox>
<el-checkbox :label="2">未清醒</el-checkbox>
<el-checkbox :label="3">其他</el-checkbox>
</el-checkbox-group>
<span v-if="state.formData.postConsciousness.includes(3)"
>其他：
<el-input v-model="state.formData.postConsciousnessOther" class="inline-input"
/></span>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">皮肤情况</span>
<el-checkbox-group v-model="state.formData.postSkinCondition">
<el-checkbox :label="1">正常</el-checkbox>
<el-checkbox :label="2">破损</el-checkbox>
<el-checkbox :label="3">压力性损伤</el-checkbox>
<el-checkbox :label="4">其他</el-checkbox>
</el-checkbox-group>
<span v-if="state.formData.postSkinCondition.includes(4)"
>其他： <el-input v-model="state.formData.postSkinOther" class="inline-input"
/></span>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="form-item">
<span class="item-label">皮肤情况</span>
<span>部位</span>
<el-input v-model="state.formData.postSkinPosition1" class="inline-input" style="width: 50px" />
<span>面积</span>
<el-input
v-model="state.formData.postSkinArea1"
class="inline-input"
style="width: 50px"
/>
<span>×</span>
<el-input
v-model="state.formData.postSkinArea2"
class="inline-input"
style="width: 50px"
/>
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<span>部位</span>
<el-input v-model="state.formData.postSkinPosition2" class="inline-input" style="width: 50px" />
<span>面积</span>
<el-input
v-model="state.formData.postSkinArea3"
class="inline-input"
style="width: 50px"
/>
<span>×</span>
<el-input
v-model="state.formData.postSkinArea4"
class="inline-input"
style="width: 50px"
/>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">术后管路</span>
<el-checkbox-group v-model="state.formData.postOperativePipeline">
<el-checkbox :label="1">无</el-checkbox>
<el-checkbox :label="2">中心静脉置管</el-checkbox>
<el-checkbox :label="3">动脉置管</el-checkbox>
<el-checkbox :label="4">气管插管</el-checkbox>
<el-checkbox :label="5">胃管</el-checkbox>
<el-checkbox :label="6">尿管</el-checkbox>
<el-checkbox :label="7">引流管</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">外周静脉通路</span>
<el-input
v-model="state.formData.postPeripheralVein"
class="inline-input"
style="width: 50px"
/>
<span>条</span>
<el-checkbox-group v-model="state.formData.postVeinPosition" class="ml-20">
<el-checkbox :label="1">右上肢</el-checkbox>
<el-checkbox :label="2">右下肢</el-checkbox>
<el-checkbox :label="3">左上肢</el-checkbox>
<el-checkbox :label="4">左下肢</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">携带物品</span>
<el-checkbox-group v-model="state.formData.postCarryItems">
<el-checkbox :label="1">病历</el-checkbox>
<el-checkbox :label="2">药物</el-checkbox>
<el-checkbox :label="3">影像资料</el-checkbox>
<el-checkbox :label="4">胸/腹带</el-checkbox>
<el-checkbox :label="5">血制品</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<span class="item-label">镇痛泵</span>
<el-radio-group v-model="state.formData.painPump">
<el-radio :label="1">无</el-radio>
<el-radio :label="2">有</el-radio>
</el-radio-group>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="form-item">
<span class="item-label" style="width: 220px;">手术室/麻醉复苏室护士签名</span>
<el-input v-model="state.formData.surgeryRecoveryNurseName" class="inline-input" />
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<span class="item-label">病房护士签名</span>
<el-input v-model="state.formData.postWardNurseName" class="inline-input" />
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<span class="item-label">病房护士填写</span>
<span>P</span>
<el-input
v-model="state.formData.wardNursePulse"
class="inline-input"
style="width: 50px"
/>
<span>次/分</span>
<span class="ml-10">BP</span>
<el-input
v-model="state.formData.wardNurseBloodPressure"
class="inline-input"
style="width: 80px"
/>
<span>mmHg</span>
</div>
</el-col>
<el-col :span="12">
<div class="form-item">
<span class="item-label">交接时间</span>
<el-input v-model="state.formData.postHandoverTime" class="inline-input" />
</div>
</el-col>
</el-row>
</div>
<!-- 其他 -->
<div class="form-section">
<div class="section-title">其他</div>
<el-row :gutter="20">
<el-col :span="24">
<div class="form-item">
<el-checkbox-group v-model="state.formData.otherItems">
<el-checkbox :label="1">离院</el-checkbox>
<el-checkbox :label="2">死亡</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
</div>
</el-form>
</div>
</div>
</template>
<script setup>
defineOptions({
name: 'SurgicalPatientHandover',
});
import { getCurrentInstance, onBeforeMount, onMounted, reactive } from 'vue';
import { ElMessageBox, ElMessage, ElLoading, ElTree } from 'element-plus';
const { proxy } = getCurrentInstance();
const emits = defineEmits(['submitOk']);
const props = defineProps({});
const state = reactive({
formData: {
// 患者基本信息
date: '2025/8/13 13:36:41',
patientName: '于学斌',
gender: '男',
age: '46',
department: '普外科门诊区',
bedNumber: '035',
hospitalNumber: '2508000328',
preDiagnosis: '胆囊结石',
surgeryMethod: '腹腔镜胆囊切除术',
// 术前交接记录
drugAllergy: 1, // 1-无, 2-有
allergyDrugName: '',
identityConfirm: [1, 2, 3], // 1-患者姓名核实, 2-病例核实, 3-腕带核
surgeryMark: 1, // 1-无, 2-有
temperature: '37.5',
pulse: '78',
respiration: '19',
bloodPressure: '124/76',
consciousness: [1], // 1-清醒, 2-嗜睡, 3-意识模糊, 4-躁动, 5-偏瘫, 6-昏迷
skinCondition: [1], // 1-正常, 2-破损, 3-压力性损伤, 4-其他
skinOther: '',
skinPosition1: '',
skinArea1: '',
skinPosition2: '',
skinArea2: '',
preOperativePipeline: [1], // 1-无, 2-中心静脉置管, 3-动脉置管, 4-气管插管, 5-胃管, 6-尿管, 7-引流管
peripheralVein: '1',
veinPosition: [1], // 1-右上肢, 2-右下肢, 3-左上肢, 4-左下肢
confirmItems: [1, 2], // 1-禁食水, 2-备皮, 3-无活动义齿, 4-无随形眼镜, 5-摘首饰, 6-非月经期, 7-病员服
carryItems: [1, 2], // 1-病例, 2-药物, 3-影像资料, 4-胸/腹带, 5-血制品
wardNurseName: '周春贺',
surgeryNurseName: '',
handoverTime: '2025/8/13 13:40:37',
// 术后交接记录
postPulse: '',
postRespiration: '',
postBloodPressure: '',
postConsciousness: [], // 1-清醒, 2-未清醒, 3-其他
postConsciousnessOther: '',
postSkinCondition: [], // 1-正常, 2-破损, 3-压力性损伤, 4-其他
postSkinOther: '',
postSkinPosition1: '',
postSkinArea1: '',
postSkinPosition2: '',
postSkinArea2: '',
postOperativePipeline: [], // 1-无, 2-中心静脉置管, 3-动脉置管, 4-气管插管, 5-胃管, 6-尿管, 7-引流管
postPeripheralVein: '',
postVeinPosition: [], // 1-右上肢, 2-右下肢, 3-左上肢, 4-左下肢
postCarryItems: [], // 1-病历, 2-药物, 3-影像资料, 4-胸/腹带, 5-血制品
painPump: 1, // 1-无, 2-有
surgeryRecoveryNurseName: '',
postWardNurseName: '',
wardNursePulse: '',
wardNurseBloodPressure: '',
postHandoverTime: '',
// 其他
otherItems: [], // 1-离院, 2-死亡
},
});
const submit = ()=> {
// ElMessage.success('提交成功');
emits('submitOk',state.formData)
}
const setFormData = (data) => {
if (data) {
state.formData = data;
}
}
onBeforeMount(() => {});
onMounted(() => {});
defineExpose({ state, submit,setFormData });
</script>
<style lang="scss" scoped>
.surgicalPatientHandover-container {
padding: 20px;
.handover-form {
width: 100%;
max-width: 900px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
.form-header {
text-align: center;
margin-bottom: 20px;
.hospital-name {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.form-title {
font-size: 20px;
font-weight: bold;
}
}
.patient-info {
margin-bottom: 20px;
.info-item {
line-height: 30px;
}
}
.handover-form-content {
.form-section {
margin-bottom: 20px;
border: 1px solid #ddd;
.section-title {
font-weight: bold;
padding: 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.form-item {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
&:last-child {
border-bottom: none;
}
.item-label {
display: inline-block;
width: 120px;
font-weight: bold;
}
.inline-input {
width: 150px;
margin: 0 5px;
}
.ml-10 {
margin-left: 10px;
}
.ml-20 {
margin-left: 20px;
}
}
}
}
:deep(.el-input-group__prepend){
padding: 0 8px;
}
:deep(.el-input-group__append){
padding: 0 8px;
}
}
}
</style>

44
openhis-ui-vue3/src/template/template1.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div class="template-content">
<div class="template-header">
<h3>股骨头坏死(模板1)</h3>
</div>
<div class="template-body">
<p>主诉：左侧髋部疼痛X个月，加重1周。</p>
<p>现病史：患者X个月前无明显诱因出现左侧髋部疼痛，活动后加重，休息后减轻，未予重视。1周前疼痛加重，行走困难，遂来我院就诊。</p>
<p>既往史：否认高血压、糖尿病、冠心病等慢性病史，否认手术、外伤史，否认药物过敏史。</p>
<p>体格检查：左侧髋关节压痛(+)，活动受限，左下肢肌力下降。</p>
<p>辅助检查：DR示左侧股骨头坏死。</p>
<p>诊断：左侧股骨头坏死。</p>
<p>治疗方案：1. 避免负重；2. 药物治疗；3. 必要时手术治疗。</p>
</div>
</div>
</template>
<script setup>
defineOptions({
name: 'Template1'
})
// 可以在这里添加组件逻辑
</script>
<style scoped>
.template-content {
background-color: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
min-height: 300px;
}
.template-header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
}
.template-body p {
margin-bottom: 10px;
line-height: 1.5;
}
</style>

44
openhis-ui-vue3/src/template/template2.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div class="template-content">
<div class="template-header">
<h3>上呼吸道感染(模板2)</h3>
</div>
<div class="template-body">
<p>主诉：发热、咳嗽2天。</p>
<p>现病史：患者2天前因受凉后出现发热，体温最高38.5℃，伴咳嗽、咽痛，无咳痰、胸痛等不适。自服感冒药后症状无明显缓解，遂来我院就诊。</p>
<p>既往史：体健，否认慢性病史，否认手术、外伤史，否认药物过敏史。</p>
<p>体格检查：体温38.2℃，咽部充血，双侧扁桃体Ⅰ度肿大，双肺呼吸音清，未闻及干湿啰音。</p>
<p>辅助检查：血常规示白细胞计数正常，淋巴细胞比例升高。</p>
<p>诊断：急性上呼吸道感染。</p>
<p>治疗方案：1. 注意休息，多饮水；2. 对症治疗；3. 必要时抗病毒治疗。</p>
</div>
</div>
</template>
<script setup>
defineOptions({
name: 'Template2'
})
// 可以在这里添加组件逻辑
</script>
<style scoped>
.template-content {
background-color: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
min-height: 300px;
}
.template-header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
}
.template-body p {
margin-bottom: 10px;
line-height: 1.5;
}
</style>

210
openhis-ui-vue3/src/template/template3.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<el-form
ref="ruleFormRef"
style="max-width: 600px"
:model="ruleForm"
:rules="rules"
label-width="auto"
>
<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"
aria-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"
aria-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 location" prop="location">
<el-segmented v-model="ruleForm.location" :options="locationOptions" />
</el-form-item>
<el-form-item label="Activity type" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox value="Online activities" name="type">
Online activities
</el-checkbox>
<el-checkbox value="Promotion activities" name="type">
Promotion activities
</el-checkbox>
<el-checkbox value="Offline activities" name="type">
Offline activities
</el-checkbox>
<el-checkbox value="Simple brand exposure" name="type">
Simple brand exposure
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio value="Sponsorship">Sponsorship</el-radio>
<el-radio value="Venue">Venue</el-radio>
</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>
</template>
<script lang="ts" setup>
defineOptions({
name: 'Template3'
})
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
name: string
region: string
count: string
date1: string
date2: string
delivery: boolean
location: string
type: string[]
resource: string
desc: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
name: 'Hello',
region: '',
count: '',
date1: '',
date2: '',
delivery: false,
location: '',
type: [],
resource: '',
desc: '',
})
const locationOptions = ['Home', 'Company', 'School']
const rules = reactive<FormRules<RuleForm>>({
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
],
region: [
{
required: true,
message: 'Please select Activity zone',
trigger: 'change',
},
],
count: [
{
required: true,
message: 'Please select Activity count',
trigger: 'change',
},
],
date1: [
{
type: 'date',
required: true,
message: 'Please pick a date',
trigger: 'change',
},
],
date2: [
{
type: 'date',
required: true,
message: 'Please pick a time',
trigger: 'change',
},
],
location: [
{
required: true,
message: 'Please select a location',
trigger: 'change',
},
],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change',
},
],
resource: [
{
required: true,
message: 'Please select activity resource',
trigger: 'change',
},
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' },
],
})
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!', fields)
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
const options = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`,
}))
</script>