fix: advancedForm

src/views/form/advancedForm/RepositoryForm.vue

@@ -1,111 +1,111 @@
-<template>
-  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
-    <a-row class="form-row">
-      <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          label="仓库名"
-          fieldDecoratorId="repository.name"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}"
-        >
-          <a-input placeholder="请输入仓库名称" />
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          label="仓库域名"
-          fieldDecoratorId="repository.domain"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}"
-        >
-          <a-input addonBefore="http://" addonAfter=".github.io" placeholder="请输入"/>
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
-          label="仓库管理员"
-          fieldDecoratorId="repository.manager"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}"
-        >
-          <a-select placeholder="请选择管理员">
-            <a-select-option value="王同学">王同学</a-select-option>
-            <a-select-option value="李同学">李同学</a-select-option>
-            <a-select-option value="黄同学">黄同学</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-col>
-    </a-row>
-    <a-row class="form-row">
-      <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          label="审批人"
-          fieldDecoratorId="repository.auditor"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}"
-        >
-          <a-select placeholder="请选择审批员">
-            <a-select-option value="王晓丽">王晓丽</a-select-option>
-            <a-select-option value="李军">李军</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          label="生效日期"
-          fieldDecoratorId="repository.effectiveDate"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}"
-        >
-          <a-range-picker style="width: 100%" />
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
-          label="仓库类型"
-          fieldDecoratorId="repository.type"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}"
-        >
-          <a-select placeholder="请选择仓库类型">
-            <a-select-option value="公开">公开</a-select-option>
-            <a-select-option value="私密">私密</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-col>
-    </a-row>
-    <a-form-item v-if="showSubmit">
-      <a-button htmlType="submit" >Submit</a-button>
-    </a-form-item>
-  </a-form>
-</template>
-
-<script>
-  export default {
-    name: "RepositoryForm",
-    props: {
-      showSubmit: {
-        type: Boolean,
-        default: false
-      }
-    },
-    methods: {
-      handleSubmit (e) {
-        e.preventDefault()
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            this.$notification['error']({
-              message: 'Received values of form:',
-              description: values
-            })
-          }
-        })
-      },
-      validate (rule, value, callback) {
-        const regex = /^user-(.*)$/
-        if (!regex.test(value)) {
-          callback('需要以 user- 开头')
-        }
-        callback()
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
+<template>
+  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="仓库名"
+          fieldDecoratorId="repository.name"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入仓库名称" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="仓库域名"
+          fieldDecoratorId="repository.domain"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}"
+        >
+          <a-input addonBefore="http://" addonAfter=".com" placeholder="请输入"/>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库管理员"
+          fieldDecoratorId="repository.manager"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}"
+        >
+          <a-select placeholder="请选择管理员">
+            <a-select-option value="王同学">王同学</a-select-option>
+            <a-select-option value="李同学">李同学</a-select-option>
+            <a-select-option value="黄同学">黄同学</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="审批人"
+          fieldDecoratorId="repository.auditor"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}"
+        >
+          <a-select placeholder="请选择审批员">
+            <a-select-option value="王晓丽">王晓丽</a-select-option>
+            <a-select-option value="李军">李军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="生效日期"
+          fieldDecoratorId="repository.effectiveDate"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}"
+        >
+          <a-range-picker style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库类型"
+          fieldDecoratorId="repository.type"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}"
+        >
+          <a-select placeholder="请选择仓库类型">
+            <a-select-option value="公开">公开</a-select-option>
+            <a-select-option value="私密">私密</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+  export default {
+    name: "RepositoryForm",
+    props: {
+      showSubmit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      handleSubmit (e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+      },
+      validate (rule, value, callback) {
+        const regex = /^user-(.*)$/
+        if (!regex.test(value)) {
+          callback('需要以 user- 开头')
+        }
+        callback()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
 </style>

src/views/form/advancedForm/TaskForm.vue

@@ -1,103 +1,103 @@
-<template>
-  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
-    <a-row class="form-row">
-      <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          label="任务名"
-          fieldDecoratorId="task.name"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
-        >
-          <a-input placeholder="请输入任务名称" />
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          label="任务描述"
-          fieldDecoratorId="task.description"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
-        >
-          <a-input placeholder="请输入任务描述"/>
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
-          label="执行人"
-          fieldDecoratorId="task.executor"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}"
-        >
-          <a-select placeholder="请选择执行人">
-            <a-select-option value="黄丽丽">黄丽丽</a-select-option>
-            <a-select-option value="李大刀">李大刀</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-col>
-    </a-row>
-    <a-row class="form-row">
-      <a-col :lg="6" :md="12" :sm="24">
-        <a-form-item
-          label="责任人"
-          fieldDecoratorId="task.manager"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}"
-        >
-          <a-select placeholder="请选择责任人">
-            <a-select-option value="王伟">王伟</a-select-option>
-            <a-select-option value="李红军">李红军</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
-        <a-form-item
-          label="提醒时间"
-          fieldDecoratorId="task.time"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}"
-        >
-          <a-time-picker style="width: 100%" />
-        </a-form-item>
-      </a-col>
-      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
-        <a-form-item
-          label="任务类型"
-          fieldDecoratorId="task.type"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}"
-        >
-          <a-select placeholder="请选择任务类型">
-            <a-select-option value="定时执行">定时执行</a-select-option>
-            <a-select-option value="周期执行">周期执行</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-col>
-    </a-row>
-    <a-form-item v-if="showSubmit">
-      <a-button htmlType="submit" >Submit</a-button>
-    </a-form-item>
-  </a-form>
-</template>
-
-<script>
-  export default {
-    name: "TaskForm",
-    props: {
-      showSubmit: {
-        type: Boolean,
-        default: false
-      }
-    },
-    methods: {
-      handleSubmit (e) {
-        e.preventDefault()
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            this.$notification['error']({
-              message: 'Received values of form:',
-              description: values
-            })
-          }
-        })
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
+<template>
+  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="任务名"
+          fieldDecoratorId="task.name"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入任务名称" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="任务描述"
+          fieldDecoratorId="task.description"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入任务描述"/>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="执行人"
+          fieldDecoratorId="task.executor"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}"
+        >
+          <a-select placeholder="请选择执行人">
+            <a-select-option value="黄丽丽">黄丽丽</a-select-option>
+            <a-select-option value="李大刀">李大刀</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="责任人"
+          fieldDecoratorId="task.manager"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}"
+        >
+          <a-select placeholder="请选择责任人">
+            <a-select-option value="王伟">王伟</a-select-option>
+            <a-select-option value="李红军">李红军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="提醒时间"
+          fieldDecoratorId="task.time"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}"
+        >
+          <a-time-picker style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="任务类型"
+          fieldDecoratorId="task.type"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}"
+        >
+          <a-select placeholder="请选择任务类型">
+            <a-select-option value="定时执行">定时执行</a-select-option>
+            <a-select-option value="周期执行">周期执行</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+  export default {
+    name: "TaskForm",
+    props: {
+      showSubmit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      handleSubmit (e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
 </style>