feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json
This commit is contained in:
aurora-admin
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Admin · FormModal</title>
|
||||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||||
<link rel="stylesheet" href="./FormModal.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="aa-page">
|
||||
<h2 class="aa-h2">FormModal 表单弹窗</h2>
|
||||
<p class="aa-desc">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>
|
||||
|
||||
<div class="aa-demo">
|
||||
<button class="aa-btn aa-btn--primary" id="open">新建用户</button>
|
||||
<p class="aa-code-tip" id="out"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aa-formmodal-mask" id="mask" style="display:none">
|
||||
<div class="aa-formmodal">
|
||||
<div class="aa-formmodal-head"><span>新建用户</span><button class="aa-formmodal-close" id="close">×</button></div>
|
||||
<div class="aa-formmodal-body">
|
||||
<div class="aa-form-row">
|
||||
<label class="aa-form-label"><span class="req">*</span>姓名</label>
|
||||
<input class="aa-form-input" id="f-name" placeholder="请输入姓名" />
|
||||
<div class="aa-form-err" id="e-name" style="display:none">姓名不能为空</div>
|
||||
</div>
|
||||
<div class="aa-form-row">
|
||||
<label class="aa-form-label"><span class="req">*</span>邮箱</label>
|
||||
<input class="aa-form-input" id="f-email" placeholder="name@example.com" />
|
||||
<div class="aa-form-err" id="e-email" style="display:none">邮箱格式不正确</div>
|
||||
</div>
|
||||
<div class="aa-form-row">
|
||||
<label class="aa-form-label">角色</label>
|
||||
<input class="aa-form-input" id="f-role" placeholder="如：管理员" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="aa-formmodal-foot">
|
||||
<button class="aa-btn" id="cancel">取消</button>
|
||||
<button class="aa-btn aa-btn--primary" id="ok">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var mask = document.getElementById('mask');
|
||||
var out = document.getElementById('out');
|
||||
document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };
|
||||
document.getElementById('close').onclick = close;
|
||||
document.getElementById('cancel').onclick = close;
|
||||
function close() { mask.style.display = 'none'; }
|
||||
|
||||
document.getElementById('ok').onclick = function () {
|
||||
var name = document.getElementById('f-name').value.trim();
|
||||
var email = document.getElementById('f-email').value.trim();
|
||||
var ok = true;
|
||||
var eName = document.getElementById('e-name'), eEmail = document.getElementById('e-email');
|
||||
var iName = document.getElementById('f-name'), iEmail = document.getElementById('f-email');
|
||||
eName.style.display = name ? 'none' : 'block'; iName.classList.toggle('is-error', !name); if (!name) ok = false;
|
||||
var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
eEmail.style.display = emailOk ? 'none' : 'block'; iEmail.classList.toggle('is-error', !emailOk); if (!emailOk) ok = false;
|
||||
if (!ok) return;
|
||||
out.textContent = '提交成功：' + name + ' / ' + email + ' / ' + document.getElementById('f-role').value;
|
||||
close();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './FormModal.css';
|
||||
|
||||
const DEFAULT_FIELDS = [
|
||||
{ key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },
|
||||
{ key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },
|
||||
{ key: 'role', label: '角色', placeholder: '如：管理员' }
|
||||
];
|
||||
|
||||
export default function FormModal({ visible = false, title = '表单', fields = DEFAULT_FIELDS, value = {}, onCancel, onSubmit }) {
|
||||
const [form, setForm] = useState(value);
|
||||
const [errors, setErrors] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) { setForm(value); setErrors({}); }
|
||||
}, [visible]);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
const onInput = (key, e) => {
|
||||
setForm((f) => ({ ...f, [key]: e.target.value }));
|
||||
setErrors((er) => { const n = { ...er }; delete n[key]; return n; });
|
||||
};
|
||||
const submit = () => {
|
||||
const errs = {};
|
||||
fields.forEach((f) => {
|
||||
const v = (form[f.key] || '').trim();
|
||||
if (f.required && !v) errs[f.key] = f.label + '不能为空';
|
||||
if (f.key === 'email' && v && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) errs[f.key] = '邮箱格式不正确';
|
||||
});
|
||||
if (Object.keys(errs).length) { setErrors(errs); return; }
|
||||
if (onSubmit) onSubmit({ ...form });
|
||||
if (onCancel) onCancel();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="aa-formmodal-mask" onClick={(e) => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>
|
||||
<div className="aa-formmodal">
|
||||
<div className="aa-formmodal-head">
|
||||
<span>{title}</span>
|
||||
<button className="aa-formmodal-close" onClick={() => onCancel && onCancel()}>×</button>
|
||||
</div>
|
||||
<div className="aa-formmodal-body">
|
||||
{fields.map((f) => (
|
||||
<div className="aa-form-row" key={f.key}>
|
||||
<label className="aa-form-label">
|
||||
{f.required && <span className="req">*</span>}
|
||||
{f.label}
|
||||
</label>
|
||||
<input
|
||||
className={'aa-form-input' + (errors[f.key] ? ' is-error' : '')}
|
||||
value={form[f.key] || ''}
|
||||
placeholder={f.placeholder}
|
||||
onChange={(e) => onInput(f.key, e)}
|
||||
/>
|
||||
{errors[f.key] && <div className="aa-form-err">{errors[f.key]}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="aa-formmodal-foot">
|
||||
<button className="aa-btn" onClick={() => onCancel && onCancel()}>取消</button>
|
||||
<button className="aa-btn aa-btn--primary" onClick={submit}>提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="aa-formmodal-mask" v-if="visible" @click.self="$emit('cancel')">
|
||||
<div class="aa-formmodal">
|
||||
<div class="aa-formmodal-head">
|
||||
<span>{{ title }}</span>
|
||||
<button class="aa-formmodal-close" @click="$emit('cancel')">×</button>
|
||||
</div>
|
||||
<div class="aa-formmodal-body">
|
||||
<div class="aa-form-row" v-for="f in fields" :key="f.key">
|
||||
<label class="aa-form-label"><span class="req" v-if="f.required">*</span>{{ f.label }}</label>
|
||||
<input
|
||||
class="aa-form-input"
|
||||
:class="{ 'is-error': errors[f.key] }"
|
||||
:value="form[f.key]"
|
||||
:placeholder="f.placeholder"
|
||||
@input="onInput(f.key, $event)"
|
||||
/>
|
||||
<div class="aa-form-err" v-if="errors[f.key]">{{ errors[f.key] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aa-formmodal-foot">
|
||||
<button class="aa-btn" @click="$emit('cancel')">取消</button>
|
||||
<button class="aa-btn aa-btn--primary" @click="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AaFormModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
title: { type: String, default: '表单' },
|
||||
fields: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },
|
||||
{ key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },
|
||||
{ key: 'role', label: '角色', placeholder: '如：管理员' }
|
||||
]
|
||||
},
|
||||
value: { type: Object, default: () => ({}) }
|
||||
},
|
||||
data() {
|
||||
return { form: Object.assign({}, this.value), errors: {} };
|
||||
},
|
||||
watch: {
|
||||
visible(v) { if (v) { this.form = Object.assign({}, this.value); this.errors = {}; } }
|
||||
},
|
||||
methods: {
|
||||
onInput(key, e) {
|
||||
this.$set(this.form, key, e.target.value);
|
||||
if (this.errors[key]) this.$delete(this.errors, key);
|
||||
},
|
||||
submit() {
|
||||
var errors = {};
|
||||
this.fields.forEach(function (f) {
|
||||
var v = (this.form[f.key] || '').trim();
|
||||
if (f.required && !v) errors[f.key] = f.label + '不能为空';
|
||||
if (f.key === 'email' && v && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) errors[f.key] = '邮箱格式不正确';
|
||||
}, this);
|
||||
if (Object.keys(errors).length) { this.errors = errors; return; }
|
||||
this.$emit('submit', Object.assign({}, this.form));
|
||||
this.$emit('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style src="./FormModal.css"></style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="aa-formmodal-mask" v-if="visible" @click.self="$emit('cancel')">
|
||||
<div class="aa-formmodal">
|
||||
<div class="aa-formmodal-head">
|
||||
<span>{{ title }}</span>
|
||||
<button class="aa-formmodal-close" @click="$emit('cancel')">×</button>
|
||||
</div>
|
||||
<div class="aa-formmodal-body">
|
||||
<div class="aa-form-row" v-for="f in fields" :key="f.key">
|
||||
<label class="aa-form-label"><span class="req" v-if="f.required">*</span>{{ f.label }}</label>
|
||||
<input
|
||||
class="aa-form-input"
|
||||
:class="{ 'is-error': errors[f.key] }"
|
||||
:value="form[f.key]"
|
||||
:placeholder="f.placeholder"
|
||||
@input="onInput(f.key, $event)"
|
||||
/>
|
||||
<div class="aa-form-err" v-if="errors[f.key]">{{ errors[f.key] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aa-formmodal-foot">
|
||||
<button class="aa-btn" @click="$emit('cancel')">取消</button>
|
||||
<button class="aa-btn aa-btn--primary" @click="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
title: { type: String, default: '表单' },
|
||||
fields: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },
|
||||
{ key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },
|
||||
{ key: 'role', label: '角色', placeholder: '如：管理员' }
|
||||
]
|
||||
},
|
||||
value: { type: Object, default: () => ({}) }
|
||||
});
|
||||
const emit = defineEmits(['cancel', 'submit']);
|
||||
|
||||
const form = ref({ ...props.value });
|
||||
const errors = ref({});
|
||||
watch(
|
||||
() => props.visible,
|
||||
(v) => { if (v) { form.value = { ...props.value }; errors.value = {}; } }
|
||||
);
|
||||
|
||||
function onInput(key, e) {
|
||||
form.value[key] = e.target.value;
|
||||
if (errors.value[key]) delete errors.value[key];
|
||||
}
|
||||
function submit() {
|
||||
const errs = {};
|
||||
props.fields.forEach((f) => {
|
||||
const v = (form.value[f.key] || '').trim();
|
||||
if (f.required && !v) errs[f.key] = f.label + '不能为空';
|
||||
if (f.key === 'email' && v && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) errs[f.key] = '邮箱格式不正确';
|
||||
});
|
||||
if (Object.keys(errs).length) { errors.value = errs; return; }
|
||||
emit('submit', { ...form.value });
|
||||
emit('cancel');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./FormModal.css"></style>
|
||||
Reference in New Issue
Block a user