update info_card (d1641a6d) · Commits · 李子南 / 2022_Spring_IPOUS

.DS_Store

deleted100644 → 0

−10 KiB

File deleted.

OSAP_web/src/components.d.ts

+8 −0

Original line number	Diff line number	Diff line
		@@ -9,16 +9,24 @@ declare module '@vue/runtime-core' {
		BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
		ElButton: typeof import('element-plus/es')['ElButton']
		ElCard: typeof import('element-plus/es')['ElCard']
		ElCol: typeof import('element-plus/es')['ElCol']
		ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
		ElDialog: typeof import('element-plus/es')['ElDialog']
		ElForm: typeof import('element-plus/es')['ElForm']
		ElFormItem: typeof import('element-plus/es')['ElFormItem']
		ElHeader: typeof import('element-plus/es')['ElHeader']
		ElImage: typeof import('element-plus/es')['ElImage']
		ElInput: typeof import('element-plus/es')['ElInput']
		ElMenu: typeof import('element-plus/es')['ElMenu']
		ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
		ElOption: typeof import('element-plus/es')['ElOption']
		ElRow: typeof import('element-plus/es')['ElRow']
		ElSelect: typeof import('element-plus/es')['ElSelect']
		ElTable: typeof import('element-plus/es')['ElTable']
		ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
		ElUpload: typeof import('element-plus/es')['ElUpload']
		HelloWorld: typeof import('./components/HelloWorld.vue')['default']
		Info: typeof import('./components/info.vue')['default']
		Information_box: typeof import('./components/Information_box.vue')['default']
		Record: typeof import('./components/Record.vue')['default']
		RouterLink: typeof import('vue-router')['RouterLink']

OSAP_web/src/components/Information_box.vue

+70 −30

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import {ref} from "vue";
		import {ElMessage} from 'element-plus'

		let button_click: boolean = false;

		</script>

		<template>
		<el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
		size="default" @submit.prevent>
		<el-card
		id="information"
		class="information"
		style="border-radius: 8px"
		>
		<div class='patient_info'>
		<p><b>
		病人信息
		</b></p>
		<template #header>
		<div class="clear-fix">
		<span style="margin-left: 1%">病人信息</span>
		</div>
		<el-button type="primary" class="edit_button" @click="button_click = !button_click">
		{{ button_click ? '编辑信息' : '更改信息' }}
		</el-button>
		</template>
		<el-row>
		<el-form :inline="true" :model="formInline" class="first_line_info">
		<el-form-item label="姓名">
		<el-input v-model="patient.name" placeholder=""/>
		</el-form-item>
		<el-form-item label="性别">
		<el-select v-model="patient.sex" placeholder="">
		<el-option label="男" value="M"/>
		<el-option label="女" value="F"/>
		</el-select>
		</el-form-item>
		</el-form>
		</el-row>
		<el-row>
		<el-form :inline="true" :model="formInline" class="first_line_info">
		<el-form-item label="年龄">
		<el-input v-model="patient.age" placeholder=""/>
		</el-form-item>
		<el-form-item label="联系方式">
		<el-input v-model="patient.tel" placeholder=""/>
		</el-form-item>
		</el-form>
		</el-row>
		<el-row>
		<el-form-item label="" label-width="0" prop="pictureupload93431" class="small-margin-bottom">
		<el-upload :file-list="pictureupload93431FileList" :headers="pictureupload93431UploadHeaders"
		:data="pictureupload93431UploadData" list-type="picture-card" show-file-list :limit="1">
		<template #default><i class="el-icon-plus"></i></template>
		</el-upload>
		</el-form-item>
		</el-row>
		</el-card>
		</el-form>
		</template>

		<style scoped>
		@@ -32,13 +54,31 @@ let button_click: boolean = false;
		left: 220px;
		}

		.patient_info {
		position: relative;
		right: 420px;
		.information_text {
		font-size: large;
		margin-left: 1%;
		}
		</style>

		.edit_button {
		position: relative;
		top: 260px;
		<script setup lang="ts">
		import {reactive, ref} from "vue";
		import {ElMessage} from 'element-plus'

		const patient = reactive({
		name: '',
		sex: '',
		age: '',
		tel: ''
		})

		const options = [
		{
		value: '男',
		label: '男'
		},
		{
		value: '女',
		label: '女'
		}
		</style>
		No newline at end of file
		]
		</script>
		No newline at end of file

OSAP_web/src/components/info.vue

0 → 100644

+202 −0

Original line number	Diff line number	Diff line
		<template>
		<el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
		size="default" @submit.prevent>
		<div class="card-container">
		<el-card style="border-radius: 8px" shadow="never">
		<template #header>
		<span style="margin-left: -94%; font-weight: bold">病人信息</span>
		</template>
		<el-row>
		<el-col :span="11" class="grid-cell">
		<el-form-item label="姓名" prop="name_input">
		<el-input v-model="formData.name_input" size="large" type="text" clearable></el-input>
		</el-form-item>
		</el-col>
		<el-col :span="11" :push="1" class="grid-cell">
		<el-form-item label="性别" prop="sex_select">
		<el-select v-model="formData.sex_select" class="full-width-input" size="large" clearable>
		<el-option v-for="(item, index) in sex_selectOptions" :key="index" :label="item.label"
		:value="item.value" :disabled="item.disabled"></el-option>
		</el-select>
		</el-form-item>
		</el-col>
		</el-row>
		<el-row>
		<el-col :span="11" class="grid-cell">
		<el-form-item label="年龄" prop="age_input">
		<el-input v-model="formData.age_input" size="large" type="text" clearable></el-input>
		</el-form-item>
		</el-col>
		<el-col :span="11" :push="1" class="grid-cell">
		<el-form-item label="联系方式" prop="tel_input">
		<el-input v-model="formData.tel_input" size="large" type="text" clearable></el-input>
		</el-form-item>
		</el-col>
		</el-row>
		<el-row>
		<el-col :span="15" class="grid-cell">
		<el-form-item label="眼底图片上传" label-width="120px" prop="pic_upload">
		<el-upload :file-list="pic_uploadFileList" :headers="pic_uploadUploadHeaders"
		:data="pic_uploadUploadData" list-type="picture-card" show-file-list :limit="1">
		<template
		#default><i class="el-icon-plus"></i></template>
		</el-upload>
		</el-form-item>
		</el-col>
		</el-row>
		</el-card>
		</div>
		</el-form>

		</template>

		<script>
		import {
		defineComponent,
		toRefs,
		reactive,
		getCurrentInstance
		}
		from 'vue'

		export default defineComponent({
		components: {},
		props: {},
		setup() {
		const state = reactive({
		formData: {
		name_input: "",
		sex_select: 2,
		age_input: "",
		tel_input: "",
		pic_upload: null,
		},
		rules: {
		age_input: [{
		pattern: /^\d+(\.\d+)?$/,
		trigger: ['blur', 'change'],
		message: '请输入阿拉伯数字'
		}],
		tel_input: [{
		pattern: /^\d+(\.\d+)?$/,
		trigger: ['blur', 'change'],
		message: '请输入阿拉伯数字'
		}],
		},
		sex_selectOptions: [{
		"label": "男",
		"value": "M"
		}, {
		"label": "女",
		"value": "F"
		}],
		pic_uploadFileList: [],
		pic_uploadUploadHeaders: {},
		pic_uploadUploadData: {},
		})
		const instance = getCurrentInstance()
		const submitForm = () => {
		instance.ctx.$refs['vForm'].validate(valid => {
		if (!valid) return
		//TODO: 提交表单
		})
		}
		const resetForm = () => {
		instance.ctx.$refs['vForm'].resetFields()
		}
		return {
		...toRefs(state),
		submitForm,
		resetForm
		}
		}
		})

		</script>

		<style lang="scss">
		.el-input-number.full-width-input,
		.el-cascader.full-width-input {
		width: 100% !important;
		}

		.el-form-item--medium {
		.el-radio {
		line-height: 36px !important;
		}

		.el-rate {
		margin-top: 8px;
		}
		}

		.el-form-item--small {
		.el-radio {
		line-height: 32px !important;
		}

		.el-rate {
		margin-top: 6px;
		}
		}

		.el-form-item--mini {
		.el-radio {
		line-height: 28px !important;
		}

		.el-rate {
		margin-top: 4px;
		}
		}

		.float-right {
		float: right;
		}

		</style>

		<style lang="scss" scoped>
		div.table-container {
		table.table-layout {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;

		td.table-cell {
		display: table-cell;
		height: 36px;
		border: 1px solid #e1e2e3;
		}
		}
		}

		div.tab-container {
		}

		.label-left-align :deep(.el-form-item__label) {
		text-align: left;
		}

		.label-center-align :deep(.el-form-item__label) {
		text-align: center;
		}

		.label-right-align :deep(.el-form-item__label) {
		text-align: right;
		}

		.custom-label {
		}

		.static-content-item {
		min-height: 20px;
		display: flex;
		align-items: center;

		:deep(.el-divider--horizontal) {
		margin: 0;
		}
		}

		</style>
		No newline at end of file

osap_web/src/App.vue

+7 −6

Original line number	Diff line number	Diff line
		<template>
		<el-config-provider namespace="ep">
		<BaseHeader/>
		<div class="information_box">
		<Information_box/>
		</div>
		<info class="info"></info>
		<Record/>
		</el-config-provider>
		</template>
		@@ -14,7 +12,10 @@
		color: var(--ep-text-color-primary);
		}

		.element-plus-logo {
		width: 50%;
		.info {
		height: 10%;
		width: 70%;
		margin-top: 2%;
		margin-left: 15%;
		}
		</style>

Admin message