arms-app 1.0.75 → 1.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arms-app",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "description": "一个基于 Express 的 Web 应用1",
   "main": "index.js",
   "scripts": {

package/view/1.d

@@ -0,0 +1,105 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="innerVisible"
+    :close-on-click-modal="false"
+    @closed="onClosed"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="90px"
+    >
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="form.email" />
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer">
+      <el-button @click="innerVisible = false">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="submit">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "FormDialog",
+  props: {
+    // 父组件 v-model
+    value: { type: Boolean, default: false },
+    title: { type: String, default: "表单" },
+
+    // 初始数据（编辑时传 row）
+    initialData: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      innerVisible: false,
+      submitting: false,
+      form: { name: "", email: "" },
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        email: [
+          { required: true, message: "请输入邮箱", trigger: "blur" },
+          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  watch: {
+    // 父 -> 子
+    value: {
+      immediate: true,
+      handler(v) {
+        this.innerVisible = v;
+        if (v) this.resetFromInitial();
+      }
+    },
+    // 子 -> 父（保证父组件状态同步）
+    innerVisible(v) {
+      this.$emit("input", v);
+    },
+    // 如果父组件换了 initialData，且弹窗开着，就刷新表单
+    initialData: {
+      deep: true,
+      handler() {
+        if (this.innerVisible) this.resetFromInitial();
+      }
+    }
+  },
+  methods: {
+    resetFromInitial() {
+      const base = { name: "", email: "" };
+      this.form = Object.assign({}, base, this.initialData);
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate();
+      });
+    },
+
+    onClosed() {
+      // 关掉后清理，避免下次打开残留
+      this.resetFromInitial();
+      this.$emit("closed");
+    },
+
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) return;
+        this.submitting = true;
+
+        // 把数据交给父组件处理；父组件成功后调用 done() 关闭
+        const done = () => (this.innerVisible = false);
+        this.$emit("submit", { ...this.form }, done);
+
+        this.submitting = false;
+      });
+    }
+  }
+};
+</script>

package/view/5.d

@@ -1,106 +0,0 @@
-<template>
-  <section class="number-input-page">
-    <h1>数字输入示例</h1>
-    <p>请输入非负数字，最多两位小数：</p>
-    <div class="inputs-row">
-      <div class="input-item">
-        <span class="label">输入框 1：</span>
-        <el-input
-          v-model="value1"
-          placeholder="请输入数值"
-          clearable
-          @input="handleInput1"
-        />
-      </div>
-      <div class="input-item">
-        <span class="label">输入框 2：</span>
-        <el-input
-          v-model="value2"
-          placeholder="请输入数值"
-          clearable
-          @input="handleInput2"
-        />
-      </div>
-      <el-button type="primary" @click="onSearch">搜索</el-button>
-    </div>
-    <p class="preview">
-      输入框1：{{ value1 || '（空）' }}，
-      输入框2：{{ value2 || '（空）' }}
-    </p>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "NumberInputView",
-  data() {
-    return {
-      value1: "",
-      value2: "",
-    };
-  },
-  methods: {
-    normalizeNumber(val) {
-      let v = String(val);
-      v = v.replace(/[^\d.]/g, "");
-      const dotIndex = v.indexOf(".");
-      if (dotIndex !== -1) {
-        v =
-          v.slice(0, dotIndex + 1) + v.slice(dotIndex + 1).replace(/\./g, "");
-      }
-      if (v.startsWith(".")) {
-        v = "0" + v;
-      }
-      v = v.replace(/^0+(\d)/, "$1");
-      v = v.replace(/^(\d+)(\.\d{0,2}).*$/, "$1$2");
-      return v;
-    },
-    handleInput1(val) {
-      this.value1 = this.normalizeNumber(val);
-    },
-    handleInput2(val) {
-      this.value2 = this.normalizeNumber(val);
-    },
-    onSearch() {
-      if (!this.value1 || !this.value2) {
-        this.$message.warning("请先输入两个数字");
-        return;
-      }
-      const n1 = parseFloat(this.value1);
-      const n2 = parseFloat(this.value2);
-      if (Number.isNaN(n1) || Number.isNaN(n2)) {
-        this.$message.error("输入的内容不是有效数字");
-        return;
-      }
-      if (n1 > n2) {
-        this.$message.error("输入框1的值不能大于输入框2，且输入框2不能小于输入框1");
-        return;
-      }
-      this.$message.success("校验通过");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.number-input-page {
-  padding: 24px;
-}
-.preview {
-  margin-top: 12px;
-}
-.inputs-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 12px;
-}
-.input-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.label {
-  white-space: nowrap;
-}
-</style>