142 lines
3.4 KiB
Vue
142 lines
3.4 KiB
Vue
<template>
|
|
<div class="form-overlay">
|
|
<form class="form-validation-example" @submit.prevent="submitForm">
|
|
<div class="form-header">
|
|
<h5>点检异常数据</h5>
|
|
<p>提交原因</p>
|
|
</div>
|
|
<div class="spacing"></div>
|
|
<div class="form-body">
|
|
<div class="item-chip-container">
|
|
<p>{{ itemName }}</p>
|
|
<IxChip class="chip" background="#FF2640" chip-color="#000028" variant="custom">
|
|
{{ itemTime }} 超出上下限
|
|
</IxChip>
|
|
</div>
|
|
<label for="reason">请输入原因</label>
|
|
<textarea id="reason" v-model="reason"></textarea>
|
|
</div>
|
|
<div class="form-footer">
|
|
<!-- <IxButton type="submit">提交</IxButton> -->
|
|
<IxButton Outline @click="resetForm">重置</IxButton>
|
|
<IxButton Outline @click="$emit('close')">关闭</IxButton>
|
|
<IxButton @click="handleSubmit">提交</IxButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, defineEmits } from 'vue';
|
|
import { IxButton, IxChip } from '@siemens/ix-vue';
|
|
import moment from 'moment-timezone';
|
|
|
|
const props = defineProps({
|
|
itemName: String,
|
|
itemTime: String,
|
|
timezone: String,
|
|
});
|
|
|
|
const reason = ref('');
|
|
|
|
const submitForm = () => {
|
|
console.log('提交原因:', reason.value);
|
|
};
|
|
|
|
const resetForm = () => {
|
|
reason.value = '';
|
|
};
|
|
|
|
const emit = defineEmits(['close', 'submit']);
|
|
|
|
const handleSubmit = () => {
|
|
const currentTime = moment().tz(props.timezone).format('HH:mm');
|
|
emit('submit', currentTime);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
border: white;
|
|
}
|
|
|
|
.form-validation-example {
|
|
background-color:#23233C;
|
|
padding: 2rem;
|
|
border-radius: 0.5rem;
|
|
width: 25rem; /* 设置表单宽度 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 0.0625rem solid white; /* 增加白色边框 */
|
|
}
|
|
|
|
.form-header h5 {
|
|
color: #9898A8; /* 修改颜色 */
|
|
}
|
|
|
|
.form-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* 间隔样式 */
|
|
.spacing {
|
|
height: 0.2vh;
|
|
/* 使用视口高度作为间隔 */
|
|
background-color: #000028;
|
|
/* 与主背景色相同 */
|
|
margin: 0.875rem 0;
|
|
/* 使用相对单位的外边距 */
|
|
}
|
|
|
|
.form-header h5,
|
|
.form-body p,
|
|
.form-body label {
|
|
color: #9898A8; /* 修改颜色 */
|
|
text-align: left; /* 文字靠左对齐 */
|
|
font-size: 0.7rem; /* 字体大小为9px */
|
|
}
|
|
|
|
.form-header p {
|
|
text-align: left; /* 文字靠左对齐 */
|
|
font-size: 0.875rem; /* 字体大小为12px */
|
|
|
|
}
|
|
|
|
.item-chip-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.03125rem; /* 0.5px */
|
|
height: 100%; /* 确保容器高度 */
|
|
}
|
|
|
|
.item-chip-container p {
|
|
display: flex;
|
|
align-items: center; /* 上下居中 */
|
|
margin: 0; /* 移除默认外边距 */
|
|
line-height: 1; /* 确保行高 */
|
|
}
|
|
|
|
.chip {
|
|
font-size: 0.7rem; /* 字体大小为9px */
|
|
}
|
|
</style>
|