Web/src/pages/system/app/form.vue

@@ -0,0 +1,63 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <div class="yo-form-group">
+      <a-form-model-item label="应用名称" prop="name">
+        <a-input placeholder="请输入应用名称" v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item label="唯一编码" prop="code">
+        <a-input placeholder="请输入唯一编码" v-model="form.code" />
+      </a-form-model-item>
+      <a-form-model-item label="排序" prop="sort">
+        <a-input-number
+          :max="1000"
+          :min="0"
+          class="w-100-p"
+          placeholder="请输入排序"
+          v-model="form.sort"
+        />
+      </a-form-model-item>
+    </div>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: 'N',
+      },
+      rules: {
+        name: [{ required: true, message: '请输入应用名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>